funuicss 2.7.16 → 3.0.1

package/ui/button/Button.js

@@ -75,7 +75,7 @@ function Button(_a) {
     }
     var classNames = [
         'button',
-        "text-".concat(bg ? color ? color : !hasNumber(bg) && !outlined ? "white" : hasNumberAbove(bg) && !outlined ? "white" : removeNumbers(bg) : color),
+        "text-".concat(bg ? color ? color : !hasNumber(bg) && !outlined ? "" : hasNumberAbove(bg) && !outlined ? "white" : removeNumbers(bg) : color),
         funcss || '',
         rounded ? 'roundBtn' : '',
         hoverless ? 'hoverless' : '',

package/ui/flex/Flex.d.ts

@@ -17,8 +17,8 @@ interface FlexProps {
     responsiveSmall?: boolean;
     responsiveMedium?: boolean;
     responsiveLarge?: boolean;
-    fullWidth?: boolean;
-    fullHeight?: boolean;
+    width?: string;
+    height?: string;
 }
-export default function Flex({ className, funcss, id, children, style, direction, wrap, justify, alignItems, alignContent, gap, gapX, gapY, gapUnit, responsiveSmall, responsiveMedium, responsiveLarge, fullWidth, fullHeight, ...rest }: FlexProps): React.JSX.Element;
+export default function Flex({ className, funcss, id, children, style, direction, wrap, justify, alignItems, alignContent, gap, gapX, gapY, gapUnit, responsiveSmall, responsiveMedium, responsiveLarge, width, height, ...rest }: FlexProps): React.JSX.Element;
 export {};

package/ui/flex/Flex.js

@@ -39,7 +39,7 @@ function Flex(_a) {
     // Responsive
     responsiveSmall = _a.responsiveSmall, responsiveMedium = _a.responsiveMedium, responsiveLarge = _a.responsiveLarge, 
     // Size
-    fullWidth = _a.fullWidth, fullHeight = _a.fullHeight, rest = __rest(_a, ["className", "funcss", "id", "children", "style", "direction", "wrap", "justify", "alignItems", "alignContent", "gap", "gapX", "gapY", "gapUnit", "responsiveSmall", "responsiveMedium", "responsiveLarge", "fullWidth", "fullHeight"]);
+    width = _a.width, height = _a.height, rest = __rest(_a, ["className", "funcss", "id", "children", "style", "direction", "wrap", "justify", "alignItems", "alignContent", "gap", "gapX", "gapY", "gapUnit", "responsiveSmall", "responsiveMedium", "responsiveLarge", "width", "height"]);
     var combinedClassName = [
         className,
         funcss,
@@ -49,5 +49,5 @@ function Flex(_a) {
     ]
         .filter(Boolean)
         .join(' ');
-    return (react_1.default.createElement("div", __assign({ id: id, className: combinedClassName, style: __assign({ display: 'flex', flexDirection: direction, flexWrap: wrap, justifyContent: justify, alignItems: alignItems, alignContent: alignContent, gap: gap !== undefined ? "".concat(gap).concat(gapUnit) : undefined, columnGap: gapX !== undefined ? "".concat(gapX).concat(gapUnit) : undefined, rowGap: gapY !== undefined ? "".concat(gapY).concat(gapUnit) : undefined, width: fullWidth ? '100%' : undefined, height: fullHeight ? '100%' : undefined }, style) }, rest), children));
+    return (react_1.default.createElement("div", __assign({ id: id, className: combinedClassName, style: __assign({ display: 'flex', flexDirection: direction, flexWrap: wrap, justifyContent: justify, alignItems: alignItems, alignContent: alignContent, gap: gap ? "".concat(gap).concat(gapUnit) : 0, columnGap: gapX ? "".concat(gapX).concat(gapUnit) : gap ? "".concat(gap).concat(gapUnit) : 0, rowGap: gapY ? "".concat(gapY).concat(gapUnit) : gap ? "".concat(gap).concat(gapUnit) : 0, width: width ? width : '100%', height: height ? height : '100%' }, style) }, rest), children));
 }

package/ui/notification/Notification.d.ts

@@ -1,15 +1,19 @@
-import * as React from 'react';
+import React from 'react';
 type NotificationProps = {
     position: string;
     funcss?: string;
     animation?: string;
     duration?: number;
-    children: React.ReactNode;
+    autoHide?: boolean;
+    autoHideDuration?: number;
+    children?: React.ReactNode;
     state: boolean;
+    setOpen: (state: boolean) => void;
     width?: string;
     header?: React.ReactNode;
     content?: React.ReactNode;
     footer?: React.ReactNode;
 };
-export default function Notification({ position, funcss, animation, duration, children, state, width, header, content, footer }: NotificationProps): React.JSX.Element | null;
+export default function Notification({ position, funcss, animation, duration, autoHide, autoHideDuration, children, state, setOpen, // 👈 receives the setter from parent
+width, header, content, footer, }: NotificationProps): React.JSX.Element | null;
 export {};

package/ui/notification/Notification.js

@@ -38,23 +38,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Notification;
-var React = __importStar(require("react"));
+var react_1 = __importStar(require("react"));
 var Header_1 = __importDefault(require("./Header"));
 var Content_1 = __importDefault(require("./Content"));
 var Footer_1 = __importDefault(require("./Footer"));
 function Notification(_a) {
-    var position = _a.position, funcss = _a.funcss, animation = _a.animation, duration = _a.duration, children = _a.children, state = _a.state, width = _a.width, header = _a.header, content = _a.content, footer = _a.footer;
-    if (state) {
-        return (React.createElement("div", { className: "notification ".concat(position, " ").concat(funcss), style: { animation: " ".concat(duration ? duration : 0.2, "s ").concat(animation), width: width ? width : '450px' } },
-            header &&
-                React.createElement(Header_1.default, null, header),
-            content &&
-                React.createElement(Content_1.default, null, content),
-            footer &&
-                React.createElement(Footer_1.default, null, footer),
-            children));
-    }
-    else {
+    var position = _a.position, _b = _a.funcss, funcss = _b === void 0 ? '' : _b, _c = _a.animation, animation = _c === void 0 ? 'fadeIn' : _c, _d = _a.duration, duration = _d === void 0 ? 0.2 : _d, _e = _a.autoHide, autoHide = _e === void 0 ? false : _e, _f = _a.autoHideDuration, autoHideDuration = _f === void 0 ? 0.2 : _f, children = _a.children, state = _a.state, setOpen = _a.setOpen, // 👈 receives the setter from parent
+    _g = _a.width, // 👈 receives the setter from parent
+    width = _g === void 0 ? '450px' : _g, header = _a.header, content = _a.content, footer = _a.footer;
+    (0, react_1.useEffect)(function () {
+        if (state && autoHide) {
+            var timer_1 = setTimeout(function () {
+                setOpen(false); // 👈 close from inside
+            }, autoHideDuration * 1000);
+            return function () { return clearTimeout(timer_1); };
+        }
+    }, [state, autoHide, autoHideDuration, setOpen]);
+    if (!state)
         return null;
-    }
+    return (react_1.default.createElement("div", { className: "notification ".concat(position, " ").concat(funcss), style: { animation: "".concat(duration, "s ").concat(animation), width: width } },
+        header && react_1.default.createElement(Header_1.default, null, header),
+        content && react_1.default.createElement(Content_1.default, null, content),
+        footer && react_1.default.createElement(Footer_1.default, null, footer),
+        children));
 }

package/ui/scrolltotop/ScrollToTop.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ScrollToTop: () => React.JSX.Element | null;
+export default ScrollToTop;

package/ui/scrolltotop/ScrollToTop.js

@@ -0,0 +1,61 @@
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var fa_1 = require("react-icons/fa");
+var View_1 = __importDefault(require("../view/View"));
+var ScrollToTop = function () {
+    var _a = (0, react_1.useState)(false), visible = _a[0], setVisible = _a[1];
+    // Show button after scrolling down 200px
+    (0, react_1.useEffect)(function () {
+        var toggleVisibility = function () {
+            setVisible(window.scrollY > 200);
+        };
+        window.addEventListener('scroll', toggleVisibility);
+        return function () { return window.removeEventListener('scroll', toggleVisibility); };
+    }, []);
+    var scrollToTop = function () {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    };
+    if (!visible)
+        return null;
+    return (react_1.default.createElement(View_1.default, { onClick: scrollToTop, funcss: 'round-edge primary pointer', height: '40px', width: '40px', display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'fixed', bottom: '20px', right: '20px', zIndex: 200 },
+        react_1.default.createElement(fa_1.FaCaretUp, { size: 24 })));
+};
+exports.default = ScrollToTop;

package/ui/view/View.d.ts

@@ -1,44 +1,33 @@
-import * as React from 'react';
-type ViewProps = {
-    children?: React.ReactNode;
-    content?: React.ReactNode;
+import React, { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+interface ViewProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
+    children?: ReactNode;
+    content?: ReactNode;
     funcss?: string;
-    customStyle?: React.CSSProperties;
-    height?: string;
-    width?: string;
-    minHeight?: string;
-    maxHeight?: string;
-    minWidth?: string;
-    maxWidth?: string;
-    padding?: string;
-    margin?: string;
-    gap?: string;
+    customStyle?: CSSProperties;
+    height?: string | number;
+    width?: string | number;
+    minHeight?: string | number;
+    maxHeight?: string | number;
+    minWidth?: string | number;
+    maxWidth?: string | number;
+    padding?: string | number;
+    margin?: string | number;
+    gap?: string | number;
     fit?: boolean;
-    display?: React.CSSProperties['display'];
-    flexDirection?: React.CSSProperties['flexDirection'];
-    justifyContent?: React.CSSProperties['justifyContent'];
-    alignItems?: React.CSSProperties['alignItems'];
-    background?: string;
-    color?: string;
-    border?: string;
+    display?: CSSProperties['display'];
+    flexDirection?: CSSProperties['flexDirection'];
+    justifyContent?: CSSProperties['justifyContent'];
+    alignItems?: CSSProperties['alignItems'];
+    bg?: string;
     borderRadius?: string;
     boxShadow?: string;
-    position?: React.CSSProperties['position'];
-    top?: string;
-    left?: string;
-    right?: string;
-    bottom?: string;
+    position?: CSSProperties['position'];
+    top?: string | number;
+    left?: string | number;
+    right?: string | number;
+    bottom?: string | number;
     zIndex?: number;
-    overflow?: React.CSSProperties['overflow'];
-    id?: string;
-    title?: string;
-    role?: string;
-    ariaLabel?: string;
-    onClick?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
-    onFocus?: React.FocusEventHandler<HTMLDivElement>;
-    onBlur?: React.FocusEventHandler<HTMLDivElement>;
-};
-declare const View: ({ children, content, funcss, customStyle, height, width, minHeight, maxHeight, minWidth, maxWidth, padding, margin, gap, fit, display, flexDirection, justifyContent, alignItems, background, color, border, borderRadius, boxShadow, position, top, left, right, bottom, zIndex, overflow, id, title, role, ariaLabel, onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, ...rest }: ViewProps) => React.JSX.Element;
+    overflow?: string;
+}
+declare function View(props: ViewProps): React.JSX.Element;
 export default View;

package/ui/view/View.js

@@ -11,39 +11,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __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)
@@ -55,10 +22,15 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = __importStar(require("react"));
-var View = function (_a) {
-    var children = _a.children, content = _a.content, _b = _a.funcss, funcss = _b === void 0 ? '' : _b, _c = _a.customStyle, customStyle = _c === void 0 ? {} : _c, height = _a.height, width = _a.width, minHeight = _a.minHeight, maxHeight = _a.maxHeight, minWidth = _a.minWidth, maxWidth = _a.maxWidth, padding = _a.padding, margin = _a.margin, gap = _a.gap, fit = _a.fit, display = _a.display, flexDirection = _a.flexDirection, justifyContent = _a.justifyContent, alignItems = _a.alignItems, background = _a.background, color = _a.color, border = _a.border, borderRadius = _a.borderRadius, boxShadow = _a.boxShadow, position = _a.position, top = _a.top, left = _a.left, right = _a.right, bottom = _a.bottom, zIndex = _a.zIndex, overflow = _a.overflow, id = _a.id, title = _a.title, role = _a.role, ariaLabel = _a.ariaLabel, onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onFocus = _a.onFocus, onBlur = _a.onBlur, rest = __rest(_a, ["children", "content", "funcss", "customStyle", "height", "width", "minHeight", "maxHeight", "minWidth", "maxWidth", "padding", "margin", "gap", "fit", "display", "flexDirection", "justifyContent", "alignItems", "background", "color", "border", "borderRadius", "boxShadow", "position", "top", "left", "right", "bottom", "zIndex", "overflow", "id", "title", "role", "ariaLabel", "onClick", "onMouseEnter", "onMouseLeave", "onFocus", "onBlur"]);
-    return (React.createElement("div", __assign({ id: id, title: title, role: role, "aria-label": ariaLabel, className: "".concat(fit ? 'width-100-p height-100-p' : '', " ").concat(funcss), style: __assign({ display: display, flexDirection: flexDirection, justifyContent: justifyContent, alignItems: alignItems, height: height, width: width, minHeight: minHeight, maxHeight: maxHeight, minWidth: minWidth, maxWidth: maxWidth, padding: padding, margin: margin, gap: gap, background: background, color: color, border: border, borderRadius: borderRadius, boxShadow: boxShadow, position: position, top: top, left: left, right: right, bottom: bottom, zIndex: zIndex, overflow: overflow }, customStyle), onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur }, rest), content || children));
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+function View(props) {
+    var children = props.children, content = props.content, _a = props.funcss, funcss = _a === void 0 ? '' : _a, _b = props.customStyle, customStyle = _b === void 0 ? {} : _b, height = props.height, width = props.width, minHeight = props.minHeight, maxHeight = props.maxHeight, minWidth = props.minWidth, maxWidth = props.maxWidth, padding = props.padding, margin = props.margin, gap = props.gap, fit = props.fit, display = props.display, flexDirection = props.flexDirection, justifyContent = props.justifyContent, alignItems = props.alignItems, bg = props.bg, borderRadius = props.borderRadius, boxShadow = props.boxShadow, position = props.position, top = props.top, left = props.left, right = props.right, bottom = props.bottom, zIndex = props.zIndex, overflow = props.overflow, rest = __rest(props, ["children", "content", "funcss", "customStyle", "height", "width", "minHeight", "maxHeight", "minWidth", "maxWidth", "padding", "margin", "gap", "fit", "display", "flexDirection", "justifyContent", "alignItems", "bg", "borderRadius", "boxShadow", "position", "top", "left", "right", "bottom", "zIndex", "overflow"]);
+    var className = "".concat(fit ? 'width-100-p height-100-p' : '', " ").concat(funcss, " ").concat(bg !== null && bg !== void 0 ? bg : '').trim();
+    var style = __assign({ display: display, flexDirection: flexDirection, justifyContent: justifyContent, alignItems: alignItems, height: height, width: width, minHeight: minHeight, maxHeight: maxHeight, minWidth: minWidth, maxWidth: maxWidth, padding: padding, margin: margin, gap: gap, borderRadius: borderRadius, boxShadow: boxShadow, position: position, top: top, left: left, right: right, bottom: bottom, zIndex: zIndex, overflow: overflow }, customStyle);
+    return (react_1.default.createElement("div", __assign({ className: className, style: style }, rest), content !== null && content !== void 0 ? content : children));
+}
 exports.default = View;

package/ui/vista/Vista.d.ts

@@ -4,7 +4,7 @@ type VistaProps = {
     pattern?: 'grid' | 'dots' | 'diagonal' | 'checkerboard' | 'horizontal' | 'vertical';
     patternOpacity?: number;
     reverse?: boolean;
-    background?: string;
+    bg?: string;
     padding?: string;
     textAlign?: 'left' | 'center' | 'right';
     imgPosition?: 'top' | 'bottom';
@@ -25,6 +25,11 @@ type VistaProps = {
     gradientPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
     gradientSize?: string;
     gradientColors?: string;
+    fade?: boolean;
+    fadeDirection?: 'top' | 'bottom' | 'left' | 'right';
+    fadeRadial?: boolean;
+    fadeOverlayDarken?: number;
+    backgroundImage?: string;
 };
 declare const Vista: React.FC<VistaProps>;
 export default Vista;

package/ui/vista/Vista.js

@@ -19,11 +19,11 @@ var react_1 = __importDefault(require("react"));
 var ScrollInView_1 = __importDefault(require("../ScrollInView/ScrollInView"));
 var getCssVariable_1 = require("../../utils/getCssVariable");
 var Vista = function (_a) {
-    var _b = _a.layout, layout = _b === void 0 ? 'imageRight' : _b, _c = _a.reverse, reverse = _c === void 0 ? false : _c, _d = _a.background, background = _d === void 0 ? '' : _d, _e = _a.padding, padding = _e === void 0 ? 'padding-lg' : _e, _f = _a.textAlign, textAlign = _f === void 0 ? 'left' : _f, _g = _a.imgPosition, imgPosition = _g === void 0 ? 'top' : _g, _h = _a.funcss, funcss = _h === void 0 ? '' : _h, _j = _a.pattern, pattern = _j === void 0 ? '' : _j, _k = _a.patternOpacity, patternOpacity = _k === void 0 ? pattern === 'grid' ? 0.15 : pattern === 'dots' ? 0.4 : pattern === 'diagonal' ? 0.2 : pattern === 'checkerboard' ? 0.2 : pattern === 'horizontal' ? 0.2 : pattern === 'vertical' ? 0.2 : 0.1 : _k, heading = _a.heading, subheading = _a.subheading, content = _a.content, image = _a.image, cta = _a.cta, _l = _a.sectionClass, sectionClass = _l === void 0 ? '' : _l, _m = _a.containerClass, containerClass = _m === void 0 ? '' : _m, _o = _a.textWrapperClass, textWrapperClass = _o === void 0 ? '' : _o, _p = _a.imageWrapperClass, imageWrapperClass = _p === void 0 ? '' : _p, children = _a.children, 
+    var _b = _a.layout, layout = _b === void 0 ? 'imageRight' : _b, _c = _a.reverse, reverse = _c === void 0 ? false : _c, _d = _a.bg, bg = _d === void 0 ? '' : _d, _e = _a.padding, padding = _e === void 0 ? 'padding-lg' : _e, _f = _a.textAlign, textAlign = _f === void 0 ? 'left' : _f, _g = _a.imgPosition, imgPosition = _g === void 0 ? 'top' : _g, _h = _a.funcss, funcss = _h === void 0 ? '' : _h, _j = _a.pattern, pattern = _j === void 0 ? '' : _j, _k = _a.patternOpacity, patternOpacity = _k === void 0 ? pattern === 'grid' ? 0.15 : pattern === 'dots' ? 0.4 : pattern === 'diagonal' ? 0.2 : pattern === 'checkerboard' ? 0.2 : pattern === 'horizontal' ? 0.2 : pattern === 'vertical' ? 0.2 : 0.1 : _k, heading = _a.heading, subheading = _a.subheading, content = _a.content, image = _a.image, cta = _a.cta, _l = _a.sectionClass, sectionClass = _l === void 0 ? '' : _l, _m = _a.containerClass, containerClass = _m === void 0 ? '' : _m, _o = _a.textWrapperClass, textWrapperClass = _o === void 0 ? '' : _o, _p = _a.imageWrapperClass, imageWrapperClass = _p === void 0 ? '' : _p, children = _a.children, 
     // Gradient Props
     _q = _a.showGradient, 
     // Gradient Props
-    showGradient = _q === void 0 ? false : _q, _r = _a.gradientPosition, gradientPosition = _r === void 0 ? 'bottom-right' : _r, _s = _a.gradientSize, gradientSize = _s === void 0 ? '300px' : _s, _t = _a.blurry, blurry = _t === void 0 ? 100 : _t, _u = _a.opacity, opacity = _u === void 0 ? 0.4 : _u, gradientColors = _a.gradientColors;
+    showGradient = _q === void 0 ? false : _q, _r = _a.gradientPosition, gradientPosition = _r === void 0 ? 'bottom-right' : _r, _s = _a.gradientSize, gradientSize = _s === void 0 ? '300px' : _s, _t = _a.blurry, blurry = _t === void 0 ? 100 : _t, _u = _a.opacity, opacity = _u === void 0 ? 0.4 : _u, gradientColors = _a.gradientColors, _v = _a.fade, fade = _v === void 0 ? false : _v, _w = _a.fadeDirection, fadeDirection = _w === void 0 ? 'bottom' : _w, _x = _a.fadeRadial, fadeRadial = _x === void 0 ? false : _x, _y = _a.fadeOverlayDarken, fadeOverlayDarken = _y === void 0 ? 0.5 : _y, _z = _a.backgroundImage, backgroundImage = _z === void 0 ? '' : _z;
     var layoutClass = [
         layout,
         reverse ? 'reverse' : '',
@@ -56,7 +56,7 @@ var Vista = function (_a) {
                     pattern === 'diagonal' ? 'bg-pattern-diagonal' :
                         pattern === 'checkerboard' ? 'bg-pattern-checkerboard' :
                             pattern === 'horizontal' ? 'bg-pattern-horizontal' :
-                                pattern === 'vertical' ? 'bg-pattern-vertical' : '', " \n            ").concat(background, " ").concat(padding, " ").concat(layoutClass, " ").concat(sectionClass, " ").concat(funcss), style: { position: 'relative',
+                                pattern === 'vertical' ? 'bg-pattern-vertical' : '', " \n            ").concat(bg, " ").concat(padding, " ").concat(layoutClass, " ").concat(sectionClass, " ").concat(funcss), style: { position: 'relative',
                 overflow: 'hidden',
                 backgroundImage: pattern === 'grid' ? "linear-gradient(to right, rgba(var(--borderRgb), ".concat(patternOpacity, ") 1px, transparent 1px),\n          linear-gradient(to bottom, rgba(var(--borderRgb), ").concat(patternOpacity, ") 1px, transparent 1px)") :
                     pattern === 'dots' ? "radial-gradient(rgba(var(--borderRgb), ".concat(patternOpacity, ") 1px, transparent 1px)") :
@@ -74,6 +74,35 @@ var Vista = function (_a) {
                 TextContent)) : (react_1.default.createElement(react_1.default.Fragment, null,
                 (layout === 'imageLeft') && ImageContent,
                 TextContent,
-                (layout === 'imageRight') && ImageContent))))));
+                (layout === 'imageRight') && ImageContent))),
+            fade && (react_1.default.createElement("div", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    width: '100%',
+                    height: '100%',
+                    background: fadeRadial
+                        ? "radial-gradient(circle, transparent 0%, ".concat((0, getCssVariable_1.getCssVariableValue)(bg || 'page-bg'), " 100%)")
+                        : "linear-gradient(to ".concat(fadeDirection || 'bottom', ", ").concat((0, getCssVariable_1.getCssVariableValue)(bg || 'page-bg'), " 0%, transparent 100%)"),
+                    zIndex: 0,
+                    pointerEvents: 'none'
+                } })),
+            backgroundImage && (react_1.default.createElement("div", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    backgroundImage: "url(".concat(backgroundImage, ")"),
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                    zIndex: -1,
+                    width: '100%',
+                    height: '100%',
+                } })),
+            backgroundImage && fadeOverlayDarken !== undefined && (react_1.default.createElement("div", { style: {
+                    position: 'absolute',
+                    width: '100%',
+                    height: '100%',
+                    inset: 0,
+                    backgroundColor: "rgba(0, 0, 0, ".concat(fadeOverlayDarken, ")"),
+                    zIndex: -1,
+                } })))));
 };
 exports.default = Vista;