@beweco/aurora-ui 0.6.86 → 0.6.87

package/dist/index.esm.js

@@ -4,7 +4,7 @@ export { Slider } from '@heroui/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Icon } from '@iconify/react';
 export { loadIcons } from '@iconify/react';
-import React, { useId, useState, useCallback, useMemo, forwardRef, useEffect, useImperativeHandle, createContext, useContext, useRef, useLayoutEffect, memo, createElement, Fragment as Fragment$1 } from 'react';
+import React, { useId, useState, useCallback, useMemo, useInsertionEffect, forwardRef, useEffect, useImperativeHandle, createContext, useContext, useRef, useLayoutEffect, memo, createElement, Fragment as Fragment$1 } from 'react';
 import { ResponsiveContainer, AreaChart, CartesianGrid, XAxis, Tooltip as Tooltip$1, Area, LineChart, YAxis, Line, PieChart, Pie, Cell } from 'recharts';
 import { createPortal } from 'react-dom';
 import { motion, AnimatePresence } from 'framer-motion';
@@ -795,263 +795,49 @@ var AuraAutocomplete = function (_a) {
 };
 
 /**
- * ColorPicker Types
+ * Deja una `<style id>` en el `<head>` con las reglas de un componente, una sola vez.
  *
- * Defines the type system for the ColorPicker component used for brand configuration.
- */
-/**
- * Default predefined colors (Brand-safe palette)
- */
-var DEFAULT_PREDEFINED_COLORS = [
-    // Primary colors
-    { key: "blue", name: "Azul", value: "#3B82F6" },
-    { key: "violet", name: "Violeta", value: "#8B5CF6" },
-    { key: "purple", name: "Púrpura", value: "#A855F7" },
-    // Secondary colors
-    { key: "green", name: "Verde", value: "#10B981" },
-    { key: "teal", name: "Turquesa", value: "#14B8A6" },
-    { key: "cyan", name: "Cian", value: "#06B6D4" },
-    // Accent colors
-    { key: "pink", name: "Rosa", value: "#EC4899" },
-    { key: "rose", name: "Rosa claro", value: "#F43F5E" },
-    { key: "orange", name: "Naranja", value: "#F97316" },
-    // Neutral colors
-    { key: "red", name: "Rojo", value: "#EF4444" },
-    { key: "amber", name: "Ámbar", value: "#F59E0B" },
-    { key: "yellow", name: "Amarillo", value: "#EAB308" },
-    // Gray scale (useful for text/backgrounds)
-    { key: "gray-dark", name: "Gris oscuro", value: "#374151" },
-    { key: "gray", name: "Gris", value: "#6B7280" },
-    { key: "gray-light", name: "Gris claro", value: "#9CA3AF" },
-];
-
-/**
- * Default translations (Spanish)
- */
-var defaultTranslations$e = {
-    label: "Color",
-    placeholder: "Ingresa código hex",
-    customColorLabel: "Color personalizado",
-    predefinedColorsLabel: "Colores predefinidos",
-    recentColorsLabel: "Colores recientes",
-    noRecentColors: "No hay colores recientes",
-    invalidColorFormat: "El código de color no es un formato HEX válido (Ej: #FF5733 o FFA07A)",
-    colorPreview: "Vista previa del color",
-};
-/**
- * Validates hex color format (#RRGGBB or #RGB)
- */
-var isValidHexColor = function (color) {
-    var hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
-    return hexRegex.test(color);
-};
-/**
- * Normalizes hex color to 6-digit format (#RGB -> #RRGGBB)
+ * Existe para los componentes que no pueden depender de `@beweco/aurora-ui/styles`: los
+ * que llegan a un microfrontend por Module Federation (chatbot-claw recibe aurora-ui del
+ * host con `import: false`) o se montan sueltos. Si sus reglas vivieran en `styles.css`,
+ * funcionarían solo cuando el host carga ese CSS y además en la misma versión que el JS
+ * que viaja por MF; cuando no, el componente sale sin animación ni tema y nadie se entera.
+ * Aquí la regla viaja con el componente, como ya hace `SocialMediaCarousel`.
+ *
+ * Idempotente por `id`: cien mascotas en un hilo dejan una sola `<style>`. Nunca reescribe
+ * una `<style>` existente: si en la página conviven dos copias del paquete, se pisarían en
+ * cada montaje. Para que una versión nueva del CSS entre, el id lleva su huella
+ * (`styleIdFor`).
  */
