@beweco/aurora-ui 1.0.0-beta.139 → 1.0.0-beta.141

package/dist/index.cjs.js

@@ -19,27 +19,104 @@ const CardBody = react.Card.Content;
 // Breadcrumbs: el `Breadcrumbs` raíz sobrevive igual; su hijo suelto se renombra Y cambia grafía
 // (`BreadcrumbItem` v2 → `BreadcrumbsItem`/`Breadcrumbs.Item` v3, con "s").
 const BreadcrumbItem = react.Breadcrumbs.Item;
-// Autocomplete / Select: los ítems v2 (`AutocompleteItem`, `SelectItem`) y sus secciones
-// (`SelectSection`) no sobreviven planos en v3 — se resuelven con `ListBox.Item`/
-// `ListBox.Section`, la misma pieza que usan tanto el `ComboBox` (ver `AuraAutocomplete`) como el
-// `Select` compound.
-//
-// ⚠️ Limitación conocida (ver decisiones-aceptadas-f2.md, D-F2-2): v2 identificaba cada item por
-// el `key` de React; v3 usa `id` explícito. El código v2 existente (que solo pasa `key`/
-// `textValue`) sigue compilando y seleccionando bien porque react-aria-components cae al `key` de
-// React cuando no hay `id` en colecciones estáticas (verificado en Storybook) — pero si algún
-// consumidor lee la selección por otra vía, debe migrar sus items a `id` explícito.
 const AutocompleteItem = react.ListBoxItem;
 const SelectItem = react.ListBoxItem;
 const SelectSection = react.ListBoxSection;
 // ---------------------------------------------------------------------------
 // Renombrados simples (el nombre v2 desaparece del todo, 1:1 con un nombre v3)
 // ---------------------------------------------------------------------------
-/** Progress → ProgressBar. */
-const Progress = react.ProgressBar;
+// Progress: ver el bloque «Progress (v2) sobre ProgressBar (v3)» más abajo.
 /** Divider → Separator. El uso INTERNO de la librería ya migró a `Separator` directo
  * (`TagsFilter.tsx`); este shim es solo para las apps, que siguen importando `Divider`. */
 const Divider = react.Separator;
+/**
+ * El relleno de v3 se pinta con `var(--progress-bar-fill)` (`progress-bar.css`), que cada variante
+ * de color fija en la capa `components`. v3 tiene 5 colores y v2 seis, y dos NO coinciden:
+ *
+ * | v2 | literal v2 (`indicator`) | v3 con el mismo nombre | aquí |
+ * |---|---|---|---|
+ * | `primary` (default) | `bg-primary` | — (no existe) | `accent`, que en este repo ES `--color-primary` (`theme-packs.generated.css`: `--accent: var(--color-primary)`) |
+ * | `default` | `bg-default-400` (gris medio) | `--default-foreground` (casi negro) | falso amigo: se repone el gris de v2 |
+ * | `secondary` | `bg-secondary` | — | el `--color-secondary` del pack |
+ *
+ * La variable se pisa con una utilidad (capa `utilities` > `components`), así que no depende del
+ * orden del CSS. `success`/`warning`/`danger` son el mismo nombre y el mismo token en las dos.
+ */
+const PROGRESS_FILL_OVERRIDE = {
+    default: "[--progress-bar-fill:var(--color-default-400)]",
+    secondary: "[--progress-bar-fill:var(--color-secondary)]",
+};
+const PROGRESS_V3_COLOR = {
+    default: undefined,
+    primary: "accent",
+    secondary: undefined,
+    success: "success",
+    warning: "warning",
+    danger: "danger",
+    accent: "accent",
+};
+/** Los hijos que el consumidor ya trae, aplanando Fragments (`Children.toArray` NO los aplana). */
+function flattenChildren(children) {
+    const out = [];
+    for (const child of $8WNJc$react.Children.toArray(children)) {
+        if (!$8WNJc$react.isValidElement(child)) {
+            continue;
+        }
+        if (child.type === $8WNJc$react.Fragment) {
+            out.push(...flattenChildren(child.props.children));
+        }
+        else {
+            out.push(child);
+        }
+    }
+    return out;
+}
+/**
+ * `Progress` de v2 (TECH-2459, hallazgo beweossmbs 23-sep: «es un alias del ProgressBar crudo y
+ * SIN HIJOS NO PINTA»).
+ *
+ * EL DEFECTO. Hasta aquí `Progress` era `ProgressBar` a secas, y el `ProgressBar` de v3 es un
+ * compound: la raíz solo publica el estado, la barra la pintan `ProgressBar.Track` +
+ * `ProgressBar.Fill`, y la etiqueta y el valor, `Label` + `ProgressBar.Output`. El JSX v2 de las
+ * apps (`<Progress value={40} color="primary" showValueLabel />`, 10 usos en beweossmbs) no trae
+ * ninguna de esas piezas, así que salía un `<div role="progressbar">` VACÍO: ni pista, ni relleno,
+ * ni texto. Además `color="primary"` no es un color de v3 y `showValueLabel`/`label`/`classNames`
+ * se descartaban.
+ *
+ * LO QUE HACE. Acepta la API v2 y monta por dentro la anatomía de v3. Es **idempotente por
+ * identidad de `child.type`**: si la app ya pasa `ProgressBar.Track` (o `Progress.Track`),
+ * `ProgressBar.Output` o `Label`, esa pieza no se añade otra vez (mismo criterio que la fachada
+ * `Tabs` con su indicador). Children como función se respetan tal cual.
+ *
+ * LO QUE NO COPIA DE v2, por §9.1 (verse como v3): las alturas de pista (v2 `h-1`/`h-3`/`h-5`,
+ * v3 `h-1`/`h-2`/`h-3`), el radio completo y el fondo `default-300/50` de la pista, y el tamaño de
+ * letra por `size` de la etiqueta. `size` elige el tamaño de v3 del mismo nombre.
+ */
+function ProgressFacade({ label, showValueLabel = false, size = "md", color = "primary", classNames, className, children, ...props }) {
+    if (typeof children === "function") {
+        return (jsxRuntime.jsx(react.ProgressBar, { ...props, size: size, color: PROGRESS_V3_COLOR[color], className: react.cn(PROGRESS_FILL_OVERRIDE[color], classNames?.base, className), children: children }));
+    }
+    const own = flattenChildren(children);
+    const hasTrack = own.some((c) => c.type === react.ProgressBar.Track || c.type === react.ProgressBar.Fill);
+    const hasOutput = own.some((c) => c.type === react.ProgressBar.Output);
+    const hasLabel = own.some((c) => c.type === react.Label);
+    return (jsxRuntime.jsxs(react.ProgressBar, { ...props, size: size, color: PROGRESS_V3_COLOR[color], 
+        // v2: `cn(classNames?.base, className)` en la raíz (`use-progress.mjs`). La variable del
+        // color va primero para que un `[--progress-bar-fill:…]` del consumidor la sustituya.
+        className: react.cn(PROGRESS_FILL_OVERRIDE[color], classNames?.base, className), children: [label != null && label !== false && !hasLabel && (jsxRuntime.jsx(react.Label, { className: classNames?.label, children: label })), showValueLabel && !hasOutput && (jsxRuntime.jsx(react.ProgressBar.Output, { className: classNames?.value })), children, !hasTrack && (jsxRuntime.jsx(react.ProgressBar.Track, { className: classNames?.track, children: jsxRuntime.jsx(react.ProgressBar.Fill, { className: classNames?.indicator }) }))] }));
+}
+/**
+ * `Progress` de v2 con la anatomía de v3 dentro, y con los estáticos del compound colgados
+ * (`Progress.Track`, `Progress.Fill`, `Progress.Output`, `Progress.Root`) para que el marcado v3
+ * siga compilando: son los MISMOS objetos que `ProgressBar.*`, así que la detección por identidad
+ * los reconoce vengan por un nombre o por otro.
+ */
+const Progress = Object.assign(ProgressFacade, {
+    Root: react.ProgressBar.Root,
+    Output: react.ProgressBar.Output,
+    Track: react.ProgressBar.Track,
+    Fill: react.ProgressBar.Fill,
+});
 /**
  * `HeroUIProvider` ya no existe en v3 (los componentes no necesitan Provider para pintarse). Pero
  * el de v2 hacía dos cosas que react-aria sí necesita y que las apps no pueden montar por su
@@ -59,15 +136,42 @@ function HeroUIProvider({ children, locale, navigate, useHref, }) {
     }
     return jsxRuntime.jsx(jsxRuntime.Fragment, { children: contents });
 }
+/*
+ * Literales del `tv` de v2, escritos enteros para que Tailwind 4 los genere (solo emite lo que
+ * aparece en el fuente). v2 decía `rounded-small`/`rounded-large` —clases del plugin `heroui()`,
+ * muertas sin él y que `cn` BORRARÍA— con los valores de su tema: small 8px, large 14px (los
+ * mismos que usan `RADIUS_CLASS` de `Select`/`Input` para `sm`/`lg`). `md` era `rounded-md` a secas
+ * en el `tv` de v2 (el de Tailwind, 6px), no el `medium` del tema: se copia tal cual.
+ */
+const IMAGE_RADIUS_CLASS = {
+    none: "rounded-none",
+    sm: "rounded-[8px]",
+    md: "rounded-md",
+    lg: "rounded-[14px]",
+    full: "rounded-full",
+};
 /**
  * `Image` se elimina en v3 (usar `<img>` nativo, mismo criterio aplicado en
- * `SocialMediaPreview`/`WhatsAppPreview`). Shim: mismo nombre, props de un `<img>` nativo — NO
- * reproduce `radius`/`isBlurred`/`isZoomed`/`fallbackSrc` de v2 (sin equivalente razonable sin
- * reescribir una librería de imágenes completa); limitación documentada.
+ * `SocialMediaPreview`/`WhatsAppPreview`). Shim: un `<img>` nativo con la API de v2 que las apps
+ * escriben (TECH-2459, hallazgo beweossmbs 23-sep: 12 `<Image>` en la app; `radius` en 3,
+ * `classNames` en 3, `removeWrapper` en 2; 0 usos de `isZoomed`/`isBlurred`/`fallbackSrc`/`shadow`).
+ *
+ * - `radius`: con el default de v2 (`lg`). Sin él, las 9 imágenes que NO pasan `radius` salían con
+ *   esquinas rectas en vez de las redondeadas de v2. Va primero en el `cn`: la clase de la app gana.
+ * - `className` + `classNames.img`: en v2 las dos iban al `<img>` (`use-image.mjs`:
+ *   `cn(className, classNames?.img)`), y así aquí.
+ * - `classNames.wrapper`/`zoomedWrapper`/`blurredImg` y `removeWrapper` se ACEPTAN y no pintan: este
+ *   shim no monta envoltorio. En v2 el `<div>` existía para el skeleton, el zoom y el desenfoque
+ *   (`image.mjs`), y le ponía `max-width: fit-content` en línea — que es exactamente lo que los dos
+ *   `classNames.wrapper` medidos deshacen («El wrapper de HeroUI Image trae `max-w-fit`», con
+ *   `w-full !max-w-full`). Sin envoltorio, el `<img>` con su `w-full` ya ocupa el ancho: el efecto
+ *   buscado sale sin la pieza.
+ * - NO reproduce `isZoomed`/`isBlurred`/`fallbackSrc`/`shadow`/skeleton (0 usos medidos).
  */
-function Image$1(props) {
+function Image$1({ radius = "lg", classNames, removeWrapper: _removeWrapper, className, ...props }) {
+    return (
     // biome-ignore lint/a11y/useAltText: passthrough genérico, `alt` lo exige ComponentProps<'img'>
-    return jsxRuntime.jsx("img", { ...props });
+    jsxRuntime.jsx("img", { ...props, className: react.cn(IMAGE_RADIUS_CLASS[radius], className, classNames?.img) }));
 }
 // ---------------------------------------------------------------------------
 // Hooks
@@ -92,6 +196,42 @@ function useDisclosure(props) {
     };
 }
 
