aloha-ui-library 0.2.1 → 0.2.3

package/dist/index.esm.js

@@ -2762,7 +2762,7 @@ var themeVars = {
   primary: 'var(--theme-primary)'
 };
 
-var _excluded$k = ["className", "variant", "size", "loading", "disabled", "color", "textColor", "borderColor", "icon", "children", "style", "borderWidth"];
+var _excluded$o = ["className", "variant", "size", "loading", "disabled", "color", "textColor", "borderColor", "icon", "children", "style", "borderWidth"];
 var buttonVariants = cva('inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', {
   variants: {
     variant: {
@@ -2799,7 +2799,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     style = _ref.style,
     _ref$borderWidth = _ref.borderWidth,
     borderWidth = _ref$borderWidth === void 0 ? 1 : _ref$borderWidth,
-    props = _objectWithoutProperties(_ref, _excluded$k);
+    props = _objectWithoutProperties(_ref, _excluded$o);
   var customStyle = {};
   // Aplicar color de fondo si se especifica
   if (color) {
@@ -2858,7 +2858,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Button.displayName = 'Button';
 
-var _excluded$j = ["className", "children", "font", "weight", "color", "style"],
+var _excluded$n = ["className", "children", "font", "weight", "color", "style"],
   _excluded2$3 = ["className", "children", "font", "weight", "color", "style"],
   _excluded3$2 = ["className", "children", "font", "weight", "color", "style"],
   _excluded4$1 = ["className", "children", "font", "weight", "color", "style"],
@@ -2897,7 +2897,7 @@ var H1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     weight = _ref.weight,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutProperties(_ref, _excluded$j);
+    props = _objectWithoutProperties(_ref, _excluded$n);
   return jsx("h1", _objectSpread2(_objectSpread2({
     ref: ref,
     className: cn('scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl', fontFamilyClasses[font], weight && fontWeightClasses[weight], className),
@@ -2918,7 +2918,7 @@ var H2 = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     props = _objectWithoutProperties(_ref2, _excluded2$3);
   return jsx("h2", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn('scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0', fontFamilyClasses[font], weight && fontWeightClasses[weight], className),
+    className: cn('scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0', fontFamilyClasses[font], weight && fontWeightClasses[weight], className),
     style: _objectSpread2(_objectSpread2({}, getColorStyle(color)), style)
   }, props), {}, {
     children: children
@@ -3052,17 +3052,37 @@ var Muted = /*#__PURE__*/React.forwardRef(function (_ref9, ref) {
 });
 Muted.displayName = 'Muted';
 
-var _excluded$i = ["className", "size", "borderRadius", "showBorder", "backgroundColor", "borderColor", "shadow"],
-  _excluded2$2 = ["className"],
+var _excluded$m = ["className", "size", "borderRadius", "showBorder", "backgroundColor", "borderColor", "shadow", "padding", "margin", "style"],
+  _excluded2$2 = ["className", "padding", "margin", "style"],
   _excluded3$1 = ["className", "font", "weight", "descriptionColor", "small", "children"],
   _excluded4 = ["color"],
-  _excluded5 = ["className"],
-  _excluded6 = ["className"];
+  _excluded5 = ["className", "padding", "margin", "style"],
+  _excluded6 = ["className", "padding", "margin", "style"];
 var sizeClasses$2 = {
   full: 'w-full',
   constrained: 'max-w-md',
   auto: 'w-auto'
 };
+var spacingValues$1 = {
+  none: '0',
+  xs: '0.25rem',
+  sm: '0.5rem',
+  md: '1rem',
+  lg: '1.5rem',
+  xl: '2rem'
+};
+var buildSpacingStyle = function buildSpacingStyle(padding, margin) {
+  var style = {};
+  if (padding !== undefined) {
+    var _spacingValues$paddin;
+    style.padding = (_spacingValues$paddin = spacingValues$1[padding]) !== null && _spacingValues$paddin !== void 0 ? _spacingValues$paddin : padding;
+  }
+  if (margin !== undefined) {
+    var _spacingValues$margin;
+    style.margin = (_spacingValues$margin = spacingValues$1[margin]) !== null && _spacingValues$margin !== void 0 ? _spacingValues$margin : margin;
+  }
+  return style;
+};
 var borderRadiusClasses = {
   none: 'rounded-none',
   sm: 'rounded-sm',
@@ -3128,20 +3148,27 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     borderColor = _ref$borderColor === void 0 ? 'default' : _ref$borderColor,
     _ref$shadow = _ref.shadow,
     shadow = _ref$shadow === void 0 ? true : _ref$shadow,
-    props = _objectWithoutProperties(_ref, _excluded$i);
+    padding = _ref.padding,
+    margin = _ref.margin,
+    style = _ref.style,
+    props = _objectWithoutProperties(_ref, _excluded$m);
   return jsx("div", _objectSpread2({
     ref: ref,
-    className: cn('text-card-foreground', sizeClasses$2[size], borderRadiusClasses[borderRadius], showBorder ? 'border' : '', showBorder ? getBorderColor(borderColor) : '', getBackgroundColor(backgroundColor), shadow ? 'shadow-sm' : '', className)
+    className: cn('text-card-foreground', sizeClasses$2[size], borderRadiusClasses[borderRadius], showBorder ? 'border' : '', showBorder ? getBorderColor(borderColor) : '', getBackgroundColor(backgroundColor), shadow ? 'shadow-sm' : '', className),
+    style: _objectSpread2(_objectSpread2({}, buildSpacingStyle(padding, margin)), style)
   }, props));
 });
 Card.displayName = 'Card';
-// Subcomponentes flexibles
 var CardHeader = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var className = _ref2.className,
+    padding = _ref2.padding,
+    margin = _ref2.margin,
+    style = _ref2.style,
     props = _objectWithoutProperties(_ref2, _excluded2$2);
   return jsx("div", _objectSpread2({
     ref: ref,
-    className: cn('flex flex-col space-y-1.5 p-6', className)
+    className: cn('flex flex-col space-y-1.5', padding === undefined ? 'p-6' : '', className),
+    style: _objectSpread2(_objectSpread2({}, buildSpacingStyle(padding, margin)), style)
   }, props));
 });
 CardHeader.displayName = 'CardHeader';
@@ -3212,24 +3239,32 @@ var CardDescription = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
 CardDescription.displayName = 'CardDescription';
 var CardContent = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
   var className = _ref5.className,
+    padding = _ref5.padding,
+    margin = _ref5.margin,
+    style = _ref5.style,
     props = _objectWithoutProperties(_ref5, _excluded5);
   return jsx("div", _objectSpread2({
     ref: ref,
-    className: cn('p-6 pt-0', className)
+    className: cn(padding === undefined ? 'p-6 pt-0' : '', className),
+    style: _objectSpread2(_objectSpread2({}, buildSpacingStyle(padding, margin)), style)
   }, props));
 });
 CardContent.displayName = 'CardContent';
 var CardFooter = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
   var className = _ref6.className,
+    padding = _ref6.padding,
+    margin = _ref6.margin,
+    style = _ref6.style,
     props = _objectWithoutProperties(_ref6, _excluded6);
   return jsx("div", _objectSpread2({
     ref: ref,
-    className: cn('flex items-center p-6 pt-0', className)
+    className: cn('flex items-center', padding === undefined ? 'p-6 pt-0' : '', className),
+    style: _objectSpread2(_objectSpread2({}, buildSpacingStyle(padding, margin)), style)
   }, props));
 });
 CardFooter.displayName = 'CardFooter';
 
-var _excluded$h = ["className", "src", "alt", "fallback", "size"];
+var _excluded$l = ["className", "src", "alt", "fallback", "size"];
 var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _alt$charAt;
   var className = _ref.className,
@@ -3238,7 +3273,7 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     fallback = _ref.fallback,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'md' : _ref$size,
-    props = _objectWithoutProperties(_ref, _excluded$h);
+    props = _objectWithoutProperties(_ref, _excluded$l);
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     imageFailed = _React$useState2[0],
@@ -3271,7 +3306,7 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Avatar.displayName = 'Avatar';
 
-var _excluded$g = ["className", "variant"];
+var _excluded$k = ["className", "variant"];
 var badgeVariants = cva('inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', {
   variants: {
     variant: {
@@ -3288,7 +3323,7 @@ var badgeVariants = cva('inline-flex items-center rounded-full border px-2.5 py-
 function Badge(_ref) {
   var className = _ref.className,
     variant = _ref.variant,
-    props = _objectWithoutProperties(_ref, _excluded$g);
+    props = _objectWithoutProperties(_ref, _excluded$k);
   return jsx("div", _objectSpread2({
     className: cn(badgeVariants({
       variant: variant
@@ -3296,7 +3331,7 @@ function Badge(_ref) {
   }, props));
 }
 
-var _excluded$f = ["className", "type", "label", "helperText", "required", "id"];
+var _excluded$j = ["className", "type", "label", "helperText", "required", "id"];
 var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     type = _ref.type,
@@ -3304,7 +3339,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     helperText = _ref.helperText,
     required = _ref.required,
     id = _ref.id,
-    props = _objectWithoutProperties(_ref, _excluded$f);
+    props = _objectWithoutProperties(_ref, _excluded$j);
   var inputId = id || "input-".concat(Math.random().toString(36).substr(2, 9));
   return jsxs("div", {
     className: "w-full",
@@ -3337,12 +3372,12 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Input.displayName = 'Input';
 
-var _excluded$e = ["className", "label", "id"];
+var _excluded$i = ["className", "label", "id"];
 var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     label = _ref.label,
     id = _ref.id,
-    props = _objectWithoutProperties(_ref, _excluded$e);
+    props = _objectWithoutProperties(_ref, _excluded$i);
   var checkboxId = id || "checkbox-".concat(Math.random().toString(36).substr(2, 9));
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -3402,7 +3437,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Checkbox.displayName = 'Checkbox';
 
-var _excluded$d = ["className", "label", "font", "weight", "labelColor", "id"];
+var _excluded$h = ["className", "label", "font", "weight", "labelColor", "id"];
 var Switch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     label = _ref.label,
@@ -3410,7 +3445,7 @@ var Switch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     weight = _ref.weight,
     labelColor = _ref.labelColor,
     id = _ref.id,
-    props = _objectWithoutProperties(_ref, _excluded$d);
+    props = _objectWithoutProperties(_ref, _excluded$h);
   var switchId = id || "switch-".concat(Math.random().toString(36).substr(2, 9));
   return jsxs("div", {
     className: "flex items-center space-x-3",
@@ -3436,11 +3471,11 @@ var Switch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Switch.displayName = 'Switch';
 
-var _excluded$c = ["className", "onSearch"];
+var _excluded$g = ["className", "onSearch"];
 var SearchInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onSearch = _ref.onSearch,
-    props = _objectWithoutProperties(_ref, _excluded$c);
+    props = _objectWithoutProperties(_ref, _excluded$g);
   var handleKeyDown = function handleKeyDown(e) {
     if (e.key === 'Enter' && onSearch) {
       onSearch(e.currentTarget.value);
@@ -3460,7 +3495,7 @@ var SearchInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 SearchInput.displayName = 'SearchInput';
 
-var _excluded$b = ["type", "title", "message", "timestamp", "avatar", "read", "onClose", "onClick", "className"];
+var _excluded$f = ["type", "title", "message", "timestamp", "avatar", "read", "onClose", "onClick", "className"];
 var Notification = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var type = _ref.type,
     title = _ref.title,
@@ -3472,7 +3507,7 @@ var Notification = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onClose = _ref.onClose,
     onClick = _ref.onClick,
     className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded$b);
+    props = _objectWithoutProperties(_ref, _excluded$f);
   var typeColors = {
     like: 'text-red-500',
     comment: 'text-blue-500',
@@ -3523,13 +3558,10 @@ var Notification = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Notification.displayName = 'Notification';
 
-var _excluded$a = ["className", "text", "component", "font", "weight", "textColor", "lineColor", "lineThickness"];
+var _excluded$e = ["className", "text", "component", "font", "weight", "textColor", "lineColor", "lineThickness", "avatars", "avatarRingColor", "rightSlot"];
+// ── Color de la línea (herencia del original) ─────────────────────
 var getLineColorClass = function getLineColorClass(color) {
   if (!color || color === 'default') return 'bg-gray-300';
-  if (color.startsWith('theme-')) {
-    return '';
-  }
-  // Mapeo de colores a clases Tailwind
   var colorMap = {
     olivo: 'bg-[#383517]',
     lima: 'bg-[#B4DE6E]',
@@ -3548,6 +3580,7 @@ var getLineColorClass = function getLineColorClass(color) {
   };
   return colorMap[color] || 'bg-gray-300';
 };
+// ── Componente ─────────────────────────────────────────────────────
 var TextDivider = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     text = _ref.text,
@@ -3561,7 +3594,10 @@ var TextDivider = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     lineColor = _ref$lineColor === void 0 ? 'piedra' : _ref$lineColor,
     _ref$lineThickness = _ref.lineThickness,
     lineThickness = _ref$lineThickness === void 0 ? 1 : _ref$lineThickness,
-    props = _objectWithoutProperties(_ref, _excluded$a);
+    avatars = _ref.avatars,
+    avatarRingColor = _ref.avatarRingColor,
+    rightSlot = _ref.rightSlot,
+    props = _objectWithoutProperties(_ref, _excluded$e);
   var renderText = function renderText() {
     var commonProps = {
       font: font,
@@ -3601,21 +3637,41 @@ var TextDivider = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         }));
     }
   };
+  var hasAvatars = avatars && avatars.length > 0;
   return jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn('flex items-center gap-4 w-full', className)
+    className: cn('text-divider', className)
   }, props), {}, {
-    children: [renderText(), jsx("div", {
-      className: cn('flex-1', getLineColorClass(lineColor)),
+    children: [hasAvatars && jsx("span", {
+      className: "text-divider__avatar-stack",
+      style: {
+        '--td-ring': avatarRingColor
+      },
+      children: avatars.map(function (av, i) {
+        return jsx(Avatar, {
+          src: av.src,
+          fallback: av.fallback,
+          size: "sm",
+          className: "text-divider__stack-avatar",
+          style: {
+            zIndex: avatars.length - i
+          }
+        }, i);
+      })
+    }), renderText(), jsx("div", {
+      className: cn('text-divider__line', getLineColorClass(lineColor)),
       style: {
         height: "".concat(lineThickness, "px")
       }
+    }), rightSlot && jsx("span", {
+      className: "text-divider__right",
+      children: rightSlot
     })]
   }));
 });
 TextDivider.displayName = 'TextDivider';
 
-var _excluded$9 = ["className", "children", "color", "hoverColor", "underline", "external"],
+var _excluded$d = ["className", "children", "color", "hoverColor", "underline", "external"],
   _excluded2$1 = ["to"],
   _excluded3 = ["href", "target", "rel"];
 var getColorClass = function getColorClass(color) {
@@ -3679,7 +3735,7 @@ var Link = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     underline = _ref$underline === void 0 ? 'hover' : _ref$underline,
     _ref$external = _ref.external,
     external = _ref$external === void 0 ? false : _ref$external,
-    props = _objectWithoutProperties(_ref, _excluded$9);
+    props = _objectWithoutProperties(_ref, _excluded$d);
   var linkClasses = cn('inline-flex items-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', getColorClass(color), hoverColor ? '' : getHoverColorClass(color), getUnderlineClass(underline), className);
   // Si tiene la prop "to", usar React Router Link
   if ('to' in props && props.to) {
@@ -3720,7 +3776,7 @@ var Link = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Link.displayName = 'Link';
 
-var _excluded$8 = ["src", "alt", "width", "height", "objectFit", "loading", "fallbackSrc", "onError", "className"];
+var _excluded$c = ["src", "alt", "width", "height", "objectFit", "loading", "fallbackSrc", "onError", "className"];
 var Image = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var src = _ref.src,
     alt = _ref.alt,
@@ -3733,7 +3789,7 @@ var Image = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     fallbackSrc = _ref.fallbackSrc,
     onError = _ref.onError,
     className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded$8);
+    props = _objectWithoutProperties(_ref, _excluded$c);
   var _React$useState = React.useState(src),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     imgSrc = _React$useState2[0],
@@ -3797,82 +3853,133 @@ var Image = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Image.displayName = 'Image';
 
+// ─── helpers ────────────────────────────────────────────────────────────────
+var spacingValues = {
+  none: '0',
+  xs: '0.25rem',
+  sm: '0.5rem',
+  md: '1rem',
+  lg: '1.5rem',
+  xl: '2rem'
+};
+var resolveSpacing = function resolveSpacing(val) {
+  var _spacingValues$val;
+  return (_spacingValues$val = spacingValues[val]) !== null && _spacingValues$val !== void 0 ? _spacingValues$val : val;
+};
+/** Width cap for non-fullscreen variants */
+var panelMaxWidth = {
+  sm: '24rem',
+  // 384px
+  md: '32rem',
+  // 512px
+  lg: '48rem',
+  // 768px
+  xl: '64rem',
+  // 1024px
+  full: '100%'
+};
+// ─── component ───────────────────────────────────────────────────────────────
 var Popup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var open = _ref.open,
     onClose = _ref.onClose,
-    title = _ref.title,
-    children = _ref.children,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$backgroundColor = _ref.backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? 'ice' : _ref$backgroundColor,
+    overlayColor = _ref.overlayColor,
+    borderRadius = _ref.borderRadius,
+    className = _ref.className,
+    title = _ref.title,
+    _ref$titleComponent = _ref.titleComponent,
+    titleComponent = _ref$titleComponent === void 0 ? 'h3' : _ref$titleComponent,
+    titleFont = _ref.titleFont,
+    _ref$titleWeight = _ref.titleWeight,
+    titleWeight = _ref$titleWeight === void 0 ? 'bold' : _ref$titleWeight,
+    _ref$titleColor = _ref.titleColor,
+    titleColor = _ref$titleColor === void 0 ? 'corteza' : _ref$titleColor,
+    _ref$showHeaderDivide = _ref.showHeaderDivider,
+    showHeaderDivider = _ref$showHeaderDivide === void 0 ? true : _ref$showHeaderDivide,
     _ref$showCloseButton = _ref.showCloseButton,
     showCloseButton = _ref$showCloseButton === void 0 ? true : _ref$showCloseButton,
     _ref$closeOnOverlayCl = _ref.closeOnOverlayClick,
     closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
-    className = _ref.className,
-    footer = _ref.footer;
+    _ref$contentPadding = _ref.contentPadding,
+    contentPadding = _ref$contentPadding === void 0 ? 'lg' : _ref$contentPadding,
+    children = _ref.children,
+    footer = _ref.footer,
+    _ref$showFooterDivide = _ref.showFooterDivider,
+    showFooterDivider = _ref$showFooterDivide === void 0 ? true : _ref$showFooterDivide;
+  // ── side effects ──────────────────────────────────────────────────────
   React.useEffect(function () {
-    if (open) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = 'unset';
-    }
+    document.body.style.overflow = open ? 'hidden' : 'unset';
     return function () {
       document.body.style.overflow = 'unset';
     };
   }, [open]);
   React.useEffect(function () {
-    var handleEscape = function handleEscape(e) {
-      if (e.key === 'Escape' && open) {
-        onClose();
-      }
+    var handler = function handler(e) {
+      if (e.key === 'Escape' && open) onClose();
     };
-    document.addEventListener('keydown', handleEscape);
+    document.addEventListener('keydown', handler);
     return function () {
-      return document.removeEventListener('keydown', handleEscape);
+      return document.removeEventListener('keydown', handler);
     };
   }, [open, onClose]);
   if (!open) return null;
-  var sizeClasses = {
-    sm: 'max-w-sm',
-    md: 'max-w-md',
-    lg: 'max-w-lg',
-    xl: 'max-w-xl',
-    full: 'max-w-full mx-4'
-  };
-  var handleOverlayClick = function handleOverlayClick(e) {
-    if (e.target === e.currentTarget && closeOnOverlayClick) {
-      onClose();
-    }
+  // ── derived values ────────────────────────────────────────────────────
+  var isFull = size === 'full';
+  var maxW = panelMaxWidth[size];
+  var padding = resolveSpacing(contentPadding);
+  var TitleTag = titleComponent === 'h4' ? H4 : H3;
+  var handleOverlay = function handleOverlay(e) {
+    if (e.target === e.currentTarget && closeOnOverlayClick) onClose();
   };
-  return jsx("div", {
-    className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
-    onClick: handleOverlayClick,
+  // ── render ────────────────────────────────────────────────────────────
+  return /* ── Overlay ── */jsx("div", {
+    className: "fixed inset-0 z-50 flex items-center justify-center",
+    style: {
+      backgroundColor: overlayColor !== null && overlayColor !== void 0 ? overlayColor : 'rgba(0,0,0,0.45)'
+    },
+    onClick: handleOverlay,
     children: jsxs("div", {
       ref: ref,
-      className: cn('relative w-full animate-in fade-in-0 zoom-in-95 rounded-lg bg-background shadow-lg', sizeClasses[size], className),
+      role: "dialog",
+      "aria-modal": "true",
+      className: cn(/* always fills the full height so the content can scroll inside */
+      'relative flex flex-col w-full overflow-hidden shadow-2xl', /* full-screen: no margin, no rounding; others: centered with padding */
+      isFull ? 'inset-0 rounded-none h-screen' : 'max-h-[90vh] mx-4 my-auto', className),
+      style: {
+        maxWidth: isFull ? '100vw' : maxW,
+        backgroundColor: colors[backgroundColor],
+        borderRadius: isFull ? 0 : borderRadius !== null && borderRadius !== void 0 ? borderRadius : '0.75rem'
+      },
       onClick: function onClick(e) {
         return e.stopPropagation();
       },
       children: [(title || showCloseButton) && jsxs("div", {
-        className: "flex items-center justify-between border-b p-4",
-        children: [title && jsx("h2", {
-          className: "text-lg font-semibold",
+        className: cn('flex-shrink-0 flex items-center justify-between px-5 py-4', showHeaderDivider ? 'border-b border-black/10' : ''),
+        children: [title ? jsx(TitleTag, {
+          font: titleFont,
+          weight: titleWeight,
+          color: titleColor,
+          className: "leading-none m-0 p-0",
           children: title
-        }), showCloseButton && jsxs("button", {
+        }) : jsx("span", {}) /* spacer so X stays right */, showCloseButton && jsx("button", {
           onClick: onClose,
-          className: "rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
-          children: [jsx(X, {
-            className: "h-4 w-4"
-          }), jsx("span", {
-            className: "sr-only",
-            children: "Close"
-          })]
+          "aria-label": "Cerrar",
+          className: cn('ml-auto rounded-lg p-1.5 transition-all', 'opacity-60 hover:opacity-100 hover:bg-black/8', 'focus:outline-none focus:ring-2 focus:ring-black/20'),
+          children: jsx(X, {
+            className: "h-5 w-5"
+          })
         })]
       }), jsx("div", {
-        className: "p-6",
+        className: "flex-1 overflow-y-auto",
+        style: {
+          padding: padding
+        },
         children: children
       }), footer && jsx("div", {
-        className: "border-t p-4",
+        className: cn('flex-shrink-0 px-5 py-4', showFooterDivider ? 'border-t border-black/10' : ''),
         children: footer
       })]
     })
@@ -3951,7 +4058,7 @@ var verticalLogo = "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encodin
 
 var onlyIconLogo = "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20267%20248%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A2%3B%22%3E%20%20%20%20%3Cg%20transform%3D%22matrix%281%2C0%2C0%2C1%2C-1914.773191%2C-17659.607757%29%22%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Mesa-de-trabajo12%22%20serif%3Aid%3D%22Mesa%20de%20trabajo12%22%20transform%3D%22matrix%280.578434%2C0%2C0%2C0.554312%2C1914.773191%2C7961.001329%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20x%3D%220%22%20y%3D%2217496.65%22%20width%3D%22460.139%22%20height%3D%22447.159%22%20style%3D%22fill%3Anone%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%282.822329%2C0%2C0%2C2.714869%2C-19224.018493%2C-14926.881378%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%283.334642%2C0%2C0%2C3.617491%2C6914.667203%2C12026.281834%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C0C0%2C-1.792%200.342%2C-3.157%201.027%2C-4.096C1.712%2C-5.035%202.624%2C-5.504%203.766%2C-5.504C4.874%2C-5.504%205.771%2C-5.035%206.456%2C-4.096C7.141%2C-3.157%207.483%2C-1.792%207.483%2C0C7.483%2C1.792%207.141%2C3.157%206.456%2C4.097C5.771%2C5.035%204.874%2C5.504%203.766%2C5.504C2.624%2C5.504%201.712%2C5.035%201.027%2C4.097C0.342%2C3.157%200%2C1.792%200%2C0M-20.394%2C0C-20.394%2C-1.792%20-20.051%2C-3.157%20-19.367%2C-4.096C-18.682%2C-5.035%20-17.786%2C-5.504%20-16.677%2C-5.504C-15.536%2C-5.504%20-14.623%2C-5.035%20-13.938%2C-4.096C-13.254%2C-3.157%20-12.911%2C-1.792%20-12.911%2C0C-12.911%2C1.792%20-13.254%2C3.157%20-13.938%2C4.097C-14.623%2C5.035%20-15.536%2C5.504%20-16.677%2C5.504C-17.786%2C5.504%20-18.682%2C5.035%20-19.367%2C4.097C-20.051%2C3.157%20-20.394%2C1.792%20-20.394%2C0%22%20style%3D%22fill%3Argb%2856%2C53%2C23%29%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%283.334642%2C0%2C0%2C3.617491%2C6814.639292%2C12106.187862%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C-14.916L4.744%2C-14.916C5.233%2C-12.862%206.138%2C-11.085%207.458%2C-9.585C8.779%2C-8.086%2010.433%2C-6.92%2012.422%2C-6.089C14.41%2C-5.257%2016.628%2C-4.841%2019.073%2C-4.841L27.876%2C-4.841C30.354%2C-4.841%2032.587%2C-5.257%2034.577%2C-6.089C36.565%2C-6.92%2038.22%2C-8.086%2039.541%2C-9.585C40.861%2C-11.085%2041.766%2C-12.862%2042.255%2C-14.916L46.95%2C-14.916C45.874%2C-10.189%2043.673%2C-6.521%2040.348%2C-3.913C37.022%2C-1.304%2032.865%2C0%2027.876%2C0L19.073%2C0C14.085%2C0%209.928%2C-1.304%206.602%2C-3.913C3.277%2C-6.521%201.076%2C-10.189%200%2C-14.916%22%20style%3D%22fill%3Argb%2856%2C53%2C23%29%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%283.334642%2C0%2C0%2C3.617491%2C6971.200715%2C11944.412594%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C14.916L-4.744%2C14.916C-5.233%2C12.862%20-6.138%2C11.085%20-7.458%2C9.585C-8.779%2C8.086%20-10.433%2C6.92%20-12.422%2C6.089C-14.41%2C5.257%20-16.628%2C4.841%20-19.073%2C4.841L-27.876%2C4.841C-30.354%2C4.841%20-32.587%2C5.257%20-34.577%2C6.089C-36.565%2C6.92%20-38.22%2C8.086%20-39.541%2C9.585C-40.861%2C11.085%20-41.766%2C12.862%20-42.255%2C14.916L-46.95%2C14.916C-45.874%2C10.189%20-43.673%2C6.521%20-40.348%2C3.913C-37.022%2C1.304%20-32.865%2C0%20-27.876%2C0L-19.073%2C0C-14.085%2C0%20-9.928%2C1.304%20-6.602%2C3.913C-3.277%2C6.521%20-1.076%2C10.189%200%2C14.916%22%20style%3D%22fill%3Argb%2856%2C53%2C23%29%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E";
 
-var _excluded$7 = ["variant", "size", "color", "className"];
+var _excluded$b = ["variant", "size", "color", "className"];
 var logoMap = {
   horizontal: horizontalLogo,
   vertical: verticalLogo,
@@ -4026,7 +4133,7 @@ var Logo = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'default' : _ref$color,
     className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded$7);
+    props = _objectWithoutProperties(_ref, _excluded$b);
   var logoSrc = logoMap[variant];
   var colorValue = getColorValue$1(color);
   return jsx("div", _objectSpread2(_objectSpread2({
@@ -4065,7 +4172,9 @@ var notifyIcon = "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%
 
 var settingsIcon = "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20355%20355%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A2%3B%22%3E%20%20%20%20%3Cg%20transform%3D%22matrix%281%2C0%2C0%2C1%2C-9400%2C-15697%29%22%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Mesa-de-trabajo10%22%20serif%3Aid%3D%22Mesa%20de%20trabajo10%22%20transform%3D%22matrix%281%2C0%2C0%2C1%2C-0.348653%2C-0.825237%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20x%3D%229400.349%22%20y%3D%2215697.825%22%20width%3D%22354.25%22%20height%3D%22354.25%22%20style%3D%22fill%3Anone%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%285.667973%2C0%2C0%2C5.667973%2C9586.24482%2C15825.626366%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M-18.393%2C5.03C-18.755%2C4.802%20-19.08%2C4.491%20-19.367%2C4.097C-20.051%2C3.157%20-20.394%2C1.792%20-20.394%2C0C-20.394%2C-1.792%20-20.051%2C-3.157%20-19.367%2C-4.096C-19.08%2C-4.49%20-18.755%2C-4.801%20-18.393%2C-5.03L-18.393%2C-10.482L-14.912%2C-10.482L-14.912%2C-5.024C-14.548%2C-4.796%20-14.223%2C-4.487%20-13.938%2C-4.096C-13.254%2C-3.157%20-12.911%2C-1.792%20-12.911%2C0C-12.911%2C1.792%20-13.254%2C3.157%20-13.938%2C4.097C-14.223%2C4.487%20-14.548%2C4.797%20-14.912%2C5.025L-14.912%2C27.886L-18.393%2C27.886L-18.393%2C5.03ZM-4.104%2C22.996C-4.466%2C22.768%20-4.791%2C22.457%20-5.078%2C22.063C-5.762%2C21.123%20-6.105%2C19.758%20-6.105%2C17.966C-6.105%2C16.174%20-5.762%2C14.809%20-5.078%2C13.87C-4.791%2C13.476%20-4.466%2C13.165%20-4.104%2C12.936L-4.104%2C-10.482L-0.623%2C-10.482L-0.623%2C12.942C-0.259%2C13.17%200.066%2C13.479%200.351%2C13.87C1.035%2C14.809%201.378%2C16.174%201.378%2C17.966C1.378%2C19.758%201.035%2C21.123%200.351%2C22.063C0.066%2C22.454%20-0.259%2C22.763%20-0.623%2C22.991L-0.623%2C27.886L-4.104%2C27.886L-4.104%2C22.996ZM11.817%2C10.534C11.455%2C10.306%2011.13%2C9.995%2010.843%2C9.601C10.159%2C8.661%209.816%2C7.296%209.816%2C5.504C9.816%2C3.712%2010.159%2C2.347%2010.843%2C1.408C11.13%2C1.014%2011.455%2C0.703%2011.817%2C0.474L11.817%2C-10.482L15.298%2C-10.482L15.298%2C0.48C15.662%2C0.708%2015.987%2C1.017%2016.272%2C1.408C16.956%2C2.347%2017.299%2C3.712%2017.299%2C5.504C17.299%2C7.296%2016.956%2C8.661%2016.272%2C9.601C15.987%2C9.991%2015.662%2C10.301%2015.298%2C10.529L15.298%2C27.886L11.817%2C27.886L11.817%2C10.534Z%22%20style%3D%22fill%3Argb%2856%2C53%2C23%29%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E";
 
-var _excluded$6 = ["name", "size", "color", "className"];
+var streakIcon = "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20355%20355%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A2%3B%22%3E%20%20%20%20%3Cg%20transform%3D%22matrix%281%2C0%2C0%2C1%2C-28613.284073%2C-17847.031094%29%22%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Mesa-de-trabajo10%22%20serif%3Aid%3D%22Mesa%20de%20trabajo10%22%20transform%3D%22matrix%281%2C0%2C0%2C1%2C19212.93542%2C2149.205856%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20x%3D%229400.349%22%20y%3D%2215697.825%22%20width%3D%22354.25%22%20height%3D%22354.25%22%20style%3D%22fill%3Anone%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%28-4.166667%2C-0%2C0%2C-4.166667%2C9481.636926%2C15989.45809%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0.269%2C15.399L0.269%2C32.865C0.365%2C33.956%200.501%2C37.611%20-1.667%2C39.964C-2.83%2C41.227%20-4.604%2C42.231%20-7.413%2C42.231C-8.788%2C42.231%20-9.904%2C41.116%20-9.904%2C39.74L-9.904%2C33.323C-9.994%2C33.175%20-10.156%2C33.01%20-10.442%2C33.003L-10.442%2C45.325C-10.396%2C46.313%20-10.408%2C50.299%20-13.393%2C52.829C-14.793%2C54.015%20-16.859%2C54.95%20-19.985%2C54.95C-21.06%2C54.95%20-22.013%2C54.261%20-22.35%2C53.241C-22.688%2C52.221%20-22.333%2C51.099%20-21.471%2C50.458C-21.471%2C50.458%20-19.635%2C48.921%20-19.635%2C45.595C-19.635%2C44.323%20-19.643%2C43.029%20-19.862%2C41.841C-20.018%2C40.995%20-20.268%2C40.204%20-20.834%2C39.599C-21.67%2C38.708%20-23.087%2C38.316%20-25.314%2C38.316C-25.369%2C38.316%20-25.424%2C38.314%20-25.479%2C38.31C-25.479%2C38.31%20-27.186%2C38.158%20-28.2%2C39.358C-28.671%2C39.916%20-28.931%2C40.758%20-28.931%2C41.961C-28.931%2C44.077%20-29.818%2C45.318%20-30.926%2C46.004C-31.939%2C46.632%20-33.357%2C46.847%20-35.025%2C46.357C-36.917%2C45.802%20-39.358%2C44.227%20-41.553%2C41.884C-44.694%2C38.531%20-47.343%2C33.638%20-47.343%2C28.469L-47.343%2C15.399L-47.379%2C15.399C-47.367%2C15.338%20-47.355%2C15.278%20-47.343%2C15.217C-46.737%2C12.199%20-45.543%2C9.555%20-43.762%2C7.285C-43.442%2C6.877%20-43.106%2C6.485%20-42.755%2C6.109C-42.32%2C5.644%20-41.861%2C5.204%20-41.379%2C4.789C-41.048%2C4.484%20-40.705%2C4.193%20-40.348%2C3.913C-37.022%2C1.304%20-32.865%2C0%20-27.876%2C0L-19.073%2C0C-14.085%2C0%20-9.928%2C1.304%20-6.602%2C3.913C-5.755%2C4.577%20-4.981%2C5.31%20-4.28%2C6.112C-4.146%2C6.265%20-4.015%2C6.421%20-3.886%2C6.579C-3.687%2C6.809%20-3.492%2C7.044%20-3.303%2C7.285C-1.531%2C9.545%20-0.34%2C12.174%200.269%2C15.175C0.284%2C15.25%200.299%2C15.324%200.313%2C15.399L0.269%2C15.399ZM-42.36%2C15.399L-42.36%2C28.469C-42.36%2C33.093%20-39.41%2C37.361%20-36.526%2C39.805C-35.716%2C40.491%20-34.913%2C41.031%20-34.177%2C41.365C-34.093%2C41.403%20-33.999%2C41.439%20-33.904%2C41.471C-33.81%2C39.015%20-33.008%2C37.328%20-32.005%2C36.142C-29.669%2C33.377%20-25.933%2C33.321%20-25.255%2C33.335L-25.314%2C33.333C-21.203%2C33.333%20-18.742%2C34.546%20-17.199%2C36.191C-16.374%2C37.072%20-15.809%2C38.126%20-15.425%2C39.286L-15.425%2C32.857L-15.425%2C32.825C-15.425%2C32.825%20-15.371%2C30.493%20-13.647%2C29.087C-12.926%2C28.499%20-11.92%2C28.02%20-10.463%2C28.02C-6.093%2C28.02%20-5.002%2C32.229%20-5.002%2C32.229C-4.948%2C32.434%20-4.921%2C32.645%20-4.921%2C32.857L-4.921%2C35.978C-4.359%2C34.812%20-4.679%2C33.375%20-4.679%2C33.375C-4.702%2C33.239%20-4.714%2C33.1%20-4.714%2C32.962L-4.714%2C15.399L-4.839%2C15.399C-5.03%2C14.658%20-5.269%2C13.945%20-5.556%2C13.259C-6.416%2C11.201%20-7.623%2C9.488%20-9.175%2C8.12C-9.867%2C7.511%20-10.617%2C6.987%20-11.424%2C6.548C-11.746%2C6.385%20-12.079%2C6.232%20-12.422%2C6.089C-14.41%2C5.257%20-16.628%2C4.841%20-19.073%2C4.841L-27.876%2C4.841C-30.354%2C4.841%20-32.587%2C5.257%20-34.577%2C6.089C-35.243%2C6.367%20-35.871%2C6.683%20-36.463%2C7.037C-36.963%2C7.362%20-37.439%2C7.723%20-37.891%2C8.12C-39.443%2C9.488%20-40.65%2C11.201%20-41.51%2C13.259C-41.797%2C13.945%20-42.035%2C14.658%20-42.227%2C15.399L-42.36%2C15.399Z%22%20style%3D%22fill%3Argb%2856%2C53%2C23%29%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E";
+
+var _excluded$a = ["name", "size", "color", "className"];
 var iconMap = {
   chat: chatIcon,
   friends: friendsIcon,
@@ -4075,7 +4184,8 @@ var iconMap = {
   mail: mailIcon,
   music: musicIcon,
   notify: notifyIcon,
-  settings: settingsIcon
+  settings: settingsIcon,
+  streak: streakIcon
 };
 var sizeClasses = {
   xs: 'w-4 h-4',
@@ -4115,7 +4225,7 @@ var Icon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'default' : _ref$color,
     className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded$6);
+    props = _objectWithoutProperties(_ref, _excluded$a);
   var iconSrc = iconMap[name];
   var colorValue = getColorValue(color);
   return jsx("div", _objectSpread2(_objectSpread2({
@@ -4136,6 +4246,324 @@ var Icon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Icon.displayName = 'Icon';
 
+var _excluded$9 = ["count", "size", "color", "className"];
+var textSizeClasses = {
+  xs: 'text-xs',
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-lg',
+  xl: 'text-xl',
+  '2xl': 'text-2xl'
+};
+// Map StreakSize to IconSize (they share the same values)
+var iconSizeMap = {
+  xs: 'xs',
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg',
+  xl: 'xl',
+  '2xl': '2xl'
+};
+var Streak = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var count = _ref.count,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'girasol' : _ref$color,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded$9);
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn('inline-flex items-center gap-1', className)
+  }, props), {}, {
+    children: [jsx(Icon, {
+      name: "streak",
+      size: iconSizeMap[size],
+      color: color
+    }), jsx("span", {
+      className: cn('font-bold leading-none tabular-nums', textSizeClasses[size]),
+      children: count
+    })]
+  }));
+});
+Streak.displayName = 'Streak';
+
+var _excluded$8 = ["message", "name", "time", "avatarSrc", "avatarFallback", "variant", "bgColor", "messageColor", "headerColor", "className", "style"];
+var ChatMessage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var message = _ref.message,
+    name = _ref.name,
+    time = _ref.time,
+    avatarSrc = _ref.avatarSrc,
+    avatarFallback = _ref.avatarFallback,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'received' : _ref$variant,
+    bgColor = _ref.bgColor,
+    messageColor = _ref.messageColor,
+    headerColor = _ref.headerColor,
+    className = _ref.className,
+    style = _ref.style,
+    props = _objectWithoutProperties(_ref, _excluded$8);
+  var isSent = variant === 'sent';
+  // Colores por defecto según variante, sobreescribibles via props
+  var defaultBg = isSent ? 'bosque' : 'lima';
+  var defaultMsg = isSent ? 'hueso' : 'olivo';
+  var defaultHdr = isSent ? 'lima' : 'olivo';
+  var resolvedBg = colors[bgColor !== null && bgColor !== void 0 ? bgColor : defaultBg];
+  var resolvedMsg = colors[messageColor !== null && messageColor !== void 0 ? messageColor : defaultMsg];
+  var resolvedHdr = colors[headerColor !== null && headerColor !== void 0 ? headerColor : defaultHdr];
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn('chat-message', isSent ? 'chat-message--sent' : 'chat-message--received', className),
+    style: _objectSpread2({
+      '--chat-bg': resolvedBg,
+      '--chat-msg': resolvedMsg,
+      '--chat-hdr': resolvedHdr
+    }, style)
+  }, props), {}, {
+    children: [jsxs("div", {
+      className: "chat-message__header",
+      children: [jsx(Avatar, {
+        src: avatarSrc,
+        alt: name,
+        fallback: avatarFallback || name.charAt(0).toUpperCase(),
+        size: "sm",
+        className: "chat-message__avatar"
+      }), jsx("span", {
+        className: "chat-message__name",
+        children: name
+      }), jsx("span", {
+        className: "chat-message__separator",
+        children: "-"
+      }), jsx("span", {
+        className: "chat-message__time",
+        children: time
+      })]
+    }), jsx("p", {
+      className: "chat-message__body",
+      children: message
+    })]
+  }));
+});
+ChatMessage.displayName = 'ChatMessage';
+
+var _excluded$7 = ["questionLabel", "questionText", "labelAvatarSrc", "labelAvatarFallback", "state", "respondents", "respondButtonLabel", "onRespond", "bgColor", "labelBgColor", "labelTextColor", "buttonBgColor", "buttonTextColor", "respondedTextColor", "questionTextColor", "answerBgColor", "answerTextColor", "className", "style"];
+// ── Defaults por color ────────────────────────────────────────────
+var DEFAULT_COLORS = {
+  bgColor: 'koala',
+  labelBgColor: 'lavanda',
+  labelTextColor: 'hueso',
+  buttonBgColor: 'marmol',
+  buttonTextColor: 'olivo',
+  respondedTextColor: 'hueso',
+  questionTextColor: 'hueso',
+  answerBgColor: 'hueso',
+  answerTextColor: 'olivo'
+};
+// ── Componente ────────────────────────────────────────────────────
+var QuestionCard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var questionLabel = _ref.questionLabel,
+    questionText = _ref.questionText,
+    labelAvatarSrc = _ref.labelAvatarSrc,
+    _ref$labelAvatarFallb = _ref.labelAvatarFallback,
+    labelAvatarFallback = _ref$labelAvatarFallb === void 0 ? '?' : _ref$labelAvatarFallb,
+    _ref$state = _ref.state,
+    state = _ref$state === void 0 ? 'pending' : _ref$state,
+    _ref$respondents = _ref.respondents,
+    respondents = _ref$respondents === void 0 ? [] : _ref$respondents,
+    _ref$respondButtonLab = _ref.respondButtonLabel,
+    respondButtonLabel = _ref$respondButtonLab === void 0 ? 'Responder' : _ref$respondButtonLab,
+    onRespond = _ref.onRespond,
+    bgColor = _ref.bgColor,
+    labelBgColor = _ref.labelBgColor,
+    labelTextColor = _ref.labelTextColor,
+    buttonBgColor = _ref.buttonBgColor,
+    buttonTextColor = _ref.buttonTextColor,
+    respondedTextColor = _ref.respondedTextColor,
+    questionTextColor = _ref.questionTextColor,
+    answerBgColor = _ref.answerBgColor,
+    answerTextColor = _ref.answerTextColor,
+    className = _ref.className,
+    style = _ref.style,
+    props = _objectWithoutProperties(_ref, _excluded$7);
+  var resolved = {
+    bg: colors[bgColor !== null && bgColor !== void 0 ? bgColor : DEFAULT_COLORS.bgColor],
+    labelBg: colors[labelBgColor !== null && labelBgColor !== void 0 ? labelBgColor : DEFAULT_COLORS.labelBgColor],
+    labelText: colors[labelTextColor !== null && labelTextColor !== void 0 ? labelTextColor : DEFAULT_COLORS.labelTextColor],
+    btnBg: colors[buttonBgColor !== null && buttonBgColor !== void 0 ? buttonBgColor : DEFAULT_COLORS.buttonBgColor],
+    btnText: colors[buttonTextColor !== null && buttonTextColor !== void 0 ? buttonTextColor : DEFAULT_COLORS.buttonTextColor],
+    respText: colors[respondedTextColor !== null && respondedTextColor !== void 0 ? respondedTextColor : DEFAULT_COLORS.respondedTextColor],
+    qText: colors[questionTextColor !== null && questionTextColor !== void 0 ? questionTextColor : DEFAULT_COLORS.questionTextColor],
+    ansBg: colors[answerBgColor !== null && answerBgColor !== void 0 ? answerBgColor : DEFAULT_COLORS.answerBgColor],
+    ansText: colors[answerTextColor !== null && answerTextColor !== void 0 ? answerTextColor : DEFAULT_COLORS.answerTextColor]
+  };
+  var showRespondents = state === 'responded' || state === 'closed';
+  var showRevealed = state === 'revealed';
+  var showButton = state === 'pending' || state === 'responded';
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn('question-card', className),
+    style: _objectSpread2({
+      '--qc-bg': resolved.bg,
+      '--qc-label-bg': resolved.labelBg,
+      '--qc-label-txt': resolved.labelText,
+      '--qc-btn-bg': resolved.btnBg,
+      '--qc-btn-txt': resolved.btnText,
+      '--qc-resp-txt': resolved.respText,
+      '--qc-q-txt': resolved.qText,
+      '--qc-ans-bg': resolved.ansBg,
+      '--qc-ans-txt': resolved.ansText
+    }, style)
+  }, props), {}, {
+    children: [jsxs("div", {
+      className: "question-card__label",
+      children: [jsx(Avatar, {
+        src: labelAvatarSrc,
+        fallback: labelAvatarFallback,
+        size: "sm",
+        className: "question-card__label-avatar"
+      }), jsx("span", {
+        className: "question-card__label-text",
+        children: questionLabel
+      })]
+    }), showRevealed && jsxs("div", {
+      className: "question-card__revealed",
+      children: [questionText && jsx("p", {
+        className: "question-card__question-text",
+        children: questionText
+      }), jsx("ul", {
+        className: "question-card__answers",
+        children: respondents.map(function (r, i) {
+          var _r$avatarFallback;
+          return jsxs("li", {
+            className: "question-card__answer-row",
+            children: [jsx(Avatar, {
+              src: r.avatarSrc,
+              fallback: (_r$avatarFallback = r.avatarFallback) !== null && _r$avatarFallback !== void 0 ? _r$avatarFallback : r.name.charAt(0).toUpperCase(),
+              size: "sm",
+              className: "question-card__answer-avatar"
+            }), jsx("span", {
+              className: "question-card__answer-name",
+              children: r.name
+            }), r.answer && jsx("span", {
+              className: "question-card__answer-chip",
+              children: r.answer
+            })]
+          }, i);
+        })
+      })]
+    }), showRespondents && jsx("ul", {
+      className: "question-card__respondents",
+      children: respondents.map(function (r, i) {
+        var _r$avatarFallback2;
+        return jsxs("li", {
+          className: "question-card__respondent",
+          children: [jsx(Avatar, {
+            src: r.avatarSrc,
+            fallback: (_r$avatarFallback2 = r.avatarFallback) !== null && _r$avatarFallback2 !== void 0 ? _r$avatarFallback2 : r.name.charAt(0).toUpperCase(),
+            size: "sm",
+            className: "question-card__respondent-avatar"
+          }), jsxs("span", {
+            className: "question-card__respondent-text",
+            children: [r.name, " ya ha respondido."]
+          })]
+        }, i);
+      })
+    }), showButton && jsx("button", {
+      type: "button",
+      className: "question-card__btn",
+      onClick: onRespond,
+      children: respondButtonLabel
+    })]
+  }));
+});
+QuestionCard.displayName = 'QuestionCard';
+
+var _excluded$6 = ["variant", "name", "avatarSrc", "avatarFallback", "avatars", "bgColor", "nameColor", "chevronColor", "avatarRingColor", "className", "style", "onClick"];
+// ── Componente ────────────────────────────────────────────────────
+var FriendListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'user' : _ref$variant,
+    name = _ref.name,
+    avatarSrc = _ref.avatarSrc,
+    avatarFallback = _ref.avatarFallback,
+    _ref$avatars = _ref.avatars,
+    avatars = _ref$avatars === void 0 ? [] : _ref$avatars,
+    bgColor = _ref.bgColor,
+    nameColor = _ref.nameColor,
+    chevronColor = _ref.chevronColor,
+    avatarRingColor = _ref.avatarRingColor,
+    className = _ref.className,
+    style = _ref.style,
+    onClick = _ref.onClick,
+    props = _objectWithoutProperties(_ref, _excluded$6);
+  var resolved = {
+    bg: colors[bgColor !== null && bgColor !== void 0 ? bgColor : 'marmol'],
+    name: colors[nameColor !== null && nameColor !== void 0 ? nameColor : 'olivo'],
+    chevron: colors[chevronColor !== null && chevronColor !== void 0 ? chevronColor : 'olivo'],
+    ring: colors[avatarRingColor !== null && avatarRingColor !== void 0 ? avatarRingColor : 'hueso']
+  };
+  return jsxs("button", _objectSpread2(_objectSpread2({
+    ref: ref,
+    type: "button",
+    className: cn('friend-list-item', "friend-list-item--".concat(variant), className),
+    style: _objectSpread2({
+      '--fi-bg': resolved.bg,
+      '--fi-name': resolved.name,
+      '--fi-chevron': resolved.chevron,
+      '--fi-ring': resolved.ring
+    }, style),
+    onClick: onClick
+  }, props), {}, {
+    children: [jsx("span", {
+      className: "friend-list-item__left",
+      children: variant === 'user' ? jsxs(Fragment, {
+        children: [jsx(Avatar, {
+          src: avatarSrc,
+          fallback: avatarFallback !== null && avatarFallback !== void 0 ? avatarFallback : name === null || name === void 0 ? void 0 : name.charAt(0).toUpperCase(),
+          size: "md",
+          className: "friend-list-item__avatar"
+        }), jsx("span", {
+          className: "friend-list-item__name",
+          children: name
+        })]
+      }) : jsxs(Fragment, {
+        children: [jsx("span", {
+          className: "friend-list-item__avatar-stack",
+          children: avatars.slice(0, 4).map(function (av, i) {
+            return jsx(Avatar, {
+              src: av.src,
+              fallback: av.fallback,
+              size: "md",
+              className: "friend-list-item__stack-avatar",
+              style: {
+                zIndex: avatars.length - i
+              }
+            }, i);
+          })
+        }), name && jsx("span", {
+          className: "friend-list-item__name",
+          children: name
+        })]
+      })
+    }), jsx("svg", {
+      className: "friend-list-item__chevron",
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: jsx("polyline", {
+        points: "9 18 15 12 9 6"
+      })
+    })]
+  }));
+});
+FriendListItem.displayName = 'FriendListItem';
+
 var crazyEmoji = "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20100%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A2%3B%22%3E%20%20%20%20%3Cg%20transform%3D%22matrix%281%2C0%2C0%2C1%2C-24613.647556%2C-8169.224252%29%22%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Mesa-de-trabajo7%22%20serif%3Aid%3D%22Mesa%20de%20trabajo7%22%20transform%3D%22matrix%280.126773%2C0%2C0%2C0.126773%2C23935.683955%2C7133.619509%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20x%3D%225347.875%22%20y%3D%228169%22%20width%3D%22788.814%22%20height%3D%22788.814%22%20style%3D%22fill%3Anone%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%281.163034%2C0.432554%2C-2.700494%2C7.260979%2C25045.992665%2C-90144.952853%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%285.278015%2C0%2C0%2C0.845411%2C13292.995826%2C12833.117924%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C-52.861C-9.722%2C-62.886%20-21.995%2C-72.547%20-36.061%2C-66.137C-42.608%2C-63.099%20-47.848%2C-57.98%20-52.861%2C-52.861C-62.886%2C-43.139%20-72.547%2C-30.866%20-66.137%2C-16.8C-63.099%2C-10.253%20-57.98%2C-5.013%20-52.861%2C-0C-43.139%2C10.025%20-30.866%2C19.686%20-16.8%2C13.276C-10.253%2C10.238%20-5.013%2C5.119%200%2C-0C10.025%2C-9.722%2019.686%2C-21.995%2013.276%2C-36.061C10.299%2C-42.608%205.119%2C-47.848%200%2C-52.861%22%20style%3D%22fill%3Argb%28180%2C222%2C110%29%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%285.278015%2C0%2C0%2C0.845411%2C13265.015486%2C12819.184451%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C11.18C-8.997%2C20.083%20-20.468%2C26.07%20-32.917%2C28.36C-26.4%2C31.93%20-19.246%2C33.281%20-11.499%2C29.757C-4.952%2C26.719%200.289%2C21.6%205.301%2C16.481C15.327%2C6.76%2024.987%2C-5.514%2018.577%2C-19.58C18.181%2C-20.442%2017.74%2C-21.284%2017.256%2C-22.101C15.003%2C-9.517%208.986%2C2.087%200%2C11.18%22%20style%3D%22fill%3Argb%28100%2C140%2C44%29%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%28-3.73212%2C0.597796%2C3.73212%2C0.597796%2C13313.424099%2C12801.420504%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M3.416%2C-8.246C-0.762%2C-8.246%20-4.149%2C-6.083%20-4.149%2C-3.415C-4.149%2C-0.748%20-0.762%2C1.415%203.416%2C1.415C7.593%2C1.415%2010.98%2C-0.748%2010.98%2C-3.415C10.98%2C-6.083%207.593%2C-8.246%203.416%2C-8.246%22%20style%3D%22fill%3Argb%28100%2C140%2C44%29%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%28-3.73212%2C0.597796%2C3.73212%2C0.597796%2C13120.528495%2C12832.31267%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M3.416%2C-8.246C-0.762%2C-8.246%20-4.149%2C-6.083%20-4.149%2C-3.415C-4.149%2C-0.748%20-0.762%2C1.415%203.416%2C1.415C7.593%2C1.415%2010.98%2C-0.748%2010.98%2C-3.415C10.98%2C-6.083%207.593%2C-8.246%203.416%2C-8.246%22%20style%3D%22fill%3Argb%28100%2C140%2C44%29%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%285.278015%2C0%2C0%2C0.845411%2C13142.832085%2C12829.559927%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%220.001%22%20height%3D%220.001%22%20style%3D%22fill%3Argb%2826%2C26%2C26%29%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%285.278015%2C0%2C0%2C0.845411%2C13292.594697%2C12834.210364%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C-29.029C-0.763%2C-30.332%20-2.438%2C-30.77%20-3.741%2C-30.007C-3.873%2C-29.93%20-3.999%2C-29.841%20-4.116%2C-29.743C-4.633%2C-25.004%20-7.701%2C-19.11%20-12.744%2C-14.128C-17.787%2C-9.145%20-23.62%2C-6.016%20-28.36%2C-5.5C-29.33%2C-4.343%20-29.178%2C-2.618%20-28.021%2C-1.648C-27.904%2C-1.549%20-27.778%2C-1.461%20-27.646%2C-1.383C-23.758%2C0.854%20-19.24%2C1.741%20-14.795%2C1.138C-3.716%2C-0.385%204.029%2C-10.601%202.506%2C-21.68C2.151%2C-24.263%201.3%2C-26.753%200%2C-29.014L0%2C-29.029Z%22%20style%3D%22fill%3Argb%2856%2C53%2C23%29%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%28-2.638886%2C0.732159%2C4.570965%2C0.422686%2C13035.098472%2C12809.133067%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M3.289%2C-5.697C-0.21%2C-5.697%20-3.045%2C-3.996%20-3.046%2C-1.899C-3.045%2C0.198%20-0.209%2C1.899%203.289%2C1.897C6.787%2C1.898%209.623%2C0.198%209.623%2C-1.899C9.623%2C-3.997%206.787%2C-5.697%203.289%2C-5.697%22%20style%3D%22fill%3Argb%28100%2C140%2C44%29%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%28-4.570965%2C0.422686%2C2.638886%2C0.732159%2C13138.568672%2C12785.492406%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M1.899%2C-7.087C-1.599%2C-7.087%20-4.435%2C-5.387%20-4.435%2C-3.289C-4.435%2C-1.192%20-1.599%2C0.508%201.899%2C0.507C5.397%2C0.509%208.233%2C-1.192%208.234%2C-3.289C8.233%2C-5.386%205.398%2C-7.087%201.899%2C-7.087%22%20style%3D%22fill%3Argb%28100%2C140%2C44%29%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%285.278015%2C0%2C0%2C0.845411%2C13258.441191%2C12837.363409%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C-26.394L-14.825%2C-11.569L-7.428%2C-4.11C-3.317%2C0%203.348%2C0%207.458%2C-4.11C11.569%2C-8.221%2011.569%2C-14.886%207.458%2C-18.997L0.061%2C-26.394L0%2C-26.394Z%22%20style%3D%22fill%3Argb%28255%2C96%2C138%29%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%285.278015%2C0%2C0%2C0.845411%2C13284.81807%2C12826.446532%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C6.342C-3.373%2C9.791%20-8.624%2C10.584%20-12.866%2C8.286L-12.425%2C8.742C-8.331%2C12.853%20-1.68%2C12.866%202.43%2C8.772C6.541%2C4.678%206.555%2C-1.973%202.461%2C-6.083L2.005%2C-6.524C4.288%2C-2.269%203.469%2C2.984%200%2C6.342%22%20style%3D%22fill%3Argb%28238%2C69%2C114%29%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%28-3.73212%2C0.597796%2C3.73212%2C0.597796%2C13250.422054%2C12823.362128%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M2.456%2C-5.878C3.004%2C-5.889%203.541%2C-5.867%204.056%2C-5.847C3.744%2C-1.238%203.165%2C1.855%202.456%2C1.877C1.747%2C1.898%201.221%2C-1.185%200.856%2C-5.847C1.371%2C-5.867%201.962%2C-5.835%202.456%2C-5.878%22%20style%3D%22fill%3Argb%28238%2C69%2C114%29%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%283.73212%2C0.597796%2C3.73212%2C-0.597796%2C13116.331755%2C12819.313122%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M12.121%2C-5.021C15.108%2C-1.305%2017.105%2C5.033%2017.062%2C12.122C17.02%2C19.211%2015.108%2C25.548%2012.121%2C29.264C11.627%2C23.893%2011.359%2C18.126%2011.37%2C12.122C11.38%2C6.117%2011.627%2C0.35%2012.121%2C-5.021%22%20style%3D%22fill%3Awhite%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%28-5.278015%2C0%2C0%2C0.845411%2C13193.902155%2C12811.582176%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C-29.043C-8.02%2C-29.043%20-14.522%2C-22.541%20-14.522%2C-14.521C-14.522%2C-6.501%20-8.02%2C0%200%2C0C8.02%2C0%2014.522%2C-6.501%2014.522%2C-14.521C14.522%2C-22.541%208.02%2C-29.043%200%2C-29.043%22%20style%3D%22fill%3Awhite%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%28-5.278015%2C0%2C0%2C0.845411%2C13205.286833%2C12806.445459%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C-16.891C-4.664%2C-16.891%20-8.446%2C-13.11%20-8.446%2C-8.445C-8.446%2C-3.781%20-4.664%2C0%200%2C0C4.664%2C0%208.446%2C-3.781%208.446%2C-8.445C8.446%2C-13.11%204.664%2C-16.891%200%2C-16.891%22%20style%3D%22fill%3Argb%2856%2C53%2C23%29%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%28-5.278015%2C0%2C0%2C0.845411%2C13080.217413%2C12829.80442%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C-20.263C-5.596%2C-20.263%20-10.132%2C-15.727%20-10.132%2C-10.131C-10.132%2C-4.536%20-5.596%2C0%200%2C0C5.596%2C0%2010.132%2C-4.536%2010.132%2C-10.131C10.132%2C-15.727%205.596%2C-20.263%200%2C-20.263%22%20style%3D%22fill%3Awhite%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%28-5.278015%2C0%2C0%2C0.845411%2C13072.285612%2C12826.209056%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0.001%2C-11.757C-3.246%2C-11.757%20-5.878%2C-9.125%20-5.878%2C-5.879C-5.878%2C-2.632%20-3.246%2C0%200.001%2C0C3.248%2C0%205.879%2C-2.632%205.879%2C-5.879C5.879%2C-9.125%203.248%2C-11.757%200.001%2C-11.757%22%20style%3D%22fill%3Argb%2856%2C53%2C23%29%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E";
 
 var explosionEmoji = "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20100%20100%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A2%3B%22%3E%20%20%20%20%3Cg%20transform%3D%22matrix%281%2C0%2C0%2C1%2C-24496.406028%2C-8169.224252%29%22%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Mesa-de-trabajo7%22%20serif%3Aid%3D%22Mesa%20de%20trabajo7%22%20transform%3D%22matrix%280.126773%2C0%2C0%2C0.126773%2C23818.442428%2C7133.619509%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20x%3D%225347.875%22%20y%3D%228169%22%20width%3D%22788.814%22%20height%3D%22788.814%22%20style%3D%22fill%3Anone%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%282.072717%2C-0.137748%2C0.859976%2C12.940252%2C-31183.76929%2C-150761.942204%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%28-2.411193%2C0.078028%2C0.48714%2C0.386215%2C12666.883148%2C12456.17044%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C-67.375C-8.767%2C-67.375%20-15.873%2C-52.292%20-15.873%2C-33.687C-15.873%2C-15.082%20-8.767%2C0%200%2C0C8.767%2C0%2015.873%2C-15.082%2015.873%2C-33.687C15.873%2C-52.292%208.767%2C-67.375%200%2C-67.375%22%20style%3D%22fill%3Argb%28100%2C140%2C44%29%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%28-2.411193%2C0.078028%2C0.48714%2C0.386215%2C12658.812161%2C12449.77159%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C-30.153C-4.107%2C-30.153%20-7.436%2C-23.403%20-7.436%2C-15.076C-7.436%2C-6.75%20-4.107%2C0%200%2C0C4.107%2C0%207.436%2C-6.75%207.436%2C-15.076C7.436%2C-23.403%204.107%2C-30.153%200%2C-30.153%22%20style%3D%22fill%3Argb%2856%2C53%2C23%29%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%282.411193%2C-0.078028%2C0.48714%2C0.386215%2C12816.526454%2C12463.071406%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C-53.545C0.013%2C-54.955%20-1.119%2C-56.109%20-2.53%2C-56.122C-3.307%2C-56.13%20-4.045%2C-55.782%20-4.535%2C-55.179L-16.486%2C-40.491L-35.036%2C-42.534L-53.014%2C-52.258C-54.82%2C-53.224%20-56.989%2C-53.224%20-58.795%2C-52.258L-77.181%2C-42.513L-95.731%2C-40.47L-107.764%2C-55.22C-108.671%2C-56.315%20-110.294%2C-56.466%20-111.388%2C-55.559C-111.976%2C-55.072%20-112.317%2C-54.349%20-112.32%2C-53.586C-112.626%2C-32.605%20-109.848%2C-9.275%20-88.111%2C-1.144C-77.999%2C2.656%20-66.905%2C2.717%20-56.16%2C2.615C-35.22%2C2.921%20-11.89%2C0.143%20-3.759%2C-21.594C0.041%2C-31.706%200.102%2C-42.799%200%2C-53.545%22%20style%3D%22fill%3Argb%28180%2C222%2C110%29%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%282.411193%2C-0.078028%2C0.48714%2C0.386215%2C12674.217724%2C12461.985449%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C5.557C-18.986%2C5.418%20-37.493%2C-0.426%20-53.116%2C-11.215C-50.092%2C-0.572%20-43.882%2C8.56%20-31.951%2C13.014C-21.839%2C16.813%20-10.746%2C16.875%200%2C16.773C20.94%2C17.079%2044.27%2C14.301%2052.401%2C-7.436C52.912%2C-8.784%2053.341%2C-10.173%2053.729%2C-11.522C37.963%2C-0.516%2019.226%2C5.44%200%2C5.557%22%20style%3D%22fill%3Argb%28100%2C140%2C44%29%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%28-2.411193%2C0.078028%2C0.48714%2C0.386215%2C12766.575395%2C12457.978627%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C-14.505C-6.273%2C-14.505%20-11.359%2C-11.258%20-11.359%2C-7.253C-11.359%2C-3.247%20-6.273%2C0%200%2C0C6.273%2C0%2011.359%2C-3.247%2011.359%2C-7.253C11.359%2C-11.258%206.273%2C-14.505%200%2C-14.505%22%20style%3D%22fill%3Argb%28100%2C140%2C44%29%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%28-2.411193%2C0.078028%2C0.48714%2C0.386215%2C12579.392591%2C12464.036014%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C-14.505C-6.273%2C-14.505%20-11.359%2C-11.258%20-11.359%2C-7.253C-11.359%2C-3.247%20-6.273%2C0%200%2C0C6.273%2C0%2011.359%2C-3.247%2011.359%2C-7.253C11.359%2C-11.258%206.273%2C-14.505%200%2C-14.505%22%20style%3D%22fill%3Argb%28100%2C140%2C44%29%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%28-2.411193%2C0.078028%2C0.48714%2C0.386215%2C12726.894591%2C12457.00441%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C-36.446C-10.064%2C-36.446%20-18.223%2C-28.287%20-18.223%2C-18.223C-18.223%2C-8.159%20-10.064%2C0%200%2C0C10.064%2C0%2018.223%2C-8.159%2018.223%2C-18.223C18.223%2C-28.287%2010.064%2C-36.446%200%2C-36.446%22%20style%3D%22fill%3Awhite%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%28-2.411193%2C0.078028%2C0.48714%2C0.386215%2C12613.599647%2C12460.670726%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C-36.446C-10.064%2C-36.446%20-18.223%2C-28.287%20-18.223%2C-18.223C-18.223%2C-8.159%20-10.064%2C0%200%2C0C10.064%2C0%2018.223%2C-8.159%2018.223%2C-18.223C18.223%2C-28.287%2010.064%2C-36.446%200%2C-36.446%22%20style%3D%22fill%3Awhite%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%28-2.411193%2C0.078028%2C0.48714%2C0.386215%2C12714.771537%2C12452.108121%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C-14.219C-3.926%2C-14.219%20-7.109%2C-11.036%20-7.109%2C-7.11C-7.109%2C-3.183%20-3.926%2C0%200%2C0C3.926%2C0%207.109%2C-3.183%207.109%2C-7.11C7.109%2C-11.036%203.926%2C-14.219%200%2C-14.219%22%20style%3D%22fill%3Argb%2856%2C53%2C23%29%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%28-2.411193%2C0.078028%2C0.48714%2C0.386215%2C12612.904681%2C12455.404615%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C-14.219C-3.926%2C-14.219%20-7.109%2C-11.036%20-7.109%2C-7.11C-7.109%2C-3.183%20-3.926%2C0%200%2C0C3.926%2C0%207.109%2C-3.183%207.109%2C-7.11C7.109%2C-11.036%203.926%2C-14.219%200%2C-14.219%22%20style%3D%22fill%3Argb%2856%2C53%2C23%29%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%282.411193%2C-0.078028%2C0.48714%2C0.386215%2C12696.968116%2C12457.422546%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C14.811C0.227%2C13.979%200.343%2C13.12%200.347%2C12.257C0.347%2C5.802%20-4.883%2C-0.266%20-11.359%2C-0.266C-17.835%2C-0.266%20-23.065%2C5.863%20-23.065%2C12.257C-23.06%2C13.216%20-22.901%2C14.168%20-22.595%2C15.077C-15.629%2C11.057%20-7.079%2C10.933%200%2C14.75L0%2C14.811Z%22%20style%3D%22fill%3Argb%2856%2C53%2C23%29%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%282.411193%2C-0.078028%2C0.48714%2C0.386215%2C12674.947363%2C12462.563922%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C10.188C5.516%2C10.188%2010.215%2C8.411%2011.359%2C3.855C4.301%2C0%20-4.249%2C0.078%20-11.236%2C4.059C-9.867%2C8.411%20-5.373%2C10.188%200%2C10.188%22%20style%3D%22fill%3Argb%28198%2C45%2C67%29%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%282.411193%2C-0.078028%2C0.48714%2C0.386215%2C12766.786986%2C12438.188569%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C-19.673L0%2C-19.407C0%2C-14.28%20-7.13%2C-12.032%20-15.955%2C-12.032C-19.785%2C-11.904%20-23.604%2C-12.5%20-27.212%2C-13.789C-26.688%2C-12.632%20-26.403%2C-11.382%20-26.374%2C-10.112C-26.374%2C-7.232%20-33.054%2C-6.026%20-41.349%2C-6.026C-49.643%2C-6.026%20-56.344%2C-7.313%20-56.344%2C-10.276C-56.344%2C-11.971%20-52.666%2C-14.893%20-47.968%2C-17.078C-50.075%2C-16.522%20-52.244%2C-16.234%20-54.423%2C-16.22C-58.628%2C-16.211%20-62.768%2C-17.265%20-66.456%2C-19.285C-68.167%2C-12.91%20-74.722%2C-9.129%20-81.097%2C-10.841C-86.314%2C-12.241%20-89.944%2C-16.967%20-89.95%2C-22.37C-89.935%2C-23.055%20-89.867%2C-23.738%20-89.745%2C-24.413C-91.762%2C-22.348%20-92.891%2C-19.576%20-92.891%2C-16.69C-92.878%2C-16.129%20-92.824%2C-15.569%20-92.728%2C-15.015C-99.061%2C-13.462%20-103.269%2C-10.745%20-103.269%2C-7.64C-103.269%2C-2.798%20-93.055%2C-1.021%20-80.43%2C-1.021C-77.202%2C-1.021%20-74.117%2C-1.144%20-71.339%2C-1.389C-68.233%2C3.024%20-56.282%2C4.74%20-41.982%2C4.74C-26.292%2C4.74%20-13.381%2C0.654%20-11.951%2C-4.78C-1.736%2C-6.537%205.577%2C-8.457%205.577%2C-13.074C5.577%2C-15.526%203.514%2C-17.814%200%2C-19.673%22%20style%3D%22fill%3Argb%2856%2C53%2C23%29%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%282.411193%2C-0.078028%2C0.48714%2C0.386215%2C12558.505106%2C12428.209173%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C31.195C5.386%2C31.192%2010.104%2C27.586%2011.522%2C22.39C15.211%2C24.409%2019.35%2C25.464%2023.555%2C25.454C25.734%2C25.441%2027.903%2C25.153%2030.01%2C24.596C25.312%2C26.782%2021.634%2C29.704%2021.634%2C31.399C21.634%2C34.362%2028.356%2C35.649%2036.629%2C35.649C44.903%2C35.649%2051.604%2C34.362%2051.604%2C31.481C51.564%2C30.239%2051.28%2C29.017%2050.766%2C27.885C54.374%2C29.175%2058.194%2C29.771%2062.023%2C29.642C70.848%2C29.642%2077.978%2C27.395%2077.978%2C22.268L77.978%2C22.002C71.663%2C19.108%2064.821%2C17.543%2057.876%2C17.405C58.148%2C16.268%2058.286%2C15.102%2058.284%2C13.932C58.346%2C5.583%2051.627%2C-1.235%2043.278%2C-1.296C38.54%2C-1.331%2034.06%2C0.858%2031.175%2C4.617C26.362%2C-2.548%2016.652%2C-4.454%209.487%2C0.359C5.152%2C3.272%202.558%2C8.158%202.574%2C13.381C2.575%2C14.328%202.671%2C15.272%202.86%2C16.2C-1.543%2C12.768%20-7.822%2C13.19%20-11.726%2C17.181C-11.848%2C17.855%20-11.916%2C18.538%20-11.931%2C19.224C-11.931%2C25.819%20-6.596%2C31.173%200%2C31.195%22%20style%3D%22fill%3Argb%28100%2C140%2C44%29%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%282.411193%2C-0.078028%2C0.48714%2C0.386215%2C12756.657138%2C12428.368893%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C-5.42C-4.088%2C-8.901%20-9.02%2C-11.247%20-14.3%2C-12.223C-15.417%2C-12.387%20-16.454%2C-11.614%20-16.618%2C-10.498C-16.642%2C-10.332%20-16.646%2C-10.163%20-16.629%2C-9.996L-15.015%2C5.019C-14.909%2C6.143%20-13.913%2C6.967%20-12.789%2C6.861C-12.419%2C6.826%20-12.066%2C6.691%20-11.767%2C6.47L0%2C-2.213C0.886%2C-2.912%201.037%2C-4.196%200.338%2C-5.082C0.239%2C-5.207%200.126%2C-5.321%200%2C-5.42%22%20style%3D%22fill%3Argb%28180%2C222%2C110%29%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%282.411193%2C-0.078028%2C0.48714%2C0.386215%2C12570.390174%2C12445.436201%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M0%2C-18.46C-4.561%2C-13.845%20-7.763%2C-8.064%20-9.254%2C-1.749C-9.537%2C-0.657%20-8.881%2C0.458%20-7.788%2C0.741C-7.6%2C0.789%20-7.406%2C0.811%20-7.211%2C0.805L11.175%2C0.008C12.302%2C-0.049%2013.169%2C-1.009%2013.111%2C-2.136C13.093%2C-2.493%2012.982%2C-2.838%2012.789%2C-3.138L3.064%2C-18.092C2.432%2C-19.027%201.162%2C-19.271%200.227%2C-18.639C0.147%2C-18.585%200.071%2C-18.525%200%2C-18.46%22%20style%3D%22fill%3Argb%28180%2C222%2C110%29%3Bfill-rule%3Anonzero%3B%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E";
@@ -4493,7 +4921,7 @@ var PatternFill = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 PatternFill.displayName = 'PatternFill';
 
-var _excluded$1 = ["className", "variant", "logoVariant", "logoSize", "logoColor", "backgroundColor", "textColor", "activeColor", "navItemsBgColor", "buttonColor", "buttonTextColor", "buttonBorderColor", "currentLanguage", "onLanguageClick", "onActionClick", "customLogo", "isRegister", "buttonText", "navItems", "navigate"];
+var _excluded$1 = ["className", "variant", "logoVariant", "logoSize", "logoColor", "backgroundColor", "textColor", "activeColor", "activeIconColor", "navItemsBgColor", "buttonColor", "buttonTextColor", "buttonBorderColor", "currentLanguage", "onLanguageClick", "onActionClick", "customLogo", "isRegister", "buttonText", "navItems", "navigate"];
 var Navbar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     _ref$variant = _ref.variant,
@@ -4510,6 +4938,7 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     textColor = _ref$textColor === void 0 ? 'piedra' : _ref$textColor,
     _ref$activeColor = _ref.activeColor,
     activeColor = _ref$activeColor === void 0 ? 'bosque' : _ref$activeColor,
+    activeIconColor = _ref.activeIconColor,
     _ref$navItemsBgColor = _ref.navItemsBgColor,
     navItemsBgColor = _ref$navItemsBgColor === void 0 ? 'hueso' : _ref$navItemsBgColor,
     buttonColor = _ref.buttonColor,
@@ -4543,7 +4972,7 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   return jsxs("nav", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn('w-full px-6 py-3 flex items-center justify-between', 'border-b border-black/10', className),
+    className: cn('px-6 py-3 flex items-center justify-between', 'rounded-xl m-3', className),
     style: {
       backgroundColor: variant === 'nologin' ? colors[backgroundColor] : 'transparent'
     }
@@ -4607,7 +5036,7 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
             children: jsx(Icon, {
               name: item.icon,
               size: "sm",
-              color: item.active ? 'ice' : textColor
+              color: item.active ? activeIconColor !== null && activeIconColor !== void 0 ? activeIconColor : 'ice' : textColor
             })
           }), jsx("span", {
             children: item.label
@@ -4964,5 +5393,5 @@ var ColorPalette = function ColorPalette(_ref2) {
   });
 };
 
-export { Avatar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColorPalette, ColorSwatch, Emoji, Error, ErrorFullScreen, FullPage, Grid, GridItem, H1, H2, H3, H4, Icon, Image, Input, Lead, Link, Loading, LoadingFullScreen, Logo, Muted, Navbar, Notification, P, Pattern, PatternFill, PatternGroup, Popup, SearchInput, Small, Subtitle, Switch, TextDivider, badgeVariants, buttonVariants, cn, colorEntries, colors, cssVars, getColor, getCssVar, themeVars };
+export { Avatar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatMessage, Checkbox, ColorPalette, ColorSwatch, Emoji, Error, ErrorFullScreen, FriendListItem, FullPage, Grid, GridItem, H1, H2, H3, H4, Icon, Image, Input, Lead, Link, Loading, LoadingFullScreen, Logo, Muted, Navbar, Notification, P, Pattern, PatternFill, PatternGroup, Popup, QuestionCard, SearchInput, Small, Streak, Subtitle, Switch, TextDivider, badgeVariants, buttonVariants, cn, colorEntries, colors, cssVars, getColor, getCssVar, themeVars };
 //# sourceMappingURL=index.esm.js.map