funuicss 3.7.9 → 3.7.10

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.7.9",
+  "version": "3.7.10",
   "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/theme/theme.d.ts

@@ -30,7 +30,7 @@ interface ProjectData {
 }
 interface ThemeProviderProps {
     theme: ThemeName;
-    projectId: string;
+    projectId?: string;
     funcss?: string;
     minHeight?: string;
     children: ReactNode;

package/ui/theme/theme.js

@@ -117,7 +117,7 @@ var validateOriginAccess = function (projectId) { return __awaiter(void 0, void
         switch (_a.label) {
             case 0:
                 if (!projectId) {
-                    console.error('❌ No project ID provided');
+                    console.error('❌ No project ID provided for origin validation');
                     return [2 /*return*/, false];
                 }
                 currentOrigin = getCurrentOrigin();
@@ -179,7 +179,7 @@ var loadLocalTheme = function () { return __awaiter(void 0, void 0, void 0, func
             case 3: return [3 /*break*/, 5];
             case 4:
                 error_2 = _a.sent();
-                console.log('No local theme file found');
+                console.log('ℹ️ No local theme file found');
                 return [3 /*break*/, 5];
             case 5: return [2 /*return*/, null];
         }
@@ -193,28 +193,34 @@ var loadThemeFromCDN = function (projectId) { return __awaiter(void 0, void 0, v
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
-                _a.trys.push([0, 5, , 6]);
+                if (!projectId) {
+                    console.error('❌ No project ID provided for CDN loading');
+                    return [2 /*return*/, null];
+                }
+                _a.label = 1;
+            case 1:
+                _a.trys.push([1, 6, , 7]);
                 publicUrl = "https://firebasestorage.googleapis.com/v0/b/funui-4bcd1.firebasestorage.app/o/themes%2F".concat(projectId, ".json?alt=media");
                 return [4 /*yield*/, fetch(publicUrl, {
                         cache: 'no-cache',
                     })];
-            case 1:
+            case 2:
                 response = _a.sent();
-                if (!response.ok) return [3 /*break*/, 3];
+                if (!response.ok) return [3 /*break*/, 4];
                 return [4 /*yield*/, response.json()];
-            case 2:
+            case 3:
                 data = _a.sent();
                 console.log('✅ Loaded theme from Firebase Storage CDN');
                 return [2 /*return*/, data];
-            case 3:
-                console.error('Firebase Storage fetch failed:', response.status, response.statusText);
-                _a.label = 4;
-            case 4: return [3 /*break*/, 6];
-            case 5:
+            case 4:
+                console.error('❌ Firebase Storage fetch failed:', response.status, response.statusText);
+                _a.label = 5;
+            case 5: return [3 /*break*/, 7];
+            case 6:
                 error_3 = _a.sent();
-                console.error('Error loading from Firebase Storage:', error_3);
-                return [3 /*break*/, 6];
-            case 6: return [2 /*return*/, null];
+                console.error('❌ Error loading from Firebase Storage:', error_3);
+                return [3 /*break*/, 7];
+            case 7: return [2 /*return*/, null];
         }
     });
 }); };
@@ -306,99 +312,124 @@ var ThemeProvider = function (_a) {
             });
         }
     }, [theme]);
