funuicss 3.7.10 → 3.7.11

package/css/fun.css

@@ -821,31 +821,6 @@ h6, .h6 {
 }
 
 
-/* For WebKit browsers (Chrome, Edge, Brave, Safari) */
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-}
-
-::-webkit-scrollbar-track {
-  border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: var(--borderColor, #999); /* Darker thumb */
-  border-radius: 10px;
-  border: 2px solid transparent;
-  background-clip: content-box;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: var(--dark500, #666); /* Hover effect */
-}
-
-/* Optional: Hide scrollbar buttons (arrows) */
-::-webkit-scrollbar-button {
-  display: none;
-}
 
 
   
@@ -986,12 +961,6 @@ link:hover {
   line-height: 1 !important;
   height: var(--inputButtonHeight);
 }
-.button.primary{outline:1px solid var(--primary);}
-.button.primary:active{outline:1px solid var(--primary300);}
-.button.secondary{outline:1px solid var(--secondary);}
-.button.secondary:active{outline:1px solid var(--secondary300);}
-.button.accent{outline:1px solid var(--accent);}
-.button.accent:active{outline:1px solid var(--accent300);}
 
 
 /* Ripple effect */
@@ -1103,9 +1072,10 @@ link:hover {
   filter: var(--hoverable);
 }
 .button.smallBtn {
-  padding: 0.3rem 0.6rem !important;
+  padding: 0.5rem 0.6rem !important;
   font-size: var(--smallerFont) ;
   height: fit-content !important;
+  border-radius: calc(var(--radius) / 1.5);
 }
 .smallBtn.roundBtn{
   padding: 0.3rem 0.8rem !important;
@@ -1473,12 +1443,12 @@ border-radius: var(--borderRadius);
 /* Beautiful Progress Bar */
 .progress-container {
   width: 100%;
-  padding: 0 0.5rem;
 }
 
 .progress-wrapper {
   position: relative;
   width: 100%;
+
 }
 
 .video-progress {
@@ -1486,7 +1456,7 @@ border-radius: var(--borderRadius);
   appearance: none;
   width: 100%;
   padding: 0 !important;
-  height: 5px !important;
+  height: 8px !important;
   border-radius: 10px;
   background: linear-gradient(
     to right,
@@ -1499,12 +1469,11 @@ border-radius: var(--borderRadius);
   cursor: pointer;
   transition: all 0.3s ease;
   position: relative;
-}
 
-.video-progress:hover {
-  height: 8px;
 }
 
+
+
 .video-progress::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
@@ -1615,22 +1584,28 @@ border-radius: var(--borderRadius);
   transform: scale(1.1);
 }
 
-/* Time display */
-.video_time {
-  background-color: var(--raiseThemes);
-  backdrop-filter: var(--raiseBackdrop);
-  border-radius: 1rem;
-  padding: 0.5rem 1rem;
-  line-height: 1;
-  font-size: 0.875rem;
-  font-weight: 500;
-}
+
 
 /* Control buttons hover effects */
 .video_container .circle {
   transition: all 0.2s ease;
 }
 
+.videoProgressContainer,
+.videoRightContainer,
+.videoLeftContainer{
+  background-color: var(--dark);
+  height: 30px !important;
+  display: flex;
+  align-items: center !important;
+  align-content: center !important;
+  justify-content: center !important;
+  line-height: 0rem;
+  color: var(--white) !important;
+  border-radius: 0.5rem;
+  padding: 0 0.5rem;
+}
+
 .video_container .circle:hover {
   background-color: var(--primary) !important;
   color: var(--white) !important;
@@ -1657,6 +1632,7 @@ border-radius: var(--borderRadius);
   }
 }
 
+
 /* Fullscreen adjustments */
 .video_container:fullscreen {
   width: 100vw;
@@ -10732,3 +10708,45 @@ z-index: 10;
 @keyframes ping {
   75%, 100% { transform: scale(2); opacity: 0; }
 }
+
+
+
+/* Make all scrollbars thin */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--borderColor,#aaa) transparent;
+}
+
+/* Chrome / Safari / Edge */
+::-webkit-scrollbar {
+  width: 6px !important;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--borderColor,#aaa) !important;
+  border-radius: 20px !important;
+  border: 2px solid transparent !important;
+  background-clip: content-box !important;
+
+  /* <<— Force thumb to always appear shorter visually */
+  min-height: 40px !important;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--dark500,#666) !important;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent !important;
+}
+
+::-webkit-scrollbar-button {
+  display: none !important;
+}
+
+/* Make content scroll more so thumb shrinks */
+*::-webkit-scrollbar-thumb {
+  min-height: 40px !important;
+}
+
+

package/package.json

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

@@ -32,7 +32,6 @@ interface CardProps {
     gradient?: string;
     opacity?: number;
     border?: string;
-    hoverEffect?: 'none' | 'lift' | 'glow';
     heading?: ReactNode;
     headingSize?: string;
     headingWeight?: number;
@@ -67,6 +66,27 @@ interface CardProps {
     ctaPrimaryText?: string;
     ctaSecondaryText?: string;
     ctaAccentText?: string;
+    ctaPrimaryRounded?: boolean;
+    ctaPrimaryFlat?: boolean;
+    ctaPrimaryPrefix?: string;
+    ctaPrimarySuffix?: string;
+    primaryIconSize?: number;
+    primaryButtonFuncss?: string;
+    primaryButtonSmall?: boolean;
+    ctaSecondaryRounded?: boolean;
+    ctaSecondaryFlat?: boolean;
+    ctaSecondaryPrefix?: string;
+    ctaSecondarySuffix?: string;
+    secondaryIconSize?: number;
+    secondaryButtonFuncss?: string;
+    secondaryButtonSmall?: boolean;
+    ctaAccentRounded?: boolean;
+    ctaAccentFlat?: boolean;
+    ctaAccentPrefix?: string;
+    ctaAccentSuffix?: string;
+    accentIconSize?: number;
+    accentButtonFuncss?: string;
+    accentButtonSmall?: boolean;
     ctaGap?: number;
     ctaFlexJustify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around';
     ctaClass?: string;
@@ -78,5 +98,5 @@ interface CardProps {
     footerClass?: string;
     variant?: string;
 }
-export default function Card({ color, bg, width, height, minHeight, minWidth, margin, padding, funcss, children, roundEdge, maxHeight, maxWidth, horizontal, id, header, body, footer, noGap, fab, image, shadowless, flat, responsiveMedium, xl, responsiveSmall, style, pattern, patternOpacity, gradient, opacity, border, hoverEffect, heading, headingSize, headingWeight, headingColor, headingClass, headingLineHeight, subheading, subheadingSize, subheadingWeight, subheadingColor, subheadingClass, subheadingLineHeight, content, contentSize, contentWeight, contentColor, contentClass, contentLineHeight, imageUrl, imageAlt, imageClass, imageSize, showPrimaryCTA, showSecondaryCTA, showAccentCTA, primaryButtonOutlined, secondaryButtonOutlined, accentButtonOutlined, ctaPrimaryUrl, ctaSecondaryUrl, ctaAccentUrl, ctaPrimaryText, ctaSecondaryText, ctaAccentText, ctaGap, ctaFlexJustify, ctaClass, headerStyle, headerClass, bodyStyle, bodyClass, footerStyle, footerClass, variant, ...rest }: CardProps): React.JSX.Element;
+export default function Card(localProps: CardProps): React.JSX.Element;
 export {};

package/ui/card/Card.js

@@ -11,17 +11,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-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 };
 };
@@ -37,113 +26,13 @@ var Button_1 = __importDefault(require("../button/Button"));
 var Flex_1 = __importDefault(require("../flex/Flex"));
 var Text_1 = __importDefault(require("../text/Text"));
 var View_1 = __importDefault(require("../view/View"));
-function Card(_a) {
-    var 
-    // Original Props
-    color = _a.color, bg = _a.bg, width = _a.width, height = _a.height, minHeight = _a.minHeight, minWidth = _a.minWidth, margin = _a.margin, padding = _a.padding, funcss = _a.funcss, children = _a.children, roundEdge = _a.roundEdge, maxHeight = _a.maxHeight, maxWidth = _a.maxWidth, horizontal = _a.horizontal, id = _a.id, header = _a.header, body = _a.body, footer = _a.footer, noGap = _a.noGap, fab = _a.fab, image = _a.image, shadowless = _a.shadowless, flat = _a.flat, responsiveMedium = _a.responsiveMedium, xl = _a.xl, responsiveSmall = _a.responsiveSmall, style = _a.style, 
-    // Pattern Props
-    _b = _a.pattern, 
-    // Pattern Props
-    pattern = _b === void 0 ? 'none' : _b, _c = _a.patternOpacity, patternOpacity = _c === void 0 ? 0.1 : _c, gradient = _a.gradient, _d = _a.opacity, opacity = _d === void 0 ? 1 : _d, border = _a.border, _e = _a.hoverEffect, hoverEffect = _e === void 0 ? 'none' : _e, 
-    // Enhanced Content Props
-    heading = _a.heading, _f = _a.headingSize, headingSize = _f === void 0 ? 'xl' : _f, _g = _a.headingWeight, headingWeight = _g === void 0 ? 700 : _g, headingColor = _a.headingColor, headingClass = _a.headingClass, headingLineHeight = _a.headingLineHeight, subheading = _a.subheading, _h = _a.subheadingSize, subheadingSize = _h === void 0 ? 'base' : _h, _j = _a.subheadingWeight, subheadingWeight = _j === void 0 ? 400 : _j, _k = _a.subheadingColor, subheadingColor = _k === void 0 ? 'light' : _k, subheadingClass = _a.subheadingClass, subheadingLineHeight = _a.subheadingLineHeight, content = _a.content, _l = _a.contentSize, contentSize = _l === void 0 ? 'base' : _l, _m = _a.contentWeight, contentWeight = _m === void 0 ? 400 : _m, contentColor = _a.contentColor, contentClass = _a.contentClass, contentLineHeight = _a.contentLineHeight, 
-    // Image Props
-    imageUrl = _a.imageUrl, _o = _a.imageAlt, imageAlt = _o === void 0 ? '' : _o, _p = _a.imageClass, imageClass = _p === void 0 ? '' : _p, _q = _a.imageSize, imageSize = _q === void 0 ? '100%' : _q, 
-    // Enhanced Footer/CTA Props
-    _r = _a.showPrimaryCTA, 
-    // Enhanced Footer/CTA Props
-    showPrimaryCTA = _r === void 0 ? false : _r, _s = _a.showSecondaryCTA, showSecondaryCTA = _s === void 0 ? false : _s, _t = _a.showAccentCTA, showAccentCTA = _t === void 0 ? false : _t, _u = _a.primaryButtonOutlined, primaryButtonOutlined = _u === void 0 ? false : _u, _v = _a.secondaryButtonOutlined, secondaryButtonOutlined = _v === void 0 ? false : _v, _w = _a.accentButtonOutlined, accentButtonOutlined = _w === void 0 ? false : _w, _x = _a.ctaPrimaryUrl, ctaPrimaryUrl = _x === void 0 ? '' : _x, _y = _a.ctaSecondaryUrl, ctaSecondaryUrl = _y === void 0 ? '' : _y, _z = _a.ctaAccentUrl, ctaAccentUrl = _z === void 0 ? '' : _z, _0 = _a.ctaPrimaryText, ctaPrimaryText = _0 === void 0 ? 'Primary Action' : _0, _1 = _a.ctaSecondaryText, ctaSecondaryText = _1 === void 0 ? 'Secondary Action' : _1, _2 = _a.ctaAccentText, ctaAccentText = _2 === void 0 ? 'Accent Action' : _2, _3 = _a.ctaGap, ctaGap = _3 === void 0 ? 1 : _3, _4 = _a.ctaFlexJustify, ctaFlexJustify = _4 === void 0 ? 'center' : _4, _5 = _a.ctaClass, ctaClass = _5 === void 0 ? '' : _5, 
-    // Section Styling Props
-    headerStyle = _a.headerStyle, headerClass = _a.headerClass, bodyStyle = _a.bodyStyle, bodyClass = _a.bodyClass, footerStyle = _a.footerStyle, footerClass = _a.footerClass, 
-    // Configuration
-    variant = _a.variant, rest = __rest(_a, ["color", "bg", "width", "height", "minHeight", "minWidth", "margin", "padding", "funcss", "children", "roundEdge", "maxHeight", "maxWidth", "horizontal", "id", "header", "body", "footer", "noGap", "fab", "image", "shadowless", "flat", "responsiveMedium", "xl", "responsiveSmall", "style", "pattern", "patternOpacity", "gradient", "opacity", "border", "hoverEffect", "heading", "headingSize", "headingWeight", "headingColor", "headingClass", "headingLineHeight", "subheading", "subheadingSize", "subheadingWeight", "subheadingColor", "subheadingClass", "subheadingLineHeight", "content", "contentSize", "contentWeight", "contentColor", "contentClass", "contentLineHeight", "imageUrl", "imageAlt", "imageClass", "imageSize", "showPrimaryCTA", "showSecondaryCTA", "showAccentCTA", "primaryButtonOutlined", "secondaryButtonOutlined", "accentButtonOutlined", "ctaPrimaryUrl", "ctaSecondaryUrl", "ctaAccentUrl", "ctaPrimaryText", "ctaSecondaryText", "ctaAccentText", "ctaGap", "ctaFlexJustify", "ctaClass", "headerStyle", "headerClass", "bodyStyle", "bodyClass", "footerStyle", "footerClass", "variant"]);
-    // Use the component config hook
-    var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Card', variant).mergeWithLocal;
-    // Merge config with local props
-    var mergedProps = mergeWithLocal({
-        // Original props
-        color: color,
-        bg: bg,
-        width: width,
-        height: height,
-        minHeight: minHeight,
-        minWidth: minWidth,
-        margin: margin,
-        padding: padding,
-        funcss: funcss,
-        children: children,
-        roundEdge: roundEdge,
-        maxHeight: maxHeight,
-        maxWidth: maxWidth,
-        horizontal: horizontal,
-        id: id,
-        header: header,
-        body: body,
-        footer: footer,
-        noGap: noGap,
-        fab: fab,
-        image: image,
-        shadowless: shadowless,
-        flat: flat,
-        responsiveMedium: responsiveMedium,
-        xl: xl,
-        responsiveSmall: responsiveSmall,
-        style: style,
-        // Pattern props
-        pattern: pattern,
-        patternOpacity: patternOpacity,
-        gradient: gradient,
-        opacity: opacity,
-        border: border,
-        hoverEffect: hoverEffect,
-        // Enhanced content props
-        heading: heading,
-        headingSize: headingSize,
-        headingWeight: headingWeight,
-        headingColor: headingColor,
-        headingClass: headingClass,
-        headingLineHeight: headingLineHeight,
-        subheading: subheading,
-        subheadingSize: subheadingSize,
-        subheadingWeight: subheadingWeight,
-        subheadingColor: subheadingColor,
-        subheadingClass: subheadingClass,
-        subheadingLineHeight: subheadingLineHeight,
-        content: content,
-        contentSize: contentSize,
-        contentWeight: contentWeight,
-        contentColor: contentColor,
-        contentClass: contentClass,
-        contentLineHeight: contentLineHeight,
-        // Image props
-        imageUrl: imageUrl,
-        imageAlt: imageAlt,
-        imageClass: imageClass,
-        imageSize: imageSize,
-        // CTA props
-        showPrimaryCTA: showPrimaryCTA,
-        showSecondaryCTA: showSecondaryCTA,
-        showAccentCTA: showAccentCTA,
-        primaryButtonOutlined: primaryButtonOutlined,
-        secondaryButtonOutlined: secondaryButtonOutlined,
-        accentButtonOutlined: accentButtonOutlined,
-        ctaPrimaryUrl: ctaPrimaryUrl,
-        ctaSecondaryUrl: ctaSecondaryUrl,
-        ctaAccentUrl: ctaAccentUrl,
-        ctaPrimaryText: ctaPrimaryText,
-        ctaSecondaryText: ctaSecondaryText,
-        ctaAccentText: ctaAccentText,
-        ctaGap: ctaGap,
-        ctaFlexJustify: ctaFlexJustify,
-        ctaClass: ctaClass,
-        // Section styling props
-        headerStyle: headerStyle,
-        headerClass: headerClass,
-        bodyStyle: bodyStyle,
-        bodyClass: bodyClass,
-        footerStyle: footerStyle,
-        footerClass: footerClass,
-    }).props;
+function Card(localProps) {
+    // Use the component config hook with the variant from localProps
+    var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Card', 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 themeVariant = (0, theme_1.useVariant)().variant;
     // Handle content - if string, use dangerouslySetInnerHTML, otherwise render as is
     var renderContent = function (content) {
@@ -152,74 +41,74 @@ function Card(_a) {
         }
         return content;
     };
+    // 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-4 ".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 EnhancedTextContent = (react_1.default.createElement("div", { className: "card-enhanced-content" },
-        mergedProps.heading && (react_1.default.createElement(Text_1.default, { block: true, size: mergedProps.headingSize, weight: mergedProps.headingWeight, color: mergedProps.headingColor, funcss: mergedProps.headingClass, lineHeight: mergedProps.headingLineHeight }, renderContent(mergedProps.heading))),
-        mergedProps.subheading && (react_1.default.createElement(Text_1.default, { block: true, size: mergedProps.subheadingSize, weight: mergedProps.subheadingWeight, color: mergedProps.subheadingColor, funcss: "mt-1 ".concat(mergedProps.subheadingClass), lineHeight: mergedProps.subheadingLineHeight }, renderContent(mergedProps.subheading))),
-        mergedProps.content && (react_1.default.createElement(Text_1.default, { block: true, size: mergedProps.contentSize, weight: mergedProps.contentWeight, color: mergedProps.contentColor, funcss: "mt-3 ".concat(mergedProps.contentClass), lineHeight: mergedProps.contentLineHeight, article: true }, renderContent(mergedProps.content)))));
+        final.heading && (react_1.default.createElement(Text_1.default, { block: true, size: final.headingSize, weight: final.headingWeight, color: final.headingColor, funcss: final.headingClass, lineHeight: final.headingLineHeight }, renderContent(final.heading))),
+        final.subheading && (react_1.default.createElement(Text_1.default, { block: true, size: final.subheadingSize, weight: final.subheadingWeight, color: final.subheadingColor, funcss: "mt-1 ".concat(final.subheadingClass), lineHeight: final.subheadingLineHeight }, renderContent(final.subheading))),
+        final.content && (react_1.default.createElement(Text_1.default, { block: true, size: final.contentSize, weight: final.contentWeight, color: final.contentColor, funcss: "mt-3 ".concat(final.contentClass), lineHeight: final.contentLineHeight, article: true }, renderContent(final.content)))));
     // Image Content - uses imageUrl if no image component provided