+/**
+ * `click` nativo → un `PressEvent` con la forma del de react-aria.
+ *
+ * Lo usan las piezas de esta librería que NO pasan por un componente de react-aria y aun así
+ * exponen el `onPress` de v2: la `Card` pulsable (`<button>` nativo) y el `Button` con `href`
+ * (`<a>` nativo). No se importa `usePress` de react-aria porque no es `external` en
+ * `rollup.config.mjs`: se metería una segunda copia dentro del bundle.
+ *
+ * Un `click` nativo ya cubre ratón, táctil y teclado (Enter/Espacio en un botón, Enter en un
+ * enlace). `detail === 0` es un click sintético —teclado o `.click()`—, y como react-aria, se
+ * sitúa entonces el punto en el centro del elemento (lo necesita la onda expansiva).
+ */
+function pressEventFromClick(event) {
+    const target = event.currentTarget;
+    const rect = target.getBoundingClientRect();
+    const fromKeyboard = event.detail === 0;
+    const native = event.nativeEvent;
+    const pointerType = fromKeyboard
+        ? "keyboard"
+        : native.pointerType === "touch" || native.pointerType === "pen"
+            ? native.pointerType
+            : "mouse";
+    return {
+        type: "press",
+        pointerType,
+        target,
+        shiftKey: event.shiftKey,
+        ctrlKey: event.ctrlKey,
+        metaKey: event.metaKey,
+        altKey: event.altKey,
+        x: fromKeyboard ? rect.width / 2 : event.clientX - rect.left,
+        y: fromKeyboard ? rect.height / 2 : event.clientY - rect.top,
+        continuePropagation: () => undefined,
+    };
+}
+
 /** `clamp(0.01 * size, 0.2, size > 100 ? 0.75 : 0.5)` de v2, en ms. */
 function duracionDeOnda(size) {
     const maximo = size > 100 ? 750 : 500;
@@ -384,6 +524,77 @@ const SHAPE_CLASS = {
     outline: "border-2",
     ghost: "",
 };
+// ── Props DOM que el `Button` de react-aria-components descarta ────────────────────────────
+//
+// `title` (tooltip nativo, 3 usos en beweossmbs: los «Cancelar importación»), `tabIndex` (2),
+// `aria-busy`/`aria-live`… no llegaban al `<button>`: el `Button` de react-aria-components pasa
+// solo lo que deja su `filterDOMProps({ global: true })` más lo que genera `useButton` (ver
+// `ButtonDOMProps` en `Button.types.ts`). v2 los pasaba todos. Se reponen con la prop `render` de
+// react-aria (el mismo `<button>`, con el `ref` ya conectado en `domProps`). Van DESPUÉS de lo
+// que genera react-aria, como en v2 (`mergeProps(ariaButtonProps, …, filterDOMProps(otherProps))`
+// → gana el consumidor): medido, react-aria escribe `tabIndex="0"` en el botón, y el
+// `tabIndex={-1}` que pasa `client-table-row` para sacarlo del orden de tabulación se perdía.
+const DOM_ATTRS_DESCARTADOS = new Set([
+    "title",
+    "tabIndex",
+    "role",
+    "accessKey",
+    "draggable",
+    "spellCheck",
+]);
+function atributosDescartados(props) {
+    const out = {};
+    for (const [key, value] of Object.entries(props)) {
+        if (value !== undefined &&
+            (DOM_ATTRS_DESCARTADOS.has(key) || key.startsWith("aria-"))) {
+            out[key] = value;
+        }
+    }
+    return out;
+}
+// Props de react-aria que NO son atributos DOM: en el camino de enlace (un `<a>` nativo, que no
+// pasa por react-aria) no se reenvían, o React avisaría de atributos desconocidos.
+const PROPS_SOLO_REACT_ARIA = new Set([
+    "onPressStart",
+    "onPressEnd",
+    "onPressChange",
+    "onPressUp",
+    "onHoverStart",
+    "onHoverEnd",
+    "onHoverChange",
+    "onFocusChange",
+    "excludeFromTabOrder",
+    "preventFocusOnPress",
+    "slot",
+    "fullWidth",
+    "render",
+    "ref",
+    "type",
+    "form",
+    "formAction",
+    "formEncType",
+    "formMethod",
+    "formNoValidate",
+    "formTarget",
+    "name",
+    "value",
+]);
+function propsDeEnlace(props) {
+    const out = {};
+    for (const [key, value] of Object.entries(props)) {
+        if (value === undefined || PROPS_SOLO_REACT_ARIA.has(key)) {
+            continue;
+        }
+        if (DOM_ATTRS_DESCARTADOS.has(key) ||
+            key === "id" ||
+            key.startsWith("aria-") ||
+            key.startsWith("data-") ||
+            /^on[A-Z]/.test(key)) {
+            out[key] = value;
+        }
+    }
+    return out;
+}
 /**
  * Botón genérico basado en HeroUI v3 siguiendo las reglas de diseño BeweOS (TECH-2459 · F3.0).
  *
@@ -399,8 +610,15 @@ const SHAPE_CLASS = {
  * - `disableRipple`: v3 no tiene ripple — reimplementado en `_internal/ripple.tsx`, así que la
  *   prop vuelve a apagar algo.
  * - `ai`: aura de Linda para las acciones que hace la IA (ver `Button.types.ts`).
+ * - Props DOM (`title`, `tabIndex`, `aria-*`…): llegan al `<button>` aunque react-aria las
+ *   descarte (ver `DOM_ATTRS_DESCARTADOS`). `disabled` nativo equivale a `isDisabled`.
+ * - `as="a"` / `href` (API v2): renderiza un `<a>` con las mismas clases y colores del botón.
  */
-const Button = ({ color = "primary", size = "md", variant = "solid", radius = "sm", startContent, endContent, isLoading = false, spinner, spinnerPlacement = "start", isIconOnly = false, isDisabled, ai, className, style, children, disableRipple = false, disableAnimation = false, onPress, ...rest }) => {
+const Button = ({ color = "primary", size = "md", variant = "solid", radius = "sm", startContent, endContent, isLoading = false, spinner, spinnerPlacement = "start", isIconOnly = false, isDisabled, ai, className, style, children, disableRipple = false, disableAnimation = false, onPress, disabled, as, href, target, rel, download, hrefLang, referrerPolicy, ...rest }) => {
+    // v2 reenviaba `disabled` tal cual al `<button>` nativo, que así quedaba deshabilitado; en v3
+    // se descartaba y el botón seguía pulsable. Se trata como `isDisabled`.
+    const deshabilitado = Boolean(isDisabled || disabled || isLoading);
+    const esEnlace = href !== undefined || as === "a";
     const shape = SHAPE_BY_VARIANT$1[variant];
     const v3Variant = BASE_V3_VARIANT[shape];
     const spinnerNode = spinner ?? jsxRuntime.jsx(react.Spinner, { size: "sm", color: "current" });
@@ -438,20 +656,62 @@ const Button = ({ color = "primary", size = "md", variant = "solid", radius = "s
      * `.linda-aura > *` ya los alcanza.
      */
     const contenido = ai ? (jsxRuntime.jsx("span", { className: "linda-aura-content", children: children })) : (children);
-    return (jsxRuntime.jsxs(react.Button, { ...rest, variant: v3Variant, size: size, isIconOnly: isIconOnly, isPending: isLoading, isDisabled: isDisabled || isLoading, onPress: alPulsar, className: [
-            SHAPE_CLASS[shape],
-            RADIUS_CLASS$a[radius],
-            ai ? CLASE_AURA[ai] : "",
-            // P-05: v2 apagaba transición + hundido con esta prop; v3 no tiene la prop, así
-            // que el interruptor es una clase propia (`Button.css`).
-            disableAnimation ? "button--no-animation" : "",
-            // P-06b: hover atenuado de v2 en vez del cambio de fondo de v3 (ver
-            // `HOVER_ATENUADO` arriba y `neutralize-v3.css`).
-            HOVER_ATENUADO[shape] ? "button--hover-dim" : "",
-            className,
-        ]
-            .filter(Boolean)
-            .join(" "), style: { ...colorStyle$1(color, shape), ...style }, children: [isLoading && spinnerPlacement === "start" && spinnerNode, !isLoading && startContent, contenido, !isLoading && endContent, isLoading && spinnerPlacement === "end" && spinnerNode, ondas.length > 0 && jsxRuntime.jsx(CapaRipple, { ondas: ondas, onFin: quitar })] }));
+    const claseForma = [
+        SHAPE_CLASS[shape],
+        RADIUS_CLASS$a[radius],
+        ai ? CLASE_AURA[ai] : "",
+        // P-05: v2 apagaba transición + hundido con esta prop; v3 no tiene la prop, así
+        // que el interruptor es una clase propia (`Button.css`).
+        disableAnimation ? "button--no-animation" : "",
+        // P-06b: hover atenuado de v2 en vez del cambio de fondo de v3 (ver
+        // `HOVER_ATENUADO` arriba y `neutralize-v3.css`).
+        HOVER_ATENUADO[shape] ? "button--hover-dim" : "",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const estilo = { ...colorStyle$1(color, shape), ...style };
+    const hijos = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isLoading && spinnerPlacement === "start" && spinnerNode, !isLoading && startContent, contenido, !isLoading && endContent, isLoading && spinnerPlacement === "end" && spinnerNode, ondas.length > 0 && jsxRuntime.jsx(CapaRipple, { ondas: ondas, onFin: quitar })] }));
+    /*
+     * `as="a"` / `href` — el botón-enlace de v2 (3 usos en beweossmbs: «abrir contacto en
+     * pestaña nueva», «ver publicación», el enlace de agenda de la demo de referidos).
+     *
+     * v3 no acepta `href` en `Button` (trampa 5 de la skill `auraui-components`) y el `href`
+     * caía sin más: el botón no navegaba. Se renderiza un `<a>` NATIVO con las clases del
+     * botón (`buttonVariants` de v3, las mismas que pone `Button`) + las de la fachada.
+     *
+     * Por qué no las otras dos vías: `render` del `Button` de react-aria devolviendo un `<a>`
+     * provoca un `console.warn` en desarrollo (espera el MISMO elemento); y el `Link` de v3
+     * añade la clase `.link`, y `.link.button { gap: 0 }` se come el hueco del icono. El `:hover`
+     * de `.button`/`.button--hover-dim` funciona igual en un `<a>` (el CSS escucha `:hover` además
+     * de `data-hovered`).
+     */
+    if (esEnlace) {
+        const alPulsarEnlace = (evento) => {
+            if (deshabilitado) {
+                evento.preventDefault();
+                return;
+            }
+            rest.onClick?.(evento);
+            alPulsar(pressEventFromClick(evento));
+        };
+        return (jsxRuntime.jsx("a", { ...propsDeEnlace(rest), "data-slot": "button", "data-disabled": deshabilitado || undefined, "aria-disabled": deshabilitado || undefined, 
+            // Deshabilitado, sin `href`: un `<a>` no tiene `disabled` y seguiría navegando.
+            href: deshabilitado ? undefined : href, target: target, rel: rel, download: download, hrefLang: hrefLang, referrerPolicy: referrerPolicy, className: react.cn(react.buttonVariants({
+                variant: v3Variant,
+                size,
+                isIconOnly,
+                fullWidth: rest.fullWidth,
+            }), claseForma), style: estilo, onClick: alPulsarEnlace, children: hijos }));
+    }
+    const extras = atributosDescartados(rest);
+    const renderConExtras = Object.keys(extras).length > 0
+        ? (domProps) => {
+            const merged = { ...domProps, ...extras };
+            return (jsxRuntime.jsx("button", { ...merged }));
+        }
+        : undefined;
+    return (jsxRuntime.jsx(react.Button, { ...rest, ...(renderConExtras ? { render: renderConExtras } : {}), variant: v3Variant, size: size, isIconOnly: isIconOnly, isPending: isLoading, isDisabled: deshabilitado, onPress: alPulsar, className: claseForma, style: estilo, children: hijos }));
 };
 
 // TECH-2459 · F3.0 — Matriz de traducción v2 → v3 (mismo mecanismo que Button, documentado en
@@ -497,6 +757,56 @@ const SHAPE_BY_VARIANT = {
     flat: "soft",
     bordered: "outline",
     faded: "outline",
+    // `shadow` de v2 es `solid` + sombra teñida (ver `SHADOW_CLASS`).
+    shadow: "solid",
+    // `dot` de v2: chip neutro con un punto de color (ver `DOT_BASE_CLASS`).
+    dot: "dot",
+};
+// ── `variant="dot"` (TECH-2459, reportado por beweossmbs sobre la .140) ─────────────────────
+//
+// Literal de `@heroui/theme@2.4.15` (`chip.js`) y `@heroui/chip@2.2.25` (`chip.js`):
+//
+//   variant.dot.base = "border-medium border-default text-foreground bg-transparent"
+//   slots.dot        = "w-2 h-2 ml-1 rounded-full"   +   color.<c>.dot = "bg-<c>" (default: "bg-default-400")
+//   render           = `isDot && !startContent` → `<span class={slots.dot}/>` en el hueco de `startContent`
+//
+// O sea: el `color` NO tiñe el chip (no hay ningún `compoundVariant` de `dot` × color), solo el
+// punto; el chip queda neutro con el borde de 2px de `default`. Y el punto NO cuenta como
+// `hasStartContent` (`!!avatar || !!startContent`), así que el texto conserva su sangrado izquierdo
+// normal. El compound `{ isOneChar, variant: "dot" }` (base "w-auto h-7 px-1", content "px-2")
+// anula el cuadrado de un carácter: aquí basta con no aplicarlo.
+//
+// Uso real: `shared/ui/components/page-header` de beweossmbs reenvía un `variant` de su propio tipo
+// que incluye `"dot"` (hoy ningún sitio lo pasa, pero el tipo no compilaba).
+const DOT_BASE_CLASS = "border-2 border-default bg-transparent text-foreground";
+const DOT_SLOT_CLASS = "h-2 w-2 ml-1 shrink-0 rounded-full";
+// Clases literales por color (Tailwind 4 solo genera lo que encuentra escrito). Los 5 colores fijos
+// de Aurora no existían en v2: su punto toma el tono del texto que ya les da `CUSTOM_COLOR_CLASSES`.
+const DOT_COLOR_CLASS = {
+    default: "bg-default-400",
+    primary: "bg-primary",
+    secondary: "bg-secondary",
+    success: "bg-success",
+    warning: "bg-warning",
+    danger: "bg-danger",
+    red: "bg-red-500",
+    purple: "bg-purple-500",
+    blue: "bg-blue-500",
+    green: "bg-green-500",
+    orange: "bg-orange-500",
+};
+// `variant="shadow"` de v2, literal de `@heroui/theme@2.4.15` (`dist/utils/variants.js`,
+// `colorVariants.shadow`): `shadow-lg shadow-<color>/40 bg-<color> text-<color>-foreground`
+// (`default` usa `/50`). El relleno y el texto son los de `solid`; aquí solo se añade la sombra.
+// Clases literales (no plantillas) para que Tailwind las genere al escanear `src/`. Los 5 colores
+// fijos de Aurora (red/purple/…) no existían en v2 con `shadow`: reciben la sombra neutra.
+const SHADOW_CLASS$1 = {
+    default: "shadow-lg shadow-default/50",
+    primary: "shadow-lg shadow-primary/40",
+    secondary: "shadow-lg shadow-secondary/40",
+    success: "shadow-lg shadow-success/40",
+    warning: "shadow-lg shadow-warning/40",
+    danger: "shadow-lg shadow-danger/40",
 };
 // TECH-2459 · F5 · P-08c — Tamaños de v2 (`chip.ts`): la altura era FIJA y el texto más grande que
 // en v3, y el sangrado horizontal salía de dos slots (`base` + `content`):
@@ -601,6 +911,7 @@ const V3_VARIANT_BY_SHAPE = {
     soft: "soft",
     transparent: "tertiary",
     outline: "tertiary",
+    dot: "tertiary",
 };
 /**
  * TECH-2459 · F5 · P-08d — La tabla `flat` de v2, medida contra los PNG congelados y no deducida.
@@ -708,6 +1019,13 @@ const CLOSE_ICON_SIZE_CLASS = {
     lg: "size-5",
 };
 function colorStyle(color, shape) {
+    if (shape === "dot") {
+        // `dot`: el chip es neutro para cualquier color (el color va solo en el punto).
+        return {
+            "--chip-bg": "transparent",
+            "--chip-fg": "var(--color-foreground)",
+        };
+    }
     const t = COLOR_TOKENS[color];
     if (shape === "solid") {
         return { "--chip-bg": t.bg, "--chip-fg": t.fg };
@@ -734,7 +1052,7 @@ function colorStyle(color, shape) {
  * y el hueco que queda tras el botón de cierre sean distintos, como en v2 (ver `SIZE_CLASS` y
  * `CONTENT_PADDING`).
  */
-const Chip = ({ color = "default", variant = "solid", size = "md", radius = "full", startContent, endContent, onClose, isDisabled = false, className, classNames, children, id, }) => {
+const Chip = ({ color = "default", variant = "solid", size = "md", radius = "full", startContent, endContent, onClose, isDisabled = false, className, classNames, children, as, style: consumerStyle, ...domProps }) => {
     const isStandard = STANDARD_COLORS.has(color);
     const shape = SHAPE_BY_VARIANT[variant];
     // Literal de v2 (`@heroui/chip@2.2.18`, `use-chip.js:63`):
@@ -743,14 +1061,17 @@ const Chip = ({ color = "default", variant = "solid", size = "md", radius = "ful
     const hasEndContent = Boolean(endContent) || Boolean(onClose);
     // `isOneChar` de v2 (`use-chip.js:58`): SOLO si el children es un string de un carácter — un
     // número no cuenta. El cuadrado además exige no llevar nada a los lados (ver `ONE_CHAR_CLASS`).
-    const isSquare = typeof children === "string" &&
+    const isDot = shape === "dot";
+    const isSquare = !isDot &&
+        typeof children === "string" &&
         children.length === 1 &&
         !startContent &&
         !hasEndContent;
     const vars = isStandard
         ? colorStyle(color, shape)
         : undefined;
-    const customClass = !isStandard ? CUSTOM_COLOR_CLASSES[color] : "";
+    // Con `dot` el color no tiñe el chip, tampoco el de los colores fijos.
+    const customClass = isStandard || isDot ? "" : CUSTOM_COLOR_CLASSES[color];
     const outlineClass = shape === "outline" ? "border-2" : "";
     // El `dark:text-*` que v2 declaraba solo para el texto de `flat` en success/warning/danger
     // (P-08d). Va como clase porque `--chip-fg` es inline y no puede depender del tema; la capa
@@ -758,12 +1079,27 @@ const Chip = ({ color = "default", variant = "solid", size = "md", radius = "ful
     const flatDarkFgClass = isStandard && shape === "soft"
         ? (COLOR_TOKENS[color].flatFgDarkClass ?? "")
         : "";
-    const style = vars
+    const baseStyle = vars
         ? shape === "outline"
             ? { ...vars, borderColor: vars["--chip-fg"] }
             : vars
         : undefined;
-    return (jsxRuntime.jsxs(react.Chip, { id: id, size: size, variant: V3_VARIANT_BY_SHAPE[shape], 
+    // El `style` del consumidor va DESPUÉS: pisa el relleno/texto calculados (uso real en
+    // beweossmbs: `style={{ backgroundColor, color }}` con el color del agente, 5 sitios).
+    const style = baseStyle || consumerStyle ? { ...baseStyle, ...consumerStyle } : undefined;
+    const shadowClass = variant === "shadow"
+        ? isStandard
+            ? SHADOW_CLASS$1[color]
+            : "shadow-lg"
+        : "";
+    // `as` de v2 (`Component = as || "div"`). v3 no tiene `as`, pero su raíz acepta `render`, que
+    // recibe las props DOM ya compuestas (clases, `data-slot`, `ref`…) y devuelve el elemento.
+    const render = as
+        ? (props) => $8WNJc$react.createElement(as, props)
+        : undefined;
+    return (jsxRuntime.jsxs(react.Chip
+    // `aria-disabled` ANTES del spread: si el consumidor manda el suyo, gana el suyo.
+    , { "aria-disabled": isDisabled || undefined, ...domProps, render: render, size: size, variant: V3_VARIANT_BY_SHAPE[shape], 
         // `cn` (tailwind-merge) y no una concatenación de texto: el consumidor tiene que poder
         // pisar tamaño y radio (`className="h-5 text-[10px]"` es un uso real en beweossmbs).
         // Con una cadena suelta ambas clases llegan al DOM y gana la que Tailwind emita más
@@ -772,18 +1108,20 @@ const Chip = ({ color = "default", variant = "solid", size = "md", radius = "ful
         className: react.cn(SIZE_CLASS$6[size], 
         // Después de `SIZE_CLASS` a propósito: el cuadrado de un carácter ENCOGE la caja
         // respecto al tamaño normal y tiene que ganar en tailwind-merge.
-        isSquare ? ONE_CHAR_CLASS[size] : "", RADIUS_CLASS$9[radius], outlineClass, flatDarkFgClass, customClass, isDisabled ? "opacity-50 pointer-events-none" : "", classNames?.base, className), style: style, "aria-disabled": isDisabled || undefined, children: [startContent, jsxRuntime.jsx("span", { className: react.cn("flex-1 text-inherit font-normal", startContent
+        isSquare ? ONE_CHAR_CLASS[size] : "", RADIUS_CLASS$9[radius], outlineClass, isDot ? DOT_BASE_CLASS : "", shadowClass, flatDarkFgClass, customClass, isDisabled ? "opacity-50 pointer-events-none" : "", classNames?.base, className), style: style, children: [startContent, isDot && !startContent && (jsxRuntime.jsx("span", { "aria-hidden": "true", "data-slot": "dot", className: react.cn(DOT_SLOT_CLASS, DOT_COLOR_CLASS[color]) })), jsxRuntime.jsx("span", { className: react.cn("flex-1 text-inherit font-normal", startContent
                     ? CONTENT_PADDING[size].leftWithContent
                     : CONTENT_PADDING[size].left, hasEndContent
                     ? CONTENT_PADDING[size].rightWithContent
                     : CONTENT_PADDING[size].right, 
                 // `content: "px-0 flex-none"` del compound de un carácter. Va después de los
                 // `pl-*`/`pr-*` para que tailwind-merge los borre (un `px` posterior sí gana).
-                isSquare ? "px-0 flex-none" : "", classNames?.label), children: children }), endContent, onClose && (jsxRuntime.jsx(react.CloseButton, { "aria-label": "Cerrar", 
+                isSquare ? "px-0 flex-none" : "", classNames?.label, 
+                // `content` es el nombre v2 del slot (16 usos en beweossmbs); va el último.
+                classNames?.content), children: children }), endContent, onClose && (jsxRuntime.jsx(react.CloseButton, { "aria-label": "Cerrar", 
                 // `.close-button` de v3 impone caja de 24px, `bg-default` y `text-muted`; v2 no
                 // pintaba fondo ni caja: el glifo ERA el botón. Se anulan con utilidades (capa
                 // `utilities` gana a `components`, incluido el `& svg { size-4 -mx-0.5 my-0.5 }`).
-                className: "h-auto w-auto min-h-0 rounded-full bg-transparent p-0 text-current opacity-70 transition-opacity hover:bg-transparent hover:opacity-100", onPress: onClose, isDisabled: isDisabled, children: jsxRuntime.jsx("svg", { "aria-hidden": "true", focusable: "false", role: "presentation", viewBox: "0 0 24 24", className: `m-0 shrink-0 ${CLOSE_ICON_SIZE_CLASS[size]}`, children: jsxRuntime.jsx("path", { d: CLOSE_FILLED_PATH, fill: "currentColor" }) }) }))] }));
+                className: react.cn("h-auto w-auto min-h-0 rounded-full bg-transparent p-0 text-current opacity-70 transition-opacity hover:bg-transparent hover:opacity-100", classNames?.closeButton), onPress: onClose, isDisabled: isDisabled, children: jsxRuntime.jsx("svg", { "aria-hidden": "true", focusable: "false", role: "presentation", viewBox: "0 0 24 24", className: `m-0 shrink-0 ${CLOSE_ICON_SIZE_CLASS[size]}`, children: jsxRuntime.jsx("path", { d: CLOSE_FILLED_PATH, fill: "currentColor" }) }) }))] }));
 };
 
 const sizeMap = {
@@ -795,7 +1133,11 @@ const sizeMap = {
 const IconComponent = ({ icon, size = "md", className, style, color, hFlip, vFlip, flip, rotate, ...nativeProps }) => {
     // Un número son píxeles tal cual (p. ej. 64): la escala con nombre se queda en 32 y
     // `width`/`height` no son props del componente (caerían en el <span>, sin efecto).
-    const iconSize = typeof size === "number" ? `${size}px` : (sizeMap[size] ?? sizeMap.md);
+    // Un nombre fuera de la escala (`"xs"`, el alias v2 del tipo) cae al default, como en v2
+    // (`sizeMap[size] ?? sizeMap.md`, `@beweco/aurora-ui@0.6.85`): 20px.
+    const iconSize = typeof size === "number"
+        ? `${size}px`
+        : (sizeMap[size] ?? sizeMap.md);
     return (jsxRuntime.jsx("span", { ...nativeProps, children: jsxRuntime.jsx(react$1.Icon, { icon: icon, width: iconSize, height: iconSize, className: className, style: style, color: color, hFlip: hFlip, vFlip: vFlip, flip: flip, rotate: rotate }) }));
 };
 
@@ -824,10 +1166,10 @@ const IconComponent = ({ icon, size = "md", className, style, color, hFlip, vFli
 // (`bg-default-200` / `bg-default-300` en variant `flat`) se reponen también por clase por el
 // mismo motivo.
 //
-// El RADIO no entra aquí a propósito: se compone por pieza más abajo. Estas clases se concatenan
-// como texto (no con `cn`/tailwind-merge), así que dos radios en la misma cadena no se resuelven
-// por orden de escritura sino por el orden en que Tailwind los emite — `rounded-none` ganaba a
-// `rounded-[12px]` y la celda activa salía a escuadra.
+// El RADIO no entra aquí a propósito: se compone por pieza más abajo (`cellRadius`). Las piezas se
+// fusionan con `cn` (tailwind-merge), que resuelve dos clases del mismo grupo por su POSICIÓN en
+// la cadena. Antes se concatenaban como texto y decidía el orden en que Tailwind las emite:
+// `rounded-none` ganaba a `rounded-[12px]` y la celda activa salía a escuadra.
 // ⚠️ TECH-2459 · F5 · R2 — `shadow-xs`, no `shadow-sm`: **Tailwind 4 corrió la escala de sombras
 // un paso**. El `shadow-sm` de Tailwind 3 (que es el que emitía v2) es el `shadow-xs` de Tailwind
 // 4. Literal de `node_modules/tailwindcss/theme.css:406-407`:
@@ -852,11 +1194,38 @@ const CELL_CLASS = "size-9 md:size-9 min-w-9 bg-default-100 text-sm text-default
  * `w-fit` reproduce el `max-w-fit` del wrapper de v2.
  */
 const STRIP_CLASS = "w-fit gap-0 rounded-[12px] shadow-xs";
-/** Celdas interiores: a escuadra (el `[&:not(:first-of-type):not(:last-of-type)]:rounded-none` de v2). */
-const INNER_RADIUS_CLASS = "rounded-none";
-/** Extremos de la tira: solo el lado exterior lleva radio, como el `isCompact` de v2. */
-const NAV_START_CLASS = `${CELL_CLASS} w-9 px-0 rounded-s-[12px] rounded-e-none`;
-const NAV_END_CLASS = `${CELL_CLASS} w-9 px-0 rounded-e-[12px] rounded-s-none`;
+/**
+ * `isCompact={false}`: celdas sueltas. Literales del `tv` de v2 sin el bloque `isCompact`: el
+ * `wrapper` vuelve a `gap-1` (4px) sin sombra común, y cada celda lleva su propio radio
+ * (`radius: md` → `rounded-medium`, 12px).
+ */
+const STRIP_LOOSE_CLASS = "w-fit gap-1";
+/** Controles anterior/siguiente: celda cuadrada, sin el padding lateral de v3. */
+const NAV_CLASS = "w-9 px-0";
+/**
+ * Radio de cada pieza según su posición en la tira.
+ *
+ * Compacta (el `isCompact` de v2): celdas interiores a escuadra
+ * (`[&:not(:first-of-type):not(:last-of-type)]:rounded-none`) y solo el lado EXTERIOR de los
+ * extremos redondeado (`first-of-type:rounded-e-none` / `last-of-type:rounded-s-none`). Los
+ * extremos son las flechas cuando hay `showControls`, y las propias páginas cuando no: por eso
+ * se decide por posición y no por tipo de pieza.
+ */
+function cellRadius(isCompact, position) {
+    if (!isCompact) {
+        return "rounded-[12px]";
+    }
+    if (position.isFirst && position.isLast) {
+        return "rounded-[12px]";
+    }
+    if (position.isFirst) {
+        return "rounded-s-[12px] rounded-e-none";
+    }
+    if (position.isLast) {
+        return "rounded-e-[12px] rounded-s-none";
+    }
+    return "rounded-none";
+}
 /**
  * Página activa. v2 la pintaba con un "cursor" absoluto de `bg-primary text-primary-foreground` y
  * `rounded-medium` por encima de la celda; aquí se pinta la celda misma con los mismos tokens.
@@ -864,7 +1233,39 @@ const NAV_END_CLASS = `${CELL_CLASS} w-9 px-0 rounded-e-[12px] rounded-s-none`;
  * Sin esto v3 la pinta con `--pagination-link-bg: var(--default)`, el gris CRUDO de v3 y no el
  * `--color-default` de Aurora (falso amigo, decisiones-aceptadas-f1.md D-F1-3).
  */
-const ACTIVE_LINK_CLASS = "rounded-[12px] bg-primary text-primary-foreground hover:bg-primary active:bg-primary";
+const ACTIVE_LINK_CLASS = "rounded-[12px]";
+/**
+ * `color` de v2 → la página activa. Literal de `colorVariants.solid` (`@heroui/theme@2.4.15`,
+ * `dist/components/pagination.js`): `bg-<color> text-<color>-foreground`. Los estados hover y
+ * pulsado se fijan al mismo fondo porque la celda base los cambia (`CELL_CLASS`) y en v2 el
+ * cursor activo no reaccionaba al ratón. Cadenas literales completas: Tailwind solo emite lo que
+ * encuentra escrito entero.
+ *
+ * `default` es el gris de Aurora (`--color-default`), no el `--default` crudo de v3 (falso
+ * amigo, decisiones-aceptadas-f1.md D-F1-3).
+ */
+const ACTIVE_COLOR_CLASS = {
+    default: "bg-default text-default-foreground hover:bg-default active:bg-default",
+    primary: "bg-primary text-primary-foreground hover:bg-primary active:bg-primary",
+    secondary: "bg-secondary text-secondary-foreground hover:bg-secondary active:bg-secondary",
+    success: "bg-success text-success-foreground hover:bg-success active:bg-success",
+    warning: "bg-warning text-warning-foreground hover:bg-warning active:bg-warning",
+    danger: "bg-danger text-danger-foreground hover:bg-danger active:bg-danger",
+};
+/**
+ * `showShadow` de v2 → sombra de color bajo la página activa. Literal del compound
+ * `{ showShadow: true, color }` de v2: `cursor: [colorVariants.shadow[color], "shadow-md"]`, que
+ * tras tailwind-merge queda `shadow-md shadow-<color>/40` (`/50` en `default`). `shadow-md` no
+ * cambió de valor entre Tailwind 3 y 4 (el corrimiento de la escala solo afectó a `sm`/`DEFAULT`).
+ */
+const ACTIVE_SHADOW_CLASS = {
+    default: "shadow-md shadow-default/50",
+    primary: "shadow-md shadow-primary/40",
+    secondary: "shadow-md shadow-secondary/40",
+    success: "shadow-md shadow-success/40",
+    warning: "shadow-md shadow-warning/40",
+    danger: "shadow-md shadow-danger/40",
+};
 /**
  * Traducciones por defecto en español. Todas son `aria-label`: este componente no tiene más
  * texto visible que los números de página.
@@ -976,12 +1377,22 @@ function getPaginationRange(total, current) {
  *   `aria-label` los dos botones llegaban vacíos al árbol de accesibilidad.
  *
 
+ * API v2 que las apps siguen escribiendo (medido en beweossmbs `origin/staging`: 17 usos, todos
+ * con `showControls`, 14 con `isCompact`, 12 con `color="primary"`, 11 con `showShadow`):
+ * - `showControls` (default `true`): pinta anterior/siguiente; con `false` desaparecen.
+ * - `isCompact` (default `true`): tira compacta; con `false`, celdas sueltas (`gap-1`).
+ * - `color` (default `"primary"`): color de la página activa.
+ * - `showShadow` (default `false`): sombra de color bajo la página activa.
+ * Los defaults `true` de las dos primeras son los que forzaba la fachada v2 de Aurora
+ * (`<HeroUIPagination showControls isCompact {...props} />`), así que quien no las pasa se ve
+ * exactamente igual que hasta ahora.
+ *
  * ⚠️ `size` se acepta pero no se aplica: mismo bug preexistente que v2 (destructurado, nunca
  * reenviado a HeroUI) — fuera de scope de esta migración, reportado aparte (ver
  * findings/decisiones-aceptadas-g2.md y f5-L7-sueltos.md · P-17). v3 SÍ tiene la prop (emite
  * `.pagination--sm|--md|--lg`), así que arreglarlo es un cambio de tamaño visible: ticket aparte.
  */
-const Pagination = ({ total, page, initialPage = 1, onChange, size: _size = "sm", className, isDisabled, translations = {}, }) => {
+const Pagination = ({ total, page, initialPage = 1, onChange, size: _size = "sm", className, isDisabled, showControls = true, isCompact = true, showShadow = false, color = "primary", translations = {}, }) => {
     const [internalPage, setInternalPage] = $8WNJc$react.useState(initialPage);
     const currentPage = page ?? internalPage;
     const t = { ...DEFAULT_TRANSLATIONS$g, ...translations };
@@ -998,18 +1409,26 @@ const Pagination = ({ total, page, initialPage = 1, onChange, size: _size = "sm"
     // `dist/pagination.js:464`). Si `page` viene fuera de rango, `indexOf` da -1 y todas las
     // elipsis avanzan — también igual que v2, que no protegía ese caso.
     const activeIndex = items.indexOf(currentPage);
+    // Posición de cada pieza en la tira, para el radio compacto: con controles, los extremos
+    // son las flechas y ninguna página toca el borde.
+    const lastItemIndex = items.length - 1;
+    const itemPosition = (index) => ({
+        isFirst: !showControls && index === 0,
+        isLast: !showControls && index === lastItemIndex,
+    });
+    const activeClass = react.cn(ACTIVE_COLOR_CLASS[color], showShadow ? ACTIVE_SHADOW_CLASS[color] : "", ACTIVE_LINK_CLASS);
     return (
     // `w-fit` reproduce el `max-w-fit` del wrapper de v2: `.pagination` de v3 es `w-full` +
     // `justify-between`, así que dentro de un `flex justify-center` (como el de AccordionList) la
     // tira se quedaba pegada a la izquierda en vez de centrarse.
-    jsxRuntime.jsx(react.Pagination, { className: ["w-fit", className].filter(Boolean).join(" "), children: jsxRuntime.jsxs(react.Pagination.Content, { className: STRIP_CLASS, children: [jsxRuntime.jsx(react.Pagination.Item, { children: jsxRuntime.jsx(react.Pagination.Previous
+    jsxRuntime.jsx(react.Pagination, { className: react.cn("w-fit", className), children: jsxRuntime.jsxs(react.Pagination.Content, { className: isCompact ? STRIP_CLASS : STRIP_LOOSE_CLASS, children: [showControls && (jsxRuntime.jsx(react.Pagination.Item, { children: jsxRuntime.jsx(react.Pagination.Previous
                     // v3 mete el galón en un `<span aria-hidden="true">`
                     // (`pagination.js:165`), así que sin esto el botón se queda SIN nombre
                     // accesible: un lector de pantalla lo anuncia como "botón" a secas. v2 sí
                     // lo nombraba ("previous page button", `use-pagination.js:213`), pero en
                     // inglés y hardcodeado; aquí va por `translations` (regla obligatoria de
                     // i18n del repo, skill `auraui-i18n`).
-                    , { "aria-label": t.previousPageAriaLabel, className: NAV_START_CLASS, isDisabled: isDisabled || currentPage <= 1, onPress: () => goTo(currentPage - 1), children: jsxRuntime.jsx(react.Pagination.PreviousIcon, {}) }) }), items.map((item, index) => {
+                    , { "aria-label": t.previousPageAriaLabel, className: react.cn(CELL_CLASS, NAV_CLASS, cellRadius(isCompact, { isFirst: true, isLast: false })), isDisabled: isDisabled || currentPage <= 1, onPress: () => goTo(currentPage - 1), children: jsxRuntime.jsx(react.Pagination.PreviousIcon, {}) }) })), items.map((item, index) => {
                     if (item === "ellipsis") {
                         const isBefore = index < activeIndex;
                         const label = isBefore
@@ -1017,14 +1436,14 @@ const Pagination = ({ total, page, initialPage = 1, onChange, size: _size = "sm"
                             : t.jumpForwardAriaLabel;
                         return (
                         // biome-ignore lint/suspicious/noArrayIndexKey: solo hay como máximo 2 elipsis, posición estable
-                        jsxRuntime.jsx(react.Pagination.Item, { children: jsxRuntime.jsxs(react.Pagination.Link, { "aria-label": label.replace("{count}", String(DOTS_JUMP)), className: `group ${CELL_CLASS} ${INNER_RADIUS_CLASS}`, isDisabled: isDisabled, onPress: () => goTo(isBefore
+                        jsxRuntime.jsx(react.Pagination.Item, { children: jsxRuntime.jsxs(react.Pagination.Link, { "aria-label": label.replace("{count}", String(DOTS_JUMP)), className: react.cn("group", CELL_CLASS, cellRadius(isCompact, itemPosition(index))), isDisabled: isDisabled, onPress: () => goTo(isBefore
                                     ? currentPage - DOTS_JUMP
                                     : currentPage + DOTS_JUMP), children: [jsxRuntime.jsx(EllipsisDotsIcon, {}), jsxRuntime.jsx(JumpIcon, { isBefore: isBefore })] }) }, `ellipsis-${index}`));
                     }
-                    return (jsxRuntime.jsx(react.Pagination.Item, { children: jsxRuntime.jsx(react.Pagination.Link, { className: `${CELL_CLASS} ${item === currentPage ? ACTIVE_LINK_CLASS : INNER_RADIUS_CLASS}`, isActive: item === currentPage, isDisabled: isDisabled, onPress: () => goTo(item), children: item }) }, item));
-                }), jsxRuntime.jsx(react.Pagination.Item, { children: jsxRuntime.jsx(react.Pagination.Next
+                    return (jsxRuntime.jsx(react.Pagination.Item, { children: jsxRuntime.jsx(react.Pagination.Link, { className: react.cn(CELL_CLASS, cellRadius(isCompact, itemPosition(index)), item === currentPage ? activeClass : ""), isActive: item === currentPage, isDisabled: isDisabled, onPress: () => goTo(item), children: item }) }, item));
+                }), showControls && (jsxRuntime.jsx(react.Pagination.Item, { children: jsxRuntime.jsx(react.Pagination.Next
                     /* Mismo motivo que en `Previous`: el galón es `aria-hidden`. */
-                    , { "aria-label": t.nextPageAriaLabel, className: NAV_END_CLASS, isDisabled: isDisabled || currentPage >= total, onPress: () => goTo(currentPage + 1), children: jsxRuntime.jsx(react.Pagination.NextIcon, {}) }) })] }) }));
+                    , { "aria-label": t.nextPageAriaLabel, className: react.cn(CELL_CLASS, NAV_CLASS, cellRadius(isCompact, { isFirst: false, isLast: true })), isDisabled: isDisabled || currentPage >= total, onPress: () => goTo(currentPage + 1), children: jsxRuntime.jsx(react.Pagination.NextIcon, {}) }) }))] }) }));
 };
 
 // TECH-2459 · F5 · P-01 — Valores tomados del tema v2 REAL (`@heroui/theme@2.4.15`,
@@ -1268,6 +1687,44 @@ const VARIANT_CLASS$5 = {
  * En reposo no cambia nada (el anillo de v3 ya vale 0 ahí), así que la referencia v2 se mantiene.
  */
 const FIELD_FOCUS_CLASS$5 = "ring-0 ring-offset-0 outline-0";
+/*
+ * TECH-2459 · hallazgo beweossmbs 23-sep — `labelPlacement` de v2, repuesta. Misma solución que
+ * `TimeInput` en la .139: una tabla de clases por colocación. La barra de la agenda
+ * (`agenda-toolbar.component.tsx`) pide `"outside-left"` y v1 no tenía la prop: la etiqueta caía
+ * encima y la barra crecía una línea.
+ *
+ * `outside` es EXACTAMENTE lo que la fachada pintaba hasta ahora (la raíz `flex flex-col gap-1`,
+ * sin clases de colocación en el grupo ni en la ayuda), así que quien no pasa la prop no cambia un
+ * píxel. `outside-left` son los literales del `tv` de v2 (`@heroui/theme@2.4.15` →
+ * `dist/components/date-input.js`, `labelPlacement["outside-left"]`, que es el `tv` del que tira el
+ * `DatePicker` de v2):
+ *
+ *   base         → "flex-row items-center gap-x-2 flex-nowrap"
+ *                  + `data-[has-helper=true]:pb-[calc(theme(fontSize.tiny)_+_8px)]`
+ *   inputWrapper → "relative flex-1"
+ *   helperWrapper→ "absolute top-[calc(100%_+_2px)] start-0"
+ *
+ * La ayuda y el error no pueden ser un tercer hijo de la fila (quedarían a la derecha del campo):
+ * v2 los sacaba del flujo bajo el campo y reservaba su alto con el `pb` de la raíz. Aquí igual;
+ * `theme(fontSize.tiny)` de v2 (12px) es `--text-xs` en Tailwind 4, y la raíz lleva `relative`
+ * para que el `absolute` se ancle a ella.
+ */
+const ROOT_PLACEMENT_CLASS = {
+    outside: "flex flex-col gap-1",
+    "outside-left": "relative flex flex-row items-center gap-x-2 flex-nowrap",
+};
+const ROOT_HELPER_SPACE_CLASS = {
+    outside: undefined,
+    "outside-left": "pb-[calc(var(--text-xs)+8px)]",
+};
+const GROUP_PLACEMENT_CLASS = {
+    outside: undefined,
+    "outside-left": "relative flex-1",
+};
+const HELPER_PLACEMENT_CLASS = {
+    outside: undefined,
+    "outside-left": "absolute top-[calc(100%+2px)] start-0",
+};
 // TECH-2459 · F5 · P-10 — El "círculo" del calendario. v2 (`@heroui/theme@2.4.15`,
 // `calendar.ts`) solo tenía UN círculo y significaba "día seleccionado":
 //   cellButton: "w-8 h-8 … rounded-full"  +  color primary: "data-[selected=true]:bg-primary
@@ -1294,7 +1751,7 @@ const CALENDAR_CELL_CLASS$1 = "size-8 place-self-center rounded-full " +
  * (grid) para que la API pública siga siendo un único componente con props planas, igual que en
  * v2 (label, description, errorMessage, endContent, variant, size, radius).
  */
-function DatePicker({ label, description, errorMessage, id, size = "md", variant = "bordered", radius = "md", isInvalid = false, isRequired = false, isDisabled = false, fullWidth, endContent, calendarBottomContent: calendarBottomContentProp, CalendarBottomContent, calendarTopContent: calendarTopContentProp, CalendarTopContent, calendarWidth, calendarProps, classNames, className, "aria-label": ariaLabel, ...props }) {
+function DatePicker({ label, description, errorMessage, id, size = "md", variant = "bordered", radius = "md", labelPlacement = "outside", isInvalid = false, isRequired = false, isDisabled = false, fullWidth, endContent, calendarBottomContent: calendarBottomContentProp, CalendarBottomContent, calendarTopContent: calendarTopContentProp, CalendarTopContent, calendarWidth, calendarProps, classNames, className, "aria-label": ariaLabel, ...props }) {
     const generatedId = $8WNJc$react.useId();
     const autoId = id || generatedId;
     const calendarLabel = (typeof label === "string" ? label : undefined) ??
@@ -1302,17 +1759,24 @@ function DatePicker({ label, description, errorMessage, id, size = "md", variant
         "Calendario";
     const calendarBottomContent = calendarBottomContentProp ?? CalendarBottomContent;
     const calendarTopContent = calendarTopContentProp ?? CalendarTopContent;
+    const hasHelper = Boolean((description && !isInvalid) || (isInvalid && errorMessage));
     const { className: calendarClassName, style: calendarStyle, ...restCalendarProps } = calendarProps ?? {};
-    return (jsxRuntime.jsxs(react.DatePicker, { ...props, id: autoId, "aria-label": ariaLabel, isInvalid: isInvalid, isRequired: isRequired, isDisabled: isDisabled, className: withConsumerClass(["flex flex-col gap-1", fullWidth && "w-full", classNames?.base], className), children: [label && (jsxRuntime.jsx(react.Label, { className: withConsumerClass(["text-default-600 text-xs font-medium"], classNames?.label), children: label })), jsxRuntime.jsxs(react.DateField.Group, { fullWidth: fullWidth, className: withConsumerClass([
+    return (jsxRuntime.jsxs(react.DatePicker, { ...props, id: autoId, "aria-label": ariaLabel, isInvalid: isInvalid, isRequired: isRequired, isDisabled: isDisabled, className: withConsumerClass([
+            ROOT_PLACEMENT_CLASS[labelPlacement],
+            fullWidth && "w-full",
+            hasHelper && ROOT_HELPER_SPACE_CLASS[labelPlacement],
+            classNames?.base,
+        ], className), children: [label && (jsxRuntime.jsx(react.Label, { className: withConsumerClass(["text-default-600 text-xs font-medium"], classNames?.label), children: label })), jsxRuntime.jsxs(react.DateField.Group, { fullWidth: fullWidth, className: withConsumerClass([
                     SIZE_CLASS$5[size],
                     RADIUS_CLASS$8[radius],
                     VARIANT_CLASS$5[variant],
                     FIELD_FOCUS_CLASS$5,
-                ], classNames?.inputWrapper), children: [jsxRuntime.jsx(react.DateField.Input, { className: withConsumerClass([SIZE_TEXT_CLASS$4[size]], classNames?.input), children: (segment) => (jsxRuntime.jsx(react.DateField.Segment, { segment: segment, className: classNames?.segment })) }), jsxRuntime.jsx(react.DateField.Suffix, { children: jsxRuntime.jsx(react.DatePicker.Trigger, { className: classNames?.selectorButton, children: endContent !== undefined ? (jsxRuntime.jsx(react.DatePicker.TriggerIndicator, { className: classNames?.selectorIcon, children: endContent })) : (jsxRuntime.jsx(react.DatePicker.TriggerIndicator, { className: classNames?.selectorIcon })) }) })] }), description && !isInvalid && (jsxRuntime.jsx(react.Description, { className: classNames?.description, children: description })), jsxRuntime.jsxs(react.DatePicker.Popover, { className: classNames?.popoverContent, children: [calendarTopContent, jsxRuntime.jsxs(react.Calendar, { "aria-label": calendarLabel, minValue: props.minValue, maxValue: props.maxValue, ...restCalendarProps, className: withConsumerClass([
+                    GROUP_PLACEMENT_CLASS[labelPlacement],
+                ], classNames?.inputWrapper), children: [jsxRuntime.jsx(react.DateField.Input, { className: withConsumerClass([SIZE_TEXT_CLASS$4[size]], classNames?.input), children: (segment) => (jsxRuntime.jsx(react.DateField.Segment, { segment: segment, className: classNames?.segment })) }), jsxRuntime.jsx(react.DateField.Suffix, { children: jsxRuntime.jsx(react.DatePicker.Trigger, { className: classNames?.selectorButton, children: endContent !== undefined ? (jsxRuntime.jsx(react.DatePicker.TriggerIndicator, { className: classNames?.selectorIcon, children: endContent })) : (jsxRuntime.jsx(react.DatePicker.TriggerIndicator, { className: classNames?.selectorIcon })) }) })] }), description && !isInvalid && (jsxRuntime.jsx(react.Description, { className: withConsumerClass([HELPER_PLACEMENT_CLASS[labelPlacement]], classNames?.description) || undefined, children: description })), jsxRuntime.jsxs(react.DatePicker.Popover, { className: classNames?.popoverContent, children: [calendarTopContent, jsxRuntime.jsxs(react.Calendar, { "aria-label": calendarLabel, minValue: props.minValue, maxValue: props.maxValue, ...restCalendarProps, className: withConsumerClass([
                             typeof calendarClassName === "string"
                                 ? calendarClassName
                                 : undefined,
-                        ], classNames?.calendar) || undefined, style: calendarWidthStyle(calendarWidth, typeof calendarStyle === "object" ? calendarStyle : undefined), children: [jsxRuntime.jsxs(react.Calendar.Header, { children: [jsxRuntime.jsxs(react.Calendar.YearPickerTrigger, { children: [jsxRuntime.jsx(react.Calendar.YearPickerTriggerHeading, {}), jsxRuntime.jsx(react.Calendar.YearPickerTriggerIndicator, {})] }), jsxRuntime.jsx(react.Calendar.NavButton, { slot: "previous" }), jsxRuntime.jsx(react.Calendar.NavButton, { slot: "next" })] }), jsxRuntime.jsxs(react.Calendar.Grid, { children: [jsxRuntime.jsx(react.Calendar.GridHeader, { children: (day) => jsxRuntime.jsx(react.Calendar.HeaderCell, { children: day }) }), jsxRuntime.jsx(react.Calendar.GridBody, { children: (date) => (jsxRuntime.jsx(react.Calendar.Cell, { date: date, className: CALENDAR_CELL_CLASS$1 })) })] })] }), calendarBottomContent] }), isInvalid && errorMessage && (jsxRuntime.jsx(react.FieldError, { className: classNames?.errorMessage, children: errorMessage }))] }));
+                        ], classNames?.calendar) || undefined, style: calendarWidthStyle(calendarWidth, typeof calendarStyle === "object" ? calendarStyle : undefined), children: [jsxRuntime.jsxs(react.Calendar.Header, { children: [jsxRuntime.jsxs(react.Calendar.YearPickerTrigger, { children: [jsxRuntime.jsx(react.Calendar.YearPickerTriggerHeading, {}), jsxRuntime.jsx(react.Calendar.YearPickerTriggerIndicator, {})] }), jsxRuntime.jsx(react.Calendar.NavButton, { slot: "previous" }), jsxRuntime.jsx(react.Calendar.NavButton, { slot: "next" })] }), jsxRuntime.jsxs(react.Calendar.Grid, { children: [jsxRuntime.jsx(react.Calendar.GridHeader, { children: (day) => jsxRuntime.jsx(react.Calendar.HeaderCell, { children: day }) }), jsxRuntime.jsx(react.Calendar.GridBody, { children: (date) => (jsxRuntime.jsx(react.Calendar.Cell, { date: date, className: CALENDAR_CELL_CLASS$1 })) })] })] }), calendarBottomContent] }), isInvalid && errorMessage && (jsxRuntime.jsx(react.FieldError, { className: withConsumerClass([HELPER_PLACEMENT_CLASS[labelPlacement]], classNames?.errorMessage) || undefined, children: errorMessage }))] }));
 }
 
 // Mismo mecanismo que DatePicker.tsx / Input.tsx / Select.tsx (findings/
@@ -1723,6 +2187,10 @@ const INVALID_TEXT_CLASS$2 = "text-danger";
  * - Radius configurable (v3 no tiene la prop).
  * - `startContent`/`endContent` → `InputGroup.Prefix`/`InputGroup.Suffix`.
  * - `isClearable` → botón de limpiar propio (`CloseButton`); solo en modo controlado (`value`).
+ * - `onClear` (API v2) → basta para mostrar la X; se llama al limpiar (X o Escape) y el foco
+ *   vuelve al campo, como en v2.
+ * - `classNames`: los 10 slots de v2, cada uno en su nodo equivalente (tabla en `Input.types.ts`).
+ * - `labelPlacement` (API v2): aceptado y sin efecto — el label siempre va fuera.
  *
  * `ref` apunta al `<input>` REAL (`HTMLInputElement`), no al `InputGroup` ni al `TextField` que lo
  * envuelven: el consumidor que necesita el nodo —insertar texto en la posición del cursor con
@@ -1742,7 +2210,10 @@ const Input = $8WNJc$react.forwardRef(({ label, description, errorMessage, id,
 // `lg` que había aquí venía del `argTypes.defaultValue.summary` de la story, que YA estaba mal
 // en v2. Con "lg" todos los campos de las 4 apps que no pasan `size` salían 8px más altos, con
 // 2px más de padding lateral y el texto a 16px en vez de 14.
-size = "md", variant = "bordered", radius = "md", placeholder, startContent, endContent, isClearable = false, isInvalid = false, isRequired = false, isDisabled = false, isReadOnly = false, 
+size = "md", variant = "bordered", radius = "md", placeholder, startContent, endContent, isClearable: isClearableProp = false, onClear, 
+// Sin efecto (ver `InputProps.labelPlacement`): se saca del spread para que no llegue
+// al `<input>` como atributo desconocido.
+labelPlacement: _labelPlacement, isInvalid = false, isRequired = false, isDisabled = false, isReadOnly = false, 
 // `fullWidth` por defecto a `true`: HeroUI v2 lo traía en sus `defaultVariants`
 // (verificado en el paquete v2 compilado, `dist/components/input.js`:
 // `defaultVariants: { variant:"flat", color:"default", size:"md", fullWidth:true, … }`, con
@@ -1750,7 +2221,21 @@ size = "md", variant = "bordered", radius = "md", placeholder, startContent, end
 // `undefined` y el campo dejaba de llenar su contenedor: en una fila flex se encogía al ancho
 // de su contenido (medido por S2: 208px dentro de una fila de 592, 336px de hueco). En una
 // columna no se notaba porque el `stretch` del flex lo tapaba — pero afecta a cualquier app.
-fullWidth = true, value, defaultValue, onChange, onValueChange, className, classNames, required, name, type = "text", ...rest }, ref) => {
+fullWidth = true, value, defaultValue, onChange, onValueChange, className, classNames, required, name, type = "text", onKeyDown, ...rest }, ref) => {
+    // El `<input>` real, también para la fachada: v2 devolvía el foco al campo al limpiar
+    // (`domRef.current?.focus()` en `handleClear`). Se combina con el `ref` del consumidor.
+    const inputRef = $8WNJc$react.useRef(null);
+    const setInputRef = $8WNJc$react.useCallback((node) => {
+        inputRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    // v2: `isClearable = !!onClear || originalProps.isClearable` (`use-input.ts`).
+    const isClearable = isClearableProp || Boolean(onClear);
     const generatedId = $8WNJc$react.useId();
     const inputId = id || generatedId;
     // ⚠️ `isRequired` (prop de HeroUI, asterisco visual) y `required` (atributo HTML nativo, solo
@@ -1758,7 +2243,24 @@ fullWidth = true, value, defaultValue, onChange, onValueChange, className, class
     // Detectado por VRT (`FormExample`, que solo pasa `required`): tratarlos como lo mismo aquí
     // introducía un asterisco que v2 no tenía. `isRequired` maneja el asterisco (vía TextField);
     // `required` se reenvía tal cual al `<input>` nativo, sin efecto visual.
-    const showClear = isClearable && !isDisabled && !isReadOnly && Boolean(value);
+    // ── El valor lo guarda el `TextField`, no el `<input>` ───────────────────────────────────
+    //
+    // En react-aria el dueño del valor es el `TextField`: `useTextField` lo guarda con
+    // `useControlledState(value, defaultValue ?? "")` y se lo inyecta al `<input>` como `value`
+    // por contexto (`react-aria-components/dist/private/TextField.mjs`). Antes la fachada pasaba
+    // `value`/`defaultValue` al `InputGroup.Input` y ninguno al `TextField`, así que en modo NO
+    // controlado el `TextField` arrancaba en "" y el `<input>` recibía a la vez `value=""` (del
+    // contexto) y `defaultValue`: medido en jsdom, `<Input defaultValue="hola" />` salía VACÍO
+    // ya en el primer render, con el aviso de React «both value and defaultValue». Mismo arreglo
+    // que en `Textarea.tsx`.
+    //
+    // Aquí además la fachada lleva el valor no controlado en su propio estado (en vez de
+    // dejárselo al `TextField`), porque limpiar tiene que poder vaciarlo: `isClearable`/`onClear`
+    // en modo no controlado no tenían manera de escribir en el estado interno del `TextField`.
+    const isControlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = $8WNJc$react.useState(defaultValue ?? "");
+    const currentValue = isControlled ? value : uncontrolledValue;
+    const showClear = isClearable && !isDisabled && !isReadOnly && Boolean(currentValue);
     // Solo flota cuando hay label y NO hay placeholder: con placeholder, v2 ya mostraba el label
     // arriba desde el primer render (ver el bloque de arriba).
     const labelFlotante = Boolean(label) && !placeholder;
@@ -1766,7 +2268,12 @@ fullWidth = true, value, defaultValue, onChange, onValueChange, className, class
         onChange?.(event);
         onValueChange?.(event.target.value);
     };
-    const handleClear = () => {
+    // Orden de v2 (`handleClear` de `use-input.ts`): primero el valor a "" —que en v2 disparaba
+    // `onValueChange`—, luego `onClear`, y el foco vuelve al campo.
+    const clearValue = () => {
+        if (!isControlled) {
+            setUncontrolledValue("");
+        }
         onValueChange?.("");
         if (onChange) {
             const fakeEvent = {
@@ -1775,15 +2282,38 @@ fullWidth = true, value, defaultValue, onChange, onValueChange, className, class
             };
             onChange(fakeEvent);
         }
+        onClear?.();
     };
-    return (jsxRuntime.jsxs(react.TextField, { id: inputId, name: name, isInvalid: isInvalid, isRequired: isRequired, isDisabled: isDisabled, isReadOnly: isReadOnly, className: react.cn(FIELD_STACK_CLASS$3[size], fullWidth ? "w-full" : "", 
+    const handleClear = () => {
+        clearValue();
+        inputRef.current?.focus();
+    };
+    // Escape limpia, igual que v2 (`handleKeyDown` de `use-input.ts`: con valor, limpiable y
+    // no de solo lectura). El `onKeyDown` del consumidor se llama primero.
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.key === "Escape" && showClear) {
+            clearValue();
+        }
+    };
+    return (jsxRuntime.jsxs(react.TextField, { id: inputId, value: currentValue, 
+        // Solo el modo no controlado escribe aquí; en controlado manda el `value` del padre
+        // (que se entera por `onChange`/`onValueChange` del `<input>`).
+        onChange: isControlled ? undefined : setUncontrolledValue, name: name, isInvalid: isInvalid, isRequired: isRequired, isDisabled: isDisabled, isReadOnly: isReadOnly, className: react.cn(FIELD_STACK_CLASS$3[size], fullWidth ? "w-full" : "", 
+        // `mainWrapper` de v2 no tiene nodo propio aquí (ver tabla en `Input.types.ts`):
+        // se fusiona en la raíz antes que `base`, que es el slot más externo.
+        classNames?.mainWrapper, 
+        // `base` de v2 = la raíz. v2 los juntaba así: `clsx(classNames.base, className)`.
+        classNames?.base, 
         // El `className` del consumidor, en la raíz y en último lugar: el slot `base` de
         // v2 y la posición que le deja ganar en tailwind-merge (ver bloque de arriba).
         className), children: [label && (jsxRuntime.jsx(react.Label, { className: react.cn(LABEL_CLASS$4, LABEL_LEFT_CLASS[variant], variant === "underlined" ? "top-0" : LABEL_OFFSET_CLASS$1[size], isInvalid ? INVALID_LABEL_CLASS$2 : "", labelFlotante ? LABEL_INSIDE_CLASS[size] : "", labelFlotante ? LABEL_FLOAT_CLASS : "", classNames?.label), children: label })), jsxRuntime.jsxs(react.InputGroup, { isInvalid: isInvalid, isDisabled: isDisabled, isReadOnly: isReadOnly, className: react.cn(SIZE_CLASS$3[size], radius === "full" ? PADDING_FULL_CLASS$1[size] : PADDING_CLASS$2[size], variant === "underlined" ? UNDERLINED_INNER_CLASS$1[size] : "", RADIUS_CLASS$6[radius], VARIANT_CLASS$3[variant], FIELD_FOCUS_CLASS$3, FIELD_SHADOW_CLASS$2, 
                 // Incondicional, como el `inputWrapper` de v2: la caja del campo llena
                 // siempre su raíz, y es la raíz la que responde a `fullWidth` y al ancho que
                 // pase el consumidor.
-                "w-full", classNames?.inputWrapper), children: [startContent && (jsxRuntime.jsx(react.InputGroup.Prefix, { className: "border-none bg-transparent px-0", children: startContent })), jsxRuntime.jsx(react.InputGroup.Input, { ...rest, ref: ref, required: required, type: type, placeholder: labelFlotante ? " " : placeholder, value: value, defaultValue: defaultValue, onChange: handleChange, className: react.cn("bg-transparent p-0", SIZE_TEXT_CLASS$2[size], isInvalid ? INVALID_TEXT_CLASS$2 : "", startContent ? "ps-1.5" : "", endContent || showClear ? "pe-1.5" : "", classNames?.input) }), showClear && (jsxRuntime.jsx(react.CloseButton, { "aria-label": "Limpiar", className: "h-4 w-4 min-h-0 p-0.5 mr-1", onPress: handleClear })), endContent && (jsxRuntime.jsx(react.InputGroup.Suffix, { className: "border-none bg-transparent px-0", children: endContent }))] }), description && !isInvalid && (jsxRuntime.jsx(react.Description, { className: react.cn(HELPER_CLASS$2, "text-left", classNames?.description), children: description })), isInvalid && errorMessage && (jsxRuntime.jsx(react.FieldError, { className: react.cn(HELPER_CLASS$2, "text-left", classNames?.errorMessage), children: errorMessage }))] }));
+                "w-full", 
+                // v3 fusiona `innerWrapper` e `inputWrapper` de v2 en este único elemento.
+                classNames?.innerWrapper, classNames?.inputWrapper), children: [startContent && (jsxRuntime.jsx(react.InputGroup.Prefix, { className: "border-none bg-transparent px-0", children: startContent })), jsxRuntime.jsx(react.InputGroup.Input, { ...rest, ref: setInputRef, onKeyDown: handleKeyDown, required: required, type: type, placeholder: labelFlotante ? " " : placeholder, onChange: handleChange, className: react.cn("bg-transparent p-0", SIZE_TEXT_CLASS$2[size], isInvalid ? INVALID_TEXT_CLASS$2 : "", startContent ? "ps-1.5" : "", endContent || showClear ? "pe-1.5" : "", classNames?.input) }), showClear && (jsxRuntime.jsx(react.CloseButton, { "aria-label": "Limpiar", className: react.cn("h-4 w-4 min-h-0 p-0.5 mr-1", classNames?.clearButton), onPress: handleClear })), endContent && (jsxRuntime.jsx(react.InputGroup.Suffix, { className: "border-none bg-transparent px-0", children: endContent }))] }), description && !isInvalid && (jsxRuntime.jsx(react.Description, { className: react.cn(HELPER_CLASS$2, "text-left", classNames?.helperWrapper, classNames?.description), children: description })), isInvalid && errorMessage && (jsxRuntime.jsx(react.FieldError, { className: react.cn(HELPER_CLASS$2, "text-left", classNames?.helperWrapper, classNames?.errorMessage), children: errorMessage }))] }));
 });
 Input.displayName = "Input";
 
@@ -1890,12 +2420,70 @@ const RADIUS_CLASS$5 = {
 // v3 no tiene prop `shadow`: su Card siempre usa `shadow-surface`. Los valores de v2 se
 // reproducen con los tokens propios `--aurora-shadow-*` (emitidos en F1, mismo valor exacto que
 // generaba el plugin `heroui()` de v2 — ver findings/tabla-mapeo-tokens.md §2).
+//
+// ⚠️ El prefijo `shadow:` dentro del corchete NO es decorativo. Sin él, tailwind-merge 3 clasifica
+// `shadow-[var(--x)]` como COLOR de sombra (grupo `shadow-color`), no como sombra: medido con el
+// `cn` real, `cn("shadow-[var(--aurora-shadow-small)]", "shadow-2xl")` conserva LAS DOS, y en el
+// CSS de Tailwind 4 la arbitraria se emite después de `shadow-2xl` (orden de candidato), así que
+// ganaba la nuestra — el `shadow-2xl` que pide `whatsapp-setup-modal` no se veía. Con la etiqueta
+// `shadow:` tailwind-merge la reconoce como sombra y la retira cuando la app pasa la suya; el CSS
+// que emite Tailwind 4 es idéntico (`--tw-shadow: var(--aurora-shadow-small)`, comprobado con
+// `@tailwindcss/node`).
 const SHADOW_CLASS = {
     none: "shadow-none",
-    sm: "shadow-[var(--aurora-shadow-small)]",
-    md: "shadow-[var(--aurora-shadow-medium)]",
-    lg: "shadow-[var(--aurora-shadow-large)]",
-};
+    sm: "shadow-[shadow:var(--aurora-shadow-small)]",
+    md: "shadow-[shadow:var(--aurora-shadow-medium)]",
+    lg: "shadow-[shadow:var(--aurora-shadow-large)]",
+};
+// Literales del `tv` de v2 (`@heroui/theme@2.4.15`, `dist/components/card.js`), con sus tokens
+// traducidos a los que existen en Tailwind 4 + Aurora:
+//   isPressable → `cursor-pointer` + compound `data-[pressed=true]:scale-[0.97]
+//                 tap-highlight-transparent` (el hundido lo hace aquí `:active`, que es lo que
+//                 marcaba `data-pressed` en un botón nativo)
+//   disableAnimation=false → `transition-transform-background motion-reduce:transition-none`
+//   foco → `dataFocusVisibleClasses` (`outline-2 outline-focus outline-offset-2`)
+//   isHoverable → `data-[hover=true]:bg-content2` (aquí `hover:`, react-aria ya no escribe
+//                 `data-hover` — trampa 3 de la skill `auraui-components`)
+//   isDisabled → `opacity-disabled cursor-not-allowed` (`opacity-disabled` era 0.5 en v2)
+//   fullWidth → `w-full`
+const PRESSABLE_CLASS = "isolate cursor-pointer text-foreground outline-none focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-focus focus-visible:outline-offset-2 [-webkit-tap-highlight-color:transparent]";
+const PRESS_ANIMATION_CLASS = "transition-[transform,background-color] motion-reduce:transition-none active:scale-[0.97]";
+const HOVERABLE_CLASS = "hover:bg-content2";
+const DISABLED_CLASS = "opacity-50 cursor-not-allowed";
+// Controles que tienen su propia pulsación. Un clic que nace dentro de uno de ellos es SUYO, no de
+// la card: los `Button` de Aurora (react-aria) ya paran la propagación del `click` (medido en
+// jsdom con el `Button` de la librería), pero un `<button>`/`<a>` nativo o un `<input>` no.
+const CONTROL_INTERNO = 'button, a[href], input, select, textarea, summary, [role="button"], [role="link"], [role="checkbox"], [role="switch"], [role="menuitem"], [role="tab"], [role="option"]';
+function desdeControlInterno(event) {
+    const target = event.target;
+    if (!target || target === event.currentTarget) {
+        return false;
+    }
+    const control = target.closest?.(CONTROL_INTERNO);
+    return (!!control &&
+        control !== event.currentTarget &&
+        event.currentTarget.contains(control));
+}
+/**
+ * Tecla → `PressEvent` con la forma del de react-aria (`pointerType: "keyboard"`, punto en el
+ * centro de la card, como hace `pressEventFromClick` con un click sintético de `detail === 0`).
+ */
+function pressEventFromKey(event) {
+    const target = event.currentTarget;
+    const rect = target.getBoundingClientRect();
+    return {
+        type: "press",
+        pointerType: "keyboard",
+        target,
+        shiftKey: event.shiftKey,
+        ctrlKey: event.ctrlKey,
+        metaKey: event.metaKey,
+        altKey: event.altKey,
+        x: rect.width / 2,
+        y: rect.height / 2,
+        continuePropagation: () => undefined,
+    };
+}
 /**
  * Card genérica siguiendo las reglas de diseño BeweOS basada en HeroUI v3.
  *
@@ -1909,18 +2497,94 @@ const SHADOW_CLASS = {
  * - Shadow: none, sm, md, lg (configurable, reimplementado vía className — v3 no tiene la prop)
  * - Radius: sm (por defecto, configurable, reimplementado vía className — v3 no tiene la prop)
  * - Padding configurable (sm, md, lg)
+ * - `className` de la app AL FINAL y fusionado con `cn` (tailwind-merge), como el `slots.base({
+ *   class })` de v2: un `p-0`/`rounded-xl`/`shadow-2xl` de la app retira el default de la fachada
+ *   en vez de competir con él por orden de CSS.
+ * - `ref` y TODAS las props DOM (`style`, `onMouse*`, `aria-*`, `data-*`…) llegan al nodo raíz,
+ *   como en v2 (`HTMLHeroUIProps<"div">`).
+ * - API v2 de card pulsable: `isPressable`/`onPress`/`disableAnimation`/`disableRipple`, más
+ *   `isHoverable`/`isDisabled`/`fullWidth`.
+ *
+ * `ref` se reenvía con `forwardRef` (patrón de las fachadas de campo del repo, ver
+ * `Input.tsx`) y apunta al nodo raíz, que es siempre un `<div>` (con `isPressable`,
+ * `<div role="button">`).
  */
-const Card = ({ children, className = "", shadow = "sm", radius = "sm", padding = "md", ...props }) => {
-    const combinedClassName = [
-        paddingClasses[padding],
-        RADIUS_CLASS$5[radius],
-        SHADOW_CLASS[shadow],
-        className,
-    ]
-        .filter(Boolean)
-        .join(" ");
-    return (jsxRuntime.jsx(react.Card, { className: combinedClassName, ...props, children: children }));
-};
+const Card = $8WNJc$react.forwardRef(({ children, className, shadow = "sm", radius = "sm", padding = "md", isPressable = false, onPress, onClick, onKeyDown, onKeyUp, disableAnimation = false, disableRipple = false, isHoverable = false, isDisabled = false, fullWidth = false, render, ...props }, ref) => {
+    // Como en v2 (`@heroui/card@2.2.21`, `useCard`): `disableAnimation` apaga también la onda.
+    const sinRipple = disableRipple || disableAnimation;
+    const { ondas, lanzar, quitar } = useRipple();
+    const pulsable = isPressable && !isDisabled;
+    const press = $8WNJc$react.useCallback((pressEvent) => {
+        onPress?.(pressEvent);
+        if (!sinRipple) {
+            lanzar(pressEvent);
+        }
+    }, [onPress, sinRipple, lanzar]);
+    const handleClick = $8WNJc$react.useCallback((event) => {
+        // Card pulsable deshabilitada: ni `onClick` de la app, como el `disabled` nativo del
+        // `<button>` que era hasta la .140.
+        if (isPressable && isDisabled) {
+            return;
+        }
+        onClick?.(event);
+        if (!pulsable || desdeControlInterno(event)) {
+            return;
+        }
+        press(pressEventFromClick(event));
+    }, [onClick, isPressable, isDisabled, pulsable, press]);
+    // Teclado de un `<button>` nativo, que el `<div role="button">` no trae: Enter pulsa al
+    // bajar la tecla y Espacio al soltarla. `preventDefault` en ambos: Espacio haría scroll de
+    // la página y Enter podría enviar un `<form>` que envuelva la card. Solo cuando el foco está
+    // EN la card: una tecla sobre un botón interno es de ese botón (react-aria ya para su
+    // propagación, y esta guarda cubre también a los controles nativos).
+    const handleKeyDown = $8WNJc$react.useCallback((event) => {
+        onKeyDown?.(event);
+        if (!pulsable || event.target !== event.currentTarget) {
+            return;
+        }
+        if (event.key === " ") {
+            event.preventDefault();
+        }
+        else if (event.key === "Enter") {
+            event.preventDefault();
+            if (!event.repeat) {
+                press(pressEventFromKey(event));
+            }
+        }
+    }, [onKeyDown, pulsable, press]);
+    const handleKeyUp = $8WNJc$react.useCallback((event) => {
+        onKeyUp?.(event);
+        if (!pulsable ||
+            event.target !== event.currentTarget ||
+            event.key !== " ") {
+            return;
+        }
+        event.preventDefault();
+        press(pressEventFromKey(event));
+    }, [onKeyUp, pulsable, press]);
+    const combinedClassName = react.cn(paddingClasses[padding], RADIUS_CLASS$5[radius], SHADOW_CLASS[shadow], fullWidth ? "w-full" : "", isPressable ? PRESSABLE_CLASS : "", isPressable && !disableAnimation ? PRESS_ANIMATION_CLASS : "", isHoverable ? HOVERABLE_CLASS : "", isDisabled ? DISABLED_CLASS : "", 
+    // El `className` de la app, último: gana por fusión (ver JSDoc).
+    className);
+    // v2 cambiaba el ELEMENTO a `<button>` con `isPressable`, y hasta la .140 esta fachada lo
+    // imitaba con el `render` de v3. Se quitó porque las apps meten botones DENTRO de la card
+    // pulsable (`ChannelCard` de smbs, Linda → Compartir: «Compartir»/«Integrar»), y
+    // `<button>` dentro de `<button>` es HTML inválido: React avisa en consola
+    // («cannot be a descendant of <button>», medido en jsdom) y el parser del navegador lo
+    // reparenta. La card se queda en el `<div>` de v3 con la semántica de botón de v2
+    // (`useCard`: `role: "button"` + `tabIndex: isPressable ? 0 : -1`) y el teclado a mano
+    // (ver `handleKeyDown`). El `render` de la app pasa tal cual.
+    const pressableProps = isPressable
+        ? {
+            role: "button",
+            tabIndex: isDisabled ? undefined : 0,
+            "aria-disabled": isDisabled || undefined,
+            onKeyDown: handleKeyDown,
+            onKeyUp: handleKeyUp,
+        }
+        : {};
+    return (jsxRuntime.jsxs(react.Card, { ...props, ...pressableProps, ref: ref, className: combinedClassName, "data-pressable": isPressable || undefined, "data-disabled": isDisabled || undefined, onClick: isPressable || onClick ? handleClick : undefined, render: render, children: [children, isPressable && ondas.length > 0 && (jsxRuntime.jsx(CapaRipple, { ondas: ondas, onFin: quitar }))] }));
+});
+Card.displayName = "Card";
 
 const H2 = ({ children, className, ...props }) => {
     return (jsxRuntime.jsx("h2", { className: react.cn("text-lg font-semibold", className), ...props, children: children }));
@@ -2158,10 +2822,221 @@ function withCollectionItemIds(children) {
     return Object.keys(patch).length > 0 ? $8WNJc$react.cloneElement(element, patch) : element;
 }
 
+/**
+ * Repone en los items y secciones de una colección de v3 la API de CONTENIDO de v2 que las apps
+ * siguen escribiendo en `SelectItem`/`AutocompleteItem`/`SelectSection` (TECH-2459, hallazgo
+ * beweossmbs 23-sep).
+ *
+ * QUÉ HACÍA v2 (`@heroui/listbox@2.3.31`, `dist/chunk-2TBDFBA3.mjs`, leído del tarball):
+ *
+ *   <li …getItemProps()>
+ *     {startContent && <span data-slot="startContent">…}
+ *     {description
+ *        ? <div wrapper><span title>{rendered}</span><span description>{description}</span></div>
+ *        : <span title>{rendered}</span>}
+ *     {selectedIcon}
+ *     {endContent && <span data-slot="endContent">…}
+ *   </li>
+ *
+ * con los slots del `tv` (`@heroui/theme@2.4.15`, `dist/components/listbox.js:100-139`):
+ * `wrapper: "w-full flex flex-col items-start justify-center"`, `title: "flex-1 text-small
+ * font-normal"`, `description: "w-full text-tiny text-foreground-500 …"`. La sección
+ * (`chunk-Q2EVG7SO.mjs`) pintaba la cabecera `heading: "pl-1 text-tiny text-foreground-500"` y,
+ * con `showDivider` (default `false`), un `Divider` con `mt-2` al final.
+ *
+ * QUÉ HACE v3. `ListBox.Item` no tiene NINGUNA de esas props (la guía oficial: «Place icons
+ * manually in item content», «Use `Description` component»; y `title` de la sección → `Header`).
+ * Pasadas tal cual se descartan en silencio: el `filterDOMProps` de react-aria no las deja llegar
+ * al DOM y el item pinta solo su texto.
+ *
+ * POR QUÉ AQUÍ Y NO EN EL SHIM. `SelectItem`/`AutocompleteItem`/`SelectSection` tienen que seguir
+ * siendo el MISMO objeto que `ListBoxItem`/`ListBoxSection`: el normalizador de ids
+ * (`utils/collection-items.ts`) y el indicador (`with-item-indicator.tsx`) reconocen los items por
+ * identidad de `element.type`, y un envoltorio los volvería invisibles (los items dentro de una
+ * sección perderían su `id` derivado de la `key`, que es el defecto nº 1 de la migración). Así que
+ * el shim solo TIPA las props v2 y esta función, llamada desde la fachada que tiene los items en
+ * la mano, las traduce a la anatomía de v3.
+ *
+ * NO-OP cuando no hay nada que traducir: un item sin `description`/`startContent`/`endContent`/
+ * `classNames` se devuelve tal cual (mismo objeto), así que los 150+ items planos de las apps no
+ * cambian ni un nodo.
+ */
+/** Marca de lo que v2 NO pintaba en el disparador: allí solo iba el `textValue` del item. */
+const ITEM_EXTRA_ATTR = "data-aura-item-extra";
+/**
+ * Clase para `Select.Value`: esconde en el disparador lo que v2 solo pintaba en la lista.
+ *
+ * `SelectValue` de react-aria repinta los CHILDREN del item elegido dentro del disparador
+ * (`react-aria-components/dist/private/Select.mjs:226-262`). v2 pintaba ahí solo el `textValue`
+ * (`@heroui/select@2.4.33`, `dist/chunk-BJWIL32D.mjs`: `state.selectedItems.map(i =>
+ * i.textValue).join(", ")`), así que el icono lateral no debe colarse junto al valor. La
+ * descripción se esconde SOLA: `Description` de v3 devuelve `null` sin el slot de texto
+ * `description`, y `SelectValue` resetea ese contexto (`TextContext.Provider value={undefined}`,
+ * misma línea) — el mismo mecanismo que usa v3 para esconder su indicador ahí (`select.css:121`).
+ */
+const HIDE_ITEM_EXTRAS_CLASS = `[&_[${ITEM_EXTRA_ATTR}]]:hidden`;
+// Literales de v2 portados a la pieza de v3, sin clases v2 muertas (`text-small`/`text-tiny` no
+// existen sin el plugin `heroui()` y `cn` las borraría). El tamaño del título NO se fija: el
+// desplegable de v3 ya es `text-sm` (= el `text-small` de v2) y dentro del disparador tiene que
+// heredar el tamaño del campo (`lg` = 16px).
+const ITEM_WRAPPER_CLASS = "flex w-full min-w-0 flex-col items-start justify-center";
+const ITEM_TITLE_CLASS$1 = "min-w-0 flex-1 font-normal";
+// `Description` de v3 ya trae `text-xs text-muted` (`description.css`), y `text-muted` es el mismo
+// zinc-500/400 que el `text-foreground-500` de v2 (medido en `Dropdown.tsx`, bloque de la cabecera).
+const ITEM_DESCRIPTION_CLASS = "w-full";
+const ITEM_SIDE_CLASS = "flex shrink-0 items-center";
+// Cabecera de sección: mismo único ajuste que la fachada `Dropdown` (ver `SECTION_HEADING_CLASS`
+// en `Dropdown.tsx`: tamaño y color de `.header` ya coinciden con v2; el peso no).
+const SECTION_HEADING_CLASS$1 = "font-normal";
+// `mt-2` del slot `divider` de v2; el ancho y el color los pone el `Separator` de v3.
+const SECTION_DIVIDER_CLASS = "mt-2";
+/** `isEmpty` de v2 (`@heroui/shared-utils`): null/undefined/""/false no cuentan. */
+function hasValue$2(node) {
+    return node !== null && node !== undefined && node !== "" && node !== false;
+}
+function translateItem(element) {
+    const { children, className, description, startContent, endContent, classNames, } = element.props;
+    const hasDescription = hasValue$2(description);
+    const hasStart = hasValue$2(startContent);
+    const hasEnd = hasValue$2(endContent);
+    if (!(hasDescription || hasStart || hasEnd || classNames)) {
+        return element;
+    }
+    // Solo `classNames.base` (el caso de `timezone-search-select`): nada que recomponer, basta
+    // fusionar la clase en la raíz. Y children como función (render props de react-aria): no se
+    // puede componer alrededor sin romper la firma, así que se aplican solo las clases de la raíz.
+    const onlyBase = !(hasDescription ||
+        hasStart ||
+        hasEnd ||
+        classNames?.title ||
+        classNames?.wrapper ||
+        classNames?.description);
+    if (onlyBase || typeof children === "function") {
+        return $8WNJc$react.cloneElement(element, {
+            className: react.cn(classNames?.base, className) || undefined,
+            description: undefined,
+            startContent: undefined,
+            endContent: undefined,
+            classNames: undefined,
+        });
+    }
+    const title = (jsxRuntime.jsx("span", { className: react.cn(ITEM_TITLE_CLASS$1, classNames?.title), children: children }));
+    const next = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasStart && (jsxRuntime.jsx("span", { "data-slot": "start-content", [ITEM_EXTRA_ATTR]: "", className: ITEM_SIDE_CLASS, children: startContent })), hasDescription ? (jsxRuntime.jsxs("div", { className: react.cn(ITEM_WRAPPER_CLASS, classNames?.wrapper), children: [title, jsxRuntime.jsx(react.Description, { className: react.cn(ITEM_DESCRIPTION_CLASS, classNames?.description), children: description })] })) : (title), hasEnd && (jsxRuntime.jsx("span", { "data-slot": "end-content", [ITEM_EXTRA_ATTR]: "", className: ITEM_SIDE_CLASS, children: endContent }))] }));
+    return $8WNJc$react.cloneElement(element, {
+        // v2: `cn(classNames?.base, className)` (`use-listbox-item.mjs`), así que `className` gana.
+        className: react.cn(classNames?.base, className) || undefined,
+        description: undefined,
+        startContent: undefined,
+        endContent: undefined,
+        classNames: undefined,
+        children: next,
+    });
+}
+function translateSection(element) {
+    const { children, className, title, showDivider, classNames } = element.props;
+    const inner = withV2ItemContent(children);
+    const hasTitle = hasValue$2(title);
+    if (!(hasTitle || showDivider || classNames) && inner === children) {
+        return element;
+    }
+    // ⚠️ Los hijos van como ARGUMENTOS SUELTOS de `cloneElement`, no envueltos en un Fragment:
+    // `withItemIndicator` (que corre después) y `withCollectionItemIds` bajan a los items de una
+    // sección leyendo `props.children` como array o elemento, y un Fragment los escondería — los
+    // items de la sección se quedarían sin checkmark.
+    const parts = [];
+    if (hasTitle) {
+        parts.push(jsxRuntime.jsx(react.Header, { className: react.cn(SECTION_HEADING_CLASS$1, classNames?.heading), children: title }, "aura-section-header"));
+    }
+    parts.push(...(Array.isArray(inner) ? inner : [inner]));
+    if (showDivider) {
+        parts.push(jsxRuntime.jsx(react.Separator, { className: react.cn(SECTION_DIVIDER_CLASS, classNames?.divider) }, "aura-section-divider"));
+    }
+    return $8WNJc$react.cloneElement(element, {
+        className: react.cn(classNames?.base, className) || undefined,
+        // `title` en v3 es el atributo global de HTML: sin retirarlo sale como *tooltip*
+        // nativo sobre toda la sección (el mismo motivo por el que v2 lo quitaba del spread,
+        // `chunk-Q2EVG7SO.mjs`: «removed title from props to avoid browsers showing a tooltip»).
+        title: undefined,
+        showDivider: undefined,
+        classNames: undefined,
+    }, ...parts);
+}
+/**
+ * Traduce la API de contenido v2 de cada item/sección de la colección. Va DESPUÉS de
+ * `withCollectionItemIds` (que deriva el `textValue` del texto del item: si la descripción ya
+ * estuviera dentro, la sumaría al texto de búsqueda y del disparador) y ANTES de
+ * `withItemIndicator`.
+ *
+ * Acepta también children como FUNCIÓN (colección dinámica con `items`, la forma de 11 de los 11
+ * `AuraAutocomplete` de beweossmbs): se envuelve la función para traducir lo que devuelva.
+ */
+function withV2ItemContent(children) {
+    if (typeof children === "function") {
+        const render = children;
+        return ((item) => withV2ItemContent(render(item)));
+    }
+    if (Array.isArray(children)) {
+        return children.map((child) => withV2ItemContent(child));
+    }
+    if (!$8WNJc$react.isValidElement(children)) {
+        return children;
+    }
+    if (children.type === react.ListBoxSection) {
+        return translateSection(children);
+    }
+    if (children.type === react.ListBoxItem) {
+        return translateItem(children);
+    }
+    return children;
+}
+
 /** Traducciones por defecto en español (mismo literal que la ✕ de la fachada `Input`). */
 const DEFAULT_TRANSLATIONS$f = {
     clearButtonAriaLabel: "Limpiar",
+    emptyContent: "No se encontraron resultados",
 };
+/*
+ * La lista vacía (TECH-2459, hallazgo beweossmbs 23-sep: 6 `AuraAutocomplete` pasan
+ * `listboxProps.emptyContent` y ninguno se veía).
+ *
+ * v2 (`@heroui/autocomplete@2.3.34`, `dist/chunk-J7SBPTP2.mjs`, leído del tarball):
+ *
+ *   allowsEmptyCollection = true,                                         (l.36, default)
+ *   listboxProps: mergeProps({
+ *     hideEmptyContent: allowsCustomValue && !listboxProps?.emptyContent, (l.160)
+ *     emptyContent: "No results found.",                                  (l.161)
+ *   }, listboxProps)
+ *
+ * O sea: abría la lista aunque el filtro la dejara vacía, y pintaba un texto — salvo con
+ * `allowsCustomValue` sin texto propio (campo libre: "sin resultados" no es un error ahí). v3 invierte
+ * el default (`allowsEmptyCollection` a `false`: la lista se CIERRA al quedarse vacía) y su `ListBox`
+ * no pinta nada sin `renderEmptyState`. Se reponen las dos cosas con la misma regla de v2; un
+ * `allowsEmptyCollection` explícito del consumidor sigue mandando. El texto por defecto va
+ * traducido (patrón i18n del repo), no el inglés de v2.
+ *
+ * Medidas: las del estado vacío de `Select` (hueco del alto de una opción de v3, gris
+ * `text-foreground-400` del slot `emptyContent` de v2), con el `px-2` del item de v3 porque este
+ * popover no pisa el padding de los items como sí hace el del Select.
+ */
+const EMPTY_CONTENT_CLASS$1 = "flex min-h-9 w-full items-center px-2 py-1.5 text-start text-foreground-400";
+/*
+ * El mensaje de error (v2 `errorMessage`, 3 usos en beweossmbs que hoy no se veían). v2 lo pintaba
+ * bajo el campo en el `helperWrapper` del `Input` (`p-1` + `text-tiny text-danger`), solo con el
+ * campo inválido. `FieldError` de v3 ya trae `px-1 text-xs text-danger` (`field-error.css`) y se
+ * muestra solo cuando react-aria da el campo por inválido; el `text-left` es por si el campo vive
+ * en un contenedor centrado. El hueco lo da el `gap-2` del stack, en vez de los 4px del `p-1`: la
+ * diferencia es de 4px y se deja en el ritmo de v3 (§9.1).
+ */
+const ERROR_MESSAGE_CLASS = "text-left";
+/*
+ * `isLoading` (v2): el `selectorButton` pasaba a `isLoading` y su spinner ocupaba el sitio del
+ * chevron (`chunk-J7SBPTP2.mjs:168`). ⚠️ En la fachada de v2 eso no se veía con la lupa puesta,
+ * porque esa fachada ocultaba el `selectorButton` cuando había icono (`selectorButton: "!hidden"`,
+ * `git show b39d28f:src/components/autocomplete/AutoComplete.tsx`): el spinner se escondía con él.
+ * Aquí se muestra SIEMPRE, en el sitio del extremo que haya (icono o chevron), porque una prop que
+ * no pinta nada con la configuración por defecto es justo lo que la app reporta como roto.
+ */
+const SPINNER = (jsxRuntime.jsx(react.Spinner, { "aria-hidden": true, "data-slot": "autocomplete-spinner", size: "sm", color: "current", className: "text-default-400" }));
 /**
  * Clases del wrapper del icono: lo mete DENTRO del recuadro del campo.
  *
@@ -2437,7 +3312,7 @@ const CLEAR_GAP_WITH_TRIGGER_UNDERLINED_CLASS = "me-9";
  * ⚠️ `h-4 w-4 p-0` deja el glifo de 16px ocupando la caja entera; el `[&_svg]:m-0` quita los
  * márgenes negativos de v3 para que el centro del glifo coincida con el centro de la caja.
  */
-const CLEAR_BUTTON_CLASS = "h-4 w-4 min-h-0 shrink-0 rounded-full bg-transparent p-0 text-default-500 hover:bg-transparent [&_svg]:m-0";
+const CLEAR_BUTTON_CLASS$2 = "h-4 w-4 min-h-0 shrink-0 rounded-full bg-transparent p-0 text-default-500 hover:bg-transparent [&_svg]:m-0";
 const DEFAULT_ICON = (jsxRuntime.jsx(IconComponent, { icon: "solar:magnifer-outline", className: "text-default-400 pointer-events-none shrink-0", size: "sm", "aria-hidden": true }));
 /**
  * AuraAutocomplete genérico reutilizable, migrado al `ComboBox` compound de HeroUI v3 (el
@@ -2462,13 +3337,44 @@ const AuraAutocomplete = ({ label, id, icon, placeholder, className, children, v
 // limpiarlo. Se reenvían tal cual al `ComboBox`, así que para el consumidor no cambia nada:
 // pasar `undefined` es indistinguible de no pasarlos (react-aria decide controlado/no
 // controlado con `!== undefined`).
-isClearable = true, isReadOnly, inputValue, selectedKey, onInputChange, onSelectionChange, translations, radius: _radius, ...props }) => {
+isClearable = true, isReadOnly, inputValue, selectedKey, onInputChange, onSelectionChange, translations, radius: _radius, isInvalid, errorMessage, listboxProps, isLoading = false, allowsCustomValue, allowsEmptyCollection, isOpen, onOpenChange, popoverProps, 
+// Aceptada y descartada: ver `AuraAutocompleteProps.labelPlacement`.
+labelPlacement: _labelPlacement, scrollShadowProps, ...props }) => {
     const generatedId = $8WNJc$react.useId();
     const autoId = id || generatedId;
-    const resolvedIcon = icon === undefined ? DEFAULT_ICON : icon;
+    // Con `isLoading` el spinner ocupa el extremo (ver `SPINNER`): a efectos de maquetación es el
+    // icono, así que todas las decisiones de hueco de abajo lo tratan como tal.
+    const resolvedIcon = isLoading
+        ? SPINNER
+        : icon === undefined
+            ? DEFAULT_ICON
+            : icon;
     const t = { ...DEFAULT_TRANSLATIONS$f, ...translations };
+    // La regla de v2 para la lista vacía (ver `EMPTY_CONTENT_CLASS`).
+    const hideEmptyContent = Boolean(allowsCustomValue) && listboxProps?.emptyContent == null;
+    const emptyContent = listboxProps?.emptyContent ?? t.emptyContent;
     /** El `<input>` real, para devolverle el foco tras limpiar (ver `handleClear`). */
     const inputRef = $8WNJc$react.useRef(null);
+    /*
+     * `isOpen` controlado (ver `AuraAutocompleteProps.isOpen`). La fachada sigue el estado de
+     * apertura de react-aria por su `onOpenChange` y decide con él si el popover se ve: visible solo
+     * si react-aria lo tiene abierto Y la app no lo ha cerrado. `ComboBox.Popover` es el `Popover`
+     * de react-aria-components, que con `isOpen` propio usa ese valor en vez del estado del
+     * `ComboBox` (`Popover.mjs`: `props.isOpen != null ? localState : contextState`).
+     */
+    const [ariaOpen, setAriaOpen] = $8WNJc$react.useState(false);
+    const handleOpenChange = (open, menuTrigger) => {
+        setAriaOpen(open);
+        onOpenChange?.(open, menuTrigger);
+    };
+    const handleInputChange = (value) => {
+        // La lista está abierta para react-aria pero la app la cerró: react-aria no volverá a avisar
+        // (para él ya está abierta), así que la fachada pide abrir como hacía v2 al teclear.
+        if (isOpen === false && ariaOpen) {
+            onOpenChange?.(true, "input");
+        }
+        onInputChange?.(value);
+    };
     // `data-visible` de v2, traducido a montar/no montar: `!!state.selectedItem ||
     // state.inputValue?.length > 0` (`chunk-NJJHRP6D.mjs:273`), y apagado por `isDisabled`/
     // `isReadOnly` como en el cálculo de `isClearable` del hook (línea 20 del mismo fichero).
@@ -2502,7 +3408,7 @@ isClearable = true, isReadOnly, inputValue, selectedKey, onInputChange, onSelect
         onInputChange?.("");
         inputRef.current?.focus();
     };
-    return (jsxRuntime.jsxs(react.ComboBox, { id: autoId, isDisabled: isDisabled, isReadOnly: isReadOnly, inputValue: inputValue, selectedKey: selectedKey, onInputChange: onInputChange, onSelectionChange: onSelectionChange, className: [FIELD_STACK_CLASS$2, className].filter(Boolean).join(" "), ...props, children: [label && jsxRuntime.jsx(react.Label, { className: LABEL_CLASS$3, children: label }), jsxRuntime.jsxs(react.ComboBox.InputGroup, { className: [
+    return (jsxRuntime.jsxs(react.ComboBox, { id: autoId, isDisabled: isDisabled, isReadOnly: isReadOnly, inputValue: inputValue, selectedKey: selectedKey, onInputChange: handleInputChange, onSelectionChange: onSelectionChange, onOpenChange: handleOpenChange, isInvalid: isInvalid, allowsCustomValue: allowsCustomValue, allowsEmptyCollection: allowsEmptyCollection ?? !hideEmptyContent, className: [FIELD_STACK_CLASS$2, className].filter(Boolean).join(" "), ...props, children: [label && jsxRuntime.jsx(react.Label, { className: LABEL_CLASS$3, children: label }), jsxRuntime.jsxs(react.ComboBox.InputGroup, { className: [
                     SIZE_CLASS$2[size],
                     PADDING_CLASS$1[size],
                     variant === "underlined" ? UNDERLINED_INNER_CLASS[size] : "",
@@ -2551,7 +3457,7 @@ isClearable = true, isReadOnly, inputValue, selectedKey, onInputChange, onSelect
                          * su `aria-label` traducido, y alcanzable con teclado como la ✕ de `Input`.
                          */
                         slot: null, "aria-label": t.clearButtonAriaLabel, className: [
-                            CLEAR_BUTTON_CLASS,
+                            CLEAR_BUTTON_CLASS$2,
                             resolvedIcon != null
                                 ? CLEAR_GAP_WITH_ICON_CLASS
                                 : variant === "underlined"
@@ -2565,7 +3471,19 @@ isClearable = true, isReadOnly, inputValue, selectedKey, onInputChange, onSelect
                             isDisabled ? ICON_DISABLED_CLASS : "",
                         ]
                             .filter(Boolean)
-                            .join(" "), children: resolvedIcon })), jsxRuntime.jsx(react.ComboBox.Trigger, { className: resolvedIcon != null ? "hidden" : undefined })] }), jsxRuntime.jsx(react.ComboBox.Popover, { children: jsxRuntime.jsx(react.ListBox, { autoFocus: "first", className: OPCIONES_CLASS, children: withCollectionItemIds(children) }) })] }));
+                            .join(" "), children: resolvedIcon })), jsxRuntime.jsx(react.ComboBox.Trigger, { className: resolvedIcon != null ? "hidden" : undefined })] }), isInvalid && errorMessage != null && errorMessage !== false && (jsxRuntime.jsx(react.FieldError, { className: ERROR_MESSAGE_CLASS, children: errorMessage })), jsxRuntime.jsx(react.ComboBox.Popover, { ...popoverProps, isOpen: isOpen === undefined ? undefined : isOpen && ariaOpen, children: jsxRuntime.jsx(react.ListBox, { autoFocus: "first", 
+                    // `scrollShadowProps` de v2 al contenedor con scroll (el `ListBox`): la clase
+                    // de la app va al final y gana por `cn`, y `overflow-y-auto` para que un
+                    // `max-h-*` recorte desplazando y no desbordando.
+                    className: scrollShadowProps?.className
+                        ? react.cn(OPCIONES_CLASS, "overflow-y-auto", scrollShadowProps.className)
+                        : OPCIONES_CLASS, style: scrollShadowProps?.style, renderEmptyState: hideEmptyContent
+                        ? undefined
+                        : () => jsxRuntime.jsx("div", { className: EMPTY_CONTENT_CLASS$1, children: emptyContent }), children: withV2ItemContent(
+                    // El normalizador de `utils/` está tipado solo para `ReactNode`; con una
+                    // función la devuelve tal cual (`isValidElement` es falso), así que el cast
+                    // solo alinea el tipo con lo que ya pasa en ejecución.
+                    withCollectionItemIds(children)) }) })] }));
 };
 
 /**
@@ -8409,6 +9327,25 @@ const DAY_PERIOD_SEGMENT_CLASS = "ms-0.5";
  * el texto (`rgb(243,18,96)`). Deuda a reportar aparte, no de este arreglo.
  */
 const FIELD_FOCUS_CLASS$2 = "ring-0 ring-offset-0";
+/*
+ * TECH-2459 · hallazgo beweossmbs 23-sep — `startContent`/`endContent` de v2, repuestas DENTRO de
+ * la caja del campo.
+ *
+ * v2 (`@heroui/date-input@2.3.32`, `dist/time-input.js:319-329`) las pintaba en el `innerWrapper`,
+ * dentro del `inputWrapper` (la caja con borde): `startContent`, los segmentos y `endContent`, en
+ * ese orden. El `tv` de v2 (`@heroui/theme@2.4.15`, `date-input.js`) da a ese envoltorio
+ * `flex items-center … w-full gap-x-2` y al `inputWrapper` `px-3 gap-3`. v1 no aceptaba las
+ * props: el alta de citas de beweossmbs (`datetime-section.component.tsx`) pone ahí las flechas ±
+ * de la rejilla de horas y desaparecían.
+ *
+ * En v3 el sitio equivalente son `TimeField.Prefix`/`TimeField.Suffix` (`DateInputGroupPrefix`/
+ * `Suffix`), hijos del mismo `TimeField.Group`. Sus márgenes ya son los de v2 (`ms-3`/`me-3` = el
+ * `px-3` del wrapper, y el input pasa a `pe-2`/`ps-2` = el `gap-x-2`), así que solo se añade una
+ * cosa: `pointer-events-auto`. `.date-input-group__prefix/__suffix` de `@heroui/styles` los
+ * declara `pointer-events-none` (pensados para un icono decorativo) y solo `.date-picker` los
+ * reactiva; en un `TimeField` un botón puesto ahí no recibiría el clic. v2 no tenía esa regla.
+ */
+const CONTENT_SLOT_CLASS = "pointer-events-auto";
 /**
  * Implementación común de los dos nombres exportados. La única diferencia entre `TimeInput` y
  * `TimeInputComponent` es el valor por defecto de `labelPlacement`; una `labelPlacement` explícita
@@ -8419,16 +9356,16 @@ function TimeInputBase({ label, id, className, labelPlacement,
 // `dist/use-time-input.js:58`, `shouldForceLeadingZeros = true`), así que la referencia v2
 // muestra "09:00 AM"; React Aria por sí solo deja "9:00 AM". Es una prop de React Aria que v3
 // sigue aceptando (`AriaTimeFieldProps`), solo cambió el default.
-shouldForceLeadingZeros = true, ...props }) {
+shouldForceLeadingZeros = true, startContent, endContent, ...props }) {
     const generatedId = $8WNJc$react.useId();
     const autoId = id || generatedId;
     return (jsxRuntime.jsxs(react.TimeField, { id: autoId, 
         // `cn` (tailwind-merge) y no una concatenación: el consumidor tiene que poder pisar la
         // colocación y el ancho (`ScheduleRow` pasa `w-full`). Todas las clases de aquí son
         // vocabulario v3 válido, así que tailwind-merge las resuelve bien.
-        className: react.cn(ROOT_CLASS[labelPlacement], className), shouldForceLeadingZeros: shouldForceLeadingZeros, ...props, children: [label && (jsxRuntime.jsx(react.Label, { className: LABEL_CLASS_BY_PLACEMENT[labelPlacement], children: label })), jsxRuntime.jsx(react.TimeField.Group, { className: react.cn(FIELD_BORDER_CLASS, GROUP_SIZE_CLASS, FIELD_FOCUS_CLASS$2), children: jsxRuntime.jsx(react.TimeField.Input, { className: INPUT_CLASS, children: (segment) => (jsxRuntime.jsx(react.TimeField.Segment, { segment: segment, className: segment.type === "dayPeriod"
-                            ? DAY_PERIOD_SEGMENT_CLASS
-                            : undefined })) }) })] }));
+        className: react.cn(ROOT_CLASS[labelPlacement], className), shouldForceLeadingZeros: shouldForceLeadingZeros, ...props, children: [label && (jsxRuntime.jsx(react.Label, { className: LABEL_CLASS_BY_PLACEMENT[labelPlacement], children: label })), jsxRuntime.jsxs(react.TimeField.Group, { className: react.cn(FIELD_BORDER_CLASS, GROUP_SIZE_CLASS, FIELD_FOCUS_CLASS$2), children: [startContent !== undefined && startContent !== null && (jsxRuntime.jsx(react.TimeField.Prefix, { className: CONTENT_SLOT_CLASS, children: startContent })), jsxRuntime.jsx(react.TimeField.Input, { className: INPUT_CLASS, children: (segment) => (jsxRuntime.jsx(react.TimeField.Segment, { segment: segment, className: segment.type === "dayPeriod"
+                                ? DAY_PERIOD_SEGMENT_CLASS
+                                : undefined })) }), endContent !== undefined && endContent !== null && (jsxRuntime.jsx(react.TimeField.Suffix, { className: CONTENT_SLOT_CLASS, children: endContent }))] })] }));
 }
 /**
  * `TimeInput` — el nombre que en v2 era el crudo de HeroUI: etiqueta ENCIMA del campo
@@ -8798,6 +9735,33 @@ const SIZE_TEXT_CLASS$1 = {
 // `min-w-0` es obligatorio: un ítem flex tiene `min-width: auto`, o sea no baja de su `min-content`,
 // y sin eso el texto desborda el trigger en vez de truncar con elipsis.
 const VALUE_ROOM_CLASS = "me-6 min-w-0 truncate";
+/*
+ * `isMultiline` (v2). Literal del `tv` (`@heroui/theme@2.4.15`, `dist/components/select.js:255-263`):
+ *
+ *   isMultiline: { true: { label: "relative", trigger: "!h-auto" }, false: { value: "truncate" } }
+ *
+ * O sea: el disparador deja de tener alto fijo y el valor deja de truncarse. El `min-h-*` del
+ * tamaño se conserva (v2 también: el `!h-auto` solo pisaba el `h-*`), así que en una línea mide lo
+ * mismo. El `py-1.5` es nuestro y es obligatorio aquí: `TRIGGER_ALIGN_CLASS` pone `py-0` porque con
+ * alto fijo el centrado lo hace `items-center`; con alto automático, sin relleno vertical la
+ * segunda línea tocaría el borde. 6px + 20px de línea + 6px = los 32px del `sm`, así que en una
+ * sola línea no cambia nada. Van DESPUÉS en el `cn`, que resuelve `h-8`→`h-auto` y `py-0`→`py-1.5`.
+ */
+const MULTILINE_TRIGGER_CLASS = "h-auto py-1.5";
+const MULTILINE_VALUE_ROOM_CLASS = "me-6 min-w-0 whitespace-normal";
+/*
+ * `startContent` del disparador (v2). En v2 iba dentro del `innerWrapper`, delante del valor, con
+ * el `gap-1.5` de ese slot (`select.js:100`). Aquí el disparador es el flex y el hueco va como
+ * margen de la pieza, para no tocar el `gap` que v3 le pone al disparador entero.
+ */
+const START_CONTENT_CLASS = "me-1.5 flex shrink-0 items-center";
+/*
+ * `isLoading` (v2): el spinner SUSTITUYE al chevron en el mismo sitio. Literales de v2
+ * (`@heroui/select@2.4.33`, `use-select`: `getSpinnerProps` → `color: "current"`, `size: "sm"`;
+ * slot `spinner: "absolute end-3"`). Se centra en vertical como el `Select.Indicator` de v3
+ * (`inset-y-0 my-auto`) y toma el color del chevron (`text-field-placeholder`, `select.css`).
+ */
+const SPINNER_CLASS = "pointer-events-none absolute inset-y-0 end-3 my-auto text-field-placeholder";
 /*
  * EL ESTADO VACÍO DEL DESPLEGABLE (TECH-2459 · F5 · defecto reportado por el usuario y medido por
  * la sesión de backoffice: «se pulsa el campo y no pasa nada»).
@@ -8854,7 +9818,98 @@ const VALUE_ROOM_CLASS = "me-6 min-w-0 truncate";
  */
 const DEFAULT_TRANSLATIONS$8 = {
     emptyContent: "No hay opciones",
+    searchPlaceholder: "Buscar…",
+    // Mismo literal que la lista vacía de `AuraAutocomplete`: es el mismo caso (un filtro por texto
+    // que no encuentra nada), así que las dos fachadas lo dicen igual.
+    noResults: "No se encontraron resultados",
+    // Mismo literal que la ✕ de `Input` y de `AuraAutocomplete`.
+    clearButtonAriaLabel: "Limpiar",
 };
+/*
+ * EL BUSCADOR Y LA ✕ (TECH-2459, hallazgo beweossmbs 23-sep): `isSearchable` e `isClearable`.
+ *
+ * Con cualquiera de los dos la fachada cambia de RAÍZ: monta el compound `Autocomplete` de v3 en
+ * vez de `Select`. No es un compound distinto por dentro —`AutocompleteRoot` ES el `Select` de
+ * react-aria (`@heroui/react/dist/components/autocomplete/autocomplete.js:50`, `jsx(Select, …)`),
+ * así que `value`/`onChange`/`selectionMode`/`disabledKeys` y la colección funcionan igual y la
+ * traducción de la API v2 de abajo no cambia ni una línea—, pero su disparador sí:
+ *
+ * - `Autocomplete.Trigger` es un `Group` (un `<div>`), no un `<button>`. Es lo que permite meter la
+ *   ✕ DENTRO del campo sin anidar dos botones (trampa nº 4 de `auraui-components`). El botón que
+ *   recibe el foco es el del `Autocomplete.Indicator`, que consume el `ButtonContext` del Select
+ *   (`autocomplete.js`, `jsx(Button, { children: indicator })`): Tab llega al chevron y desde ahí
+ *   las flechas/Enter abren la lista, igual que en el `Select` de siempre.
+ * - `Autocomplete.Filter` (el `Autocomplete` de react-aria) conecta un `SearchField` con el
+ *   `ListBox`: el texto filtra la colección y las flechas mueven el foco virtual de la lista sin
+ *   salir del buscador. Es la receta oficial «Migrating to v3 Autocomplete (searchable select)»
+ *   de la guía de migración, con `useFilter({ sensitivity: "base" })`: sin distinguir mayúsculas
+ *   ni acentos («cancun» encuentra «Cancún»).
+ *
+ * Sin ninguna de las dos props la fachada sigue montando `Select`, exactamente como antes: los
+ * 107 `Select` de beweossmbs que no las pasan no cambian ni un nodo.
+ *
+ * Por qué la ✕ va también por aquí y no sobre el `Select`: el disparador de `Select` es un
+ * `<button>` (no admite otro dentro) y la fachada no alcanza el estado de react-aria para vaciar la
+ * selección de un campo no controlado (`SelectStateContext` no lo reexporta `@heroui/react`, e
+ * importarlo de `react-aria-components` metería una SEGUNDA copia del contexto en el bundle, que no
+ * casaría con la de HeroUI). `Autocomplete.ClearButton` sí lo alcanza: vacía la selección con
+ * `state.selectionManager.setSelectedKeys(new Set())` y llama a `onClear`.
+ */
+/** Hueco del valor cuando la ✕ va a su derecha: el hueco del chevron lo reserva la ✕. */
+const VALUE_ROOM_CLEARABLE_CLASS = "me-1 min-w-0 truncate";
+/*
+ * La ✕. `.autocomplete__clear-button` de v3 ya la pinta como v2 (glifo sin caja, `bg-transparent`,
+ * gris `text-muted`) y la esconde con `opacity-0` cuando no hay nada elegido. v2 no la montaba sin
+ * selección (`@heroui/select@2.4.33`, `chunk-BJWIL32D.mjs:64`: `isClearable &&
+ * state.selectedItems?.length`), así que aquí se retira del flujo en ese estado en vez de dejar un
+ * hueco invisible de 20px.
+ *
+ * `me-5`: el chevron es `absolute end-3` (12px del borde, 16px de ancho) y la ✕ va en flujo, que
+ * acaba en el relleno del trigger (`px-3`, 12px). Sin margen caería ENCIMA del chevron; con 20px su
+ * canto derecho queda a 4px del izquierdo del chevron.
+ */
+const CLEAR_BUTTON_CLASS$1 = "z-10 me-5 data-[empty=true]:hidden";
+/*
+ * EL FOCO DEL TECLADO (hallazgo del coordinador con Playwright, 23-sep). En la raíz `Autocomplete`
+ * el único elemento tabulable es el botón del chevron —el `Button` de react-aria que monta
+ * `Autocomplete.Indicator`, sin clase propia ni forma de pasarle una—, y en el flujo mide **0×0**:
+ * su único hijo es el SVG, que es `absolute`. El foco caía en una caja vacía (el borde del disparador
+ * sí cambiaba, por `focus-within`, pero el elemento enfocado no tenía caja para un lector de
+ * pantalla, un magnificador o un anillo propio).
+ *
+ * Se estira ese botón sobre el disparador entero (`absolute inset-0`, mismo radio): el elemento
+ * enfocado pasa a medir lo mismo que el disparador, como el `<button>` del `Select` normal, y el
+ * SVG sigue en su sitio porque su contenedor posicionado cubre la misma caja. Pulsar en cualquier
+ * punto sigue abriendo (el `Group` ya abría al pulsar, y el botón ya estaba DENTRO del grupo).
+ * La ✕ va por encima (`z-10` en `CLEAR_BUTTON_CLASS`) para seguir recibiendo su clic.
+ *
+ * Se apunta por estructura porque es la única vía: `button:not([data-slot])` es ese botón, ya que
+ * la ✕ lleva `data-slot="autocomplete-clear-button"`.
+ */
+const INDICATOR_BUTTON_OVERLAY_CLASS = [
+    "[&>button:not([data-slot])]:absolute",
+    "[&>button:not([data-slot])]:inset-0",
+    "[&>button:not([data-slot])]:rounded-[inherit]",
+    "[&>button:not([data-slot])]:outline-none",
+    "[&>button:not([data-slot])]:cursor-[inherit]",
+].join(" ");
+/*
+ * El foco en el disparador `Group`. El `FOCUS_BORDER_CLASS` del Select casa `aria-expanded` y
+ * `:focus` del `<button>`; aquí el disparador es un `<div>` que no lleva ninguno de los dos: el foco
+ * lo tiene el botón del chevron, DENTRO (`focus-within`), y el estado abierto lo escribe v3 en la
+ * RAÍZ (`data-open="true"` en `div.autocomplete`), así que va por un `group` con nombre.
+ */
+const FOCUS_BORDER_GROUP_CLASS = "focus-within:border-primary-500! group-data-[open=true]/aura-select:border-primary-500!";
+/*
+ * El buscador del desplegable. `.autocomplete__popover` de v3 ya lo coloca (`[data-slot=
+ * "search-field"] { px-3 py-1 }`, `pt-2` en el popover, `overflow-hidden` + lista con su propio
+ * scroll, de modo que el buscador no se va al desplazar la lista). Solo se retira el anillo de
+ * foco de v3 (`status-focused-field` → `ring-2`), por lo mismo que en todos los campos de la
+ * librería (`FIELD_FOCUS_CLASS`): el foco lo marca el borde, en primario.
+ */
+const SEARCH_GROUP_CLASS = "w-full ring-0 ring-offset-0 outline-0 focus-within:border-primary-500";
+/** El `ListBox` es el contenedor que se desplaza cuando el consumidor le fija alto. */
+const LISTBOX_SCROLL_CLASS = "overflow-y-auto";
 // Medidas del estado vacío. Se toman las del ITEM de v3 (`@heroui/styles`,
 // `dist/components/list-box-item.css:6`: `min-h-9 … px-2 py-1.5`) y no las del slot `emptyContent`
 // de v2, y es una decisión medida: el literal de v2 era
@@ -9126,7 +10181,9 @@ size = "md", variant = "bordered", radius = "md",
 //
 // Por eso este componente sigue sin `SelectTranslations`: la corrección consiste precisamente en
 // que la librería no aporte NINGÚN texto propio, no en traducir el que había.
-placeholder = "", selectionMode = "single", selectedKeys, defaultSelectedKeys, onSelectionChange, disabledKeys, isInvalid = false, isRequired = false, isDisabled = false, 
+placeholder = "", selectionMode = "single", selectedKeys, defaultSelectedKeys, onSelectionChange, disabledKeys, isInvalid = false, isRequired = false, 
+// Alias nativo de `isRequired` (ver `SelectProps.required`).
+required = false, isDisabled = false, 
 // `fullWidth` por defecto a `true`: HeroUI v2 lo traía en sus `defaultVariants`
 // (verificado en el paquete v2 compilado, `dist/components/input.js`:
 // `defaultVariants: { variant:"flat", color:"default", size:"md", fullWidth:true, … }`, con
@@ -9134,42 +10191,139 @@ placeholder = "", selectionMode = "single", selectedKeys, defaultSelectedKeys, o
 // `undefined` y el campo dejaba de llenar su contenedor: en una fila flex se encogía al ancho
 // de su contenido (medido por S2: 208px dentro de una fila de 592, 336px de hueco). En una
 // columna no se notaba porque el `stretch` del flex lo tapaba — pero afecta a cualquier app.
-fullWidth = true, isOpen, defaultOpen, onOpenChange, className, classNames, translations = {}, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-details": ariaDetails, }) => {
+fullWidth = true, isLoading = false, 
+// Aceptada y descartada: ver `SelectProps.isVirtualized`.
+isVirtualized: _isVirtualized, disallowEmptySelection = false, isMultiline = false, renderValue, startContent, listboxProps, onChange, 
+// Aceptada y descartada: ver `SelectProps.labelPlacement`.
+labelPlacement: _labelPlacement, scrollShadowProps, items, isSearchable = false, searchPlaceholder, isClearable = false, onClear, closeOnSelect, isOpen, defaultOpen, onOpenChange, className, classNames, translations = {}, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-details": ariaDetails, }) => {
     const generatedId = $8WNJc$react.useId();
     const selectId = id || generatedId;
-    const requiredField = isRequired;
+    const requiredField = isRequired || required;
     const t = { ...DEFAULT_TRANSLATIONS$8, ...translations };
+    // Raíz `Autocomplete` (buscador y/o ✕) o `Select` de siempre: ver el bloque «EL BUSCADOR Y LA ✕».
+    const usesAutocompleteShell = isSearchable || isClearable;
+    // Filtro de react-aria sin mayúsculas ni acentos. El hook va fuera de la condición (reglas de
+    // hooks); sin `isSearchable` no se usa.
+    const { contains } = react.useFilter({ sensitivity: "base" });
+    // Texto del buscador, en la fachada para saber qué mensaje poner en la lista vacía y para
+    // vaciarlo al cerrar (abrir de nuevo = lista completa, que es lo que hacía el buscador manual
+    // de `timezone-search-select` con su `onOpenChange`).
+    const [searchText, setSearchText] = $8WNJc$react.useState("");
+    // v2 pintaba `listboxProps.emptyContent` en el hueco de la lista vacía; gana a la traducción,
+    // que es el default de la fachada (el de v2 era el literal inglés "No items."). Con el buscador
+    // escrito, la lista vacía significa «sin resultados», no «sin opciones».
+    const emptyContent = isSearchable && searchText.trim() !== ""
+        ? t.noResults
+        : (listboxProps?.emptyContent ?? t.emptyContent);
+    const resolvedSearchPlaceholder = searchPlaceholder ?? t.searchPlaceholder;
+    const handleOpenChange = (open) => {
+        if (!open) {
+            setSearchText("");
+        }
+        onOpenChange?.(open);
+    };
+    // Estado propio SOLO para `multiple` + `disallowEmptySelection` sin controlar: para rechazar el
+    // cambio que vaciaría la selección, la fachada tiene que ser dueña del valor. En los demás casos
+    // no se lee (el hook va fuera de la condición por las reglas de hooks).
+    const [ownMultiple, setOwnMultiple] = $8WNJc$react.useState(() => toArray(defaultSelectedKeys) ?? []);
     // Mismo criterio que el `group-data-[has-helper=true]` de v2: cuenta como "con ayuda" el campo
     // que efectivamente PINTA una descripción o un mensaje de error, no el que solo recibe la prop.
     const hasHelper = Boolean((description && !isInvalid) || (isInvalid && errorMessage));
-    const triggerClassName = react.cn(SIZE_CLASS[size], radius === "full" ? PADDING_FULL_CLASS[size] : PADDING_CLASS[size], TRIGGER_ALIGN_CLASS, RADIUS_CLASS$4[radius], VARIANT_CLASS$1[variant], 
+    const triggerClassName = react.cn(SIZE_CLASS[size], radius === "full" ? PADDING_FULL_CLASS[size] : PADDING_CLASS[size], TRIGGER_ALIGN_CLASS, isMultiline ? MULTILINE_TRIGGER_CLASS : "", RADIUS_CLASS$4[radius], VARIANT_CLASS$1[variant], 
     // En v2 el estado inválido MANDABA también con el campo enfocado
     // (`group-data-[focus=true]:!border-danger`), así que el borde de foco no se aplica cuando
     // el campo está en error: se queda el `danger`.
-    isInvalid ? INVALID_VARIANT_CLASS[variant] : FOCUS_BORDER_CLASS, FIELD_FOCUS_CLASS$1, FIELD_SHADOW_CLASS$1, 
+    isInvalid
+        ? INVALID_VARIANT_CLASS[variant]
+        : usesAutocompleteShell
+            ? FOCUS_BORDER_GROUP_CLASS
+            : FOCUS_BORDER_CLASS, FIELD_FOCUS_CLASS$1, FIELD_SHADOW_CLASS$1, usesAutocompleteShell ? INDICATOR_BUTTON_OVERLAY_CLASS : "", 
     // Incondicional, como el slot `trigger` de v2 (`"relative px-3 gap-3 w-full inline-flex …"`,
     // sin variante que lo condicione): el disparador llena siempre su raíz, y es la raíz la que
     // responde a `fullWidth` y al ancho que pase el consumidor. v3 hace lo mismo por su cuenta
     // con `.select__trigger--full-width`, pero esa regla vive en la capa `components` y la pisa
     // cualquier utilidad.
     "w-full", classNames?.trigger);
+    // `id`/`textValue` desde la `key` de React: ver `utils/collection-items.ts` — sin esto un select
+    // múltiple no pinta lo elegido y uno controlado arranca vacío. `withV2ItemContent` traduce
+    // `description`/`startContent`/`endContent`/`classNames` del item y `title`/`showDivider` de la
+    // sección a la anatomía de v3 (ver `_internal/v2-collection.tsx` para el orden), y
+    // `withItemIndicator` monta el checkmark del seleccionado, que en v3 es un subcomponente aparte
+    // (ver `_internal/with-item-indicator.tsx`, y ahí por qué va en este orden).
+    const decorate = (nodes) => withItemIndicator(withV2ItemContent(withCollectionItemIds(nodes)));
+    // Colección dinámica (`items` + función, la forma de `Profile.tsx`). La función se envuelve para
+    // decorar lo que devuelva, y el paso de `withCollectionItemIds` importa aquí MÁS que en la forma
+    // estática: react-aria toma la clave de una colección dinámica de `rendered.props.id ??
+    // item.key ?? item.id`, nunca de la `key` de React. Sin reponer el `id` desde la `key`, las
+    // opciones de `Profile.tsx` (objetos `{ value: "es", id: 1 }` con `<SelectItem key={value}>`)
+    // se llamarían `1`/`2` y ni `defaultSelectedKeys={["es"]}` casaría ni `onSelectionChange`
+    // devolvería la clave de la app.
+    const collection = typeof children === "function"
+        ? (item) => decorate(children(item))
+        : decorate(children);
+    const listBox = (jsxRuntime.jsx(react.ListBox
+    // v2 `items`: react-aria recorre la colección y llama a la función de `children`.
+    , { 
+        // v2 `items`: react-aria recorre la colección y llama a la función de `children`.
+        items: items, 
+        // v2: `classNames.listboxWrapper` y `scrollShadowProps.className` iban al mismo slot
+        // (`cn(classNames.listboxWrapper, scrollShadowProps.className)`, `chunk-YFRCT47S.mjs:
+        // 321-331`), en ese orden.
+        className: classNames?.listboxWrapper || scrollShadowProps?.className
+            ? react.cn(LISTBOX_SCROLL_CLASS, classNames?.listboxWrapper, scrollShadowProps?.className)
+            : undefined, style: scrollShadowProps?.style, 
+        // El hueco que v2 llenaba con su `emptyContent` (ver el bloque de
+        // `DEFAULT_TRANSLATIONS`). `renderEmptyState` es la vía de v3: el `ListBox` de
+        // react-aria solo pinta algo con la colección vacía si se le pasa, y envuelve el
+        // resultado en un `<div role="option" style="display:contents">`
+        // (`react-aria-components/dist/private/ListBox.mjs:222-228`), o sea que la caja que se
+        // ve es la nuestra.
+        renderEmptyState: () => (jsxRuntime.jsx("div", { className: EMPTY_CONTENT_CLASS, children: emptyContent })), children: collection }));
+    // Las piezas del disparador son las mismas en las dos raíces; solo cambia de qué compound salen
+    // (ver el bloque «EL BUSCADOR Y LA ✕»). `Autocomplete.Value` y `Select.Value` son el mismo
+    // `SelectValue` de react-aria con otra clase base, así que reciben las mismas props.
+    const ValuePart = usesAutocompleteShell
+        ? react.Autocomplete.Value
+        : react.Select.Value;
+    const triggerContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [startContent != null && startContent !== false && (jsxRuntime.jsx("span", { "data-slot": "start-content", className: START_CONTENT_CLASS, children: startContent })), jsxRuntime.jsx(ValuePart, { className: react.cn(SIZE_TEXT_CLASS$1[size], isMultiline
+                    ? MULTILINE_VALUE_ROOM_CLASS
+                    : isClearable
+                        ? VALUE_ROOM_CLEARABLE_CLASS
+                        : VALUE_ROOM_CLASS, HIDE_ITEM_EXTRAS_CLASS, isInvalid ? INVALID_TEXT_CLASS$1 : ""), children: renderValue
+                    ? // `renderValue` de v2 (`chunk-BJWIL32D.mjs`): sin selección, el placeholder;
+                        // con selección, la función con los items en la forma de v2. El nodo de la
+                        // colección de v3 trae los mismos campos que el de v2, así que el mapeo es
+                        // 1:1. `defaultChildren` es aquí el placeholder (o `""`, ver arriba).
+                        ({ state, isPlaceholder, defaultChildren }) => {
+                            if (isPlaceholder) {
+                                return defaultChildren;
+                            }
+                            const items = state.selectedItems.map((item) => ({
+                                key: item.key,
+                                data: item.value,
+                                type: item.type,
+                                props: item.props,
+                                textValue: item.textValue,
+                                rendered: item.rendered,
+                                "aria-label": item["aria-label"],
+                            }));
+                            return renderValue(items);
+                        }
+                    : undefined }), isClearable && (jsxRuntime.jsx(react.Autocomplete.ClearButton, { "aria-label": t.clearButtonAriaLabel, className: CLEAR_BUTTON_CLASS$1 })), usesAutocompleteShell ? (
+            /* En el `Autocomplete` el chevron es el BOTÓN que recibe el foco (ver el bloque
+                «EL BUSCADOR Y LA ✕»), así que el spinner va DENTRO de él en vez de sustituirlo:
+                sin el botón el campo no se alcanzaría con el teclado. `Autocomplete.Indicator` clona
+                su hijo con la clase del indicador (`absolute inset-y-0 end-2 my-auto`), así que el
+                spinner cae en el sitio del chevron sin clase propia. */
+            jsxRuntime.jsx(react.Autocomplete.Indicator, { className: "end-3", children: isLoading ? (jsxRuntime.jsx(react.Spinner, { "aria-hidden": true, "data-slot": "select-spinner", size: "sm", color: "current" })) : undefined })) : isLoading ? (jsxRuntime.jsx(react.Spinner, { "aria-hidden": true, "data-slot": "select-spinner", size: "sm", color: "current", className: SPINNER_CLASS })) : (
+            /* `.select__indicator` de v3 va a `end-2` (8px del borde interior); el
+                `selectorIcon` de v2 iba a `end-3` (12px). Medido en los PNG: la tinta del chevron
+                acaba a 17px del borde derecho en la referencia y a 13px con el valor de v3 — 4px
+                de más. */
+            jsxRuntime.jsx(react.Select.Indicator, { className: "end-3" }))] }));
     const inner = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsx(react.Label, { className: react.cn(LABEL_CLASS$1, hasHelper
                     ? LABEL_OFFSET_HELPER_CLASS[size]
-                    : LABEL_OFFSET_CLASS[size], isInvalid ? INVALID_LABEL_CLASS$1 : "", classNames?.label), children: label })), jsxRuntime.jsxs(react.Select.Trigger, { className: triggerClassName, children: [jsxRuntime.jsx(react.Select.Value, { className: react.cn(SIZE_TEXT_CLASS$1[size], VALUE_ROOM_CLASS, isInvalid ? INVALID_TEXT_CLASS$1 : "") }), jsxRuntime.jsx(react.Select.Indicator, { className: "end-3" })] }), description && !isInvalid && (jsxRuntime.jsx(react.Description, { className: `${HELPER_CLASS$1} text-left`, children: description })), jsxRuntime.jsx(react.Select.Popover, { className: classNames?.popoverContent, children: jsxRuntime.jsx(react.ListBox
-                // El hueco que v2 llenaba con su `emptyContent` (ver el bloque de
-                // `DEFAULT_TRANSLATIONS`). `renderEmptyState` es la vía de v3: el `ListBox` de
-                // react-aria solo pinta algo con la colección vacía si se le pasa, y envuelve
-                // el resultado en un `<div role="option" style="display:contents">`
-                // (`react-aria-components/dist/private/ListBox.mjs:222-228`), o sea que la caja
-                // que se ve es la nuestra.
-                , { 
-                    // El hueco que v2 llenaba con su `emptyContent` (ver el bloque de
-                    // `DEFAULT_TRANSLATIONS`). `renderEmptyState` es la vía de v3: el `ListBox` de
-                    // react-aria solo pinta algo con la colección vacía si se le pasa, y envuelve
-                    // el resultado en un `<div role="option" style="display:contents">`
-                    // (`react-aria-components/dist/private/ListBox.mjs:222-228`), o sea que la caja
-                    // que se ve es la nuestra.
-                    renderEmptyState: () => (jsxRuntime.jsx("div", { className: EMPTY_CONTENT_CLASS, children: t.emptyContent })), children: withItemIndicator(withCollectionItemIds(children)) }) }), isInvalid && errorMessage && (jsxRuntime.jsx(react.FieldError, { className: `${HELPER_CLASS$1} text-left`, children: errorMessage }))] }));
+                    : LABEL_OFFSET_CLASS[size], isInvalid ? INVALID_LABEL_CLASS$1 : "", classNames?.label), children: label })), usesAutocompleteShell ? (jsxRuntime.jsx(react.Autocomplete.Trigger, { className: triggerClassName, children: triggerContent })) : (jsxRuntime.jsx(react.Select.Trigger, { className: triggerClassName, children: triggerContent })), description && !isInvalid && (jsxRuntime.jsx(react.Description, { className: `${HELPER_CLASS$1} text-left`, children: description })), usesAutocompleteShell ? (jsxRuntime.jsx(react.Autocomplete.Popover, { className: classNames?.popoverContent, children: isSearchable ? (jsxRuntime.jsxs(react.Autocomplete.Filter, { filter: contains, inputValue: searchText, onInputChange: setSearchText, children: [jsxRuntime.jsx(react.SearchField, { autoFocus: true, "aria-label": resolvedSearchPlaceholder, fullWidth: true, children: jsxRuntime.jsxs(react.SearchField.Group, { className: SEARCH_GROUP_CLASS, children: [jsxRuntime.jsx(react.SearchField.SearchIcon, {}), jsxRuntime.jsx(react.SearchField.Input, { placeholder: resolvedSearchPlaceholder })] }) }), listBox] })) : (listBox) })) : (jsxRuntime.jsx(react.Select.Popover, { className: classNames?.popoverContent, children: listBox })), isInvalid && errorMessage && (jsxRuntime.jsx(react.FieldError, { className: `${HELPER_CLASS$1} text-left`, children: errorMessage }))] }));
     const commonProps = {
         id: selectId,
         name,
@@ -9195,7 +10349,14 @@ fullWidth = true, isOpen, defaultOpen, onOpenChange, className, classNames, tran
         isDisabled,
         isOpen,
         defaultOpen,
-        onOpenChange,
+        onOpenChange: handleOpenChange,
+        // v2 `closeOnSelect` → `shouldCloseOnSelect` de react-stately, que ya trae el mismo default
+        // por modo (`useSelectState.mjs:23`: cierra en `single`, se queda abierto en `multiple`).
+        // `undefined` deja ese default intacto.
+        ...(closeOnSelect === undefined
+            ? {}
+            : { shouldCloseOnSelect: closeOnSelect }),
+        onClear,
         fullWidth,
         // `cn`, no una concatenación: el `className` del consumidor tiene que GANAR a las clases
         // de la fachada, y con una cadena suelta llegan las dos al DOM y decide el orden en que
@@ -9208,10 +10369,37 @@ fullWidth = true, isOpen, defaultOpen, onOpenChange, className, classNames, tran
         className: react.cn(FIELD_STACK_CLASS$1[size], 
         // `w-full` y `min-w-40` son las dos ramas EXCLUYENTES de `fullWidth` en el `tv` de v2
         // (ver `ROOT_MIN_WIDTH_CLASS`).
-        fullWidth ? "w-full" : ROOT_MIN_WIDTH_CLASS, className),
+        fullWidth ? "w-full" : ROOT_MIN_WIDTH_CLASS, 
+        // Grupo con nombre para el borde de foco del disparador `Group` (ver
+        // `FOCUS_BORDER_GROUP_CLASS`). Sin la raíz `Autocomplete` no hace falta.
+        usesAutocompleteShell ? "group/aura-select" : "", 
+        // v2 `classNames.base`: la raíz, igual que `className`, y por eso delante de él (en v2
+        // los dos acababan en `slots.base({ class: cn(classNames?.base, className) })`).
+        classNames?.base, className),
     };
     if (selectionMode === "multiple") {
-        return (jsxRuntime.jsx(react.Select, { ...commonProps, selectionMode: "multiple", value: toArray(selectedKeys), defaultValue: toArray(defaultSelectedKeys), onChange: (keys) => onSelectionChange?.(new Set(keys)), children: inner }));
+        // `disallowEmptySelection` en `multiple`: react-stately lo fuerza a `false` en este modo
+        // (`useSelectState.mjs:61`, `disallowEmptySelection: selectionMode === 'single'`, pisando
+        // la prop), así que la guarda la pone la fachada: el cambio que dejaría la selección vacía
+        // no se propaga. Controlado basta con no avisar; sin controlar, la fachada lleva el valor.
+        const ownsValue = disallowEmptySelection && selectedKeys === undefined;
+        const multipleProps = {
+            ...commonProps,
+            selectionMode: "multiple",
+            value: ownsValue ? ownMultiple : toArray(selectedKeys),
+            defaultValue: ownsValue ? undefined : toArray(defaultSelectedKeys),
+            onChange: (keys) => {
+                if (disallowEmptySelection && keys.length === 0) {
+                    return;
+                }
+                if (ownsValue) {
+                    setOwnMultiple(keys);
+                }
+                onSelectionChange?.(new Set(keys));
+                onChange?.({ target: { name, value: keys.join(",") } });
+            },
+        };
+        return usesAutocompleteShell ? (jsxRuntime.jsx(react.Autocomplete, { ...multipleProps, children: inner })) : (jsxRuntime.jsx(react.Select, { ...multipleProps, children: inner }));
     }
     // `Array.from` cubre las tres formas de `SelectSelection` sin ramas nuevas: `"all"` sigue
     // cayendo a `null` (v3 no admite "todo" en selección única) y un array se lee igual que un
