@beweco/aurora-ui 0.1.23 → 0.1.25

package/dist/index.cjs.js

@@ -177,7 +177,7 @@ var Input = function (_a) {
         } })));
 };
 
-var defaultTranslations$a = {
+var defaultTranslations$d = {
     addHolidayTitle: "Add holiday",
     dayOption: "Day",
     dateRangeOption: "Date range",
@@ -201,7 +201,7 @@ var INITIAL_HOLIDAY_STATE = {
  */
 var AddHolidayForm = function (_a) {
     var onAddHoliday = _a.onAddHoliday, translations = _a.translations, className = _a.className, radioGroupProps = _a.radioGroupProps, dateRangePickerProps = _a.dateRangePickerProps, buttonProps = _a.buttonProps;
-    var t = __assign(__assign({}, defaultTranslations$a), translations);
+    var t = __assign(__assign({}, defaultTranslations$d), translations);
     var _b = React.useState(INITIAL_HOLIDAY_STATE), newHoliday = _b[0], setNewHoliday = _b[1];
     /**
      * A boolean flag that determines if a date has been set.
@@ -271,7 +271,7 @@ var P = function (_a) {
     return (jsxRuntime.jsx("p", __assign({ className: react.cn("text-tiny text-default-500 font-normal", className) }, props, { children: children })));
 };
 
-var defaultTranslations$9 = {
+var defaultTranslations$c = {
     title: "Analytics",
     description: "Monthly growth of your metrics during the selected period",
     viewDetails: "View Details",
@@ -325,7 +325,7 @@ var formatMonth = function (month) {
 var AnalyticsCard = function (_a) {
     var _b, _c;
     var data = _a.data, _d = _a.showTimePeriods, showTimePeriods = _d === void 0 ? true : _d, _e = _a.showDropdownMenu, showDropdownMenu = _e === void 0 ? true : _e, _f = _a.showMetricCards, showMetricCards = _f === void 0 ? true : _f, onChartChange = _a.onChartChange, onMenuAction = _a.onMenuAction, onTimePeriodChange = _a.onTimePeriodChange, _g = _a.translations, translations = _g === void 0 ? {} : _g, props = __rest(_a, ["data", "showTimePeriods", "showDropdownMenu", "showMetricCards", "onChartChange", "onMenuAction", "onTimePeriodChange", "translations"]);
-    var t = __assign(__assign({}, defaultTranslations$9), translations);
+    var t = __assign(__assign({}, defaultTranslations$c), translations);
     var _h = React.useState((_c = (_b = data[0]) === null || _b === void 0 ? void 0 : _b.key) !== null && _c !== void 0 ? _c : ""), activeChart = _h[0], setActiveChart = _h[1];
     var activeChartData = React.useMemo(function () {
         var _a;
@@ -989,8 +989,229 @@ var Chip = function (_a) {
     return (jsxRuntime.jsx(react.Chip, __assign({}, props, { onClose: props.onClose, classNames: __assign({ base: colorClasses }, props.classNames) })));
 };
 
+// Default translations in Spanish
+var defaultTranslations$b = {
+    emptyStateMessage: "No hay contenido disponible",
+    emptyStateButtonText: "Agregar contenido",
+    previousButtonLabel: "Anterior",
+    nextButtonLabel: "Siguiente",
+    editButtonLabel: "Editar",
+    deleteButtonLabel: "Eliminar",
+    publishButtonLabel: "Publicar",
+    previewButtonLabel: "Ver vista previa",
+    goToItemLabel: "Ir al item",
+};
+/**
+ * ContentCarousel - Generic 3D carousel component
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ContentCarousel
+ *   items={items}
+ *   onItemClick={handleItemClick}
+ *   renderFooter={({ item }) => <div>Footer content</div>}
+ * />
+ * ```
+ */
+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;
+    var t = __assign(__assign({}, defaultTranslations$b), translations);
+    var _e = React.useState(items.length >= 3 ? 1 : 0), activeIndex = _e[0], setActiveIndex = _e[1];
+    // Reset to show 3 images when items change
+    React.useEffect(function () {
+        setActiveIndex(items.length >= 3 ? 1 : 0);
+    }, [items.length]);
+    var handleNext = React.useCallback(function () {
+        setActiveIndex(function (prev) { return Math.min(prev + 1, items.length - 1); });
+    }, [items.length]);
+    var handlePrev = React.useCallback(function () {
+        setActiveIndex(function (prev) { return Math.max(prev - 1, 0); });
+    }, []);
+    // Get position of card relative to active index
+    var getPosition = function (index) {
+        if (index === activeIndex) {
+            return "center";
+        }
+        if (index === activeIndex - 1) {
+            return "left";
+        }
+        if (index === activeIndex + 1) {
+            return "right";
+        }
+        return "hidden";
+    };
+    var handleItemClick = React.useCallback(function (item) {
+        if (onItemClick) {
+            onItemClick(item);
+        }
+    }, [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 () {
+                        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) {
+                            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 }, 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
+                                ? "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)); }) }) }))] }) }));
+};
+/**
+ * Internal carousel item component
+ * Renders a single card with customizable content
+ * @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;
+    var _b = React.useState(false), isHovered = _b[0], setIsHovered = _b[1];
+    var captionText = item.caption || item.title;
+    // Get styles based on position
+    var getPositionStyles = function () {
+        var baseStyles = {
+            minHeight: "400px",
+            maxHeight: "400px",
+            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), { width: "500px", transform: "scale(1)", opacity: 1, zIndex: 10 });
+        }
+        if (position === "left") {
+            return __assign(__assign({}, baseStyles), { width: "350px", transform: "translateX(-115%) scale(0.75)", opacity: 0.7, zIndex: 5 });
+        }
+        if (position === "right") {
+            return __assign(__assign({}, baseStyles), { width: "350px", transform: "translateX(115%) scale(0.75)", opacity: 0.7, zIndex: 5 });
+        }
+        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: {
+                    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,
+                } })), jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-b transition-all duration-500 ease-in-out ".concat(isHovered
+                    ? "from-black/70 via-black/60 to-black/80"
+                    : "from-black/40 via-black/20 to-black/50") }), renderHeader && (jsxRuntime.jsx("div", { className: "absolute top-4 left-4 right-4 z-20", children: renderHeader({
+                    item: item,
+                    isHovered: isHovered,
+                    translations: translations,
+                }) })), 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 () {
+                var footerContent = renderFooter({
+                    item: item,
+                    isHovered: isHovered,
+                    translations: translations,
+                });
+                // Only render if there's actual content
+                if (footerContent) {
+                    return (jsxRuntime.jsx("div", { className: "absolute bottom-4 left-4 right-4 z-20", children: footerContent }));
+                }
+                return null;
+            })()] }));
+}
+
+// Default translations in Spanish
+var defaultTranslations$a = {
+    editButtonLabel: "Editar",
+    deleteButtonLabel: "Eliminar",
+    publishButtonLabel: "Publicar",
+    previewButtonLabel: "Ver vista previa",
+    instagramLabel: "Instagram",
+    storyLabel: "Story",
+    tiktokLabel: "TikTok",
+    whatsappLabel: "WhatsApp",
+};
+/**
+ * SocialMediaBar - Independent bar component for social media badges and actions
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SocialMediaBar
+ *   platform="instagram-post"
+ *   onEdit={handleEdit}
+ *   onDelete={handleDelete}
+ *   onPublish={handlePublish}
+ * />
+ * ```
+ */
+var SocialMediaBar = function (_a) {
+    var platform = _a.platform, _b = _a.badgeOnly, badgeOnly = _b === void 0 ? false : _b, _c = _a.showPreview, showPreview = _c === void 0 ? false : _c, onEdit = _a.onEdit, onDelete = _a.onDelete, onPublish = _a.onPublish, onPreview = _a.onPreview, _d = _a.actionsAlwaysVisible, actionsAlwaysVisible = _d === void 0 ? false : _d, _e = _a.isHovered, isHovered = _e === void 0 ? false : _e, _f = _a.className, className = _f === void 0 ? "" : _f, _g = _a.translations, translations = _g === void 0 ? {} : _g, customBadge = _a.customBadge, customActions = _a.customActions;
+    var t = __assign(__assign({}, defaultTranslations$a), translations);
+    // Determine visibility of actions
+    var showActions = actionsAlwaysVisible || isHovered;
+    return (jsxRuntime.jsxs("div", { className: "flex items-center justify-between ".concat(className), children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [customBadge || (jsxRuntime.jsxs("div", { className: "backdrop-blur-xl border border-white/30 rounded-full px-3 py-1.5 shadow-xl flex items-center gap-2", style: {
+                            background: "linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(200, 200, 255, 0.25) 100%)",
+                        }, children: [platform === "instagram-post" && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(IconComponent, { icon: "mdi:instagram", className: "w-4 h-4 text-pink-400" }), jsxRuntime.jsx("span", { className: "text-xs font-medium text-white", children: t.instagramLabel })] })), platform === "instagram-story" && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(IconComponent, { icon: "mdi:instagram", className: "w-4 h-4 text-purple-400" }), jsxRuntime.jsx("span", { className: "text-xs font-medium text-white", children: t.storyLabel })] })), platform === "tiktok-video" && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(IconComponent, { icon: "ic:baseline-tiktok", className: "w-4 h-4 text-white" }), jsxRuntime.jsx("span", { className: "text-xs font-medium text-white", children: t.tiktokLabel })] })), (platform === "whatsapp" || platform === "whatsapp-message") && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(IconComponent, { icon: "mdi:whatsapp", className: "w-4 h-4 text-green-400" }), jsxRuntime.jsx("span", { className: "text-xs font-medium text-white", children: t.whatsappLabel })] }))] })), showPreview && onPreview && (jsxRuntime.jsx("button", { type: "button", onClick: function (e) {
+                            e.stopPropagation();
+                            onPreview();
+                        }, className: "backdrop-blur-xl border border-white/30 rounded-lg w-8 h-8 shadow-xl flex items-center justify-center hover:scale-110 transition-all duration-200", style: {
+                            background: "linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(200, 200, 255, 0.25) 100%)",
+                        }, "aria-label": t.previewButtonLabel, children: jsxRuntime.jsx(IconComponent, { icon: "solar:eye-bold", className: "w-4 h-4 text-white" }) }))] }), !badgeOnly && (jsxRuntime.jsx("div", { className: "flex items-center gap-2 transition-opacity duration-500 ease-in-out ".concat(showActions ? "opacity-100" : "opacity-0 pointer-events-none"), children: customActions || (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [onEdit && (jsxRuntime.jsx(react.Button, { isIconOnly: true, variant: "flat", size: "sm", onPress: onEdit, className: "bg-white/90 hover:bg-white dark:bg-gray-800/90 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200 shadow-md backdrop-blur-sm transition-all duration-200 hover:scale-110 active:scale-95", "aria-label": t.editButtonLabel, children: jsxRuntime.jsx(IconComponent, { icon: "solar:pen-outline", className: "w-4 h-4 transition-transform duration-200 hover:rotate-12" }) })), onDelete && (jsxRuntime.jsx(react.Button, { isIconOnly: true, variant: "flat", size: "sm", onPress: onDelete, className: "bg-white/90 hover:bg-white dark:bg-gray-800/90 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200 shadow-md backdrop-blur-sm transition-all duration-200 hover:scale-110 active:scale-95", "aria-label": t.deleteButtonLabel, children: jsxRuntime.jsx(IconComponent, { icon: "solar:trash-bin-minimalistic-outline", className: "w-4 h-4 transition-transform duration-200 hover:scale-110" }) })), onPublish && (jsxRuntime.jsx(react.Button, { variant: "solid", color: "primary", size: "sm", onPress: onPublish, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:plain-3-bold", className: "w-3.5 h-3.5 transition-transform duration-200" }), "aria-label": t.publishButtonLabel, className: "text-xs shadow-md transition-all duration-200 hover:scale-105 hover:-translate-y-0.5 active:scale-95", children: t.publishButtonLabel }))] })) }))] }));
+};
+
+// Inject CSS animations for audience info
+if (typeof document !== "undefined") {
+    var style = document.createElement("style");
+    style.textContent = "\n  @keyframes pulse-subtle {\n    0%, 100% {\n      transform: scale(1);\n      opacity: 1;\n    }\n    50% {\n      transform: scale(1.05);\n      opacity: 0.95;\n    }\n  }\n  \n  @keyframes fade-in {\n    from {\n      opacity: 0;\n      transform: translateX(-5px);\n    }\n    to {\n      opacity: 1;\n      transform: translateX(0);\n    }\n  }\n  \n  .animate-fade-in {\n    animation: fade-in 0.3s ease-out;\n  }\n";
+    if (!document.head.querySelector("#social-carousel-animations")) {
+        style.id = "social-carousel-animations";
+        document.head.appendChild(style);
+    }
+}
+/**
+ * SocialMediaCarousel - Specialized carousel variant for social media content
+ * Extends ContentCarousel with social media specific features
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SocialMediaCarousel
+ *   items={socialMediaItems}
+ *   onEdit={handleEdit}
+ *   onDelete={handleDelete}
+ *   onPublish={handlePublish}
+ * />
+ * ```
+ */
+var SocialMediaCarousel = function (_a) {
+    var items = _a.items, onItemClick = _a.onItemClick, onEdit = _a.onEdit, onDelete = _a.onDelete, onPublish = _a.onPublish, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.emptyStateRedirectPath, emptyStateRedirectPath = _c === void 0 ? "/contenidos-ai/crear-contenido" : _c; _a.compactHeader; _a.campaignView; var _f = _a.translations, translations = _f === void 0 ? {} : _f, _g = _a.hideFooter, hideFooter = _g === void 0 ? false : _g, _h = _a.hideAudienceInfo, hideAudienceInfo = _h === void 0 ? false : _h;
+    var handlePreview = React.useCallback(function (item) {
+        console.log("Preview:", item);
+        // This could be extended to open a preview modal
+    }, []);
+    // 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
+                        ? "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
+                            ? "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
+                                        ? "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 &&
+                            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: !!socialItem.imageUrl, 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]);
+    return (jsxRuntime.jsx(ContentCarousel, { items: items, onItemClick: onItemClick, className: className, emptyStateRedirectPath: emptyStateRedirectPath, translations: translations, renderFooter: renderSocialFooterWithAudience }));
+};
+
 // Traducciones por defecto en español
-var defaultTranslations$8 = {
+var defaultTranslations$9 = {
     dayOption: "Día específico",
     dateRangeOption: "Rango de fechas",
     selectDateAriaLabel: "Seleccionar fecha",
@@ -1008,7 +1229,7 @@ var DateSelector = function (_a) {
     var _f = React.useState(initialDate || null), date = _f[0], setDate = _f[1];
     var _g = React.useState(initialDateRange || null), dateRange = _g[0], setDateRange = _g[1];
     // Combinar traducciones por defecto con las proporcionadas
-    var t = __assign(__assign({}, defaultTranslations$8), translations);
+    var t = __assign(__assign({}, defaultTranslations$9), translations);
     var handleTypeChange = function (value) {
         var newType = value;
         setType(newType);
@@ -1115,7 +1336,7 @@ var HeaderComponent = function (_a) {
 };
 HeaderComponent.displayName = "Header";
 
-var defaultTranslations$7 = {
+var defaultTranslations$8 = {
     previewAlt: "Vista previa de imagen",
     removeButtonAriaLabel: "Eliminar imagen",
     emptyStateText: "No hay imágenes para mostrar",
@@ -1148,7 +1369,7 @@ var normalizeImages = function (images) {
 };
 var ImagePreview = function (_a) {
     var images = _a.images, _b = _a.size, size = _b === void 0 ? "small" : _b, onRemove = _a.onRemove, _c = _a.showRemoveButton, showRemoveButton = _c === void 0 ? true : _c, _d = _a.className, className = _d === void 0 ? "" : _d, _e = _a.translations, translations = _e === void 0 ? {} : _e, _f = _a.backgroundColor, backgroundColor = _f === void 0 ? "bg-white dark:bg-gray-800" : _f, _g = _a.radius, radius = _g === void 0 ? "lg" : _g, _h = _a.showBorder, showBorder = _h === void 0 ? true : _h, onImageClick = _a.onImageClick;
-    var t = __assign(__assign({}, defaultTranslations$7), translations);
+    var t = __assign(__assign({}, defaultTranslations$8), translations);
     var normalizedImages = normalizeImages(images);
     var sizeClass = sizeClasses[size];
     var radiusClass = radiusClasses[radius];
@@ -1436,13 +1657,13 @@ function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange
     ];
 }
 
-var defaultTranslations$6 = {
+var defaultTranslations$7 = {
     checkIconTitle: "Check",
 };
 var VerticalSteps = React.forwardRef(function (_a, ref) {
     var _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.steps, stepsProp = _c === void 0 ? [] : _c, _d = _a.defaultStep, defaultStep = _d === void 0 ? 0 : _d, onStepChange = _a.onStepChange, currentStepProp = _a.currentStep, _e = _a.hideProgressBars, hideProgressBars = _e === void 0 ? false : _e, stepClassName = _a.stepClassName, className = _a.className, translations = _a.translations, props = __rest(_a, ["color", "steps", "defaultStep", "onStepChange", "currentStep", "hideProgressBars", "stepClassName", "className", "translations"]);
     var _f = $458b0a5536c1a7cf$export$40bfa8c7b0832715(currentStepProp, defaultStep, onStepChange), currentStep = _f[0], setCurrentStep = _f[1];
-    var t = __assign(__assign({}, defaultTranslations$6), translations);
+    var t = __assign(__assign({}, defaultTranslations$7), translations);
     var steps = React.useMemo(function () {
         if (typeof stepsProp === "number") {
             return Array.from({ length: stepsProp }, function () { return ({}); });
@@ -2081,7 +2302,7 @@ var countries = [
 ];
 var uniqueCountries = Array.from(new Map(countries.map(function (item) { return [item.code + item.name, item]; })).values());
 // Traducciones por defecto
-var defaultTranslations$5 = {
+var defaultTranslations$6 = {
     label: "Teléfono",
     placeholder: "Número de teléfono",
     searchPlaceholder: "Buscar país...",
@@ -2099,7 +2320,7 @@ var Phone = function (_a) {
     var portalDropdownRef = React.useRef(null);
     var _l = React.useState({}), dropdownPosition = _l[0], setDropdownPosition = _l[1];
     var _m = React.useState(uniqueCountries), filteredCountries = _m[0], setFilteredCountries = _m[1];
-    var t = __assign(__assign({}, defaultTranslations$5), translations);
+    var t = __assign(__assign({}, defaultTranslations$6), translations);
     var finalLabel = label || t.label;
     React.useEffect(function () {
         if (value) {
@@ -2178,7 +2399,7 @@ var Phone = function (_a) {
                                     : ""), onClick: function () { return handleCountrySelect(country); }, children: [jsxRuntime.jsx("span", { className: "mr-3", children: jsxRuntime.jsx(FlagIcon, { countryCode: country.country, size: "md" }) }), jsxRuntime.jsx("span", { className: "flex-1 text-left text-default-500", children: country.name }), jsxRuntime.jsx("span", { className: "text-xs text-default-500", children: country.code })] }, "".concat(country.code, "-").concat(country.country))); })) : (jsxRuntime.jsx("div", { className: "px-4 py-2 text-sm text-default-500", children: t.noCountriesFound })) })] }), document.body)] }));
 };
 
-var defaultTranslations$4 = {
+var defaultTranslations$5 = {
     message: "The Winter 2024 Release is here: new editor, analytics API, and so much more.",
     buttonText: "Explore",
     closeButtonLabel: "Close Banner",
@@ -2188,7 +2409,7 @@ var defaultTranslations$4 = {
  */
 var PromotionalBanner = function (_a) {
     var message = _a.message, buttonText = _a.buttonText, _b = _a.messageHref, messageHref = _b === void 0 ? "#" : _b, _c = _a.buttonHref, buttonHref = _c === void 0 ? "#" : _c, _d = _a.showCloseButton, showCloseButton = _d === void 0 ? true : _d, _e = _a.isVisible, isVisible = _e === void 0 ? true : _e, _f = _a.gradientColors, gradientColors = _f === void 0 ? ["default-100", "danger-100", "secondary-100"] : _f, _g = _a.buttonGradientColors, buttonGradientColors = _g === void 0 ? ["#F871A0", "#9353D3"] : _g, onClose = _a.onClose, onMessageClick = _a.onMessageClick, onButtonClick = _a.onButtonClick, _h = _a.messageLinkProps, messageLinkProps = _h === void 0 ? {} : _h, _j = _a.buttonProps, buttonProps = _j === void 0 ? {} : _j, _k = _a.translations, translations = _k === void 0 ? {} : _k;
-    var t = __assign(__assign({}, defaultTranslations$4), translations);
+    var t = __assign(__assign({}, defaultTranslations$5), translations);
     var finalMessage = message || t.message;
     var finalButtonText = buttonText || t.buttonText;
     var handleClose = function () {
@@ -2517,7 +2738,7 @@ var TimeInput = function (_a) {
  * />
  * ```
  */
-var defaultTranslations$3 = {
+var defaultTranslations$4 = {
     /** Label for the start time input field */
     from: "Desde",
     /** Label for the end time input field */
@@ -2575,7 +2796,7 @@ var defaultTranslations$3 = {
  */
 var ScheduleRow = function (_a) {
     var day = _a.day, daySchedule = _a.daySchedule, _b = _a.translations, translations = _b === void 0 ? {} : _b, _c = _a.showCopyToAll, showCopyToAll = _c === void 0 ? false : _c, onChange = _a.onChange, onCopyToAll = _a.onCopyToAll;
-    var t = __assign(__assign({}, defaultTranslations$3), translations);
+    var t = __assign(__assign({}, defaultTranslations$4), translations);
     /**
      * @function validateTimeSlots
      * @description Validates all time slots to ensure the "from" time is not after the "to" time.
@@ -2728,6 +2949,81 @@ var Select = function (_a) {
             } })) }));
 };
 
+var defaultTranslations$3 = {
+    username: "tu_negocio",
+    sendMessage: "Enviar mensaje",
+    viewMore: "ver más",
+    viewLess: "ver menos",
+    timeAgo: "hace unos momentos",
+    imageAlt: "Vista previa de red social",
+};
+/**
+ * SocialMediaPreview component for displaying social media post previews
+ * across multiple platforms: Instagram, Facebook, TikTok, and Twitter.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SocialMediaPreview
+ *   platform="instagram"
+ *   imageUrl="/path/to/image.jpg"
+ *   caption="Check out our new product!"
+ *   variant="full"
+ * />
+ * ```
+ */
+var SocialMediaPreview = function (_a) {
+    var platform = _a.platform, imageUrl = _a.imageUrl, caption = _a.caption, _b = _a.variant, variant = _b === void 0 ? "full" : _b, _c = _a.showHeader, showHeader = _c === void 0 ? true : _c, _d = _a.maxCaptionLength, maxCaptionLength = _d === void 0 ? 125 : _d, onToggleCaption = _a.onToggleCaption, showFullCaption = _a.showFullCaption, username = _a.username, avatarUrl = _a.avatarUrl, _e = _a.translations, translations = _e === void 0 ? {} : _e, _f = _a.className, className = _f === void 0 ? "" : _f, _g = _a.imageProps, imageProps = _g === void 0 ? {} : _g;
+    var t = __assign(__assign({}, defaultTranslations$3), translations);
+    var displayUsername = username || t.username;
+    var shouldTruncate = variant === "compact" && caption.length > maxCaptionLength;
+    var getTruncatedCaption = function () {
+        if (variant !== "compact") {
+            return caption;
+        }
+        if (!shouldTruncate || showFullCaption) {
+            return caption;
+        }
+        var firstLineEnd = caption.indexOf("\n");
+        var truncateAt = firstLineEnd > 0 && firstLineEnd < maxCaptionLength
+            ? firstLineEnd
+            : maxCaptionLength;
+        return "".concat(caption.substring(0, truncateAt).trim(), "...");
+    };
+    var displayCaption = getTruncatedCaption();
+    // Render Instagram Preview
+    var renderInstagram = function () {
+        if (variant === "story") {
+            return renderInstagramStory();
+        }
+        return renderInstagramPost();
+    };
+    var renderInstagramStory = function () { return (jsxRuntime.jsxs("div", { className: "relative w-full bg-gradient-to-b from-gray-900 to-gray-800 rounded-2xl shadow-2xl overflow-hidden ".concat(className), style: { aspectRatio: "9/16", maxHeight: "640px" }, children: [imageUrl && (jsxRuntime.jsxs("div", { className: "absolute inset-0", children: [jsxRuntime.jsx(react.Image, __assign({ src: imageUrl, alt: t.imageAlt, className: "w-full h-full object-cover" }, imageProps)), jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black bg-opacity-20" })] })), showHeader && (jsxRuntime.jsxs("div", { className: "absolute top-0 left-0 right-0 z-10 p-4", children: [jsxRuntime.jsx("div", { className: "w-full h-0.5 bg-white bg-opacity-30 rounded-full mb-3", children: jsxRuntime.jsx("div", { className: "h-full w-1/3 bg-white rounded-full" }) }), jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("div", { className: "w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 via-pink-500 to-orange-500 flex items-center justify-center border-2 border-white", children: avatarUrl ? (jsxRuntime.jsx("img", { src: avatarUrl, alt: displayUsername, className: "w-full h-full rounded-full object-cover" })) : (jsxRuntime.jsx("span", { className: "text-white text-xs font-bold", children: displayUsername.substring(0, 2).toUpperCase() })) }), jsxRuntime.jsx("span", { className: "text-sm font-semibold text-white drop-shadow-lg", children: displayUsername }), jsxRuntime.jsx("span", { className: "text-xs text-white text-opacity-90", children: "hace 5min" })] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:play-circle-bold", className: "text-lg text-white drop-shadow-lg" }), jsxRuntime.jsx(IconComponent, { icon: "solar:volume-loud-bold", className: "text-lg text-white drop-shadow-lg" }), jsxRuntime.jsx(IconComponent, { icon: "solar:menu-dots-bold", className: "text-lg text-white drop-shadow-lg" })] })] })] })), jsxRuntime.jsxs("div", { className: "absolute bottom-6 left-0 right-0 z-20 px-4 flex items-center gap-3", children: [jsxRuntime.jsx("input", { type: "text", placeholder: t.sendMessage, className: "flex-1 bg-transparent border-2 border-white border-opacity-70 rounded-full px-4 py-2 text-white placeholder-white placeholder-opacity-70 text-sm", readOnly: true }), jsxRuntime.jsx(IconComponent, { icon: "solar:heart-outline", className: "text-2xl text-white drop-shadow-lg" }), jsxRuntime.jsx(IconComponent, { icon: "solar:plain-outline", className: "text-2xl text-white drop-shadow-lg" })] })] })); };
+    var renderInstagramPost = function () { return (jsxRuntime.jsxs("div", { className: "flex flex-col bg-white dark:bg-gray-900 ".concat(variant === "full" ? "rounded-lg shadow-xl overflow-hidden" : "rounded-b-xl overflow-hidden", " h-full ").concat(className), children: [showHeader && (jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-3 border-b border-gray-200 dark:border-gray-800", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("div", { className: "w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 via-pink-500 to-orange-500 flex items-center justify-center", children: avatarUrl ? (jsxRuntime.jsx("img", { src: avatarUrl, alt: displayUsername, className: "w-full h-full rounded-full object-cover" })) : (jsxRuntime.jsx("span", { className: "text-white text-xs font-bold", children: displayUsername.substring(0, 2).toUpperCase() })) }), jsxRuntime.jsx("span", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: displayUsername })] }), jsxRuntime.jsx(IconComponent, { icon: "solar:menu-dots-bold", className: "text-lg text-gray-900 dark:text-white" })] })), imageUrl && (jsxRuntime.jsx("div", { className: "relative w-full bg-gray-50 dark:bg-gray-800 overflow-hidden rounded-none ".concat(variant === "full" ? "h-80" : ""), style: variant === "compact" ? { aspectRatio: "1/1" } : {}, children: jsxRuntime.jsx(react.Image, __assign({ src: imageUrl, alt: t.imageAlt, className: "w-full h-full object-cover rounded-none", radius: "none" }, imageProps)) })), jsxRuntime.jsxs("div", { className: "flex-1 p-3 overflow-y-auto", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:heart-bold", className: "text-xl text-gray-900 dark:text-white" }), jsxRuntime.jsx(IconComponent, { icon: "solar:chat-round-bold", className: "text-xl text-gray-900 dark:text-white" }), jsxRuntime.jsx(IconComponent, { icon: "solar:plain-bold", className: "text-xl text-gray-900 dark:text-white" })] }), jsxRuntime.jsx(IconComponent, { icon: "solar:bookmark-bold", className: "text-xl text-gray-900 dark:text-white" })] }), jsxRuntime.jsxs("div", { className: "text-sm text-left", children: [jsxRuntime.jsxs("div", { className: showFullCaption ? "overflow-y-auto" : "", style: { maxHeight: showFullCaption ? "150px" : "none" }, children: [jsxRuntime.jsx("span", { className: "font-semibold mr-2 text-gray-900 dark:text-white", children: displayUsername }), jsxRuntime.jsx("span", { className: "text-gray-800 dark:text-gray-200 whitespace-pre-wrap break-words", children: displayCaption })] }), shouldTruncate && onToggleCaption && variant !== "compact" && (jsxRuntime.jsx("button", { type: "button", onClick: function (e) {
+                                    e.stopPropagation();
+                                    onToggleCaption();
+                                }, className: "text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300 font-normal mt-1 underline text-xs block", children: showFullCaption ? t.viewLess : t.viewMore }))] }), variant !== "compact" && (jsxRuntime.jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1 text-left", children: t.timeAgo }))] })] })); };
+    // Render Facebook Preview
+    var renderFacebook = function () { return (jsxRuntime.jsxs("div", { className: "flex flex-col bg-white dark:bg-gray-900 ".concat(variant === "full" ? "rounded-lg shadow-xl overflow-hidden" : "rounded-xl overflow-hidden", " ").concat(className), children: [showHeader && (jsxRuntime.jsx("div", { className: "p-4 border-b border-gray-200 dark:border-gray-800", children: jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center", children: avatarUrl ? (jsxRuntime.jsx("img", { src: avatarUrl, alt: displayUsername, className: "w-full h-full rounded-full object-cover" })) : (jsxRuntime.jsx("span", { className: "text-white text-sm font-bold", children: displayUsername.substring(0, 2).toUpperCase() })) }), jsxRuntime.jsxs("div", { className: "flex-1", children: [jsxRuntime.jsx("p", { className: "text-sm font-semibold text-gray-900 dark:text-white", children: displayUsername }), jsxRuntime.jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1", children: [t.timeAgo, " \u00B7 ", jsxRuntime.jsx(IconComponent, { icon: "solar:earth-bold", className: "text-xs" })] })] }), jsxRuntime.jsx(IconComponent, { icon: "solar:menu-dots-bold", className: "text-xl text-gray-600 dark:text-gray-400" })] }) })), jsxRuntime.jsx("div", { className: "px-4 py-2", children: jsxRuntime.jsx("p", { className: "text-sm text-gray-900 dark:text-white whitespace-pre-wrap break-words", children: displayCaption }) }), imageUrl && (jsxRuntime.jsx("div", { className: "relative w-full bg-gray-50 dark:bg-gray-800", children: jsxRuntime.jsx(react.Image, __assign({ src: imageUrl, alt: t.imageAlt, className: "w-full h-auto object-cover", radius: "none" }, imageProps)) })), jsxRuntime.jsx("div", { className: "p-3 border-t border-gray-200 dark:border-gray-800", children: jsxRuntime.jsxs("div", { className: "flex items-center justify-around", children: [jsxRuntime.jsxs("button", { type: "button", className: "flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 px-4 py-2 rounded-lg transition-colors", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:like-bold", className: "text-xl" }), jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Me gusta" })] }), jsxRuntime.jsxs("button", { type: "button", className: "flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 px-4 py-2 rounded-lg transition-colors", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:chat-round-bold", className: "text-xl" }), jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Comentar" })] }), jsxRuntime.jsxs("button", { type: "button", className: "flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 px-4 py-2 rounded-lg transition-colors", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:share-bold", className: "text-xl" }), jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Compartir" })] })] }) })] })); };
+    // Render TikTok Preview
+    var renderTikTok = function () { return (jsxRuntime.jsxs("div", { className: "relative w-full bg-black rounded-2xl shadow-2xl overflow-hidden ".concat(className), style: { aspectRatio: "9/16", maxHeight: "640px" }, children: [imageUrl && (jsxRuntime.jsxs("div", { className: "absolute inset-0", children: [jsxRuntime.jsx(react.Image, __assign({ src: imageUrl, alt: t.imageAlt, className: "w-full h-full object-cover" }, imageProps)), jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black opacity-60" })] })), jsxRuntime.jsxs("div", { className: "absolute right-2 bottom-20 flex flex-col items-center gap-6 z-20", children: [jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [jsxRuntime.jsx("div", { className: "w-12 h-12 rounded-full border-2 border-white bg-gray-900 flex items-center justify-center", children: avatarUrl ? (jsxRuntime.jsx("img", { src: avatarUrl, alt: displayUsername, className: "w-full h-full rounded-full object-cover" })) : (jsxRuntime.jsx("span", { className: "text-white text-xs font-bold", children: displayUsername.substring(0, 2).toUpperCase() })) }), jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-full bg-pink-500 flex items-center justify-center -mt-3 border-2 border-black", children: jsxRuntime.jsx(IconComponent, { icon: "solar:add-circle-bold", className: "text-xs text-white" }) })] }), jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:heart-bold", className: "text-3xl text-white drop-shadow-lg" }), jsxRuntime.jsx("span", { className: "text-xs text-white font-semibold", children: "24.5K" })] }), jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:chat-round-bold", className: "text-3xl text-white drop-shadow-lg" }), jsxRuntime.jsx("span", { className: "text-xs text-white font-semibold", children: "1,234" })] }), jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:bookmark-bold", className: "text-3xl text-white drop-shadow-lg" }), jsxRuntime.jsx("span", { className: "text-xs text-white font-semibold", children: "453" })] }), jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:share-bold", className: "text-3xl text-white drop-shadow-lg" }), jsxRuntime.jsx("span", { className: "text-xs text-white font-semibold", children: "892" })] }), jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-lg bg-gray-800 border border-gray-700 flex items-center justify-center", children: jsxRuntime.jsx(IconComponent, { icon: "solar:music-note-2-bold", className: "text-xl text-white" }) })] }), jsxRuntime.jsxs("div", { className: "absolute bottom-0 left-0 right-14 z-20 p-4", children: [jsxRuntime.jsxs("p", { className: "text-sm font-semibold text-white mb-1", children: ["@", displayUsername] }), jsxRuntime.jsx("p", { className: "text-sm text-white mb-2 line-clamp-2", children: displayCaption }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs text-white", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:music-note-2-bold", className: "text-sm" }), jsxRuntime.jsxs("span", { className: "truncate", children: ["Sonido original - ", displayUsername] })] })] })] })); };
+    // Render Twitter Preview
+    var renderTwitter = function () { return (jsxRuntime.jsx("div", { className: "flex flex-col bg-white dark:bg-gray-900 ".concat(variant === "full" ? "rounded-xl border border-gray-200 dark:border-gray-800" : "rounded-xl border border-gray-200 dark:border-gray-800", " ").concat(className), children: jsxRuntime.jsx("div", { className: "p-4", children: jsxRuntime.jsxs("div", { className: "flex gap-3", children: [jsxRuntime.jsx("div", { className: "w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center flex-shrink-0", children: avatarUrl ? (jsxRuntime.jsx("img", { src: avatarUrl, alt: displayUsername, className: "w-full h-full rounded-full object-cover" })) : (jsxRuntime.jsx("span", { className: "text-white text-sm font-bold", children: displayUsername.substring(0, 2).toUpperCase() })) }), jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-1 mb-1", children: [jsxRuntime.jsx("span", { className: "font-bold text-gray-900 dark:text-white text-sm truncate", children: displayUsername }), jsxRuntime.jsx(IconComponent, { icon: "solar:verified-check-bold", className: "text-blue-500 text-base flex-shrink-0" }), jsxRuntime.jsxs("span", { className: "text-gray-500 dark:text-gray-400 text-sm truncate", children: ["@", displayUsername.toLowerCase().replace(/\s/g, "_")] }), jsxRuntime.jsx("span", { className: "text-gray-500 dark:text-gray-400 text-sm", children: "\u00B7 2h" })] }), jsxRuntime.jsx("p", { className: "text-gray-900 dark:text-white text-sm mb-3 whitespace-pre-wrap break-words", children: displayCaption }), imageUrl && (jsxRuntime.jsx("div", { className: "rounded-2xl overflow-hidden border border-gray-200 dark:border-gray-700 mb-3", children: jsxRuntime.jsx(react.Image, __assign({ src: imageUrl, alt: t.imageAlt, className: "w-full h-auto object-cover", radius: "none" }, imageProps)) })), jsxRuntime.jsxs("div", { className: "flex items-center justify-between max-w-md mt-3", children: [jsxRuntime.jsxs("button", { type: "button", className: "flex items-center gap-2 text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:chat-round-bold", className: "text-lg" }), jsxRuntime.jsx("span", { className: "text-xs", children: "234" })] }), jsxRuntime.jsxs("button", { type: "button", className: "flex items-center gap-2 text-gray-500 dark:text-gray-400 hover:text-green-500 dark:hover:text-green-400 transition-colors", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:repost-bold", className: "text-lg" }), jsxRuntime.jsx("span", { className: "text-xs", children: "1.2K" })] }), jsxRuntime.jsxs("button", { type: "button", className: "flex items-center gap-2 text-gray-500 dark:text-gray-400 hover:text-pink-500 dark:hover:text-pink-400 transition-colors", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:heart-bold", className: "text-lg" }), jsxRuntime.jsx("span", { className: "text-xs", children: "5.6K" })] }), jsxRuntime.jsxs("button", { type: "button", className: "flex items-center gap-2 text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors", children: [jsxRuntime.jsx(IconComponent, { icon: "solar:chart-2-bold", className: "text-lg" }), jsxRuntime.jsx("span", { className: "text-xs", children: "12K" })] }), jsxRuntime.jsx("button", { type: "button", className: "flex items-center gap-2 text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors", children: jsxRuntime.jsx(IconComponent, { icon: "solar:share-bold", className: "text-lg" }) })] })] })] }) }) })); };
+    // Main render logic
+    switch (platform) {
+        case "instagram":
+            return renderInstagram();
+        case "facebook":
+            return renderFacebook();
+        case "tiktok":
+            return renderTikTok();
+        case "twitter":
+            return renderTwitter();
+        default:
+            return renderInstagram();
+    }
+};
+
 function AuraTable(_a) {
     var columns = _a.columns, items = _a.items, renderCell = _a.renderCell, children = _a.children, props = __rest(_a, ["columns", "items", "renderCell", "children"]);
     return (jsxRuntime.jsxs(react.Table, __assign({ removeWrapper: true, radius: "none" }, props, { children: [jsxRuntime.jsx(react.TableHeader, { columns: columns, children: function (column) { return jsxRuntime.jsx(react.TableColumn, { children: column.label }, column.key); } }), jsxRuntime.jsx(react.TableBody, { items: items, children: function (item) { return (jsxRuntime.jsx(react.TableRow, { children: function (columnKey) { return (jsxRuntime.jsx(react.TableCell, { children: renderCell ? renderCell(item, columnKey) : children })); } }, item.id)); } })] })));
@@ -4297,6 +4593,7 @@ exports.Button = Button;
 exports.Card = Card;
 exports.Chip = Chip;
 exports.ColorSelector = ColorSelector;
+exports.ContentCarousel = ContentCarousel;
 exports.DatePicker = DatePicker;
 exports.DateRangePicker = DateRangePicker;
 exports.DateSelector = DateSelector;
@@ -4329,6 +4626,9 @@ exports.RowSteps = RowSteps;
 exports.ScheduleRow = ScheduleRow;
 exports.SearchInput = SearchInput;
 exports.Select = Select;
+exports.SocialMediaBar = SocialMediaBar;
+exports.SocialMediaCarousel = SocialMediaCarousel;
+exports.SocialMediaPreview = SocialMediaPreview;
 exports.StepIndicator = StepIndicator;
 exports.SwitchComponent = Switch;
 exports.Textarea = Textarea;
@@ -4342,7 +4642,7 @@ exports.VerticalSteps = VerticalSteps;
 exports.Wizard = Wizard;
 exports.WizardNavigation = WizardNavigation;
 exports.WizardSidebar = WizardSidebar;
-exports.defaultTranslations = defaultTranslations$3;
+exports.defaultTranslations = defaultTranslations$4;
 exports.sizeMap = sizeMap;
 exports.themeColors = themeColors;
 exports.useAuraToast = useAuraToast;