funuicss 3.7.11 → 3.7.13

package/css/fun.css

@@ -1062,6 +1062,8 @@ link:hover {
 
 
 
+
+
 .roundBtn {
   border-radius: 100rem;
 }
@@ -4324,7 +4326,6 @@ opacity: 1;
   color: white;
 }
 
-
 .vista{
   display: flex;
   align-items: center;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.7.11",
+  "version": "3.7.13",
   "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/select/Select.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 interface SelectOption {
     value: string;
-    text: string;
+    text?: string;
+    label?: string;
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
 }

package/ui/select/Select.js

@@ -57,7 +57,7 @@ var Select = function (_a) {
     (0, react_1.useEffect)(function () {
         if (searchQuery) {
             var filtered = options.filter(function (option) {
-                return option.text.toLowerCase().includes(searchQuery.toLowerCase());
+                return (option.text || option.label || "").toLowerCase().includes(searchQuery.toLowerCase());
             });
             setFilteredOptions(filtered);
             setFocusedIndex(filtered.length > 0 ? 0 : -1);
@@ -208,7 +208,7 @@ var Select = function (_a) {
                 pointerEvents: 'none'
             }, tabIndex: -1 },
             !label && react_1.default.createElement("option", { value: "" }, "Select an option"),
-            options.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.text)); })),
+            options.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.text || option.label || option.value)); })),
         react_1.default.createElement("div", { ref: triggerRef, className: "".concat(funcss, " ").concat(rounded && 'round-edge', "  ").concat(getTriggerClasses()), onClick: openDropdown, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, role: "button", "aria-expanded": isOpen, "aria-haspopup": "listbox" },
             react_1.default.createElement("span", { className: "select-value ".concat(!selectedOption ? 'select-placeholder' : '') }, selectedOption ? selectedOption.text : label),
             react_1.default.createElement("div", { className: "select-arrow ".concat(isOpen ? 'open' : '') },

package/ui/theme/theme.js

@@ -146,7 +146,6 @@ var validateOriginAccess = function (projectId) { return __awaiter(void 0, void
                     console.log('📋 Trusted domains:', trustedDomains.map(function (d) { return d.domain; }));
                     return [2 /*return*/, false];
                 }
-                console.log('✅ Origin validation passed');
                 return [2 /*return*/, true];
             case 3:
                 error_1 = _a.sent();
@@ -174,7 +173,6 @@ var loadLocalTheme = function () { return __awaiter(void 0, void 0, void 0, func
                 return [4 /*yield*/, response.json()];
             case 2:
                 data = _a.sent();
-                console.log('✅ Loaded theme from local file');
                 return [2 /*return*/, data];
             case 3: return [3 /*break*/, 5];
             case 4:
@@ -210,7 +208,6 @@ var loadThemeFromCDN = function (projectId) { return __awaiter(void 0, void 0, v
                 return [4 /*yield*/, response.json()];
             case 3:
                 data = _a.sent();
-                console.log('✅ Loaded theme from Firebase Storage CDN');
                 return [2 /*return*/, data];
             case 4:
                 console.error('❌ Firebase Storage fetch failed:', response.status, response.statusText);
@@ -327,7 +324,6 @@ var ThemeProvider = function (_a) {
                 switch (_a.label) {
                     case 0:
                         _a.trys.push([0, 8, 9, 10]);
-                        console.log('🔄 Starting theme loading process...');
                         finalTheme = null;
                         finalVersion = null;
                         return [4 /*yield*/, loadLocalTheme()];
@@ -335,7 +331,6 @@ var ThemeProvider = function (_a) {
                         localTheme = _a.sent();
                         localVersion = (localTheme === null || localTheme === void 0 ? void 0 : localTheme.version) || 0;
                         if (!projectId) return [3 /*break*/, 6];
-                        console.log('🔑 Project ID provided, attempting CDN load with origin validation...');
                         return [4 /*yield*/, validateOriginAccess(projectId)];
                     case 2:
                         hasAccess = _a.sent();
@@ -352,7 +347,6 @@ var ThemeProvider = function (_a) {
                                 console.log("\uD83D\uDD04 Version mismatch: Local(".concat(localVersion, ") vs CDN(").concat(cdnVersion, ")"));
                                 console.log('ℹ️ Using CDN version. Please update your local funui.json file manually.');
                             }
-                            console.log('✅ Theme loaded from CDN');
                         }
                         else if (localTheme) {
                             // CDN not available but we have local theme

package/ui/video/Video.d.ts

@@ -43,8 +43,9 @@ interface VideoProps {
     rewindCss?: string;
     forwardCss?: string;
     buttonCss?: string;
+    style?: React.CSSProperties;
     volumeStyle?: 'slider' | 'compact' | 'hover';
     variant?: string;
 }
-export default function Video({ src, poster, onDuration, onEnded, isPause, spacebarPlay, className, autoPlay, showControls, showPlayPause, showProgress, showVolume, showTime, showFullscreen, showDownload, showSeekButtons, playIcon, pauseIcon, fullscreenIcon, downloadIcon, volumeIcon, muteIcon, rewindIcon, forwardIcon, hideControlsDelay, loop, muted, seekAmount, funcss, containerCss, videoCss, controlsCss, progressCss, progressBarCss, timeCss, playCss, pauseCss, volumeCss, fullscreenCss, downloadCss, rewindCss, forwardCss, buttonCss, volumeStyle, variant, ...rest }: VideoProps): React.JSX.Element;
+export default function Video({ src, poster, onDuration, onEnded, isPause, spacebarPlay, className, autoPlay, showControls, showPlayPause, showProgress, showVolume, showTime, showFullscreen, showDownload, showSeekButtons, playIcon, pauseIcon, fullscreenIcon, downloadIcon, volumeIcon, muteIcon, rewindIcon, forwardIcon, hideControlsDelay, loop, muted, seekAmount, funcss, containerCss, videoCss, controlsCss, progressCss, progressBarCss, timeCss, playCss, pauseCss, volumeCss, fullscreenCss, downloadCss, rewindCss, forwardCss, buttonCss, volumeStyle, style, variant, ...rest }: VideoProps): React.JSX.Element;
 export {};

package/ui/video/Video.js

@@ -222,10 +222,10 @@ var useComponentConfiguration = function (componentName, variant) {
 function Video(_a) {
     var _this = this;
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
-    var src = _a.src, poster = _a.poster, onDuration = _a.onDuration, onEnded = _a.onEnded, isPause = _a.isPause, spacebarPlay = _a.spacebarPlay, _8 = _a.className, className = _8 === void 0 ? '' : _8, autoPlay = _a.autoPlay, showControls = _a.showControls, showPlayPause = _a.showPlayPause, showProgress = _a.showProgress, showVolume = _a.showVolume, showTime = _a.showTime, showFullscreen = _a.showFullscreen, showDownload = _a.showDownload, showSeekButtons = _a.showSeekButtons, playIcon = _a.playIcon, pauseIcon = _a.pauseIcon, fullscreenIcon = _a.fullscreenIcon, downloadIcon = _a.downloadIcon, volumeIcon = _a.volumeIcon, muteIcon = _a.muteIcon, rewindIcon = _a.rewindIcon, forwardIcon = _a.forwardIcon, hideControlsDelay = _a.hideControlsDelay, loop = _a.loop, muted = _a.muted, seekAmount = _a.seekAmount, _9 = _a.funcss, funcss = _9 === void 0 ? '' : _9, _10 = _a.containerCss, containerCss = _10 === void 0 ? '' : _10, _11 = _a.videoCss, videoCss = _11 === void 0 ? '' : _11, _12 = _a.controlsCss, controlsCss = _12 === void 0 ? '' : _12, _13 = _a.progressCss, progressCss = _13 === void 0 ? '' : _13, _14 = _a.progressBarCss, progressBarCss = _14 === void 0 ? '' : _14, _15 = _a.timeCss, timeCss = _15 === void 0 ? '' : _15, _16 = _a.playCss, playCss = _16 === void 0 ? '' : _16, _17 = _a.pauseCss, pauseCss = _17 === void 0 ? '' : _17, _18 = _a.volumeCss, volumeCss = _18 === void 0 ? '' : _18, _19 = _a.fullscreenCss, fullscreenCss = _19 === void 0 ? '' : _19, _20 = _a.downloadCss, downloadCss = _20 === void 0 ? '' : _20, _21 = _a.rewindCss, rewindCss = _21 === void 0 ? '' : _21, _22 = _a.forwardCss, forwardCss = _22 === void 0 ? '' : _22, _23 = _a.buttonCss, buttonCss = _23 === void 0 ? '' : _23, _24 = _a.volumeStyle, volumeStyle = _24 === void 0 ? 'slider' : _24, _25 = _a.variant, variant = _25 === void 0 ? '' : _25, rest = __rest(_a, ["src", "poster", "onDuration", "onEnded", "isPause", "spacebarPlay", "className", "autoPlay", "showControls", "showPlayPause", "showProgress", "showVolume", "showTime", "showFullscreen", "showDownload", "showSeekButtons", "playIcon", "pauseIcon", "fullscreenIcon", "downloadIcon", "volumeIcon", "muteIcon", "rewindIcon", "forwardIcon", "hideControlsDelay", "loop", "muted", "seekAmount", "funcss", "containerCss", "videoCss", "controlsCss", "progressCss", "progressBarCss", "timeCss", "playCss", "pauseCss", "volumeCss", "fullscreenCss", "downloadCss", "rewindCss", "forwardCss", "buttonCss", "volumeStyle", "variant"]);
+    var src = _a.src, poster = _a.poster, onDuration = _a.onDuration, onEnded = _a.onEnded, isPause = _a.isPause, spacebarPlay = _a.spacebarPlay, _8 = _a.className, className = _8 === void 0 ? '' : _8, autoPlay = _a.autoPlay, showControls = _a.showControls, showPlayPause = _a.showPlayPause, showProgress = _a.showProgress, showVolume = _a.showVolume, showTime = _a.showTime, showFullscreen = _a.showFullscreen, showDownload = _a.showDownload, showSeekButtons = _a.showSeekButtons, playIcon = _a.playIcon, pauseIcon = _a.pauseIcon, fullscreenIcon = _a.fullscreenIcon, downloadIcon = _a.downloadIcon, volumeIcon = _a.volumeIcon, muteIcon = _a.muteIcon, rewindIcon = _a.rewindIcon, forwardIcon = _a.forwardIcon, hideControlsDelay = _a.hideControlsDelay, loop = _a.loop, muted = _a.muted, seekAmount = _a.seekAmount, _9 = _a.funcss, funcss = _9 === void 0 ? '' : _9, _10 = _a.containerCss, containerCss = _10 === void 0 ? '' : _10, _11 = _a.videoCss, videoCss = _11 === void 0 ? '' : _11, _12 = _a.controlsCss, controlsCss = _12 === void 0 ? '' : _12, _13 = _a.progressCss, progressCss = _13 === void 0 ? '' : _13, _14 = _a.progressBarCss, progressBarCss = _14 === void 0 ? '' : _14, _15 = _a.timeCss, timeCss = _15 === void 0 ? '' : _15, _16 = _a.playCss, playCss = _16 === void 0 ? '' : _16, _17 = _a.pauseCss, pauseCss = _17 === void 0 ? '' : _17, _18 = _a.volumeCss, volumeCss = _18 === void 0 ? '' : _18, _19 = _a.fullscreenCss, fullscreenCss = _19 === void 0 ? '' : _19, _20 = _a.downloadCss, downloadCss = _20 === void 0 ? '' : _20, _21 = _a.rewindCss, rewindCss = _21 === void 0 ? '' : _21, _22 = _a.forwardCss, forwardCss = _22 === void 0 ? '' : _22, _23 = _a.buttonCss, buttonCss = _23 === void 0 ? '' : _23, _24 = _a.volumeStyle, volumeStyle = _24 === void 0 ? 'slider' : _24, style = _a.style, _25 = _a.variant, variant = _25 === void 0 ? '' : _25, rest = __rest(_a, ["src", "poster", "onDuration", "onEnded", "isPause", "spacebarPlay", "className", "autoPlay", "showControls", "showPlayPause", "showProgress", "showVolume", "showTime", "showFullscreen", "showDownload", "showSeekButtons", "playIcon", "pauseIcon", "fullscreenIcon", "downloadIcon", "volumeIcon", "muteIcon", "rewindIcon", "forwardIcon", "hideControlsDelay", "loop", "muted", "seekAmount", "funcss", "containerCss", "videoCss", "controlsCss", "progressCss", "progressBarCss", "timeCss", "playCss", "pauseCss", "volumeCss", "fullscreenCss", "downloadCss", "rewindCss", "forwardCss", "buttonCss", "volumeStyle", "style", "variant"]);
     var mergeWithLocal = useComponentConfiguration('Video', variant).mergeWithLocal;
     // Create local props object - these will override config props
-    var localProps = __assign({ src: src, poster: poster, onDuration: onDuration, onEnded: onEnded, isPause: isPause, spacebarPlay: spacebarPlay, className: className, autoPlay: autoPlay, showControls: showControls, showPlayPause: showPlayPause, showProgress: showProgress, showVolume: showVolume, showTime: showTime, showFullscreen: showFullscreen, showDownload: showDownload, showSeekButtons: showSeekButtons, playIcon: playIcon, pauseIcon: pauseIcon, fullscreenIcon: fullscreenIcon, downloadIcon: downloadIcon, volumeIcon: volumeIcon, muteIcon: muteIcon, rewindIcon: rewindIcon, forwardIcon: forwardIcon, hideControlsDelay: hideControlsDelay, loop: loop, muted: muted, seekAmount: seekAmount, funcss: funcss, containerCss: containerCss, videoCss: videoCss, controlsCss: controlsCss, progressCss: progressCss, progressBarCss: progressBarCss, timeCss: timeCss, playCss: playCss, pauseCss: pauseCss, volumeCss: volumeCss, fullscreenCss: fullscreenCss, downloadCss: downloadCss, rewindCss: rewindCss, forwardCss: forwardCss, buttonCss: buttonCss, volumeStyle: volumeStyle }, rest);
+    var localProps = __assign({ src: src, poster: poster, onDuration: onDuration, onEnded: onEnded, isPause: isPause, spacebarPlay: spacebarPlay, className: className, autoPlay: autoPlay, showControls: showControls, showPlayPause: showPlayPause, showProgress: showProgress, showVolume: showVolume, showTime: showTime, showFullscreen: showFullscreen, showDownload: showDownload, showSeekButtons: showSeekButtons, playIcon: playIcon, pauseIcon: pauseIcon, fullscreenIcon: fullscreenIcon, downloadIcon: downloadIcon, volumeIcon: volumeIcon, muteIcon: muteIcon, rewindIcon: rewindIcon, forwardIcon: forwardIcon, hideControlsDelay: hideControlsDelay, loop: loop, muted: muted, seekAmount: seekAmount, funcss: funcss, containerCss: containerCss, videoCss: videoCss, controlsCss: controlsCss, progressCss: progressCss, progressBarCss: progressBarCss, timeCss: timeCss, playCss: playCss, pauseCss: pauseCss, volumeCss: volumeCss, fullscreenCss: fullscreenCss, downloadCss: downloadCss, rewindCss: rewindCss, forwardCss: forwardCss, buttonCss: buttonCss, volumeStyle: volumeStyle, style: style }, rest);
     // Merge with config - LOCAL PROPS OVERRIDE CONFIG
     var mergedProps = mergeWithLocal(localProps).props;
     // Extract final values - local props take precedence
@@ -606,7 +606,7 @@ function Video(_a) {
     };
     return (react_1.default.createElement("div", { ref: containerRef, className: "video_container fit ".concat(final.funcss, " ").concat(final.containerCss, " ").concat(final.className), onClick: handleVideoClick },
         final.poster && !hasStarted && !isPlaying && (react_1.default.createElement("div", { style: { backgroundImage: "url(".concat(final.poster, ")") }, className: "video_poster" })),
-        react_1.default.createElement("video", { ref: videoRef, preload: "auto", src: final.src, className: "video_player fit min-w-200 ".concat(final.videoCss), onLoadedMetadata: handleLoadedMetadata, playsInline: true, controls: false, loop: final.loop, muted: final.muted }),
+        react_1.default.createElement("video", { ref: videoRef, preload: "auto", autoPlay: final.autoPlay, style: style, src: final.src, className: "video_player fit min-w-200 ".concat(final.videoCss), onLoadedMetadata: handleLoadedMetadata, playsInline: true, controls: false, loop: final.loop, muted: final.muted }),
         final.showControls && (react_1.default.createElement("div", { className: "video_controls ".concat(final.controlsCss, " ").concat(showControlsState ? 'show_controls' : 'hide_controls') },
             react_1.default.createElement(RowFlex_1.default, { gap: 1, justify: "space-between", alignItems: "center", className: "controls-row" },
                 react_1.default.createElement(RowFlex_1.default, { gap: 0.5, alignItems: "center", funcss: 'videoLeftContainer' },

package/ui/vista/Vista.d.ts

@@ -44,11 +44,12 @@ type VistaProps = {
     gradientSize?: string;
     gradientColors?: string;
     fade?: boolean;
+    fadeColor?: string;
     fadeDirection?: 'top' | 'bottom' | 'left' | 'right';
     fadeRadial?: boolean;
-    fadeOverlayDarken?: number;
-    backgroundImage?: string;
     variant?: string;
+    mediaSize?: string;
+    mediaCss?: string;
     showPrimaryCTA?: boolean;
     showSecondaryCTA?: boolean;
     showAccentCTA?: boolean;
@@ -84,6 +85,25 @@ type VistaProps = {
     accentButtonSmall?: boolean;
     ctaGap?: number;
     ctaFlexJustify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around';
+    mediaType?: 'image' | 'video' | 'iframe' | 'custom';
+    videoUrl?: string;
+    videoAutoplay?: boolean;
+    videoLoop?: boolean;
+    videoMuted?: boolean;
+    videoPoster?: string;
+    videoControls?: boolean;
+    iframeUrl?: string;
+    iframeSize?: string;
+    customMedia?: React.ReactNode;
+    imageOverlay?: boolean;
+    imageOverlayColor?: string;
+    imageOverlayOpacity?: number;
+    imageFilter?: 'grayscale' | 'sepia' | 'blur' | 'brightness' | 'contrast' | 'none';
+    imageFilterValue?: number;
+    imageBlendMode?: 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten';
+    hoverEffect?: 'lift' | 'scale' | 'tilt' | 'glow' | 'none';
+    parallax?: boolean;
+    parallaxSpeed?: number;
 };
 declare const Vista: React.FC<VistaProps>;
 export default Vista;

package/ui/vista/Vista.js

@@ -11,56 +11,210 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+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 __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 ScrollInView_1 = __importDefault(require("../ScrollInView/ScrollInView"));
+var react_1 = __importStar(require("react"));
 var getCssVariable_1 = require("../../utils/getCssVariable");
 var componentUtils_1 = require("../../utils/componentUtils");
 var Text_1 = __importDefault(require("../text/Text"));
-var Col_1 = __importDefault(require("../grid/Col"));
 var Button_1 = __importDefault(require("../button/Button"));
 var Flex_1 = __importDefault(require("../flex/Flex"));
+var Video_1 = __importDefault(require("../video/Video"));
 var Vista = function (localProps) {
-    // Use the component config hook with the variant from localProps
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Vista', localProps.variant).mergeWithLocal;
-    // Merge config with local props - local props override config
     var mergedProps = mergeWithLocal(localProps).props;
-    // Use mergedProps directly - they already have the correct merge logic applied
     var final = mergedProps;
+    var _a = (0, react_1.useState)(0), scrollY = _a[0], setScrollY = _a[1];
+    var sectionRef = (0, react_1.useRef)(null);
+    // Parallax effect
+    (0, react_1.useEffect)(function () {
+        if (!final.parallax)
+            return;
+        var handleScroll = function () {
+            if (sectionRef.current) {
+                var rect = sectionRef.current.getBoundingClientRect();
+                var scrollProgress = -rect.top;
+                setScrollY(scrollProgress * (final.parallaxSpeed || 0.5));
+            }
+        };
+        window.addEventListener('scroll', handleScroll);
+        return function () { return window.removeEventListener('scroll', handleScroll); };
+    }, [final.parallax, final.parallaxSpeed]);
+    // Get media size - updated logic
+    var getMediaSize = function () {
+        // Priority order:
+        // 1. If imageSize is passed for images, use it
+        // 2. If iframeSize is passed for iframes, use it
+        // 3. Otherwise use mediaSize
+        // 4. Fallback to undefined
+        if (final.mediaType === 'image' && final.imageSize) {
+            return final.imageSize;
+        }
+        if (final.mediaType === 'iframe' && final.iframeSize) {
+            return final.iframeSize;
+        }
+        if (final.mediaSize) {
+            return final.mediaSize;
+        }
+        return undefined;
+    };
     var layoutClass = [
-        final.layout,
+        final.layout || 'centered',
         final.reverse ? 'reverse' : '',
-        "text-".concat(final.textAlign),
+        "text-".concat(final.textAlign || 'left'),
     ]
         .filter(Boolean)
         .join(' ');
+    // Hover effect class
+    var getHoverClass = function () {
+        if (!final.hoverEffect || final.hoverEffect === 'none')
+            return '';
+        return "vista-hover-".concat(final.hoverEffect);
+    };
+    // Filter styles helper
+    var getFilterStyle = function (filter, filterValue) {
+        if (!filter || filter === 'none')
+            return '';
+        var value = filterValue || 1;
+        switch (filter) {
+            case 'grayscale':
+                return "grayscale(".concat(value, ")");
+            case 'sepia':
+                return "sepia(".concat(value, ")");
+            case 'blur':
+                return "blur(".concat(value, "px)");
+            case 'brightness':
+                return "brightness(".concat(value, ")");
+            case 'contrast':
+                return "contrast(".concat(value, ")");
+            default:
+                return '';
+        }
+    };
     // CTA Buttons Component
     var CTAButtons = function () {
         var hasCTAs = final.showPrimaryCTA || final.showSecondaryCTA || final.showAccentCTA;
         if (!hasCTAs)
             return null;
-        return (react_1.default.createElement(Flex_1.default, { gap: final.ctaGap, justify: final.ctaFlexJustify, className: "mt-6 ".concat(final.ctaClass), wrap: "wrap", width: '100%' },
+        return (react_1.default.createElement(Flex_1.default, { gap: final.ctaGap, justify: final.ctaFlexJustify, className: "mt-6 ".concat(final.ctaClass || ''), wrap: "wrap", width: '100%' },
             final.showPrimaryCTA && (react_1.default.createElement(Button_1.default, { bg: "primary", outlined: final.primaryButtonOutlined, onClick: function () { return 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 }, final.ctaPrimaryText)),
             final.showSecondaryCTA && (react_1.default.createElement(Button_1.default, { bg: "secondary", outlined: final.secondaryButtonOutlined, onClick: function () { return 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 }, final.ctaSecondaryText)),
             final.showAccentCTA && (react_1.default.createElement(Button_1.default, { bg: "accent", outlined: final.accentButtonOutlined, onClick: function () { return 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 }, final.ctaAccentText))));
     };
-    // Enhanced Text Content with flexible styling
-    var TextContent = (react_1.default.createElement("div", { className: "vista-text ".concat(final.layout === 'centered' ? "text-center" : "", " ").concat(final.textWrapperClass) },
+    // Enhanced Text Content
+    var TextContent = (react_1.default.createElement("div", { className: "vista-text ".concat(final.layout === 'centered' ? "text-center" : "", " ").concat(final.textWrapperClass || '') },
         final.heading && (react_1.default.createElement(Text_1.default, { block: true, size: final.headingSize, weight: final.headingWeight, color: final.headingColor, funcss: final.headingClass }, final.heading)),
-        final.subheading && (react_1.default.createElement(Text_1.default, { block: true, size: final.subheadingSize, weight: final.subheadingWeight, color: final.subheadingColor, 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, 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.cta ? (react_1.default.createElement("div", { className: "mt-6 ".concat(final.ctaClass) }, final.cta)) : (react_1.default.createElement(CTAButtons, null))));
-    // Enhanced Image Content - uses imageUrl if no image component provided
-    var ImageContent = (final.image || final.imageUrl) && (react_1.default.createElement("div", { className: "vista-image ".concat(final.imageWrapperClass) }, final.image ? (final.image) : (react_1.default.createElement("img", { src: final.imageUrl, alt: final.imageAlt || 'Vista image', className: "".concat(final.imageClass), style: {
+        final.subheading && (react_1.default.createElement(Text_1.default, { block: true, size: final.subheadingSize, weight: final.subheadingWeight, color: final.subheadingColor, 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, 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.cta ? (react_1.default.createElement("div", { className: "mt-6 ".concat(final.ctaClass || '') }, final.cta)) : (react_1.default.createElement(CTAButtons, null))));
+    // Enhanced Media Content
+    var MediaContent = function () {
+        var _a;
+        var mediaType = final.mediaType || 'image';
+        var hasMedia = final.image || final.imageUrl || final.videoUrl || final.iframeUrl || final.customMedia;
+        if (!hasMedia)
+            return null;
+        var mediaSize = getMediaSize();
+        var mediaWrapperStyle = {
+            position: 'relative',
+            transform: final.parallax ? "translateY(".concat(scrollY, "px)") : undefined,
+            transition: final.parallax ? 'transform 0.1s linear' : undefined,
+            width: '100%',
+            maxWidth: mediaSize || '100%',
+            margin: '0 auto',
+        };
+        var mediaStyle = {
             objectFit: 'cover',
-            maxWidth: final.imageSize,
-            borderRadius: 'inherit'
-        } }))));
+            maxWidth: mediaSize,
+            width: '100%',
+            borderRadius: 'inherit',
+            filter: getFilterStyle(final.imageFilter, final.imageFilterValue),
+            mixBlendMode: final.imageBlendMode,
+        };
+        var overlayStyle = final.imageOverlay ? {
+            position: 'absolute',
+            inset: 0,
+            backgroundColor: final.imageOverlayColor || 'rgba(0, 0, 0, 0.3)',
+            opacity: (_a = final.imageOverlayOpacity) !== null && _a !== void 0 ? _a : 1,
+            pointerEvents: 'none',
+            borderRadius: 'inherit',
+            zIndex: 1,
+        } : {};
+        return (react_1.default.createElement("div", { className: "vista-media ".concat(final.mediaCss || '', " ").concat(final.imageWrapperClass || ''), style: mediaWrapperStyle },
+            mediaType === 'custom' && final.customMedia && (react_1.default.createElement("div", { style: { position: 'relative', width: '100%' } },
+                final.customMedia,
+                final.imageOverlay && react_1.default.createElement("div", { style: overlayStyle }))),
+            mediaType === 'video' && final.videoUrl && (react_1.default.createElement("div", { style: { position: 'relative', maxWidth: mediaSize, width: '100%', aspectRatio: '16/9', margin: '0 auto' } },
+                react_1.default.createElement(Video_1.default, { src: final.videoUrl, autoPlay: final.videoAutoplay, loop: final.videoLoop, muted: final.videoMuted, poster: final.videoPoster, funcss: final.imageClass || '', style: {
+                        filter: getFilterStyle(final.imageFilter, final.imageFilterValue),
+                        mixBlendMode: final.imageBlendMode,
+                    } }),
+                final.imageOverlay && react_1.default.createElement("div", { style: overlayStyle }))),
+            mediaType === 'iframe' && final.iframeUrl && (react_1.default.createElement("div", { className: "vista-iframe-wrapper", style: {
+                    position: 'relative',
+                    width: '100%',
+                    maxWidth: mediaSize || '100%',
+                    aspectRatio: '16/9',
+                    margin: '0 auto',
+                } },
+                react_1.default.createElement("div", { style: {
+                        position: 'relative',
+                        width: '100%',
+                        height: '100%',
+                        filter: getFilterStyle(final.imageFilter, final.imageFilterValue),
+                        mixBlendMode: final.imageBlendMode,
+                    } },
+                    react_1.default.createElement("iframe", { src: final.iframeUrl, className: "vista-iframe ".concat(final.imageClass || ''), style: {
+                            width: '100%',
+                            height: '100%',
+                            border: 'none',
+                            borderRadius: 'inherit',
+                            display: 'block',
+                        }, allowFullScreen: true, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", title: "Vista iframe content" }),
+                    final.imageOverlay && react_1.default.createElement("div", { style: overlayStyle })))),
+            mediaType === 'image' && (final.image || final.imageUrl) && (react_1.default.createElement("div", { style: { position: 'relative', width: '100%' } },
+                final.image ? (react_1.default.createElement("div", { style: { width: '100%', maxWidth: mediaSize, margin: '0 auto' } }, final.image)) : (react_1.default.createElement("img", { src: final.imageUrl, alt: final.imageAlt || 'Vista image', className: final.imageClass || '', style: mediaStyle, loading: "lazy" })),
+                final.imageOverlay && react_1.default.createElement("div", { style: overlayStyle })))));
+    };
     var isCentered = final.layout === 'centered';
     var isStacked = final.layout === 'stacked';
+    var isImageLeft = final.layout === 'imageLeft';
+    var isImageRight = final.layout === 'imageRight';
     var positionStyles = {
         'top-left': { top: '-100px', left: '-100px' },
         'top-right': { top: '-100px', right: '-100px' },
@@ -70,62 +224,85 @@ var Vista = function (localProps) {
     };
     var primaryColor = (0, getCssVariable_1.getCssVariableValue)('primary');
     var secondaryColor = (0, getCssVariable_1.getCssVariableValue)('secondary');
-    var gradientStyle = __assign({ position: 'absolute', width: final.gradientSize || "200px", height: final.gradientSize || "200px", background: final.gradientColors || "radial-gradient(circle, ".concat(primaryColor, ", ").concat(secondaryColor, ")"), opacity: final.opacity, filter: "blur(".concat(final.blurry || 4, "rem)"), pointerEvents: 'none', zIndex: 0 }, positionStyles[final.gradientPosition]);
-    return (react_1.default.createElement(ScrollInView_1.default, null,
-        react_1.default.createElement("div", { className: "vista \n          ".concat(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' : '', " \n            ").concat(final.bg, " p-").concat(final.padding, " ").concat(layoutClass, " ").concat(final.sectionClass, " ").concat(final.funcss), style: {
+    var gradientStyle = __assign({ position: 'absolute', width: final.gradientSize || "200px", height: final.gradientSize || "200px", background: final.gradientColors || "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 fade color - accepts color variable name or color string
+    var getFadeColor = function () {
+        if (!final.fade)
+            return '';
+        if (final.fadeColor) {
+            // Try to get CSS variable value
+            var colorValue = (0, getCssVariable_1.getCssVariableValue)(final.fadeColor);
+            if (colorValue)
+                return colorValue;
+            // If not a variable, assume it's a color string
+            return final.fadeColor;
+        }
+        // Default to page background
+        return (0, getCssVariable_1.getCssVariableValue)('page-bg') || '#ffffff';
+    };
+    // Get fade style
+    var getFadeStyle = function () {
+        var fadeColor = getFadeColor();
+        if (!fadeColor)
+            return {};
+        if (final.fadeRadial) {
+            return {
+                background: "radial-gradient(circle, transparent 0%, ".concat(fadeColor, " 100%)"),
+            };
+        }
+        var direction = final.fadeDirection || 'bottom';
+        var toDirectionMap = {
+            top: 'to top',
+            bottom: 'to bottom',
+            left: 'to left',
+            right: 'to right'
+        };
+        return {
+            background: "linear-gradient(".concat(toDirectionMap[direction], ", transparent 0%, ").concat(fadeColor, " 100%)"),
+        };
+    };
+    return (react_1.default.createElement("div", { ref: sectionRef, className: "vista \n        ".concat(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' : '', " \n          ").concat(final.bg ? "bg-".concat(final.bg) : '', " ").concat(final.padding ? "p-".concat(final.padding) : '', " ").concat(layoutClass, " ").concat(final.sectionClass || '', " ").concat(final.funcss || '', "\n          ").concat(getHoverClass()), style: {
+            position: 'relative',
+            overflow: 'hidden',
+            minHeight: "90vh",
+            backgroundImage: final.pattern === 'grid' ? "linear-gradient(to right, rgba(var(--borderRgb), ".concat(final.patternOpacity || 0.1, ") 1px, transparent 1px),\n        linear-gradient(to bottom, rgba(var(--borderRgb), ").concat(final.patternOpacity || 0.1, ") 1px, transparent 1px)") :
+                final.pattern === 'dots' ? "radial-gradient(rgba(var(--borderRgb), ".concat(final.patternOpacity || 0.1, ") 1px, transparent 1px)") :
+                    final.pattern === 'diagonal' ? "repeating-linear-gradient(45deg, rgba(var(--borderRgb), ".concat(final.patternOpacity || 0.1, "), rgba(var(--borderRgb), ").concat(final.patternOpacity || 0.1, ") 1px, transparent 1px, transparent 10px)") :
+                        final.pattern === 'checkerboard' ? "linear-gradient(45deg, rgba(var(--borderRgb), ".concat(final.patternOpacity || 0.1, ") 25%, transparent 25%), linear-gradient(-45deg, rgba(var(--borderRgb), ").concat(final.patternOpacity || 0.1, ") 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(var(--borderRgb), ").concat(final.patternOpacity || 0.1, ") 75%), linear-gradient(-45deg, transparent 75%, rgba(var(--borderRgb), ").concat(final.patternOpacity || 0.1, ") 75%)") :
+                            final.pattern === 'horizontal' ? "linear-gradient(to bottom, rgba(var(--borderRgb), ".concat(final.patternOpacity || 0.1, ") 1px, transparent 1px)") :
+                                final.pattern === 'vertical' ? "linear-gradient(to right, rgba(var(--borderRgb), ".concat(final.patternOpacity || 0.1, ") 1px, transparent 1px)") : '',
+            backgroundSize: final.pattern ? '40px 40px' : undefined,
+        } },
+        final.showGradient && (react_1.default.createElement("div", { className: "vista-gradient-blob", style: gradientStyle })),
+        final.fade && (react_1.default.createElement("div", { className: "vista-fade-overlay", style: __assign(__assign({ position: 'absolute', inset: 0, width: '100%', height: '100%' }, getFadeStyle()), { zIndex: 0, pointerEvents: 'none' }) })),
+        react_1.default.createElement("div", { className: "vista-container ".concat(final.containerClass || ''), style: {
                 position: 'relative',
-                overflow: 'hidden',
-                minHeight: "90vh",
-                backgroundImage: final.pattern === 'grid' ? "linear-gradient(to right, rgba(var(--borderRgb), ".concat(final.patternOpacity, ") 1px, transparent 1px),\n          linear-gradient(to bottom, rgba(var(--borderRgb), ").concat(final.patternOpacity, ") 1px, transparent 1px)") :
-                    final.pattern === 'dots' ? "radial-gradient(rgba(var(--borderRgb), ".concat(final.patternOpacity, ") 1px, transparent 1px)") :
-                        final.pattern === 'diagonal' ? "repeating-linear-gradient(45deg, rgba(var(--borderRgb), ".concat(final.patternOpacity, "), rgba(var(--borderRgb), ").concat(final.patternOpacity, ") 1px, transparent 1px, transparent 10px)") :
-                            final.pattern === 'checkerboard' ? "linear-gradient(45deg, rgba(var(--borderRgb), ".concat(final.patternOpacity, ") 25%, transparent 25%), linear-gradient(-45deg, rgba(var(--borderRgb), ").concat(final.patternOpacity, ") 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(var(--borderRgb), ").concat(final.patternOpacity, ") 75%), linear-gradient(-45deg, transparent 75%, rgba(var(--borderRgb), ").concat(final.patternOpacity, ") 75%)") :
-                                final.pattern === 'horizontal' ? "linear-gradient(to bottom, rgba(var(--borderRgb), ".concat(final.patternOpacity, ") 1px, transparent 1px)") :
-                                    final.pattern === 'vertical' ? "linear-gradient(to right, rgba(var(--borderRgb), ".concat(final.patternOpacity, ") 1px, transparent 1px)") : ''
-            } },
-            final.showGradient && react_1.default.createElement("div", { style: gradientStyle }),
-            react_1.default.createElement("div", { className: "vista-container ".concat(final.containerClass), style: { position: 'relative', zIndex: 1, gap: final.gap || "2rem" } }, isCentered || isStacked ? (react_1.default.createElement(react_1.default.Fragment, null,
-                (final.imgPosition === 'top') && ImageContent,
-                TextContent,
-                (final.imgPosition === 'bottom') && ImageContent)) : final.reverse ? (react_1.default.createElement(react_1.default.Fragment, null,
-                ImageContent,
-                TextContent)) : (react_1.default.createElement(react_1.default.Fragment, null,
-                (final.layout === 'imageLeft') && react_1.default.createElement(Col_1.default, null, ImageContent),
-                TextContent,
-                (final.layout === 'imageRight') && react_1.default.createElement(Col_1.default, null, ImageContent)))),
-            final.fade && (react_1.default.createElement("div", { style: {
-                    position: 'absolute',
-                    inset: 0,
-                    width: '100%',
-                    height: '100%',
-                    background: final.fadeRadial
-                        ? "radial-gradient(circle, transparent 0%, ".concat((0, getCssVariable_1.getCssVariableValue)(final.bg || 'page-bg'), " 100%)")
-                        : "linear-gradient(to ".concat(final.fadeDirection || 'bottom', ", ").concat((0, getCssVariable_1.getCssVariableValue)(final.bg || 'page-bg'), " 0%, transparent 100%)"),
-                    zIndex: 0,
-                    pointerEvents: 'none'
-                } })),
-            final.backgroundImage && (react_1.default.createElement("div", { style: {
-                    position: 'absolute',
-                    inset: 0,
-                    backgroundImage: "url(".concat(final.backgroundImage, ")"),
-                    backgroundSize: 'cover',
-                    backgroundPosition: 'center',
-                    zIndex: -1,
-                    width: '100%',
-                    height: '100%',
-                } })),
-            final.backgroundImage && final.fadeOverlayDarken !== undefined && (react_1.default.createElement("div", { style: {
-                    position: 'absolute',
-                    width: '100%',
-                    height: '100%',
-                    inset: 0,
-                    backgroundColor: "rgba(0, 0, 0, ".concat(final.fadeOverlayDarken, ")"),
-                    zIndex: -1,
-                } })))));
+                zIndex: 1,
+                gap: final.gap || "2rem",
+                display: 'flex',
+                flexDirection: isCentered || isStacked ? 'column' : 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: '100%',
+                maxWidth: '1200px',
+                margin: '0 auto',
+                padding: '2rem',
+            } }, isCentered || isStacked ? (react_1.default.createElement(react_1.default.Fragment, null,
+            (final.imgPosition === 'top') && react_1.default.createElement(MediaContent, null),
+            TextContent,
+            (final.imgPosition === 'bottom' || !final.imgPosition) && react_1.default.createElement(MediaContent, null))) : final.reverse ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { style: { flex: 1 } },
+                react_1.default.createElement(MediaContent, null)),
+            react_1.default.createElement("div", { style: { flex: 1 } }, TextContent))) : (react_1.default.createElement(react_1.default.Fragment, null,
+            isImageLeft && (react_1.default.createElement("div", { style: { flex: 1 } },
+                react_1.default.createElement(MediaContent, null))),
+            react_1.default.createElement("div", { style: { flex: 1 } }, TextContent),
+            isImageRight && (react_1.default.createElement("div", { style: { flex: 1 } },
+                react_1.default.createElement(MediaContent, null))))))));
 };
 exports.default = Vista;