-var normalizeHexColor = function (color) {
-    if (!color.startsWith("#")) {
-        color = "#".concat(color);
+var injectStyle = function (doc, id, css) {
+    if (!(doc === null || doc === void 0 ? void 0 : doc.head)) {
+        return;
     }
-    // Convert 3-digit to 6-digit
-    if (color.length === 4) {
-        var r = color[1];
-        var g = color[2];
-        var b = color[3];
-        return "#".concat(r).concat(r).concat(g).concat(g).concat(b).concat(b).toUpperCase();
+    if (doc.getElementById(id)) {
+        return;
     }
-    return color.toUpperCase();
+    var style = doc.createElement("style");
+    style.id = id;
+    style.textContent = css;
+    doc.head.appendChild(style);
+};
+/** `<base>-<huella del css>`: estable para el mismo CSS, distinto si cambia. */
+var styleIdFor = function (base, css) {
+    var hash = 5381;
+    for (var i = 0; i < css.length; i++) {
+        hash = ((hash << 5) + hash + css.charCodeAt(i)) | 0;
+    }
+    return "".concat(base, "-").concat((hash >>> 0).toString(36));
 };
 /**
- * Strips leading "#" characters so the text input shows only the hex digits.
- * The "#" prefix is rendered as a fixed startContent in the Input.
- */
-var stripHash = function (color) { return color.replace(/^#+/, ""); };
-/**
- * ColorPicker - Advanced color selection component
- *
- * Features:
- * - Native color picker input
- * - Text input for hex codes
- * - Predefined color palette
- * - Recent colors with localStorage persistence
- * - Full i18n support
- * - Dark mode compatible
- * - Accessible
- *
- * @component
- * @example
- * ```tsx
- * <ColorPicker
- *   value={brandColor}
- *   onChange={setBrandColor}
- *   label="Color de marca"
- *   enableRecentColors
- * />
- * ```
+ * `useInsertionEffect` corre antes de pintar y antes que los efectos de layout: las reglas
+ * están en el documento cuando el SVG aparece por primera vez, sin parpadeo sin estilo.
+ * En servidor no corre (y `renderToStaticMarkup` en los tests tampoco lo ejecuta).
  */
-var ColorPicker = forwardRef(function (_a, ref) {
-    var value = _a.value, onChange = _a.onChange, label = _a.label, _b = _a.required, required = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.error, error = _d === void 0 ? false : _d, errorText = _a.errorText, _e = _a.predefinedColors, predefinedColors = _e === void 0 ? DEFAULT_PREDEFINED_COLORS : _e, _f = _a.enableRecentColors, enableRecentColors = _f === void 0 ? true : _f, _g = _a.maxRecentColors, maxRecentColors = _g === void 0 ? 6 : _g, _h = _a.recentColorsStorageKey, recentColorsStorageKey = _h === void 0 ? "aurora-ui-recent-colors" : _h, _j = _a.showPredefinedColors, showPredefinedColors = _j === void 0 ? true : _j, _k = _a.translations, translations = _k === void 0 ? {} : _k, _l = _a.className, className = _l === void 0 ? "" : _l, id = _a.id, name = _a.name;
-    var generatedId = useId();
-    var inputId = id || generatedId;
-    var t = __assign(__assign({}, defaultTranslations$e), translations);
-    // Local state for text input — holds the hex digits WITHOUT the leading "#".
-    // The "#" is rendered as a fixed startContent prefix.
-    var _m = useState(stripHash(value)), textValue = _m[0], setTextValue = _m[1];
-    var _o = useState(false), isInvalidFormat = _o[0], setIsInvalidFormat = _o[1];
-    // Recent colors state
-    var _p = useState([]), recentColors = _p[0], setRecentColors = _p[1];
-    // Load recent colors from localStorage on mount
-    useEffect(function () {
-        if (!enableRecentColors)
-            return;
-        try {
-            var stored = localStorage.getItem(recentColorsStorageKey);
-            if (stored) {
-                var colors = JSON.parse(stored);
-                setRecentColors(colors);
-            }
-        }
-        catch (error) {
-            console.error("Error loading recent colors:", error);
-        }
-    }, [enableRecentColors, recentColorsStorageKey]);
-    // Save to recent colors when value changes
-    useEffect(function () {
-        if (!enableRecentColors || !value || !isValidHexColor(value))
-            return;
-        var normalizedValue = normalizeHexColor(value);
-        // Add to recent colors if not already present
-        setRecentColors(function (prev) {
-            // Remove if already exists
-            var filtered = prev.filter(function (c) { return c !== normalizedValue; });
-            // Add to beginning
-            var updated = __spreadArray([normalizedValue], filtered, true).slice(0, maxRecentColors);
-            // Save to localStorage
-            try {
-                localStorage.setItem(recentColorsStorageKey, JSON.stringify(updated));
-            }
-            catch (error) {
-                console.error("Error saving recent colors:", error);
-            }
-            return updated;
-        });
-    }, [value, enableRecentColors, maxRecentColors, recentColorsStorageKey]);
-    // Sync text value when prop value changes
-    useEffect(function () {
-        setTextValue(stripHash(value));
-        setIsInvalidFormat(false);
-    }, [value]);
-    /**
-     * Handle color picker (native input) change
-     */
-    var handleColorPickerChange = function (e) {
-        var newColor = normalizeHexColor(e.target.value);
-        setTextValue(stripHash(newColor));
-        setIsInvalidFormat(false);
-        onChange(newColor);
-    };
-    /**
-     * Handle text input change — passive: no validation, normalization, or
-     * onChange propagation while typing. We only update local state and clear
-     * any stale error so the user can correct an invalid value without the
-     * red border lingering. Validation (and stripping of the leading "#")
-     * runs on blur.
-     *
-     * While typing we let the user see whatever they pressed — including a
-     * leading "#" — so the input feels responsive. To prevent a double "#"
-     * on screen, the fixed prefix in `startContent` is hidden while
-     * `textValue` already starts with "#". The cap is `7` (1 "#" + 6 hex)
-     * when the user opted into a leading "#", otherwise `6`.
-     */
-    var handleTextChange = function (newValue) {
-        var max = newValue.startsWith("#") ? 7 : 6;
-        setTextValue(newValue.slice(0, max));
-        setIsInvalidFormat(false);
-    };
-    /**
-     * Validate the current hex input. Updates `isInvalidFormat` and, when
-     * the input is a valid hex, normalizes the display and propagates via
-     * `onChange`. Returns whether the input is acceptable so a caller can
-     * decide to block submission.
-     *
-     * Empty + not required → valid (no error, no propagation).
-     * Empty + required → invalid (error).
-     * Valid (3 or 6 hex chars, with or without leading "#") → normalize, sync
-     * display to canonical form, propagate, valid.
-     * Otherwise → invalid (error, no propagation).
-     */
-    var validate = useCallback(function () {
-        // User may have typed a leading "#" — strip it so it doesn't end up
-        // as "##" once we prepend "#" for the regex check.
-        var trimmed = stripHash(textValue.trim());
-        if (trimmed === "") {
-            var valid = !required;
-            setIsInvalidFormat(!valid);
-            // Drop any residual "#" the user typed but never followed up on,
-            // so the field reads as truly empty after blur.
-            setTextValue("");
-            return valid;
-        }
-        var candidate = "#".concat(trimmed);
-        if (!isValidHexColor(candidate)) {
-            setIsInvalidFormat(true);
-            return false;
-        }
-        var normalized = normalizeHexColor(candidate);
-        setIsInvalidFormat(false);
-        setTextValue(stripHash(normalized));
-        onChange(normalized);
-        return true;
-    }, [textValue, required, onChange]);
-    useImperativeHandle(ref, function () { return ({ validate: validate }); }, [validate]);
-    var handleTextBlur = function () {
-        validate();
-    };
-    /**
-     * Handle predefined color selection
-     */
-    var handlePredefinedColorClick = function (colorValue) {
-        if (disabled)
-            return;
-        var normalized = normalizeHexColor(colorValue);
-        setTextValue(stripHash(normalized));
-        setIsInvalidFormat(false);
-        onChange(normalized);
-    };
-    /**
-     * Render a color circle button
-     */
-    var renderColorCircle = function (colorValue, colorName, isSelected) { return (jsx("button", { type: "button", disabled: disabled, onClick: function () { return handlePredefinedColorClick(colorValue); }, className: "\n\t\t\t\tw-8 h-8 rounded-full border-2 cursor-pointer transition-all\n\t\t\t\tfocus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1\n\t\t\t\t".concat(disabled ? "opacity-50 cursor-not-allowed" : "hover:scale-110", "\n\t\t\t\t").concat(isSelected
-            ? "border-primary-500 scale-110 ring-2 ring-primary-500 ring-offset-1"
-            : "border-default-700", "\n\t\t\t"), style: { backgroundColor: colorValue }, title: colorName, "aria-label": colorName }, colorValue)); };
-    return (jsxs("div", { className: "flex flex-col gap-3 ".concat(className), children: [label && (jsxs("label", { htmlFor: inputId, className: "block text-sm font-medium text-foreground", children: [label, required && jsx("span", { className: "text-danger ml-1", children: "*" })] })), jsxs("div", { className: "flex flex-col gap-1", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("input", { type: "color", id: inputId, name: name, value: "#".concat(stripHash(textValue)), onChange: handleColorPickerChange, disabled: disabled, className: "\n\t\t\t\t\t\t\tw-10 h-10 rounded-lg cursor-pointer border-2 flex-shrink-0\n\t\t\t\t\t\t\ttransition-colors appearance-none bg-transparent p-0.5\n\t\t\t\t\t\t\tfocus:border-primary-500\n\t\t\t\t\t\t\t".concat(disabled ? "opacity-50 cursor-not-allowed" : "hover:border-default-400", "\n\t\t\t\t\t\t\t").concat(error
-                                    ? "border-danger dark:border-danger-400"
-                                    : "border-default-300 dark:border-default-700", "\n\t\t\t\t\t\t"), "aria-label": t.customColorLabel, title: t.customColorLabel }), jsx(Input$1, { type: "text", value: textValue, onValueChange: handleTextChange, onBlur: handleTextBlur, placeholder: t.placeholder, disabled: disabled, isInvalid: error || isInvalidFormat, size: "sm", variant: "bordered", classNames: {
-                                    input: "uppercase font-mono text-small",
-                                    inputWrapper: "min-h-8 h-8 focus-within:!border-primary-500",
-                                }, startContent: textValue.startsWith("#") ? null : (jsx("span", { className: "text-default-400 text-sm", children: "#" })) })] }), (error || isInvalidFormat) && (jsx("p", { className: "text-tiny text-danger", children: isInvalidFormat ? t.invalidColorFormat : errorText }))] }), showPredefinedColors && predefinedColors.length > 0 && (jsxs("div", { children: [jsx("p", { className: "text-xs font-medium text-default-600 mb-2", children: t.predefinedColorsLabel }), jsx("div", { className: "flex flex-wrap gap-2", children: predefinedColors.map(function (color) {
-                            return renderColorCircle(color.value, color.name, normalizeHexColor(value) === normalizeHexColor(color.value));
-                        }) })] })), enableRecentColors && recentColors.length > 0 && (jsxs("div", { children: [jsx("p", { className: "text-xs font-medium text-default-600 mb-2", children: t.recentColorsLabel }), jsx("div", { className: "flex flex-wrap gap-2", children: recentColors.map(function (color) {
-                            return renderColorCircle(color, color, normalizeHexColor(value) === color);
-                        }) })] }))] }));
-});
-ColorPicker.displayName = "ColorPicker";
-
-var ThemeContext = createContext({
-    mode: "light",
-    color: "blue",
-    customHex: null,
-    // biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
-    setMode: function () { },
-    // biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
-    setColor: function () { },
-});
-var useThemeContext = function () {
-    var context = useContext(ThemeContext);
-    if (!context) {
-        throw new Error("useThemeContext debe ser usado dentro de un ThemeProvider");
-    }
-    return context;
+var useInjectedStyle = function (id, css) {
+    useInsertionEffect(function () {
+        injectStyle(typeof document === "undefined" ? undefined : document, id, css);
+    }, [id, css]);
 };
 
 var themeColors = {
@@ -1852,6 +1638,338 @@ var themeColors = {
     },
 };
 
+var namesOf = function (mode) { return __spreadArray([
+    ".".concat(mode),
+    "[data-theme=\"".concat(mode, "\"]")
+], Object.entries(themeColors)
+    .filter(function (_a) {
+    var theme = _a[1];
+    return theme.extend === mode;
+})
+    .map(function (_a) {
+    var name = _a[0];
+    return ".".concat(name);
+}), true); };
+/**
+ * Selectores para que un componente con `appearance="auto"` siga al tema del ancestro MÁS
+ * CERCANO.
+ *
+ * Los temas no solo se llaman `dark`/`light`: el `ThemeProvider` de esta librería pone en
+ * `<html>` el tema completo (`blue-dark`, `purple-light`…) y nunca la clase `dark` suelta,
+ * así que mirar solo `.dark` dejaría la pieza en claro sobre un tema oscuro de aurora.
+ *
+ * - `dark`: cualquier ancestro oscuro, o uno oscuro dentro de uno claro.
+ * - `light`: uno claro dentro de uno oscuro (un panel claro en una página oscura). Tiene
+ *   una clase más que el oscuro simple, así que gana; va después en la hoja para ganar
+ *   también al «oscuro dentro de claro» cuando hay tres niveles.
+ */
+var themeScopeSelectors = function (target) {
+    var dark = namesOf("dark");
+    var light = namesOf("light");
+    var pairs = function (outer, inner) {
+        return outer.flatMap(function (o) { return inner.map(function (i) { return "".concat(o, " ").concat(i, " ").concat(target); }); });
+    };
+    return {
+        dark: __spreadArray(__spreadArray([], dark.map(function (d) { return "".concat(d, " ").concat(target); }), true), pairs(light, dark), true).join(",\n"),
+        light: pairs(dark, light).join(",\n"),
+    };
+};
+
+/**
+ * Reglas del sello Beta. Viajan con el componente (se inyectan en `<head>`), igual que las
+ * de `LindaMascot`: el sello también se pinta dentro del microfrontend del chat.
+ *
+ * Borde de 1 px con el gradiente iridiscente de la mascota muy atenuado: dos fondos, el
+ * neutro recortado al `padding-box` y el gradiente al `border-box`, con el borde
+ * transparente para que se vea el de debajo. Es neutral de marca: lo verá también Luna.
+ */
+var AUTO_THEME$1 = themeScopeSelectors('.aurora-beta-badge[data-appearance="auto"]');
+var BETA_BADGE_CSS = "\n.aurora-beta-badge {\n\t--bb-bg: #F6F5FB;\n\t--bb-fg: #4B4F6E;\n\t--bb-edge: 52%;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbox-sizing: border-box;\n\tborder: 1px solid transparent;\n\tborder-radius: 999px;\n\tbackground:\n\t\tlinear-gradient(var(--bb-bg), var(--bb-bg)) padding-box,\n\t\tlinear-gradient(\n\t\t\t100deg,\n\t\t\tcolor-mix(in srgb, #FF8AD8 var(--bb-edge), var(--bb-bg)),\n\t\t\tcolor-mix(in srgb, #A48BFF var(--bb-edge), var(--bb-bg)) 38%,\n\t\t\tcolor-mix(in srgb, #6FE3FF var(--bb-edge), var(--bb-bg)) 70%,\n\t\t\tcolor-mix(in srgb, #FFD08A var(--bb-edge), var(--bb-bg))\n\t\t) border-box;\n\tcolor: var(--bb-fg);\n\tfont-family: inherit;\n\tfont-weight: 600;\n\tline-height: 1;\n\tletter-spacing: 0.06em;\n\ttext-transform: uppercase;\n\twhite-space: nowrap;\n\tvertical-align: middle;\n\tuser-select: none;\n\tflex-shrink: 0;\n}\n/* Tema: sigue al ancestro claro/oscuro m\u00E1s cercano (ver `themeScopeSelectors`). */\n".concat(AUTO_THEME$1.dark, ",\n.aurora-beta-badge[data-appearance=\"dark\"] {\n\t--bb-bg: #1C1D30;\n\t--bb-fg: #D5D8F0;\n\t--bb-edge: 58%;\n}\n").concat(AUTO_THEME$1.light, " {\n\t--bb-bg: #F6F5FB;\n\t--bb-fg: #4B4F6E;\n\t--bb-edge: 52%;\n}\n.aurora-beta-badge--sm {\n\tfont-size: 10px;\n\theight: 16px;\n\tpadding: 0 6px 0 calc(6px + 0.06em);\n}\n.aurora-beta-badge--md {\n\tfont-size: 11px;\n\theight: 18px;\n\tpadding: 0 7px 0 calc(7px + 0.06em);\n}\n");
+
+var DEFAULT_TRANSLATIONS$c = {
+    label: "Beta",
+    title: "Funcionalidad en pruebas: puede cambiar",
+};
+var BETA_BADGE_STYLE_ID = styleIdFor("aurora-beta-badge-styles", BETA_BADGE_CSS);
+/**
+ * BetaBadge — sello «Beta» para lo que está en pruebas con clientes reales (Linda Claw).
+ * Píldora pequeña en mayúsculas con el borde iridiscente de la mascota muy atenuado.
+ * Ver README.
+ */
+var BetaBadge = forwardRef(function BetaBadge(_a, ref) {
+    var _b = _a.size, size = _b === void 0 ? "sm" : _b, title = _a.title, _c = _a.appearance, appearance = _c === void 0 ? "auto" : _c, translations = _a.translations, className = _a.className, spanProps = __rest(_a, ["size", "title", "appearance", "translations", "className"]);
+    useInjectedStyle(BETA_BADGE_STYLE_ID, BETA_BADGE_CSS);
+    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$c), translations);
+    var tooltip = title === true ? t.title : title || undefined;
+    return (jsx("span", __assign({ ref: ref, className: [
+            "aurora-beta-badge",
+            "aurora-beta-badge--".concat(size),
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), "data-appearance": appearance, title: tooltip }, spanProps, { children: t.label })));
+});
+
+/**
+ * ColorPicker Types
+ *
+ * Defines the type system for the ColorPicker component used for brand configuration.
+ */
+/**
+ * Default predefined colors (Brand-safe palette)
+ */
+var DEFAULT_PREDEFINED_COLORS = [
+    // Primary colors
+    { key: "blue", name: "Azul", value: "#3B82F6" },
+    { key: "violet", name: "Violeta", value: "#8B5CF6" },
+    { key: "purple", name: "Púrpura", value: "#A855F7" },
+    // Secondary colors
+    { key: "green", name: "Verde", value: "#10B981" },
+    { key: "teal", name: "Turquesa", value: "#14B8A6" },
+    { key: "cyan", name: "Cian", value: "#06B6D4" },
+    // Accent colors
+    { key: "pink", name: "Rosa", value: "#EC4899" },
+    { key: "rose", name: "Rosa claro", value: "#F43F5E" },
+    { key: "orange", name: "Naranja", value: "#F97316" },
+    // Neutral colors
+    { key: "red", name: "Rojo", value: "#EF4444" },
+    { key: "amber", name: "Ámbar", value: "#F59E0B" },
+    { key: "yellow", name: "Amarillo", value: "#EAB308" },
+    // Gray scale (useful for text/backgrounds)
+    { key: "gray-dark", name: "Gris oscuro", value: "#374151" },
+    { key: "gray", name: "Gris", value: "#6B7280" },
+    { key: "gray-light", name: "Gris claro", value: "#9CA3AF" },
+];
+
+/**
+ * Default translations (Spanish)
+ */
+var defaultTranslations$e = {
+    label: "Color",
+    placeholder: "Ingresa código hex",
+    customColorLabel: "Color personalizado",
+    predefinedColorsLabel: "Colores predefinidos",
+    recentColorsLabel: "Colores recientes",
+    noRecentColors: "No hay colores recientes",
+    invalidColorFormat: "El código de color no es un formato HEX válido (Ej: #FF5733 o FFA07A)",
+    colorPreview: "Vista previa del color",
+};
+/**
+ * Validates hex color format (#RRGGBB or #RGB)
+ */
+var isValidHexColor = function (color) {
+    var hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+    return hexRegex.test(color);
+};
+/**
+ * Normalizes hex color to 6-digit format (#RGB -> #RRGGBB)
+ */
+var normalizeHexColor = function (color) {
+    if (!color.startsWith("#")) {
+        color = "#".concat(color);
+    }
+    // Convert 3-digit to 6-digit
+    if (color.length === 4) {
+        var r = color[1];
+        var g = color[2];
+        var b = color[3];
+        return "#".concat(r).concat(r).concat(g).concat(g).concat(b).concat(b).toUpperCase();
+    }
+    return color.toUpperCase();
+};
+/**
+ * Strips leading "#" characters so the text input shows only the hex digits.
+ * The "#" prefix is rendered as a fixed startContent in the Input.
+ */
+var stripHash = function (color) { return color.replace(/^#+/, ""); };
+/**
+ * ColorPicker - Advanced color selection component
+ *
+ * Features:
+ * - Native color picker input
+ * - Text input for hex codes
+ * - Predefined color palette
+ * - Recent colors with localStorage persistence
+ * - Full i18n support
+ * - Dark mode compatible
+ * - Accessible
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ColorPicker
+ *   value={brandColor}
+ *   onChange={setBrandColor}
+ *   label="Color de marca"
+ *   enableRecentColors
+ * />
+ * ```
+ */
+var ColorPicker = forwardRef(function (_a, ref) {
+    var value = _a.value, onChange = _a.onChange, label = _a.label, _b = _a.required, required = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.error, error = _d === void 0 ? false : _d, errorText = _a.errorText, _e = _a.predefinedColors, predefinedColors = _e === void 0 ? DEFAULT_PREDEFINED_COLORS : _e, _f = _a.enableRecentColors, enableRecentColors = _f === void 0 ? true : _f, _g = _a.maxRecentColors, maxRecentColors = _g === void 0 ? 6 : _g, _h = _a.recentColorsStorageKey, recentColorsStorageKey = _h === void 0 ? "aurora-ui-recent-colors" : _h, _j = _a.showPredefinedColors, showPredefinedColors = _j === void 0 ? true : _j, _k = _a.translations, translations = _k === void 0 ? {} : _k, _l = _a.className, className = _l === void 0 ? "" : _l, id = _a.id, name = _a.name;
+    var generatedId = useId();
+    var inputId = id || generatedId;
+    var t = __assign(__assign({}, defaultTranslations$e), translations);
+    // Local state for text input — holds the hex digits WITHOUT the leading "#".
+    // The "#" is rendered as a fixed startContent prefix.
+    var _m = useState(stripHash(value)), textValue = _m[0], setTextValue = _m[1];
+    var _o = useState(false), isInvalidFormat = _o[0], setIsInvalidFormat = _o[1];
+    // Recent colors state
+    var _p = useState([]), recentColors = _p[0], setRecentColors = _p[1];
+    // Load recent colors from localStorage on mount
+    useEffect(function () {
+        if (!enableRecentColors)
+            return;
+        try {
+            var stored = localStorage.getItem(recentColorsStorageKey);
+            if (stored) {
+                var colors = JSON.parse(stored);
+                setRecentColors(colors);
+            }
+        }
+        catch (error) {
+            console.error("Error loading recent colors:", error);
+        }
+    }, [enableRecentColors, recentColorsStorageKey]);
+    // Save to recent colors when value changes
+    useEffect(function () {
+        if (!enableRecentColors || !value || !isValidHexColor(value))
+            return;
+        var normalizedValue = normalizeHexColor(value);
+        // Add to recent colors if not already present
+        setRecentColors(function (prev) {
+            // Remove if already exists
+            var filtered = prev.filter(function (c) { return c !== normalizedValue; });
+            // Add to beginning
+            var updated = __spreadArray([normalizedValue], filtered, true).slice(0, maxRecentColors);
+            // Save to localStorage
+            try {
+                localStorage.setItem(recentColorsStorageKey, JSON.stringify(updated));
+            }
+            catch (error) {
+                console.error("Error saving recent colors:", error);
+            }
+            return updated;
+        });
+    }, [value, enableRecentColors, maxRecentColors, recentColorsStorageKey]);
+    // Sync text value when prop value changes
+    useEffect(function () {
+        setTextValue(stripHash(value));
+        setIsInvalidFormat(false);
+    }, [value]);
+    /**
+     * Handle color picker (native input) change
+     */
+    var handleColorPickerChange = function (e) {
+        var newColor = normalizeHexColor(e.target.value);
+        setTextValue(stripHash(newColor));
+        setIsInvalidFormat(false);
+        onChange(newColor);
+    };
+    /**
+     * Handle text input change — passive: no validation, normalization, or
+     * onChange propagation while typing. We only update local state and clear
+     * any stale error so the user can correct an invalid value without the
+     * red border lingering. Validation (and stripping of the leading "#")
+     * runs on blur.
+     *
+     * While typing we let the user see whatever they pressed — including a
+     * leading "#" — so the input feels responsive. To prevent a double "#"
+     * on screen, the fixed prefix in `startContent` is hidden while
+     * `textValue` already starts with "#". The cap is `7` (1 "#" + 6 hex)
+     * when the user opted into a leading "#", otherwise `6`.
+     */
+    var handleTextChange = function (newValue) {
+        var max = newValue.startsWith("#") ? 7 : 6;
+        setTextValue(newValue.slice(0, max));
+        setIsInvalidFormat(false);
+    };
+    /**
+     * Validate the current hex input. Updates `isInvalidFormat` and, when
+     * the input is a valid hex, normalizes the display and propagates via
+     * `onChange`. Returns whether the input is acceptable so a caller can
+     * decide to block submission.
+     *
+     * Empty + not required → valid (no error, no propagation).
+     * Empty + required → invalid (error).
+     * Valid (3 or 6 hex chars, with or without leading "#") → normalize, sync
+     * display to canonical form, propagate, valid.
+     * Otherwise → invalid (error, no propagation).
+     */
+    var validate = useCallback(function () {
+        // User may have typed a leading "#" — strip it so it doesn't end up
+        // as "##" once we prepend "#" for the regex check.
+        var trimmed = stripHash(textValue.trim());
+        if (trimmed === "") {
+            var valid = !required;
+            setIsInvalidFormat(!valid);
+            // Drop any residual "#" the user typed but never followed up on,
+            // so the field reads as truly empty after blur.
+            setTextValue("");
+            return valid;
+        }
+        var candidate = "#".concat(trimmed);
+        if (!isValidHexColor(candidate)) {
+            setIsInvalidFormat(true);
+            return false;
+        }
+        var normalized = normalizeHexColor(candidate);
+        setIsInvalidFormat(false);
+        setTextValue(stripHash(normalized));
+        onChange(normalized);
+        return true;
+    }, [textValue, required, onChange]);
+    useImperativeHandle(ref, function () { return ({ validate: validate }); }, [validate]);
+    var handleTextBlur = function () {
+        validate();
+    };
+    /**
+     * Handle predefined color selection
+     */
+    var handlePredefinedColorClick = function (colorValue) {
+        if (disabled)
+            return;
+        var normalized = normalizeHexColor(colorValue);
+        setTextValue(stripHash(normalized));
+        setIsInvalidFormat(false);
+        onChange(normalized);
+    };
+    /**
+     * Render a color circle button
+     */
+    var renderColorCircle = function (colorValue, colorName, isSelected) { return (jsx("button", { type: "button", disabled: disabled, onClick: function () { return handlePredefinedColorClick(colorValue); }, className: "\n\t\t\t\tw-8 h-8 rounded-full border-2 cursor-pointer transition-all\n\t\t\t\tfocus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1\n\t\t\t\t".concat(disabled ? "opacity-50 cursor-not-allowed" : "hover:scale-110", "\n\t\t\t\t").concat(isSelected
+            ? "border-primary-500 scale-110 ring-2 ring-primary-500 ring-offset-1"
+            : "border-default-700", "\n\t\t\t"), style: { backgroundColor: colorValue }, title: colorName, "aria-label": colorName }, colorValue)); };
+    return (jsxs("div", { className: "flex flex-col gap-3 ".concat(className), children: [label && (jsxs("label", { htmlFor: inputId, className: "block text-sm font-medium text-foreground", children: [label, required && jsx("span", { className: "text-danger ml-1", children: "*" })] })), jsxs("div", { className: "flex flex-col gap-1", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("input", { type: "color", id: inputId, name: name, value: "#".concat(stripHash(textValue)), onChange: handleColorPickerChange, disabled: disabled, className: "\n\t\t\t\t\t\t\tw-10 h-10 rounded-lg cursor-pointer border-2 flex-shrink-0\n\t\t\t\t\t\t\ttransition-colors appearance-none bg-transparent p-0.5\n\t\t\t\t\t\t\tfocus:border-primary-500\n\t\t\t\t\t\t\t".concat(disabled ? "opacity-50 cursor-not-allowed" : "hover:border-default-400", "\n\t\t\t\t\t\t\t").concat(error
+                                    ? "border-danger dark:border-danger-400"
+                                    : "border-default-300 dark:border-default-700", "\n\t\t\t\t\t\t"), "aria-label": t.customColorLabel, title: t.customColorLabel }), jsx(Input$1, { type: "text", value: textValue, onValueChange: handleTextChange, onBlur: handleTextBlur, placeholder: t.placeholder, disabled: disabled, isInvalid: error || isInvalidFormat, size: "sm", variant: "bordered", classNames: {
+                                    input: "uppercase font-mono text-small",
+                                    inputWrapper: "min-h-8 h-8 focus-within:!border-primary-500",
+                                }, startContent: textValue.startsWith("#") ? null : (jsx("span", { className: "text-default-400 text-sm", children: "#" })) })] }), (error || isInvalidFormat) && (jsx("p", { className: "text-tiny text-danger", children: isInvalidFormat ? t.invalidColorFormat : errorText }))] }), showPredefinedColors && predefinedColors.length > 0 && (jsxs("div", { children: [jsx("p", { className: "text-xs font-medium text-default-600 mb-2", children: t.predefinedColorsLabel }), jsx("div", { className: "flex flex-wrap gap-2", children: predefinedColors.map(function (color) {
+                            return renderColorCircle(color.value, color.name, normalizeHexColor(value) === normalizeHexColor(color.value));
+                        }) })] })), enableRecentColors && recentColors.length > 0 && (jsxs("div", { children: [jsx("p", { className: "text-xs font-medium text-default-600 mb-2", children: t.recentColorsLabel }), jsx("div", { className: "flex flex-wrap gap-2", children: recentColors.map(function (color) {
+                            return renderColorCircle(color, color, normalizeHexColor(value) === color);
+                        }) })] }))] }));
+});
+ColorPicker.displayName = "ColorPicker";
+
+var ThemeContext = createContext({
+    mode: "light",
+    color: "blue",
+    customHex: null,
+    // biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
+    setMode: function () { },
+    // biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
+    setColor: function () { },
+});
+var useThemeContext = function () {
+    var context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error("useThemeContext debe ser usado dentro de un ThemeProvider");
+    }
+    return context;
+};
+
 /**
  * @file This file contains the theme configurations for the application.
  */
