aloha-ui-library 0.3.1 → 0.3.2

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useContext, createContext, useEffect, useRef } from 'react';
 import { AlertCircle, EyeOff, Eye, ChevronDown, Search, Bell, X, RefreshCw, Info, CheckCircle, Loader2 } from 'lucide-react';
 import { Link as Link$1 } from 'react-router-dom';
 
@@ -11,6 +11,9 @@ function _arrayLikeToArray(r, a) {
 function _arrayWithHoles(r) {
   if (Array.isArray(r)) return r;
 }
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
     value: t,
@@ -19,6 +22,9 @@ function _defineProperty(e, r, t) {
     writable: true
   }) : e[r] = t, e;
 }
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
 function _iterableToArrayLimit(r, l) {
   var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
   if (null != t) {
@@ -46,6 +52,9 @@ function _iterableToArrayLimit(r, l) {
 function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function ownKeys(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
@@ -90,6 +99,9 @@ function _objectWithoutPropertiesLoose(r, e) {
 function _slicedToArray(r, e) {
   return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
 }
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+}
 function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
@@ -541,7 +553,7 @@ const fractionRegex = /^\d+\/\d+$/;
 const stringLengths = /*#__PURE__*/new Set(['px', 'full', 'screen']);
 const tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/;
 const lengthUnitRegex = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/;
-const colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/;
+const colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/;
 // Shadow always begins with x and y offset separated by underscore optionally prepended by inset
 const shadowRegex = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
 const imageRegex = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/;
@@ -2762,7 +2774,7 @@ var themeVars = {
   primary: 'var(--theme-primary)'
 };
 
-var _excluded$r = ["className", "variant", "size", "loading", "disabled", "color", "textColor", "borderColor", "icon", "children", "style", "borderWidth"];
+var _excluded$w = ["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 +2811,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$r);
+    props = _objectWithoutProperties(_ref, _excluded$w);
   var customStyle = {};
   // Aplicar color de fondo si se especifica
   if (color) {
@@ -2858,27 +2870,27 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Button.displayName = 'Button';
 
-var _excluded$q = ["className", "children", "font", "weight", "color", "style"],
-  _excluded2$3 = ["className", "children", "font", "weight", "color", "style"],
+var _excluded$v = ["className", "children", "font", "weight", "color", "style"],
+  _excluded2$4 = ["className", "children", "font", "weight", "color", "style"],
   _excluded3$2 = ["className", "children", "font", "weight", "color", "style"],
   _excluded4$1 = ["className", "children", "font", "weight", "color", "style"],
   _excluded5$1 = ["className", "children", "font", "weight", "color", "style"],
-  _excluded6$1 = ["className", "children", "font", "weight", "color", "style"],
+  _excluded6 = ["className", "children", "font", "weight", "color", "style"],
   _excluded7 = ["className", "children", "font", "weight", "color", "style"],
   _excluded8 = ["className", "children", "font", "weight", "color", "style"],
   _excluded9 = ["className", "children", "font", "weight", "color", "style"];
-var fontFamilyClasses = {
+var fontFamilyClasses$1 = {
   jetbrains: 'font-jetbrains',
   nunito: 'font-nunito',
   "default": ''
 };
-var fontWeightClasses = {
+var fontWeightClasses$1 = {
   light: 'font-light',
   medium: 'font-medium',
   bold: 'font-bold',
   black: 'font-black'
 };
-var getColorStyle = function getColorStyle(color) {
+var getColorStyle$1 = function getColorStyle(color) {
   if (!color || color === 'default') return {};
   if (color.startsWith('theme-')) {
     return {
@@ -2897,11 +2909,11 @@ var H1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     weight = _ref.weight,
     color = _ref.color,
     style = _ref.style,
-    props = _objectWithoutProperties(_ref, _excluded$q);
+    props = _objectWithoutProperties(_ref, _excluded$v);
   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),
-    style: _objectSpread2(_objectSpread2({}, getColorStyle(color)), style)
+    className: cn('scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl', fontFamilyClasses$1[font], weight && fontWeightClasses$1[weight], className),
+    style: _objectSpread2(_objectSpread2({}, getColorStyle$1(color)), style)
   }, props), {}, {
     children: children
   }));
@@ -2915,11 +2927,11 @@ var H2 = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     weight = _ref2.weight,
     color = _ref2.color,
     style = _ref2.style,
-    props = _objectWithoutProperties(_ref2, _excluded2$3);
+    props = _objectWithoutProperties(_ref2, _excluded2$4);
   return jsx("h2", _objectSpread2(_objectSpread2({
     ref: ref,
-    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)
+    className: cn('scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0', fontFamilyClasses$1[font], weight && fontWeightClasses$1[weight], className),
+    style: _objectSpread2(_objectSpread2({}, getColorStyle$1(color)), style)
   }, props), {}, {
     children: children
   }));
@@ -2936,8 +2948,8 @@ var H3 = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
     props = _objectWithoutProperties(_ref3, _excluded3$2);
   return jsx("h3", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn('scroll-m-20 text-2xl font-semibold tracking-tight', fontFamilyClasses[font], weight && fontWeightClasses[weight], className),
-    style: _objectSpread2(_objectSpread2({}, getColorStyle(color)), style)
+    className: cn('scroll-m-20 text-2xl font-semibold tracking-tight', fontFamilyClasses$1[font], weight && fontWeightClasses$1[weight], className),
+    style: _objectSpread2(_objectSpread2({}, getColorStyle$1(color)), style)
   }, props), {}, {
     children: children
   }));
@@ -2954,8 +2966,8 @@ var H4 = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
     props = _objectWithoutProperties(_ref4, _excluded4$1);
   return jsx("h4", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn('scroll-m-20 text-xl font-semibold tracking-tight', fontFamilyClasses[font], weight && fontWeightClasses[weight], className),
-    style: _objectSpread2(_objectSpread2({}, getColorStyle(color)), style)
+    className: cn('scroll-m-20 text-xl font-semibold tracking-tight', fontFamilyClasses$1[font], weight && fontWeightClasses$1[weight], className),
+    style: _objectSpread2(_objectSpread2({}, getColorStyle$1(color)), style)
   }, props), {}, {
     children: children
   }));
@@ -2972,8 +2984,8 @@ var P = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
     props = _objectWithoutProperties(_ref5, _excluded5$1);
   return jsx("p", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn('leading-7 [&:not(:first-child)]:mt-6', fontFamilyClasses[font], weight && fontWeightClasses[weight], className),
-    style: _objectSpread2(_objectSpread2({}, getColorStyle(color)), style)
+    className: cn('leading-7 [&:not(:first-child)]:mt-6', fontFamilyClasses$1[font], weight && fontWeightClasses$1[weight], className),
+    style: _objectSpread2(_objectSpread2({}, getColorStyle$1(color)), style)
   }, props), {}, {
     children: children
   }));
@@ -2987,11 +2999,11 @@ var Subtitle = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
     weight = _ref6.weight,
     color = _ref6.color,
     style = _ref6.style,
-    props = _objectWithoutProperties(_ref6, _excluded6$1);
+    props = _objectWithoutProperties(_ref6, _excluded6);
   return jsx("p", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn('text-xl text-muted-foreground', fontFamilyClasses[font], weight && fontWeightClasses[weight], className),
-    style: _objectSpread2(_objectSpread2({}, getColorStyle(color)), style)
+    className: cn('text-xl text-muted-foreground', fontFamilyClasses$1[font], weight && fontWeightClasses$1[weight], className),
+    style: _objectSpread2(_objectSpread2({}, getColorStyle$1(color)), style)
   }, props), {}, {
     children: children
   }));
@@ -3008,8 +3020,8 @@ var Lead = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
     props = _objectWithoutProperties(_ref7, _excluded7);
   return jsx("p", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn('text-xl text-muted-foreground', fontFamilyClasses[font], weight && fontWeightClasses[weight], className),
-    style: _objectSpread2(_objectSpread2({}, getColorStyle(color)), style)
+    className: cn('text-xl text-muted-foreground', fontFamilyClasses$1[font], weight && fontWeightClasses$1[weight], className),
+    style: _objectSpread2(_objectSpread2({}, getColorStyle$1(color)), style)
   }, props), {}, {
     children: children
   }));