-    /* ---------------------- CDN Theme Sync with Origin Validation ----------------------- */
+    /* ---------------------- Theme Loading Logic ----------------------- */
     (0, react_1.useEffect)(function () {
         if (typeof window === 'undefined') {
             setIsLoading(false);
             setIsInitialLoad(false);
             return;
         }
-        if (!projectId) {
-            console.error('❌ ThemeProvider: No projectId provided');
-            setError('Project ID is required');
-            setIsLoading(false);
-            setIsInitialLoad(false);
-            return;
-        }
         var root = document.documentElement;
         var pollTimer;
-        var syncTheme = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var hasAccess, localTheme, localVersion, cdnTheme, cdnVersion, err_1;
+        var loadTheme = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var finalTheme, finalVersion, localTheme, localVersion, hasAccess, cdnTheme, cdnVersion, err_1;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        _a.trys.push([0, 4, 5, 6]);
-                        console.log('🔄 Starting theme sync with origin validation...');
-                        return [4 /*yield*/, validateOriginAccess(projectId)];
-                    case 1:
-                        hasAccess = _a.sent();
-                        if (!hasAccess) {
-                            setError('Access denied: This domain is not authorized to use this theme');
-                            setIsLoading(false);
-                            setIsInitialLoad(false);
-                            return [2 /*return*/];
-                        }
+                        _a.trys.push([0, 8, 9, 10]);
+                        console.log('🔄 Starting theme loading process...');
+                        finalTheme = null;
+                        finalVersion = null;
                         return [4 /*yield*/, loadLocalTheme()];
-                    case 2:
+                    case 1:
                         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();
+                        if (!hasAccess) return [3 /*break*/, 4];
                         return [4 /*yield*/, loadThemeFromCDN(projectId)];
                     case 3:
                         cdnTheme = _a.sent();
                         cdnVersion = (cdnTheme === null || cdnTheme === void 0 ? void 0 : cdnTheme.version) || 0;
                         if (cdnTheme) {
-                            // Compare versions and use the newer one
+                            // CDN theme available - use it
+                            finalTheme = cdnTheme;
+                            finalVersion = cdnVersion;
                             if (cdnVersion !== localVersion) {
                                 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.');
                             }
-                            // Always use CDN theme if available
-                            if (!currentVersion || cdnVersion !== currentVersion) {
-                                applyThemeData(cdnTheme, root);
-                                setCurrentVersion(cdnVersion);
-                                console.log('✅ Theme loaded from CDN');
-                            }
-                            else {
-                                console.log('✓ Theme up to date');
-                            }
-                            setError(null);
+                            console.log('✅ Theme loaded from CDN');
                         }
                         else if (localTheme) {
-                            // CDN not available but we have local
-                            console.log('⚠️ Using local theme (CDN unavailable)');
-                            applyThemeData(localTheme, root);
-                            setCurrentVersion(localVersion);
-                            setError(null);
+                            // CDN not available but we have local theme
+                            console.log('⚠️ CDN unavailable, using local theme');
+                            finalTheme = localTheme;
+                            finalVersion = localVersion;
                         }
                         else {
                             // No theme available anywhere
-                            console.warn('⚠️ No theme found');
+                            console.warn('⚠️ No theme found (CDN unavailable and no local theme)');
                             setError('Theme not found');
                         }
-                        return [3 /*break*/, 6];
+                        return [3 /*break*/, 5];
                     case 4:
+                        // Origin validation failed
+                        if (localTheme) {
+                            console.log('⚠️ Origin validation failed, using local theme');
+                            finalTheme = localTheme;
+                            finalVersion = localVersion;
+                        }
+                        else {
+                            console.error('❌ Origin validation failed and no local theme available');
+                            setError('Access denied and no local theme available');
+                        }
+                        _a.label = 5;
+                    case 5: return [3 /*break*/, 7];
+                    case 6:
+                        // No project ID provided - only use local theme
+                        console.log('ℹ️ No project ID provided, using local theme only');
+                        if (localTheme) {
+                            finalTheme = localTheme;
+                            finalVersion = localVersion;
+                            console.log('✅ Theme loaded from local file');
+                        }
+                        else {
+                            console.log('ℹ️ No local theme file found - using base theme only');
+                            // No error here - it's valid to use only base theme
+                        }
+                        _a.label = 7;
+                    case 7:
+                        // Apply the theme if we have one
+                        if (finalTheme && (!currentVersion || finalVersion !== currentVersion)) {
+                            applyThemeData(finalTheme, root);
+                            setCurrentVersion(finalVersion);
+                            setError(null);
+                        }
+                        else if (finalTheme) {
+                            console.log('✓ Theme up to date');
+                        }
+                        return [3 /*break*/, 10];
+                    case 8:
                         err_1 = _a.sent();
-                        console.error('❌ Error syncing theme:', err_1);
-                        setError('Failed to sync theme');
-                        return [3 /*break*/, 6];
-                    case 5:
+                        console.error('❌ Error loading theme:', err_1);
+                        setError('Failed to load theme');
+                        return [3 /*break*/, 10];
+                    case 9:
                         setIsLoading(false);
                         setIsInitialLoad(false);
                         return [7 /*endfinally*/];
-                    case 6: return [2 /*return*/];
+                    case 10: return [2 /*return*/];
                 }
             });
         }); };
-        // Initial sync
-        syncTheme();
-        // Poll for updates every 5 minutes
-        pollTimer = setInterval(function () {
-            syncTheme();
-        }, 5 * 60 * 1000);
+        // Initial load
+        loadTheme();
+        // Only poll for updates if we have a project ID
+        if (projectId) {
+            pollTimer = setInterval(function () {
+                loadTheme();
+            }, 5 * 60 * 1000);
+        }
         return function () {
-            clearInterval(pollTimer);
+            if (pollTimer) {
+                clearInterval(pollTimer);
+            }
         };
-    }, [projectId, currentVersion]);
+    }, [projectId, currentVersion, theme]);
     var applyThemeData = function (data, root) {
         var _a;
         var themeConfig = (_a = data.theme_config) !== null && _a !== void 0 ? _a : {};
@@ -531,9 +562,6 @@ var getAssetInfo = function (name) {
     };
 };
 exports.getAssetInfo = getAssetInfo;
-/* -------------------------------------------------------------------------- */
-/*                              ASSETS HOOKS                                  */
-/* -------------------------------------------------------------------------- */
 // Hook to access all assets
 var useAssets = function () {
     var projectData = (0, exports.useTheme)().projectData;

package/ui/video/Video.d.ts

@@ -43,6 +43,7 @@ interface VideoProps {
     rewindCss?: string;
     forwardCss?: string;
     buttonCss?: string;
+    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, }: 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, variant, ...rest }: VideoProps): React.JSX.Element;
 export {};

package/ui/video/Video.js

@@ -1,5 +1,16 @@
 "use strict";
 'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    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);
@@ -69,6 +80,17 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -85,31 +107,180 @@ var Tip_1 = __importDefault(require("../tooltip/Tip"));
 var videoFunctions_1 = require("./videoFunctions");
 var videoShortcuts_1 = require("./videoShortcuts");
 var getDynamicIcon_1 = require("../../utils/getDynamicIcon");