@@ -3536,6 +3654,277 @@ var LindaIcon = function (_a) {
     return (jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: size, height: size, viewBox: "0 0 24 24", className: className, role: "img", "aria-hidden": "true" }, nativeProps, { children: jsxs("g", { fill: "currentColor", children: [jsx("path", { d: "M3.84453 3.84453C2.71849 4.97056 2.71849 6.79623 3.84453 7.92226L5.43227 9.51C5.44419 9.49622 5.45669 9.48276 5.46978 9.46967L9.46978 5.46967C9.48284 5.45662 9.49625 5.44415 9.50999 5.43226L7.92226 3.84453C6.79623 2.71849 4.97056 2.71849 3.84453 3.84453Z" }), jsx("path", { d: "M10.5679 6.49012C10.556 6.50386 10.5435 6.51728 10.5304 6.53033L6.53044 10.5303C6.51735 10.5434 6.5039 10.5559 6.49011 10.5678L16.0777 20.1555C17.2038 21.2815 19.0294 21.2815 20.1555 20.1555C21.2815 19.0294 21.2815 17.2038 20.1555 16.0777L10.5679 6.49012Z" }), jsx("path", { d: "M16.1 2.30719C16.261 1.8976 16.8385 1.8976 16.9994 2.30719L17.4298 3.40247C17.479 3.52752 17.5776 3.62651 17.7022 3.67583L18.7934 4.1078C19.2015 4.26934 19.2015 4.849 18.7934 5.01054L17.7022 5.44252C17.5776 5.49184 17.479 5.59082 17.4298 5.71587L16.9995 6.81115C16.8385 7.22074 16.261 7.22074 16.1 6.81116L15.6697 5.71587C15.6205 5.59082 15.5219 5.49184 15.3973 5.44252L14.3061 5.01054C13.898 4.849 13.898 4.26934 14.3061 4.1078L15.3973 3.67583C15.5219 3.62651 15.6205 3.52752 15.6697 3.40247L16.1 2.30719Z" }), jsx("path", { d: "M19.9672 9.12945C20.1281 8.71987 20.7057 8.71987 20.8666 9.12945L21.0235 9.5288C21.0727 9.65385 21.1713 9.75284 21.2959 9.80215L21.6937 9.95965C22.1018 10.1212 22.1018 10.7009 21.6937 10.8624L21.2959 11.0199C21.1713 11.0692 21.0727 11.1682 21.0235 11.2932L20.8666 11.6926C20.7057 12.1022 20.1281 12.1022 19.9672 11.6926L19.8103 11.2932C19.7611 11.1682 19.6625 11.0692 19.5379 11.0199L19.14 10.8624C18.732 10.7009 18.732 10.1212 19.14 9.95965L19.5379 9.80215C19.6625 9.75284 19.7611 9.65385 19.8103 9.5288L19.9672 9.12945Z" }), jsx("path", { d: "M5.1332 15.3072C5.29414 14.8976 5.87167 14.8976 6.03261 15.3072L6.18953 15.7065C6.23867 15.8316 6.33729 15.9306 6.46188 15.9799L6.85975 16.1374C7.26783 16.2989 7.26783 16.8786 6.85975 17.0401L6.46188 17.1976C6.33729 17.2469 6.23867 17.3459 6.18953 17.471L6.03261 17.8703C5.87167 18.2799 5.29414 18.2799 5.1332 17.8703L4.97628 17.471C4.92714 17.3459 4.82852 17.2469 4.70393 17.1976L4.30606 17.0401C3.89798 16.8786 3.89798 16.2989 4.30606 16.1374L4.70393 15.9799C4.82852 15.9306 4.92714 15.8316 4.97628 15.7065L5.1332 15.3072Z" })] }) })));
 };
 