@@ -9226,7 +10414,17 @@ fullWidth = true, isOpen, defaultOpen, onOpenChange, className, classNames, tran
         : defaultSelectedKeys === "all"
             ? null
             : (Array.from(defaultSelectedKeys)[0] ?? null);
-    return (jsxRuntime.jsx(react.Select, { ...commonProps, value: singleValue, defaultValue: singleDefault, onChange: (key) => onSelectionChange?.(key == null ? new Set() : new Set([key])), children: inner }));
+    const singleProps = {
+        ...commonProps,
+        value: singleValue,
+        defaultValue: singleDefault,
+        onChange: (key) => {
+            onSelectionChange?.(key == null ? new Set() : new Set([key]));
+            // v2 llamaba a `onChange` después de `onSelectionChange` (ver `SelectChangeEvent`).
+            onChange?.({ target: { name, value: key == null ? "" : String(key) } });
+        },
+    };
+    return usesAutocompleteShell ? (jsxRuntime.jsx(react.Autocomplete, { ...singleProps, children: inner })) : (jsxRuntime.jsx(react.Select, { ...singleProps, children: inner }));
 };
 
 const defaultTranslations$4 = {
@@ -9345,40 +10543,472 @@ const StatTile = ({ title, value, icon, trend, translations = {}, className, pad
             .join(" "), ...cardProps, children: [icon && (jsxRuntime.jsx("span", { className: "shrink-0 text-foreground-600", "aria-hidden": "true", children: icon })), jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [jsxRuntime.jsx(P, { className: "truncate", children: title }), jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [jsxRuntime.jsx(H3, { className: "text-2xl font-semibold", children: value }), trend && (jsxRuntime.jsx("span", { className: `text-xs font-medium ${TREND_COLOR_CLASS[direction]}`, "aria-label": t[TREND_ARIA_KEY[direction]], children: trend.value }))] })] })] }));
 };
 