@@ -3026,8 +3038,8 @@ var Small = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
     props = _objectWithoutProperties(_ref8, _excluded8);
   return jsx("small", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn('text-sm font-medium leading-none', fontFamilyClasses[font], weight && fontWeightClasses[weight], className),
-    style: _objectSpread2(_objectSpread2({}, getColorStyle(color)), style)
+    className: cn('text-sm font-medium leading-none', fontFamilyClasses$1[font], weight && fontWeightClasses$1[weight], className),
+    style: _objectSpread2(_objectSpread2({}, getColorStyle$1(color)), style)
   }, props), {}, {
     children: children
   }));
@@ -3044,21 +3056,20 @@ var Muted = /*#__PURE__*/React.forwardRef(function (_ref9, ref) {
     props = _objectWithoutProperties(_ref9, _excluded9);
   return jsx("p", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn('text-sm text-muted-foreground', fontFamilyClasses[font], weight && fontWeightClasses[weight], className),
-    style: _objectSpread2(_objectSpread2({}, getColorStyle(color)), style)
+    className: cn('text-sm text-muted-foreground', fontFamilyClasses$1[font], weight && fontWeightClasses$1[weight], className),
+    style: _objectSpread2(_objectSpread2({}, getColorStyle$1(color)), style)
   }, props), {}, {
     children: children
   }));
 });
 Muted.displayName = 'Muted';
 
-var _excluded$p = ["className", "size", "borderRadius", "showBorder", "backgroundColor", "borderColor", "shadow", "padding", "margin", "style"],
-  _excluded2$2 = ["className", "padding", "margin", "style"],
+var _excluded$u = ["className", "size", "borderRadius", "showBorder", "backgroundColor", "borderColor", "shadow", "padding", "margin", "style"],
+  _excluded2$3 = ["className", "padding", "margin", "style"],
   _excluded3$1 = ["className", "font", "weight", "descriptionColor", "small", "children"],
-  _excluded4 = ["color"],
-  _excluded5 = ["className", "padding", "margin", "style"],
-  _excluded6 = ["className", "padding", "margin", "style"];
-var sizeClasses$2 = {
+  _excluded4 = ["className", "padding", "margin", "style"],
+  _excluded5 = ["className", "padding", "margin", "style"];
+var sizeClasses$4 = {
   full: 'w-full',
   constrained: 'max-w-md',
   auto: 'w-auto'
@@ -3151,10 +3162,10 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     padding = _ref.padding,
     margin = _ref.margin,
     style = _ref.style,
-    props = _objectWithoutProperties(_ref, _excluded$p);
+    props = _objectWithoutProperties(_ref, _excluded$u);
   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$4[size], borderRadiusClasses[borderRadius], showBorder ? 'border' : '', showBorder ? getBorderColor(borderColor) : '', getBackgroundColor(backgroundColor), shadow ? 'shadow-sm' : '', className),
     style: _objectSpread2(_objectSpread2({}, buildSpacingStyle(padding, margin)), style)
   }, props));
 });
@@ -3164,7 +3175,7 @@ var CardHeader = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     padding = _ref2.padding,
     margin = _ref2.margin,
     style = _ref2.style,