+// Configuration hook
+var useComponentConfiguration = function (componentName, variant) {
+    if (variant === void 0) { variant = ''; }
+    // In a real implementation, this would come from a theme context or configuration file
+    var getComponentConfig = function () {
+        var baseConfig = {
+            Video: {
+                default: {
+                    showControls: true,
+                    showPlayPause: true,
+                    showProgress: true,
+                    showVolume: true,
+                    showTime: true,
+                    showFullscreen: true,
+                    showDownload: true,
+                    showSeekButtons: true,
+                    spacebarPlay: true,
+                    autoPlay: false,
+                    loop: false,
+                    muted: false,
+                    seekAmount: 10,
+                    hideControlsDelay: 3000,
+                    funcss: '',
+                    containerCss: '',
+                    videoCss: '',
+                    controlsCss: '',
+                    progressCss: '',
+                    progressBarCss: '',
+                    timeCss: '',
+                    playCss: '',
+                    pauseCss: '',
+                    volumeCss: '',
+                    fullscreenCss: '',
+                    downloadCss: '',
+                    rewindCss: '',
+                    forwardCss: '',
+                    buttonCss: '',
+                },
+                minimal: {
+                    showControls: true,
+                    showPlayPause: true,
+                    showProgress: true,
+                    showVolume: false,
+                    showTime: false,
+                    showFullscreen: false,
+                    showDownload: false,
+                    showSeekButtons: false,
+                    controlsCss: 'minimal-controls',
+                    buttonCss: 'minimal-btn',
+                },
+                embedded: {
+                    showControls: false,
+                    autoPlay: true,
+                    muted: true,
+                    loop: true,
+                    containerCss: 'embedded-video',
+                },
+                fullFeatured: {
+                    showControls: true,
+                    showPlayPause: true,
+                    showProgress: true,
+                    showVolume: true,
+                    showTime: true,
+                    showFullscreen: true,
+                    showDownload: true,
+                    showSeekButtons: true,
+                    controlsCss: 'full-featured-controls',
+                    buttonCss: 'featured-btn',
+                },
+                theater: {
+                    showControls: true,
+                    containerCss: 'theater-mode',
+                    videoCss: 'theater-video',
+                    controlsCss: 'theater-controls',
+                    fullscreenCss: 'theater-fullscreen',
+                }
+            }
+        };
+        return baseConfig[componentName] || {};
+    };
+    var mergeWithLocal = function (localProps) {
+        var config = getComponentConfig();
+        var variantConfig = variant && config[variant] ? config[variant] : {};
+        var defaultConfig = config.default || {};
+        // Merge: default config < variant config < local props (local props have highest priority)
+        var mergedProps = __assign(__assign(__assign({}, defaultConfig), variantConfig), localProps);
+        return {
+            props: mergedProps,
+            variantConfig: variantConfig,
+            defaultConfig: defaultConfig,
+        };
+    };
+    return {
+        mergeWithLocal: mergeWithLocal,
+        getComponentConfig: getComponentConfig,
+    };
+};
 function Video(_a) {
     var _this = this;
-    var src = _a.src, poster = _a.poster, onDuration = _a.onDuration, onEnded = _a.onEnded, isPause = _a.isPause, _b = _a.spacebarPlay, spacebarPlay = _b === void 0 ? true : _b, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.autoPlay, autoPlay = _d === void 0 ? false : _d, _e = _a.showControls, showControls = _e === void 0 ? true : _e, _f = _a.showPlayPause, showPlayPause = _f === void 0 ? true : _f, _g = _a.showProgress, showProgress = _g === void 0 ? true : _g, _h = _a.showVolume, showVolume = _h === void 0 ? true : _h, _j = _a.showTime, showTime = _j === void 0 ? true : _j, _k = _a.showFullscreen, showFullscreen = _k === void 0 ? true : _k, _l = _a.showDownload, showDownload = _l === void 0 ? true : _l, _m = _a.showSeekButtons, showSeekButtons = _m === void 0 ? true : _m, playIcon = _a.playIcon, pauseIcon = _a.pauseIcon, fullscreenIcon = _a.fullscreenIcon, downloadIcon = _a.downloadIcon, volumeIcon = _a.volumeIcon, muteIcon = _a.muteIcon, rewindIcon = _a.rewindIcon, forwardIcon = _a.forwardIcon, _o = _a.hideControlsDelay, hideControlsDelay = _o === void 0 ? 3000 : _o, _p = _a.loop, loop = _p === void 0 ? false : _p, _q = _a.muted, muted = _q === void 0 ? false : _q, _r = _a.seekAmount, seekAmount = _r === void 0 ? 10 : _r, _s = _a.funcss, funcss = _s === void 0 ? '' : _s, _t = _a.containerCss, containerCss = _t === void 0 ? '' : _t, _u = _a.videoCss, videoCss = _u === void 0 ? '' : _u, _v = _a.controlsCss, controlsCss = _v === void 0 ? '' : _v, _w = _a.progressCss, progressCss = _w === void 0 ? '' : _w, _x = _a.progressBarCss, progressBarCss = _x === void 0 ? '' : _x, _y = _a.timeCss, timeCss = _y === void 0 ? '' : _y, _z = _a.playCss, playCss = _z === void 0 ? '' : _z, _0 = _a.pauseCss, pauseCss = _0 === void 0 ? '' : _0, _1 = _a.volumeCss, volumeCss = _1 === void 0 ? '' : _1, _2 = _a.fullscreenCss, fullscreenCss = _2 === void 0 ? '' : _2, _3 = _a.downloadCss, downloadCss = _3 === void 0 ? '' : _3, _4 = _a.rewindCss, rewindCss = _4 === void 0 ? '' : _4, _5 = _a.forwardCss, forwardCss = _5 === void 0 ? '' : _5, _6 = _a.buttonCss, buttonCss = _6 === void 0 ? '' : _6;
+    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;
+    var src = _a.src, poster = _a.poster, onDuration = _a.onDuration, onEnded = _a.onEnded, isPause = _a.isPause, spacebarPlay = _a.spacebarPlay, _7 = _a.className, className = _7 === void 0 ? '' : _7, 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, _8 = _a.funcss, funcss = _8 === void 0 ? '' : _8, _9 = _a.containerCss, containerCss = _9 === void 0 ? '' : _9, _10 = _a.videoCss, videoCss = _10 === void 0 ? '' : _10, _11 = _a.controlsCss, controlsCss = _11 === void 0 ? '' : _11, _12 = _a.progressCss, progressCss = _12 === void 0 ? '' : _12, _13 = _a.progressBarCss, progressBarCss = _13 === void 0 ? '' : _13, _14 = _a.timeCss, timeCss = _14 === void 0 ? '' : _14, _15 = _a.playCss, playCss = _15 === void 0 ? '' : _15, _16 = _a.pauseCss, pauseCss = _16 === void 0 ? '' : _16, _17 = _a.volumeCss, volumeCss = _17 === void 0 ? '' : _17, _18 = _a.fullscreenCss, fullscreenCss = _18 === void 0 ? '' : _18, _19 = _a.downloadCss, downloadCss = _19 === void 0 ? '' : _19, _20 = _a.rewindCss, rewindCss = _20 === void 0 ? '' : _20, _21 = _a.forwardCss, forwardCss = _21 === void 0 ? '' : _21, _22 = _a.buttonCss, buttonCss = _22 === void 0 ? '' : _22, _23 = _a.variant, variant = _23 === void 0 ? '' : _23, 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", "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 }, rest);
+    // Merge with config - LOCAL PROPS OVERRIDE CONFIG
+    var mergedProps = mergeWithLocal(localProps).props;
+    // Extract final values - local props take precedence
+    var final = {
+        src: mergedProps.src,
+        poster: mergedProps.poster,
+        onDuration: mergedProps.onDuration,
+        onEnded: mergedProps.onEnded,
+        isPause: mergedProps.isPause,
+        spacebarPlay: (_b = mergedProps.spacebarPlay) !== null && _b !== void 0 ? _b : true,
+        className: (_c = mergedProps.className) !== null && _c !== void 0 ? _c : '',
+        autoPlay: (_d = mergedProps.autoPlay) !== null && _d !== void 0 ? _d : false,
+        showControls: (_e = mergedProps.showControls) !== null && _e !== void 0 ? _e : true,
+        showPlayPause: (_f = mergedProps.showPlayPause) !== null && _f !== void 0 ? _f : true,
+        showProgress: (_g = mergedProps.showProgress) !== null && _g !== void 0 ? _g : true,
+        showVolume: (_h = mergedProps.showVolume) !== null && _h !== void 0 ? _h : true,
+        showTime: (_j = mergedProps.showTime) !== null && _j !== void 0 ? _j : true,
+        showFullscreen: (_k = mergedProps.showFullscreen) !== null && _k !== void 0 ? _k : true,
+        showDownload: (_l = mergedProps.showDownload) !== null && _l !== void 0 ? _l : true,
+        showSeekButtons: (_m = mergedProps.showSeekButtons) !== null && _m !== void 0 ? _m : true,
+        playIcon: mergedProps.playIcon,
+        pauseIcon: mergedProps.pauseIcon,
+        fullscreenIcon: mergedProps.fullscreenIcon,
+        downloadIcon: mergedProps.downloadIcon,
+        volumeIcon: mergedProps.volumeIcon,
+        muteIcon: mergedProps.muteIcon,
+        rewindIcon: mergedProps.rewindIcon,
+        forwardIcon: mergedProps.forwardIcon,
+        hideControlsDelay: (_o = mergedProps.hideControlsDelay) !== null && _o !== void 0 ? _o : 3000,
+        loop: (_p = mergedProps.loop) !== null && _p !== void 0 ? _p : false,
+        muted: (_q = mergedProps.muted) !== null && _q !== void 0 ? _q : false,
+        seekAmount: (_r = mergedProps.seekAmount) !== null && _r !== void 0 ? _r : 10,
+        funcss: (_s = mergedProps.funcss) !== null && _s !== void 0 ? _s : '',
+        containerCss: (_t = mergedProps.containerCss) !== null && _t !== void 0 ? _t : '',
+        videoCss: (_u = mergedProps.videoCss) !== null && _u !== void 0 ? _u : '',
+        controlsCss: (_v = mergedProps.controlsCss) !== null && _v !== void 0 ? _v : '',
+        progressCss: (_w = mergedProps.progressCss) !== null && _w !== void 0 ? _w : '',
+        progressBarCss: (_x = mergedProps.progressBarCss) !== null && _x !== void 0 ? _x : '',
+        timeCss: (_y = mergedProps.timeCss) !== null && _y !== void 0 ? _y : '',
+        playCss: (_z = mergedProps.playCss) !== null && _z !== void 0 ? _z : '',
+        pauseCss: (_0 = mergedProps.pauseCss) !== null && _0 !== void 0 ? _0 : '',
+        volumeCss: (_1 = mergedProps.volumeCss) !== null && _1 !== void 0 ? _1 : '',
+        fullscreenCss: (_2 = mergedProps.fullscreenCss) !== null && _2 !== void 0 ? _2 : '',
+        downloadCss: (_3 = mergedProps.downloadCss) !== null && _3 !== void 0 ? _3 : '',
+        rewindCss: (_4 = mergedProps.rewindCss) !== null && _4 !== void 0 ? _4 : '',
+        forwardCss: (_5 = mergedProps.forwardCss) !== null && _5 !== void 0 ? _5 : '',
+        buttonCss: (_6 = mergedProps.buttonCss) !== null && _6 !== void 0 ? _6 : '',
+    };
     var videoRef = (0, react_1.useRef)(null);
     var containerRef = (0, react_1.useRef)(null);
     var animationFrameRef = (0, react_1.useRef)(null);