-    var ImageContent = (mergedProps.image || mergedProps.imageUrl) && (react_1.default.createElement("div", { className: "card-image-content" }, mergedProps.image ? (mergedProps.image) : (mergedProps.imageUrl && (react_1.default.createElement("img", { src: mergedProps.imageUrl, alt: mergedProps.imageAlt, className: mergedProps.imageClass, style: {
-            width: mergedProps.imageSize,
+    var ImageContent = (final.image || final.imageUrl) && (react_1.default.createElement("div", { className: "card-image-content" }, final.image ? (final.image) : (final.imageUrl && (react_1.default.createElement("img", { src: final.imageUrl, alt: final.imageAlt, className: final.imageClass, style: {
+            width: final.imageSize,
             height: 'auto',
             objectFit: 'cover',
             borderRadius: 'inherit'
         } })))));
-    // CTA Buttons Component
-    var CTAButtons = function () {
-        var hasCTAs = mergedProps.showPrimaryCTA || mergedProps.showSecondaryCTA || mergedProps.showAccentCTA;
-        if (!hasCTAs)
-            return null;
-        return (react_1.default.createElement(Flex_1.default, { gap: mergedProps.ctaGap, justify: mergedProps.ctaFlexJustify, className: "mt-4 ".concat(mergedProps.ctaClass), wrap: "wrap", width: '100%' },
-            mergedProps.showPrimaryCTA && (react_1.default.createElement(Button_1.default, { bg: "primary", outlined: mergedProps.primaryButtonOutlined, onClick: function () { return mergedProps.ctaPrimaryUrl && (window.location.href = mergedProps.ctaPrimaryUrl); } }, mergedProps.ctaPrimaryText)),
-            mergedProps.showSecondaryCTA && (react_1.default.createElement(Button_1.default, { bg: "secondary", outlined: mergedProps.secondaryButtonOutlined, onClick: function () { return mergedProps.ctaSecondaryUrl && (window.location.href = mergedProps.ctaSecondaryUrl); } }, mergedProps.ctaSecondaryText)),
-            mergedProps.showAccentCTA && (react_1.default.createElement(Button_1.default, { bg: "accent", outlined: mergedProps.accentButtonOutlined, onClick: function () { return mergedProps.ctaAccentUrl && (window.location.href = mergedProps.ctaAccentUrl); } }, mergedProps.ctaAccentText))));
-    };
     // Determine if we should use enhanced content
-    var hasEnhancedContent = mergedProps.heading || mergedProps.subheading || mergedProps.content;
-    var hasEnhancedFooter = mergedProps.showPrimaryCTA || mergedProps.showSecondaryCTA || mergedProps.showAccentCTA;
-    var hasImageContent = mergedProps.image || mergedProps.imageUrl;
-    return (react_1.default.createElement("div", __assign({ id: mergedProps.id || '', className: "\n        card \n        card_flex\n        ".concat(!image && !imageUrl ? "p" : "", "\n        ").concat(mergedProps.noGap ? 'no-gap' : '', " \n        ").concat(mergedProps.xl ? 'xl' : '', " \n        text-").concat(mergedProps.color || '', " \n        ").concat(mergedProps.bg || '', " \n        ").concat(mergedProps.funcss || '', " \n        ").concat(mergedProps.roundEdge ? 'round-edge' : '', " \n        ").concat(mergedProps.shadowless ? 'shadowless' : '', " \n        ").concat(mergedProps.flat ? 'flat' : '', " \n        ").concat(mergedProps.horizontal ? 'horizontalCard' : '', "\n        ").concat(mergedProps.responsiveMedium ? 'responsiveMedium' : '', "\n        ").concat(mergedProps.responsiveSmall ? 'responsiveSmall' : '', "\n        ").concat(mergedProps.pattern !== 'none' ? "pattern-".concat(mergedProps.pattern) : '', "\n        ").concat(mergedProps.hoverEffect !== 'none' ? "hover-".concat(mergedProps.hoverEffect) : '', "\n        ").concat(themeVariant === "standard" ? "border" : "", "\n      "), style: __assign({ width: "".concat(mergedProps.width || ''), height: "".concat(mergedProps.height || ''), minHeight: "".concat(mergedProps.minHeight || ''), minWidth: "".concat(mergedProps.minWidth || ''), maxHeight: mergedProps.maxHeight || '', maxWidth: mergedProps.maxWidth || '', margin: "".concat(mergedProps.margin || ''), padding: "".concat(mergedProps.padding || ''), background: mergedProps.gradient, opacity: mergedProps.opacity, border: mergedProps.border, position: 'relative', overflow: 'hidden' }, mergedProps.style) }, rest),
-        mergedProps.pattern !== 'none' && (react_1.default.createElement("div", { className: "card-pattern-overlay", style: {
+    var hasEnhancedContent = final.heading || final.subheading || final.content;
+    var hasEnhancedFooter = final.showPrimaryCTA || final.showSecondaryCTA || final.showAccentCTA;
+    var hasImageContent = final.image || final.imageUrl;
+    return (react_1.default.createElement("div", { id: final.id || '', className: "\n        card \n        card_flex\n        ".concat(!final.image && !final.imageUrl ? "p" : "", "\n        ").concat(final.noGap ? 'no-gap' : '', " \n        ").concat(final.xl ? 'xl' : '', " \n        text-").concat(final.color || '', " \n        ").concat(final.bg || '', " \n        ").concat(final.funcss || '', " \n        ").concat(final.roundEdge ? 'round-edge' : '', " \n        ").concat(final.shadowless ? 'shadowless' : '', " \n        ").concat(final.flat ? 'flat' : '', " \n        ").concat(final.horizontal ? 'horizontalCard' : '', "\n        ").concat(final.responsiveMedium ? 'responsiveMedium' : '', "\n        ").concat(final.responsiveSmall ? 'responsiveSmall' : '', "\n        ").concat(final.pattern !== 'none' ? "pattern-".concat(final.pattern) : '', "\n      "), style: __assign({ width: "".concat(final.width || ''), height: "".concat(final.height || ''), minHeight: "".concat(final.minHeight || ''), minWidth: "".concat(final.minWidth || ''), maxHeight: final.maxHeight || '', maxWidth: final.maxWidth || '', margin: "".concat(final.margin || ''), padding: "".concat(final.padding || ''), background: final.gradient, opacity: final.opacity, position: 'relative', overflow: 'hidden' }, final.style) },
+        final.pattern !== 'none' && (react_1.default.createElement("div", { className: "card-pattern-overlay", style: {
                 position: 'absolute',
                 top: 0,
                 left: 0,
                 right: 0,
                 bottom: 0,
                 pointerEvents: 'none',
-                opacity: mergedProps.patternOpacity,
+                opacity: final.patternOpacity,
                 mixBlendMode: 'multiply',
-                backgroundImage: mergedProps.pattern === 'grid' ?
+                backgroundImage: final.pattern === 'grid' ?
                     "linear-gradient(to right, rgba(var(--borderRgb), 1) 1px, transparent 1px),\n                 linear-gradient(to bottom, rgba(var(--borderRgb), 1) 1px, transparent 1px)" :
-                    mergedProps.pattern === 'dots' ?
+                    final.pattern === 'dots' ?
                         "radial-gradient(rgba(var(--borderRgb), 1) 1px, transparent 1px)" :
-                        mergedProps.pattern === 'diagonal' ?
+                        final.pattern === 'diagonal' ?
                             "repeating-linear-gradient(45deg, rgba(var(--borderRgb), 1), rgba(var(--borderRgb), 1) 1px, transparent 1px, transparent 10px)" :
-                            mergedProps.pattern === 'checkerboard' ?
+                            final.pattern === 'checkerboard' ?
                                 "linear-gradient(45deg, rgba(var(--borderRgb), 1) 25%, transparent 25%), \n                 linear-gradient(-45deg, rgba(var(--borderRgb), 1) 25%, transparent 25%), \n                 linear-gradient(45deg, transparent 75%, rgba(var(--borderRgb), 1) 75%), \n                 linear-gradient(-45deg, transparent 75%, rgba(var(--borderRgb), 1) 75%)" :
-                                mergedProps.pattern === 'horizontal' ?
+                                final.pattern === 'horizontal' ?
                                     "linear-gradient(to bottom, rgba(var(--borderRgb), 1) 1px, transparent 1px)" :
-                                    mergedProps.pattern === 'vertical' ?
+                                    final.pattern === 'vertical' ?
                                         "linear-gradient(to right, rgba(var(--borderRgb), 1) 1px, transparent 1px)" : 'none',
-                backgroundSize: mergedProps.pattern === 'grid' ? '20px 20px' :
-                    mergedProps.pattern === 'dots' ? '10px 10px' :
-                        mergedProps.pattern === 'diagonal' ? '20px 20px' :
-                            mergedProps.pattern === 'checkerboard' ? '20px 20px' :
-                                mergedProps.pattern === 'horizontal' ? '100% 10px' :
-                                    mergedProps.pattern === 'vertical' ? '10px 100%' : 'auto'
+                backgroundSize: final.pattern === 'grid' ? '20px 20px' :
+                    final.pattern === 'dots' ? '10px 10px' :
+                        final.pattern === 'diagonal' ? '20px 20px' :
+                            final.pattern === 'checkerboard' ? '20px 20px' :
+                                final.pattern === 'horizontal' ? '100% 10px' :
+                                    final.pattern === 'vertical' ? '10px 100%' : 'auto'
             } })),
-        hasImageContent ? (ImageContent) : (mergedProps.image ? react_1.default.createElement("div", { className: "".concat(mergedProps.fab ? 'relative' : '') },
-            mergedProps.image,
+        hasImageContent ? (ImageContent) : (final.image ? react_1.default.createElement("div", { className: "".concat(final.fab ? 'relative' : '') },
+            final.image,
             " ",
-            mergedProps.fab ? mergedProps.fab : '') : ''),
+            final.fab ? final.fab : '') : ''),
         react_1.default.createElement(View_1.default, { funcss: hasImageContent ? 'p' : '' },
-            hasEnhancedContent ? (react_1.default.createElement(CardHeader_1.default, { style: mergedProps.headerStyle, className: mergedProps.headerClass }, EnhancedTextContent)) : (mergedProps.header && !mergedProps.horizontal ? (react_1.default.createElement(CardHeader_1.default, { style: mergedProps.headerStyle, className: mergedProps.headerClass }, renderContent(mergedProps.header))) : ''),
-            mergedProps.body ?
+            hasEnhancedContent ? (react_1.default.createElement(CardHeader_1.default, { style: final.headerStyle, className: final.headerClass }, EnhancedTextContent)) : (final.header && !final.horizontal ? (react_1.default.createElement(CardHeader_1.default, { style: final.headerStyle, className: final.headerClass }, renderContent(final.header))) : ''),
+            final.body ?
                 react_1.default.createElement("div", null,
-                    mergedProps.horizontal && !hasEnhancedContent ? (react_1.default.createElement(CardHeader_1.default, { style: mergedProps.headerStyle, className: mergedProps.headerClass }, renderContent(mergedProps.header))) : '',
-                    react_1.default.createElement(CardBody_1.default, { style: mergedProps.bodyStyle, className: mergedProps.bodyClass }, hasEnhancedContent ? EnhancedTextContent : renderContent(mergedProps.body)),
-                    mergedProps.horizontal && !hasEnhancedFooter ? (react_1.default.createElement(CardFooter_1.default, { style: mergedProps.footerStyle, className: mergedProps.footerClass }, renderContent(mergedProps.footer))) : '')
+                    final.horizontal && !hasEnhancedContent ? (react_1.default.createElement(CardHeader_1.default, { style: final.headerStyle, className: final.headerClass }, renderContent(final.header))) : '',
+                    react_1.default.createElement(CardBody_1.default, { style: final.bodyStyle, className: final.bodyClass }, hasEnhancedContent ? EnhancedTextContent : renderContent(final.body)),
+                    final.horizontal && !hasEnhancedFooter ? (react_1.default.createElement(CardFooter_1.default, { style: final.footerStyle, className: final.footerClass }, renderContent(final.footer))) : '')
                 : '',
-            mergedProps.children && (react_1.default.createElement(CardBody_1.default, { style: mergedProps.bodyStyle, className: mergedProps.bodyClass }, renderContent(mergedProps.children))),
-            hasEnhancedFooter ? (react_1.default.createElement(CardFooter_1.default, { style: mergedProps.footerStyle, className: mergedProps.footerClass },
-                react_1.default.createElement(CTAButtons, null))) : (mergedProps.footer && !mergedProps.horizontal ? (react_1.default.createElement(CardFooter_1.default, { style: mergedProps.footerStyle, className: mergedProps.footerClass }, renderContent(mergedProps.footer))) : ''))));
+            final.children && (react_1.default.createElement(CardBody_1.default, { style: final.bodyStyle, className: final.bodyClass }, renderContent(final.children))),
+            hasEnhancedFooter ? (react_1.default.createElement(CardFooter_1.default, { style: final.footerStyle, className: final.footerClass },
+                react_1.default.createElement(CTAButtons, null))) : (final.footer && !final.horizontal ? (react_1.default.createElement(CardFooter_1.default, { style: final.footerStyle, className: final.footerClass }, renderContent(final.footer))) : ''))));
 }

package/ui/video/Video.d.ts

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

package/ui/video/Video.js

@@ -102,7 +102,6 @@ var tfi_1 = require("react-icons/tfi");
 var Text_1 = __importDefault(require("../text/Text"));
 var RowFlex_1 = __importDefault(require("../specials/RowFlex"));
 var ToolTip_1 = __importDefault(require("../tooltip/ToolTip"));
-var Circle_1 = __importDefault(require("../specials/Circle"));
 var Tip_1 = __importDefault(require("../tooltip/Tip"));
 var videoFunctions_1 = require("./videoFunctions");
 var videoShortcuts_1 = require("./videoShortcuts");
@@ -110,7 +109,6 @@ 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: {
@@ -121,8 +119,8 @@ var useComponentConfiguration = function (componentName, variant) {
                     showVolume: true,
                     showTime: true,
                     showFullscreen: true,
-                    showDownload: true,
-                    showSeekButtons: true,
+                    showDownload: false,
+                    showSeekButtons: false,
                     spacebarPlay: true,
                     autoPlay: false,
                     loop: false,
@@ -144,18 +142,20 @@ var useComponentConfiguration = function (componentName, variant) {
                     rewindCss: '',
                     forwardCss: '',
                     buttonCss: '',
+                    volumeStyle: 'slider', // 'slider' | 'compact' | 'hover'
                 },
                 minimal: {
                     showControls: true,
                     showPlayPause: true,
                     showProgress: true,
                     showVolume: false,
-                    showTime: false,
-                    showFullscreen: false,
+                    showTime: true,
+                    showFullscreen: true,
                     showDownload: false,
                     showSeekButtons: false,
                     controlsCss: 'minimal-controls',
                     buttonCss: 'minimal-btn',
+                    volumeStyle: 'hover',
                 },
                 embedded: {
                     showControls: false,
@@ -175,6 +175,7 @@ var useComponentConfiguration = function (componentName, variant) {
                     showSeekButtons: true,
                     controlsCss: 'full-featured-controls',
                     buttonCss: 'featured-btn',
+                    volumeStyle: 'slider',
                 },
                 theater: {
                     showControls: true,
@@ -182,6 +183,21 @@ var useComponentConfiguration = function (componentName, variant) {
                     videoCss: 'theater-video',
                     controlsCss: 'theater-controls',
                     fullscreenCss: 'theater-fullscreen',
+                    volumeStyle: 'slider',
+                },
+                youtube: {
+                    showControls: true,
+                    showPlayPause: true,
+                    showProgress: true,
+                    showVolume: true,
+                    showTime: true,
+                    showFullscreen: true,
+                    showDownload: false,
+                    showSeekButtons: false,
+                    controlsCss: 'youtube-controls',
+                    buttonCss: 'youtube-btn',
+                    volumeStyle: 'hover',
+                    hideControlsDelay: 2000,
                 }
             }
         };
@@ -191,7 +207,6 @@ var useComponentConfiguration = function (componentName, variant) {
         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,
@@ -206,11 +221,11 @@ 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;
-    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 _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 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);
+    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);
     // Merge with config - LOCAL PROPS OVERRIDE CONFIG
     var mergedProps = mergeWithLocal(localProps).props;
     // Extract final values - local props take precedence
@@ -229,8 +244,8 @@ function Video(_a) {
         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,
+        showDownload: (_l = mergedProps.showDownload) !== null && _l !== void 0 ? _l : false,
+        showSeekButtons: (_m = mergedProps.showSeekButtons) !== null && _m !== void 0 ? _m : false,
         playIcon: mergedProps.playIcon,
         pauseIcon: mergedProps.pauseIcon,
         fullscreenIcon: mergedProps.fullscreenIcon,
@@ -258,29 +273,31 @@ function Video(_a) {
         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 : '',
+        volumeStyle: (_7 = mergedProps.volumeStyle) !== null && _7 !== void 0 ? _7 : 'slider',
     };
     var videoRef = (0, react_1.useRef)(null);
     var containerRef = (0, react_1.useRef)(null);
     var animationFrameRef = (0, react_1.useRef)(null);
-    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];
+    var _26 = (0, react_1.useState)(false), isPlaying = _26[0], setIsPlaying = _26[1];
+    var _27 = (0, react_1.useState)(0), currentTime = _27[0], setCurrentTime = _27[1];
+    var _28 = (0, react_1.useState)(0), duration = _28[0], setDuration = _28[1];
+    var _29 = (0, react_1.useState)(final.muted ? 0 : 1), volume = _29[0], setVolume = _29[1];
+    var _30 = (0, react_1.useState)(final.muted), isMuted = _30[0], setIsMuted = _30[1];
+    var _31 = (0, react_1.useState)(false), isFullScreen = _31[0], setIsFullScreen = _31[1];
+    var _32 = (0, react_1.useState)(false), showControlsState = _32[0], setShowControlsState = _32[1];
+    var _33 = (0, react_1.useState)(false), hasStarted = _33[0], setHasStarted = _33[1];
+    var _34 = (0, react_1.useState)(false), isHoveringProgress = _34[0], setIsHoveringProgress = _34[1];
+    var _35 = (0, react_1.useState)(false), isHoveringVolume = _35[0], setIsHoveringVolume = _35[1];
+    var _36 = (0, react_1.useState)(false), showVolumeSlider = _36[0], setShowVolumeSlider = _36[1];
     // Dynamic icon states
-    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];
+    var _37 = (0, react_1.useState)(null), dynamicPlayIcon = _37[0], setDynamicPlayIcon = _37[1];
+    var _38 = (0, react_1.useState)(null), dynamicPauseIcon = _38[0], setDynamicPauseIcon = _38[1];
+    var _39 = (0, react_1.useState)(null), dynamicFullscreenIcon = _39[0], setDynamicFullscreenIcon = _39[1];
+    var _40 = (0, react_1.useState)(null), dynamicDownloadIcon = _40[0], setDynamicDownloadIcon = _40[1];
+    var _41 = (0, react_1.useState)(null), dynamicVolumeIcon = _41[0], setDynamicVolumeIcon = _41[1];
+    var _42 = (0, react_1.useState)(null), dynamicMuteIcon = _42[0], setDynamicMuteIcon = _42[1];
+    var _43 = (0, react_1.useState)(null), dynamicRewindIcon = _43[0], setDynamicRewindIcon = _43[1];
+    var _44 = (0, react_1.useState)(null), dynamicForwardIcon = _44[0], setDynamicForwardIcon = _44[1];
     // Helper function to load dynamic icons
     var loadDynamicIcon = function (iconProp, setter, defaultIcon) { return __awaiter(_this, void 0, void 0, function () {
         var iconNode;
@@ -298,27 +315,26 @@ function Video(_a) {
                     setter(iconNode || defaultIcon);
                     return [3 /*break*/, 3];
                 case 2:
-                    // It's already a ReactNode - use it directly
                     setter(iconProp);
                     _a.label = 3;
                 case 3: return [2 /*return*/];
             }
         });
     }); };
-    // Load all dynamic icons on component mount and when icon props change
+    // Load all dynamic icons
     (0, react_1.useEffect)(function () {
         var loadIcons = function () { return __awaiter(_this, void 0, void 0, function () {
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0: return [4 /*yield*/, Promise.all([
-                            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 })),
+                            loadDynamicIcon(final.playIcon, setDynamicPlayIcon, react_1.default.createElement(pi_1.PiPlay, { size: 20 })),
+                            loadDynamicIcon(final.pauseIcon, setDynamicPauseIcon, react_1.default.createElement(pi_1.PiPause, { size: 20 })),
+                            loadDynamicIcon(final.fullscreenIcon, setDynamicFullscreenIcon, react_1.default.createElement(pi_1.PiCornersOut, { size: 18 })),
+                            loadDynamicIcon(final.downloadIcon, setDynamicDownloadIcon, react_1.default.createElement(tfi_1.TfiDownload, { size: 16 })),
+                            loadDynamicIcon(final.volumeIcon, setDynamicVolumeIcon, react_1.default.createElement(pi_1.PiSpeakerHigh, { size: 18 })),
+                            loadDynamicIcon(final.muteIcon, setDynamicMuteIcon, react_1.default.createElement(pi_1.PiSpeakerSlash, { size: 18 })),
+                            loadDynamicIcon(final.rewindIcon, setDynamicRewindIcon, react_1.default.createElement(tfi_1.TfiControlBackward, { size: 16 })),
+                            loadDynamicIcon(final.forwardIcon, setDynamicForwardIcon, react_1.default.createElement(tfi_1.TfiControlForward, { size: 16 })),
                         ])];
                     case 1:
                         _a.sent();
@@ -331,12 +347,11 @@ function Video(_a) {
         final.playIcon, final.pauseIcon, final.fullscreenIcon, final.downloadIcon,
         final.volumeIcon, final.muteIcon, final.rewindIcon, final.forwardIcon
     ]);
-    // Helper function to render icon with proper size
+    // Helper function to render icon
     var renderIcon = function (icon, defaultSize) {
         if (defaultSize === void 0) { defaultSize = 16; }
         if (!icon)
             return null;
-        // If it's a React element, clone it with the size prop
         if (react_1.default.isValidElement(icon)) {
             return react_1.default.cloneElement(icon, {
                 size: icon.props.size || defaultSize
@@ -375,19 +390,15 @@ function Video(_a) {
         var rect = container.getBoundingClientRect();
         var clickX = e.clientX - rect.left;
         var width = rect.width;
-        // Divide video into three areas
         var leftArea = width * 0.3;
         var rightArea = width * 0.7;
         if (clickX < leftArea) {
-            // Left area - rewind
             handleSeek(-final.seekAmount);
         }
         else if (clickX > rightArea) {
-            // Right area - forward
             handleSeek(final.seekAmount);
         }
         else {
-            // Middle area - play/pause
             handlePlayPauseToggle();
         }
     };
@@ -473,7 +484,7 @@ function Video(_a) {
     var handleVideoEnd = function () {
         var _a;
         setIsPlaying(false);
-        (_a = final.onEnded) === null || _a === void 0 ? void 0 : _a.call(final); // Call the onEnded callback
+        (_a = final.onEnded) === null || _a === void 0 ? void 0 : _a.call(final);
         if (final.loop && videoRef.current) {
             videoRef.current.currentTime = 0;
             playVideo();
@@ -511,10 +522,14 @@ function Video(_a) {
         var show = function () {
             setShowControlsState(true);
             clearTimeout(timer);
-            timer = setTimeout(function () { return setShowControlsState(false); }, final.hideControlsDelay);
+            timer = setTimeout(function () {
+                setShowControlsState(false);
+                setShowVolumeSlider(false);
+            }, final.hideControlsDelay);
         };
         var hide = function () {
             setShowControlsState(false);
+            setShowVolumeSlider(false);
         };
         var container = containerRef.current;
         if (container && final.showControls) {
@@ -543,50 +558,80 @@ function Video(_a) {
                 cancelAnimationFrame(animationFrameRef.current);
         };
     }, [isPlaying, updateCurrentTime]);
-    // Beautiful Progress Bar Component
-    var ProgressBar = function () { return (react_1.default.createElement("div", { className: "progress-container mb-4" },
+    // Get volume icon based on volume level
+    var getVolumeIcon = function () {
+        if (isMuted || volume === 0) {
+            return renderIcon(dynamicMuteIcon, 18);
+        }
+        else if (volume < 0.5) {
+            return react_1.default.createElement(pi_1.PiSpeakerNone, { size: 18 });
+        }
+        else {
+            return renderIcon(dynamicVolumeIcon, 18);
+        }
+    };
+    // Simple Progress Bar Component (YouTube style)
+    var ProgressBar = function () { return (react_1.default.createElement("div", { className: "progress-container" },
         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(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(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" })),
-        react_1.default.createElement("div", { className: "volume-slider-wrapper", onMouseEnter: function () { return setIsHoveringVolume(true); }, onMouseLeave: function () { return setIsHoveringVolume(false); } },
-            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, "%"),
-                } })))); };
+    // Volume Control Component with different styles
+    var VolumeControl = function () {
+        if (final.volumeStyle === 'hover') {
+            return (react_1.default.createElement("div", { className: "volume-control-wrapper relative" },
+                react_1.default.createElement(ToolTip_1.default, null,
+                    react_1.default.createElement("div", { onClick: handleToggleMute, onMouseEnter: function () { return setShowVolumeSlider(true); }, className: "volume-toggle ".concat(final.buttonCss, " ").concat(final.volumeCss, " pointer") }, getVolumeIcon()),
+                    react_1.default.createElement(Tip_1.default, { tip: "top", content: isMuted ? "Unmute" : "Mute" })),
+                showVolumeSlider && (react_1.default.createElement("div", { className: "volume-slider-wrapper absolute bottom-full left-0 mb-2 p-2 bg-black bg-opacity-80 rounded-lg backdrop-blur-sm", onMouseEnter: function () { return setShowVolumeSlider(true); }, onMouseLeave: function () { return setShowVolumeSlider(false); } },
+                    react_1.default.createElement("input", { type: "range", min: 0, max: 1, step: 0.01, value: volume, onChange: handleVolumeChange, className: "volume-slider vertical", style: {
+                            '--volume-percent': "".concat(volume * 100, "%"),
+                        } })))));
+        }
+        if (final.volumeStyle === 'compact') {
+            return (react_1.default.createElement("div", { className: "volume-control-wrapper" },
+                react_1.default.createElement(ToolTip_1.default, null,
+                    react_1.default.createElement("div", { onClick: handleToggleMute, className: "volume-toggle ".concat(final.buttonCss, " ").concat(final.volumeCss, " pointer") }, getVolumeIcon()),
+                    react_1.default.createElement(Tip_1.default, { tip: "top", content: isMuted ? "Unmute" : "Mute" }))));
+        }
+        // Default slider style
+        return (react_1.default.createElement("div", { className: "volume-control-wrapper" },
+            react_1.default.createElement(ToolTip_1.default, null,
+                react_1.default.createElement("div", { onClick: handleToggleMute, className: "volume-toggle ".concat(final.buttonCss, " ").concat(final.volumeCss, " pointer") }, getVolumeIcon()),
+                react_1.default.createElement(Tip_1.default, { tip: "top", content: isMuted ? "Unmute" : "Mute" })),
+            react_1.default.createElement("div", { className: "volume-slider-wrapper" },
+                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(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" },
+                react_1.default.createElement(RowFlex_1.default, { gap: 0.5, alignItems: "center", funcss: 'videoLeftContainer' },
                     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("div", { onClick: handlePlayPauseToggle, className: "".concat(final.buttonCss, " ").concat(isPlaying ? final.pauseCss : final.playCss, " pointer") }, isPlaying
+                            ? renderIcon(dynamicPauseIcon, 20)
+                            : renderIcon(dynamicPlayIcon, 20)),
                         react_1.default.createElement(Tip_1.default, { tip: "top", content: isPlaying ? "Pause" : "Play" }))),
                     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(final.buttonCss, " ").concat(final.rewindCss) }, renderIcon(dynamicRewindIcon, 14)),
+                            react_1.default.createElement("div", { onClick: handleRewind, className: "".concat(final.buttonCss, " ").concat(final.rewindCss, " pointer") }, renderIcon(dynamicRewindIcon, 16)),
                             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(final.buttonCss, " ").concat(final.forwardCss) }, renderIcon(dynamicForwardIcon, 14)),
+                            react_1.default.createElement("div", { onClick: handleForward, className: "".concat(final.buttonCss, " ").concat(final.forwardCss, " pointer") }, renderIcon(dynamicForwardIcon, 16)),
                             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 },
+                        react_1.default.createElement(Text_1.default, { text: "".concat((0, videoFunctions_1.formatTime)(currentTime), " / ").concat((0, videoFunctions_1.formatTime)(duration)), size: "xs" })))),
+                react_1.default.createElement("div", { className: "col w-full " },
+                    react_1.default.createElement("div", { className: 'videoProgressContainer' }, final.showProgress && react_1.default.createElement(ProgressBar, null))),
+                react_1.default.createElement(RowFlex_1.default, { gap: 0.3, funcss: 'videoRightContainer' },
                     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("div", { onClick: handleToggleFullScreen, className: "".concat(final.buttonCss, " ").concat(final.fullscreenCss, " pointer") }, renderIcon(dynamicFullscreenIcon, 18)),
                         react_1.default.createElement(Tip_1.default, { tip: "top", content: "Fullscreen" }))),
                     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("div", { onClick: function () { return window.open(final.src, '_blank'); }, className: "".concat(final.buttonCss, " ").concat(final.downloadCss, " pointer") }, renderIcon(dynamicDownloadIcon, 16)),
                         react_1.default.createElement(Tip_1.default, { tip: "top", content: "Download" })))))))));
 }

package/ui/vista/Vista.d.ts

@@ -66,16 +66,22 @@ type VistaProps = {
     ctaPrimaryPrefix?: string;
     ctaPrimarySuffix?: string;
     primaryIconSize?: number;
+    primaryButtonFuncss?: string;
+    primaryButtonSmall?: boolean;
     ctaSecondaryRounded?: boolean;
     ctaSecondaryFlat?: boolean;
     ctaSecondaryPrefix?: string;
     ctaSecondarySuffix?: string;
     secondaryIconSize?: number;
+    secondaryButtonFuncss?: string;
+    secondaryButtonSmall?: boolean;
     ctaAccentRounded?: boolean;
     ctaAccentFlat?: boolean;
     ctaAccentPrefix?: string;
     ctaAccentSuffix?: string;
     accentIconSize?: number;
+    accentButtonFuncss?: string;
+    accentButtonSmall?: boolean;
     ctaGap?: number;
     ctaFlexJustify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around';
 };

package/ui/vista/Vista.js

@@ -30,11 +30,6 @@ var Vista = function (localProps) {
     var mergedProps = mergeWithLocal(localProps).props;
     // Use mergedProps directly - they already have the correct merge logic applied
     var final = mergedProps;
-    // Debug: Log what props are actually coming through
-    react_1.default.useEffect(function () {
-        console.log('Vista merged props:', mergedProps);
-        console.log('Vista config available:', Object.keys(mergedProps).length > 0);
-    }, [mergedProps]);
     var layoutClass = [
         final.layout,
         final.reverse ? 'reverse' : '',
@@ -48,9 +43,9 @@ var Vista = function (localProps) {
         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%' },
-            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 }, 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 }, 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 }, final.ctaAccentText))));
+            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) },