-    props = _objectWithoutProperties(_ref2, _excluded2$2);
+    props = _objectWithoutProperties(_ref2, _excluded2$3);
   return jsx("div", _objectSpread2({
     ref: ref,
     className: cn('flex flex-col space-y-1.5', padding === undefined ? 'p-6' : '', className),
@@ -3224,8 +3235,8 @@ var CardDescription = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
     restProps = _objectWithoutProperties(_ref4, _excluded3$1);
   var Component = small ? Small : P;
   // Filtrar 'color' de restProps para evitar conflictos
-  restProps.color;
-    var props = _objectWithoutProperties(restProps, _excluded4);
+  var props = _objectSpread2({}, restProps);
+  delete props.color;
   return jsx(Component, _objectSpread2(_objectSpread2({
     ref: ref,
     font: font,
@@ -3242,7 +3253,7 @@ var CardContent = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
     padding = _ref5.padding,
     margin = _ref5.margin,
     style = _ref5.style,
-    props = _objectWithoutProperties(_ref5, _excluded5);
+    props = _objectWithoutProperties(_ref5, _excluded4);
   return jsx("div", _objectSpread2({
     ref: ref,
     className: cn(padding === undefined ? 'p-6 pt-0' : '', className),
@@ -3255,7 +3266,7 @@ var CardFooter = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
     padding = _ref6.padding,
     margin = _ref6.margin,
     style = _ref6.style,
-    props = _objectWithoutProperties(_ref6, _excluded6);
+    props = _objectWithoutProperties(_ref6, _excluded5);
   return jsx("div", _objectSpread2({
     ref: ref,
     className: cn('flex items-center', padding === undefined ? 'p-6 pt-0' : '', className),
@@ -3430,7 +3441,7 @@ var getAvatarPartImage = function getAvatarPartImage(id, type) {
   return (part === null || part === void 0 ? void 0 : part.image) || null;
 };
 
-var _excluded$o = ["className", "emoji", "size", "style", "src", "alt", "fallback"];
+var _excluded$t = ["className", "emoji", "size", "style", "src", "alt", "fallback"];
 var DEFAULT_AVATAR = {
   skinId: 1,
   eyebrowId: 1,
@@ -3439,6 +3450,14 @@ var DEFAULT_AVATAR = {
   hairId: 1,
   mouthId: 1
 };
+var sizeMap$1 = {
+  xs: 24,
+  sm: 32,
+  md: 40,
+  lg: 80,
+  xl: 120,
+  '2xl': 160
+};
 var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     emoji = _ref.emoji,
@@ -3449,15 +3468,16 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$alt = _ref.alt,
     alt = _ref$alt === void 0 ? 'Avatar' : _ref$alt,
     fallback = _ref.fallback,
-    props = _objectWithoutProperties(_ref, _excluded$o);
+    props = _objectWithoutProperties(_ref, _excluded$t);
+  var resolvedSize = typeof size === 'number' ? size : sizeMap$1[size] || 100;
   // Si tiene src, mostrar como imagen directa
   if (src) {
     return jsx("div", _objectSpread2(_objectSpread2({
       ref: ref,
       className: cn('avatar-container', className),
       style: _objectSpread2({
-        width: "".concat(size, "px"),
-        height: "".concat(size, "px")
+        width: "".concat(resolvedSize, "px"),
+        height: "".concat(resolvedSize, "px")
       }, style)
     }, props), {}, {
       children: jsx("img", {
@@ -3473,8 +3493,8 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       ref: ref,
       className: cn('avatar-container avatar-fallback', className),
       style: _objectSpread2({
-        width: "".concat(size, "px"),
-        height: "".concat(size, "px")
+        width: "".concat(resolvedSize, "px"),
+        height: "".concat(resolvedSize, "px")
       }, style)
     }, props), {}, {
       children: fallback
@@ -3492,8 +3512,8 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: ref,
     className: cn('avatar-container', className),
     style: _objectSpread2({
-      width: "".concat(size, "px"),
-      height: "".concat(size, "px")
+      width: "".concat(resolvedSize, "px"),
+      height: "".concat(resolvedSize, "px")
     }, style)
   }, props), {}, {
     children: [currentSkin && jsx("img", {
@@ -3525,7 +3545,65 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Avatar.displayName = 'Avatar';
 
-var _excluded$n = ["className", "variant"];
+var _excluded$s = ["className", "avatars", "max", "size", "ringColor", "style"];
+var sizeMap = {
+  xs: 24,
+  sm: 32,
+  md: 40,
+  lg: 80,
+  xl: 120,
+  '2xl': 160
+};
+var AvatarGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$avatars = _ref.avatars,
+    avatars = _ref$avatars === void 0 ? [] : _ref$avatars,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 4 : _ref$max,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'sm' : _ref$size,
+    ringColor = _ref.ringColor,
+    style = _ref.style,
+    props = _objectWithoutProperties(_ref, _excluded$s);
+  var visibleAvatars = avatars.slice(0, max);
+  var extraCount = avatars.length - max;
+  var resolvedSize = typeof size === 'number' ? size : sizeMap[size] || 32;
+  // Get color value from name or pass directly
+  var ringColorValue = ringColor ? colors[ringColor] || ringColor : '#fff';
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn('avatar-group-stack', className),
+    style: _objectSpread2({
+      '--ag-ring-color': ringColorValue
+    }, style)
+  }, props), {}, {
+    children: [extraCount > 0 && jsxs("div", {
+      className: "avatar-group-extra",
+      style: {
+        width: "".concat(resolvedSize, "px"),
+        height: "".concat(resolvedSize, "px"),
+        fontSize: "".concat(resolvedSize * 0.35, "px"),
+        zIndex: 0
+      },
+      children: ["+", extraCount]
+    }), _toConsumableArray(visibleAvatars).reverse().map(function (av, index) {
+      var zIndex = index + 1;
+      return jsx(Avatar, {
+        emoji: av.emoji,
+        src: av.src,
+        fallback: av.fallback,
+        size: size,
+        className: "avatar-group-item",
+        style: {
+          zIndex: zIndex
+        }
+      }, index);
+    })]
+  }));
+});
+AvatarGroup.displayName = 'AvatarGroup';
+
+var _excluded$r = ["className", "variant", "backgroundColor", "textColor", "style"];
 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: {
@@ -3542,19 +3620,34 @@ 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$n);
+    backgroundColor = _ref.backgroundColor,
+    textColor = _ref.textColor,
+    style = _ref.style,
+    props = _objectWithoutProperties(_ref, _excluded$r);
+  var customStyle = {};
+  // Aplicar color de fondo si se especifica
+  if (backgroundColor) {
+    customStyle.backgroundColor = colors[backgroundColor];
+    customStyle.borderColor = colors[backgroundColor];
+  }
+  // Aplicar color de texto si se especifica
+  if (textColor) {
+    customStyle.color = colors[textColor];
+  }
+  var finalStyle = _objectSpread2(_objectSpread2({}, customStyle), style);
   return jsx("div", _objectSpread2({
     className: cn(badgeVariants({
       variant: variant
-    }), className)
+    }), className),
+    style: finalStyle
   }, props));
 }
 
-var _excluded$m = ["className", "error"];
+var _excluded$q = ["className", "error"];
 var FormError = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     error = _ref.error,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    props = _objectWithoutProperties(_ref, _excluded$q);
   if (!error) return null;
   return jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref,
@@ -3576,7 +3669,7 @@ var FormError = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 FormError.displayName = 'FormError';
 
-var _excluded$l = ["className", "type", "label", "helperText", "required", "id", "error"];
+var _excluded$p = ["className", "type", "label", "helperText", "required", "id", "error"];
 var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     type = _ref.type,
@@ -3585,7 +3678,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     required = _ref.required,
     id = _ref.id,
     error = _ref.error,
-    props = _objectWithoutProperties(_ref, _excluded$l);
+    props = _objectWithoutProperties(_ref, _excluded$p);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     showPassword = _useState2[0],
@@ -3648,7 +3741,55 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Input.displayName = 'Input';
 
-var _excluded$k = ["className", "label", "helperText", "required", "id", "error", "options", "placeholder", "children"];
+var _excluded$o = ["className", "label", "helperText", "required", "id", "error", "resize"];
+var TextArea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    label = _ref.label,
+    helperText = _ref.helperText,
+    required = _ref.required,
+    id = _ref.id,
+    error = _ref.error,
+    _ref$resize = _ref.resize,
+    resize = _ref$resize === void 0 ? 'vertical' : _ref$resize,
+    props = _objectWithoutProperties(_ref, _excluded$o);
+  var textareaId = id || "textarea-".concat(Math.random().toString(36).substr(2, 9));
+  return jsxs("div", {
+    className: "w-full",
+    children: [(label || helperText) && jsxs("div", {
+      className: "mb-2",
+      children: [label && jsxs(P, {
+        className: "text-sm font-medium m-0 [&:not(:first-child)]:mt-0 inline",
+        children: [label, required && jsx("span", {
+          style: {
+            color: colors.coral
+          },
+          children: " *"
+        })]
+      }), helperText && jsx(P, {
+        className: "text-xs text-gray-500 m-0 mt-1 [&:not(:first-child)]:mt-1",
+        children: helperText
+      })]
+    }), jsx("div", {
+      className: "relative",
+      children: jsx("textarea", _objectSpread2({
+        id: textareaId,
+        className: cn('flex w-full rounded-lg border-2 px-3 py-2 text-sm transition-all', 'placeholder:text-gray-500', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2', 'disabled:cursor-not-allowed disabled:opacity-50', error ? 'border-coral/50' : '', className),
+        style: {
+          borderColor: error ? colors.coral : colors.piedra,
+          backgroundColor: colors.koala,
+          resize: resize
+        },
+        ref: ref,
+        required: required
+      }, props))
+    }), error && typeof error === 'string' && jsx(FormError, {
+      error: error
+    })]
+  });
+});
+TextArea.displayName = 'TextArea';
+
+var _excluded$n = ["className", "label", "helperText", "required", "id", "error", "options", "placeholder", "children"];
 var Select = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     label = _ref.label,
@@ -3659,7 +3800,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     options = _ref.options,
     placeholder = _ref.placeholder,
     children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded$k);
+    props = _objectWithoutProperties(_ref, _excluded$n);
   var selectId = id || "select-".concat(Math.random().toString(36).substr(2, 9));
   return jsxs("div", {
     className: "w-full",
@@ -3711,12 +3852,12 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Select.displayName = 'Select';
 
-var _excluded$j = ["className", "label", "id"];
+var _excluded$m = ["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$j);
+    props = _objectWithoutProperties(_ref, _excluded$m);
   var checkboxId = id || "checkbox-".concat(Math.random().toString(36).substr(2, 9));
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -3776,21 +3917,47 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Checkbox.displayName = 'Checkbox';
 
-var _excluded$i = ["className", "label", "font", "weight", "labelColor", "id"];
+var _excluded$l = ["className", "label", "font", "weight", "labelColor", "id"];
+var fontFamilyClasses = {
+  jetbrains: 'font-jetbrains',
+  nunito: 'font-nunito',
+  "default": ''
+};
+var fontWeightClasses = {
+  light: 'font-light',
+  medium: 'font-medium',
+  bold: 'font-bold',
+  black: 'font-black'
+};
+var getColorStyle = function getColorStyle(color) {
+  if (!color || color === 'default') return {};
+  if (color.startsWith('theme-')) {
+    return {
+      color: "var(--".concat(color, ")")
+    };
+  }
+  if (color in colors) {
+    return {
+      color: colors[color]
+    };
+  }
+  return {};
+};
 var Switch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     label = _ref.label,
-    font = _ref.font,
+    _ref$font = _ref.font,
+    font = _ref$font === void 0 ? 'default' : _ref$font,
     weight = _ref.weight,
     labelColor = _ref.labelColor,
     id = _ref.id,
-    props = _objectWithoutProperties(_ref, _excluded$i);
+    props = _objectWithoutProperties(_ref, _excluded$l);
   var switchId = id || "switch-".concat(Math.random().toString(36).substr(2, 9));
   return jsxs("div", {
-    className: "flex items-center space-x-3",
+    className: "flex items-center gap-3",
     children: [jsxs("label", {
       htmlFor: switchId,
-      className: "relative inline-flex cursor-pointer items-center",
+      className: "relative inline-flex cursor-pointer items-center flex-shrink-0",
       children: [jsx("input", _objectSpread2({
         type: "checkbox",
         id: switchId,
@@ -3799,22 +3966,117 @@ var Switch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }, props)), jsx("div", {
         className: cn('peer h-8 w-14 rounded-[0.6rem] border-2 border-[#A69C8A] bg-[#D8D8C1] after:absolute after:left-[3px] after:top-[3px] after:h-[26px] after:w-[26px] after:rounded-md after:bg-white after:shadow-md after:transition-all after:content-[""] peer-checked:border-[#4A443F] peer-checked:bg-[#4A443F] peer-checked:after:translate-x-[24px] peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-[#4A443F]/30 peer-disabled:cursor-not-allowed peer-disabled:opacity-50', className)
       })]
-    }), label && jsx(P, {
-      font: font,
-      weight: weight,
-      color: labelColor,
-      className: "leading-none m-0 flex items-center",
+    }), label && jsx("span", {
+      className: cn('text-sm', fontFamilyClasses[font], weight && fontWeightClasses[weight]),
+      style: getColorStyle(labelColor),
       children: label
     })]
   });
 });
 Switch.displayName = 'Switch';
 
-var _excluded$h = ["className", "onSearch"];
+var _excluded$k = ["className", "name", "value", "defaultValue", "onChange", "disabled", "children"],
+  _excluded2$2 = ["className", "value", "label", "id", "disabled"];
+var RadioGroupContext = /*#__PURE__*/createContext(undefined);
+var RadioGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    name = _ref.name,
+    controlledValue = _ref.value,
+    defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded$k);
+  var _React$useState = React.useState(defaultValue || ''),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    localValue = _React$useState2[0],
+    setLocalValue = _React$useState2[1];
+  var isControlled = controlledValue !== undefined;
+  var activeValue = isControlled ? controlledValue : localValue;
+  var handleValueChange = function handleValueChange(newValue) {
+    if (!isControlled) {
+      setLocalValue(newValue);
+    }
+    if (onChange) {
+      onChange(newValue);
+    }
+  };
+  return jsx(RadioGroupContext.Provider, {
+    value: {
+      name: name,
+      value: activeValue,
+      onChange: handleValueChange,
+      disabled: disabled
+    },
+    children: jsx("div", _objectSpread2(_objectSpread2({
+      ref: ref,
+      role: "radiogroup",
+      className: cn('aloha-radio-group', className)
+    }, props), {}, {
+      children: children
+    }))
+  });
+});
+RadioGroup.displayName = 'RadioGroup';
+var RadioGroupItem = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var className = _ref2.className,
+    value = _ref2.value,
+    label = _ref2.label,
+    id = _ref2.id,
+    itemDisabled = _ref2.disabled,
+    props = _objectWithoutProperties(_ref2, _excluded2$2);
+  var context = useContext(RadioGroupContext);
+  if (!context) {
+    throw new Error('RadioGroupItem must be used within a RadioGroup component');
+  }
+  var name = props.name || context.name;
+  var isChecked = context.value === value;
+  var isDisabled = itemDisabled || context.disabled;
+  var inputId = id || "radio-".concat(name, "-").concat(value);
+  var handleChange = function handleChange() {
+    if (!isDisabled && context.onChange) {
+      context.onChange(value);
+    }
+  };
+  return jsxs("label", {
+    htmlFor: inputId,
+    className: cn('aloha-radio-item', isChecked && 'aloha-radio-item--checked', isDisabled && 'aloha-radio-item--disabled', className),
+    children: [jsx("input", _objectSpread2({
+      ref: ref,
+      type: "radio",
+      id: inputId,
+      name: name,
+      value: value,
+      checked: isChecked,
+      disabled: isDisabled,
+      onChange: handleChange,
+      className: "sr-only"
+    }, props)), jsx("span", {
+      className: "aloha-radio-indicator",
+      style: {
+        borderColor: isChecked ? colors.bosque : colors.piedra,
+        backgroundColor: isChecked ? colors.hueso : colors.koala
+      },
+      children: isChecked && jsx("span", {
+        className: "aloha-radio-inner-dot",
+        style: {
+          backgroundColor: colors.olivo
+        }
+      })
+    }), label && jsx(P, {
+      className: "aloha-radio-label text-sm m-0 [&:not(:first-child)]:mt-0",
+      children: label
+    })]
+  });
+});
+RadioGroupItem.displayName = 'RadioGroupItem';
+
+var _excluded$j = ["className", "onSearch"];
 var SearchInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     onSearch = _ref.onSearch,
-    props = _objectWithoutProperties(_ref, _excluded$h);
+    props = _objectWithoutProperties(_ref, _excluded$j);
   var handleKeyDown = function handleKeyDown(e) {
     if (e.key === 'Enter' && onSearch) {
       onSearch(e.currentTarget.value);
@@ -3834,7 +4096,7 @@ var SearchInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 SearchInput.displayName = 'SearchInput';
 
-var _excluded$g = ["type", "title", "message", "timestamp", "avatar", "read", "onClose", "onClick", "className"];
+var _excluded$i = ["type", "title", "message", "timestamp", "avatar", "read", "onClose", "onClick", "className"];
 var Notification = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var type = _ref.type,
     title = _ref.title,
@@ -3846,58 +4108,63 @@ var Notification = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onClose = _ref.onClose,
     onClick = _ref.onClick,
     className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded$g);
-  var typeColors = {
-    like: 'text-red-500',
-    comment: 'text-blue-500',
-    follow: 'text-green-500',
-    mention: 'text-purple-500',
-    info: 'text-gray-500'
+    props = _objectWithoutProperties(_ref, _excluded$i);
+  var iconColors = {
+    like: '#FF6F61',
+    // coral
+    comment: '#0084FF',
+    // electrico
+    follow: '#648C2C',
+    // bosque
+    mention: '#B388D3',
+    // lavanda
+    info: '#4A443F' // piedra
   };
   return jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn('flex items-start gap-3 rounded-lg border p-4 transition-colors', !read && 'bg-blue-50/50 dark:bg-blue-950/20', onClick && 'cursor-pointer hover:bg-accent', className),
+    className: cn('aloha-notification', !read && 'aloha-notification--unread', onClick && 'aloha-notification--clickable', className),
     onClick: onClick
   }, props), {}, {
-    children: [avatar ? jsx(Avatar, {
-      src: avatar,
+    children: [avatar ? jsx(Avatar, _objectSpread2({
       alt: title,
-      size: "sm"
-    }) : jsx("div", {
-      className: cn('rounded-full p-2 bg-muted', typeColors[type]),
+      size: "sm",
+      className: "aloha-notification__avatar"
+    }, avatar)) : jsx("div", {
+      className: "aloha-notification__icon-container",
+      style: {
+        color: iconColors[type]
+      },
       children: jsx(Bell, {
         className: "h-4 w-4"
       })
     }), jsxs("div", {
-      className: "flex-1 space-y-1",
+      className: "aloha-notification__content",
       children: [jsx("p", {
-        className: "text-sm font-medium leading-none",
+        className: "aloha-notification__title",
         children: title
       }), jsx("p", {
-        className: "text-sm text-muted-foreground",
+        className: "aloha-notification__message",
         children: message
       }), jsx("p", {
-        className: "text-xs text-muted-foreground",
+        className: "aloha-notification__timestamp",
         children: timestamp
       })]
-    }), onClose && jsxs("button", {
+    }), onClose && jsx("button", {
       onClick: function onClick(e) {
         e.stopPropagation();
         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",
-      children: [jsx(X, {
+      className: "aloha-notification__close-btn",
+      "aria-label": "Close notification",
+      children: jsx(X, {
         className: "h-4 w-4"
-      }), jsx("span", {
-        className: "sr-only",
-        children: "Close"
-      })]
+      })
     })]
   }));
 });
 Notification.displayName = 'Notification';
 
-var _excluded$f = ["className", "text", "component", "font", "weight", "textColor", "lineColor", "lineThickness", "avatars", "avatarRingColor", "rightSlot"];
+var _excluded$h = ["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';
@@ -3936,7 +4203,7 @@ var TextDivider = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     avatars = _ref.avatars,
     avatarRingColor = _ref.avatarRingColor,
     rightSlot = _ref.rightSlot,
-    props = _objectWithoutProperties(_ref, _excluded$f);
+    props = _objectWithoutProperties(_ref, _excluded$h);
   var renderText = function renderText() {
     var commonProps = {
       font: font,
@@ -3981,22 +4248,11 @@ var TextDivider = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: ref,
     className: cn('text-divider', className)
   }, props), {}, {
-    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);
-      })
+    children: [hasAvatars && jsx(AvatarGroup, {
+      avatars: avatars,
+      size: "sm",
+      ringColor: avatarRingColor || lineColor,
+      className: "text-divider__avatar-stack"
     }), renderText(), jsx("div", {
       className: cn('text-divider__line', getLineColorClass(lineColor)),
       style: {
@@ -4010,7 +4266,7 @@ var TextDivider = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 TextDivider.displayName = 'TextDivider';
 
-var _excluded$e = ["className", "children", "color", "hoverColor", "underline", "external"],
+var _excluded$g = ["className", "children", "color", "hoverColor", "underline", "external"],
   _excluded2$1 = ["to"],
   _excluded3 = ["href", "target", "rel"];
 var getColorClass = function getColorClass(color) {
@@ -4074,7 +4330,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$e);
+    props = _objectWithoutProperties(_ref, _excluded$g);
   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) {
@@ -4115,7 +4371,7 @@ var Link = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Link.displayName = 'Link';
 
-var _excluded$d = ["src", "alt", "width", "height", "objectFit", "loading", "fallbackSrc", "onError", "className"];
+var _excluded$f = ["src", "alt", "width", "height", "objectFit", "loading", "fallbackSrc", "onError", "className"];
 var Image = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var src = _ref.src,
     alt = _ref.alt,
@@ -4128,7 +4384,7 @@ var Image = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     fallbackSrc = _ref.fallbackSrc,
     onError = _ref.onError,
     className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded$d);
+    props = _objectWithoutProperties(_ref, _excluded$f);
   var _React$useState = React.useState(src),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     imgSrc = _React$useState2[0],
@@ -4326,7 +4582,72 @@ var Popup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Popup.displayName = 'Popup';
 
-var Error = function Error(_ref) {
+var _excluded$e = ["className", "isOpen", "onClose", "title", "size", "children", "footer"];
+var Modal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    isOpen = _ref.isOpen,
+    onClose = _ref.onClose,
+    title = _ref.title,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    children = _ref.children,
+    footer = _ref.footer,
+    props = _objectWithoutProperties(_ref, _excluded$e);
+  // Lock body scrolling when modal is open
+  useEffect(function () {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return function () {
+      document.body.style.overflow = '';
+    };
+  }, [isOpen]);
+  if (!isOpen) return null;
+  return jsx("div", {
+    className: "aloha-modal-overlay",
+    onClick: onClose,
+    children: jsxs("div", _objectSpread2(_objectSpread2({
+      ref: ref,
+      className: cn('aloha-modal-dialog', "aloha-modal-dialog--".concat(size), className),
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      },
+      role: "dialog",
+      "aria-modal": "true"
+    }, props), {}, {
+      children: [jsxs("div", {
+        className: "aloha-modal-header",
+        children: [title ? jsx(H3, {
+          className: "m-0 [&:not(:first-child)]:mt-0 aloha-modal-title",
+          children: title
+        }) : jsx("div", {}), jsx("button", {
+          type: "button",
+          className: "aloha-modal-close-btn",
+          onClick: onClose,
+          "aria-label": "Close modal",
+          children: jsx(X, {
+            size: 20
+          })
+        })]
+      }), jsx("div", {
+        className: "aloha-modal-body",
+        children: children
+      }), footer && jsx("div", {
+        className: "aloha-modal-footer",
+        children: footer
+      })]
+    }))
+  });
+});
+Modal.displayName = 'Modal';
+
+var variantClasses = {
+  inline: 'inline-flex flex-col items-center',
+  card: 'border border-red-200 bg-red-50 rounded-lg p-6'
+};
+var Error$1 = function Error(_ref) {
   var _ref$title = _ref.title,
     title = _ref$title === void 0 ? 'Error' : _ref$title,
     _ref$message = _ref.message,
@@ -4339,10 +4660,6 @@ var Error = function Error(_ref) {
     variant = _ref$variant === void 0 ? 'inline' : _ref$variant,
     _ref$showIcon = _ref.showIcon,
     showIcon = _ref$showIcon === void 0 ? true : _ref$showIcon;
-  var variantClasses = {
-    inline: 'inline-flex flex-col items-center',
-    card: 'border border-red-200 bg-red-50 rounded-lg p-6'
-  };
   return jsx("div", {
     className: cn(variantClasses[variant], className),
     children: jsxs("div", {
@@ -4367,7 +4684,7 @@ var Error = function Error(_ref) {
   });
 };
 
-var _excluded$c = ["message", "type", "onClose", "duration", "className", "position"];
+var _excluded$d = ["message", "type", "onClose", "duration", "className", "position"];
 var Toast = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var message = _ref.message,
     _ref$type = _ref.type,
@@ -4378,7 +4695,7 @@ var Toast = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className = _ref.className,
     _ref$position = _ref.position,
     position = _ref$position === void 0 ? 'bottom-center' : _ref$position,
-    props = _objectWithoutProperties(_ref, _excluded$c);
+    props = _objectWithoutProperties(_ref, _excluded$d);
   useEffect(function () {
     if (duration > 0) {
       var timer = setTimeout(onClose, duration);
@@ -4441,6 +4758,11 @@ var Toast = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Toast.displayName = 'Toast';
 
+var sizeClasses$3 = {
+  sm: 'w-4 h-4',
+  md: 'w-8 h-8',
+  lg: 'w-12 h-12'
+};
 var Loading = function Loading(_ref) {
   var message = _ref.message,
     className = _ref.className,
@@ -4448,16 +4770,11 @@ var Loading = function Loading(_ref) {
     size = _ref$size === void 0 ? 'md' : _ref$size,
     _ref$centered = _ref.centered,
     centered = _ref$centered === void 0 ? false : _ref$centered;
-  var sizeClasses = {
-    sm: 'w-4 h-4',
-    md: 'w-8 h-8',
-    lg: 'w-12 h-12'
-  };
   var wrapper = centered ? 'flex flex-col items-center justify-center' : 'inline-flex flex-col items-center';
   return jsxs("div", {
     className: cn(wrapper, className),
     children: [jsx(Loader2, {
-      className: cn('animate-spin text-primary', sizeClasses[size])
+      className: cn('animate-spin text-primary', sizeClasses$3[size])
     }), message && jsx("p", {
       className: "mt-2 text-sm text-gray-600",
       children: message
@@ -4471,13 +4788,13 @@ 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$b = ["variant", "size", "color", "className"];
+var _excluded$c = ["variant", "size", "color", "className"];
 var logoMap = {
   horizontal: horizontalLogo,
   vertical: verticalLogo,
   icon: onlyIconLogo
 };
-var sizeClasses$1 = {
+var sizeClasses$2 = {
   xs: 'h-6',
   sm: 'h-8',
   md: 'h-12',
@@ -4546,12 +4863,12 @@ 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$b);
+    props = _objectWithoutProperties(_ref, _excluded$c);
   var logoSrc = logoMap[variant];
   var colorValue = getColorValue$1(color);
   return jsx("div", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn('inline-flex items-center justify-center flex-shrink-0', sizeClasses$1[size], widthClasses[variant][size], className)
+    className: cn('inline-flex items-center justify-center flex-shrink-0', sizeClasses$2[size], widthClasses[variant][size], className)
   }, props), {}, {
     children: jsx("div", {
       className: "w-full h-full",
@@ -4587,7 +4904,7 @@ var settingsIcon = "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encodin
 
 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 _excluded$b = ["name", "size", "color", "className"];
 var iconMap = {
   chat: chatIcon,
   friends: friendsIcon,
@@ -4600,7 +4917,7 @@ var iconMap = {
   settings: settingsIcon,
   streak: streakIcon
 };
-var sizeClasses = {
+var sizeClasses$1 = {
   xs: 'w-4 h-4',
   sm: 'w-6 h-6',
   md: 'w-8 h-8',
@@ -4638,12 +4955,12 @@ 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$a);
+    props = _objectWithoutProperties(_ref, _excluded$b);
   var iconSrc = iconMap[name];
   var colorValue = getColorValue(color);
   return jsx("div", _objectSpread2(_objectSpread2({
     ref: ref,
-    className: cn('inline-flex items-center justify-center flex-shrink-0', sizeClasses[size], className)
+    className: cn('inline-flex items-center justify-center flex-shrink-0', sizeClasses$1[size], className)
   }, props), {}, {
     children: jsx("div", {
       className: "w-full h-full",
@@ -4659,7 +4976,7 @@ var Icon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Icon.displayName = 'Icon';
 
-var _excluded$9 = ["count", "size", "color", "className"];
+var _excluded$a = ["count", "size", "color", "className"];
 var textSizeClasses = {
   xs: 'text-xs',
   sm: 'text-sm',
@@ -4684,7 +5001,7 @@ var Streak = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'girasol' : _ref$color,
     className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded$9);
+    props = _objectWithoutProperties(_ref, _excluded$a);
   return jsxs("div", _objectSpread2(_objectSpread2({
     ref: ref,
     className: cn('inline-flex items-center gap-1', className)
@@ -4701,7 +5018,7 @@ var Streak = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Streak.displayName = 'Streak';
 
-var _excluded$8 = ["message", "name", "time", "emoji", "variant", "bgColor", "messageColor", "headerColor", "className", "style"];
+var _excluded$9 = ["message", "name", "time", "emoji", "variant", "bgColor", "messageColor", "headerColor", "className", "style"];
 var ChatMessage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var message = _ref.message,
     name = _ref.name,
@@ -4714,7 +5031,7 @@ var ChatMessage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     headerColor = _ref.headerColor,
     className = _ref.className,
     style = _ref.style,
-    props = _objectWithoutProperties(_ref, _excluded$8);
+    props = _objectWithoutProperties(_ref, _excluded$9);
   var isSent = variant === 'sent';
   // Colores por defecto según variante, sobreescribibles via props
   var defaultBg = isSent ? 'bosque' : 'lima';
@@ -4775,7 +5092,7 @@ var meltEmoji = "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3
 
 var mewingEmoji = "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-8280.586411%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%2C7244.981668%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.605505%2C0%2C0%2C10.594615%2C-11297.766966%2C-124160.181479%29%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%284.050659%2C-0.127195%2C0.839348%2C0.613836%2C10775.590065%2C12518.555122%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%2C0.033C0.215%2C-14.433%20-1.653%2C-30.535%20-16.714%2C-36.156C-23.707%2C-38.817%20-31.361%2C-38.867%20-38.784%2C-38.801C-53.25%2C-39.016%20-69.368%2C-37.148%20-74.989%2C-22.087C-77.601%2C-15.094%20-77.651%2C-7.439%20-77.585%2C0.033C-77.8%2C14.515%20-75.932%2C30.617%20-60.871%2C36.238C-53.878%2C38.85%20-46.224%2C38.9%20-38.784%2C38.834C-24.319%2C39.049%20-8.216%2C37.18%20-2.596%2C22.12C0.033%2C15.077%200.066%2C7.423%200%2C0.033%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%284.050659%2C-0.127195%2C0.839348%2C0.613836%2C10528.926254%2C12507.635034%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%2C0.969C2.711%2C0.8%205.383%2C0.244%207.935%2C-0.684C9.159%2C-1.147%2010.347%2C-1.7%2011.49%2C-2.337C12.664%2C-2.966%2013.788%2C-3.726%2015.061%2C-4.553L15.16%2C-4.553C15.915%2C-5.04%2016.921%2C-4.834%2017.425%2C-4.09C17.704%2C-3.664%2017.771%2C-3.133%2017.607%2C-2.652C16.245%2C0.823%2013.411%2C3.512%209.87%2C4.689C6.398%2C6.009%202.526%2C5.774%20-0.76%2C4.044C-1.538%2C3.591%20-1.81%2C2.599%20-1.372%2C1.812C-1.103%2C1.353%20-0.629%2C1.051%20-0.099%2C1.002L0%2C0.969Z%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%284.050659%2C-0.127195%2C0.839348%2C0.613836%2C10548.211052%2C12517.448342%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-2.857C2.641%2C-1.889%205.484%2C-1.599%208.266%2C-2.014C9.564%2C-2.266%2010.821%2C-2.694%2012.002%2C-3.287C13.289%2C-3.977%2014.527%2C-4.756%2015.705%2C-5.618C16.35%2C-6.076%2017.243%2C-5.929%2017.706%2C-5.287C17.989%2C-4.886%2018.045%2C-4.367%2017.855%2C-3.915C16.277%2C-0.303%2012.969%2C2.258%209.076%2C2.88C7.125%2C3.219%205.12%2C3.072%203.24%2C2.45C1.442%2C1.871%20-0.187%2C0.861%20-1.504%2C-0.493C-2.055%2C-1.053%20-2.055%2C-1.95%20-1.504%2C-2.51C-1.136%2C-2.864%20-0.604%2C-2.991%20-0.116%2C-2.84L0%2C-2.857Z%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%284.050659%2C-0.127195%2C0.839348%2C0.613836%2C10686.421875%2C12515.197465%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-8.881C2.14%2C-7.067%204.696%2C-5.811%207.439%2C-5.227C8.746%2C-5.018%2010.076%2C-4.99%2011.391%2C-5.145C12.838%2C-5.351%2014.269%2C-5.661%2015.672%2C-6.071C16.434%2C-6.283%2017.225%2C-5.839%2017.441%2C-5.079C17.563%2C-4.6%2017.439%2C-4.092%2017.111%2C-3.723C14.366%2C-0.91%2010.389%2C0.333%206.53%2C-0.417C4.58%2C-0.765%202.747%2C-1.589%201.19%2C-2.814C-0.295%2C-3.976%20-1.47%2C-5.486%20-2.232%2C-7.211C-2.51%2C-7.946%20-2.14%2C-8.766%20-1.405%2C-9.044C-0.957%2C-9.214%20-0.454%2C-9.146%20-0.066%2C-8.865L0%2C-8.881Z%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%284.050659%2C-0.127195%2C0.839348%2C0.613836%2C10663.703479%2C12526.470683%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.25C0.98%2C5.723%201.915%2C5.114%202.794%2C4.431C3.105%2C4.179%203.373%2C3.877%203.587%2C3.539C3.673%2C3.397%203.729%2C3.24%203.753%2C3.076C3.733%2C2.906%203.676%2C2.742%203.587%2C2.596C3.373%2C2.258%203.105%2C1.956%202.794%2C1.704C1.911%2C1.026%200.977%2C0.419%200%2C-0.115C-0.427%2C-0.362%20-0.573%2C-0.908%20-0.326%2C-1.335C-0.322%2C-1.341%20-0.318%2C-1.348%20-0.314%2C-1.355C-0.195%2C-1.567%200.01%2C-1.718%200.248%2C-1.768C1.712%2C-2.12%203.252%2C-1.981%204.629%2C-1.371C5.44%2C-1.036%206.167%2C-0.529%206.762%2C0.117C8.328%2C1.804%208.328%2C4.414%206.762%2C6.101C6.163%2C6.741%205.436%2C7.248%204.629%2C7.589C3.233%2C8.213%201.674%2C8.37%200.182%2C8.035C-0.306%2C7.921%20-0.61%2C7.433%20-0.496%2C6.944C-0.433%2C6.703%20-0.279%2C6.495%20-0.066%2C6.366L0%2C6.25Z%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%284.050659%2C-0.127195%2C0.839348%2C0.613836%2C10656.884448%2C12521.48376%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.323C0.978%2C5.785%201.912%2C5.171%202.794%2C4.488C3.1%2C4.237%203.368%2C3.941%203.587%2C3.612C3.674%2C3.465%203.73%2C3.302%203.753%2C3.132C3.733%2C2.963%203.676%2C2.799%203.587%2C2.653C3.372%2C2.32%203.104%2C2.024%202.794%2C1.777C1.916%2C1.088%200.981%2C0.474%200%2C-0.058C-0.427%2C-0.305%20-0.573%2C-0.851%20-0.326%2C-1.278C-0.322%2C-1.285%20-0.318%2C-1.292%20-0.314%2C-1.298C-0.195%2C-1.511%200.01%2C-1.661%200.248%2C-1.712C1.713%2C-2.055%203.25%2C-1.916%204.629%2C-1.315C5.44%2C-0.98%206.167%2C-0.472%206.762%2C0.173C8.328%2C1.86%208.328%2C4.47%206.762%2C6.158C6.163%2C6.797%205.436%2C7.304%204.629%2C7.646C3.248%2C8.239%201.713%2C8.378%200.248%2C8.042C-0.24%2C7.928%20-0.543%2C7.44%20-0.43%2C6.951C-0.372%2C6.712%20-0.216%2C6.508%200%2C6.389L0%2C6.323Z%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%284.050659%2C-0.127195%2C0.839348%2C0.613836%2C10586.818862%2C12525.048135%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%2C17.335C-1.446%2C13.818%20-3.595%2C10.634%20-6.315%2C7.978C-7.674%2C6.725%20-9.159%2C5.617%20-10.746%2C4.671C-12.41%2C3.689%20-14.145%2C2.833%20-15.937%2C2.109C-16.687%2C1.878%20-17.109%2C1.083%20-16.879%2C0.332C-16.857%2C0.261%20-16.829%2C0.192%20-16.797%2C0.125C-16.585%2C-0.378%20-16.102%2C-0.713%20-15.557%2C-0.735C-13.239%2C-0.826%20-10.93%2C-0.402%20-8.795%2C0.505C-6.621%2C1.406%20-4.636%2C2.707%20-2.943%2C4.341C0.477%2C7.573%202.49%2C12.02%202.662%2C16.723C2.68%2C17.49%202.073%2C18.126%201.306%2C18.145L1.273%2C18.145C0.705%2C18.161%200.186%2C17.826%20-0.033%2C17.302L0%2C17.335Z%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%284.050659%2C-0.127195%2C0.839348%2C0.613836%2C10641.273015%2C12540.151137%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%2C3.852C-13.139%2C3.769%20-25.949%2C-0.263%20-36.767%2C-7.72C-34.602%2C-0.331%20-30.32%2C5.935%20-22.087%2C9.01C-15.094%2C11.622%20-7.439%2C11.672%200%2C11.606C14.466%2C11.82%2030.568%2C9.952%2036.189%2C-5.108C36.552%2C-6.051%2036.85%2C-7.01%2037.114%2C-7.968C26.225%2C-0.361%2013.283%2C3.76%200%2C3.852%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%284.050659%2C-0.127195%2C0.839348%2C0.613836%2C10732.08863%2C12498.744325%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%2C8.727C-0.716%2C7.204%20-1.586%2C5.758%20-2.596%2C4.412L-3.257%2C4.313C-4.533%2C4.079%20-5.793%2C3.758%20-7.026%2C3.354C-9.568%2C2.41%20-11.962%2C1.107%20-14.135%2C-0.514L-14.218%2C-0.514C-14.988%2C-1.004%20-16.01%2C-0.775%20-16.499%2C-0.004C-16.737%2C0.37%20-16.814%2C0.823%20-16.714%2C1.255C-15.308%2C4.698%20-12.49%2C7.372%20-8.977%2C8.595C-6.092%2C9.684%20-2.916%2C9.731%200%2C8.727%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%284.050659%2C-0.127195%2C0.839348%2C0.613836%2C10614.352437%2C12544.46919%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%2C4.131C-0.57%2C3.71%20-1.259%2C3.479%20-1.967%2C3.47C-1.362%2C1.747%20-2.268%2C-0.14%20-3.991%2C-0.745C-4.787%2C-1.025%20-5.66%2C-0.99%20-6.431%2C-0.647C-6.353%2C-2.471%20-7.77%2C-4.013%20-9.594%2C-4.091C-10.079%2C-4.111%20-10.563%2C-4.025%20-11.01%2C-3.837L-5.77%2C-10.45C-4.652%2C-11.895%20-4.917%2C-13.971%20-6.361%2C-15.089C-6.379%2C-15.102%20-6.397%2C-15.116%20-6.414%2C-15.129C-7.906%2C-16.067%20-9.865%2C-15.732%20-10.961%2C-14.352L-21.376%2C-1.308L-21.707%2C-0.878C-21.581%2C-2.736%20-21.886%2C-4.597%20-22.599%2C-6.317C-23.411%2C-7.552%20-24.943%2C-8.098%20-26.352%2C-7.656C-28.138%2C-6.995%20-27.89%2C-5.358%20-28.005%2C-3.308L-28.452%2C2.18C-28.906%2C7.344%20-26.792%2C12.4%20-22.798%2C15.703L-20.334%2C17.588C-17.303%2C20.017%20-13.046%2C20.198%20-9.82%2C18.034L-7.489%2C16.497C-4.477%2C14.481%20-1.79%2C12.017%200.479%2C9.19C1.744%2C7.665%201.534%2C5.403%200.009%2C4.138C0.006%2C4.136%200.003%2C4.133%200%2C4.131%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 = ["className", "name", "size", "alt"];
+var _excluded$8 = ["className", "name", "size", "alt"];
 // Mapeo de nombres a URLs de emojis
 var emojiMap = {
   crazy: crazyEmoji,
@@ -4802,7 +5119,7 @@ var Emoji = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'md' : _ref$size,
     alt = _ref.alt,
-    props = _objectWithoutProperties(_ref, _excluded$7);
+    props = _objectWithoutProperties(_ref, _excluded$8);
   var emojiSrc = emojiMap[name];
   if (!emojiSrc) {
     console.warn("Emoji \"".concat(name, "\" not found"));
@@ -4818,7 +5135,7 @@ var Emoji = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Emoji.displayName = 'Emoji';
 
-var _excluded$6 = ["questionLabel", "questionText", "labelEmoji", "state", "respondents", "respondButtonLabel", "onRespond", "bgColor", "labelBgColor", "labelTextColor", "buttonBgColor", "buttonTextColor", "respondedTextColor", "questionTextColor", "answerBgColor", "answerTextColor", "className", "style"];
+var _excluded$7 = ["questionLabel", "questionText", "labelEmoji", "state", "respondents", "respondButtonLabel", "onRespond", "bgColor", "labelBgColor", "labelTextColor", "buttonBgColor", "buttonTextColor", "respondedTextColor", "questionTextColor", "answerBgColor", "answerTextColor", "className", "style"];
 // ── Defaults por color ────────────────────────────────────────────
 var DEFAULT_COLORS = {
   bgColor: 'koala',
@@ -4854,7 +5171,7 @@ var QuestionCard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     answerTextColor = _ref.answerTextColor,
     className = _ref.className,
     style = _ref.style,
-    props = _objectWithoutProperties(_ref, _excluded$6);
+    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],
@@ -4943,7 +5260,7 @@ var QuestionCard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 QuestionCard.displayName = 'QuestionCard';
 
-var _excluded$5 = ["variant", "name", "emoji", "avatars", "showChevron", "isSelected", "bgColor", "nameColor", "chevronColor", "avatarRingColor", "className", "style", "onClick"];
+var _excluded$6 = ["variant", "name", "emoji", "avatars", "showChevron", "isSelected", "bgColor", "nameColor", "chevronColor", "avatarRingColor", "className", "style", "onClick"];
 // ── Componente ────────────────────────────────────────────────────
 var FriendListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$variant = _ref.variant,
@@ -4963,7 +5280,7 @@ var FriendListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className = _ref.className,
     style = _ref.style,
     onClick = _ref.onClick,
-    props = _objectWithoutProperties(_ref, _excluded$5);
+    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'],
@@ -4996,18 +5313,12 @@ var FriendListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           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, {
-              emoji: av.emoji,
-              size: 40,
-              className: "friend-list-item__stack-avatar",
-              style: {
-                zIndex: avatars.length - i
-              }
-            }, i);
-          })
+        children: [jsx(AvatarGroup, {
+          avatars: avatars,
+          max: 4,
+          size: 40,
+          ringColor: avatarRingColor,
+          className: "friend-list-item__avatar-stack"
         }), name && jsx("span", {
           className: "friend-list-item__name",
           children: name
@@ -5044,7 +5355,7 @@ var face5 = "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22
 
 var face6 = "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-24936.620621%2C-8515.048319%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%2C24258.657021%2C7479.443576%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%2814.552328%2C0%2C0%2C14.552328%2C5404.128905%2C8888.799472%29%22%3E%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.916ZM46.95%2C-29.804L42.206%2C-29.804C41.717%2C-31.858%2040.812%2C-33.635%2039.492%2C-35.135C38.171%2C-36.634%2036.517%2C-37.8%2034.528%2C-38.631C32.54%2C-39.463%2030.322%2C-39.879%2027.877%2C-39.879L19.074%2C-39.879C16.596%2C-39.879%2014.363%2C-39.463%2012.373%2C-38.631C10.385%2C-37.8%208.73%2C-36.634%207.409%2C-35.135C6.089%2C-33.635%205.184%2C-31.858%204.695%2C-29.804L0%2C-29.804C1.076%2C-34.531%203.277%2C-38.199%206.602%2C-40.807C9.928%2C-43.416%2014.085%2C-44.72%2019.074%2C-44.72L27.877%2C-44.72C32.865%2C-44.72%2037.022%2C-43.416%2040.348%2C-40.807C43.673%2C-38.199%2045.874%2C-34.531%2046.95%2C-29.804ZM20.023%2C-18.819L17.238%2C-18.819L14.761%2C-24.471C14.638%2C-24.744%2014.535%2C-25.031%2014.453%2C-25.331C14.372%2C-25.631%2014.317%2C-25.87%2014.29%2C-26.048C14.262%2C-25.87%2014.211%2C-25.631%2014.136%2C-25.331C14.061%2C-25.031%2013.962%2C-24.744%2013.839%2C-24.471L11.361%2C-18.819L8.556%2C-18.819L12.815%2C-28.239L15.744%2C-28.239L20.023%2C-18.819ZM37.783%2C-18.819L34.998%2C-18.819L32.521%2C-24.471C32.398%2C-24.744%2032.295%2C-25.031%2032.213%2C-25.331C32.132%2C-25.631%2032.077%2C-25.87%2032.05%2C-26.048C32.022%2C-25.87%2031.971%2C-25.631%2031.896%2C-25.331C31.821%2C-25.031%2031.722%2C-24.744%2031.599%2C-24.471L29.121%2C-18.819L26.316%2C-18.819L30.575%2C-28.239L33.504%2C-28.239L37.783%2C-18.819Z%22%20style%3D%22fill%3Argb%280%2C132%2C255%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$4 = ["className", "name", "size", "color", "backgroundColor", "repeat", "width", "height", "padding", "rounded", "style"];
+var _excluded$5 = ["className", "name", "size", "color", "backgroundColor", "repeat", "width", "height", "padding", "rounded", "style"];
 // Mapeo de nombres a URLs de patrones
 var patternMap = {
   face1: face1,
@@ -5080,7 +5391,7 @@ var Pattern = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$rounded = _ref.rounded,
     rounded = _ref$rounded === void 0 ? 'none' : _ref$rounded,
     style = _ref.style,
-    props = _objectWithoutProperties(_ref, _excluded$4);
+    props = _objectWithoutProperties(_ref, _excluded$5);
   var patternSrc = patternMap[name];
   if (!patternSrc) {
     console.warn("Pattern \"".concat(name, "\" not found"));
@@ -5153,7 +5464,7 @@ function getHueRotation(color) {
   return hueMap[color] || 0;
 }
 
-var _excluded$3 = ["className", "patterns", "backgroundColor", "gap", "direction", "columns", "size", "padding", "rounded", "style"];
+var _excluded$4 = ["className", "patterns", "backgroundColor", "gap", "direction", "columns", "size", "padding", "rounded", "style"];
 var PatternGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     _ref$patterns = _ref.patterns,
@@ -5173,7 +5484,7 @@ var PatternGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$rounded = _ref.rounded,
     rounded = _ref$rounded === void 0 ? 'none' : _ref$rounded,
     style = _ref.style,
-    props = _objectWithoutProperties(_ref, _excluded$3);
+    props = _objectWithoutProperties(_ref, _excluded$4);
   var roundedClasses = {
     none: '',
     sm: 'rounded-sm',
@@ -5215,7 +5526,7 @@ var PatternGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 PatternGroup.displayName = 'PatternGroup';
 
-var _excluded$2 = ["className", "width", "height", "patternSize", "gap", "patterns", "colors", "randomRotation", "randomScale", "randomOpacity", "backgroundColor", "rounded", "padding", "style"];
+var _excluded$3 = ["className", "width", "height", "patternSize", "gap", "patterns", "colors", "randomRotation", "randomScale", "randomOpacity", "backgroundColor", "rounded", "padding", "style"];
 var allPatterns = ['face1', 'face2', 'face3', 'face4', 'face5', 'face6'];
 var defaultColors = ['bosque', 'lima', 'coral', 'aqua', 'lavanda', 'electrico'];
 var PatternFill = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -5245,7 +5556,7 @@ var PatternFill = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$padding = _ref.padding,
     padding = _ref$padding === void 0 ? 0 : _ref$padding,
     style = _ref.style,
-    props = _objectWithoutProperties(_ref, _excluded$2);
+    props = _objectWithoutProperties(_ref, _excluded$3);
   var containerRef = useRef(null);
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -5330,7 +5641,7 @@ var PatternFill = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 PatternFill.displayName = 'PatternFill';
 
-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 _excluded$2 = ["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,
@@ -5364,7 +5675,7 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$navItems = _ref.navItems,
     navItems = _ref$navItems === void 0 ? [] : _ref$navItems,
     navigate = _ref.navigate,
-    props = _objectWithoutProperties(_ref, _excluded$1);
+    props = _objectWithoutProperties(_ref, _excluded$2);
   // Determinar el texto del botón para nologin
   var defaultButtonText = isRegister ? 'Registrarse' : 'Iniciar Sesión';
   var finalButtonText = buttonText || defaultButtonText;
@@ -5457,6 +5768,49 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 Navbar.displayName = 'Navbar';
 
+var _excluded$1 = ["className", "items", "activeId", "onChange", "variant", "fullWidth"];
+var Tabs = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    activeId = _ref.activeId,
+    onChange = _ref.onChange,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    _ref$fullWidth = _ref.fullWidth,
+    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
+    props = _objectWithoutProperties(_ref, _excluded$1);
+  return jsx("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn('aloha-tabs', "aloha-tabs--".concat(variant), fullWidth && 'aloha-tabs--full-width', className)
+  }, props), {}, {
+    children: jsx("div", {
+      className: "aloha-tabs__list",
+      role: "tablist",
+      children: items.map(function (tab) {
+        var isActive = tab.id === activeId;
+        return jsxs("button", {
+          type: "button",
+          role: "tab",
+          "aria-selected": isActive,
+          onClick: function onClick() {
+            return onChange(tab.id);
+          },
+          className: cn('aloha-tabs__trigger', isActive && 'aloha-tabs__trigger--active'),
+          children: [tab.icon && jsx("span", {
+            className: "aloha-tabs__icon",
+            children: tab.icon
+          }), jsx("span", {
+            className: "aloha-tabs__label",
+            children: tab.label
+          })]
+        }, tab.id);
+      })
+    })
+  }));
+});
+Tabs.displayName = 'Tabs';
+
 var _excluded = ["columns", "rows", "gap", "children", "className", "responsive", "autoFit", "backgroundColor", "padding", "rounded", "style"],
   _excluded2 = ["children", "className", "colSpan", "rowSpan", "colStart", "rowStart", "backgroundColor", "padding", "rounded", "flex", "flexDirection", "align", "justify", "style"];
 var Grid = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -5665,6 +6019,18 @@ var FullPage = function FullPage(_ref) {
   });
 };
 
+var sizeClasses = {
+  sm: 'w-8 h-8',
+  md: 'w-12 h-12',
+  lg: 'w-16 h-16',
+  xl: 'w-24 h-24'
+};
+var backgroundClasses = {
+  white: 'bg-white',
+  gray: 'bg-gray-50',
+  dark: 'bg-gray-900 text-white',
+  transparent: 'bg-transparent'
+};
 var LoadingFullScreen = function LoadingFullScreen(_ref) {
   var _ref$message = _ref.message,
     message = _ref$message === void 0 ? 'Cargando...' : _ref$message,
@@ -5673,18 +6039,6 @@ var LoadingFullScreen = function LoadingFullScreen(_ref) {
     spinnerSize = _ref$spinnerSize === void 0 ? 'lg' : _ref$spinnerSize,
     _ref$background = _ref.background,
     background = _ref$background === void 0 ? 'white' : _ref$background;
-  var sizeClasses = {
-    sm: 'w-8 h-8',
-    md: 'w-12 h-12',
-    lg: 'w-16 h-16',
-    xl: 'w-24 h-24'
-  };
-  var backgroundClasses = {
-    white: 'bg-white',
-    gray: 'bg-gray-50',
-    dark: 'bg-gray-900 text-white',
-    transparent: 'bg-transparent'
-  };
   return jsxs("div", {
     className: cn('fixed inset-0 z-50 flex flex-col items-center justify-center', backgroundClasses[background], className),
     children: [jsx(Loader2, {
@@ -5802,5 +6156,5 @@ var ColorPalette = function ColorPalette(_ref2) {
   });
 };
 
-export { Avatar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatMessage, Checkbox, ColorPalette, ColorSwatch, Emoji, Error, ErrorFullScreen, FormError, 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, Select, Small, Streak, Subtitle, Switch, TextDivider, Toast, badgeVariants, buttonVariants, cn, colorEntries, colors, cssVars, getColor, getCssVar, themeVars };
+export { Avatar, AvatarGroup, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatMessage, Checkbox, ColorPalette, ColorSwatch, Emoji, Error$1 as Error, ErrorFullScreen, FormError, FriendListItem, FullPage, Grid, GridItem, H1, H2, H3, H4, Icon, Image, Input, Lead, Link, Loading, LoadingFullScreen, Logo, Modal, Muted, Navbar, Notification, P, Pattern, PatternFill, PatternGroup, Popup, QuestionCard, RadioGroup, RadioGroupItem, SearchInput, Select, Small, Streak, Subtitle, Switch, Tabs, TextArea, TextDivider, Toast, badgeVariants, buttonVariants, cn, colorEntries, colors, cssVars, getColor, getCssVar, themeVars };
 //# sourceMappingURL=index.esm.js.map