-    var _7 = (0, react_1.useState)(false), isPlaying = _7[0], setIsPlaying = _7[1];
-    var _8 = (0, react_1.useState)(0), currentTime = _8[0], setCurrentTime = _8[1];
-    var _9 = (0, react_1.useState)(0), duration = _9[0], setDuration = _9[1];
-    var _10 = (0, react_1.useState)(muted ? 0 : 1), volume = _10[0], setVolume = _10[1];
-    var _11 = (0, react_1.useState)(muted), isMuted = _11[0], setIsMuted = _11[1];
-    var _12 = (0, react_1.useState)(false), isFullScreen = _12[0], setIsFullScreen = _12[1];
-    var _13 = (0, react_1.useState)(false), showControlsState = _13[0], setShowControlsState = _13[1];
-    var _14 = (0, react_1.useState)(false), hasStarted = _14[0], setHasStarted = _14[1];
-    var _15 = (0, react_1.useState)(false), isHoveringProgress = _15[0], setIsHoveringProgress = _15[1];
-    var _16 = (0, react_1.useState)(false), isHoveringVolume = _16[0], setIsHoveringVolume = _16[1];
+    var _24 = (0, react_1.useState)(false), isPlaying = _24[0], setIsPlaying = _24[1];
+    var _25 = (0, react_1.useState)(0), currentTime = _25[0], setCurrentTime = _25[1];
+    var _26 = (0, react_1.useState)(0), duration = _26[0], setDuration = _26[1];
+    var _27 = (0, react_1.useState)(final.muted ? 0 : 1), volume = _27[0], setVolume = _27[1];
+    var _28 = (0, react_1.useState)(final.muted), isMuted = _28[0], setIsMuted = _28[1];
+    var _29 = (0, react_1.useState)(false), isFullScreen = _29[0], setIsFullScreen = _29[1];
+    var _30 = (0, react_1.useState)(false), showControlsState = _30[0], setShowControlsState = _30[1];
+    var _31 = (0, react_1.useState)(false), hasStarted = _31[0], setHasStarted = _31[1];
+    var _32 = (0, react_1.useState)(false), isHoveringProgress = _32[0], setIsHoveringProgress = _32[1];
+    var _33 = (0, react_1.useState)(false), isHoveringVolume = _33[0], setIsHoveringVolume = _33[1];
     // Dynamic icon states