+var LINDA_MASCOT_STATES = [
+    "idle",
+    "processing",
+    "working",
+    "listening",
+    "talking",
+    "ready",
+];
+/** px de cada talla con nombre. Cada una cae en su propio nivel de detalle. */
+var LINDA_MASCOT_SIZE_PX = {
+    xs: 20,
+    sm: 32,
+    md: 72,
+    lg: 144,
+};
+/** Variable CSS que lleva la intensidad de voz (0–1). Parte del contrato público. */
+var LINDA_MASCOT_LEVEL_VAR = "--linda-mascot-level";
+/** id de la `<style>` que el componente deja en `<head>`. */
+var LINDA_MASCOT_STYLE_ID = "aurora-linda-mascot-styles";
+/** Paleta de la hoja de marca. */
+var LINDA_MASCOT_PALETTE = {
+    coreLight: "#2A2D4A",
+    coreDark: "#0B0C18",
+    eye: "#EAF2FF",
+    eyeGlow: "#8FB8FF",
+    pink: "#FF8AD8",
+    violet: "#A48BFF",
+    cyan: "#6FE3FF",
+    amber: "#FFD08A",
+};
+var resolveMascotPx = function (size) {
+    var _a;
+    if (typeof size === "number") {
+        return Number.isFinite(size) && size > 0 ? size : LINDA_MASCOT_SIZE_PX.md;
+    }
+    return (_a = LINDA_MASCOT_SIZE_PX[size !== null && size !== void 0 ? size : "md"]) !== null && _a !== void 0 ? _a : LINDA_MASCOT_SIZE_PX.md;
+};
+/** ≤20 xs · 21–40 sm · 41–95 md · ≥96 lg. */
+var resolveMascotTier = function (px) {
+    if (px <= 20) {
+        return "xs";
+    }
+    if (px <= 40) {
+        return "sm";
+    }
+    if (px < 96) {
+        return "md";
+    }
+    return "lg";
+};
+var clampLevel = function (level) {
+    if (typeof level !== "number" || Number.isNaN(level)) {
+        return 0;
+    }
+    return Math.min(1, Math.max(0, level));
+};
+var LINDA_MASCOT_GEOMETRY = {
+    xs: {
+        coreRx: 40,
+        coreCy: 61,
+        eyeWidth: 17,
+        eyeHeight: 8,
+        eyeStroke: 9,
+        eyeGap: 31,
+        rings: [{ r: 57, squash: 0.3, tilt: -16, strokePx: 1.2, opacity: 0.95 }],
+        halo: false,
+        specular: false,
+        blur: false,
+        ringGlow: "none",
+    },
+    sm: {
+        coreRx: 36,
+        coreCy: 61,
+        eyeWidth: 14,
+        eyeHeight: 6.5,
+        eyeStroke: 6,
+        eyeGap: 28,
+        rings: [
+            { r: 56, squash: 0.3, tilt: -16, strokePx: 1.1, opacity: 0.9 },
+            { r: 52, squash: 0.36, tilt: 20, strokePx: 1, opacity: 0.7 },
+        ],
+        halo: true,
+        specular: false,
+        blur: false,
+        ringGlow: "none",
+    },
+    md: {
+        coreRx: 33,
+        coreCy: 61,
+        eyeWidth: 12.5,
+        eyeHeight: 5.5,
+        eyeStroke: 4.4,
+        eyeGap: 25,
+        rings: [
+            { r: 56, squash: 0.3, tilt: -16, strokePx: 1.5, opacity: 0.85 },
+            { r: 52, squash: 0.38, tilt: 20, strokePx: 1.2, opacity: 0.7 },
+            { r: 58, squash: 0.2, tilt: -3, strokePx: 1, opacity: 0.55 },
+        ],
+        halo: true,
+        specular: true,
+        blur: true,
+        ringGlow: "flat",
+    },
+    lg: {
+        coreRx: 32,
+        coreCy: 61,
+        eyeWidth: 12,
+        eyeHeight: 5.2,
+        eyeStroke: 3.8,
+        eyeGap: 24,
+        rings: [
+            { r: 56, squash: 0.3, tilt: -16, strokePx: 2, opacity: 0.85 },
+            { r: 52, squash: 0.38, tilt: 20, strokePx: 1.6, opacity: 0.72 },
+            { r: 58, squash: 0.2, tilt: -3, strokePx: 1.3, opacity: 0.58 },
+        ],
+        halo: true,
+        specular: true,
+        blur: true,
+        ringGlow: "blur",
+    },
+};
+
+var LEVEL = "var(".concat(LINDA_MASCOT_LEVEL_VAR, ")");
+var AUTO_THEME = themeScopeSelectors('.aurora-linda-mascot[data-appearance="auto"]');
+/** Curva de los movimientos que responden a la voz: sale rápido, llega suave. */
+var EASE_OUT = "cubic-bezier(0.22, 0.7, 0.3, 1)";
+/**
+ * Reglas de la mascota. Viajan con el componente (se inyectan en `<head>`, ver
+ * `useInjectedStyle`) para que funcione en un microfrontend que no carga `styles.css`.
+ *
+ * Todo se anima con `transform` u `opacity`. Cada grupo animado es un `<g>` SIN atributo
+ * `transform`: en SVG la propiedad CSS `transform` reemplaza al atributo, así que la
+ * geometría (posición, inclinación, aplastamiento) vive en grupos padres y el movimiento
+ * en grupos hijos. Por la misma razón, lo que sigue a la voz (`--linda-mascot-level`,
+ * con `transition`) y lo que late en bucle (con `animation`) van en grupos distintos: una
+ * animación CSS anula la transición de la misma propiedad.
+ */
+/** Reglas de movimiento reducido bajo la raíz \`root\` (clase o clase+atributo). */
+var reducedMotionBody = function (root) { return "\n\t".concat(root, " .aurora-lm-spin,\n\t").concat(root, " .aurora-lm-boost,\n\t").concat(root, " .aurora-lm-orbit,\n\t").concat(root, " .aurora-lm-eyes,\n\t").concat(root, " .aurora-lm-breathe,\n\t").concat(root, " .aurora-lm-halo,\n\t").concat(root, " .aurora-lm-sparkle {\n\t\tanimation: none !important;\n\t}\n\t").concat(root, " .aurora-lm-level-body,\n\t").concat(root, " .aurora-lm-level-rings,\n\t").concat(root, " .aurora-lm-level-halo {\n\t\ttransform: none !important;\n\t}\n\t").concat(root, ".aurora-linda-mascot--listening .aurora-lm-level-rings,\n\t").concat(root, ".aurora-linda-mascot--talking .aurora-lm-level-rings {\n\t\topacity: calc(0.55 + ").concat(LEVEL, " * 0.45);\n\t}\n\t").concat(root, ".aurora-linda-mascot--processing .aurora-lm-halo {\n\t\tanimation: aurora-lm-glow 1.6s ease-in-out infinite !important;\n\t}\n\t").concat(root, ".aurora-linda-mascot--working .aurora-lm-halo {\n\t\topacity: 1 !important;\n\t}\n\t").concat(root, ".aurora-linda-mascot--listening .aurora-lm-level-halo,\n\t").concat(root, ".aurora-linda-mascot--talking .aurora-lm-level-halo {\n\t\topacity: calc(0.4 + ").concat(LEVEL, " * 0.6) !important;\n\t}\n\t").concat(root, ".aurora-linda-mascot--ready .aurora-lm-sparkle {\n\t\tanimation: aurora-lm-sparkle-fade 700ms ease-out 1 both !important;\n\t}\n"); };
+var reducedMotionRules = function (root) { return "\n@media (prefers-reduced-motion: reduce) {".concat(reducedMotionBody(root), "}\n").concat(reducedMotionBody("".concat(root, "[data-motion=\"reduce\"]")), "\n"); };
+var LINDA_MASCOT_CSS = "\n.aurora-linda-mascot {\n\t".concat(LINDA_MASCOT_LEVEL_VAR, ": 0;\n\t--lm-halo: 0.5;\n\t--lm-shadow: 1;\n\t--lm-rim: 0.85;\n\t--lm-sparkle: #F2B441;\n\tdisplay: inline-block;\n\tflex-shrink: 0;\n\toverflow: visible;\n\tvertical-align: middle;\n}\n/* En lg la mascota es escenario (bienvenida, llamada): m\u00E1s halo, como en la hoja de marca.\n   Multiplicador aparte para no competir en especificidad con las reglas de tema. */\n.aurora-linda-mascot--tier-lg {\n\t--lm-halo-boost: 1.4;\n}\n/*\n * Tema. `auto` sigue al ancestro claro/oscuro m\u00E1s cercano, incluidos los temas de aurora\n * (`blue-dark`\u2026); ver `themeScopeSelectors`.\n */\n").concat(AUTO_THEME.dark, ",\n.aurora-linda-mascot[data-appearance=\"dark\"] {\n\t--lm-halo: 0.95;\n\t--lm-shadow: 0;\n\t--lm-rim: 1;\n\t--lm-sparkle: #FFF1C9;\n}\n").concat(AUTO_THEME.light, " {\n\t--lm-halo: 0.5;\n\t--lm-shadow: 1;\n\t--lm-rim: 0.85;\n\t--lm-sparkle: #F2B441;\n}\n\n/* Cuerpo entero: respiraci\u00F3n en bucle + escala por voz (grupos distintos). */\n.aurora-lm-breathe,\n.aurora-lm-level-body,\n.aurora-lm-level-rings {\n\ttransform-box: view-box;\n\ttransform-origin: 60px 61px;\n}\n.aurora-lm-breathe {\n\tanimation: aurora-lm-breathe 2s ease-in-out infinite alternate;\n}\n.aurora-lm-level-body,\n.aurora-lm-level-rings,\n.aurora-lm-level-halo {\n\ttransition: transform 140ms ").concat(EASE_OUT, ", opacity 240ms ").concat(EASE_OUT, ";\n}\n\n/* Halo y sombra de contacto. */\n.aurora-lm-halo,\n.aurora-lm-level-halo {\n\ttransform-box: fill-box;\n\ttransform-origin: center;\n}\n.aurora-lm-halo {\n\topacity: calc(var(--lm-halo) * var(--lm-halo-boost, 1));\n\ttransition: opacity 400ms ease;\n}\n.aurora-lm-shadow {\n\topacity: var(--lm-shadow);\n}\n.aurora-lm-rim {\n\topacity: var(--lm-rim);\n}\n\n/*\n * Anillos. El c\u00EDrculo gira dentro de su grupo aplastado: la elipse no cambia de forma y\n * lo que recorre el trazo es el color, como un anillo que gira en profundidad.\n * `--lm-spin-duration` y `--lm-spin-direction` llegan por anillo desde el marcado.\n */\n.aurora-lm-spin {\n\ttransform-box: view-box;\n\ttransform-origin: 0 0;\n\tanimation: aurora-lm-spin var(--lm-spin-duration, 24s) linear infinite\n\t\tvar(--lm-spin-direction, normal);\n}\n/* Segundo giro encadenado: parado salvo en working, donde dobla la velocidad sin saltos\n   (pausar conserva el \u00E1ngulo; cambiar la duraci\u00F3n lo har\u00EDa saltar). */\n.aurora-lm-boost {\n\tanimation-play-state: paused;\n}\n/* Cometa del anillo principal: orbita siempre, se ve solo al pensar o trabajar. */\n.aurora-lm-orbit {\n\tanimation-play-state: paused;\n}\n.aurora-lm-comet,\n.aurora-lm-glint {\n\topacity: 0;\n\ttransition: opacity 320ms ease;\n}\n\n/* Ojos: solo parpadean (sin expresiones faciales). Dos parpadeos por ciclo, a 4,8 y 6,2 s. */\n.aurora-lm-eyes {\n\ttransform-box: fill-box;\n\ttransform-origin: center;\n\tanimation: aurora-lm-blink 11s ease-in-out infinite;\n}\n\n/* Chispas de fin de turno. */\n/* Dorado en claro (el blanco desaparece sobre fondo claro), casi blanco en oscuro. */\n.aurora-lm-sparkle {\n\ttransform-box: fill-box;\n\ttransform-origin: center;\n\topacity: 0;\n\tfill: var(--lm-sparkle);\n}\n\n/* \u2500\u2500 Estados \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* idle no a\u00F1ade nada: es el movimiento base de arriba (giro, respiraci\u00F3n, parpadeo). */\n\n.aurora-linda-mascot--processing .aurora-lm-orbit {\n\tanimation-play-state: running;\n}\n.aurora-linda-mascot--processing .aurora-lm-comet {\n\topacity: 1;\n}\n.aurora-linda-mascot--processing .aurora-lm-halo {\n\tanimation: aurora-lm-pulse 1.6s ease-in-out infinite;\n}\n\n.aurora-linda-mascot--working .aurora-lm-boost,\n.aurora-linda-mascot--working .aurora-lm-orbit {\n\tanimation-play-state: running;\n}\n.aurora-linda-mascot--working .aurora-lm-glint {\n\topacity: 1;\n}\n\n.aurora-linda-mascot--listening .aurora-lm-level-rings {\n\ttransform: scale(calc(0.86 + ").concat(LEVEL, " * 0.16));\n}\n.aurora-linda-mascot--listening .aurora-lm-level-halo {\n\ttransform: scale(calc(0.92 + ").concat(LEVEL, " * 0.2));\n}\n\n.aurora-linda-mascot--talking .aurora-lm-level-body {\n\ttransform: scale(calc(1 + ").concat(LEVEL, " * 0.07));\n}\n.aurora-linda-mascot--talking .aurora-lm-level-halo {\n\ttransform: scale(calc(1 + ").concat(LEVEL, " * 0.32));\n\topacity: calc(0.75 + ").concat(LEVEL, " * 0.25);\n}\n\n.aurora-linda-mascot--ready .aurora-lm-sparkle {\n\tanimation: aurora-lm-sparkle 700ms cubic-bezier(0.2, 0.8, 0.3, 1) 1 both;\n\tanimation-delay: var(--lm-sparkle-delay, 0ms);\n}\n\n/* \u2500\u2500 Keyframes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n@keyframes aurora-lm-spin {\n\tto {\n\t\ttransform: rotate(360deg);\n\t}\n}\n@keyframes aurora-lm-breathe {\n\tfrom {\n\t\ttransform: scale(1);\n\t}\n\tto {\n\t\ttransform: scale(1.03);\n\t}\n}\n@keyframes aurora-lm-blink {\n\t0%, 42%, 45%, 97.5%, 100% {\n\t\ttransform: scaleY(1);\n\t}\n\t43.5%, 98.8% {\n\t\ttransform: scaleY(0.12);\n\t}\n}\n@keyframes aurora-lm-pulse {\n\t0%, 100% {\n\t\ttransform: scale(1);\n\t\topacity: calc(var(--lm-halo) * var(--lm-halo-boost, 1));\n\t}\n\t50% {\n\t\ttransform: scale(1.12);\n\t\topacity: 1;\n\t}\n}\n@keyframes aurora-lm-glow {\n\t0%, 100% {\n\t\topacity: calc(var(--lm-halo) * var(--lm-halo-boost, 1));\n\t}\n\t50% {\n\t\topacity: 1;\n\t}\n}\n@keyframes aurora-lm-sparkle {\n\t0% {\n\t\topacity: 0;\n\t\ttransform: scale(0.2) rotate(0deg);\n\t}\n\t35% {\n\t\topacity: 1;\n\t\ttransform: scale(1) rotate(45deg);\n\t}\n\t100% {\n\t\topacity: 0;\n\t\ttransform: scale(0.5) rotate(90deg);\n\t}\n}\n@keyframes aurora-lm-sparkle-fade {\n\t0%, 100% {\n\t\topacity: 0;\n\t}\n\t35% {\n\t\topacity: 1;\n\t}\n}\n\n/*\n * Movimiento reducido: nada gira, parpadea, respira ni crece. El estado se sigue leyendo\n * sin movimiento: al pensar o trabajar el cometa o el destello se quedan quietos sobre el\n * anillo (as\u00ED se distingue tambi\u00E9n en `xs`, que no tiene halo) y el halo late en opacidad\n * o se enciende; con la voz sube la opacidad del halo y de los anillos; las chispas\n * aparecen y se desvanecen sin moverse.\n *\n * Las mismas reglas se aplican con la preferencia del sistema y con `motion=\"reduce\"`\n * (`data-motion`), que el consumidor usa para listas largas o para forzarlo. `!important`\n * porque las reglas por estado de arriba tienen m\u00E1s especificidad y `@media` no la sube.\n */\n").concat(reducedMotionRules(".aurora-linda-mascot"), "\n");
+
+var CX = 60;
+var STYLE_ID = styleIdFor(LINDA_MASCOT_STYLE_ID, LINDA_MASCOT_CSS);
+/** Velocidad de giro por anillo (s por vuelta) y sentido. */
+var RING_MOTION = [
+    { duration: "24s", direction: "normal" },
+    { duration: "30s", direction: "reverse" },
+    { duration: "36s", direction: "normal" },
+];
+/** Chispas de `ready`: posición en el viewBox, tamaño y retardo. */
+var SPARKLES = [
+    { x: 90, y: 17, s: 9, delay: "0ms" },
+    { x: 104, y: 35, s: 5.5, delay: "90ms" },
+    { x: 73, y: 7, s: 4.5, delay: "170ms" },
+];
+var sparklePath = function (s) {
+    var k = s * 0.18;
+    return "M0 ".concat(-s, "C").concat(k, " ").concat(-k, " ").concat(k, " ").concat(-k, " ").concat(s, " 0C").concat(k, " ").concat(k, " ").concat(k, " ").concat(k, " 0 ").concat(s, "C").concat(-k, " ").concat(k, " ").concat(-k, " ").concat(k, " ").concat(-s, " 0C").concat(-k, " ").concat(-k, " ").concat(-k, " ").concat(-k, " 0 ").concat(-s, "Z");
+};
+/**
+ * Perímetro en px de pantalla de la elipse de un anillo. Con `non-scaling-stroke` los
+ * guiones se miden en px de pantalla (no en unidades del viewBox ni en `pathLength`), así
+ * que el cometa se dimensiona como fracción de este perímetro para medir lo mismo a
+ * cualquier talla.
+ */
+var ringPerimeterPx = function (ring, px) {
+    var a = (ring.r * px) / 120;
+    var b = a * ring.squash;
+    var h = Math.pow(((a - b) / (a + b)), 2);
+    return Math.PI * (a + b) * (1 + (3 * h) / (10 + Math.sqrt(4 - 3 * h)));
+};
+/**
+ * Cometa con estela sobre un anillo: cola de `steps` tramos consecutivos con el
+ * iridiscente del anillo, cada uno más opaco y más grueso que el anterior, y una cabeza
+ * redonda y brillante al final. Todo es `stroke-dasharray` sobre el mismo círculo que el
+ * anillo, así que gira con `transform` y se recorta delante/detrás igual que él. El giro
+ * es horario: la cabeza va al final del trazo, por delante de su cola.
+ */
+var Comet = function (_a) {
+    var className = _a.className, r = _a.r, perimeter = _a.perimeter, tail = _a.tail, strokePx = _a.strokePx, headPx = _a.headPx, steps = _a.steps, ringPaint = _a.ringPaint, headPaint = _a.headPaint;
+    var tailPx = perimeter * tail;
+    var seg = tailPx / steps;
+    return (jsxs("g", { className: className, "data-part": "comet", children: [Array.from({ length: steps }, function (_, i) {
+                var t = (i + 1) / steps;
+                return (jsx("circle", { r: r, fill: "none", stroke: ringPaint, strokeWidth: strokePx * (0.8 + 1.6 * t), strokeOpacity: Math.pow(t, 1.5), strokeDasharray: "".concat((seg + 0.4).toFixed(2), " ").concat((perimeter - seg - 0.4).toFixed(2)), strokeDashoffset: (-seg * i).toFixed(2), vectorEffect: "non-scaling-stroke" }, i));
+            }), jsx("circle", { r: r, fill: "none", stroke: headPaint, strokeWidth: headPx * 1.5, strokeOpacity: 0.3, strokeLinecap: "round", strokeDasharray: "0.01 ".concat((perimeter - 0.01).toFixed(2)), strokeDashoffset: (-tailPx).toFixed(2), vectorEffect: "non-scaling-stroke" }), jsx("circle", { r: r, fill: "none", stroke: "#FFFFFF", strokeWidth: headPx, strokeLinecap: "round", strokeDasharray: "0.01 ".concat((perimeter - 0.01).toFixed(2)), strokeDashoffset: (-tailPx).toFixed(2), vectorEffect: "non-scaling-stroke" })] }));
+};
+/** Arco «∩» de un ojo centrado en (x, y): ancho w, alto h. */
+var eyePath = function (x, y, w, h) {
+    var half = w / 2;
+    var base = y + h / 2;
+    var control = y - h * 0.8333;
+    return "M".concat(x - half, " ").concat(base, "C").concat(x - half, " ").concat(control, " ").concat(x + half, " ").concat(control, " ").concat(x + half, " ").concat(base);
+};
+/**
+ * `useId` devuelve `:r0:` (React 18), `«r0»` o `_r_0_` (19): fuera lo que no vale en un
+ * id referenciado desde `url(#…)`.
+ */
+var safeId = function (raw) {
+    return "lm".concat(raw.replace(/[^a-zA-Z0-9_-]/g, ""));
+};
+/**
+ * LindaMascot — la cara de Linda: un orbe de tinta con ojos luminosos y anillos
+ * iridiscentes, en SVG + CSS (sin imágenes, fuentes ni WebGL).
+ *
+ * Se anima según lo que Linda está haciendo (`state`) y, en la llamada de voz, según el
+ * volumen (`level`), sin preguntar nada al modelo. Pinta más o menos detalle según la
+ * talla para leerse igual a 16 px que a 200 px. Ver README.
+ */
+var LindaMascot = forwardRef(function LindaMascot(_a, ref) {
+    var _b;
+    var _c = _a.state, state = _c === void 0 ? "idle" : _c, _d = _a.size, size = _d === void 0 ? "md" : _d, level = _a.level, label = _a.label, _e = _a.appearance, appearance = _e === void 0 ? "auto" : _e, _f = _a.motion, motion = _f === void 0 ? "auto" : _f, className = _a.className, style = _a.style, svgProps = __rest(_a, ["state", "size", "level", "label", "appearance", "motion", "className", "style"]);
+    useInjectedStyle(STYLE_ID, LINDA_MASCOT_CSS);
+    var uid = safeId(useId());
+    var px = resolveMascotPx(size);
+    var tier = resolveMascotTier(px);
+    var g = LINDA_MASCOT_GEOMETRY[tier];
+    var coreRy = g.coreRx * 0.92;
+    var eyeY = g.coreCy - coreRy + coreRy * 2 * 0.45;
+    var eyes = [CX - g.eyeGap / 2, CX + g.eyeGap / 2];
+    // Recorte delante/detrás: en lg los velos desenfocados salen más allá del anillo.
+    var clipHalf = g.ringGlow === "blur" ? 120 : 80;
+    var id = {
+        core: "".concat(uid, "-core"),
+        coreClip: "".concat(uid, "-core-clip"),
+        rim: "".concat(uid, "-rim"),
+        ring: "".concat(uid, "-ring"),
+        halo: "".concat(uid, "-halo"),
+        shadow: "".concat(uid, "-shadow"),
+        specular: "".concat(uid, "-specular"),
+        back: "".concat(uid, "-back"),
+        front: "".concat(uid, "-front"),
+        soft: "".concat(uid, "-soft"),
+        eyeGlow: "".concat(uid, "-eye-glow"),
+        aura: "".concat(uid, "-aura"),
+        veil: "".concat(uid, "-veil"),
+        tail: "".concat(uid, "-tail"),
+    };
+    var a11y = label
+        ? { role: "img", "aria-label": label }
+        : { "aria-hidden": true };
+    var renderRing = function (ring, index, half) {
+        var motion = RING_MOTION[index];
+        var spinStyle = {
+            "--lm-spin-duration": motion.duration,
+            "--lm-spin-direction": motion.direction,
+        };
+        var isMain = index === 0;
+        var perimeter = ringPerimeterPx(ring, px);
+        return (jsx("g", { "data-ring": index + 1, "data-ring-half": half, transform: "translate(".concat(CX, " ").concat(g.coreCy, ") rotate(").concat(ring.tilt, ")"), opacity: half === "back" ? ring.opacity * 0.62 : ring.opacity, children: jsx("g", { clipPath: "url(#".concat(half === "back" ? id.back : id.front, ")"), children: jsxs("g", { transform: "scale(1 ".concat(ring.squash, ")"), children: [jsx("g", { className: "aurora-lm-spin", style: spinStyle, children: jsxs("g", { className: "aurora-lm-spin aurora-lm-boost", style: spinStyle, children: [g.ringGlow === "blur" && (jsx("circle", { "data-part": "veil", r: ring.r, fill: "none", stroke: "url(#".concat(id.ring, ")"), strokeWidth: ring.strokePx * 16, strokeOpacity: 0.3, vectorEffect: "non-scaling-stroke", filter: "url(#".concat(id.veil, ")") })), g.ringGlow !== "none" && (jsx("circle", { r: ring.r, fill: "none", stroke: "url(#".concat(id.ring, ")"), strokeWidth: ring.strokePx * (g.ringGlow === "blur" ? 6.5 : 5), strokeOpacity: g.ringGlow === "blur" ? 0.34 : 0.14, vectorEffect: "non-scaling-stroke", filter: g.ringGlow === "blur" ? "url(#".concat(id.soft, ")") : undefined })), g.ringGlow !== "none" && (jsx("circle", { r: ring.r + 2.2, fill: "none", stroke: "url(#".concat(id.ring, ")"), strokeWidth: ring.strokePx * 0.55, strokeOpacity: 0.55, vectorEffect: "non-scaling-stroke" })), jsx("circle", { r: ring.r, fill: "none", stroke: "url(#".concat(id.ring, ")"), strokeWidth: ring.strokePx, vectorEffect: "non-scaling-stroke" })] }) }), isMain && (jsxs("g", { className: "aurora-lm-spin aurora-lm-orbit", style: {
+                                "--lm-spin-duration": "1.6s",
+                            }, children: [jsx(Comet, { className: "aurora-lm-comet", r: ring.r, perimeter: perimeter, tail: 0.3, strokePx: ring.strokePx, headPx: Math.max(2, ring.strokePx * 2.4), steps: tier === "xs" ? 6 : 12, ringPaint: "url(#".concat(id.tail, ")"), headPaint: LINDA_MASCOT_PALETTE.eyeGlow }), jsx(Comet, { className: "aurora-lm-glint", r: ring.r, perimeter: perimeter, tail: 0.14, strokePx: ring.strokePx * 1.2, headPx: Math.max(2.4, ring.strokePx * 3), steps: tier === "xs" ? 4 : 8, ringPaint: "url(#".concat(id.tail, ")"), headPaint: LINDA_MASCOT_PALETTE.eyeGlow })] }))] }) }) }, "".concat(half, "-").concat(index)));
+    };
+    var ringHalves = function (half) {
+        return g.rings.map(function (ring, index) { return renderRing(ring, index, half); });
+    };
+    return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: el nombre llega por aria-label (con `label`) o la mascota es decorativa (aria-hidden); biome no ve el spread de `a11y`.
+    jsxs("svg", __assign({ ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 120 120", width: px, height: px, focusable: "false", className: [
+            "aurora-linda-mascot",
+            "aurora-linda-mascot--".concat(state),
+            "aurora-linda-mascot--tier-".concat(tier),
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), "data-state": state, "data-tier": tier, "data-appearance": appearance, "data-motion": motion, style: __assign(__assign({}, style), (_b = {}, _b[LINDA_MASCOT_LEVEL_VAR] = clampLevel(level), _b)) }, a11y, svgProps, { children: [jsxs("defs", { children: [jsxs("radialGradient", { id: id.core, cx: "0.4", cy: "0.34", r: "0.72", children: [jsx("stop", { offset: "0", stopColor: LINDA_MASCOT_PALETTE.coreLight }), jsx("stop", { offset: "0.6", stopColor: "#15172B" }), jsx("stop", { offset: "1", stopColor: LINDA_MASCOT_PALETTE.coreDark })] }), jsxs("linearGradient", { id: id.ring, x1: "0", y1: "0", x2: "1", y2: "1", children: [jsx("stop", { offset: "0", stopColor: LINDA_MASCOT_PALETTE.pink }), jsx("stop", { offset: "0.36", stopColor: LINDA_MASCOT_PALETTE.violet }), jsx("stop", { offset: "0.68", stopColor: LINDA_MASCOT_PALETTE.cyan }), jsx("stop", { offset: "1", stopColor: LINDA_MASCOT_PALETTE.amber })] }), jsxs("linearGradient", { id: id.tail, x1: "0", y1: "0", x2: "1", y2: "1", children: [jsx("stop", { offset: "0", stopColor: "#FFC4EC" }), jsx("stop", { offset: "0.36", stopColor: "#D4C8FF" }), jsx("stop", { offset: "0.68", stopColor: "#B8F1FF" }), jsx("stop", { offset: "1", stopColor: "#FFE6BF" })] }), jsxs("linearGradient", { id: id.rim, x1: "0.2", y1: "0", x2: "0.5", y2: "1", children: [jsx("stop", { offset: "0", stopColor: LINDA_MASCOT_PALETTE.violet }), jsx("stop", { offset: "0.42", stopColor: LINDA_MASCOT_PALETTE.cyan }), jsx("stop", { offset: "0.74", stopColor: LINDA_MASCOT_PALETTE.pink }), jsx("stop", { offset: "1", stopColor: LINDA_MASCOT_PALETTE.amber })] }), jsx("clipPath", { id: id.coreClip, children: jsx("ellipse", { cx: CX, cy: g.coreCy, rx: g.coreRx, ry: coreRy }) }), jsx("clipPath", { id: id.back, children: jsx("rect", { x: -clipHalf, y: -clipHalf, width: clipHalf * 2, height: clipHalf }) }), jsx("clipPath", { id: id.front, children: jsx("rect", { x: -clipHalf, y: 0, width: clipHalf * 2, height: clipHalf }) }), g.halo && (jsxs("radialGradient", { id: id.halo, children: [jsx("stop", { offset: "0", stopColor: LINDA_MASCOT_PALETTE.violet, stopOpacity: "0.7" }), jsx("stop", { offset: tier === "lg" ? "0.48" : "0.42", stopColor: LINDA_MASCOT_PALETTE.pink, stopOpacity: tier === "lg" ? "0.36" : "0.28" }), jsx("stop", { offset: tier === "lg" ? "0.78" : "0.7", stopColor: LINDA_MASCOT_PALETTE.cyan, stopOpacity: tier === "lg" ? "0.14" : "0.08" }), jsx("stop", { offset: "1", stopColor: LINDA_MASCOT_PALETTE.cyan, stopOpacity: "0" })] })), g.halo && (jsxs("radialGradient", { id: id.shadow, children: [jsx("stop", { offset: "0", stopColor: LINDA_MASCOT_PALETTE.coreDark, stopOpacity: "0.28" }), jsx("stop", { offset: "1", stopColor: LINDA_MASCOT_PALETTE.coreDark, stopOpacity: "0" })] })), g.specular && (jsxs("radialGradient", { id: id.specular, children: [jsx("stop", { offset: "0", stopColor: "#FFFFFF", stopOpacity: "0.2" }), jsx("stop", { offset: "1", stopColor: "#FFFFFF", stopOpacity: "0" })] })), g.blur && (jsx("filter", { id: id.eyeGlow, filterUnits: "userSpaceOnUse", x: "-20", y: "-20", width: "160", height: "160", children: jsx("feGaussianBlur", { stdDeviation: "2.2" }) })), g.blur && (jsx("filter", { id: id.aura, filterUnits: "userSpaceOnUse", x: "-20", y: "-20", width: "160", height: "160", children: jsx("feGaussianBlur", { stdDeviation: tier === "lg" ? 5.5 : 4 }) })), g.ringGlow === "blur" && (jsx("filter", { id: id.soft, filterUnits: "userSpaceOnUse", x: "-90", y: "-90", width: "180", height: "180", children: jsx("feGaussianBlur", { stdDeviation: "2.6" }) })), g.ringGlow === "blur" && (jsx("filter", { id: id.veil, filterUnits: "userSpaceOnUse", x: "-100", y: "-100", width: "200", height: "200", children: jsx("feGaussianBlur", { stdDeviation: "5" }) }))] }), jsx("g", { className: "aurora-lm-level-body", children: jsxs("g", { className: "aurora-lm-breathe", children: [g.halo && (jsx("g", { className: "aurora-lm-level-halo", children: jsx("circle", { className: "aurora-lm-halo", "data-part": "halo", cx: CX, cy: g.coreCy, r: tier === "lg" ? 61 : 58, fill: "url(#".concat(id.halo, ")") }) })), g.halo && (jsx("ellipse", { className: "aurora-lm-shadow", "data-part": "shadow", cx: CX, cy: g.coreCy + coreRy + 9, rx: g.coreRx * 0.8, ry: 4.5, fill: "url(#".concat(id.shadow, ")") })), jsx("g", { className: "aurora-lm-rings aurora-lm-level-rings", children: ringHalves("back") }), tier !== "xs" && (jsx("ellipse", { className: "aurora-lm-rim", "data-part": "aura", cx: CX, cy: g.coreCy, rx: g.coreRx + 1, ry: coreRy + 1, fill: "none", stroke: "url(#".concat(id.rim, ")"), strokeWidth: tier === "lg" ? 9 : g.blur ? 7 : 3, strokeOpacity: tier === "lg" ? 0.85 : g.blur ? 0.75 : 0.45, filter: g.blur ? "url(#".concat(id.aura, ")") : undefined })), jsxs("g", { "data-part": "core", children: [jsx("ellipse", { cx: CX, cy: g.coreCy, rx: g.coreRx, ry: coreRy, fill: "url(#".concat(id.core, ")") }), jsx("g", { clipPath: "url(#".concat(id.coreClip, ")"), children: jsx("ellipse", { className: "aurora-lm-rim", cx: CX, cy: g.coreCy, rx: g.coreRx, ry: coreRy, fill: "none", stroke: "url(#".concat(id.rim, ")"), strokeWidth: tier === "xs" ? 5 : g.blur ? 7 : 5, filter: g.blur ? "url(#".concat(id.eyeGlow, ")") : undefined }) }), g.specular && (jsx("ellipse", { "data-part": "specular", cx: CX - g.coreRx * 0.36, cy: g.coreCy - coreRy * 0.5, rx: g.coreRx * 0.38, ry: g.coreRx * 0.2, transform: "rotate(-28 ".concat(CX - g.coreRx * 0.36, " ").concat(g.coreCy - coreRy * 0.5, ")"), fill: "url(#".concat(id.specular, ")") }))] }), jsxs("g", { className: "aurora-lm-eyes", "data-part": "eyes", children: [eyes.map(function (x) { return (jsx("path", { d: eyePath(x, eyeY, g.eyeWidth, g.eyeHeight), fill: "none", stroke: LINDA_MASCOT_PALETTE.eyeGlow, strokeWidth: g.eyeStroke * (g.blur ? 2.2 : 1.7), strokeLinecap: "round", strokeOpacity: g.blur ? 0.85 : 0.35, filter: g.blur ? "url(#".concat(id.eyeGlow, ")") : undefined }, "glow-".concat(x))); }), eyes.map(function (x) { return (jsx("path", { "data-part": "eye", d: eyePath(x, eyeY, g.eyeWidth, g.eyeHeight), fill: "none", stroke: LINDA_MASCOT_PALETTE.eye, strokeWidth: g.eyeStroke, strokeLinecap: "round" }, "eye-".concat(x))); })] }), jsx("g", { className: "aurora-lm-rings aurora-lm-level-rings", children: ringHalves("front") }), state === "ready" && tier !== "xs" && (jsx("g", { "data-part": "sparkles", children: SPARKLES.map(function (s) { return (jsx("g", { transform: "translate(".concat(s.x, " ").concat(s.y, ")"), children: jsx("path", { className: "aurora-lm-sparkle", d: sparklePath(s.s), style: {
+                                        "--lm-sparkle-delay": s.delay,
+                                    } }) }, "".concat(s.x, "-").concat(s.y))); }) }))] }) })] })));
+});
+
 var defaultTranslations$8 = {
     previewAlt: "Vista previa de imagen",
     removeButtonAriaLabel: "Eliminar imagen",
@@ -10139,4 +10528,4 @@ var NavigationLoadingProvider = function (_a) {
     return (jsxs(NavigationLoadingContext.Provider, { value: value, children: [children, jsx(NavigationLoadingOverlay, { isVisible: isVisible })] }));
 };
 
-export { ALL_THEMES, AURORA_THEME_FAMILIES, AURORA_THEME_REGISTRY, AccordionList, AddHolidayForm, AnalyticsCard, AreaLineChart, AuraAutocomplete, AuraTable, AuraToastProvider, BEWEOS_THEME_MODE_COOKIE_NAME, BreadcrumbsComponent, Button, CONTAINER_ATTRIBUTE, Card, Chip, ColorPicker, ColorSelector, ContentCarousel, Currency, DEFAULT_DONUT_COLORS, DEFAULT_PREDEFINED_COLORS, DEFAULT_RANKED_BAR_COLORS, DISMISS_CONTROL_ATTRIBUTE, DatePicker, DateRangePicker, DateSelector, DonutChart, DrawerFilters, EmailPreview, EnumMenuNavListItem, GlobalToast, H1, H2, H3, H4, HeaderComponent, HolidayType, IconComponent, ImagePreview, Input, InputPassword, Kanban, KanbanCard, KanbanColumn, LINDA_TONE_PROPERTIES, LindaIcon, MenuClaw, MenuComponent, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, MultiStepWizard, NavigationLoadingContext, NavigationLoadingOverlay, NavigationLoadingProvider, P, Pagination, Phone, PromotionalBanner, REGISTERED_THEME_COLORS, RangeFilter, RankedBarList, RowSteps, DEFAULT_TRANSLATIONS$1 as SEGMENTATION_DEFAULT_TRANSLATIONS, ScheduleRow, SearchInput, SegmentationBuilder, Select, SimpleLineChart, SocialMediaBar, SocialMediaCarousel, SocialMediaPreview, StatTile, StepIndicator, Switch as SwitchComponent, THEME_COLOR_HEX_MAP, TagsFilter, Textarea, ThemeContext, ThemePicker, ThemeProvider, TimeInput as TimeInputComponent, ToastContext, Tooltip, TwoColumnLayoutAgent, UploadFile, VerticalSteps, ViolinPlot, WhatsAppPreview, Wizard, WizardNavigation, WizardSidebar, applyCustomPrimaryColor, applyLindaTones, computeBars, computeMax, computeSlices, computeTotal, containerProps, createCurrencyFormatter, uniqueCountries as defaultCountries, defaultCurrencyOptions, defaultTranslations$5 as defaultTranslations, deriveLindaTones, dismissControlProps, forceLightOnlyThemeBeforeReact, formatAuroraThemeTooltip, formatDonutPercent, generateThemeColorScale, getContrastForeground, getRegisteredThemeColorBases, getSelectedKeyFromPath, hexToThemeColor, hslToCssValue, isAuroraFullThemeId, isDismissControl, isDonutEmpty, isExactThemeColor, isGroupState, isHexColor, isInsideDismissContainer, isRankedBarListEmpty, isSegmentationGroup, parseHslTriplet, removeCustomPrimaryColor, removeLindaTones, shouldClosePopoverOnInteractOutside, sizeMap, themeColors, useAuraToast, useCloseOnAncestorScroll, useMediaQuery, useNavigationLoading, useThemeContext, withPopoverDismissDefaults };
+export { ALL_THEMES, AURORA_THEME_FAMILIES, AURORA_THEME_REGISTRY, AccordionList, AddHolidayForm, AnalyticsCard, AreaLineChart, AuraAutocomplete, AuraTable, AuraToastProvider, BEWEOS_THEME_MODE_COOKIE_NAME, BetaBadge, BreadcrumbsComponent, Button, CONTAINER_ATTRIBUTE, Card, Chip, ColorPicker, ColorSelector, ContentCarousel, Currency, DEFAULT_DONUT_COLORS, DEFAULT_PREDEFINED_COLORS, DEFAULT_RANKED_BAR_COLORS, DISMISS_CONTROL_ATTRIBUTE, DatePicker, DateRangePicker, DateSelector, DonutChart, DrawerFilters, EmailPreview, EnumMenuNavListItem, GlobalToast, H1, H2, H3, H4, HeaderComponent, HolidayType, IconComponent, ImagePreview, Input, InputPassword, Kanban, KanbanCard, KanbanColumn, LINDA_MASCOT_LEVEL_VAR, LINDA_MASCOT_STATES, LINDA_TONE_PROPERTIES, LindaIcon, LindaMascot, MenuClaw, MenuComponent, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, MultiStepWizard, NavigationLoadingContext, NavigationLoadingOverlay, NavigationLoadingProvider, P, Pagination, Phone, PromotionalBanner, REGISTERED_THEME_COLORS, RangeFilter, RankedBarList, RowSteps, DEFAULT_TRANSLATIONS$1 as SEGMENTATION_DEFAULT_TRANSLATIONS, ScheduleRow, SearchInput, SegmentationBuilder, Select, SimpleLineChart, SocialMediaBar, SocialMediaCarousel, SocialMediaPreview, StatTile, StepIndicator, Switch as SwitchComponent, THEME_COLOR_HEX_MAP, TagsFilter, Textarea, ThemeContext, ThemePicker, ThemeProvider, TimeInput as TimeInputComponent, ToastContext, Tooltip, TwoColumnLayoutAgent, UploadFile, VerticalSteps, ViolinPlot, WhatsAppPreview, Wizard, WizardNavigation, WizardSidebar, applyCustomPrimaryColor, applyLindaTones, computeBars, computeMax, computeSlices, computeTotal, containerProps, createCurrencyFormatter, uniqueCountries as defaultCountries, defaultCurrencyOptions, defaultTranslations$5 as defaultTranslations, deriveLindaTones, dismissControlProps, forceLightOnlyThemeBeforeReact, formatAuroraThemeTooltip, formatDonutPercent, generateThemeColorScale, getContrastForeground, getRegisteredThemeColorBases, getSelectedKeyFromPath, hexToThemeColor, hslToCssValue, isAuroraFullThemeId, isDismissControl, isDonutEmpty, isExactThemeColor, isGroupState, isHexColor, isInsideDismissContainer, isRankedBarListEmpty, isSegmentationGroup, parseHslTriplet, removeCustomPrimaryColor, removeLindaTones, shouldClosePopoverOnInteractOutside, sizeMap, themeColors, useAuraToast, useCloseOnAncestorScroll, useMediaQuery, useNavigationLoading, useThemeContext, withPopoverDismissDefaults };