@beweco/aurora-ui 0.6.24 → 0.6.25

package/dist/index.cjs.js

@@ -2284,18 +2284,18 @@ var sanitizeAmountInput = function (raw, maxFractionDigits) {
     return { display: display, amountForParent: amountForParent };
 };
 var Currency = function (_a) {
-    var id = _a.id, label = _a.label, _b = _a.required, required = _b === void 0 ? false : _b, _c = _a.error, error = _c === void 0 ? false : _c, _d = _a.errorText, errorText = _d === void 0 ? "" : _d, value = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.name, name = _f === void 0 ? "currency" : _f, _g = _a.currencySelectorLocked, currencySelectorLocked = _g === void 0 ? false : _g, _h = _a.showInput, showInput = _h === void 0 ? true : _h, optionsProp = _a.options, _j = _a.translations, translations = _j === void 0 ? {} : _j, _k = _a.maxFractionDigits, maxFractionDigits = _k === void 0 ? 0 : _k;
+    var id = _a.id, label = _a.label, _b = _a.required, required = _b === void 0 ? false : _b, _c = _a.error, error = _c === void 0 ? false : _c, _d = _a.errorText, errorText = _d === void 0 ? "" : _d, value = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.name, name = _f === void 0 ? "currency" : _f, _g = _a.currencySelectorLocked, currencySelectorLocked = _g === void 0 ? false : _g, _h = _a.showInput, showInput = _h === void 0 ? true : _h, optionsProp = _a.options, _j = _a.listMaxHeight, listMaxHeight = _j === void 0 ? "max-h-60" : _j, _k = _a.translations, translations = _k === void 0 ? {} : _k, _l = _a.maxFractionDigits, maxFractionDigits = _l === void 0 ? 0 : _l;
     var options = React.useMemo(function () {
         var o = optionsProp !== null && optionsProp !== void 0 ? optionsProp : defaultCurrencyOptions;
         return o.length > 0 ? o : defaultCurrencyOptions;
     }, [optionsProp]);
-    var _l = React.useState(false), isDropdownOpen = _l[0], setIsDropdownOpen = _l[1];
-    var _m = React.useState(options[0]), selected = _m[0], setSelected = _m[1];
-    var _o = React.useState(""), inputValue = _o[0], setInputValue = _o[1];
+    var _m = React.useState(false), isDropdownOpen = _m[0], setIsDropdownOpen = _m[1];
+    var _o = React.useState(options[0]), selected = _o[0], setSelected = _o[1];
+    var _p = React.useState(""), inputValue = _p[0], setInputValue = _p[1];
     var dropdownRef = React.useRef(null);
     var portalDropdownRef = React.useRef(null);
-    var _p = React.useState({}), dropdownPosition = _p[0], setDropdownPosition = _p[1];
-    var _q = React.useState(options), filteredOptions = _q[0], setFilteredOptions = _q[1];
+    var _q = React.useState({}), dropdownPosition = _q[0], setDropdownPosition = _q[1];
+    var _r = React.useState(options), filteredOptions = _r[0], setFilteredOptions = _r[1];
     var t = __assign(__assign({}, defaultTranslations$b), translations);
     var getCountryName = function (opt) { var _a, _b; return (_b = (_a = t.countries) === null || _a === void 0 ? void 0 : _a[opt.country]) !== null && _b !== void 0 ? _b : opt.name; };
     var finalLabel = label !== null && label !== void 0 ? label : t.label;
@@ -2403,13 +2403,51 @@ var Currency = function (_a) {
                                             opt.country.toLowerCase().includes(searchTerm);
                                     });
                                     setFilteredOptions(filtered);
-                                } }) }), jsxRuntime.jsx("div", { className: "max-h-60 overflow-y-auto", children: filteredOptions.length > 0 ? (filteredOptions.map(function (opt) { return (jsxRuntime.jsxs("button", { type: "button", role: "option", "aria-selected": opt.country === selected.country &&
+                                } }) }), jsxRuntime.jsx("div", { className: "".concat(listMaxHeight, " overflow-y-auto"), children: filteredOptions.length > 0 ? (filteredOptions.map(function (opt) { return (jsxRuntime.jsxs("button", { type: "button", role: "option", "aria-selected": opt.country === selected.country &&
                                     opt.currency === selected.currency, className: "flex items-center w-full px-4 py-2.5 text-sm hover:bg-default-200 ".concat(opt.country === selected.country &&
                                     opt.currency === selected.currency
                                     ? "bg-primary-50"
                                     : ""), onClick: function () { return handleOptionSelect(opt); }, children: [jsxRuntime.jsx("span", { className: "mr-3", children: jsxRuntime.jsx(FlagIcon, { countryCode: opt.country, size: "md" }) }), jsxRuntime.jsx("span", { className: "flex-1 text-left text-default-500", children: getCountryName(opt) }), jsxRuntime.jsx("span", { className: "text-xs text-default-500", children: opt.currency })] }, "".concat(opt.country, "-").concat(opt.currency))); })) : (jsxRuntime.jsx("div", { className: "px-4 py-2 text-sm text-default-500", children: t.noCurrenciesFound })) })] }), document.body)] }));
 };
 