-    var _17 = (0, react_1.useState)(null), dynamicPlayIcon = _17[0], setDynamicPlayIcon = _17[1];
-    var _18 = (0, react_1.useState)(null), dynamicPauseIcon = _18[0], setDynamicPauseIcon = _18[1];
-    var _19 = (0, react_1.useState)(null), dynamicFullscreenIcon = _19[0], setDynamicFullscreenIcon = _19[1];
-    var _20 = (0, react_1.useState)(null), dynamicDownloadIcon = _20[0], setDynamicDownloadIcon = _20[1];
-    var _21 = (0, react_1.useState)(null), dynamicVolumeIcon = _21[0], setDynamicVolumeIcon = _21[1];
-    var _22 = (0, react_1.useState)(null), dynamicMuteIcon = _22[0], setDynamicMuteIcon = _22[1];
-    var _23 = (0, react_1.useState)(null), dynamicRewindIcon = _23[0], setDynamicRewindIcon = _23[1];
-    var _24 = (0, react_1.useState)(null), dynamicForwardIcon = _24[0], setDynamicForwardIcon = _24[1];
+    var _34 = (0, react_1.useState)(null), dynamicPlayIcon = _34[0], setDynamicPlayIcon = _34[1];
+    var _35 = (0, react_1.useState)(null), dynamicPauseIcon = _35[0], setDynamicPauseIcon = _35[1];
+    var _36 = (0, react_1.useState)(null), dynamicFullscreenIcon = _36[0], setDynamicFullscreenIcon = _36[1];
+    var _37 = (0, react_1.useState)(null), dynamicDownloadIcon = _37[0], setDynamicDownloadIcon = _37[1];
+    var _38 = (0, react_1.useState)(null), dynamicVolumeIcon = _38[0], setDynamicVolumeIcon = _38[1];
+    var _39 = (0, react_1.useState)(null), dynamicMuteIcon = _39[0], setDynamicMuteIcon = _39[1];
+    var _40 = (0, react_1.useState)(null), dynamicRewindIcon = _40[0], setDynamicRewindIcon = _40[1];
+    var _41 = (0, react_1.useState)(null), dynamicForwardIcon = _41[0], setDynamicForwardIcon = _41[1];
     // Helper function to load dynamic icons
     var loadDynamicIcon = function (iconProp, setter, defaultIcon) { return __awaiter(_this, void 0, void 0, function () {
         var iconNode;
@@ -140,14 +311,14 @@ function Video(_a) {
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0: return [4 /*yield*/, Promise.all([
-                            loadDynamicIcon(playIcon, setDynamicPlayIcon, react_1.default.createElement(pi_1.PiPlay, { size: 16 })),
-                            loadDynamicIcon(pauseIcon, setDynamicPauseIcon, react_1.default.createElement(pi_1.PiPause, { size: 16 })),
-                            loadDynamicIcon(fullscreenIcon, setDynamicFullscreenIcon, react_1.default.createElement(pi_1.PiCornersOut, { size: 16 })),
-                            loadDynamicIcon(downloadIcon, setDynamicDownloadIcon, react_1.default.createElement(tfi_1.TfiDownload, { size: 14 })),
-                            loadDynamicIcon(volumeIcon, setDynamicVolumeIcon, react_1.default.createElement(pi_1.PiSpeakerHigh, { size: 16 })),
-                            loadDynamicIcon(muteIcon, setDynamicMuteIcon, react_1.default.createElement(pi_1.PiSpeakerSlash, { size: 16 })),
-                            loadDynamicIcon(rewindIcon, setDynamicRewindIcon, react_1.default.createElement(tfi_1.TfiControlBackward, { size: 14 })),
-                            loadDynamicIcon(forwardIcon, setDynamicForwardIcon, react_1.default.createElement(tfi_1.TfiControlForward, { size: 14 })),
+                            loadDynamicIcon(final.playIcon, setDynamicPlayIcon, react_1.default.createElement(pi_1.PiPlay, { size: 16 })),
+                            loadDynamicIcon(final.pauseIcon, setDynamicPauseIcon, react_1.default.createElement(pi_1.PiPause, { size: 16 })),
+                            loadDynamicIcon(final.fullscreenIcon, setDynamicFullscreenIcon, react_1.default.createElement(pi_1.PiCornersOut, { size: 16 })),
+                            loadDynamicIcon(final.downloadIcon, setDynamicDownloadIcon, react_1.default.createElement(tfi_1.TfiDownload, { size: 14 })),
+                            loadDynamicIcon(final.volumeIcon, setDynamicVolumeIcon, react_1.default.createElement(pi_1.PiSpeakerHigh, { size: 16 })),
+                            loadDynamicIcon(final.muteIcon, setDynamicMuteIcon, react_1.default.createElement(pi_1.PiSpeakerSlash, { size: 16 })),
+                            loadDynamicIcon(final.rewindIcon, setDynamicRewindIcon, react_1.default.createElement(tfi_1.TfiControlBackward, { size: 14 })),
+                            loadDynamicIcon(final.forwardIcon, setDynamicForwardIcon, react_1.default.createElement(tfi_1.TfiControlForward, { size: 14 })),
                         ])];
                     case 1:
                         _a.sent();
@@ -157,8 +328,8 @@ function Video(_a) {
         }); };
         loadIcons();
     }, [
-        playIcon, pauseIcon, fullscreenIcon, downloadIcon,
-        volumeIcon, muteIcon, rewindIcon, forwardIcon
+        final.playIcon, final.pauseIcon, final.fullscreenIcon, final.downloadIcon,
+        final.volumeIcon, final.muteIcon, final.rewindIcon, final.forwardIcon
     ]);
     // Helper function to render icon with proper size
     var renderIcon = function (icon, defaultSize) {
@@ -209,11 +380,11 @@ function Video(_a) {
         var rightArea = width * 0.7;
         if (clickX < leftArea) {
             // Left area - rewind
-            handleSeek(-seekAmount);
+            handleSeek(-final.seekAmount);
         }
         else if (clickX > rightArea) {
             // Right area - forward
-            handleSeek(seekAmount);
+            handleSeek(final.seekAmount);
         }
         else {
             // Middle area - play/pause
@@ -227,8 +398,8 @@ function Video(_a) {
             video.currentTime = Math.max(0, Math.min(video.currentTime + seconds, duration));
         }
     };
-    var handleRewind = function () { return handleSeek(-seekAmount); };
-    var handleForward = function () { return handleSeek(seekAmount); };
+    var handleRewind = function () { return handleSeek(-final.seekAmount); };
+    var handleForward = function () { return handleSeek(final.seekAmount); };
     // Fullscreen functionality
     var handleToggleFullScreen = function () {
         var _a, _b;
@@ -285,11 +456,12 @@ function Video(_a) {
     }, []);
     // Event handlers
     var handleLoadedMetadata = function () {
+        var _a;
         var video = videoRef.current;
         if (video) {
             setDuration(video.duration || 0);
-            onDuration === null || onDuration === void 0 ? void 0 : onDuration(video.duration);
-            if (autoPlay) {
+            (_a = final.onDuration) === null || _a === void 0 ? void 0 : _a.call(final, video.duration);
+            if (final.autoPlay) {
                 video.muted = true;
                 video.play().then(function () {
                     setIsPlaying(true);
@@ -299,9 +471,10 @@ function Video(_a) {
         }
     };
     var handleVideoEnd = function () {
+        var _a;
         setIsPlaying(false);
-        onEnded === null || onEnded === void 0 ? void 0 : onEnded(); // Call the onEnded callback
-        if (loop && videoRef.current) {
+        (_a = final.onEnded) === null || _a === void 0 ? void 0 : _a.call(final); // Call the onEnded callback
+        if (final.loop && videoRef.current) {
             videoRef.current.currentTime = 0;
             playVideo();
         }
@@ -309,22 +482,22 @@ function Video(_a) {
     // Effects
     (0, react_1.useEffect)(function () {
         var handleKey = function (e) {
-            return (0, videoShortcuts_1.handleKeyDown)(e, isPlaying, playVideo, pauseVideo, spacebarPlay);
+            return (0, videoShortcuts_1.handleKeyDown)(e, isPlaying, playVideo, pauseVideo, final.spacebarPlay);
         };
         document.addEventListener('keydown', handleKey);
         return function () { return document.removeEventListener('keydown', handleKey); };
-    }, [isPlaying, spacebarPlay]);
+    }, [isPlaying, final.spacebarPlay]);
     (0, react_1.useEffect)(function () {
         var video = videoRef.current;
         if (!video)
             return;
         video.addEventListener('ended', handleVideoEnd);
         return function () { return video.removeEventListener('ended', handleVideoEnd); };
-    }, [loop, onEnded]);
+    }, [final.loop, final.onEnded]);
     (0, react_1.useEffect)(function () {
-        if (isPause)
+        if (final.isPause)
             pauseVideo();
-    }, [isPause]);
+    }, [final.isPause]);
     (0, react_1.useEffect)(function () {
         var handleFullscreenChange = function () {
             setIsFullScreen(!!document.fullscreenElement);
@@ -338,13 +511,13 @@ function Video(_a) {
         var show = function () {
             setShowControlsState(true);
             clearTimeout(timer);
-            timer = setTimeout(function () { return setShowControlsState(false); }, hideControlsDelay);
+            timer = setTimeout(function () { return setShowControlsState(false); }, final.hideControlsDelay);
         };
         var hide = function () {
             setShowControlsState(false);
         };
         var container = containerRef.current;
-        if (container && showControls) {
+        if (container && final.showControls) {
             container.addEventListener('mouseenter', show);
             container.addEventListener('mouseleave', hide);
             container.addEventListener('mousemove', show);
@@ -357,7 +530,7 @@ function Video(_a) {
             }
             clearTimeout(timer);
         };
-    }, [showControls, hideControlsDelay]);
+    }, [final.showControls, final.hideControlsDelay]);
     (0, react_1.useEffect)(function () {
         if (isPlaying) {
             animationFrameRef.current = requestAnimationFrame(updateCurrentTime);
@@ -373,13 +546,13 @@ function Video(_a) {
     // Beautiful Progress Bar Component
     var ProgressBar = function () { return (react_1.default.createElement("div", { className: "progress-container mb-4" },
         react_1.default.createElement("div", { className: "progress-wrapper" },
-            react_1.default.createElement("input", { type: "range", min: 0, max: duration, value: currentTime, onChange: handleProgressChange, className: "video-progress ".concat(progressCss), style: {
+            react_1.default.createElement("input", { type: "range", min: 0, max: duration, value: currentTime, onChange: handleProgressChange, className: "video-progress ".concat(final.progressCss), style: {
                     '--progress-percent': "".concat((currentTime / duration) * 100, "%"),
                 }, onMouseEnter: function () { return setIsHoveringProgress(true); }, onMouseLeave: function () { return setIsHoveringProgress(false); } })))); };
     // Beautiful Volume Control Component
     var VolumeControl = function () { return (react_1.default.createElement("div", { className: "volume-control-wrapper" },
         react_1.default.createElement(ToolTip_1.default, null,
-            react_1.default.createElement(Circle_1.default, { bordered: true, size: 2.5, onClick: handleToggleMute, className: "volume-toggle ".concat(buttonCss, " ").concat(volumeCss) }, isMuted || volume === 0
+            react_1.default.createElement(Circle_1.default, { bordered: true, size: 2.5, onClick: handleToggleMute, className: "volume-toggle ".concat(final.buttonCss, " ").concat(final.volumeCss) }, isMuted || volume === 0
                 ? renderIcon(dynamicMuteIcon, 16)
                 : renderIcon(dynamicVolumeIcon, 16)),
             react_1.default.createElement(Tip_1.default, { tip: "top", content: isMuted ? "Unmute" : "Mute" })),
@@ -387,33 +560,33 @@ function Video(_a) {
             react_1.default.createElement("input", { type: "range", min: 0, max: 1, step: 0.01, value: volume, onChange: handleVolumeChange, className: "volume-slider", style: {
                     '--volume-percent': "".concat(volume * 100, "%"),
                 } })))); };
-    return (react_1.default.createElement("div", { ref: containerRef, className: "video_container fit ".concat(funcss, " ").concat(containerCss, " ").concat(className), onClick: handleVideoClick },
-        poster && !hasStarted && !isPlaying && (react_1.default.createElement("div", { style: { backgroundImage: "url(".concat(poster, ")") }, className: "video_poster" })),
-        react_1.default.createElement("video", { ref: videoRef, preload: "auto", src: src, className: "video_player fit min-w-200 ".concat(videoCss), onLoadedMetadata: handleLoadedMetadata, playsInline: true, controls: false, loop: loop, muted: muted }),
-        showControls && (react_1.default.createElement("div", { className: "video_controls ".concat(controlsCss, " ").concat(showControlsState ? 'show_controls' : 'hide_controls') },
-            showProgress && react_1.default.createElement(ProgressBar, null),
+    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 }),
+        final.showControls && (react_1.default.createElement("div", { className: "video_controls ".concat(final.controlsCss, " ").concat(showControlsState ? 'show_controls' : 'hide_controls') },
+            final.showProgress && react_1.default.createElement(ProgressBar, null),
             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" },
-                    showPlayPause && (react_1.default.createElement(ToolTip_1.default, null,
-                        react_1.default.createElement(Circle_1.default, { bordered: true, size: 2.5, onClick: handlePlayPauseToggle, className: "".concat(buttonCss, " ").concat(isPlaying ? pauseCss : playCss) }, isPlaying
+                    final.showPlayPause && (react_1.default.createElement(ToolTip_1.default, null,
+                        react_1.default.createElement(Circle_1.default, { bordered: true, size: 2.5, onClick: handlePlayPauseToggle, className: "".concat(final.buttonCss, " ").concat(isPlaying ? final.pauseCss : final.playCss) }, isPlaying
                             ? renderIcon(dynamicPauseIcon, 16)
                             : renderIcon(dynamicPlayIcon, 16)),
                         react_1.default.createElement(Tip_1.default, { tip: "top", content: isPlaying ? "Pause" : "Play" }))),
-                    showSeekButtons && (react_1.default.createElement(react_1.default.Fragment, null,
+                    final.showSeekButtons && (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(ToolTip_1.default, null,
-                            react_1.default.createElement(Circle_1.default, { bordered: true, size: 2.5, onClick: handleRewind, className: "".concat(buttonCss, " ").concat(rewindCss) }, renderIcon(dynamicRewindIcon, 14)),
-                            react_1.default.createElement(Tip_1.default, { tip: "top", content: "".concat(seekAmount, "s Back") })),
+                            react_1.default.createElement(Circle_1.default, { bordered: true, size: 2.5, onClick: handleRewind, className: "".concat(final.buttonCss, " ").concat(final.rewindCss) }, renderIcon(dynamicRewindIcon, 14)),
+                            react_1.default.createElement(Tip_1.default, { tip: "top", content: "".concat(final.seekAmount, "s Back") })),
                         react_1.default.createElement(ToolTip_1.default, null,
-                            react_1.default.createElement(Circle_1.default, { bordered: true, size: 2.5, onClick: handleForward, className: "".concat(buttonCss, " ").concat(forwardCss) }, renderIcon(dynamicForwardIcon, 14)),
-                            react_1.default.createElement(Tip_1.default, { tip: "top", content: "".concat(seekAmount, "s Forward") })))),
-                    showVolume && react_1.default.createElement(VolumeControl, null),
-                    showTime && (react_1.default.createElement("div", { className: "video_time ".concat(timeCss) },
+                            react_1.default.createElement(Circle_1.default, { bordered: true, size: 2.5, onClick: handleForward, className: "".concat(final.buttonCss, " ").concat(final.forwardCss) }, renderIcon(dynamicForwardIcon, 14)),
+                            react_1.default.createElement(Tip_1.default, { tip: "top", content: "".concat(final.seekAmount, "s Forward") })))),
+                    final.showVolume && react_1.default.createElement(VolumeControl, null),
+                    final.showTime && (react_1.default.createElement("div", { className: "video_time ".concat(final.timeCss) },
                         react_1.default.createElement(Text_1.default, { text: "".concat((0, videoFunctions_1.formatTime)(currentTime), " / ").concat((0, videoFunctions_1.formatTime)(duration)), funcss: 'm-0', size: "sm" })))),
                 react_1.default.createElement(RowFlex_1.default, { gap: 0.3 },
-                    showFullscreen && (react_1.default.createElement(ToolTip_1.default, null,
-                        react_1.default.createElement(Circle_1.default, { bordered: true, size: 2.5, onClick: handleToggleFullScreen, className: "".concat(buttonCss, " ").concat(fullscreenCss) }, renderIcon(dynamicFullscreenIcon, 16)),
+                    final.showFullscreen && (react_1.default.createElement(ToolTip_1.default, null,
+                        react_1.default.createElement(Circle_1.default, { bordered: true, size: 2.5, onClick: handleToggleFullScreen, className: "".concat(final.buttonCss, " ").concat(final.fullscreenCss) }, renderIcon(dynamicFullscreenIcon, 16)),
                         react_1.default.createElement(Tip_1.default, { tip: "top", content: "Fullscreen" }))),
-                    showDownload && (react_1.default.createElement(ToolTip_1.default, null,
-                        react_1.default.createElement(Circle_1.default, { bordered: true, size: 2.5, onClick: function () { return window.open(src, '_blank'); }, className: "".concat(buttonCss, " ").concat(downloadCss) }, renderIcon(dynamicDownloadIcon, 14)),
+                    final.showDownload && (react_1.default.createElement(ToolTip_1.default, null,
+                        react_1.default.createElement(Circle_1.default, { bordered: true, size: 2.5, onClick: function () { return window.open(final.src, '_blank'); }, className: "".concat(final.buttonCss, " ").concat(final.downloadCss) }, renderIcon(dynamicDownloadIcon, 14)),
                         react_1.default.createElement(Tip_1.default, { tip: "top", content: "Download" })))))))));
 }