funuicss 3.9.2 → 3.9.3

package/css/fun.css

@@ -5476,6 +5476,23 @@ background-color: rgba(0, 0, 0, 0.2);
   background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
 }
 
+/* Optional: Add loading animation */
+@keyframes imageLoading {
+  0% { opacity: 0.3; }
+  50% { opacity: 0.7; }
+  100% { opacity: 0.3; }
+}
+
+.funui_store_no-image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: #f5f5f5;
+  animation: imageLoading 1.5s infinite;
+}
+
 /* Badges */
 .funui_store_product-badges {
   position: absolute;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.9.2",
+  "version": "3.9.3",
   "name": "funuicss",
   "description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
   "main": "index.js",

package/ui/div/Div.d.ts

@@ -18,6 +18,10 @@ type DivProps = {
     ref?: React.Ref<HTMLDivElement>;
     customStyle?: React.CSSProperties;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseOver?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseOut?: React.MouseEventHandler<HTMLDivElement>;
 };
-declare const Div: ({ children, funcss, content, minHeight, maxHeight, maxWidth, minWidth, height, width, padding, className, style, margin, id, fit, ref, customStyle, ...rest }: DivProps) => React.JSX.Element;
+declare const Div: ({ children, funcss, content, minHeight, maxHeight, maxWidth, minWidth, height, width, padding, className, style, margin, id, fit, ref, customStyle, onClick, onMouseEnter, onMouseLeave, onMouseOver, onMouseOut, ...rest }: DivProps) => React.JSX.Element;
 export default Div;

package/ui/div/Div.js

@@ -58,8 +58,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
 var Div = function (_a) {
-    var children = _a.children, funcss = _a.funcss, content = _a.content, minHeight = _a.minHeight, maxHeight = _a.maxHeight, maxWidth = _a.maxWidth, minWidth = _a.minWidth, height = _a.height, width = _a.width, padding = _a.padding, className = _a.className, style = _a.style, margin = _a.margin, id = _a.id, fit = _a.fit, ref = _a.ref, customStyle = _a.customStyle, rest = __rest(_a, ["children", "funcss", "content", "minHeight", "maxHeight", "maxWidth", "minWidth", "height", "width", "padding", "className", "style", "margin", "id", "fit", "ref", "customStyle"]);
-    return (React.createElement("div", null,
-        React.createElement("div", __assign({ ref: ref, className: "".concat(fit ? 'width-100-p height-100-p' : '', " ").concat(funcss, " ").concat(className || ''), style: __assign(__assign({ height: height || '', maxHeight: maxHeight || '', minHeight: minHeight || '', maxWidth: maxWidth || '', minWidth: minWidth || '', width: width || '', padding: padding || '', margin: margin || '' }, style), customStyle), id: id }, rest), content || children)));
+    var children = _a.children, funcss = _a.funcss, content = _a.content, minHeight = _a.minHeight, maxHeight = _a.maxHeight, maxWidth = _a.maxWidth, minWidth = _a.minWidth, height = _a.height, width = _a.width, padding = _a.padding, className = _a.className, style = _a.style, margin = _a.margin, id = _a.id, fit = _a.fit, ref = _a.ref, customStyle = _a.customStyle, onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onMouseOver = _a.onMouseOver, onMouseOut = _a.onMouseOut, rest = __rest(_a, ["children", "funcss", "content", "minHeight", "maxHeight", "maxWidth", "minWidth", "height", "width", "padding", "className", "style", "margin", "id", "fit", "ref", "customStyle", "onClick", "onMouseEnter", "onMouseLeave", "onMouseOver", "onMouseOut"]);
+    return (React.createElement("div", { ref: ref, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseOver: onMouseOver, onMouseOut: onMouseOut, onClick: onClick },
+        React.createElement("div", __assign({ className: "".concat(fit ? 'width-100-p height-100-p' : '', " ").concat(funcss, " ").concat(className || ''), style: __assign(__assign({ height: height || '', maxHeight: maxHeight || '', minHeight: minHeight || '', maxWidth: maxWidth || '', minWidth: minWidth || '', width: width || '', padding: padding || '', margin: margin || '' }, style), customStyle), id: id }, rest), content || children)));
 };
 exports.default = Div;

package/ui/products/ProductCard.js

@@ -1,30 +1,132 @@
 "use strict";
 'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var Div_1 = __importDefault(require("../div/Div"));
 var Text_1 = __importDefault(require("../text/Text"));
 var Flex_1 = __importDefault(require("../flex/Flex"));
 var ProductCard = function (_a) {
-    var _b;
-    var product = _a.product, _c = _a.currency, currency = _c === void 0 ? '$' : _c, onClick = _a.onClick, onAddToCart = _a.onAddToCart, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.funcss, funcss = _e === void 0 ? '' : _e, _f = _a.showBadges, showBadges = _f === void 0 ? true : _f;
+    var product = _a.product, _b = _a.currency, currency = _b === void 0 ? '$' : _b, onClick = _a.onClick, onAddToCart = _a.onAddToCart, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, _e = _a.showBadges, showBadges = _e === void 0 ? true : _e;
     var hasDiscount = product.comparePrice && product.comparePrice > product.price;
     var discountPercent = hasDiscount
         ? Math.round(((product.comparePrice - product.price) / product.comparePrice) * 100)
         : 0;
+    // Track which image is currently displayed
+    var _f = (0, react_1.useState)(0), currentImageIndex = _f[0], setCurrentImageIndex = _f[1];
+    var _g = (0, react_1.useState)([]), imagesLoaded = _g[0], setImagesLoaded = _g[1];
+    // Check if product has multiple images
+    var hasMultipleImages = product.images && product.images.length > 1;
+    // Handle image preloading
+    (0, react_1.useEffect)(function () {
+        if (!product.images || product.images.length === 0)
+            return;
+        // Track loaded images
+        var loadedStatus = new Array(product.images.length).fill(false);
+        setImagesLoaded(loadedStatus);
+        // Preload all images
+        product.images.forEach(function (src, index) {
+            var img = new Image();
+            img.src = src;
+            img.onload = function () {
+                setImagesLoaded(function (prev) {
+                    var updated = __spreadArray([], prev, true);
+                    updated[index] = true;
+                    return updated;
+                });
+            };
+        });
+    }, [product.images]);
     var handleClick = function () {
         onClick === null || onClick === void 0 ? void 0 : onClick(product);
     };
+    var handleMouseEnter = function () {
+        if (hasMultipleImages && product.images && product.images.length > 1) {
+            // Switch to next image (or first if at the end)
+            setCurrentImageIndex(function (prev) {
+                return prev === product.images.length - 1 ? 0 : prev + 1;
+            });
+        }
+    };
+    var handleMouseLeave = function () {
+        // Reset to first image when mouse leaves
+        setCurrentImageIndex(0);
+    };
     var getDisplayPrice = function () {
         var price = product.price || 0;
         var productCurrency = product.currency || currency;
         return "".concat(productCurrency).concat(price.toFixed(2));
     };
     return (react_1.default.createElement(Div_1.default, { funcss: "funui_store_product-card ".concat(className, " ").concat(funcss), onClick: handleClick, customStyle: { cursor: 'pointer' } },
-        react_1.default.createElement(Div_1.default, { funcss: "funui_store_image-container  round-edge" }, ((_b = product.images) === null || _b === void 0 ? void 0 : _b[0]) ? (react_1.default.createElement("img", { src: product.images[0], alt: product.name, loading: "lazy", className: "funui_store_product-image" })) : (react_1.default.createElement(Div_1.default, { funcss: "funui_store_no-image" },
+        react_1.default.createElement(Div_1.default, { funcss: "funui_store_image-container round-edge", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, customStyle: { position: 'relative', overflow: 'hidden' } }, product.images && product.images.length > 0 ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("img", { src: product.images[0], alt: product.name, loading: "lazy", className: "funui_store_product-image", style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'cover',
+                    opacity: currentImageIndex === 0 ? 1 : 0,
+                    transition: 'opacity 0.3s ease-in-out',
+                    zIndex: 1
+                } }),
+            product.images.slice(1).map(function (imageSrc, index) { return (react_1.default.createElement("img", { key: "preload-".concat(index + 1), src: imageSrc, alt: "".concat(product.name, " - View ").concat(index + 2), loading: "lazy", style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'cover',
+                    opacity: currentImageIndex === index + 1 ? 1 : 0,
+                    transition: 'opacity 0.3s ease-in-out',
+                    zIndex: 2
+                } })); }),
+            (!product.images[0] || imagesLoaded[0] === false) && (react_1.default.createElement(Div_1.default, { funcss: "funui_store_no-image" },
+                react_1.default.createElement(Text_1.default, { text: "No Image", color: "text-muted", size: "sm" }))))) : (react_1.default.createElement(Div_1.default, { funcss: "funui_store_no-image" },
             react_1.default.createElement(Text_1.default, { text: "No Image", color: "text-muted", size: "sm" })))),
         react_1.default.createElement(Div_1.default, { funcss: "funui_store_product-info " },
             product.category && (react_1.default.createElement(Text_1.default, { size: 'xs', opacity: 4, uppercase: true }, product.category)),

package/ui/products/ProductDetail.js

@@ -190,7 +190,7 @@ var ProductDetail = function (_a) {
                         react_1.default.createElement(Text_1.default, { size: 'xs', opacity: 4 },
                             product.stock,
                             " units available"))),
-                    ((product.colors && product.colors.length > 0) || (product.sizes && product.sizes.length > 0)) && (react_1.default.createElement(Flex_1.default, { width: '100%', gap: 1, direction: "column" },
+                    ((product.colors && product.colors.length > 0) || (product.sizes && product.sizes.length > 0)) && (react_1.default.createElement(Flex_1.default, { width: '100%', gap: 1 },
                         product.colors && product.colors.length > 0 && (react_1.default.createElement("div", { className: "col" },
                             react_1.default.createElement(Text_1.default, { size: "sm", weight: 500, funcss: "mb-1" },
                                 "Color",

package/ui/vista/Vista.d.ts

@@ -5,7 +5,7 @@ type VistaProps = {
     gradientOverlay?: boolean;
     gradientColor?: string;
     gradientOpacity?: number;
-    gradientDirection?: 'linear' | 'radial';
+    gradientDirection?: 'linear' | 'radial' | 'even';
     gradientLinearDirection?: 'to right' | 'to left' | 'to top' | 'to bottom' | 'to top right' | 'to top left' | 'to bottom right' | 'to bottom left';
     backgroundMedia?: 'none' | 'image' | 'video';
     backgroundImage?: string;

package/ui/vista/Vista.js

@@ -98,7 +98,6 @@ var Vista = function (localProps) {
     var layoutClass = [
         final.layout || 'centered',
         final.reverse ? 'reverse' : '',
-        "text-".concat(final.textAlign || 'left'),
     ]
         .filter(Boolean)
         .join(' ');
@@ -136,10 +135,11 @@ var Vista = function (localProps) {
     var ContentComponent = (react_1.default.createElement("div", { ref: contentRef, className: "vista-content ".concat(final.layout === 'centered' ? "text-center" : "", " ").concat(final.contentWrapperClass || ''), style: {
             position: 'relative',
             zIndex: 2,
+            textAlign: final.textAlign || 'center', // Moved text-align here
         } },
-        final.heading && (react_1.default.createElement(Text_1.default, { block: true, size: final.headingSize || "6xl", weight: final.headingWeight, color: final.headingColor || getDefaultTextColor(), funcss: final.headingClass }, final.heading)),
-        final.subheading && (react_1.default.createElement(Text_1.default, { block: true, size: final.subheadingSize || "lg", weight: final.subheadingWeight, color: final.subheadingColor || getDefaultTextColor(), funcss: "mt-2 ".concat(final.subheadingClass || '') }, final.subheading)),
-        final.content && (react_1.default.createElement(Text_1.default, { block: true, size: final.contentSize, weight: final.contentWeight, color: final.contentColor || getDefaultTextColor(), funcss: "mt-4 ".concat(final.contentClass || ''), article: true }, localProps.children || (typeof final.content === 'string' ? react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: final.content } }) : final.content))),
+        final.heading && (react_1.default.createElement(Text_1.default, { block: true, size: final.headingSize || "6xl", weight: final.headingWeight, color: final.headingColor || getDefaultTextColor(), funcss: final.headingClass, textAlign: final.textAlign || "center" }, final.heading)),
+        final.subheading && (react_1.default.createElement(Text_1.default, { block: true, size: final.subheadingSize || "lg", weight: final.subheadingWeight, color: final.subheadingColor || getDefaultTextColor(), funcss: "mt-2 ".concat(final.subheadingClass || ''), textAlign: final.textAlign || "center" }, final.subheading)),
+        final.content && (react_1.default.createElement(Text_1.default, { block: true, size: final.contentSize, weight: final.contentWeight, color: final.contentColor || getDefaultTextColor(), funcss: "mt-4 ".concat(final.contentClass || ''), article: true, textAlign: final.textAlign || "center" }, localProps.children || (typeof final.content === 'string' ? react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: final.content } }) : final.content))),
         final.cta ? (react_1.default.createElement("div", { className: "mt-6 ".concat(final.ctaClass || '') }, final.cta)) : (react_1.default.createElement(CTAButtons, null))));
     // Media Component (only shown when not in background mode)
     var MediaComponent = function () {
@@ -202,29 +202,38 @@ var Vista = function (localProps) {
     var gradientStyle = __assign({ position: 'absolute', width: final.gradientSize || "200px", height: final.gradientSize || "200px", background: final.gradientColors
             ? "radial-gradient(circle, ".concat(getColorValue(final.gradientColors.split(',')[0]), ", ").concat(getColorValue(final.gradientColors.split(',')[1]), ")")
             : "radial-gradient(circle, ".concat(primaryColor, ", ").concat(secondaryColor, ")"), opacity: final.opacity || 0.7, filter: "blur(".concat(final.blurry || 4, "rem)"), pointerEvents: 'none', zIndex: 0 }, positionStyles[final.gradientPosition || 'center']);
-    // Get gradient overlay style
+    // Get gradient overlay style - UPDATED with 'even' option
     var getGradientOverlayStyle = function () {
         if (!final.gradientOverlay)
             return {};
         var gradientColor = getGradientColorValue();
         var opacity = final.gradientOpacity || 0.7;
+        // When 'even' is selected, use solid color (same color from 0% to 100%)
+        if (final.gradientDirection === 'even') {
+            return {
+                background: gradientColor,
+                opacity: opacity,
+            };
+        }
         if (final.gradientDirection === 'radial') {
             return {
                 background: "radial-gradient(circle at center, ".concat(gradientColor, " 0%, transparent 100%)"),
                 opacity: opacity,
             };
         }
+        // Default to linear gradient
         var direction = final.gradientLinearDirection || 'to right';
+        // Correct gradient stops for different directions
         var gradientStops = '';
         switch (direction) {
             case 'to right':
-                gradientStops = "".concat(gradientColor, " 0%,transparent 100%");
+                gradientStops = "".concat(gradientColor, " 0%, transparent 100%");
                 break;
             case 'to left':
                 gradientStops = "transparent 0%, ".concat(gradientColor, " 100%");
                 break;
             case 'to bottom':
-                gradientStops = "".concat(gradientColor, " 0%,transparent 100%");
+                gradientStops = "".concat(gradientColor, " 0%, transparent 100%");
                 break;
             case 'to top':
                 gradientStops = "transparent 0%, ".concat(gradientColor, " 100%");
@@ -233,16 +242,16 @@ var Vista = function (localProps) {
                 gradientStops = "transparent 0%, ".concat(gradientColor, " 100%");
                 break;
             case 'to top left':
-                gradientStops = "transparent 0%, ".concat(gradientColor, " 100%");
+                gradientStops = "".concat(gradientColor, " 0%, transparent 100%");
                 break;
             case 'to bottom right':
                 gradientStops = "".concat(gradientColor, " 0%, transparent 100%");
                 break;
             case 'to bottom left':
-                gradientStops = "".concat(gradientColor, " 0%, transparent 100%");
+                gradientStops = "transparent 0%, ".concat(gradientColor, " 100%");
                 break;
             default:
-                gradientStops = "".concat(gradientColor, " 0%,transparent 100%");
+                gradientStops = "".concat(gradientColor, " 0%, transparent 100%");
         }
         return {
             background: "linear-gradient(".concat(direction, ", ").concat(gradientStops, ")"),
@@ -360,7 +369,6 @@ var Vista = function (localProps) {
             react_1.default.createElement("div", { style: {
                     maxWidth: final.contentWrapperMaxWidth || '700px',
                     width: '100%',
-                    textAlign: final.textAlign || 'left',
                 } }, ContentComponent))) : (
         // PLAIN MODE: Regular layout with mediaLeft/mediaRight positioning
         react_1.default.createElement("div", { className: "vista-container ".concat(final.containerClass || ''), style: {
@@ -382,7 +390,6 @@ var Vista = function (localProps) {
             react_1.default.createElement("div", { style: {
                     maxWidth: final.contentWrapperMaxWidth || '100%',
                     width: '100%',
-                    textAlign: final.textAlign || 'left',
                 } }, ContentComponent),
             (final.mediaPosition === 'bottom' || !final.mediaPosition) && react_1.default.createElement(MediaComponent, null))) : final.reverse ? (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("div", { style: { flex: 1 } },
@@ -395,3 +402,750 @@ var Vista = function (localProps) {
                 react_1.default.createElement(MediaComponent, null)))))))));
 };
 exports.default = Vista;
+// 'use client';
+// import React, { useRef } from 'react';
+// import { getCssVariableValue } from '../../utils/getCssVariable';
+// import { useComponentConfiguration } from '../../utils/componentUtils';
+// import Text from '../text/Text';
+// import Button from '../button/Button';
+// import Flex from '../flex/Flex';
+// import Video from '../video/Video';
+// type VistaProps = {
+//   // Main component ID
+//   id?: string;
+//   // Background Mode Props
+//   backgroundMode?: 'plain' | 'background';
+//   gradientOverlay?: boolean;
+//   gradientColor?: string;
+//   gradientOpacity?: number;
+//   gradientDirection?: 'linear' | 'radial';
+//   gradientLinearDirection?: 'to right' | 'to left' | 'to top' | 'to bottom' | 'to top right' | 'to top left' | 'to bottom right' | 'to bottom left';
+//   // Background Media Props
+//   backgroundMedia?: 'none' | 'image' | 'video';
+//   backgroundImage?: string;
+//   backgroundVideo?: string;
+//   backgroundImageSize?: 'cover' | 'contain' | 'auto';
+//   backgroundImagePosition?: 'center' | 'top' | 'bottom' | 'left' | 'right';
+//   backgroundImageRepeat?: boolean;
+//   videoAutoplay?: boolean;
+//   videoLoop?: boolean;
+//   videoMuted?: boolean;
+//   videoPoster?: string;
+//   videoControls?: boolean;
+//   layout?: 'centered' | 'mediaLeft' | 'mediaRight' | 'stacked';
+//   pattern?: 'grid' | 'dots' | 'diagonal' | 'checkerboard' | 'horizontal' | 'vertical';
+//   patternOpacity?: number;
+//   reverse?: boolean;
+//   bg?: string;
+//   padding?: string;
+//   textAlign?: 'left' | 'center' | 'right';
+//   contentWrapperMaxWidth?: string;
+//   // Flex positioning props for background mode
+//   contentJustify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+//   contentAlign?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
+//   mediaPosition?: 'top' | 'bottom';
+//   funcss?: string;
+//   blurry?: number;
+//   opacity?: number;
+//   // Content Props
+//   heading?: React.ReactNode;
+//   headingSize?: string;
+//   headingWeight?: number;
+//   headingColor?: string;
+//   headingClass?: string;
+//   subheading?: React.ReactNode;
+//   subheadingSize?: string;
+//   subheadingWeight?: number;
+//   subheadingColor?: string;
+//   subheadingClass?: string;
+//   content?: React.ReactNode;
+//   contentSize?: string;
+//   contentWeight?: number;
+//   contentColor?: string;
+//   contentClass?: string;
+//   media?: React.ReactNode;
+//   mediaUrl?: string;
+//   mediaAlt?: string;
+//   mediaClass?: string;
+//   mediaSize?: string;
+//   cta?: React.ReactNode;
+//   ctaClass?: string;
+//   sectionClass?: string;
+//   containerClass?: string;
+//   gap?: string;
+//   contentWrapperClass?: string;
+//   mediaWrapperClass?: string;
+//   children?: React.ReactNode;
+//   // Gradient Blob Props
+//   showGradient?: boolean;
+//   gradientPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
+//   gradientSize?: string;
+//   gradientColors?: string;
+//   fade?: boolean;
+//   fadeColor?: string;
+//   fadeDirection?: 'top' | 'bottom' | 'left' | 'right';
+//   fadeRadial?: boolean;
+//   variant?: string;
+//   // Responsive props
+//   mediaCss?: string;
+//   // CTA Button Props
+//   showPrimaryCTA?: boolean;
+//   showSecondaryCTA?: boolean;
+//   showAccentCTA?: boolean;
+//   primaryButtonOutlined?: boolean;
+//   secondaryButtonOutlined?: boolean;
+//   accentButtonOutlined?: boolean;
+//   ctaPrimaryUrl?: string;
+//   ctaSecondaryUrl?: string;
+//   ctaAccentUrl?: string;
+//   ctaPrimaryText?: string;
+//   ctaSecondaryText?: string;
+//   ctaAccentText?: string;
+//   // Primary CTA Button Props
+//   ctaPrimaryRounded?: boolean;
+//   ctaPrimaryFlat?: boolean;
+//   ctaPrimaryPrefix?: string;
+//   ctaPrimarySuffix?: string;
+//   primaryIconSize?: number;
+//   primaryButtonFuncss?: string;
+//   primaryButtonSmall?: boolean;
+//   primaryButtonBig?: boolean;
+//   // Secondary CTA Button Props
+//   ctaSecondaryRounded?: boolean;
+//   ctaSecondaryFlat?: boolean;
+//   ctaSecondaryPrefix?: string;
+//   ctaSecondarySuffix?: string;
+//   secondaryIconSize?: number;
+//   secondaryButtonFuncss?: string;
+//   secondaryButtonSmall?: boolean;
+//   secondaryButtonBig?: boolean;
+//   // Accent CTA Button Props
+//   ctaAccentRounded?: boolean;
+//   ctaAccentFlat?: boolean;
+//   ctaAccentPrefix?: string;
+//   ctaAccentSuffix?: string;
+//   accentIconSize?: number;
+//   accentButtonFuncss?: string;
+//   accentButtonSmall?: boolean;
+//   accentButtonBig?: boolean;
+//   ctaGap?: number;
+//   ctaFlexJustify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around';
+//   // Media Type Props
+//   mediaType?: 'image' | 'video' | 'iframe' | 'custom';
+//   videoUrl?: string;
+//   iframeUrl?: string;
+//   iframeSize?: string;
+//   customMedia?: React.ReactNode;
+//   // Media Effects
+//   mediaFilter?: 'grayscale' | 'sepia' | 'blur' | 'brightness' | 'contrast' | 'none';
+//   mediaFilterValue?: number;
+// };
+// const Vista: React.FC<VistaProps> = (localProps) => {
+//   const { mergeWithLocal } = useComponentConfiguration('Vista', localProps.variant);
+//   const { props: mergedProps } = mergeWithLocal(localProps);
+//   const final = mergedProps;
+//   const sectionRef = useRef<HTMLDivElement>(null);
+//   const contentRef = useRef<HTMLDivElement>(null);
+//   // Helper function to get color from CSS variable name
+//   const getColorValue = (colorName?: string, fallback: string = '#000000'): string => {
+//     if (!colorName) return fallback;
+//     return getCssVariableValue(colorName) || fallback;
+//   };
+//   // Check if there's a background image/video
+//   const hasBackgroundMedia = () => {
+//     return final.backgroundMode === 'background' && 
+//            final.backgroundMedia !== 'none' && 
+//            (final.backgroundImage || final.backgroundVideo);
+//   };
+//   // Get default text colors based on background
+//   const getDefaultTextColor = () => {
+//     if (hasBackgroundMedia() || final.bg) {
+//       return '';
+//     }
+//     return '';
+//   };
+//   // Get gradient color value
+//   const getGradientColorValue = () => {
+//     return getColorValue(final.gradientColor, 'primary');
+//   };
+//   // Get media size
+//   const getMediaSize = () => {
+//     if (final.mediaSize) {
+//       return final.mediaSize;
+//     }
+//     if (final.mediaType === 'iframe' && final.iframeSize) {
+//       return final.iframeSize;
+//     }
+//     return undefined;
+//   };
+//   const layoutClass = [
+//     final.layout || 'centered',
+//     final.reverse ? 'reverse' : '',
+//     `text-${final.textAlign || 'left'}`,
+//   ]
+//     .filter(Boolean)
+//     .join(' ');
+//   // Filter styles helper
+//   const getFilterStyle = (
+//     filter?: 'grayscale' | 'sepia' | 'blur' | 'brightness' | 'contrast' | 'none',
+//     filterValue?: number
+//   ) => {
+//     if (!filter || filter === 'none') return '';
+//     const value = filterValue || 1;
+//     switch (filter) {
+//       case 'grayscale':
+//         return `grayscale(${value})`;
+//       case 'sepia':
+//         return `sepia(${value})`;
+//       case 'blur':
+//         return `blur(${value}px)`;
+//       case 'brightness':
+//         return `brightness(${value})`;
+//       case 'contrast':
+//         return `contrast(${value})`;
+//       default:
+//         return '';
+//     }
+//   };
+//   // CTA Buttons Component
+//   const CTAButtons = () => {
+//     const hasCTAs = final.showPrimaryCTA || final.showSecondaryCTA || final.showAccentCTA;
+//     if (!hasCTAs) return null;
+//     return (
+//       <Flex 
+//         gap={final.ctaGap} 
+//         justify={final.ctaFlexJustify}
+//         className={`mt-6 ${final.ctaClass || ''}`}
+//         wrap="wrap"
+//         width='100%'
+//       >
+//         {final.showPrimaryCTA && (
+//           <Button
+//             bg={"primary"}
+//             outlined={final.primaryButtonOutlined}
+//             onClick={() => final.ctaPrimaryUrl && (window.location.href = final.ctaPrimaryUrl)}
+//             rounded={final.ctaPrimaryRounded}
+//             flat={final.ctaPrimaryFlat}
+//             stringPrefix={final.ctaPrimaryPrefix}
+//             stringSuffix={final.ctaPrimarySuffix}
+//             iconSize={final.primaryIconSize}
+//             funcss={final.primaryButtonFuncss}
+//             small={final.primaryButtonSmall}
+//             big={final.primaryButtonBig}
+//           >
+//             {final.ctaPrimaryText}
+//           </Button>
+//         )}
+//         {final.showSecondaryCTA && (
+//           <Button
+//             bg={"secondary"}
+//             outlined={final.secondaryButtonOutlined}
+//             onClick={() => final.ctaSecondaryUrl && (window.location.href = final.ctaSecondaryUrl)}
+//             rounded={final.ctaSecondaryRounded}
+//             flat={final.ctaSecondaryFlat}
+//             stringPrefix={final.ctaSecondaryPrefix}
+//             stringSuffix={final.ctaSecondarySuffix}
+//             iconSize={final.secondaryIconSize}
+//             funcss={final.secondaryButtonFuncss}
+//             small={final.secondaryButtonSmall}
+//             big={final.secondaryButtonBig}
+//           >
+//             {final.ctaSecondaryText}
+//           </Button>
+//         )}
+//         {final.showAccentCTA && (
+//           <Button
+//             bg={"accent"}
+//             outlined={final.accentButtonOutlined}
+//             onClick={() => final.ctaAccentUrl && (window.location.href = final.ctaAccentUrl)}
+//             rounded={final.ctaAccentRounded}
+//             flat={final.ctaAccentFlat}
+//             stringPrefix={final.ctaAccentPrefix}
+//             stringSuffix={final.ctaAccentSuffix}
+//             iconSize={final.accentIconSize}
+//             funcss={final.accentButtonFuncss}
+//             small={final.accentButtonSmall}
+//             big={final.accentButtonBig}
+//           >
+//             {final.ctaAccentText}
+//           </Button>
+//         )}
+//       </Flex>
+//     );
+//   };
+//   // Content Component
+//   const ContentComponent = (
+//     <div 
+//       ref={contentRef}
+//       className={`vista-content ${final.layout === 'centered' ? "text-center" : ""} ${final.contentWrapperClass || ''}`}
+//       style={{
+//         position: 'relative',
+//         zIndex: 2,
+//       }}
+//     >
+//       {final.heading && (
+//         <Text 
+//           block 
+//           size={final.headingSize || "6xl"}
+//           weight={final.headingWeight}
+//           color={final.headingColor || getDefaultTextColor()}
+//           funcss={final.headingClass}
+//         >
+//           {final.heading}
+//         </Text>
+//       )}
+//       {final.subheading && (
+//         <Text 
+//           block 
+//           size={final.subheadingSize || "lg"}
+//           weight={final.subheadingWeight}
+//           color={final.subheadingColor || getDefaultTextColor()}
+//           funcss={`mt-2 ${final.subheadingClass || ''}`}
+//         >
+//           {final.subheading}
+//         </Text>
+//       )}
+//       {final.content && (
+//         <Text 
+//           block 
+//           size={final.contentSize}
+//           weight={final.contentWeight}
+//           color={final.contentColor || getDefaultTextColor()}
+//           funcss={`mt-4 ${final.contentClass || ''}`}
+//           article
+//         >
+//           {localProps.children || (typeof final.content === 'string' ? <div dangerouslySetInnerHTML={{ __html: final.content }} /> : final.content)}
+//         </Text>
+//       )}
+//       {final.cta ? (
+//         <div className={`mt-6 ${final.ctaClass || ''}`}>
+//           {final.cta}
+//         </div>
+//       ) : (
+//         <CTAButtons />
+//       )}
+//     </div>
+//   );
+//   // Media Component (only shown when not in background mode)
+//   const MediaComponent = () => {
+//     if (final.backgroundMode === 'background') return null;
+//     const mediaType = final.mediaType || 'image';
+//     const hasMedia = final.media || final.mediaUrl || final.videoUrl || final.iframeUrl || final.customMedia;
+//     if (!hasMedia) return null;
+//     const mediaSize = getMediaSize();
+//     const mediaWrapperStyle: React.CSSProperties = {
+//       position: 'relative',
+//       width: '100%',
+//       maxWidth: mediaSize || '100%',
+//       margin: '0 auto',
+//     };
+//     const mediaStyle: React.CSSProperties = {
+//       objectFit: 'cover',
+//       maxWidth: mediaSize,
+//       width: '100%',
+//       borderRadius: 'inherit',
+//       filter: getFilterStyle(final.mediaFilter, final.mediaFilterValue),
+//     };
+//     return (
+//       <div 
+//         className={`vista-media ${final.mediaCss || ''} ${final.mediaWrapperClass || ''}`}
+//         style={mediaWrapperStyle}
+//       >
+//         {/* Custom Media */}
+//         {mediaType === 'custom' && final.customMedia && (
+//           <div style={{ position: 'relative', width: '100%' }}>
+//             {final.customMedia}
+//           </div>
+//         )}
+//         {/* Video */}
+//         {mediaType === 'video' && final.videoUrl && (
+//           <div style={{ position: 'relative', maxWidth: mediaSize, width: '100%', aspectRatio: '16/9', margin: '0 auto'}}>
+//             <Video
+//               src={final.videoUrl}
+//               autoPlay={final.videoAutoplay}
+//               loop={final.videoLoop}
+//               muted={final.videoMuted}
+//               poster={final.videoPoster}
+//               funcss={final.mediaCss || ''}
+//               style={{
+//                 filter: getFilterStyle(final.mediaFilter, final.mediaFilterValue),
+//               }}
+//             />
+//           </div>
+//         )}
+//         {/* iFrame */}
+//         {mediaType === 'iframe' && final.iframeUrl && (
+//           <div
+//             className="vista-iframe-wrapper"
+//             style={{
+//               position: 'relative',
+//               width: '100%',
+//               maxWidth: mediaSize || '100%',
+//               margin: '0 auto',
+//               height: 'fit-content',
+//             }}
+//           >
+//             <iframe
+//               src={final.iframeUrl}
+//               className={`vista-iframe ${final.mediaCss || ''}`}
+//               style={{
+//                 width: '100%',
+//                 height: 'auto',
+//                 aspectRatio: '16/9',
+//                 border: 'none',
+//                 display: 'block',
+//                 filter: getFilterStyle(final.mediaFilter, final.mediaFilterValue),
+//               }}
+//               allowFullScreen
+//               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+//               title="Vista media content"
+//             />
+//           </div>
+//         )}
+//         {/* Image */}
+//         {mediaType === 'image' && (final.media || final.mediaUrl) && (
+//           <div style={{ position: 'relative', width: '100%' }}>
+//             {final.media ? (
+//               <div style={{ width: '100%', maxWidth: mediaSize, margin: '0 auto' }}>
+//                 {final.media}
+//               </div>
+//             ) : (
+//               <img 
+//                 src={final.mediaUrl} 
+//                 alt={final.mediaAlt || 'Vista media'}
+//                 className={final.mediaCss || ''}
+//                 style={mediaStyle}
+//                 loading="lazy"
+//               />
+//             )}
+//           </div>
+//         )}
+//       </div>
+//     );
+//   };
+//   const isCentered = final.layout === 'centered';
+//   const isStacked = final.layout === 'stacked';
+//   const isMediaLeft = final.layout === 'mediaLeft';
+//   const isMediaRight = final.layout === 'mediaRight';
+//   const positionStyles: Record<string, React.CSSProperties> = {
+//     'top-left': { top: '-100px', left: '-100px' },
+//     'top-right': { top: '-100px', right: '-100px' },
+//     'bottom-left': { bottom: '-100px', left: '-100px' },
+//     'bottom-right': { bottom: '-100px', right: '-100px' },
+//     center: { top: '50%', left: '50%', transform: 'translate(-50%, -50%)' },
+//   };
+//   const primaryColor = getColorValue('primary');
+//   const secondaryColor = getColorValue('secondary');
+//   const gradientStyle: React.CSSProperties = {
+//     position: 'absolute',
+//     width: final.gradientSize || "200px",
+//     height: final.gradientSize || "200px",
+//     background: final.gradientColors 
+//       ? `radial-gradient(circle, ${getColorValue(final.gradientColors.split(',')[0])}, ${getColorValue(final.gradientColors.split(',')[1])})`
+//       : `radial-gradient(circle, ${primaryColor}, ${secondaryColor})`,
+//     opacity: final.opacity || 0.7,
+//     filter: `blur(${final.blurry || 4}rem)`,
+//     pointerEvents: 'none',
+//     zIndex: 0,
+//     ...positionStyles[final.gradientPosition || 'center'],
+//   };
+//   // Get gradient overlay style
+//   const getGradientOverlayStyle = () => {
+//     if (!final.gradientOverlay) return {};
+//     const gradientColor = getGradientColorValue();
+//     const opacity = final.gradientOpacity || 0.7;
+//     if (final.gradientDirection === 'radial') {
+//       return {
+//         background: `radial-gradient(circle at center, ${gradientColor} 0%, transparent 100%)`,
+//         opacity: opacity,
+//       };
+//     }
+//     const direction = final.gradientLinearDirection || 'to right';
+//     let gradientStops = '';
+//     switch (direction) {
+//       case 'to right':
+//         gradientStops = `${gradientColor} 0%,transparent 100%`;
+//         break;
+//       case 'to left':
+//         gradientStops = `transparent 0%, ${gradientColor} 100%`;
+//         break;
+//       case 'to bottom':
+//         gradientStops = `${gradientColor} 0%,transparent 100%`;
+//         break;
+//       case 'to top':
+//         gradientStops = `transparent 0%, ${gradientColor} 100%`;
+//         break;
+//       case 'to top right':
+//         gradientStops = `transparent 0%, ${gradientColor} 100%`;
+//         break;
+//       case 'to top left':
+//         gradientStops = `transparent 0%, ${gradientColor} 100%`;
+//         break;
+//       case 'to bottom right':
+//         gradientStops = `${gradientColor} 0%, transparent 100%`;
+//         break;
+//       case 'to bottom left':
+//         gradientStops = `${gradientColor} 0%, transparent 100%`;
+//         break;
+//       default:
+//         gradientStops = `${gradientColor} 0%,transparent 100%`;
+//     }
+//     return {
+//       background: `linear-gradient(${direction}, ${gradientStops})`,
+//       opacity: opacity,
+//     };
+//   };
+//   // Get fade color
+//   const getFadeColorValue = (): string => {
+//     if (!final.fade) return '';
+//     return getColorValue(final.fadeColor, 'page-bg') || '#ffffff';
+//   };
+//   // Get fade style
+//   const getFadeStyle = () => {
+//     const fadeColor = getFadeColorValue();
+//     if (!fadeColor) return {};
+//     if (final.fadeRadial) {
+//       return {
+//         background: `radial-gradient(circle, transparent 30%, ${fadeColor} 100%)`,
+//       };
+//     }
+//     const direction = final.fadeDirection || 'bottom';
+//     const toDirectionMap: Record<string, string> = {
+//       top: 'to top',
+//       bottom: 'to bottom',
+//       left: 'to left',
+//       right: 'to right'
+//     };
+//     return {
+//       background: `linear-gradient(${toDirectionMap[direction]}, transparent 0%, ${fadeColor} 100%)`,
+//     };
+//   };
+//   return (
+//     <div
+//       ref={sectionRef}
+//       id={final.id}
+//       className={`vista 
+//         ${final.backgroundMode === 'background' ? 'vista-background-mode' : ''}
+//         ${final.pattern === 'grid' ? 'grid-bg' : 
+//           final.pattern === 'dots' ? 'bg-pattern-dots' : 
+//           final.pattern === 'diagonal' ? 'bg-pattern-diagonal' : 
+//           final.pattern === 'checkerboard' ? 'bg-pattern-checkerboard' :
+//           final.pattern === 'horizontal' ? 'bg-pattern-horizontal' :
+//           final.pattern === 'vertical' ? 'bg-pattern-vertical' : ''} 
+//           ${final.bg ? `bg-${final.bg}` : ''} ${final.padding ? `p-${final.padding}` : ''} ${layoutClass} ${final.sectionClass || ''} ${final.funcss || ''}`}
+//       style={{ 
+//         position: 'relative', 
+//         overflow: 'hidden',
+//         minHeight: 'auto',
+//         height: 'fit-content',
+//         display: 'flex',
+//         flexDirection: 'column',
+//         alignItems: 'center',
+//         justifyContent: 'center',
+//         backgroundImage: final.pattern && final.backgroundMode !== 'background' ? 
+//           (final.pattern === 'grid' ? `linear-gradient(to right, rgba(var(--borderRgb), ${final.patternOpacity || 0.1}) 1px, transparent 1px),
+//           linear-gradient(to bottom, rgba(var(--borderRgb), ${final.patternOpacity || 0.1}) 1px, transparent 1px)` :
+//           final.pattern === 'dots' ? `radial-gradient(rgba(var(--borderRgb), ${final.patternOpacity || 0.1}) 1px, transparent 1px)` :
+//           final.pattern === 'diagonal' ? `repeating-linear-gradient(45deg, rgba(var(--borderRgb), ${final.patternOpacity || 0.1}), rgba(var(--borderRgb), ${final.patternOpacity || 0.1}) 1px, transparent 1px, transparent 10px)` :
+//           final.pattern === 'checkerboard' ? `linear-gradient(45deg, rgba(var(--borderRgb), ${final.patternOpacity || 0.1}) 25%, transparent 25%), linear-gradient(-45deg, rgba(var(--borderRgb), ${final.patternOpacity || 0.1}) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(var(--borderRgb), ${final.patternOpacity || 0.1}) 75%), linear-gradient(-45deg, transparent 75%, rgba(var(--borderRgb), ${final.patternOpacity || 0.1}) 75%)` :
+//           final.pattern === 'horizontal' ? `linear-gradient(to bottom, rgba(var(--borderRgb), ${final.patternOpacity || 0.1}) 1px, transparent 1px)` :
+//           final.pattern === 'vertical' ? `linear-gradient(to right, rgba(var(--borderRgb), ${final.patternOpacity || 0.1}) 1px, transparent 1px)` : '') : undefined,
+//         backgroundSize: final.pattern && final.backgroundMode !== 'background' ? '40px 40px' : undefined,
+//       }}
+//     >
+//       {/* Background Image/Video */}
+//       {final.backgroundMode === 'background' && (
+//         <>
+//           {/* Background Image */}
+//           {final.backgroundMedia === 'image' && final.backgroundImage && (
+//             <div
+//               style={{
+//                 position: 'absolute',
+//                 top: 0,
+//                 left: 0,
+//                 width: '100%',
+//                 height: '100%',
+//                 zIndex: 0,
+//                 backgroundImage: `url(${final.backgroundImage})`,
+//                 backgroundSize: final.backgroundImageSize || 'cover',
+//                 backgroundPosition: final.backgroundImagePosition || 'center',
+//                 backgroundRepeat: final.backgroundImageRepeat ? 'repeat' : 'no-repeat',
+//               }}
+//             />
+//           )}
+//           {/* Background Video */}
+//           {final.backgroundMedia === 'video' && final.backgroundVideo && (
+//             <div
+//               style={{
+//                 position: 'absolute',
+//                 top: 0,
+//                 left: 0,
+//                 width: '100%',
+//                 height: '100%',
+//                 zIndex: 0,
+//                 overflow: 'hidden',
+//               }}
+//             >
+//               <video
+//                 autoPlay={final.videoAutoplay !== false}
+//                 loop={final.videoLoop !== false}
+//                 muted={final.videoMuted !== false}
+//                 poster={final.videoPoster}
+//                 style={{
+//                   position: 'absolute',
+//                   top: '50%',
+//                   left: '50%',
+//                   transform: 'translate(-50%, -50%)',
+//                   minWidth: '100%',
+//                   minHeight: '100%',
+//                   width: 'auto',
+//                   height: 'auto',
+//                   objectFit: 'cover',
+//                 }}
+//               >
+//                 <source src={final.backgroundVideo} type="video/mp4" />
+//                 Your browser does not support the video tag.
+//               </video>
+//               {!final.videoControls && (
+//                 <div
+//                   style={{
+//                     position: 'absolute',
+//                     top: 0,
+//                     left: 0,
+//                     width: '100%',
+//                     height: '100%',
+//                     backgroundColor: 'rgba(0, 0, 0, 0.3)',
+//                   }}
+//                 />
+//               )}
+//             </div>
+//           )}
+//         </>
+//       )}
+//       {/* Gradient Blob */}
+//       {final.showGradient && (
+//         <div
+//           className="vista-gradient-blob"
+//           style={gradientStyle}
+//         />
+//       )}
+//       {/* Gradient Overlay (in background mode) */}
+//       {final.backgroundMode === 'background' && final.gradientOverlay && (
+//         <div
+//           style={{
+//             position: 'absolute',
+//             inset: 0,
+//             width: '100%',
+//             height: '100%',
+//             ...getGradientOverlayStyle(),
+//             zIndex: 1,
+//             pointerEvents: 'none'
+//           }}
+//         />
+//       )}
+//       {/* Fade Overlay */}
+//       {final.fade && (
+//         <div
+//           className="vista-fade-overlay"
+//           style={{
+//             position: 'absolute',
+//             inset: 0,
+//             width: '100%',
+//             height: '100%',
+//             ...getFadeStyle(),
+//             zIndex: 2,
+//             pointerEvents: 'none'
+//           }}
+//         />
+//       )}
+//       {/* Main Container - Different behavior for background vs plain mode */}
+//       {final.backgroundMode === 'background' ? (
+//         // BACKGROUND MODE: Full flex container for positioning
+//         <div 
+//           className={`vista-container ${final.containerClass || ''}`}
+//           style={{ 
+//             position: 'relative', 
+//             zIndex: 3,
+//             display: 'flex',
+//             width: '100%',
+//             height: '100%',
+//             justifyContent: final.contentJustify || 'center',
+//             alignItems: final.contentAlign || 'center',
+//             padding: '2rem',
+//           }}
+//         >
+//           {/* Content wrapper with max-width */}
+//           <div 
+//             style={{ 
+//               maxWidth: final.contentWrapperMaxWidth || '700px',
+//               width: '100%',
+//               textAlign: final.textAlign || 'left',
+//             }}
+//           >
+//             {ContentComponent}
+//           </div>
+//         </div>
+//       ) : (
+//         // PLAIN MODE: Regular layout with mediaLeft/mediaRight positioning
+//         <div className={`vista-container ${final.containerClass || ''}`} style={{ 
+//           position: 'relative', 
+//           zIndex: 3,
+//           gap: final.gap || "2rem",
+//           display: 'flex',
+//           flexDirection: isCentered || isStacked ? 'column' : 'row',
+//           alignItems: 'center',
+//           justifyContent: 'center',
+//           width: '100%',
+//           height: '100%',
+//           maxWidth: '1200px',
+//           margin: '0 auto',
+//           padding: '2rem',
+//           minHeight: 'auto',
+//         }}>
+//           {isCentered || isStacked ? (
+//             <>
+//               {(final.mediaPosition === 'top') && <MediaComponent />}
+//               {/* Content wrapper with max-width for centered content */}
+//               <div 
+//                 style={{ 
+//                   maxWidth: final.contentWrapperMaxWidth || '100%',
+//                   width: '100%',
+//                   textAlign: final.textAlign || 'left',
+//                 }}
+//               >
+//                 {ContentComponent}
+//               </div>
+//               {(final.mediaPosition === 'bottom' || !final.mediaPosition) && <MediaComponent />}
+//             </>
+//           ) : final.reverse ? (
+//             <>
+//               <div style={{ flex: 1 }}>
+//                 <MediaComponent />
+//               </div>
+//               <div style={{ flex: 1 }}>
+//                 {ContentComponent}
+//               </div>
+//             </>
+//           ) : (
+//             <>
+//               {isMediaLeft && (
+//                 <div style={{ flex: 1 }}>
+//                   <MediaComponent />
+//                 </div>
+//               )}
+//               <div style={{ flex: 1 }}>
+//                 {ContentComponent}
+//               </div>
+//               {isMediaRight && (
+//                 <div style={{ flex: 1 }}>
+//                   <MediaComponent />
+//                 </div>
+//               )}
+//             </>
+//           )}
+//         </div>
+//       )}
+//     </div>
+//   );
+// };
+// export default Vista;