+/**
+ * Internal hook — returns current breakpoint based on viewport width.
+ * mobile: < 640px | tablet: 640-1023px | desktop: >= 1024px
+ */
+function useBreakpoint() {
+    var _a = React.useState(function () {
+        if (typeof window === "undefined")
+            return "desktop";
+        var w = window.innerWidth;
+        if (w < 640)
+            return "mobile";
+        if (w < 1024)
+            return "tablet";
+        return "desktop";
+    }), breakpoint = _a[0], setBreakpoint = _a[1];
+    React.useEffect(function () {
+        if (typeof window === "undefined")
+            return;
+        var mobileQuery = window.matchMedia("(max-width: 639px)");
+        var tabletQuery = window.matchMedia("(min-width: 640px) and (max-width: 1023px)");
+        var update = function () {
+            if (mobileQuery.matches)
+                setBreakpoint("mobile");
+            else if (tabletQuery.matches)
+                setBreakpoint("tablet");
+            else
+                setBreakpoint("desktop");
+        };
+        mobileQuery.addEventListener("change", update);
+        tabletQuery.addEventListener("change", update);
+        return function () {
+            mobileQuery.removeEventListener("change", update);
+            tabletQuery.removeEventListener("change", update);
+        };
+    }, []);
+    return breakpoint;
+}
+
 // Default translations in Spanish
 var defaultTranslations$a = {
     emptyStateMessage: "No hay contenido disponible",
@@ -2438,7 +2476,14 @@ var defaultTranslations$a = {
 var ContentCarousel = function (_a) {
     var items = _a.items, onItemClick = _a.onItemClick, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.emptyStateRedirectPath, emptyStateRedirectPath = _c === void 0 ? "" : _c, _d = _a.translations, translations = _d === void 0 ? {} : _d, renderFooter = _a.renderFooter, renderHeader = _a.renderHeader, renderBody = _a.renderBody, _e = _a.haveChip, haveChip = _e === void 0 ? false : _e;
     var t = __assign(__assign({}, defaultTranslations$a), translations);
+    var breakpoint = useBreakpoint();
+    var isMobile = breakpoint === "mobile";
+    var isTablet = breakpoint === "tablet";
     var _f = React.useState(items.length >= 3 ? 1 : 0), activeIndex = _f[0], setActiveIndex = _f[1];
+    var _g = React.useState(0), swipeOffset = _g[0], setSwipeOffset = _g[1];
+    var swipeOffsetRef = React.useRef(0);
+    var touchStartRef = React.useRef(null);
+    var isSwipingRef = React.useRef(false);
     // Reset to show 3 images when items change
     React.useEffect(function () {
         setActiveIndex(items.length >= 3 ? 1 : 0);
@@ -2449,6 +2494,73 @@ var ContentCarousel = function (_a) {
     var handlePrev = React.useCallback(function () {
         setActiveIndex(function (prev) { return Math.max(prev - 1, 0); });
     }, []);
+    var handleDragStart = React.useCallback(function (clientX, clientY) {
+        touchStartRef.current = { x: clientX, y: clientY };
+        isSwipingRef.current = false;
+    }, []);
+    var handleDragMove = React.useCallback(function (clientX, clientY, preventDefault) {
+        if (!touchStartRef.current)
+            return;
+        var deltaX = clientX - touchStartRef.current.x;
+        var deltaY = clientY - touchStartRef.current.y;
+        if (!isSwipingRef.current && Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 10) {
+            isSwipingRef.current = true;
+        }
+        if (isSwipingRef.current) {
+            preventDefault === null || preventDefault === void 0 ? void 0 : preventDefault();
+            var clamped = Math.max(-150, Math.min(150, deltaX));
+            swipeOffsetRef.current = clamped;
+            setSwipeOffset(clamped);
+        }
+    }, []);
+    var handleDragEnd = React.useCallback(function () {
+        var offset = swipeOffsetRef.current;
+        if (isSwipingRef.current && Math.abs(offset) > 50) {
+            if (offset < 0) {
+                handleNext();
+            }
+            else {
+                handlePrev();
+            }
+        }
+        swipeOffsetRef.current = 0;
+        setSwipeOffset(0);
+        touchStartRef.current = null;
+        isSwipingRef.current = false;
+    }, [handleNext, handlePrev]);
+    // Touch events
+    var handleTouchStart = React.useCallback(function (e) {
+        handleDragStart(e.touches[0].clientX, e.touches[0].clientY);
+    }, [handleDragStart]);
+    var handleTouchMove = React.useCallback(function (e) {
+        handleDragMove(e.touches[0].clientX, e.touches[0].clientY, function () { return e.preventDefault(); });
+    }, [handleDragMove]);
+    var handleTouchEnd = React.useCallback(function () {
+        handleDragEnd();
+    }, [handleDragEnd]);
+    // Mouse events
+    var isDraggingRef = React.useRef(false);
+    var handleMouseDown = React.useCallback(function (e) {
+        isDraggingRef.current = true;
+        handleDragStart(e.clientX, e.clientY);
+    }, [handleDragStart]);
+    var handleMouseMove = React.useCallback(function (e) {
+        if (!isDraggingRef.current)
+            return;
+        handleDragMove(e.clientX, e.clientY);
+    }, [handleDragMove]);
+    var handleMouseUp = React.useCallback(function () {
+        if (!isDraggingRef.current)
+            return;
+        isDraggingRef.current = false;
+        handleDragEnd();
+    }, [handleDragEnd]);
+    var handleMouseLeave = React.useCallback(function () {
+        if (!isDraggingRef.current)
+            return;
+        isDraggingRef.current = false;
+        handleDragEnd();
+    }, [handleDragEnd]);
     // Get position of card relative to active index
     var getPosition = function (index) {
         if (index === activeIndex) {
@@ -2469,19 +2581,19 @@ var ContentCarousel = function (_a) {
     }, [onItemClick]);
     // Empty state when no items
     if (items.length === 0) {
-        return (jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-16 px-6 gap-6 ".concat(className), children: [jsxRuntime.jsx("p", { className: "text-default-500 text-center", children: t.emptyStateMessage }), emptyStateRedirectPath && (jsxRuntime.jsx(react.Button, { color: "primary", variant: "solid", size: "md", onPress: function () {
+        return (jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center px-6 gap-6 ".concat(isMobile ? "py-8" : "py-16", " ").concat(className), children: [jsxRuntime.jsx("p", { className: "text-default-500 text-center", children: t.emptyStateMessage }), emptyStateRedirectPath && (jsxRuntime.jsx(react.Button, { color: "primary", variant: "solid", size: "md", className: isMobile ? "w-full" : "", onPress: function () {
                         if (typeof window !== "undefined") {
                             window.location.href = emptyStateRedirectPath;
                         }
                     }, startContent: jsxRuntime.jsx(IconComponent, { icon: "solar:add-circle-bold", className: "w-5 h-5" }), children: t.emptyStateButtonText }))] }));
     }
-    return (jsxRuntime.jsx("div", { className: "relative w-full ".concat(className), children: jsxRuntime.jsxs("div", { className: "relative w-full pt-4 pb-8", children: [jsxRuntime.jsxs("div", { className: "relative h-[450px] flex items-center justify-center overflow-hidden", children: [items.length > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "absolute left-0 top-1/2 -translate-y-1/2 z-20 ml-4", children: jsxRuntime.jsx(react.Button, { isIconOnly: true, variant: "bordered", onPress: handlePrev, isDisabled: activeIndex === 0, className: "rounded-full bg-white/95 dark:bg-gray-800/95 backdrop-blur-md border-gray-200 dark:border-gray-700 shadow-xl hover:bg-white dark:hover:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-600 hover:scale-110 hover:-translate-x-1 disabled:opacity-20 disabled:hover:scale-100 disabled:hover:translate-x-0 transition-all duration-300 w-12 h-12", "aria-label": t.previousButtonLabel, children: jsxRuntime.jsx(IconComponent, { icon: "solar:alt-arrow-left-outline", className: "w-6 h-6" }) }) }), jsxRuntime.jsx("div", { className: "absolute right-0 top-1/2 -translate-y-1/2 z-20 mr-4", children: jsxRuntime.jsx(react.Button, { isIconOnly: true, variant: "bordered", onPress: handleNext, isDisabled: activeIndex === items.length - 1, className: "rounded-full bg-white/95 dark:bg-gray-800/95 backdrop-blur-md border-gray-200 dark:border-gray-700 shadow-xl hover:bg-white dark:hover:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-600 hover:scale-110 hover:translate-x-1 disabled:opacity-20 disabled:hover:scale-100 disabled:hover:translate-x-0 transition-all duration-300 w-12 h-12", "aria-label": t.nextButtonLabel, children: jsxRuntime.jsx(IconComponent, { icon: "solar:alt-arrow-right-outline", className: "w-6 h-6" }) }) })] })), items.map(function (item, index) {
+    return (jsxRuntime.jsx("div", { className: "relative w-full ".concat(className), children: jsxRuntime.jsxs("div", { className: "relative w-full pt-4 pb-8", children: [jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center ".concat(isMobile ? "h-[420px] overflow-visible" : isTablet ? "h-[380px] overflow-hidden" : "h-[450px] overflow-hidden"), onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseLeave, style: { cursor: isMobile ? "grab" : undefined }, children: [items.length > 1 && !isMobile && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "absolute left-0 top-1/2 -translate-y-1/2 z-20 ".concat(isMobile ? "ml-2" : "ml-4"), children: jsxRuntime.jsx(react.Button, { isIconOnly: true, variant: "bordered", onPress: handlePrev, isDisabled: activeIndex === 0, className: "rounded-full bg-white/95 dark:bg-gray-800/95 backdrop-blur-md border-gray-200 dark:border-gray-700 shadow-xl hover:bg-white dark:hover:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-600 hover:scale-110 hover:-translate-x-1 disabled:opacity-20 disabled:hover:scale-100 disabled:hover:translate-x-0 transition-all duration-300 ".concat(isMobile ? "w-8 h-8" : "w-12 h-12"), "aria-label": t.previousButtonLabel, children: jsxRuntime.jsx(IconComponent, { icon: "solar:alt-arrow-left-outline", className: isMobile ? "w-4 h-4" : "w-6 h-6" }) }) }), jsxRuntime.jsx("div", { className: "absolute right-0 top-1/2 -translate-y-1/2 z-20 ".concat(isMobile ? "mr-2" : "mr-4"), children: jsxRuntime.jsx(react.Button, { isIconOnly: true, variant: "bordered", onPress: handleNext, isDisabled: activeIndex === items.length - 1, className: "rounded-full bg-white/95 dark:bg-gray-800/95 backdrop-blur-md border-gray-200 dark:border-gray-700 shadow-xl hover:bg-white dark:hover:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-600 hover:scale-110 hover:translate-x-1 disabled:opacity-20 disabled:hover:scale-100 disabled:hover:translate-x-0 transition-all duration-300 ".concat(isMobile ? "w-8 h-8" : "w-12 h-12"), "aria-label": t.nextButtonLabel, children: jsxRuntime.jsx(IconComponent, { icon: "solar:alt-arrow-right-outline", className: isMobile ? "w-4 h-4" : "w-6 h-6" }) }) })] })), items.map(function (item, index) {
                             var position = getPosition(index);
                             if (position === "hidden") {
                                 return null;
                             }
-                            return (jsxRuntime.jsx(CarouselItemComponent, { item: item, position: position, onClick: function () { return handleItemClick(item); }, translations: t, renderFooter: renderFooter, renderHeader: renderHeader, renderBody: renderBody, haveChip: haveChip }, item.id));
-                        })] }), items.length > 1 && (jsxRuntime.jsx("div", { className: "flex justify-center mt-4", children: jsxRuntime.jsx("div", { className: "flex justify-center gap-2", children: items.map(function (_, index) { return (jsxRuntime.jsx("button", { type: "button", onClick: function () { return setActiveIndex(index); }, className: "rounded-full transition-all duration-300 hover:scale-110 ".concat(index === activeIndex
+                            return (jsxRuntime.jsx(CarouselItemComponent, { item: item, position: position, breakpoint: breakpoint, onClick: function () { return handleItemClick(item); }, translations: t, renderFooter: renderFooter, renderHeader: renderHeader, renderBody: renderBody, haveChip: haveChip, swipeOffset: swipeOffset }, item.id));
+                        })] }), items.length > 1 && (jsxRuntime.jsx("div", { className: "flex justify-center mt-4", children: jsxRuntime.jsx("div", { className: "flex justify-center ".concat(isMobile ? "gap-1.5" : "gap-2"), children: items.map(function (_, index) { return (jsxRuntime.jsx("button", { type: "button", onClick: function () { return setActiveIndex(index); }, className: "rounded-full transition-all duration-300 hover:scale-110 ".concat(index === activeIndex
                                 ? "w-8 h-2 bg-gradient-to-r from-primary-500 to-primary-600 shadow-lg shadow-primary-500/50"
                                 : "w-2 h-2 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 hover:w-3"), "aria-label": "".concat(t.goToItemLabel, " ").concat(index + 1) }, index)); }) }) }))] }) }));
 };
@@ -2491,11 +2603,42 @@ var ContentCarousel = function (_a) {
  * @internal
  */
 function CarouselItemComponent(_a) {
-    var item = _a.item, position = _a.position, onClick = _a.onClick, translations = _a.translations, renderFooter = _a.renderFooter, renderHeader = _a.renderHeader, renderBody = _a.renderBody, haveChip = _a.haveChip;
-    var _b = React.useState(false), isHovered = _b[0], setIsHovered = _b[1];
+    var item = _a.item, position = _a.position, breakpoint = _a.breakpoint, onClick = _a.onClick, translations = _a.translations, renderFooter = _a.renderFooter, renderHeader = _a.renderHeader, renderBody = _a.renderBody, haveChip = _a.haveChip, swipeOffset = _a.swipeOffset;
+    var _b = React.useState(false), hoverState = _b[0], setHoverState = _b[1];
+    var isMobile = breakpoint === "mobile";
+    var isHovered = isMobile ? false : hoverState;
     var captionText = item.caption || item.title;
-    // Get styles based on position
+    // Get styles based on position and breakpoint
     var getPositionStyles = function () {
+        if (breakpoint === "mobile") {
+            var baseStyles_1 = {
+                minHeight: "380px",
+                maxHeight: "380px",
+                boxShadow: "0 10px 40px -5px rgba(0, 0, 0, 0.3), 0 8px 25px -8px rgba(0, 0, 0, 0.2)",
+            };
+            if (position === "center") {
+                return __assign(__assign({}, baseStyles_1), { width: "85vw", transform: "translateX(".concat(swipeOffset, "px) scale(1)"), opacity: 1, zIndex: 10, transition: swipeOffset !== 0 ? "none" : undefined });
+            }
+            return __assign(__assign({}, baseStyles_1), { width: "85vw", transform: "scale(0.8)", opacity: 0, zIndex: 0, pointerEvents: "none" });
+        }
+        if (breakpoint === "tablet") {
+            var baseStyles_2 = {
+                minHeight: "340px",
+                maxHeight: "340px",
+                boxShadow: "0 10px 40px -5px rgba(0, 0, 0, 0.3), 0 8px 25px -8px rgba(0, 0, 0, 0.2)",
+            };
+            if (position === "center") {
+                return __assign(__assign({}, baseStyles_2), { width: "420px", transform: "scale(1)", opacity: 1, zIndex: 10 });
+            }
+            if (position === "left") {
+                return __assign(__assign({}, baseStyles_2), { width: "250px", transform: "translateX(-115%) scale(0.7)", opacity: 0.6, zIndex: 5 });
+            }
+            if (position === "right") {
+                return __assign(__assign({}, baseStyles_2), { width: "250px", transform: "translateX(115%) scale(0.7)", opacity: 0.6, zIndex: 5 });
+            }
+            return baseStyles_2;
+        }
+        // Desktop: current behavior unchanged
         var baseStyles = {
             minHeight: "400px",
             maxHeight: "400px",
@@ -2512,7 +2655,7 @@ function CarouselItemComponent(_a) {
         }
         return baseStyles;
     };
-    return (jsxRuntime.jsxs("div", { className: "absolute rounded-3xl shadow-lg transition-all duration-500 ease-in-out flex flex-col overflow-hidden", style: getPositionStyles(), onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); }, children: [item.imageUrl ? (jsxRuntime.jsx("div", { className: "absolute inset-0 bg-cover bg-center transition-all duration-500 ease-in-out ".concat(isHovered ? "scale-110 blur-sm" : "scale-100 blur-0"), style: {
+    return (jsxRuntime.jsxs("div", { className: "absolute rounded-[2rem] shadow-lg transition-all duration-500 ease-in-out flex flex-col overflow-hidden", style: getPositionStyles(), onMouseEnter: function () { return !isMobile && setHoverState(true); }, onMouseLeave: function () { return !isMobile && setHoverState(false); }, children: [item.imageUrl ? (jsxRuntime.jsx("div", { className: "absolute inset-0 bg-cover bg-center transition-all duration-500 ease-in-out ".concat(isHovered ? "scale-110 blur-sm" : "scale-100 blur-0"), style: {
                     backgroundImage: "url(".concat(item.imageUrl, ")"),
                 } })) : (jsxRuntime.jsx("div", { className: "absolute inset-0 transition-all duration-500 ease-in-out ".concat(isHovered ? "scale-110 blur-sm" : "scale-100 blur-0"), style: {
                     background: item.gradient,
@@ -2522,7 +2665,7 @@ function CarouselItemComponent(_a) {
                     item: item,
                     isHovered: isHovered,
                     translations: translations,
-                }) })), haveChip && item.chipContent != null && (jsxRuntime.jsx("div", { className: "absolute top-4 right-4 z-30", children: item.chipContent })), renderBody ? (jsxRuntime.jsx("div", { className: "relative w-full h-full z-10", children: renderBody(item, isHovered) })) : (jsxRuntime.jsxs("button", { type: "button", onClick: onClick, className: "relative w-full h-full cursor-pointer flex flex-col justify-between p-6 z-10", "aria-label": item.title, children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx("h3", { className: "text-white text-3xl font-semibold mb-2 text-left drop-shadow-lg", children: item.title }) }), jsxRuntime.jsx("div", { className: "space-y-3 overflow-hidden", children: jsxRuntime.jsx("p", { className: "text-white text-sm text-left drop-shadow-md transition-all duration-500 ease-in-out ".concat(!isHovered && "line-clamp-2"), children: captionText }) })] })), renderFooter && (function () {
+                }) })), haveChip && item.chipContent != null && (jsxRuntime.jsx("div", { className: "absolute top-4 right-4 z-30 ".concat(breakpoint === "mobile" ? "scale-90" : ""), children: item.chipContent })), renderBody ? (jsxRuntime.jsx("div", { className: "relative w-full h-full z-10", children: renderBody(item, isHovered) })) : (jsxRuntime.jsxs("button", { type: "button", onClick: onClick, className: "relative w-full h-full cursor-pointer flex flex-col justify-between p-6 z-10", "aria-label": item.title, children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx("h3", { className: "text-white font-semibold mb-2 text-left drop-shadow-lg ".concat(breakpoint === "mobile" ? "text-xl" : "text-3xl"), children: item.title }) }), jsxRuntime.jsx("div", { className: "space-y-3 overflow-hidden", children: jsxRuntime.jsx("p", { className: "text-white text-sm text-left drop-shadow-md transition-all duration-500 ease-in-out ".concat(!isHovered && "line-clamp-2"), children: captionText }) })] })), renderFooter && (function () {
                 var footerContent = renderFooter({
                     item: item,
                     isHovered: isHovered,
@@ -2608,28 +2751,33 @@ var SocialMediaCarousel = function (_a) {
             onPreview(item);
         }
     }, [onPreview]);
+    var breakpoint = useBreakpoint();
+    var isMobile = breakpoint === "mobile";
     // Custom footer renderer with audience info + SocialMediaBar
     var renderSocialFooterWithAudience = React.useCallback(function (_a) {
         var item = _a.item, isHovered = _a.isHovered, translations = _a.translations;
         var socialItem = item;
         var showAudience = !hideAudienceInfo && socialItem.targetAudienceCount;
-        return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [showAudience && (jsxRuntime.jsxs("div", { className: "backdrop-blur-xl border border-white/30 shadow-xl flex items-center transition-all duration-500 ".concat(isHovered
+        var isExpanded = isMobile || isHovered;
+        return (jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [showAudience && (jsxRuntime.jsxs("div", { className: "backdrop-blur-xl border border-white/30 shadow-xl flex items-center transition-all duration-500 ".concat(isExpanded
                         ? "bg-gradient-to-br from-white/40 to-white/30 rounded-2xl px-4 py-2.5 gap-3 max-w-md"
                         : "bg-gradient-to-br from-white/30 to-white/20 rounded-3xl px-3 py-1.5 gap-1.5 w-fit"), style: {
-                        animation: isHovered
+                        animation: isExpanded
                             ? "none"
                             : "pulse-subtle 3s ease-in-out infinite",
-                    }, children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 flex-shrink-0", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:users-group-rounded-bold", className: "w-3.5 h-3.5 text-white transition-transform duration-300 hover:scale-110" }), jsxRuntime.jsx("span", { className: "text-[11px] font-medium text-white transition-all duration-500 ".concat(isHovered
+                    }, children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 flex-shrink-0", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:users-group-rounded-bold", className: "w-3.5 h-3.5 text-white transition-transform duration-300 hover:scale-110" }), jsxRuntime.jsx("span", { className: "text-[11px] font-medium text-white transition-all duration-500 ".concat(isExpanded
                                         ? "opacity-100 max-w-20"
-                                        : "opacity-100 max-w-20 whitespace-nowrap"), children: socialItem.targetAudienceCount.toLocaleString("es-ES") })] }), socialItem.audienceReason && isHovered && (jsxRuntime.jsx("div", { className: "text-[11px] text-white/95 leading-relaxed animate-fade-in", children: socialItem.audienceReason })), socialItem.requiredTags &&
+                                        : "opacity-100 max-w-20 whitespace-nowrap"), children: isMobile && socialItem.targetAudienceCount >= 1000
+                                        ? "".concat((socialItem.targetAudienceCount / 1000).toFixed(1), "K")
+                                        : socialItem.targetAudienceCount.toLocaleString("es-ES") })] }), socialItem.audienceReason && isExpanded && (jsxRuntime.jsx("div", { className: "text-[11px] text-white/95 leading-relaxed animate-fade-in", children: socialItem.audienceReason })), socialItem.requiredTags &&
                             socialItem.requiredTags.length > 0 &&
-                            isHovered && (jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 mt-2 pt-2 border-t border-white/20 animate-fade-in", children: socialItem.requiredTags.map(function (tag, idx) { return (jsxRuntime.jsx("span", { className: "text-[9px] px-1.5 py-0.5 rounded-md bg-white/20 text-white/95 backdrop-blur-sm border border-white/30", children: tag }, idx)); }) }))] })), !hideFooter && (jsxRuntime.jsx(SocialMediaBar, { platform: socialItem.type, isHovered: isHovered, showPreview: typeof onPreview === "function", onEdit: onEdit ? function () { return onEdit(socialItem); } : undefined, onDelete: onDelete ? function () { return onDelete(socialItem); } : undefined, onPublish: onPublish ? function () { return onPublish(socialItem); } : undefined, onPreview: function () { return handlePreview(socialItem); }, translations: {
+                            isExpanded && (jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 mt-2 pt-2 border-t border-white/20 animate-fade-in", children: socialItem.requiredTags.map(function (tag, idx) { return (jsxRuntime.jsx("span", { className: "rounded-md bg-white/20 text-white/95 backdrop-blur-sm border border-white/30 whitespace-nowrap ".concat(isMobile ? "text-[8px] px-1 py-0.5" : "text-[9px] px-1.5 py-0.5"), children: tag }, idx)); }) }))] })), !hideFooter && (jsxRuntime.jsx(SocialMediaBar, { platform: socialItem.type, isHovered: isHovered, showPreview: typeof onPreview === "function", onEdit: onEdit ? function () { return onEdit(socialItem); } : undefined, onDelete: onDelete ? function () { return onDelete(socialItem); } : undefined, onPublish: onPublish ? function () { return onPublish(socialItem); } : undefined, onPreview: function () { return handlePreview(socialItem); }, translations: {
                         editButtonLabel: translations.editButtonLabel,
                         deleteButtonLabel: translations.deleteButtonLabel,
                         publishButtonLabel: translations.publishButtonLabel,
                         previewButtonLabel: translations.previewButtonLabel,
                     } }))] }));
-    }, [hideAudienceInfo, hideFooter, onEdit, onDelete, onPublish, handlePreview]);
+    }, [hideAudienceInfo, hideFooter, onEdit, onDelete, onPublish, handlePreview, isMobile]);
     return (jsxRuntime.jsx(ContentCarousel, { items: items, onItemClick: onItemClick, className: className, emptyStateRedirectPath: emptyStateRedirectPath, translations: translations, renderFooter: renderSocialFooterWithAudience, haveChip: haveChip }));
 };
 
@@ -4794,7 +4942,7 @@ var SpeechBubble = React.memo(function (_a) {
     return (jsxRuntime.jsxs(framerMotion.motion.div, { initial: { opacity: 0, y: 12, scale: 0.97 }, animate: { opacity: 1, y: 0, scale: 1 }, transition: {
             duration: 0.6,
             ease: [0.4, 0.0, 0.2, 1],
-        }, className: "relative ".concat(className), style: { maxWidth: "".concat(maxWidth, "px") }, children: [jsxRuntime.jsx("div", { className: "bg-white/85 dark:bg-gray-900/85 backdrop-blur-xl rounded-3xl px-8 py-6 shadow-[0_8px_30px_rgba(0,0,0,0.04)] dark:shadow-[0_8px_30px_rgba(0,0,0,0.3)] border border-white/50 dark:border-gray-800/50", children: jsxRuntime.jsxs("p", { className: "text-lg text-gray-800 dark:text-gray-200 leading-relaxed font-sans font-normal", children: [displayedText, isTyping && (jsxRuntime.jsx(framerMotion.motion.span, { animate: { opacity: [0.3, 1, 0.3] }, transition: {
+        }, className: "relative ".concat(className), style: { maxWidth: "".concat(maxWidth, "px") }, children: [jsxRuntime.jsx("div", { className: "bg-white/85 dark:bg-gray-900/85 backdrop-blur-xl rounded-3xl px-8 py-6 shadow-[0_8px_30px_rgba(0,0,0,0.04)] dark:shadow-[0_8px_30px_rgba(0,0,0,0.3)] border border-white/50 dark:border-gray-800/50", children: jsxRuntime.jsxs("p", { className: "text-sm md:text-lg text-gray-800 dark:text-gray-200 leading-relaxed font-sans font-normal", children: [displayedText, isTyping && (jsxRuntime.jsx(framerMotion.motion.span, { animate: { opacity: [0.3, 1, 0.3] }, transition: {
                                 duration: 1.2,
                                 repeat: Infinity,
                                 ease: "easeInOut",
@@ -4900,7 +5048,7 @@ var TwoColumnLayoutAgent = function (_a) {
             setShowRightContent(true);
         }, 100);
     };
-    return (jsxRuntime.jsxs("div", { className: "min-h-screen relative isolate overflow-hidden ".concat(className), children: [jsxRuntime.jsx(BackButton, { onPress: handleBackPress, visible: showBackButton, label: t.backButtonLabel }), jsxRuntime.jsx(AnimatedBackground, {}), jsxRuntime.jsx("div", { className: "relative z-10 flex flex-col h-screen", children: jsxRuntime.jsxs("div", { className: "flex-grow flex overflow-hidden", children: [jsxRuntime.jsx(framerMotion.motion.div, { initial: false, animate: { opacity: 1, x: 0 }, transition: { duration: 0.8, ease: [0.4, 0.0, 0.2, 1] }, className: "".concat(isDesktop ? "flex w-2/5" : "hidden", " flex-col items-center justify-center p-8 xl:p-12"), children: jsxRuntime.jsx(AssistantOrb, { text: assistantSpeech, state: assistantState, size: assistantSize, animated: true, typing: enableSequence, typingSpeed: TYPING_SPEED_MS, hint: assistantHint, onTypingComplete: handleTypingComplete }) }), jsxRuntime.jsxs("div", { className: "".concat(isDesktop ? "w-3/5 p-12" : "w-full p-6 sm:p-8", " flex flex-col items-center justify-center overflow-y-auto"), children: [!isDesktop && (jsxRuntime.jsx("div", { className: "mb-8 flex flex-col items-center gap-4", children: jsxRuntime.jsx(AssistantOrb, { text: assistantSpeech, state: assistantState, size: "lg", animated: true, typing: false }) })), jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", initial: false, children: showRightContent && (jsxRuntime.jsx(framerMotion.motion.div, { initial: false, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -30 }, transition: { duration: 0.6, ease: [0.4, 0.0, 0.2, 1] }, className: "w-full max-w-2xl", children: children }, "right-content")) })] })] }) })] }));
+    return (jsxRuntime.jsxs("div", { className: "min-h-screen relative isolate overflow-hidden ".concat(className), children: [jsxRuntime.jsx(BackButton, { onPress: handleBackPress, visible: showBackButton, label: t.backButtonLabel }), jsxRuntime.jsx(AnimatedBackground, {}), jsxRuntime.jsx("div", { className: "relative z-10 flex flex-col h-screen", children: jsxRuntime.jsxs("div", { className: "flex-grow flex overflow-hidden", children: [jsxRuntime.jsx(framerMotion.motion.div, { initial: false, animate: { opacity: 1, x: 0 }, transition: { duration: 0.8, ease: [0.4, 0.0, 0.2, 1] }, className: "".concat(isDesktop ? "flex w-2/5" : "hidden", " flex-col items-center justify-center p-8 xl:p-12"), children: jsxRuntime.jsx(AssistantOrb, { text: assistantSpeech, state: assistantState, size: assistantSize, animated: true, typing: enableSequence, typingSpeed: TYPING_SPEED_MS, hint: assistantHint, onTypingComplete: handleTypingComplete }) }), jsxRuntime.jsxs("div", { className: "".concat(isDesktop ? "w-3/5 p-12 justify-center" : "w-full p-6 sm:p-8 justify-start", " flex flex-col items-center overflow-y-auto"), children: [!isDesktop && (jsxRuntime.jsx("div", { className: "mb-2 flex flex-col items-center gap-4", children: jsxRuntime.jsx(AssistantOrb, { text: assistantSpeech, state: assistantState, size: "sm", animated: true, typing: false, className: "!gap-1 [&>*:nth-child(2)]:-mt-10" }) })), jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", initial: false, children: showRightContent && (jsxRuntime.jsx(framerMotion.motion.div, { initial: false, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -30 }, transition: { duration: 0.6, ease: [0.4, 0.0, 0.2, 1] }, className: "w-full max-w-2xl", children: children }, "right-content")) })] })] }) })] }));
 };
 
 // Traducciones por defecto en español