-/**
- * Piezas que v3 monta FUERA del contenedor con scroll, como hermanas del root: el footer se queda
- * a ancho completo (comentario de los autores en `table.css:15-18`), no se desplaza con la tabla.
- */
-const OUTSIDE_SCROLL = new Set([react.Table.Footer]);
-/**
- * Piezas que YA son un contenedor con scroll propio (`.table__scroll-container` /
- * `.table__resizable-container`, ambas con `overflow` en `table.css`): si el consumidor monta una,
- * la fachada no envuelve nada — anidar dos contenedores de scroll dejaría el interior sin ancho
- * que desbordar.
- */
-const OWN_SCROLL = new Set([
-    react.Table.ScrollContainer,
-    react.Table.ResizableContainer,
-]);
-/** Identidad por `child.type` contra los objetos reales de HeroUI (mismo patrón que la fachada `Alert`). */
-function isPart$2(node, parts) {
-    return $8WNJc$react.isValidElement(node) && parts.has(node.type);
-}
-const TableFacade = ({ children, ...props }) => {
-    const nodes = $8WNJc$react.Children.toArray(children);
+// TECH-2459 — Fachada `Checkbox` (hallazgo loginos 07-sep: `index.tsx` reexportaba el `Checkbox`
+// CRUDO de v3, así que el JSX v2 de las apps — `isSelected` + `onValueChange` dentro de `Controller`
+// de RHF en backoffice ×12, smbs ×23, agency ×5 — no compilaba pese a existir el símbolo).
+//
+// HeroUI v3 convierte el Checkbox en compound (`Checkbox.Content` > `Checkbox.Control` >
+// `Checkbox.Indicator` + la etiqueta como children de `Content`), renombra `onValueChange` →
+// `onChange` y ELIMINA `color`, `size`, `radius`, `lineThrough`, `icon`, `classNames` y
+// `disableAnimation` (guía oficial `checkbox`). Su único eje propio es `variant`
+// (`primary`/`secondary`), que NO es un color: `secondary` es un tratamiento gris de menor énfasis
+// — el falso amigo de siempre (skill `auraui-design-tokens`).
+//
+// Esta fachada compone el compound por dentro y repone cada prop v2 con los literales del `tv`
+// de v2 (`@heroui/theme@2.4.15` → `dist/components/checkbox.js`), traducidos a utilidades de
+// Tailwind 4 sobre los tokens de Aurora. El relleno del estado marcado en v3 es el `::before` del
+// control (`bg-accent`, = `--color-primary` vía F1), así que `color` se reimplementa pisando ese
+// pseudo-elemento con `before:bg-<color>` — utilidad (capa `utilities`) que gana a la regla de
+// `checkbox.css` (capa `components`), incluida la de hover (`bg-accent-hover`).
+//
+// ⚠️ Estados de react-aria, verificados en el navegador contra `checkbox.css`: `data-selected`/
+// `data-indeterminate`/`data-invalid`/`data-disabled` viven en la RAÍZ (`.checkbox`);
+// `data-hovered`/`data-pressed`/`data-focus-visible` en `[data-slot="checkbox-content"]`. Por
+// eso hay dos grupos con nombre (`group/checkbox`, `group/content`) y NUNCA `data-[hover=true]`
+// (trampa 3 de la skill: v2 escribía `data-hover`; react-aria escribe `data-hovered`).
+/**
+ * Relleno del estado marcado (`::before` del control) y del indeterminado (fondo del control)
+ * por color. `primary` no pisa nada: el `bg-accent` de v3 YA es `--color-primary`. `default`
+ * usa el gris de Aurora (`--color-default`, = v2), nunca el `--default` crudo de v3 (D-F1-3).
+ *
+ * Literal v2: `after:bg-<color> after:text-<color>-foreground text-<color>-foreground`.
+ */
+const CONTROL_COLOR = {
+    primary: "",
+    default: "before:bg-default group-data-[indeterminate=true]/checkbox:bg-default",
+    secondary: "before:bg-secondary group-data-[indeterminate=true]/checkbox:bg-secondary",
+    success: "before:bg-success group-data-[indeterminate=true]/checkbox:bg-success",
+    warning: "before:bg-warning group-data-[indeterminate=true]/checkbox:bg-warning",
+    danger: "before:bg-danger group-data-[indeterminate=true]/checkbox:bg-danger",
+};
+/**
+ * Color del glifo (check / línea). v3 lo fija en el SVG (`[data-slot="checkbox-default-indicator--
+ * checkmark"] { text-accent-foreground }`), así que hay que alcanzar al SVG, no al indicador.
+ */
+const INDICATOR_COLOR = {
+    primary: "",
+    default: "[&_svg]:text-default-foreground",
+    secondary: "[&_svg]:text-secondary-foreground",
+    success: "[&_svg]:text-success-foreground",
+    warning: "[&_svg]:text-warning-foreground",
+    danger: "[&_svg]:text-danger-foreground",
+};
+// v2 (`checkbox.js`, variante `size`): wrapper `w-4/w-5/w-6` (16/20/24px), label
+// `text-small/medium/large`, icon `w-3 h-2` / `w-4 h-3` / `w-5 h-4`. v3: control `size-4`, glifo
+// `size-2.5`, texto `text-sm`, para todos.
+const CONTROL_SIZE = {
+    sm: "size-4",
+    md: "size-5",
+    lg: "size-6",
+};
+const INDICATOR_SIZE = {
+    sm: "size-3 [&_svg]:size-2.5",
+    md: "size-3.5 [&_svg]:size-3",
+    lg: "size-4 [&_svg]:size-3.5",
+};
+const LABEL_SIZE = {
+    sm: "text-sm",
+    md: "text-base",
+    lg: "text-lg",
+};
+// v2: `rounded-[calc(theme(borderRadius.medium)*K)]` con `medium` = 12px → 6 / 7.2 / 8.4 px, y por
+// defecto el radio lo decidía `size` (sm→0.5, md→0.6, lg→0.7). El `::before` (relleno) lleva el
+// mismo radio porque aquí cubre el border-box completo (ver `CONTROL_BASE`).
+const RADIUS_CLASS$3 = {
+    none: "rounded-none before:rounded-none",
+    sm: "rounded-[6px] before:rounded-[6px]",
+    md: "rounded-[7.2px] before:rounded-[7.2px]",
+    lg: "rounded-[8.4px] before:rounded-[8.4px]",
+    full: "rounded-full before:rounded-full",
+};
+const RADIUS_BY_SIZE = {
+    sm: "sm",
+    md: "md",
+    lg: "lg",
+};
+/**
+ * Caja del control (slot `wrapper` de v2): borde de 2px en `--color-default` sin sombra
+ * (`before:border-2 before:border-default`), y el relleno cubriendo la caja ENTERA al marcarse.
+ *
+ * En v3 el borde vive en el propio control (1px, `border-field-border`, `shadow-field`) y el
+ * relleno es un `::before` a `inset-0`, que solo alcanza al padding-box: por eso v3 pone
+ * `border-transparent` al marcarse y el relleno queda 1px por dentro. Con el borde de 2px de v2
+ * eso dejaría un anillo de 2px: se lleva el `::before` al border-box (`-inset-0.5` = −2px) y se
+ * quita el `overflow-hidden` de v3 para que no lo recorte. El `::before` es un descendiente
+ * posicionado, así que pinta ENCIMA del borde y lo tapa, como el `after` de v2.
+ *
+ * Hover v2: `group-data-[hover=true]:before:bg-default-100` — tinte suave de la caja sin marcar
+ * (en v3 la caja es el fondo del control, no un pseudo). `data-hovered` lo emite `Checkbox.Content`.
+ *
+ * Indeterminado: v3 pinta el fondo del control (dentro del borde). Se enciende también el
+ * `::before` para que el relleno cubra la caja entera, igual que al marcar.
+ */
+const CONTROL_BASE = [
+    "border-2 border-default shadow-none overflow-visible",
+    "before:-inset-0.5",
+    "group-data-[hovered=true]/content:bg-default-100",
+    "group-data-[indeterminate=true]/checkbox:before:scale-100",
+    "group-data-[indeterminate=true]/checkbox:before:opacity-100",
+].join(" ");
+// v2 (`lineThrough: true`, slot `label`): la raya crece de 0 al 100% al marcarse y la etiqueta se
+// atenúa al 60%. `data-selected` está en la raíz → `group-data-[…]/checkbox`.
+const LINE_THROUGH = [
+    "inline-flex items-center justify-center",
+    "before:absolute before:h-0.5 before:w-0 before:bg-foreground before:content-['']",
+    "group-data-[selected=true]/checkbox:opacity-60",
+    "group-data-[selected=true]/checkbox:before:w-full",
+].join(" ");
+// Los subcomponentes compound de v3, adjuntos como estáticos para que la API v3 siga funcionando
+// a través de la fachada (`<Checkbox><Checkbox.Control>…`).
+const COMPOUND_PARTS$1 = new Set([
+    react.Checkbox.Control,
+    react.Checkbox.Indicator,
+    react.Checkbox.Content,
+]);
+/** API compound de v3 detectada por hijos directos: la fachada no envuelve nada. */
+function hasCompoundChildren$1(children) {
+    return $8WNJc$react.Children.toArray(children).some((child) => $8WNJc$react.isValidElement(child) && COMPOUND_PARTS$1.has(child.type));
+}
+/**
+ * Checkbox - Casilla basada en HeroUI v3 con la API pública de v2 intacta (TECH-2459).
+ *
+ * - **API v2**: `children` como etiqueta, `isSelected`/`defaultSelected` + `onValueChange`
+ *   (también `onChange`), `color`, `size`, `radius`, `lineThrough`, `icon`, `classNames`. Funciona
+ *   dentro de `Controller` de react-hook-form (`isSelected={value} onValueChange={onChange}`).
+ * - **API compound v3**: si los children traen `Checkbox.Control`/`Indicator`/`Content`, pasa tal
+ *   cual a la raíz de HeroUI (con `onValueChange` seguido igualmente).
+ */
+const CheckboxFacade = ({ children, onChange, onValueChange, color = "primary", size = "md", radius, lineThrough = false, icon, disableAnimation = false, isInvalid, classNames, className, ...rest }) => {
+    const handleChange = (isSelected) => {
+        onChange?.(isSelected);
+        onValueChange?.(isSelected);
+    };
+    if (hasCompoundChildren$1(children)) {
+        return (jsxRuntime.jsx(react.Checkbox, { ...rest, isInvalid: isInvalid, onChange: handleChange, className: react.cn(classNames?.base, className), children: children }));
+    }
+    const indicatorContent = typeof icon === "function"
+        ? (state) => icon({
+            isSelected: state.isSelected,
+            isIndeterminate: state.isIndeterminate,
+            isDisabled: state.isDisabled,
+        })
+        : icon;
+    const hasLabel = children !== undefined && children !== null && children !== false;
+    return (jsxRuntime.jsx(react.Checkbox, { ...rest, isInvalid: isInvalid, onChange: handleChange, 
+        // Base v2: `group relative max-w-fit inline-flex items-center justify-start cursor-pointer
+        // p-2 -m-2 select-none` (el `p-2 -m-2` es el área de pulsado ampliada de v2). v3
+        // (`.checkbox`) usa `flex flex-col items-start` para apilar `Description`/`FieldError`,
+        // slots que esta fachada no renderiza; en **inline** la caja participa de la línea de
+        // texto, donde la esperan los consumidores (mismo criterio que la fachada `Switch`).
+        className: react.cn("group/checkbox relative -m-2 inline-flex max-w-fit flex-row items-center p-2", classNames?.base, className), children: jsxRuntime.jsxs(react.Checkbox.Content, { className: "group/content gap-2 font-normal", children: [jsxRuntime.jsx(react.Checkbox.Control, { className: react.cn(CONTROL_BASE, CONTROL_SIZE[size], RADIUS_CLASS$3[radius ?? RADIUS_BY_SIZE[size]], CONTROL_COLOR[color], 
+                    // v2 `isInvalid`: `before:border-danger` (el borde vivía en el pseudo).
+                    isInvalid && "border-danger", disableAnimation && "transition-none before:transition-none", classNames?.wrapper), children: jsxRuntime.jsx(react.Checkbox.Indicator, { className: react.cn(INDICATOR_SIZE[size], INDICATOR_COLOR[color], disableAnimation && "[&_svg]:transition-none", classNames?.icon), children: indicatorContent }) }), hasLabel && (
+                // Slot `label` de v2: `relative text-foreground select-none` + tamaño de texto.
+                // `data-slot="label"` para que las reglas de cursor/selección de `.checkbox` de v3
+                // le alcancen igual que a un `<Label>`.
+                jsxRuntime.jsx("span", { "data-slot": "label", className: react.cn("relative select-none text-foreground", LABEL_SIZE[size], lineThrough && LINE_THROUGH, isInvalid && "text-danger", classNames?.label), children: children }))] }) }));
+};
+CheckboxFacade.displayName = "Aurora.Checkbox";
+/**
+ * `Checkbox` de Aurora: fachada v2 + estáticos compound de v3 (`Checkbox.Control`,
+ * `Checkbox.Indicator`, `Checkbox.Content`), los mismos objetos que exporta `@heroui/react`.
+ */
+const Checkbox = Object.assign(CheckboxFacade, {
+    Control: react.Checkbox.Control,
+    Indicator: react.Checkbox.Indicator,
+    Content: react.Checkbox.Content,
+});
+
+// TECH-2459 — Piezas que la fachada `Table.Content` inserta para reponer la API v2 que v3 dejó en
+// manos de la app (defectos reportados por beweossmbs, 23-sep). Privadas: NO se reexportan desde
+// `_internal/index.ts` ni desde el `index.ts` de la carpeta.
+//
+// Todo se decide por IDENTIDAD de `child.type` contra los objetos reales de HeroUI (mismo patrón
+// que las fachadas `Alert`, `Tabs` y el propio root de `Table`), nunca por `displayName`.
+/**
+ * `isHeaderSticky` declarado en el ROOT (`<Table isHeaderSticky>`, que es donde lo ponía v2) viaja
+ * hasta `Table.Content` por contexto: el `<thead>` lo pinta el contenido, no el root.
+ */
+const TableStickyContext = $8WNJc$react.createContext(undefined);
+/**
+ * Clases de v2 para `isHeaderSticky` (`@heroui/theme@2.4.15` → `dist/components/table.js`,
+ * variante `isHeaderSticky.true.thead`): `sticky top-0 z-20 [&>tr]:first:shadow-small`. La sombra
+ * se descarta: `shadow-small` es una clase del plugin de v2 que en Tailwind 4 no genera nada, y
+ * v3 separa la cabecera del cuerpo con su propio borde (`.table__header { border-b }`).
+ *
+ * El «contenedor con scroll» respecto al que se pega es el `Table.ScrollContainer` que inserta la
+ * fachada del root (`overflow-x: auto` ⇒ `overflow-y` computa `auto`), exactamente como en v2 lo
+ * era el `wrapper` (`overflow-auto`): la cabecera se queda fija cuando ese contenedor tiene alto
+ * acotado y desplaza en vertical.
+ */
+const STICKY_HEADER_CLASS = "sticky top-0 z-20";
+/** Clave fija de la columna/celda de selección insertadas (no colisiona con claves de negocio). */
+const SELECTION_KEY = "__aurora-selection";
+/**
+ * Columna de «seleccionar todo». El `Checkbox slot="selection"` recibe de react-aria, por
+ * `CheckboxContext`, el estado de la tabla: marcado con todo seleccionado, INDETERMINADO con una
+ * selección parcial, y su `onChange` selecciona/deselecciona todo — `onSelectionChange` recibe
+ * `"all"`, igual que en v2 (`useTableSelectAllCheckbox`). La etiqueta accesible también la pone
+ * react-aria, traducida a la locale activa: por eso esta pieza no tiene texto propio ni
+ * `translations`.
+ *
+ * `pe-0` es lo que hace la anatomía oficial de v3 con su columna de selección: la casilla no
+ * necesita el padding final de una columna de texto.
+ */
+function SelectionColumn() {
+    return (jsxRuntime.jsx(react.Table.Column, { className: "pe-0", id: SELECTION_KEY, children: jsxRuntime.jsx(Checkbox, { slot: "selection" }) }));
+}
+/** Casilla por fila (`useTableSelectionCheckbox` vía `CheckboxContext`, como en v2). */
+function SelectionCell() {
+    return (jsxRuntime.jsx(react.Table.Cell, { className: "pe-0", children: jsxRuntime.jsx(Checkbox, { slot: "selection" }) }));
+}
+function isElementOf(node, type) {
+    return $8WNJc$react.isValidElement(node) && node.type === type;
+}
+/**
+ * Hijos listos para pasarse como argumentos VARIÁDICOS de `cloneElement`/`createElement`. Un array
+ * pasado como argumento único es para React una LISTA y exige `key` en cada elemento: si la app
+ * escribió hijos JSX sueltos (sin clave, legal) y la fachada los reenviara como un solo array,
+ * saltaría «Each child in a list should have a unique key» (medido en jsdom). Esparcidos, React
+ * los trata como los trató al escribirlos.
+ */
+function spread(node) {
+    return Array.isArray(node) ? node : [node];
+}
+/**
+ * Aplica `fn` a cada nodo de un árbol de `children` atravesando arrays y Fragments, sin tocar
+ * claves (`cloneElement` las conserva). `Children.map` no sirve aquí: re-prefija las claves y NO
+ * entra en Fragments — y las apps envuelven en Fragment cuando el contenido es condicional.
+ */
+function mapNodes(node, fn) {
+    if (Array.isArray(node)) {
+        return node.map((child) => mapNodes(child, fn));
+    }
+    if (isElementOf(node, $8WNJc$react.Fragment)) {
+        return $8WNJc$react.cloneElement(node, undefined, ...spread(mapNodes(node.props.children, fn)));
+    }
+    return fn(node);
+}
+/**
+ * ¿Hay ya una casilla de selección montada (por la fachada o por la app) en este subárbol
+ * estático? Mira la identidad de las piezas propias y cualquier elemento con `slot="selection"`
+ * (la forma que documenta v3). Las funciones de render no se pueden inspeccionar sin llamarlas:
+ * esas cuentan como «no hay».
+ */
+function hasSelectionControl(node) {
+    if (Array.isArray(node)) {
+        return node.some(hasSelectionControl);
+    }
+    if (!$8WNJc$react.isValidElement(node)) {
+        return false;
+    }
+    if (node.type === SelectionColumn || node.type === SelectionCell) {
+        return true;
+    }
+    const props = node.props;
+    if (props.slot === "selection") {
+        return true;
+    }
+    return typeof props.children === "function"
+        ? false
+        : hasSelectionControl(props.children);
+}
+function containsType(node, type) {
+    if (Array.isArray(node)) {
+        return node.some((child) => containsType(child, type));
+    }
+    if (!$8WNJc$react.isValidElement(node)) {
+        return false;
+    }
+    if (node.type === type) {
+        return true;
+    }
+    const children = node.props.children;
+    return typeof children === "function" ? false : containsType(children, type);
+}
+/**
+ * Columna con `allowsSorting`: v2 pintaba el chevron por su cuenta (`TableColumnHeader`,
+ * `ChevronDownIcon` con `data-direction`); v3 no pinta nada y pide que la app monte
+ * `Table.SortableColumnHeader` en el render prop de la columna. Aquí se monta esa pieza de v3
+ * — aspecto de v3 (§9.1): chevron a la derecha que apunta arriba en ascendente y gira en
+ * descendente, y sin chevron mientras la columna no es la ordenada.
+ *
+ * No se toca la columna si la app ya decide el contenido con un render prop (entonces es suyo) o
+ * si ya montó un `SortableColumnHeader` estático.
+ */
+function withSortIndicator(node) {
+    if (!isElementOf(node, react.Table.Column)) {
+        return node;
+    }
+    const { allowsSorting, children } = node.props;
+    if (!allowsSorting ||
+        typeof children === "function" ||
+        containsType(children, react.Table.SortableColumnHeader)) {
+        return node;
+    }
+    return $8WNJc$react.cloneElement(node, {
+        children: ({ sortDirection }) => (jsxRuntime.jsx(react.Table.SortableColumnHeader, { sortDirection: sortDirection, children: children })),
+    });
+}
+/** Compone una clase sobre un `className` de react-aria, que puede ser string o render prop. */
+function withClass(className, extra) {
+    if (typeof className === "function") {
+        return (renderProps) => react.cn(className(renderProps), extra);
+    }
+    return react.cn(className, extra);
+}
+/**
+ * `Table.Header`: indicador de orden en cada columna ordenable, clase sticky si se pidió y la
+ * columna de selección delante si toca.
+ *
+ * Con columnas dinámicas (`columns` + función) la columna de selección no se puede colar en el
+ * array de la app — su función de render la recibiría como si fuera una columna de negocio. Se usa
+ * la forma que documenta react-aria para mezclar estáticas y dinámicas: la estática delante y las
+ * de la app en un `Table.Collection` con sus `items`. El `Collection` exterior del header hereda
+ * `dependencies` por contexto (`CollectionBuilder`), así que no se pierden.
+ */
+function transformHeader(header, options) {
+    const { children, columns, className } = header.props;
+    const props = options.sticky
+        ? { className: withClass(className, STICKY_HEADER_CLASS) }
+        : {};
+    if (typeof children === "function") {
+        const render = children;
+        const wrapped = (column) => withSortIndicator(render(column));
+        if (!options.insertSelection) {
+            return $8WNJc$react.cloneElement(header, { ...props, children: wrapped });
+        }
+        return $8WNJc$react.cloneElement(header, { ...props, columns: undefined }, jsxRuntime.jsx(SelectionColumn, {}, SELECTION_KEY), jsxRuntime.jsx(react.Table.Collection, { items: columns, children: wrapped }, "columns"));
+    }
+    const mapped = spread(mapNodes(children, withSortIndicator));
+    if (!options.insertSelection) {
+        return $8WNJc$react.cloneElement(header, props, ...mapped);
+    }
+    return $8WNJc$react.cloneElement(header, props, jsxRuntime.jsx(SelectionColumn, {}, SELECTION_KEY), ...mapped);
+}
+/**
+ * Casilla delante de las celdas de una fila. Solo sabe tratar `Table.Row` (el mismo objeto que el
+ * `TableRow` suelto): una fila envuelta en un componente propio de la app no se puede abrir, y se
+ * devuelve tal cual (límite documentado en el README).
+ */
+function withSelectionCell(row) {
+    if (!isElementOf(row, react.Table.Row)) {
+        return row;
+    }
+    const { children, columns } = row.props;
+    if (typeof children === "function") {
+        // Mismo mecanismo que el header: estática + `Collection` con las columnas de la app. El
+        // `idScope` de la fila (su `id`) lo hereda la colección interior por contexto, así que las
+        // claves de las celdas siguen siendo únicas por fila.
+        return $8WNJc$react.cloneElement(row, { columns: undefined }, jsxRuntime.jsx(SelectionCell, {}, SELECTION_KEY), jsxRuntime.jsx(react.Table.Collection, { items: columns, children: children }, "cells"));
+    }
+    if (hasSelectionControl(children)) {
+        return row;
+    }
+    return $8WNJc$react.cloneElement(row, undefined, jsxRuntime.jsx(SelectionCell, {}, SELECTION_KEY), ...spread(children));
+}
+/** `Table.Body`: una casilla por fila, tanto con `items` + función como con filas estáticas. */
+function transformBody(body) {
+    const { children } = body.props;
+    if (typeof children === "function") {
+        const render = children;
+        return $8WNJc$react.cloneElement(body, {
+            children: (item) => withSelectionCell(render(item)),
+        });
+    }
+    return $8WNJc$react.cloneElement(body, undefined, ...spread(mapNodes(children, withSelectionCell)));
+}
+
+/** Default de v2 (`use-table`, `@heroui/table@2.2.32`), sin reinterpretar. */
+function defaultShowCheckboxes(props) {
+    const behavior = props.selectionBehavior ?? "toggle";
+    return props.selectionMode === "multiple" && behavior !== "replace";
+}
+/** Primer `Table.Header` del árbol (atravesando arrays y Fragments), para decidir la selección. */
+function findHeader(node) {
+    let found;
+    mapNodes(node, (child) => {
+        if (!found && isElementOf(child, react.Table.Header)) {
+            found = child;
+        }
+        return child;
+    });
+    return found;
+}
+/**
+ * `Table.Content` de Aurora: el `Table.Content` de HeroUI v3 con las casillas de selección, el
+ * indicador de orden y la cabecera fija de v2. Idempotente: si la app ya montó sus casillas
+ * (`slot="selection"`) o su `SortableColumnHeader`, no se inserta nada encima.
+ */
+function TableContent({ children, isHeaderSticky, showSelectionCheckboxes, ...props }) {
+    const rootSticky = $8WNJc$react.useContext(TableStickyContext);
+    const sticky = isHeaderSticky ?? rootSticky ?? false;
+    const header = findHeader(children);
+    // La decisión es de TABLA, no de fila: si la cabecera ya trae casilla (la montó la app), no
+    // se inserta ni en la cabecera ni en las filas — insertar solo en unas descuadraría el número
+    // de celdas y react-aria lanza `Cell count must match column count`.
+    const insertSelection = (showSelectionCheckboxes ?? defaultShowCheckboxes(props)) &&
+        header !== undefined &&
+        !(typeof header.props.children !== "function" &&
+            hasSelectionControl(header.props.children));
+    const content = mapNodes(children, (child) => {
+        if (isElementOf(child, react.Table.Header)) {
+            return transformHeader(child, { insertSelection, sticky });
+        }
+        if (insertSelection && isElementOf(child, react.Table.Body)) {
+            return transformBody(child);
+        }
+        return child;
+    });
+    // Esparcido y no `{content}`: ver `spread` (un array como hijo único exigiría claves).
+    return $8WNJc$react.createElement(react.Table.Content, props, ...spread(content));
+}
+TableContent.displayName = "Aurora.Table.Content";
+
+/**
+ * Piezas que v3 monta FUERA del contenedor con scroll, como hermanas del root: el footer se queda
+ * a ancho completo (comentario de los autores en `table.css:15-18`), no se desplaza con la tabla.
+ */
+const OUTSIDE_SCROLL = new Set([react.Table.Footer]);
+/**
+ * Piezas que YA son un contenedor con scroll propio (`.table__scroll-container` /
+ * `.table__resizable-container`, ambas con `overflow` en `table.css`): si el consumidor monta una,
+ * la fachada no envuelve nada — anidar dos contenedores de scroll dejaría el interior sin ancho
+ * que desbordar.
+ */
+const OWN_SCROLL = new Set([
+    react.Table.ScrollContainer,
+    react.Table.ResizableContainer,
+]);
+/** Identidad por `child.type` contra los objetos reales de HeroUI (mismo patrón que la fachada `Alert`). */
+function isPart$2(node, parts) {
+    return $8WNJc$react.isValidElement(node) && parts.has(node.type);
+}
+/**
+ * `isHeaderSticky` del root viaja a `Table.Content` por contexto (el `<thead>` lo pinta el
+ * contenido). Solo se monta el provider cuando la app declara la prop: sin ella el árbol del root
+ * queda exactamente como antes (`.Provider` y no `<Context value>` porque el peer admite React 18).
+ */
+function withSticky(isHeaderSticky, root) {
+    return isHeaderSticky === undefined ? (root) : (jsxRuntime.jsx(TableStickyContext.Provider, { value: isHeaderSticky, children: root }));
+}
+const TableFacade = ({ children, isHeaderSticky, ...props }) => {
+    const nodes = $8WNJc$react.Children.toArray(children);
     // Sin hijos, o con un contenedor de scroll ya montado a mano: el root tal cual.
     if (nodes.length === 0 || nodes.some((node) => isPart$2(node, OWN_SCROLL))) {
-        return jsxRuntime.jsx(react.Table, { ...props, children: children });
+        return withSticky(isHeaderSticky, jsxRuntime.jsx(react.Table, { ...props, children: children }));
     }
     const scrollable = nodes.filter((node) => !isPart$2(node, OUTSIDE_SCROLL));
     const outsideScroll = nodes.filter((node) => isPart$2(node, OUTSIDE_SCROLL));
-    return (jsxRuntime.jsxs(react.Table, { ...props, children: [jsxRuntime.jsx(react.Table.ScrollContainer, { children: scrollable }), outsideScroll] }));
+    return withSticky(isHeaderSticky, jsxRuntime.jsxs(react.Table, { ...props, children: [jsxRuntime.jsx(react.Table.ScrollContainer, { children: scrollable }), outsideScroll] }));
 };
 TableFacade.displayName = "Aurora.Table";
 /**
  * `Table` de Aurora: el root de HeroUI v3 con el `ScrollContainer` que faltaba, más los estáticos
- * del compound de v3 — los MISMOS objetos que exporta `@heroui/react`, así que
- * `Table.Content`/`Table.Header`/`isRowHeader`… se comportan igual que antes.
+ * del compound de v3 — los MISMOS objetos que exporta `@heroui/react` (así que
+ * `Table.Header`/`Table.Column isRowHeader`… se comportan igual que antes), SALVO `Table.Content`,
+ * que es la fachada de Aurora: inserta las casillas de selección múltiple, el indicador de orden
+ * de `allowsSorting` y la cabecera fija de `isHeaderSticky` (ver `TableContent.tsx`).
  *
  * `Table.Root` queda deliberadamente crudo (el root pelado de v3, sin scroll): es la vía de escape
  * para quien quiera montar la anatomía entera a mano.
@@ -9389,7 +11019,7 @@ const Table = Object.assign(TableFacade, {
     Collection: react.Table.Collection,
     Column: react.Table.Column,
     ColumnResizer: react.Table.ColumnResizer,
-    Content: react.Table.Content,
+    Content: TableContent,
     Footer: react.Table.Footer,
     Header: react.Table.Header,
     LoadMore: react.Table.LoadMore,
@@ -9458,6 +11088,225 @@ function AuraTable({ columns, items, renderCell, children, className, ...props }
     return (jsxRuntime.jsx(Table, { className: `rounded-none ${className ?? ""}`.trim(), children: jsxRuntime.jsxs(Table.Content, { ...props, children: [jsxRuntime.jsx(Table.Header, { columns: columns, children: (column) => (jsxRuntime.jsx(Table.Column, { isRowHeader: column.isRowHeader || column.key === rowHeaderKey, children: column.label }, column.key)) }), jsxRuntime.jsx(Table.Body, { items: items, children: (item) => (jsxRuntime.jsx(Table.Row, { columns: columns, children: (column) => (jsxRuntime.jsx(Table.Cell, { children: renderCell ? renderCell(item, column.key) : children })) }, item.id)) })] }) }));
 }
 
+// ── Autocrecimiento entre `minRows` y `maxRows` (reposición de v2) ─────────────────────────────
+//
+// v2 montaba `react-textarea-autosize@8.5.9` (`@heroui/input@2.4.22`, `dist/chunk-RIE4DNUQ.mjs`)
+// y aquí esa dependencia no existe, así que se reimplementa su algoritmo, leído en su compilado
+// (`dist/react-textarea-autosize.browser.esm.js`, `calculateNodeHeight` + `resizeTextarea`):
+//
+//   1. Se copia el estilo que decide el ajuste de línea (fuente, relleno, borde, ancho…) a un
+//      `<textarea>` OCULTO compartido, se le pone el valor (o el placeholder, o "x") y se lee su
+//      `scrollHeight`. Se mide en un clon y no en el nodo real porque encoger el real a 0 para
+//      medirlo mueve el scroll de la página cuando el campo está cerca del borde inferior.
+//   2. El alto de UNA línea sale del mismo clon con el valor "x", no de una constante: así cuadra
+//      con la fuente y el tamaño que el campo tenga de verdad.
+//   3. `alto = min(máx, max(mín, contenido))`, con mín/máx = filas × línea + relleno (+ borde en
+//      `border-box`). Si `maxRows < minRows`, gana `maxRows` — el `min` va por fuera, como en v2.
+//   4. Se escribe con `setProperty("height", …, "important")`, literal de v2.
+//
+// Cuándo se recalcula (los mismos disparadores que v2, más el ancho):
+//   · en cada render de la fachada (layout effect sin dependencias, como v2) → cubre el valor
+//     CONTROLADO y cualquier cambio de `size`/`className` que mueva la fuente o el ancho;
+//   · al escribir, en los dos modos (`resize` desde el `onChange` de la fachada). Hace falta
+//     aunque el valor viva en estado de React: en modo NO controlado ese estado es del
+//     `TextField` de react-aria, y su re-render no re-renderiza la fachada, así que el layout
+//     effect de arriba no corre;
+//   · al cambiar el ANCHO del campo (`ResizeObserver`; v2 solo escuchaba `window.resize`, que no
+//     ve un panel que se estrecha) — solo si cambió el ancho, para no reaccionar a nuestro propio
+//     cambio de alto;
+//   · al terminar de cargar una fuente web (`document.fonts` → `loadingdone`, como v2);
+//   · tras el `reset` del formulario (como v2): `useFormReset` de react-aria devuelve el estado del
+//     `TextField` al `defaultValue`, otra vez sin re-renderizar la fachada. Se mide en el frame
+//     siguiente, cuando React ya ha escrito el valor restaurado en el DOM.
+//
+// Scroll: v2 ocultaba la barra mientras no se alcanzaba el tope (`data-hide-scroll` →
+// `scrollbar-hide`, `@heroui/theme@2.4.15`); aquí se consigue lo mismo con `overflow-y: hidden`
+// inline hasta que el contenido supera el máximo, y a partir de ahí se deja el scroll nativo.
+const HIDDEN_TEXTAREA_STYLE = {
+    "min-height": "0",
+    "max-height": "none",
+    height: "0",
+    visibility: "hidden",
+    overflow: "hidden",
+    position: "absolute",
+    "z-index": "-1000",
+    top: "0",
+    right: "0",
+    display: "block",
+};
+// Lista literal de `react-textarea-autosize` (`SIZING_STYLE`).
+const SIZING_STYLE = [
+    "borderBottomWidth",
+    "borderLeftWidth",
+    "borderRightWidth",
+    "borderTopWidth",
+    "boxSizing",
+    "fontFamily",
+    "fontSize",
+    "fontStyle",
+    "fontWeight",
+    "letterSpacing",
+    "lineHeight",
+    "paddingBottom",
+    "paddingLeft",
+    "paddingRight",
+    "paddingTop",
+    "tabSize",
+    "textIndent",
+    "textRendering",
+    "textTransform",
+    "width",
+    "wordBreak",
+    "wordSpacing",
+    "scrollbarGutter",
+];
+let hiddenTextarea = null;
+const forceHiddenStyles = (node) => {
+    for (const key of Object.keys(HIDDEN_TEXTAREA_STYLE)) {
+        node.style.setProperty(key, HIDDEN_TEXTAREA_STYLE[key], "important");
+    }
+};
+const px = (value) => Number.parseFloat(value) || 0;
+/**
+ * Mide el alto que necesita `node` para su contenido y lo acota entre `minRows` y `maxRows`.
+ * Devuelve `null` si el nodo está fuera del DOM (no hay estilo computado que leer).
+ */
+function measureTextareaHeight(node, minRows, maxRows) {
+    // v2 detectaba el nodo desconectado por un `boxSizing` vacío; aquí se pregunta directamente,
+    // y un `boxSizing` vacío en un nodo conectado se trata como `content-box` (el valor inicial).
+    if (!node.isConnected) {
+        return null;
+    }
+    const computed = window.getComputedStyle(node);
+    const isBorderBox = computed.boxSizing === "border-box";
+    const paddingSize = px(computed.paddingTop) + px(computed.paddingBottom);
+    const borderSize = px(computed.borderTopWidth) + px(computed.borderBottomWidth);
+    if (!hiddenTextarea) {
+        hiddenTextarea = document.createElement("textarea");
+        hiddenTextarea.setAttribute("tabindex", "-1");
+        hiddenTextarea.setAttribute("aria-hidden", "true");
+    }
+    if (hiddenTextarea.parentNode === null) {
+        document.body.appendChild(hiddenTextarea);
+    }
+    const clone = hiddenTextarea;
+    const cloneStyle = clone.style;
+    for (const key of SIZING_STYLE) {
+        cloneStyle[key] =
+            computed[key] ?? "";
+    }
+    forceHiddenStyles(clone);
+    const contentOf = () => isBorderBox
+        ? clone.scrollHeight + borderSize
+        : clone.scrollHeight - paddingSize;
+    const text = node.value || node.placeholder || "x";
+    clone.value = text;
+    let content = contentOf();
+    // Doble asignación y medida: bug de Firefox que v2 también esquiva (bugzilla 1795904).
+    clone.value = text;
+    content = contentOf();
+    clone.value = "x";
+    const rowHeight = clone.scrollHeight - paddingSize;
+    const extra = isBorderBox ? paddingSize + borderSize : 0;
+    const minHeight = rowHeight * minRows + extra;
+    const maxHeight = rowHeight * maxRows + extra;
+    return {
+        height: Math.min(maxHeight, Math.max(minHeight, content)),
+        rowHeight,
+        overflows: content > maxHeight,
+    };
+}
+// `useLayoutEffect` en el servidor avisa en React 18; el alto solo tiene sentido en el cliente.
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? $8WNJc$react.useLayoutEffect : $8WNJc$react.useEffect;
+/**
+ * Autocrecimiento del `<textarea>` apuntado por `nodeRef`. Devuelve el `resize` para llamarlo
+ * desde el `onChange` de la fachada.
+ */
+function useTextareaAutosize(nodeRef, { enabled, minRows, maxRows }) {
+    const heightRef = $8WNJc$react.useRef(0);
+    const overflowRef = $8WNJc$react.useRef(null);
+    const resize = $8WNJc$react.useCallback(() => {
+        const node = nodeRef.current;
+        if (!(enabled && node)) {
+            return;
+        }
+        const result = measureTextareaHeight(node, minRows, maxRows);
+        if (!result) {
+            return;
+        }
+        if (heightRef.current !== result.height) {
+            heightRef.current = result.height;
+            node.style.setProperty("height", `${result.height}px`, "important");
+        }
+        if (overflowRef.current !== result.overflows) {
+            overflowRef.current = result.overflows;
+            node.style.setProperty("overflow-y", result.overflows ? "auto" : "hidden");
+        }
+    }, [enabled, minRows, maxRows, nodeRef]);
+    // La función más reciente para los listeners, que se registran una sola vez.
+    const resizeRef = $8WNJc$react.useRef(resize);
+    resizeRef.current = resize;
+    // Cada render, como v2: el valor controlado, el `size` o la clase pueden haber cambiado.
+    useIsomorphicLayoutEffect(() => {
+        resize();
+    });
+    // Al apagar el autosize, se retira lo que se escribió a mano para que mande el CSS.
+    useIsomorphicLayoutEffect(() => {
+        const node = nodeRef.current;
+        if (enabled || !node) {
+            return;
+        }
+        node.style.removeProperty("height");
+        node.style.removeProperty("overflow-y");
+        heightRef.current = 0;
+        overflowRef.current = null;
+    }, [enabled, nodeRef]);
+    $8WNJc$react.useEffect(() => {
+        const node = nodeRef.current;
+        if (!(enabled && node)) {
+            return;
+        }
+        const cleanups = [];
+        // Ancho: re-ajuste de línea. Solo cuando cambia el ANCHO, no el alto que ponemos nosotros.
+        if (typeof ResizeObserver !== "undefined") {
+            let lastWidth = node.getBoundingClientRect().width;
+            const observer = new ResizeObserver((entries) => {
+                const width = entries[0]?.contentRect.width ?? lastWidth;
+                if (width !== lastWidth) {
+                    lastWidth = width;
+                    resizeRef.current();
+                }
+            });
+            observer.observe(node);
+            cleanups.push(() => observer.disconnect());
+        }
+        else {
+            const onWindowResize = () => resizeRef.current();
+            window.addEventListener("resize", onWindowResize);
+            cleanups.push(() => window.removeEventListener("resize", onWindowResize));
+        }
+        const fonts = document.fonts;
+        if (fonts && typeof fonts.addEventListener === "function") {
+            const onFonts = () => resizeRef.current();
+            fonts.addEventListener("loadingdone", onFonts);
+            cleanups.push(() => fonts.removeEventListener("loadingdone", onFonts));
+        }
+        const onReset = (event) => {
+            if (node.form && node.form === event.target) {
+                requestAnimationFrame(() => resizeRef.current());
+            }
+        };
+        document.body.addEventListener("reset", onReset);
+        cleanups.push(() => document.body.removeEventListener("reset", onReset));
+        return () => {
+            for (const cleanup of cleanups) {
+                cleanup();
+            }
+        };
+    }, [enabled, nodeRef]);
+    return resize;
+}
+
 // TECH-2459 · F3 · G1-forms — v3 divide el `Textarea` monolítico de v2 en `TextField` +
 // `TextArea` (el `<textarea>` real, sin `InputGroup` intermedio: a diferencia de Input, aquí el
 // borde/fondo/tamaño de texto viven todos en el MISMO elemento — ver `textarea.css`). Por eso no
@@ -9496,6 +11345,8 @@ const FIELD_BORDER_Y = 4;
 // El default de v2, literal: `({ minRows = 3, maxRows = 8, … })` en `@heroui/input@2.4.22`,
 // `dist/chunk-RIE4DNUQ.mjs`.
 const DEFAULT_MIN_ROWS = 3;
+// Mismo literal de v2: `maxRows = 8`. Tope del autocrecimiento cuando el consumidor no lo pasa.
+const DEFAULT_MAX_ROWS = 8;
 // ── `minRows` gana al atributo nativo `rows` ─────────────────────────────────────────────────
 //
 // Las dos props dicen lo mismo —cuántas líneas de alto tiene la caja al aparecer— así que la
@@ -9533,7 +11384,7 @@ Math.max(1, Math.round(minRows ?? rows ?? DEFAULT_MIN_ROWS));
 // esquina. Es el único resto que quedaba entre `textarea--default` y su referencia: 12 píxeles en
 // x[780..786] y[407..413], gris `102,102,102` donde v2 tiene el fondo.
 const RESIZE_CLASS = "resize-none";
-const RADIUS_CLASS$3 = {
+const RADIUS_CLASS$2 = {
     none: "rounded-none",
     sm: "rounded-[8px]",
     md: "rounded-[12px]",
@@ -9614,6 +11465,28 @@ const VARIANT_CLASS = {
 // placeholder en el gris `default-500` (`113,113,122`) pese a ser un campo inválido.
 const INVALID_LABEL_CLASS = "text-danger";
 const INVALID_TEXT_CLASS = "text-danger";
+// ── `isClearable` / `onClear` / `classNames.clearButton` (API v2, repuesta) ──────────────────
+//
+// El `Textarea` de v2 ES el `Input` con `isMultiline` (mismo `useInput`), así que heredaba su botón
+// de limpiar: `isClearable = !!onClear || originalProps.isClearable` y `handleClear` pone el valor
+// a "" (lo que dispara `onValueChange("")`), llama a `onClear` y devuelve el foco
+// (`@heroui/input@2.4.33`, `dist/chunk-KQW2TNLT.mjs`); Escape con valor también limpia. Uso real:
+// `campaigns/**/AudienceReachStep.tsx` en beweossmbs (`isClearable` + `onClear` +
+// `classNames.clearButton`), el único de los 33 `Textarea` de la app que lo pide.
+//
+// Posición, literal del `tv` de v2 (`@heroui/theme@2.4.15`, `dist/components/input.js`):
+//   · `isMultiline.clearButton`  → "absolute top-2 right-2 rtl:right-auto rtl:left-2 z-10": la X va
+//     ARRIBA a la derecha, no centrada como en el campo de una línea (aquí `end-2` = right/left
+//     según la dirección, lo mismo que el par `right-2 rtl:left-2`);
+//   · `isClearable.input`        → "pe-6": el texto deja sitio a la X aunque todavía no se vea,
+//     para que no salte al aparecer.
+// Lo relativo en v2 era el `inputWrapper`, que aquí no existe (el `<textarea>` es la caja), así que
+// se añade un envoltorio `relative` SOLO cuando el campo es limpiable: sin la prop el DOM no cambia.
+// El glifo es el `CloseButton` de v3, el mismo que ya usa la fachada `Input` (§9.1: verse como v3),
+// y `classNames.clearButton` va el último para que las clases del consumidor ganen.
+const CLEAR_WRAPPER_CLASS = "relative w-full";
+const CLEAR_BUTTON_CLASS = "absolute top-2 end-2 z-10 h-4 w-4 min-h-0 p-0.5";
+const CLEARABLE_FIELD_CLASS = "pe-6";
 // ── El `className` del consumidor: FUSIONADO y en la RAÍZ ────────────────────────────────────
 //
 // Mismo defecto doble que en `Input.tsx` (ver ahí el razonamiento completo y las medidas), porque
@@ -9651,7 +11524,15 @@ const INVALID_TEXT_CLASS = "text-danger";
 const Textarea = $8WNJc$react.forwardRef(({ label, description, errorMessage, id, size = "md", variant = "bordered", radius = "md", 
 // Sin default en el destructuring a propósito: hace falta distinguir "no me la han pasado"
 // de un valor, para que `rows` solo se mire cuando `minRows` no viene (ver `resolveRows`).
-minRows, rows, placeholder, isInvalid = false, isRequired = false, isDisabled = false, isReadOnly = false, 
+minRows, rows, 
+// Tope del autocrecimiento, default de v2 (8). Se desestructura también para que no
+// llegue al DOM (antes viajaba en `...rest` y React avisaba de un atributo desconocido).
+maxRows = DEFAULT_MAX_ROWS, 
+// Compat v2: `true` apaga el autocrecimiento y deja la caja fija en su alto mínimo.
+disableAutosize = false, placeholder, isClearable: isClearableProp = false, onClear, 
+// Sin efecto (ver `TextareaProps.labelPlacement`): fuera del spread para que no llegue
+// al `<textarea>` como atributo desconocido.
+labelPlacement: _labelPlacement, isInvalid = false, isRequired = false, isDisabled = false, isReadOnly = false, 
 // `fullWidth` por defecto a `true`: HeroUI v2 lo traía en sus `defaultVariants`
 // (verificado en el paquete v2 compilado, `dist/components/input.js`:
 // `defaultVariants: { variant:"flat", color:"default", size:"md", fullWidth:true, … }`, con
@@ -9659,10 +11540,35 @@ minRows, rows, placeholder, isInvalid = false, isRequired = false, isDisabled =
 // `undefined` y el campo dejaba de llenar su contenedor: en una fila flex se encogía al ancho
 // de su contenido (medido por S2: 208px dentro de una fila de 592, 336px de hueco). En una
 // columna no se notaba porque el `stretch` del flex lo tapaba — pero afecta a cualquier app.
-fullWidth = true, value, defaultValue, onChange, onValueChange, className, classNames, name, style, ...rest }, ref) => {
+fullWidth = true, value, defaultValue, onChange, onValueChange, className, classNames, name, style, onKeyDown, ...rest }, ref) => {
     const generatedId = $8WNJc$react.useId();
     const textareaId = id || generatedId;
-    const fieldRows = resolveRows(minRows, rows);
+    const requestedRows = resolveRows(minRows, rows);
+    const maxFieldRows = Math.max(1, Math.round(maxRows));
+    // Con autocrecimiento, `maxRows` es el techo también del mínimo: v2 acotaba
+    // `min(máx, max(mín, contenido))`, así que con `maxRows < minRows` ganaba `maxRows`. Sin
+    // autocrecimiento `maxRows` no pinta nada (v2 ni se lo pasaba al `<textarea>` plano).
+    const fieldRows = disableAutosize
+        ? requestedRows
+        : Math.min(requestedRows, maxFieldRows);
+    const innerRef = $8WNJc$react.useRef(null);
+    const setRefs = $8WNJc$react.useCallback((node) => {
+        innerRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    const resize = useTextareaAutosize(innerRef, {
+        enabled: !disableAutosize,
+        minRows: fieldRows,
+        maxRows: maxFieldRows,
+    });
+    // El `min-height` se emite aunque haya autocrecimiento: es el alto correcto ANTES de la
+    // primera medida (SSR, o sin hoja de estilos) y el suelo si la medida sale menor (p. ej.
+    // `flat`, sin los 4px de borde). El `height` lo escribe después `useTextareaAutosize`.
     // Inline y no una clase: el valor es un número arbitrario y Tailwind 4 solo emite las clases
     // que encuentra escritas en el fuente, así que `min-h-[${n}px]` no existiría en el CSS. El
     // `style` del consumidor va DESPUÉS para que pueda pisarlo (y una clase con `!` también gana,
@@ -9671,17 +11577,78 @@ fullWidth = true, value, defaultValue, onChange, onValueChange, className, class
         minHeight: `${fieldRows * SIZE_LINE_HEIGHT[size] + FIELD_PADDING_Y + FIELD_BORDER_Y}px`,
         ...style,
     };
+    // v2: `isClearable = !!onClear || originalProps.isClearable`.
+    const isClearable = isClearableProp || Boolean(onClear);
+    // Limpiar en modo NO controlado tiene que poder vaciar el valor, y el estado interno del
+    // `TextField` no se puede escribir desde fuera: en ese caso (y solo en ese) la fachada lleva
+    // el valor en su propio estado, igual que `Input.tsx`. Sin `isClearable` nada cambia: el
+    // valor no controlado sigue siendo del `TextField` (y su `reset`, de `useFormReset`).
+    const isControlled = value !== undefined;
+    const ownsValue = isClearable && !isControlled;
+    const [ownValue, setOwnValue] = $8WNJc$react.useState(defaultValue ?? "");
+    const currentValue = isControlled ? value : ownsValue ? ownValue : "";
+    const showClear = isClearable && !isDisabled && !isReadOnly && Boolean(currentValue);
+    // Orden de v2 (`handleClear`): el valor a "" —que en v2 disparaba `onValueChange`—, luego
+    // `onClear`. El `onChange` recibe un evento de valor vacío, como en `Input.tsx`, para que un
+    // consumidor que solo escucha `onChange` (p. ej. `field.onChange` de react-hook-form) se entere.
+    const clearValue = () => {
+        if (ownsValue) {
+            setOwnValue("");
+        }
+        onValueChange?.("");
+        if (onChange) {
+            const emptyEvent = {
+                target: { value: "" },
+                currentTarget: { value: "" },
+            };
+            onChange(emptyEvent);
+        }
+        onClear?.();
+    };
+    const handleClear = () => {
+        clearValue();
+        innerRef.current?.focus();
+    };
+    // Escape limpia, igual que v2 (con valor, limpiable y no de solo lectura). El `onKeyDown` del
+    // consumidor se llama primero.
+    const handleKeyDown = (event) => {
+        onKeyDown?.(event);
+        if (event.key === "Escape" && showClear) {
+            clearValue();
+        }
+    };
+    // El estado del valor lo actualiza el `TextField` con su propio `onChange` (llega al
+    // `<textarea>` por contexto y `mergeProps` encadena los dos). Aquí: medir —el nodo ya trae
+    // el valor nuevo, y en modo no controlado la fachada no se re-renderiza— y avisar.
     const handleChange = (event) => {
+        resize();
         onChange?.(event);
         onValueChange?.(event.target.value);
     };
-    return (jsxRuntime.jsxs(react.TextField, { id: textareaId, name: name, isInvalid: isInvalid, isRequired: isRequired, isDisabled: isDisabled, isReadOnly: isReadOnly, className: react.cn(FIELD_STACK_CLASS, fullWidth ? "w-full" : "", 
+    const field = (jsxRuntime.jsx(react.TextArea, { ...rest, ref: setRefs, rows: fieldRows, style: fieldStyle, placeholder: placeholder, onChange: handleChange, onKeyDown: handleKeyDown, className: react.cn(SIZE_TEXT_CLASS[size], RESIZE_CLASS, RADIUS_CLASS$2[radius], VARIANT_CLASS[variant], isInvalid ? INVALID_TEXT_CLASS : "", FIELD_FOCUS_CLASS, FIELD_SHADOW_CLASS, 
+        // Incondicional, como el slot `input` de v2: el campo llena siempre su raíz,
+        // y es la raíz la que responde a `fullWidth` y al ancho del consumidor.
+        "w-full", isClearable ? CLEARABLE_FIELD_CLASS : "", classNames?.input ?? classNames?.inputWrapper) }));
+    return (
+    // ── `value` / `defaultValue` van al `TextField`, NO al `<textarea>` ─────────────────────
+    //
+    // En react-aria el dueño del valor es el `TextField`: `useTextField` guarda el estado con
+    // `useControlledState(value, defaultValue ?? "")` y se lo inyecta al `<textarea>` como
+    // `value` por contexto (`react-aria-components/dist/private/TextField.mjs`). Antes la
+    // fachada se los pasaba al `<textarea>`, así que:
+    //   · en modo NO controlado el `TextField` arrancaba con "" y el `<textarea>` recibía a la
+    //     vez `value=""` (del contexto) y `defaultValue` → React avisaba de «both value and
+    //     defaultValue» y el primer re-render del padre dejaba el campo VACÍO;
+    //   · en modo controlado funcionaba de rebote (`mergeProps` deja ganar al `value` propio),
+    //     pero el estado interno del `TextField` seguía en "".
+    // Ahora el `TextField` tiene el valor en los dos modos, y el `reset` del formulario también
+    // es suyo (`useFormReset` devuelve el estado al `defaultValue`; el autosize lo escucha).
+    jsxRuntime.jsxs(react.TextField, { id: textareaId, value: ownsValue ? ownValue : value, defaultValue: ownsValue ? undefined : defaultValue, 
+        // Solo cuando la fachada es dueña del valor (limpiable y no controlado).
+        onChange: ownsValue ? setOwnValue : undefined, name: name, isInvalid: isInvalid, isRequired: isRequired, isDisabled: isDisabled, isReadOnly: isReadOnly, className: react.cn(FIELD_STACK_CLASS, fullWidth ? "w-full" : "", 
         // El `className` del consumidor, en la raíz y en último lugar: el slot `base` de
         // v2 y la posición que le deja ganar en tailwind-merge (ver bloque de arriba).
-        className), children: [label && (jsxRuntime.jsx(react.Label, { className: react.cn(LABEL_CLASS, isInvalid ? INVALID_LABEL_CLASS : "", classNames?.label), children: label })), jsxRuntime.jsx(react.TextArea, { ...rest, ref: ref, rows: fieldRows, style: fieldStyle, placeholder: placeholder, value: value, defaultValue: defaultValue, onChange: handleChange, className: react.cn(SIZE_TEXT_CLASS[size], RESIZE_CLASS, RADIUS_CLASS$3[radius], VARIANT_CLASS[variant], isInvalid ? INVALID_TEXT_CLASS : "", FIELD_FOCUS_CLASS, FIELD_SHADOW_CLASS, 
-                // Incondicional, como el slot `input` de v2: el campo llena siempre su raíz,
-                // y es la raíz la que responde a `fullWidth` y al ancho del consumidor.
-                "w-full", classNames?.input ?? classNames?.inputWrapper) }), description && !isInvalid && (jsxRuntime.jsx(react.Description, { className: react.cn(HELPER_CLASS, "text-left", classNames?.description), children: description })), isInvalid && errorMessage && (jsxRuntime.jsx(react.FieldError, { className: react.cn(HELPER_CLASS, "text-left", classNames?.errorMessage), children: errorMessage }))] }));
+        className), children: [label && (jsxRuntime.jsx(react.Label, { className: react.cn(LABEL_CLASS, isInvalid ? INVALID_LABEL_CLASS : "", classNames?.label), children: label })), isClearable ? (jsxRuntime.jsxs("div", { className: CLEAR_WRAPPER_CLASS, children: [field, showClear && (jsxRuntime.jsx(react.CloseButton, { "aria-label": "Limpiar", className: react.cn(CLEAR_BUTTON_CLASS, classNames?.clearButton), onPress: handleClear }))] })) : (field), description && !isInvalid && (jsxRuntime.jsx(react.Description, { className: react.cn(HELPER_CLASS, "text-left", classNames?.description), children: description })), isInvalid && errorMessage && (jsxRuntime.jsx(react.FieldError, { className: react.cn(HELPER_CLASS, "text-left", classNames?.errorMessage), children: errorMessage }))] }));
 });
 Textarea.displayName = "Textarea";
 
@@ -11434,8 +13401,8 @@ const DrawerFiltersFooter = ({ onClearFilters, onCancel, onApplyFilters, transla
 /**
  * Header of the DrawerFilters with title and description.
  */
-const DrawerFiltersHeader = ({ title, description, }) => {
-    return (jsxRuntime.jsxs("div", { className: "px-6 pt-10", children: [jsxRuntime.jsx(H2, { className: "text-xl font-semibold text-foreground mb-2", children: title }), jsxRuntime.jsx(P, { className: "text-default-500", children: description })] }));
+const DrawerFiltersHeader = ({ titleId, title, description, }) => {
+    return (jsxRuntime.jsxs("div", { className: "px-6 pt-10", children: [jsxRuntime.jsx(H2, { id: titleId, className: "text-xl font-semibold text-foreground mb-2", children: title }), jsxRuntime.jsx(P, { className: "text-default-500", children: description })] }));
 };
 
 const NO_YEAR_CLASS = "[&_[data-type='year']]:hidden [&_[data-type='literal']:has(+[data-type='year'])]:hidden";
@@ -12114,6 +14081,11 @@ const NumberFilter = ({ filter, value, onChange }) => {
  */
 const DrawerFilters = ({ isOpen, onOpenChange, config, onApplyFilters, onClearFilters, onCancel, className, translations, initialValues, }) => {
     const [filterValues, setFilterValues] = $8WNJc$react.useState(initialValues ?? {});
+    // Nombre accesible del panel: su título. Con `Drawer.Root`, el `DialogTrigger` nombraba el
+    // diálogo con el id de su disparador (que aquí no existe); sin root nadie lo nombra y
+    // react-aria avisa en cada apertura («A dialog must have a title for accessibility», medido en
+    // jsdom). Mismo arreglo que `headerId` en la fachada `Drawer`.
+    const titleId = $8WNJc$react.useId();
     // Handle changes in individual filters
     const handleFilterChange = $8WNJc$react.useCallback((filterKey, value) => {
         setFilterValues((prev) => ({
@@ -12226,9 +14198,16 @@ const DrawerFilters = ({ isOpen, onOpenChange, config, onApplyFilters, onClearFi
         onApplyFilters(processedFilters);
         onOpenChange(false);
     }, [filterValues, config.data, onApplyFilters, onOpenChange]);
-    return (jsxRuntime.jsx(react.Drawer, { children: jsxRuntime.jsx(react.Drawer.Backdrop, { isOpen: isOpen, onOpenChange: handleOpenChange, isDismissable: false, children: jsxRuntime.jsx(react.Drawer.Content, { placement: "right", className: react.cn("drawer-filters", className), children: jsxRuntime.jsxs(react.Drawer.Dialog, { className: "w-full p-0 sm:max-w-md", children: [jsxRuntime.jsx(react.Drawer.CloseTrigger, {}), jsxRuntime.jsx(DrawerFiltersHeader, { title: config.title, description: config.description }), jsxRuntime.jsx(react.Drawer.Body, { className: "px-6 py-10", children: jsxRuntime.jsx("div", { className: "space-y-3", children: config.data.map((filter) => {
-                                    return (jsxRuntime.jsx(FilterSection, { filter: filter, translations: translations, value: filterValues[filter.key], onChange: (value) => handleFilterChange(filter.key, value) }, filter.key));
-                                }) }) }), jsxRuntime.jsx(DrawerFiltersFooter, { onClearFilters: handleClearFilters, onCancel: handleCancel, onApplyFilters: handleApplyFilters, translations: translations })] }) }) }) }));
+    // Sin `Drawer.Root` (el `DialogTrigger` de react-aria) a propósito, igual que la fachada
+    // `Drawer` (`src/components/drawer/Drawer.tsx`): aquí no hay disparador —lo abre el `isOpen`
+    // de la app— y un `DialogTrigger` sin hijo pulsable avisa en consola en CADA montaje, abierto o
+    // cerrado («A PressResponder was rendered without a pressable child», medido en jsdom y por
+    // beweossmbs con la .140). `Drawer.Backdrop` (`ModalOverlay`) ya crea su propio estado de
+    // overlay con `isOpen`/`onOpenChange` y calcula todos los slots de `drawerVariants()`, así que
+    // el root no aportaba nada.
+    return (jsxRuntime.jsx(react.Drawer.Backdrop, { isOpen: isOpen, onOpenChange: handleOpenChange, isDismissable: false, children: jsxRuntime.jsx(react.Drawer.Content, { placement: "right", className: react.cn("drawer-filters", className), children: jsxRuntime.jsxs(react.Drawer.Dialog, { "aria-labelledby": titleId, className: "w-full p-0 sm:max-w-md", children: [jsxRuntime.jsx(react.Drawer.CloseTrigger, {}), jsxRuntime.jsx(DrawerFiltersHeader, { titleId: titleId, title: config.title, description: config.description }), jsxRuntime.jsx(react.Drawer.Body, { className: "px-6 py-10", children: jsxRuntime.jsx("div", { className: "space-y-3", children: config.data.map((filter) => {
+                                return (jsxRuntime.jsx(FilterSection, { filter: filter, translations: translations, value: filterValues[filter.key], onChange: (value) => handleFilterChange(filter.key, value) }, filter.key));
+                            }) }) }), jsxRuntime.jsx(DrawerFiltersFooter, { onClearFilters: handleClearFilters, onCancel: handleCancel, onApplyFilters: handleApplyFilters, translations: translations })] }) }) }));
 };
 DrawerFilters.displayName = "DrawerFilters";
 
@@ -13940,10 +15919,12 @@ const createCurrencyFormatter = (locale, currency, fractionDigits = 0) => {
     return (val) => formatter.format(val);
 };
 
+const ModalFacadeContext = $8WNJc$react.createContext({});
+
 // v2 no tiene prop `radius` en el diálogo del modal: v3 tampoco (eliminada, "usar Tailwind"), así
 // que se reimplementa vía className arbitrario — mismo criterio y mismos valores exactos que
 // Button/Card de F3.0 (RADIUS_CLASS).
-const RADIUS_CLASS$2 = {
+const RADIUS_CLASS$1 = {
     none: "rounded-none",
     sm: "rounded-[8px]",
     md: "rounded-[12px]",
@@ -14001,6 +15982,49 @@ const MAX_WIDTH_CLASS = {
  * `ModalContent` tenga que ser hijo directo de `Modal.Dialog`.
  */
 const ModalCloseContext = $8WNJc$react.createContext(() => { });
+/**
+ * Atributos que el `Dialog` de react-aria SÍ deja pasar a su `<section>`: `id`, `role` (vía
+ * `useDialog`), `data-*` y los cuatro "labelable" (`filterDOMProps(props, { labelable: true })`
+ * en `react-aria/dist/private/utils/filterDOMProps.mjs`). Estos van como props para que
+ * react-aria los vea — sobre todo `aria-label`/`aria-labelledby`, que deciden si avisa de un
+ * diálogo sin nombre.
+ */
+const LABELABLE_PROPS = new Set([
+    "aria-label",
+    "aria-labelledby",
+    "aria-describedby",
+    "aria-details",
+]);
+/**
+ * Reparte el resto de props de `Modal` entre las dos vías de llegada al diálogo. En v2 TODAS
+ * llegaban (`mergeProps(modalProps, otherProps, …)` sobre el `<section>`, sin filtrar); en v3 el
+ * `Dialog` filtra, así que un `aria-busy` se perdería en silencio si solo fuera como prop. Lo que
+ * no es `aria-*`/`data-*`/`id`/`role` se descarta: `ModalProps` no lo declara y v2 lo habría
+ * volcado al DOM con el aviso de React de atributo desconocido.
+ */
+const splitDialogDOMProps = (rest) => {
+    const dialogProps = {};
+    const extraAria = {};
+    for (const [key, value] of Object.entries(rest)) {
+        // Un `aria-labelledby={undefined}` explícito no debe borrar el nombre por defecto.
+        if (value === undefined) {
+            continue;
+        }
+        if (key === "id" ||
+            key === "role" ||
+            key.startsWith("data-") ||
+            LABELABLE_PROPS.has(key)) {
+            dialogProps[key] = value;
+        }
+        else if (key.startsWith("aria-")) {
+            extraAria[key] = value;
+        }
+    }
+    return {
+        dialogProps: dialogProps,
+        extraAria: extraAria,
+    };
+};
 /**
  * Modal - fachada BeweOS sobre el `Modal` compound de HeroUI v3.
  *
@@ -14008,15 +16032,16 @@ const ModalCloseContext = $8WNJc$react.createContext(() => { });
  * Dialog/Header/Body/Footer/CloseTrigger`, ver `upload-file/UploadFile.tsx` D-G1-7 y la guía
  * oficial `modal`). Esta fachada arma esa anatomía por dentro pero conserva la API PLANA de v2
  * (`isOpen`/`onOpenChange`/`onClose`/`size`/`radius`/`backdrop`/`scrollBehavior`/`placement`/
- * `isDismissable`/`hideCloseButton` + `<ModalContent>{(onClose) => ...}</ModalContent>`), para que
- * el código ya escrito en las 4 apps consumidoras siga funcionando sin cambios.
+ * `isDismissable`/`hideCloseButton` + `<ModalContent>{(onClose) => ...}</ModalContent>`), más
+ * `classNames` por slot y `aria-*`/`data-*`/`id`/`role` al diálogo, para que el código ya escrito
+ * en las 4 apps consumidoras siga funcionando sin cambios.
  *
  * Accesibilidad (criterio de aceptación de la issue, verificado con Playwright): el foco entra al
  * abrir, queda atrapado dentro del diálogo, Escape cierra (salvo `isKeyboardDismissDisabled`), el
  * foco vuelve al disparador al cerrar y la página no hace scroll por detrás — los cuatro los
  * gestiona react-aria-components internamente (`ModalOverlay`/`Dialog`), sin código propio.
  */
-const Modal = ({ isOpen, defaultOpen, onOpenChange, onClose, size = "md", radius = "lg", backdrop = "opaque", scrollBehavior = "normal", placement, isDismissable = true, isKeyboardDismissDisabled = false, hideCloseButton = false, className, children, }) => {
+const Modal = ({ isOpen, defaultOpen, onOpenChange, onClose, size = "md", radius = "lg", backdrop = "opaque", scrollBehavior = "normal", placement, isDismissable = true, isKeyboardDismissDisabled = false, hideCloseButton = false, className, classNames, children, ...rest }) => {
     // v2 aceptaba `onClose` además de `onOpenChange` y lo llamaba en cada cierre; v3 solo conoce
     // `onOpenChange`. Sin este puente, un modal controlado con `isOpen` + `onClose` (el patrón
     // v2 dominante en las apps: ~118 usos en beweossmbs frente a 8 de `onOpenChange`) no se
@@ -14034,23 +16059,93 @@ const Modal = ({ isOpen, defaultOpen, onOpenChange, onClose, size = "md", radius
             onClose?.();
         }
     };
-    return (jsxRuntime.jsx(react.Modal, { children: jsxRuntime.jsx(react.Modal.Backdrop, { isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: handleOpenChange, variant: backdrop, isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, children: jsxRuntime.jsx(react.Modal.Container, { size: SIZE_MAP[size], placement: placement, scroll: scrollBehavior === "inside" ? "inside" : undefined, children: jsxRuntime.jsx(react.Modal.Dialog, { className: react.cn(RADIUS_CLASS$2[radius], size !== "full" && MAX_WIDTH_CLASS[size], "px-6 py-9", className), children: ({ close }) => (jsxRuntime.jsxs(ModalCloseContext.Provider, { value: close, children: [!hideCloseButton && jsxRuntime.jsx(react.Modal.CloseTrigger, {}), children] })) }) }) }) }));
+    // v2 nombraba el diálogo con su cabecera (`aria-labelledby` = id del `ModalHeader`,
+    // `getDialogProps` de `@heroui/modal@2.2.19`); en v3 solo lo hace `Modal.Heading`, que las apps
+    // no usan. Mismo arreglo que `Drawer`: `ModalHeader` pone este id en su nodo.
+    //
+    // Si el consumidor trae su propio `aria-label`/`aria-labelledby` (3 `<Modal>` de beweossmbs,
+    // p. ej. `create-note-modal`), manda el suyo. Aquí v3 mejora a v2: v2 escribía
+    // `aria-labelledby` DESPUÉS del spread, así que pisaba siempre el del consumidor.
+    const headerId = $8WNJc$react.useId();
+    // Props de `ModalContent` (registradas desde dentro del diálogo, ver `ModalContent.tsx`). En
+    // v2 `ModalContent` era el diálogo: `getDialogProps(mergeProps(dialogProps, otherProps))`
+    // (`@heroui/modal@2.2.19`, `chunk-UKDXCIYN.mjs`), y dentro de `getDialogProps`
+    // (`chunk-Z2LRST4N.mjs`):
+    //   - atributos: `mergeProps(modalProps, <resto de Modal>, <props de ModalContent>)` →
+    //     ModalContent gana a Modal;
+    //   - clase: `slots.base({ class: clsx(clsx(classNames.base, className), content.className) })`
+    //     → fachada (tv) < `classNames.base` < `className` de Modal < `className` de ModalContent,
+    //     con `twMerge`. Es el orden del `cn` de abajo.
+    const [content, setContent] = $8WNJc$react.useState({});
+    const registerContentProps = $8WNJc$react.useCallback((props) => setContent(props ?? {}), []);
+    const { className: contentClassName, ...contentRest } = content;
+    const { dialogProps, extraAria } = splitDialogDOMProps({
+        ...rest,
+        ...contentRest,
+    });
+    const hasOwnName = dialogProps["aria-label"] !== undefined ||
+        dialogProps["aria-labelledby"] !== undefined;
+    const hasExtraAria = Object.keys(extraAria).length > 0;
+    // Sin `Modal.Root` (el `DialogTrigger` de react-aria) a propósito, igual que `Drawer`: la
+    // fachada no tiene disparador propio —la abre el `isOpen` de la app— y un `DialogTrigger`
+    // sin hijo pulsable avisaba en consola en CADA montaje («A PressResponder was rendered
+    // without a pressable child», medido en jsdom: 9 avisos en `Modal.onClose.test.tsx`).
+    // `Modal.Backdrop` (`ModalOverlay`) ya crea y publica su propio estado de overlay con
+    // `isOpen`/`onOpenChange` —el que usan la X y el `close` del render-prop— y calcula todos los
+    // slots de `modalVariants()` aunque no haya root encima; el root solo aportaba ese aviso y un
+    // `aria-labelledby` de reserva que apuntaba al id de un disparador que no existe.
+    return (jsxRuntime.jsx(react.Modal.Backdrop, { isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: handleOpenChange, variant: backdrop, isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, 
+        // v2 `classNames.backdrop` → la capa que oscurece la página. Utilidad en
+        // `@layer utilities`, gana a `.modal__backdrop--opaque` (`@layer components`).
+        className: classNames?.backdrop, children: jsxRuntime.jsx(react.Modal.Container, { size: SIZE_MAP[size], placement: placement, scroll: scrollBehavior === "inside" ? "inside" : undefined, 
+            // v2 `classNames.wrapper` (el `div` que posiciona el diálogo, `data-slot="wrapper"`)
+            // es el `Modal.Container` de v3: su `p-4 sm:p-10` es lo que pisa un `wrapper="p-0"`.
+            className: classNames?.wrapper, children: jsxRuntime.jsx(react.Modal.Dialog, { ...(hasOwnName ? {} : { "aria-labelledby": headerId }), ...dialogProps, 
+                // Los `aria-*` que react-aria filtra (`aria-busy`…) entran por el `render` del
+                // `<section>`: van ANTES de sus props, así que `role`/`aria-modal`/`tabIndex`
+                // de react-aria no se pueden pisar por esta vía.
+                render: hasExtraAria
+                    ? (sectionProps) => jsxRuntime.jsx("section", { ...extraAria, ...sectionProps })
+                    : undefined, className: react.cn(RADIUS_CLASS$1[radius], size !== "full" && MAX_WIDTH_CLASS[size], "px-6 py-9", classNames?.base, className, contentClassName), children: ({ close }) => (jsxRuntime.jsx(ModalDialogBody, { close: close, headerId: headerId, classNames: classNames, registerContentProps: registerContentProps, hideCloseButton: hideCloseButton, children: children })) }) }) }));
+};
+/** Aísla el `useMemo` del valor de contexto (el render-prop de `Dialog` no puede usar hooks). */
+const ModalDialogBody = ({ close, headerId, classNames, registerContentProps, hideCloseButton, children, }) => {
+    const value = $8WNJc$react.useMemo(() => ({ headerId, classNames, registerContentProps }), [headerId, classNames, registerContentProps]);
+    return (jsxRuntime.jsx(ModalCloseContext.Provider, { value: close, children: jsxRuntime.jsxs(ModalFacadeContext.Provider, { value: value, children: [!hideCloseButton && (jsxRuntime.jsx(react.Modal.CloseTrigger, { className: classNames?.closeButton })), children] }) }));
 };
 
+/**
+ * Clave estable de las props registradas: solo primitivos (`className`, `aria-*`, `data-*`…), así
+ * que basta con serializarlas. Evita re-registrar —y re-renderizar el `Modal`— en cada render.
+ */
+const keyOf = (props) => JSON.stringify(Object.entries(props)
+    .filter(([, value]) => value !== undefined)
+    .sort(([a], [b]) => (a < b ? -1 : 1)));
 /**
  * `ModalContent` de v2 no sobrevive en v3 (compound: `Modal.Container`/`Modal.Dialog`, ver D-G1-7
- * / D-F2-3). Este componente NO es un wrapper de ningún compound v3 — es puro azúcar de
- * compatibilidad: envuelve sus `children` (que ya se renderizan dentro de `Modal.Dialog`, ver
- * `Modal.tsx`) y, si `children` es una función, la invoca con el `close` real del diálogo (vía
- * contexto) para que el patrón v2 `{(onClose) => <>...</>}` siga funcionando tal cual.
+ * / D-F2-3). Este componente NO es un wrapper de ningún compound v3 — es azúcar de
+ * compatibilidad: sus `children` ya se renderizan dentro de `Modal.Dialog` (ver `Modal.tsx`) y, si
+ * `children` es una función, la invoca con el `close` real del diálogo (vía contexto) para que el
+ * patrón v2 `{(onClose) => <>...</>}` siga funcionando tal cual.
+ *
+ * Sus demás props (`className`, `aria-busy`, `data-*`…) NO se pintan aquí: en v2 `ModalContent`
+ * era el propio diálogo, así que se registran en el `Modal` y este las aplica al `role="dialog"`
+ * (antes caían en un `<div>` intermedio y, p. ej., el `h-[95vh] p-0 rounded-2xl` de
+ * `chatbot-config` no llegaba al diálogo). Sin props no se registra nada: el render es el mismo.
  */
-function ModalContent({ children, className }) {
+function ModalContent({ children, ...dialogProps }) {
     const close = $8WNJc$react.useContext(ModalCloseContext);
-    const content = typeof children === "function" ? children(close) : children;
-    if (!className) {
-        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: content });
-    }
-    return jsxRuntime.jsx("div", { className: className, children: content });
+    const { registerContentProps } = $8WNJc$react.useContext(ModalFacadeContext);
+    const key = keyOf(dialogProps);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: `key` resume `dialogProps` (primitivos); depender del objeto re-registraría en cada render.
+    $8WNJc$react.useLayoutEffect(() => {
+        if (!registerContentProps || key === "[]") {
+            return;
+        }
+        registerContentProps(dialogProps);
+        return () => registerContentProps(undefined);
+    }, [registerContentProps, key]);
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: typeof children === "function" ? children(close) : children });
 }
 
 /**
@@ -14062,9 +16157,23 @@ function ModalContent({ children, className }) {
  * era una fila sin gap.
  *
  * El `className` del consumidor se mezcla con `cn` (tailwind-merge), así que sigue
- * ganando: `<ModalHeader className="flex flex-col gap-1">` mantiene su columna.
+ * ganando: `<ModalHeader className="flex flex-col gap-1">` mantiene su columna. El slot
+ * `classNames.header` del `<Modal>` se aplica entre medias (gana a la fachada, pierde con el
+ * `className`), y el nodo lleva el `id` que nombra el diálogo, como en v2.
  */
-const ModalHeader = ({ className, ...props }) => (jsxRuntime.jsx(react.ModalHeader, { ...props, className: react.cn("flex-row gap-0 px-6 py-4 text-lg font-semibold", className) }));
+const ModalHeader = ({ className, ...props }) => {
+    const { headerId, classNames } = $8WNJc$react.useContext(ModalFacadeContext);
+    return (jsxRuntime.jsx(react.ModalHeader
+    // Nombra el diálogo (`aria-labelledby`, ver `Modal.tsx`). Va antes del spread: un `id`
+    // propio del consumidor gana, igual que en v2 (`id: headerId, ...otherProps`).
+    , { 
+        // Nombra el diálogo (`aria-labelledby`, ver `Modal.tsx`). Va antes del spread: un `id`
+        // propio del consumidor gana, igual que en v2 (`id: headerId, ...otherProps`).
+        id: headerId, ...props, className: react.cn("flex-row gap-0 px-6 py-4 text-lg font-semibold", 
+        // v2 `classNames.header` del `<Modal>`; el `className` propio gana
+        // (`clsx(classNames.header, className)` en `@heroui/modal@2.2.19`).
+        classNames?.header, className) }));
+};
 ModalHeader.displayName = "ModalHeader";
 
 /**
@@ -14082,6 +16191,7 @@ ModalHeader.displayName = "ModalHeader";
  */
 const BODY_V2_GEOMETRY$1 = "mx-0 mt-0 flex flex-1 flex-col gap-3 px-6 py-2";
 const ModalBody = $8WNJc$react.forwardRef(({ className, ...props }, forwardedRef) => {
+    const { classNames } = $8WNJc$react.useContext(ModalFacadeContext);
     const nodeRef = $8WNJc$react.useRef(null);
     const callbackRef = $8WNJc$react.useCallback((node) => {
         nodeRef.current = node;
@@ -14227,7 +16337,10 @@ const ModalBody = $8WNJc$react.forwardRef(({ className, ...props }, forwardedRef
             track.remove();
         };
     }, []);
-    return (jsxRuntime.jsx(react.ModalBody, { ref: callbackRef, ...props, className: react.cn(BODY_V2_GEOMETRY$1, className) }));
+    return (jsxRuntime.jsx(react.ModalBody, { ref: callbackRef, ...props, 
+        // v2 `classNames.body` del `<Modal>` entre la geometría y el `className` propio,
+        // que gana (`clsx(classNames.body, className)` en `@heroui/modal@2.2.19`).
+        className: react.cn(BODY_V2_GEOMETRY$1, classNames?.body, className) }));
 });
 ModalBody.displayName = "ModalBody";
 
@@ -14238,7 +16351,13 @@ ModalBody.displayName = "ModalBody";
  * `.modal__body + .modal__footer { mt-5 }` que v2 no tenía (v2 separaba los slots solo
  * con su propio padding) — de ahí el `mt-0`.
  */
-const ModalFooter = ({ className, ...props }) => (jsxRuntime.jsx(react.ModalFooter, { ...props, className: react.cn("mt-0 px-6 py-4", className) }));
+const ModalFooter = ({ className, ...props }) => {
+    const { classNames } = $8WNJc$react.useContext(ModalFacadeContext);
+    return (jsxRuntime.jsx(react.ModalFooter, { ...props, 
+        // v2 `classNames.footer` del `<Modal>` entre la fachada y el `className` propio, que
+        // gana (`clsx(classNames.footer, className)` en `@heroui/modal@2.2.19`).
+        className: react.cn("mt-0 px-6 py-4", classNames?.footer, className) }));
+};
 ModalFooter.displayName = "ModalFooter";
 
 const DrawerFacadeContext = $8WNJc$react.createContext({
@@ -14472,7 +16591,7 @@ const COLOR_BY_STATUS = {
 };
 // v3 usa `min(32px, var(--radius-3xl))`; v2 `radius="md"` = `rounded-medium` = 12px. Mismos
 // valores EXACTOS que Button/Card/Chip (los `rounded-md`/`lg` de Tailwind son 6/8px, no 12/14).
-const RADIUS_CLASS$1 = {
+const RADIUS_CLASS = {
     none: "rounded-none",
     sm: "rounded-[8px]",
     md: "rounded-[12px]",
@@ -14627,7 +16746,7 @@ function slotClasses(variant, color) {
 }
 // Los subcomponentes compound de v3, adjuntos como estáticos (`Alert.Indicator`…) para que el JSX
 // v3 (loginos ya migró el suyo) siga compilando y renderizando IGUAL que contra el `Alert` crudo.
-const COMPOUND_PARTS$1 = new Set([
+const COMPOUND_PARTS = new Set([
     react.Alert.Indicator,
     react.Alert.Content,
     react.Alert.Title,
@@ -14639,8 +16758,8 @@ const COMPOUND_PARTS$1 = new Set([
  * hiciera, saldrían dos indicadores). `<Alert>Texto</Alert>` (sin partes compound) sigue siendo
  * API v2: children bajo la descripción, con icono y círculo, como en v2.
  */
-function hasCompoundChildren$1(children) {
-    return $8WNJc$react.Children.toArray(children).some((child) => $8WNJc$react.isValidElement(child) && COMPOUND_PARTS$1.has(child.type));
+function hasCompoundChildren(children) {
+    return $8WNJc$react.Children.toArray(children).some((child) => $8WNJc$react.isValidElement(child) && COMPOUND_PARTS.has(child.type));
 }
 /** `isEmpty` de v2 (`@heroui/shared-utils`): null/undefined/"" no cuentan como contenido. */
 function hasValue$1(node) {
@@ -14670,7 +16789,7 @@ const AlertFacade = ({ color, status, variant = "flat", radius = "md", title, de
     if (!isVisible) {
         return null;
     }
-    if (hasCompoundChildren$1(children)) {
+    if (hasCompoundChildren(children)) {
         return (jsxRuntime.jsx(react.Alert, { ...rest, status: effectiveStatus, className: react.cn(classNames?.base, className), children: children }));
     }
     const handleClose = () => {
@@ -14690,7 +16809,7 @@ const AlertFacade = ({ color, status, variant = "flat", radius = "md", title, de
         // Base v2: `flex flex-grow flex-row w-full items-start py-3 px-4 gap-x-1`. v3 ya trae
         // flex/w-full/items-start/px-4/py-3; se repone el `gap-x-1` (v3: `gap-4`), se quita el
         // `shadow-surface` (v2 no tenía sombra en el base) y se aplica variant/radius.
-        className: react.cn("grow gap-x-1 shadow-none", slots.base, RADIUS_CLASS$1[radius], hideIconWrapper && "gap-x-0", classNames?.base, className), children: [startContent, !hideIcon && (jsxRuntime.jsx(react.Alert.Indicator, { className: react.cn(ICON_WRAPPER_BASE, 
+        className: react.cn("grow gap-x-1 shadow-none", slots.base, RADIUS_CLASS[radius], hideIconWrapper && "gap-x-0", classNames?.base, className), children: [startContent, !hideIcon && (jsxRuntime.jsx(react.Alert.Indicator, { className: react.cn(ICON_WRAPPER_BASE, 
                 // v2 `hideIconWrapper`: `!bg-transparent !shadow-none !border-none` — se omiten
                 // las clases teñidas en vez de pisarlas, porque `bg-transparent` no borraría el
                 // `dark:bg-*` (grupo distinto para tailwind-merge).
@@ -14717,181 +16836,82 @@ const Alert = Object.assign(AlertFacade, {
     Description: react.Alert.Description,
 });
 
-// TECH-2459 — Fachada `Checkbox` (hallazgo loginos 07-sep: `index.tsx` reexportaba el `Checkbox`
-// CRUDO de v3, así que el JSX v2 de las apps — `isSelected` + `onValueChange` dentro de `Controller`
-// de RHF en backoffice ×12, smbs ×23, agency ×5 — no compilaba pese a existir el símbolo).
-//
-// HeroUI v3 convierte el Checkbox en compound (`Checkbox.Content` > `Checkbox.Control` >
-// `Checkbox.Indicator` + la etiqueta como children de `Content`), renombra `onValueChange` →
-// `onChange` y ELIMINA `color`, `size`, `radius`, `lineThrough`, `icon`, `classNames` y
-// `disableAnimation` (guía oficial `checkbox`). Su único eje propio es `variant`
-// (`primary`/`secondary`), que NO es un color: `secondary` es un tratamiento gris de menor énfasis
-// — el falso amigo de siempre (skill `auraui-design-tokens`).
-//
-// Esta fachada compone el compound por dentro y repone cada prop v2 con los literales del `tv`
-// de v2 (`@heroui/theme@2.4.15` → `dist/components/checkbox.js`), traducidos a utilidades de
-// Tailwind 4 sobre los tokens de Aurora. El relleno del estado marcado en v3 es el `::before` del
-// control (`bg-accent`, = `--color-primary` vía F1), así que `color` se reimplementa pisando ese
-// pseudo-elemento con `before:bg-<color>` — utilidad (capa `utilities`) que gana a la regla de
-// `checkbox.css` (capa `components`), incluida la de hover (`bg-accent-hover`).
-//
-// ⚠️ Estados de react-aria, verificados en el navegador contra `checkbox.css`: `data-selected`/
-// `data-indeterminate`/`data-invalid`/`data-disabled` viven en la RAÍZ (`.checkbox`);
-// `data-hovered`/`data-pressed`/`data-focus-visible` en `[data-slot="checkbox-content"]`. Por
-// eso hay dos grupos con nombre (`group/checkbox`, `group/content`) y NUNCA `data-[hover=true]`
-// (trampa 3 de la skill: v2 escribía `data-hover`; react-aria escribe `data-hovered`).
-/**
- * Relleno del estado marcado (`::before` del control) y del indeterminado (fondo del control)
- * por color. `primary` no pisa nada: el `bg-accent` de v3 YA es `--color-primary`. `default`
- * usa el gris de Aurora (`--color-default`, = v2), nunca el `--default` crudo de v3 (D-F1-3).
- *
- * Literal v2: `after:bg-<color> after:text-<color>-foreground text-<color>-foreground`.
- */
-const CONTROL_COLOR = {
-    primary: "",
-    default: "before:bg-default group-data-[indeterminate=true]/checkbox:bg-default",
-    secondary: "before:bg-secondary group-data-[indeterminate=true]/checkbox:bg-secondary",
-    success: "before:bg-success group-data-[indeterminate=true]/checkbox:bg-success",
-    warning: "before:bg-warning group-data-[indeterminate=true]/checkbox:bg-warning",
-    danger: "before:bg-danger group-data-[indeterminate=true]/checkbox:bg-danger",
-};
-/**
- * Color del glifo (check / línea). v3 lo fija en el SVG (`[data-slot="checkbox-default-indicator--
- * checkmark"] { text-accent-foreground }`), así que hay que alcanzar al SVG, no al indicador.
- */
-const INDICATOR_COLOR = {
-    primary: "",
-    default: "[&_svg]:text-default-foreground",
-    secondary: "[&_svg]:text-secondary-foreground",
-    success: "[&_svg]:text-success-foreground",
-    warning: "[&_svg]:text-warning-foreground",
-    danger: "[&_svg]:text-danger-foreground",
-};
-// v2 (`checkbox.js`, variante `size`): wrapper `w-4/w-5/w-6` (16/20/24px), label
-// `text-small/medium/large`, icon `w-3 h-2` / `w-4 h-3` / `w-5 h-4`. v3: control `size-4`, glifo
-// `size-2.5`, texto `text-sm`, para todos.
-const CONTROL_SIZE = {
-    sm: "size-4",
-    md: "size-5",
-    lg: "size-6",
-};
-const INDICATOR_SIZE = {
-    sm: "size-3 [&_svg]:size-2.5",
-    md: "size-3.5 [&_svg]:size-3",
-    lg: "size-4 [&_svg]:size-3.5",
-};
-const LABEL_SIZE = {
-    sm: "text-sm",
-    md: "text-base",
-    lg: "text-lg",
-};
-// v2: `rounded-[calc(theme(borderRadius.medium)*K)]` con `medium` = 12px → 6 / 7.2 / 8.4 px, y por
-// defecto el radio lo decidía `size` (sm→0.5, md→0.6, lg→0.7). El `::before` (relleno) lleva el
-// mismo radio porque aquí cubre el border-box completo (ver `CONTROL_BASE`).
-const RADIUS_CLASS = {
-    none: "rounded-none before:rounded-none",
-    sm: "rounded-[6px] before:rounded-[6px]",
-    md: "rounded-[7.2px] before:rounded-[7.2px]",
-    lg: "rounded-[8.4px] before:rounded-[8.4px]",
-    full: "rounded-full before:rounded-full",
-};
-const RADIUS_BY_SIZE = {
-    sm: "sm",
-    md: "md",
-    lg: "lg",
-};
-/**
- * Caja del control (slot `wrapper` de v2): borde de 2px en `--color-default` sin sombra
- * (`before:border-2 before:border-default`), y el relleno cubriendo la caja ENTERA al marcarse.
- *
- * En v3 el borde vive en el propio control (1px, `border-field-border`, `shadow-field`) y el
- * relleno es un `::before` a `inset-0`, que solo alcanza al padding-box: por eso v3 pone
- * `border-transparent` al marcarse y el relleno queda 1px por dentro. Con el borde de 2px de v2
- * eso dejaría un anillo de 2px: se lleva el `::before` al border-box (`-inset-0.5` = −2px) y se
- * quita el `overflow-hidden` de v3 para que no lo recorte. El `::before` es un descendiente
- * posicionado, así que pinta ENCIMA del borde y lo tapa, como el `after` de v2.
- *
- * Hover v2: `group-data-[hover=true]:before:bg-default-100` — tinte suave de la caja sin marcar
- * (en v3 la caja es el fondo del control, no un pseudo). `data-hovered` lo emite `Checkbox.Content`.
- *
- * Indeterminado: v3 pinta el fondo del control (dentro del borde). Se enciende también el
- * `::before` para que el relleno cubra la caja entera, igual que al marcar.
- */
-const CONTROL_BASE = [
-    "border-2 border-default shadow-none overflow-visible",
-    "before:-inset-0.5",
-    "group-data-[hovered=true]/content:bg-default-100",
-    "group-data-[indeterminate=true]/checkbox:before:scale-100",
-    "group-data-[indeterminate=true]/checkbox:before:opacity-100",
-].join(" ");
-// v2 (`lineThrough: true`, slot `label`): la raya crece de 0 al 100% al marcarse y la etiqueta se
-// atenúa al 60%. `data-selected` está en la raíz → `group-data-[…]/checkbox`.
-const LINE_THROUGH = [
-    "inline-flex items-center justify-center",
-    "before:absolute before:h-0.5 before:w-0 before:bg-foreground before:content-['']",
-    "group-data-[selected=true]/checkbox:opacity-60",
-    "group-data-[selected=true]/checkbox:before:w-full",
-].join(" ");
-// Los subcomponentes compound de v3, adjuntos como estáticos para que la API v3 siga funcionando
-// a través de la fachada (`<Checkbox><Checkbox.Control>…`).
-const COMPOUND_PARTS = new Set([
-    react.Checkbox.Control,
-    react.Checkbox.Indicator,
-    react.Checkbox.Content,
-]);
-/** API compound de v3 detectada por hijos directos: la fachada no envuelve nada. */
-function hasCompoundChildren(children) {
-    return $8WNJc$react.Children.toArray(children).some((child) => $8WNJc$react.isValidElement(child) && COMPOUND_PARTS.has(child.type));
-}
-/**
- * Checkbox - Casilla basada en HeroUI v3 con la API pública de v2 intacta (TECH-2459).
- *
- * - **API v2**: `children` como etiqueta, `isSelected`/`defaultSelected` + `onValueChange`
- *   (también `onChange`), `color`, `size`, `radius`, `lineThrough`, `icon`, `classNames`. Funciona
- *   dentro de `Controller` de react-hook-form (`isSelected={value} onValueChange={onChange}`).
- * - **API compound v3**: si los children traen `Checkbox.Control`/`Indicator`/`Content`, pasa tal
- *   cual a la raíz de HeroUI (con `onValueChange` seguido igualmente).
- */
-const CheckboxFacade = ({ children, onChange, onValueChange, color = "primary", size = "md", radius, lineThrough = false, icon, disableAnimation = false, isInvalid, classNames, className, ...rest }) => {
-    const handleChange = (isSelected) => {
-        onChange?.(isSelected);
-        onValueChange?.(isSelected);
+const OMIT$1 = new Set(["children", "className", "type"]);
+const CONCAT = new Set(["aria-describedby", "aria-labelledby"]);
+function mergeRefs$1(...refs) {
+    return (value) => {
+        for (const ref of refs) {
+            if (typeof ref === "function") {
+                ref(value);
+            }
+            else if (ref) {
+                ref.current = value;
+            }
+        }
     };
-    if (hasCompoundChildren(children)) {
-        return (jsxRuntime.jsx(react.Checkbox, { ...rest, isInvalid: isInvalid, onChange: handleChange, className: react.cn(classNames?.base, className), children: children }));
+}
+function mergeTriggerProps$1(trigger, child) {
+    const merged = { ...trigger, ...child };
+    for (const key of Object.keys(trigger)) {
+        const a = trigger[key];
+        const b = child[key];
+        if (/^on[A-Z]/.test(key) &&
+            typeof a === "function" &&
+            typeof b === "function") {
+            merged[key] = (...args) => {
+                a(...args);
+                b(...args);
+            };
+        }
+        else if (CONCAT.has(key) && a && b) {
+            merged[key] = `${a} ${b}`;
+        }
+        else if (b === undefined) {
+            merged[key] = a;
+        }
     }
-    const indicatorContent = typeof icon === "function"
-        ? (state) => icon({
-            isSelected: state.isSelected,
-            isIndeterminate: state.isIndeterminate,
-            isDisabled: state.isDisabled,
-        })
-        : icon;
-    const hasLabel = children !== undefined && children !== null && children !== false;
-    return (jsxRuntime.jsx(react.Checkbox, { ...rest, isInvalid: isInvalid, onChange: handleChange, 
-        // Base v2: `group relative max-w-fit inline-flex items-center justify-start cursor-pointer
-        // p-2 -m-2 select-none` (el `p-2 -m-2` es el área de pulsado ampliada de v2). v3
-        // (`.checkbox`) usa `flex flex-col items-start` para apilar `Description`/`FieldError`,
-        // slots que esta fachada no renderiza; en **inline** la caja participa de la línea de
-        // texto, donde la esperan los consumidores (mismo criterio que la fachada `Switch`).
-        className: react.cn("group/checkbox relative -m-2 inline-flex max-w-fit flex-row items-center p-2", classNames?.base, className), children: jsxRuntime.jsxs(react.Checkbox.Content, { className: "group/content gap-2 font-normal", children: [jsxRuntime.jsx(react.Checkbox.Control, { className: react.cn(CONTROL_BASE, CONTROL_SIZE[size], RADIUS_CLASS[radius ?? RADIUS_BY_SIZE[size]], CONTROL_COLOR[color], 
-                    // v2 `isInvalid`: `before:border-danger` (el borde vivía en el pseudo).
-                    isInvalid && "border-danger", disableAnimation && "transition-none before:transition-none", classNames?.wrapper), children: jsxRuntime.jsx(react.Checkbox.Indicator, { className: react.cn(INDICATOR_SIZE[size], INDICATOR_COLOR[color], disableAnimation && "[&_svg]:transition-none", classNames?.icon), children: indicatorContent }) }), hasLabel && (
-                // Slot `label` de v2: `relative text-foreground select-none` + tamaño de texto.
-                // `data-slot="label"` para que las reglas de cursor/selección de `.checkbox` de v3
-                // le alcancen igual que a un `<Label>`.
-                jsxRuntime.jsx("span", { "data-slot": "label", className: react.cn("relative select-none text-foreground", LABEL_SIZE[size], lineThrough && LINE_THROUGH, isInvalid && "text-danger", classNames?.label), children: children }))] }) }));
-};
-CheckboxFacade.displayName = "Aurora.Checkbox";
+    return merged;
+}
+/** ¿Se puede clonar como trigger? Un único elemento que no sea Fragment. */
+function isClonableTriggerChild(children) {
+    return $8WNJc$react.isValidElement(children) && children.type !== $8WNJc$react.Fragment;
+}
 /**
- * `Checkbox` de Aurora: fachada v2 + estáticos compound de v3 (`Checkbox.Control`,
- * `Checkbox.Indicator`, `Checkbox.Content`), los mismos objetos que exporta `@heroui/react`.
+ * `render` para `Dropdown.Trigger`: clona las props resueltas del `<button>` de v3 sobre `child`.
+ * `triggerClassName` es el `className` que la app puso en el propio `DropdownTrigger`.
  */
-const Checkbox = Object.assign(CheckboxFacade, {
-    Control: react.Checkbox.Control,
-    Indicator: react.Checkbox.Indicator,
-    Content: react.Checkbox.Content,
-});
+function renderDropdownTrigger(child, triggerClassName) {
+    return (buttonProps) => {
+        const { ref, ...rest } = buttonProps;
+        const triggerProps = {};
+        for (const [key, value] of Object.entries(rest)) {
+            if (OMIT$1.has(key) || key.startsWith("data-")) {
+                continue;
+            }
+            triggerProps[key] = value;
+        }
+        const hostTag = typeof child.type === "string" ? child.type : null;
+        if (hostTag === "button") {
+            triggerProps.type = rest.type;
+        }
+        else if (hostTag && hostTag !== "a") {
+            triggerProps.role = "button";
+            triggerProps.tabIndex = 0;
+        }
+        const childRef = (Number.parseInt($8WNJc$react.version, 10) < 19
+            ? child.ref
+            : child.props.ref);
+        const childClass = child.props.className;
+        const className = triggerClassName && typeof childClass !== "function"
+            ? react.cn(triggerClassName, childClass)
+            : childClass;
+        return $8WNJc$react.cloneElement(child, {
+            ...mergeTriggerProps$1(triggerProps, child.props),
+            ...(className === undefined ? {} : { className }),
+            ref: mergeRefs$1(childRef, ref),
+        });
+    };
+}
 
 // TECH-2459 — Fachada `Dropdown` / `DropdownSection`: repone la CABECERA DE SECCIÓN que la
 // migración a v3 dejó sin vía legal desde una app.
@@ -15033,15 +17053,153 @@ const OWN_POPOVER = new Set([
 function isPart$1(node, parts) {
     return $8WNJc$react.isValidElement(node) && parts.has(node.type);
 }
-const DropdownFacade = ({ children, ...props }) => {
-    const nodes = $8WNJc$react.Children.toArray(children);
+function isFragment(node) {
+    return $8WNJc$react.isValidElement(node) && node.type === $8WNJc$react.Fragment;
+}
+/**
+ * `Children.toArray` aplana arrays pero NO Fragments (un `<>…</>` cuenta como UN nodo). Esto baja
+ * por ellos, y prefija la `key` de cada hijo con la del Fragment para que dos Fragments hermanos
+ * no produzcan claves repetidas (`toArray` numera cada nivel desde `.0`).
+ */
+function flatten(children, prefix = "") {
+    return $8WNJc$react.Children.toArray(children).flatMap((node) => {
+        if (isFragment(node)) {
+            return flatten(node.props.children, `${prefix}${String(node.key)}`);
+        }
+        if (prefix && $8WNJc$react.isValidElement(node)) {
+            return [$8WNJc$react.cloneElement(node, { key: `${prefix}${String(node.key)}` })];
+        }
+        return [node];
+    });
+}
+/**
+ * Mapea el árbol conservando su forma: atraviesa Fragments (se reconstruyen con sus hijos
+ * mapeados) y aplica `fn` al resto de nodos. Para el caso en el que el popover es del consumidor:
+ * no hay que mover nada de sitio, solo completar props.
+ */
+function mapTree(children, fn) {
+    return $8WNJc$react.Children.toArray(children).map((node) => isFragment(node)
+        ? $8WNJc$react.cloneElement(node, undefined, ...mapTree(node.props.children, fn))
+        : fn(node));
+}
+/**
+ * Traducción de colocación v2 → v3, copiada del oráculo, no deducida: `@heroui/aria-utils@2.2.29`
+ * → `dist/chunk-WQVQ7P2I.mjs:53-69` (`toReactAriaPlacement`), que es lo que el `Popover` de v2
+ * hacía con la prop antes de dársela a react-aria. Ojo a los laterales: `left-start` NO es
+ * `"left start"` (no existe en react-aria) sino `"left top"`.
+ */
+const V2_TO_V3_PLACEMENT = {
+    top: "top",
+    bottom: "bottom",
+    left: "left",
+    right: "right",
+    "top-start": "top start",
+    "top-end": "top end",
+    "bottom-start": "bottom start",
+    "bottom-end": "bottom end",
+    "left-start": "left top",
+    "left-end": "left bottom",
+    "right-start": "right top",
+    "right-end": "right bottom",
+};
+/** v2 → v3; lo que ya viene en sintaxis de v3 pasa tal cual. */
+function toV3Placement(placement) {
+    return (V2_TO_V3_PLACEMENT[placement] ??
+        placement);
+}
+/** Solo las claves que el consumidor escribió: `undefined` no pisa nada. */
+function definedOnly(values) {
+    return Object.fromEntries(Object.entries(values).filter(([, value]) => value !== undefined));
+}
+/**
+ * `closeOnSelect` de v2 → `shouldCloseOnSelect` del `Menu` de v3. Precedencia, la de v2
+ * (`@heroui/dropdown@2.3.32` → `dist/chunk-HT5XYLWZ.mjs`, `getCloseOnSelect`): lo del menú gana a
+ * lo del root. Del menú se lee `shouldCloseOnSelect` (v3) y, si no, `closeOnSelect` (v2: 6 de los
+ * 20 `<DropdownMenu>` de beweossmbs lo escriben en el MENÚ, no en el root, y el `Menu` de v3 lo
+ * ignora — sin esto, un multiselect se cerraba en cada clic). El `closeOnSelect` se retira del
+ * elemento: v3 no lo conoce.
+ */
+function withCloseOnSelect(node, rootCloseOnSelect) {
+    if (!isPart$1(node, INSIDE_POPOVER)) {
+        return node;
+    }
+    const menu = node;
+    const { closeOnSelect, shouldCloseOnSelect } = menu.props;
+    const resolved = shouldCloseOnSelect ?? closeOnSelect ?? rootCloseOnSelect;
+    if (resolved === undefined && !("closeOnSelect" in menu.props)) {
+        return node;
+    }
+    const { closeOnSelect: _dropped, ...rest } = menu.props;
+    return $8WNJc$react.createElement(menu.type, {
+        ...rest,
+        key: menu.key,
+        shouldCloseOnSelect: resolved,
+    });
+}
+/**
+ * `<DropdownTrigger><Button/></DropdownTrigger>` de v2 → UN botón, el de la app, con las props del
+ * trigger de v3 clonadas encima vía su `render` (ver `_internal/renderTrigger.tsx`). Sin esto v3
+ * pinta dos `<button>` anidados. Se deja el trigger de v3 tal cual si el consumidor ya pasa su
+ * propio `render`, o si el hijo no es UN elemento (texto, Fragment, función de render props):
+ * entonces el `<button>` de v3 es el trigger, que es lo correcto.
+ *
+ * Medido en beweossmbs `origin/staging` (f6d5be1c2): 20 `<DropdownTrigger>`, 19 con un `<Button>`
+ * de hijo directo y 1 con `{trigger || defaultTrigger}` (también un `Button` en ejecución).
+ */
+function withClonedTrigger(node) {
+    if (!$8WNJc$react.isValidElement(node) || node.type !== react.Dropdown.Trigger) {
+        return node;
+    }
+    const trigger = node;
+    const { children, render, className } = trigger.props;
+    if (render !== undefined || !isClonableTriggerChild(children)) {
+        return node;
+    }
+    return $8WNJc$react.cloneElement(trigger, {
+        render: renderDropdownTrigger(children, typeof className === "string" ? className : undefined),
+    });
+}
+const DropdownFacade = ({ children, placement, offset, crossOffset, shouldFlip, containerPadding, closeOnSelect, shouldCloseOnScroll: _noEffectInV3, className, classNames, ...props }) => {
+    const overrides = definedOnly({
+        placement: placement === undefined ? undefined : toV3Placement(placement),
+        offset,
+        crossOffset,
+        shouldFlip,
+        containerPadding,
+    });
+    // v2: `base` (caja exterior), luego `content` + `className` (caja interior); en v3 es una sola
+    // caja, así que van juntas y en ese orden. `cn` funde conflictos entre ellas; frente a la clase
+    // de v3 (`.dropdown__popover`, capa `components`) cualquier utilidad ya gana por capa.
+    const popoverClass = react.cn(classNames?.base, classNames?.content, className) || undefined;
+    const menuWithClose = (node) => withCloseOnSelect(node, closeOnSelect);
+    const nodes = flatten(children);
+    // El popover es del consumidor: se respeta su árbol entero y se le COMPLETA lo que no dijo
+    // (lo que sí dijo manda). Los menús dentro de él reciben el `closeOnSelect` igualmente.
+    if (nodes.some((node) => isPart$1(node, OWN_POPOVER))) {
+        const fillPopover = (node) => {
+            if (!$8WNJc$react.isValidElement(node) || node.type !== react.Dropdown.Popover) {
+                return node;
+            }
+            const own = node;
+            const missing = Object.fromEntries(Object.entries(overrides).filter(([key]) => own.props[key] === undefined));
+            const ownClass = own.props.className;
+            return $8WNJc$react.cloneElement(own, {
+                ...missing,
+                ...(popoverClass && typeof ownClass !== "function"
+                    ? { className: react.cn(popoverClass, ownClass) }
+                    : {}),
+            }, ...mapTree(own.props.children, menuWithClose));
+        };
+        return (jsxRuntime.jsx(react.Dropdown, { ...props, children: mapTree(children, (node) => fillPopover(withClonedTrigger(node))) }));
+    }
     const menus = nodes.filter((node) => isPart$1(node, INSIDE_POPOVER));
-    // Nada que envolver (sin hijos, `children` como función, un popover ya montado a mano, o
-    // simplemente ningún menú suelto): el root tal cual, byte a byte como el crudo de v3.
-    if (menus.length === 0 || nodes.some((node) => isPart$1(node, OWN_POPOVER))) {
-        return jsxRuntime.jsx(react.Dropdown, { ...props, children: children });
+    // Nada que envolver (sin hijos o ningún menú suelto): el root tal cual, como el crudo de v3.
+    if (menus.length === 0) {
+        return (jsxRuntime.jsx(react.Dropdown, { ...props, children: mapTree(children, withClonedTrigger) }));
     }
-    return (jsxRuntime.jsxs(react.Dropdown, { ...props, children: [nodes.filter((node) => !isPart$1(node, INSIDE_POPOVER)), jsxRuntime.jsx(react.Dropdown.Popover, { offset: 7, placement: "bottom", children: menus })] }));
+    return (jsxRuntime.jsxs(react.Dropdown, { ...props, children: [nodes
+                .filter((node) => !isPart$1(node, INSIDE_POPOVER))
+                .map(withClonedTrigger), jsxRuntime.jsx(react.Dropdown.Popover, { offset: 7, placement: "bottom", ...overrides, className: popoverClass, children: menus.map(menuWithClose) })] }));
 };
 DropdownFacade.displayName = "Aurora.Dropdown";
 /**
@@ -15194,21 +17352,66 @@ function hasIndicator(children) {
         return node.type === $8WNJc$react.Fragment && hasIndicator(node.props.children);
     });
 }
+// ---------------------------------------------------------------------------------------------
+// `size` de v2 → medidas de pestaña de v2
+// ---------------------------------------------------------------------------------------------
+/**
+ * Medidas de pestaña por `size`, **copiadas del oráculo** `@heroui/theme@2.4.15`
+ * `dist/components/tabs.js` (slot `tab`, `px-3` en la base y `size.{sm,md,lg}.tab` para la altura y
+ * el cuerpo), traducidas a clases de Tailwind 4 con el MISMO valor. Las `text-tiny` /
+ * `text-small` / `text-medium` de v2 son del plugin `heroui()` y en TW4 no existen
+ * (`default-layout.js:32-40`):
+ *
+ *   | size | v2                     | aquí           | cuerpo / interlineado |
+ *   |------|------------------------|----------------|-----------------------|
+ *   | sm   | `h-7 text-tiny` + px-3 | `h-7 px-3 text-xs`   | 0.75rem / 1rem   |
+ *   | md   | `h-8 text-small` + px-3 | `h-8 px-3 text-sm`  | 0.875rem / 1.25rem |
+ *   | lg   | `h-9 text-medium` + px-3 | `h-9 px-3 text-base` | 1rem / 1.5rem   |
+ *
+ * Por qué se mapea, cuando `radius` y `color` se ignoran (§9.1): `size` no es estética, es
+ * TAMAÑO, y descartarlo provoca un desbordamiento medido. linda-business embebido en el host v1 con
+ * la `.140`: con `size="sm"` descartado, el texto pasaba de 12 px a 14 px y cada pestaña salía de 6
+ * a 17 px más ancha. El carril medía 352 px en una columna de 287 px y el chevron del scroller
+ * tapaba la última pestaña. smbs tiene 10 `size="sm"`.
+ *
+ * Lo que NO se copia: el peso (v3 pone `font-medium`, v2 no ponía nada) y el radio (`rounded-small`),
+ * que siguen como v3 por §9.1. Tampoco el `py-1` de v2: con altura fija y `items-center` no
+ * cambia nada.
+ *
+ * Las clases van ANTES de `classNames.tab` y del `className` del `Tab` en un `cn`
+ * (tailwind-merge): lo de la app gana. El `h-7 px-2` de linda-business sigue mandando sobre el
+ * `px-3`. Clases literales en el fuente (no construidas), para que Tailwind las genere.
+ */
+const TAB_SIZE_CLASS = {
+    sm: "h-7 px-3 text-xs",
+    md: "h-8 px-3 text-sm",
+    lg: "h-9 px-3 text-base",
+};
+/**
+ * El `size` del root llega a los `Tabs.Tab` de la forma v3 por contexto, porque esas pestañas las
+ * escribe la app dentro de su `Tabs.List` y la fachada no las recorre. Sin `size` el valor es
+ * `undefined` y la pestaña sale byte a byte como antes.
+ */
+const TabSizeContext = $8WNJc$react.createContext(undefined);
 const TabFacade = ({ children: ownChildren, title, 
 // `titleValue` es de v2 y no tiene destino en v3: se consume para que no llegue al DOM.
 titleValue: _titleValue, ...props }) => {
     // En la forma v3 la etiqueta son los `children`; si solo viene el `title` de v2 (un `Tab` con
     // `title` dentro de `Tabs.List`), hace de etiqueta. Con los dos, mandan los `children`.
     const children = ownChildren ?? title;
+    const sizeClass = $8WNJc$react.useContext(TabSizeContext);
+    const tabProps = sizeClass
+        ? { ...props, className: react.cn(sizeClass, props.className) }
+        : props;
     // `children` como función es la forma de render props de react-aria (`TabRenderProps`). No se
     // puede inspeccionar, y menos aún combinar con un hermano —React rechaza una función como
     // hijo junto a un elemento—, así que se pasa tal cual. Un consumidor que la use monta el
     // indicador él (es la vía de escape de este caso). Exposición hoy: 0 usos en los 6 repos.
     if (typeof children === "function") {
-        return jsxRuntime.jsx(react.Tabs.Tab, { ...props, children: children });
+        return jsxRuntime.jsx(react.Tabs.Tab, { ...tabProps, children: children });
     }
     if (hasIndicator(children)) {
-        return jsxRuntime.jsx(react.Tabs.Tab, { ...props, children: children });
+        return jsxRuntime.jsx(react.Tabs.Tab, { ...tabProps, children: children });
     }
     // El indicador va PRIMERO por legibilidad del marcado, no por efecto: es `position:absolute`
     // con `z-index:-1`, o sea fuera del flujo y detrás del texto, así que el orden no cambia el
@@ -15218,7 +17421,7 @@ titleValue: _titleValue, ...props }) => {
     // `{children}` se pasa SIN normalizar (nada de `Children.toArray`) para no reescribir las
     // keys del consumidor: hacerlo cambiaría la reconciliación de una lista de pestañas
     // condicional. Verificado en el navegador que la anidación no produce aviso de key.
-    return (jsxRuntime.jsxs(react.Tabs.Tab, { ...props, children: [jsxRuntime.jsx(react.Tabs.Indicator, {}), children] }));
+    return (jsxRuntime.jsxs(react.Tabs.Tab, { ...tabProps, children: [jsxRuntime.jsx(react.Tabs.Indicator, {}), children] }));
 };
 TabFacade.displayName = "Aurora.Tab";
 /**
@@ -15329,8 +17532,10 @@ function hasPanelContent(children) {
 }
 const TabsFacade = (allProps) => {
     const { children, classNames, className, variant, fullWidth, items, isVertical, placement, orientation, destroyInactiveTabPanel = true, 
+    // v2: medidas de pestaña (ver `TAB_SIZE_CLASS`).
+    size, 
     // Sin equivalente en v3: se consumen para que no lleguen al DOM (ver README, «Props v2»).
-    size: _size, radius: _radius, color: _color, disableAnimation: _disableAnimation, disableCursorAnimation: _disableCursorAnimation, shouldSelectOnPressUp: _shouldSelectOnPressUp, ...rest } = allProps;
+    radius: _radius, color: _color, disableAnimation: _disableAnimation, disableCursorAnimation: _disableCursorAnimation, shouldSelectOnPressUp: _shouldSelectOnPressUp, ...rest } = allProps;
     const v3Variant = toV3Variant(variant);
     const v3Orientation = orientation ??
         (isVertical || placement === "start" || placement === "end"
@@ -15391,7 +17596,7 @@ const TabsFacade = (allProps) => {
         // `.tabs[data-orientation="horizontal"] > .tabs__list-container { align-self: start }` de
         // neutralize, que no hace falta: dentro de una fila el carril ya mide su contenido.
         const orientationAttr = v3Orientation ?? "horizontal";
-        return (jsxRuntime.jsxs(react.Tabs, { ...rootProps, orientation: v3Orientation, variant: v3Variant, children: [jsxRuntime.jsx("div", { className: react.cn("flex", v3Variant === "secondary" && "tabs--secondary", fullWidth && "w-full", classNames?.base, className), "data-orientation": orientationAttr, "data-slot": "tabs-base", children: jsxRuntime.jsx(react.Tabs.ListContainer, { className: react.cn(fullWidth && "w-full"), children: jsxRuntime.jsx(react.Tabs.List, { "aria-describedby": ariaDescribedby, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className: react.cn(classNames?.tabList), children: tabs.map(({ id, title, tabClassName, tabProps }) => ($8WNJc$react.createElement(react.Tabs.Tab, { ...tabProps, className: react.cn(classNames?.tab, tabClassName), id: id, key: id },
+        return (jsxRuntime.jsxs(react.Tabs, { ...rootProps, orientation: v3Orientation, variant: v3Variant, children: [jsxRuntime.jsx("div", { className: react.cn("flex", v3Variant === "secondary" && "tabs--secondary", fullWidth && "w-full", classNames?.base, className), "data-orientation": orientationAttr, "data-slot": "tabs-base", children: jsxRuntime.jsx(react.Tabs.ListContainer, { className: react.cn(fullWidth && "w-full"), children: jsxRuntime.jsx(react.Tabs.List, { "aria-describedby": ariaDescribedby, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className: react.cn(classNames?.tabList), children: tabs.map(({ id, title, tabClassName, tabProps }) => ($8WNJc$react.createElement(react.Tabs.Tab, { ...tabProps, className: react.cn(size && TAB_SIZE_CLASS[size], classNames?.tab, tabClassName), id: id, key: id },
                                 jsxRuntime.jsx(react.Tabs.Indicator, { className: react.cn(classNames?.cursor) }),
                                 classNames?.tabContent ? (jsxRuntime.jsx("span", { className: classNames.tabContent, children: title })) : (title)))) }) }) }), tabs
                     .filter(({ panel }) => hasPanelContent(panel))
@@ -15410,7 +17615,9 @@ const TabsFacade = (allProps) => {
         orientation: v3Orientation,
         variant: v3Variant,
     };
-    return jsxRuntime.jsx(TabsV3, { ...v3Props, children: v3Children });
+    const v3Tabs = jsxRuntime.jsx(TabsV3, { ...v3Props, children: v3Children });
+    // Sin `size` no se monta el provider: el árbol queda idéntico al de antes.
+    return size ? (jsxRuntime.jsx(TabSizeContext.Provider, { value: TAB_SIZE_CLASS[size], children: v3Tabs })) : (v3Tabs);
 };
 const TabsV3 = ({ children, ...props }) => {
     const nodes = $8WNJc$react.Children.toArray(children);
@@ -15475,6 +17682,87 @@ const Tabs = Object.assign(TabsFacade, {
     Tab: TabFacade,
 });
 
+const OMIT = new Set([
+    "role",
+    "tabIndex",
+    "className",
+    "data-slot",
+    "children",
+]);
+function mergeRefs(...refs) {
+    return (value) => {
+        for (const ref of refs) {
+            if (typeof ref === "function") {
+                ref(value);
+            }
+            else if (ref) {
+                ref.current = value;
+            }
+        }
+    };
+}
+/** `mergeProps` de v2: handlers `on*` encadenados (trigger → hijo), el resto gana el hijo. */
+function mergeTriggerProps(trigger, child) {
+    const merged = { ...trigger, ...child };
+    for (const key of Object.keys(trigger)) {
+        const a = trigger[key];
+        const b = child[key];
+        if (/^on[A-Z]/.test(key) &&
+            typeof a === "function" &&
+            typeof b === "function") {
+            merged[key] = (...args) => {
+                a(...args);
+                b(...args);
+            };
+        }
+        else if (key === "aria-describedby" && a && b) {
+            merged[key] = `${a} ${b}`;
+        }
+        else if (b === undefined) {
+            merged[key] = a;
+        }
+    }
+    return merged;
+}
+function renderTooltipTrigger(children) {
+    return (divProps) => {
+        const { ref, ...rest } = divProps;
+        const triggerProps = {};
+        for (const [key, value] of Object.entries(rest)) {
+            if (!OMIT.has(key)) {
+                triggerProps[key] = value;
+            }
+        }
+        const single = $8WNJc$react.Children.count(children) === 1 && $8WNJc$react.isValidElement(children);
+        if (single && children.type !== $8WNJc$react.Fragment) {
+            const child = children;
+            const childRef = (Number.parseInt($8WNJc$react.version, 10) < 19
+                ? child.ref
+                : child.props.ref);
+            return $8WNJc$react.cloneElement(child, {
+                ...mergeTriggerProps(triggerProps, child.props),
+                ref: mergeRefs(childRef, ref),
+            });
+        }
+        return (jsxRuntime.jsx("div", { ...triggerProps, ref: ref, className: rest.className, "data-slot": "tooltip-trigger", children: children }));
+    };
+}
+
+/**
+ * `color` de v2 (`@heroui/theme@2.4.15`, `popover` → `colorVariants.solid`): fondo y texto del
+ * color en la caja, y la flecha del mismo color (v2 la pintaba con `before:bg-*`; en v3 es un SVG
+ * con `fill: var(--overlay)`, así que se pisa su `fill`). `default` no añade nada: se ve como v3
+ * (§9.1). Clases LITERALES — Tailwind 4 solo genera lo que está escrito en el fuente.
+ */
+const COLOR_CLASSES = {
+    default: "",
+    foreground: "bg-foreground text-background [&_[data-slot=overlay-arrow]]:fill-foreground",
+    primary: "bg-primary text-primary-foreground [&_[data-slot=overlay-arrow]]:fill-primary",
+    secondary: "bg-secondary text-secondary-foreground [&_[data-slot=overlay-arrow]]:fill-secondary",
+    success: "bg-success text-success-foreground [&_[data-slot=overlay-arrow]]:fill-success",
+    warning: "bg-warning text-warning-foreground [&_[data-slot=overlay-arrow]]:fill-warning",
+    danger: "bg-danger text-danger-foreground [&_[data-slot=overlay-arrow]]:fill-danger",
+};
 /**
  * Tooltip - Componente BeweOS basado en HeroUI.
  *
@@ -15490,7 +17778,11 @@ const Tabs = Object.assign(TabsFacade, {
 const Tooltip = ({ enableTapOnTouch = true, touchPlacement = "top", placement, offset, showArrow = false, content, isOpen, defaultOpen, onOpenChange, isDisabled, 
 // v3 cambia el default de 0 (v2) a 700 — se mantiene 0 para no regresionar el
 // comportamiento instantáneo que ya tenía v2 (ver Tooltip.types.ts).
-delay = 0, closeDelay, trigger, className, children, }) => {
+delay = 0, closeDelay, trigger, className, classNames, color = "default", children, }) => {
+    // v3 tiene un solo nodo donde v2 tenía `base` + `content` (ver `TooltipClassNames`). Orden de
+    // v2: color → `classNames` → `className`; `cn` fusiona para que la clase de la app gane.
+    const contentClassName = react.cn(COLOR_CLASSES[color] ?? "", classNames?.base, classNames?.content, className);
+    const arrow = showArrow && (jsxRuntime.jsx(react.Tooltip.Arrow, { className: classNames?.arrow }));
     // Detección táctil: NO basta con `(hover: none)`. Muchos móviles (p.ej.
     // Android) reportan `(hover: hover)` y `(hover: none)` da false, dejando el
     // tap sin activar. Se combina con `(pointer: coarse)` (coincide si cualquiera
@@ -15528,7 +17820,7 @@ delay = 0, closeDelay, trigger, className, children, }) => {
     }, [tapMode, open, setOpen]);
     // Desktop (o tap deshabilitado) → comportamiento nativo de HeroUI.
     if (!tapMode) {
-        return (jsxRuntime.jsxs(react.Tooltip, { isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: onOpenChange, isDisabled: isDisabled, delay: delay, closeDelay: closeDelay, trigger: trigger, children: [jsxRuntime.jsx(react.Tooltip.Trigger, { children: children }), jsxRuntime.jsxs(react.Tooltip.Content, { placement: placement, offset: offset, showArrow: showArrow, className: className, children: [showArrow && jsxRuntime.jsx(react.Tooltip.Arrow, {}), content] })] }));
+        return (jsxRuntime.jsxs(react.Tooltip, { isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: onOpenChange, isDisabled: isDisabled, delay: delay, closeDelay: closeDelay, trigger: trigger, children: [jsxRuntime.jsx(react.Tooltip.Trigger, { render: renderTooltipTrigger(children) }), jsxRuntime.jsxs(react.Tooltip.Content, { placement: placement, offset: offset, showArrow: showArrow, className: contentClassName, children: [arrow, content] })] }));
     }
     // Táctil → controlado, el tap sobre el trigger alterna la visibilidad.
     // El placement cambia a `touchPlacement` (arriba por defecto) para que no
@@ -15540,7 +17832,7 @@ delay = 0, closeDelay, trigger, className, children, }) => {
     return (jsxRuntime.jsxs(react.Tooltip, { isOpen: open, onOpenChange: setOpen, isDisabled: isDisabled, children: [jsxRuntime.jsx(react.Tooltip.Trigger, { children: jsxRuntime.jsx("span", { ref: triggerRef, className: "inline-flex", onPointerUp: (event) => {
                         event.stopPropagation();
                         setOpen(!open);
-                    }, children: children }) }), jsxRuntime.jsxs(react.Tooltip.Content, { placement: touchPlacement, offset: offset, showArrow: showArrow, className: className, children: [showArrow && jsxRuntime.jsx(react.Tooltip.Arrow, {}), content] })] }));
+                    }, children: children }) }), jsxRuntime.jsxs(react.Tooltip.Content, { placement: touchPlacement, offset: offset, showArrow: showArrow, className: contentClassName, children: [arrow, content] })] }));
 };
 
 /**