funuicss 3.7.2 → 3.7.3

package/ui/input/Input.js

@@ -55,18 +55,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FileInput = exports.TextareaInput = exports.SelectInput = exports.TextInput = void 0;
+exports.TextareaInput = exports.SelectInput = exports.TextInput = void 0;
 var react_1 = __importStar(require("react"));
 var pi_1 = require("react-icons/pi");
-var Button_1 = __importDefault(require("../button/Button"));
 var theme_1 = require("../theme/theme");
 var componentUtils_1 = require("../../utils/componentUtils");
 var getDynamicIcon_1 = require("../../utils/getDynamicIcon");
-var Text_1 = __importDefault(require("../text/Text"));
+var FileUpload_1 = require("./FileUpload"); // Import the FileUpload component
 // Status icons mapping
 var statusIcons = {
     success: react_1.default.createElement(pi_1.PiCheckCircle, null),
@@ -105,9 +101,9 @@ var IconicInputWrapper = function (_a) {
 };
 // Input Container with Floating Label
 var InputContainer = function (_a) {
-    var label = _a.label, status = _a.status, helperText = _a.helperText, children = _a.children, isFocused = _a.isFocused, hasValue = _a.hasValue, fullWidth = _a.fullWidth, id = _a.id, startIcon = _a.startIcon, prefix = _a.prefix, _b = _a.isSelect, isSelect = _b === void 0 ? false : _b;
-    // For select inputs, label is always active
-    var showFloatingLabel = label && (isSelect || isFocused || hasValue);
+    var label = _a.label, status = _a.status, helperText = _a.helperText, children = _a.children, isFocused = _a.isFocused, hasValue = _a.hasValue, fullWidth = _a.fullWidth, id = _a.id, startIcon = _a.startIcon, prefix = _a.prefix, _b = _a.alwaysActiveLabel, alwaysActiveLabel = _b === void 0 ? false : _b;
+    // For select inputs and date/time inputs, label is always active
+    var showFloatingLabel = label && (alwaysActiveLabel || isFocused || hasValue);
     return (react_1.default.createElement("div", { className: "input-wrapper ".concat(fullWidth ? 'full-width' : '') },
         react_1.default.createElement("div", { className: "input-container-with-label" },
             label && (react_1.default.createElement("label", { htmlFor: id, className: "floating-label ".concat(startIcon || prefix ? "label-left" : "", "  ").concat(showFloatingLabel ? 'active' : '', " ").concat(status ? "label-".concat(status) : '') }, label)),
@@ -124,6 +120,8 @@ var TextInput = function (_a) {
     var _g = (0, react_1.useState)(null), prefixNode = _g[0], setPrefixNode = _g[1];
     var _h = (0, react_1.useState)(null), suffixNode = _h[0], setSuffixNode = _h[1];
     var inputRef = (0, react_1.useRef)(null);
+    // Check if this is a date/time input type for always active label
+    var isDateTimeInput = ['date', 'time', 'month', 'week', 'datetime-local'].includes(type || '');
     // Handle value changes - only update if value is truly defined (not empty string)
     (0, react_1.useEffect)(function () {
         if (value !== undefined && value !== '') {
@@ -239,7 +237,7 @@ var TextInput = function (_a) {
     var showPlaceholder = placeholder && label && (isFocused || !!inputValue);
     var inputElement = (react_1.default.createElement("input", __assign({ ref: inputRef, id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, defaultValue: defaultValue, type: type, placeholder: showPlaceholder ? placeholder : (!label ? placeholder : ''), style: style, value: inputValue }, rest)));
     var wrappedInput = (react_1.default.createElement(IconicInputWrapper, { startIcon: effectivePrefix, endIcon: effectiveSuffix, iconicBg: final.iconicBg, funcss: final.funcss }, inputElement));
-    return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: label, status: final.status, helperText: helperText, isFocused: isFocused, hasValue: !!inputValue, fullWidth: final.fullWidth, id: id }, wrappedInput));
+    return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: label, status: final.status, helperText: helperText, isFocused: isFocused, hasValue: !!inputValue, fullWidth: final.fullWidth, id: id, alwaysActiveLabel: isDateTimeInput }, wrappedInput));
 };
 exports.TextInput = TextInput;
 // Select Component
@@ -363,7 +361,7 @@ var SelectInput = function (_a) {
     };
     var selectElement = (react_1.default.createElement("select", __assign({ id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, defaultValue: defaultValue, value: selectValue, style: style }, rest), options.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.text)); })));
     var wrappedSelect = (react_1.default.createElement(IconicInputWrapper, { startIcon: effectivePrefix, endIcon: effectiveSuffix, iconicBg: final.iconicBg, funcss: final.funcss }, selectElement));
-    return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: label, status: final.status, helperText: helperText, isFocused: isFocused, hasValue: selectHasValue, fullWidth: final.fullWidth, id: id, isSelect: true }, wrappedSelect));
+    return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: label, status: final.status, helperText: helperText, isFocused: isFocused, hasValue: selectHasValue, fullWidth: final.fullWidth, id: id, alwaysActiveLabel: true }, wrappedSelect));
 };
 exports.SelectInput = SelectInput;
 // Textarea Component
@@ -491,137 +489,23 @@ var TextareaInput = function (_a) {
     return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: label, status: final.status, helperText: helperText, isFocused: isFocused, hasValue: !!textValue, fullWidth: final.fullWidth, id: id }, wrappedTextarea));
 };
 exports.TextareaInput = TextareaInput;
-// File Input Component (updated with no_prefix and no_label logic)
-var FileInput = function (_a) {
-    var _b = _a.id, id = _b === void 0 ? 'fileInput' : _b, name = _a.name, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, iconicBg = _a.iconicBg, _c = _a.label, label = _c === void 0 ? 'Upload File' : _c, helperText = _a.helperText, icon = _a.icon, extra = _a.extra, button = _a.button, btn = _a.btn, value = _a.value, _d = _a.variant, variant = _d === void 0 ? '' : _d, rest = __rest(_a, ["id", "name", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "prefix", "suffix", "stringPrefix", "stringSuffix", "iconicBg", "label", "helperText", "icon", "extra", "button", "btn", "value", "variant"]);
-    var _e = (0, react_1.useState)(''), fileName = _e[0], setFileName = _e[1];
-    var _f = (0, react_1.useState)(null), prefixNode = _f[0], setPrefixNode = _f[1];
-    var _g = (0, react_1.useState)(null), suffixNode = _g[0], setSuffixNode = _g[1];
-    var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
-    // Create local props object including stringPrefix/stringSuffix
-    var localProps = {
-        status: status,
-        funcss: funcss,
-        bg: bg,
-        fullWidth: fullWidth,
-        flat: flat,
-        rounded: rounded,
-        leftRounded: leftRounded,
-        rightRounded: rightRounded,
-        startIcon: startIcon,
-        endIcon: endIcon,
-        prefix: prefix,
-        suffix: suffix,
-        iconicBg: iconicBg,
-        stringPrefix: stringPrefix, // Include in local props
-        stringSuffix: stringSuffix, // Include in local props
-        bordered: rest.bordered,
-        borderless: rest.borderless,
-    };
-    // Merge with config - LOCAL PROPS OVERRIDE CONFIG
-    var mergedProps = mergeWithLocal(localProps).props;
-    // Extract final values - local props take precedence
-    var final = {
-        status: status !== undefined ? status : mergedProps.status,
-        funcss: funcss !== undefined ? funcss : mergedProps.funcss,
-        bg: bg !== undefined ? bg : mergedProps.bg,
-        fullWidth: fullWidth !== undefined ? fullWidth : mergedProps.fullWidth,
-        flat: flat !== undefined ? flat : mergedProps.flat,
-        rounded: rounded !== undefined ? rounded : mergedProps.rounded,
-        leftRounded: leftRounded !== undefined ? leftRounded : mergedProps.leftRounded,
-        rightRounded: rightRounded !== undefined ? rightRounded : mergedProps.rightRounded,
-        startIcon: startIcon !== undefined ? startIcon : mergedProps.startIcon,
-        endIcon: endIcon !== undefined ? endIcon : mergedProps.endIcon,
-        prefix: prefix !== undefined ? prefix : mergedProps.prefix,
-        suffix: suffix !== undefined ? suffix : mergedProps.suffix,
-        iconicBg: iconicBg !== undefined ? iconicBg : mergedProps.iconicBg,
-        stringPrefix: stringPrefix !== undefined ? stringPrefix : mergedProps.stringPrefix, // Handle both local and config
-        stringSuffix: stringSuffix !== undefined ? stringSuffix : mergedProps.stringSuffix, // Handle both local and config
-    };
-    // Handle stringPrefix - use final value (local or config)
-    (0, react_1.useEffect)(function () {
-        var effectiveStringPrefix = final.stringPrefix;
-        if (effectiveStringPrefix) {
-            (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringPrefix).then(function (node) { return setPrefixNode(node); });
-        }
-        else {
-            setPrefixNode(null);
-        }
-    }, [final.stringPrefix]);
-    // Handle stringSuffix - use final value (local or config)
-    (0, react_1.useEffect)(function () {
-        var effectiveStringSuffix = final.stringSuffix;
-        if (effectiveStringSuffix) {
-            (0, getDynamicIcon_1.getDynamicIcon)(effectiveStringSuffix).then(function (node) { return setSuffixNode(node); });
-        }
-        else {
-            setSuffixNode(null);
-        }
-    }, [final.stringSuffix]);
-    var handleChange = function (e) {
-        var _a;
-        var file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
-        if (file) {
-            setFileName(file.name);
-        }
-        if (onChange)
-            onChange(e);
-    };
-    var effectivePrefix = prefixNode || final.prefix || final.startIcon;
-    var effectiveSuffix = suffixNode || final.suffix || final.endIcon;
-    // Check if there's no start icon or prefix
-    var hasNoPrefix = !effectivePrefix;
-    // Check if there's no label (file inputs typically don't have labels in the same way)
-    var hasNoLabel = true; // File inputs use their own label system
-    if (btn) {
-        var className = generateInputClasses({
-            status: final.status,
-            rounded: final.rounded,
-            bg: final.bg,
-            funcss: final.funcss,
-            flat: final.flat,
-            leftRounded: final.leftRounded,
-            rightRounded: final.rightRounded,
-            bordered: true,
-            borderless: false,
-            additionalClasses: 'filedInput',
-            hasNoPrefix: hasNoPrefix, // Add no_prefix class when no start icon/prefix
-            hasNoLabel: hasNoLabel,
-        });
-        var style = final.fullWidth ? { width: '100%' } : undefined;
-        var fileInputElement = (react_1.default.createElement("div", { className: "fileInput" },
-            button || (react_1.default.createElement(Button_1.default, { funcss: final.funcss, startIcon: icon || react_1.default.createElement(pi_1.PiCloudArrowUp, null), bg: "primary", fullWidth: true, raised: true }, fileName || label)),
-            react_1.default.createElement("input", __assign({ id: id, name: name, className: className, onChange: handleChange, type: "file", style: style, value: value }, rest))));
-        var wrappedFileInput = (react_1.default.createElement(IconicInputWrapper, { startIcon: effectivePrefix, endIcon: effectiveSuffix, iconicBg: final.iconicBg, funcss: final.funcss }, fileInputElement));
-        return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: undefined, status: final.status, helperText: helperText, isFocused: false, hasValue: !!fileName, fullWidth: final.fullWidth, id: id }, wrappedFileInput));
-    }
-    var uploadElement = (react_1.default.createElement("div", { className: "_upload_container" },
-        react_1.default.createElement("label", { htmlFor: id, className: "_upload_label" },
-            react_1.default.createElement("div", { className: "_upload_icon" }, icon || react_1.default.createElement(pi_1.PiCloudArrowUp, null)),
-            react_1.default.createElement("div", { className: "_upload_text fit" },
-                react_1.default.createElement(Text_1.default, { text: fileName || label, truncate: 1, block: true })),
-            extra && react_1.default.createElement("div", { className: "text-small opacity-3" }, extra)),
-        react_1.default.createElement("input", __assign({ onChange: handleChange, type: "file", id: id, className: "_upload_input" }, rest))));
-    return (react_1.default.createElement(InputContainer, { startIcon: effectivePrefix, label: undefined, status: final.status, helperText: helperText, isFocused: false, hasValue: !!fileName, fullWidth: final.fullWidth, id: id }, uploadElement));
-};
-exports.FileInput = FileInput;
 var Input = function (_a) {
-    var select = _a.select, multiline = _a.multiline, file = _a.file, noBorder = _a.noBorder, startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, iconicBg = _a.iconicBg, _b = _a.variant, variant = _b === void 0 ? '' : _b, props = __rest(_a, ["select", "multiline", "file", "noBorder", "startIcon", "endIcon", "prefix", "suffix", "stringPrefix", "stringSuffix", "iconicBg", "variant"]);
+    var select = _a.select, multiline = _a.multiline, file = _a.file, noBorder = _a.noBorder, startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, stringPrefix = _a.stringPrefix, stringSuffix = _a.stringSuffix, iconicBg = _a.iconicBg, type = _a.type, _b = _a.variant, variant = _b === void 0 ? '' : _b, props = __rest(_a, ["select", "multiline", "file", "noBorder", "startIcon", "endIcon", "prefix", "suffix", "stringPrefix", "stringSuffix", "iconicBg", "type", "variant"]);
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
     // Create local props object including stringPrefix/stringSuffix
-    var localProps = __assign(__assign({}, props), { startIcon: startIcon, endIcon: endIcon, prefix: prefix, suffix: suffix, iconicBg: iconicBg, stringPrefix: stringPrefix, // Include in local props
-        stringSuffix: stringSuffix });
+    var localProps = __assign(__assign({}, props), { startIcon: startIcon, endIcon: endIcon, prefix: prefix, suffix: suffix, iconicBg: iconicBg, stringPrefix: stringPrefix, stringSuffix: stringSuffix, type: type });
     var mergedProps = mergeWithLocal(localProps).props;
-    var inputProps = __assign(__assign(__assign({}, props), mergedProps), { variant: variant, borderless: noBorder !== undefined ? noBorder : (props.borderless !== undefined ? props.borderless : mergedProps.borderless) });
+    var inputProps = __assign(__assign(__assign({}, props), mergedProps), { variant: variant, borderless: noBorder !== undefined ? noBorder : (props.borderless !== undefined ? props.borderless : mergedProps.borderless), type: type });
+    // If type is file or file prop is true, use FileUpload component
+    if (file || type === 'file') {
+        return react_1.default.createElement(FileUpload_1.FileUpload, __assign({}, inputProps));
+    }
     if (select) {
         return react_1.default.createElement(exports.SelectInput, __assign({}, inputProps));
     }
     if (multiline) {
         return react_1.default.createElement(exports.TextareaInput, __assign({}, inputProps));
     }
-    if (file) {
-        return react_1.default.createElement(exports.FileInput, __assign({}, inputProps));
-    }
     return react_1.default.createElement(exports.TextInput, __assign({}, inputProps));
 };
 exports.default = Input;

package/ui/text/Text.d.ts

@@ -42,6 +42,7 @@ type TypographyProps = {
     variant?: string;
     margin?: string;
     padding?: string;
+    style?: React.CSSProperties;
     size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | string;
 };
 declare const Text: React.FC<TypographyProps>;

package/ui/text/Text.js

@@ -31,7 +31,7 @@ var pi_1 = require("react-icons/pi");
 var componentUtils_1 = require("../../utils/componentUtils");
 var Text = function (_a) {
     var _b;
-    var id = _a.id, bg = _a.bg, color = _a.color, children = _a.children, hoverBg = _a.hoverBg, hoverText = _a.hoverText, text = _a.text, funcss = _a.funcss, emp = _a.emp, bold = _a.bold, block = _a.block, body = _a.body, article = _a.article, light = _a.light, lighter = _a.lighter, italic = _a.italic, weight = _a.weight, underline = _a.underline, align = _a.align, lineHeight = _a.lineHeight, letterSpacing = _a.letterSpacing, uppercase = _a.uppercase, lowercase = _a.lowercase, capitalize = _a.capitalize, textDecoration = _a.textDecoration, textTransform = _a.textTransform, whiteSpace = _a.whiteSpace, wordBreak = _a.wordBreak, fontFamily = _a.fontFamily, truncate = _a.truncate, textShadow = _a.textShadow, textAlign = _a.textAlign, customStyles = _a.customStyles, monospace = _a.monospace, quote = _a.quote, opacity = _a.opacity, _c = _a.variant, variant = _c === void 0 ? '' : _c, size = _a.size, margin = _a.margin, padding = _a.padding, rest = __rest(_a, ["id", "bg", "color", "children", "hoverBg", "hoverText", "text", "funcss", "emp", "bold", "block", "body", "article", "light", "lighter", "italic", "weight", "underline", "align", "lineHeight", "letterSpacing", "uppercase", "lowercase", "capitalize", "textDecoration", "textTransform", "whiteSpace", "wordBreak", "fontFamily", "truncate", "textShadow", "textAlign", "customStyles", "monospace", "quote", "opacity", "variant", "size", "margin", "padding"]);
+    var id = _a.id, bg = _a.bg, color = _a.color, children = _a.children, hoverBg = _a.hoverBg, hoverText = _a.hoverText, text = _a.text, funcss = _a.funcss, emp = _a.emp, bold = _a.bold, block = _a.block, body = _a.body, article = _a.article, light = _a.light, lighter = _a.lighter, italic = _a.italic, weight = _a.weight, underline = _a.underline, align = _a.align, lineHeight = _a.lineHeight, letterSpacing = _a.letterSpacing, uppercase = _a.uppercase, lowercase = _a.lowercase, capitalize = _a.capitalize, textDecoration = _a.textDecoration, textTransform = _a.textTransform, whiteSpace = _a.whiteSpace, wordBreak = _a.wordBreak, fontFamily = _a.fontFamily, truncate = _a.truncate, textShadow = _a.textShadow, textAlign = _a.textAlign, customStyles = _a.customStyles, monospace = _a.monospace, quote = _a.quote, opacity = _a.opacity, _c = _a.variant, variant = _c === void 0 ? '' : _c, size = _a.size, margin = _a.margin, style = _a.style, padding = _a.padding, rest = __rest(_a, ["id", "bg", "color", "children", "hoverBg", "hoverText", "text", "funcss", "emp", "bold", "block", "body", "article", "light", "lighter", "italic", "weight", "underline", "align", "lineHeight", "letterSpacing", "uppercase", "lowercase", "capitalize", "textDecoration", "textTransform", "whiteSpace", "wordBreak", "fontFamily", "truncate", "textShadow", "textAlign", "customStyles", "monospace", "quote", "opacity", "variant", "size", "margin", "style", "padding"]);
     // Use component configuration (simplified - let the hook handle empty variant)
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Text', variant).mergeWithLocal;
     // Create local props object - include ALL props
@@ -88,7 +88,7 @@ var Text = function (_a) {
                     final.size === 'h5' ? "h5" :
                         final.size === 'h6' ? "h6" :
                             "text-".concat(final.size));
-    var mergedStyles = __assign(__assign({ display: shouldBeBlock ? 'block' : undefined, fontWeight: final.bold ? 'bold' : final.weight ? final.weight : undefined, lineHeight: final.lineHeight, letterSpacing: final.letterSpacing, textTransform: final.textTransform, textDecoration: final.textDecoration, fontFamily: final.fontFamily, textShadow: final.textShadow, textAlign: final.textAlign, whiteSpace: final.whiteSpace, wordBreak: final.wordBreak, margin: final.margin, padding: final.padding }, customStyles), (final.truncate
+    var mergedStyles = __assign(__assign(__assign({ display: shouldBeBlock ? 'block' : undefined, fontWeight: final.bold ? 'bold' : final.weight ? final.weight : undefined, lineHeight: final.lineHeight, letterSpacing: final.letterSpacing, textTransform: final.textTransform, textDecoration: final.textDecoration, fontFamily: final.fontFamily, textShadow: final.textShadow, textAlign: final.textAlign, whiteSpace: final.whiteSpace, wordBreak: final.wordBreak, margin: final.margin, padding: final.padding }, customStyles), style), (final.truncate
         ? {
             display: '-webkit-box',
             WebkitBoxOrient: 'vertical',

package/ui/vista/Vista.js

@@ -23,187 +23,18 @@ var Text_1 = __importDefault(require("../text/Text"));
 var Col_1 = __importDefault(require("../grid/Col"));
 var Button_1 = __importDefault(require("../button/Button"));
 var Flex_1 = __importDefault(require("../flex/Flex"));
-var Vista = function (_a) {
-    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, 
-    // Enhanced Content
-    heading = _a.heading, _l = _a.headingSize, headingSize = _l === void 0 ? '5xl' : _l, _m = _a.headingWeight, headingWeight = _m === void 0 ? 700 : _m, _o = _a.headingColor, headingColor = _o === void 0 ? '' : _o, _p = _a.headingClass, headingClass = _p === void 0 ? '' : _p, subheading = _a.subheading, _q = _a.subheadingSize, subheadingSize = _q === void 0 ? 'lg' : _q, _r = _a.subheadingWeight, subheadingWeight = _r === void 0 ? 400 : _r, _s = _a.subheadingColor, subheadingColor = _s === void 0 ? 'light' : _s, _t = _a.subheadingClass, subheadingClass = _t === void 0 ? '' : _t, content = _a.content, _u = _a.contentSize, contentSize = _u === void 0 ? 'base' : _u, _v = _a.contentWeight, contentWeight = _v === void 0 ? 400 : _v, _w = _a.contentColor, contentColor = _w === void 0 ? '' : _w, _x = _a.contentClass, contentClass = _x === void 0 ? '' : _x, image = _a.image, _y = _a.imageUrl, imageUrl = _y === void 0 ? '' : _y, _z = _a.imageAlt, imageAlt = _z === void 0 ? '' : _z, _0 = _a.imageClass, imageClass = _0 === void 0 ? '' : _0, _1 = _a.imageSize, imageSize = _1 === void 0 ? '100%' : _1, cta = _a.cta, _2 = _a.ctaClass, ctaClass = _2 === void 0 ? '' : _2, _3 = _a.sectionClass, sectionClass = _3 === void 0 ? '' : _3, _4 = _a.containerClass, containerClass = _4 === void 0 ? '' : _4, _5 = _a.textWrapperClass, textWrapperClass = _5 === void 0 ? '' : _5, _6 = _a.gap, gap = _6 === void 0 ? '2rem' : _6, _7 = _a.imageWrapperClass, imageWrapperClass = _7 === void 0 ? '' : _7, children = _a.children, 
-    // Gradient Props
-    _8 = _a.showGradient, 
-    // Gradient Props
-    showGradient = _8 === void 0 ? false : _8, _9 = _a.gradientPosition, gradientPosition = _9 === void 0 ? 'bottom-right' : _9, _10 = _a.gradientSize, gradientSize = _10 === void 0 ? '300px' : _10, _11 = _a.blurry, blurry = _11 === void 0 ? 100 : _11, _12 = _a.opacity, opacity = _12 === void 0 ? 0.4 : _12, gradientColors = _a.gradientColors, _13 = _a.fade, fade = _13 === void 0 ? false : _13, _14 = _a.fadeDirection, fadeDirection = _14 === void 0 ? 'bottom' : _14, _15 = _a.fadeRadial, fadeRadial = _15 === void 0 ? false : _15, _16 = _a.fadeOverlayDarken, fadeOverlayDarken = _16 === void 0 ? 0.5 : _16, _17 = _a.backgroundImage, backgroundImage = _17 === void 0 ? '' : _17, _18 = _a.variant, variant = _18 === void 0 ? '' : _18, 
-    // New CTA Button Props
-    _19 = _a.showPrimaryCTA, 
-    // New CTA Button Props
-    showPrimaryCTA = _19 === void 0 ? false : _19, _20 = _a.showSecondaryCTA, showSecondaryCTA = _20 === void 0 ? false : _20, _21 = _a.showAccentCTA, showAccentCTA = _21 === void 0 ? false : _21, _22 = _a.primaryButtonOutlined, primaryButtonOutlined = _22 === void 0 ? false : _22, _23 = _a.secondaryButtonOutlined, secondaryButtonOutlined = _23 === void 0 ? false : _23, _24 = _a.accentButtonOutlined, accentButtonOutlined = _24 === void 0 ? false : _24, _25 = _a.ctaPrimaryUrl, ctaPrimaryUrl = _25 === void 0 ? '' : _25, _26 = _a.ctaSecondaryUrl, ctaSecondaryUrl = _26 === void 0 ? '' : _26, _27 = _a.ctaAccentUrl, ctaAccentUrl = _27 === void 0 ? '' : _27, _28 = _a.ctaPrimaryText, ctaPrimaryText = _28 === void 0 ? 'Primary Action' : _28, _29 = _a.ctaSecondaryText, ctaSecondaryText = _29 === void 0 ? 'Secondary Action' : _29, _30 = _a.ctaAccentText, ctaAccentText = _30 === void 0 ? 'Accent Action' : _30, _31 = _a.ctaGap, ctaGap = _31 === void 0 ? 1 : _31, _32 = _a.ctaFlexJustify, ctaFlexJustify = _32 === void 0 ? 'center' : _32, _33 = _a.ctaPrimaryRounded, ctaPrimaryRounded = _33 === void 0 ? false : _33, _34 = _a.ctaPrimaryFlat, ctaPrimaryFlat = _34 === void 0 ? false : _34, _35 = _a.ctaPrimaryPrefix, ctaPrimaryPrefix = _35 === void 0 ? '' : _35, _36 = _a.ctaPrimarySuffix, ctaPrimarySuffix = _36 === void 0 ? '' : _36, _37 = _a.ctaSecondaryRounded, ctaSecondaryRounded = _37 === void 0 ? false : _37, _38 = _a.ctaSecondaryFlat, ctaSecondaryFlat = _38 === void 0 ? false : _38, _39 = _a.ctaSecondaryPrefix, ctaSecondaryPrefix = _39 === void 0 ? '' : _39, _40 = _a.ctaSecondarySuffix, ctaSecondarySuffix = _40 === void 0 ? '' : _40, _41 = _a.ctaAccentRounded, ctaAccentRounded = _41 === void 0 ? false : _41, _42 = _a.ctaAccentFlat, ctaAccentFlat = _42 === void 0 ? false : _42, _43 = _a.ctaAccentPrefix, ctaAccentPrefix = _43 === void 0 ? '' : _43, _44 = _a.ctaAccentSuffix, ctaAccentSuffix = _44 === void 0 ? '' : _44, primaryIconSize = _a.primaryIconSize, secondaryIconSize = _a.secondaryIconSize, accentIconSize = _a.accentIconSize;
-    // Use the component config hook
-    var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Vista', variant).mergeWithLocal;
-    // Create local props object
-    var localProps = {
-        layout: layout,
-        reverse: reverse,
-        bg: bg,
-        padding: padding,
-        textAlign: textAlign,
-        imgPosition: imgPosition,
-        funcss: funcss,
-        pattern: pattern,
-        patternOpacity: patternOpacity,
-        showGradient: showGradient,
-        gradientPosition: gradientPosition,
-        gradientSize: gradientSize,
-        blurry: blurry,
-        opacity: opacity,
-        gradientColors: gradientColors,
-        fade: fade,
-        fadeDirection: fadeDirection,
-        fadeRadial: fadeRadial,
-        fadeOverlayDarken: fadeOverlayDarken,
-        backgroundImage: backgroundImage,
-        sectionClass: sectionClass,
-        containerClass: containerClass,
-        textWrapperClass: textWrapperClass,
-        imageWrapperClass: imageWrapperClass,
-        gap: gap,
-        // Enhanced content props
-        heading: heading,
-        headingSize: headingSize,
-        headingWeight: headingWeight,
-        headingColor: headingColor,
-        headingClass: headingClass,
-        subheading: subheading,
-        subheadingSize: subheadingSize,
-        subheadingWeight: subheadingWeight,
-        subheadingColor: subheadingColor,
-        subheadingClass: subheadingClass,
-        content: content,
-        contentSize: contentSize,
-        contentWeight: contentWeight,
-        contentColor: contentColor,
-        contentClass: contentClass,
-        image: image,
-        imageUrl: imageUrl,
-        imageSize: imageSize,
-        imageAlt: imageAlt,
-        imageClass: imageClass,
-        cta: cta,
-        ctaClass: ctaClass,
-        // CTA Button 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,
-        ctaPrimaryRounded: ctaPrimaryRounded,
-        ctaPrimaryFlat: ctaPrimaryFlat,
-        ctaPrimaryPrefix: ctaPrimaryPrefix,
-        ctaPrimarySuffix: ctaPrimarySuffix,
-        ctaSecondaryRounded: ctaSecondaryRounded,
-        ctaSecondaryFlat: ctaSecondaryFlat,
-        ctaSecondaryPrefix: ctaSecondaryPrefix,
-        ctaSecondarySuffix: ctaSecondarySuffix,
-        ctaAccentRounded: ctaAccentRounded,
-        ctaAccentFlat: ctaAccentFlat,
-        ctaAccentPrefix: ctaAccentPrefix,
-        ctaAccentSuffix: ctaAccentSuffix,
-        primaryIconSize: primaryIconSize,
-        secondaryIconSize: secondaryIconSize,
-        accentIconSize: accentIconSize,
-    };
+var Vista = function (localProps) {
+    // Use the component config hook with the variant from localProps
+    var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Vista', localProps.variant).mergeWithLocal;
     // Merge config with local props - local props override config
     var mergedProps = mergeWithLocal(localProps).props;
-    // Extract final values - use NULLISH COALESCING to ensure local props take precedence
-    var final = {
-        // Layout & styling
-        layout: layout !== null && layout !== void 0 ? layout : mergedProps.layout,
-        reverse: reverse !== null && reverse !== void 0 ? reverse : mergedProps.reverse,
-        bg: bg !== null && bg !== void 0 ? bg : mergedProps.bg,
-        padding: padding !== null && padding !== void 0 ? padding : mergedProps.padding,
-        textAlign: textAlign !== null && textAlign !== void 0 ? textAlign : mergedProps.textAlign,
-        imgPosition: imgPosition !== null && imgPosition !== void 0 ? imgPosition : mergedProps.imgPosition,
-        funcss: funcss !== null && funcss !== void 0 ? funcss : mergedProps.funcss,
-        pattern: pattern !== null && pattern !== void 0 ? pattern : mergedProps.pattern,
-        patternOpacity: patternOpacity !== null && patternOpacity !== void 0 ? patternOpacity : mergedProps.patternOpacity,
-        // Gradient & effects
-        showGradient: showGradient !== null && showGradient !== void 0 ? showGradient : mergedProps.showGradient,
-        gradientPosition: gradientPosition !== null && gradientPosition !== void 0 ? gradientPosition : mergedProps.gradientPosition,
-        gradientSize: gradientSize !== null && gradientSize !== void 0 ? gradientSize : mergedProps.gradientSize,
-        blurry: blurry !== null && blurry !== void 0 ? blurry : mergedProps.blurry,
-        opacity: opacity !== null && opacity !== void 0 ? opacity : mergedProps.opacity,
-        gradientColors: gradientColors !== null && gradientColors !== void 0 ? gradientColors : mergedProps.gradientColors,
-        fade: fade !== null && fade !== void 0 ? fade : mergedProps.fade,
-        fadeDirection: fadeDirection !== null && fadeDirection !== void 0 ? fadeDirection : mergedProps.fadeDirection,
-        fadeRadial: fadeRadial !== null && fadeRadial !== void 0 ? fadeRadial : mergedProps.fadeRadial,
-        fadeOverlayDarken: fadeOverlayDarken !== null && fadeOverlayDarken !== void 0 ? fadeOverlayDarken : mergedProps.fadeOverlayDarken,
-        backgroundImage: backgroundImage !== null && backgroundImage !== void 0 ? backgroundImage : mergedProps.backgroundImage,
-        // Classes
-        sectionClass: sectionClass !== null && sectionClass !== void 0 ? sectionClass : mergedProps.sectionClass,
-        containerClass: containerClass !== null && containerClass !== void 0 ? containerClass : mergedProps.containerClass,
-        textWrapperClass: textWrapperClass !== null && textWrapperClass !== void 0 ? textWrapperClass : mergedProps.textWrapperClass,
-        imageWrapperClass: imageWrapperClass !== null && imageWrapperClass !== void 0 ? imageWrapperClass : mergedProps.imageWrapperClass,
-        gap: gap !== null && gap !== void 0 ? gap : mergedProps.gap,
-        // Content
-        heading: heading !== null && heading !== void 0 ? heading : mergedProps.heading,
-        headingSize: headingSize !== null && headingSize !== void 0 ? headingSize : mergedProps.headingSize,
-        headingWeight: headingWeight !== null && headingWeight !== void 0 ? headingWeight : mergedProps.headingWeight,
-        headingColor: headingColor !== null && headingColor !== void 0 ? headingColor : mergedProps.headingColor,
-        headingClass: headingClass !== null && headingClass !== void 0 ? headingClass : mergedProps.headingClass,
-        subheading: subheading !== null && subheading !== void 0 ? subheading : mergedProps.subheading,
-        subheadingSize: subheadingSize !== null && subheadingSize !== void 0 ? subheadingSize : mergedProps.subheadingSize,
-        subheadingWeight: subheadingWeight !== null && subheadingWeight !== void 0 ? subheadingWeight : mergedProps.subheadingWeight,
-        subheadingColor: subheadingColor !== null && subheadingColor !== void 0 ? subheadingColor : mergedProps.subheadingColor,
-        subheadingClass: subheadingClass !== null && subheadingClass !== void 0 ? subheadingClass : mergedProps.subheadingClass,
-        content: content !== null && content !== void 0 ? content : mergedProps.content,
-        contentSize: contentSize !== null && contentSize !== void 0 ? contentSize : mergedProps.contentSize,
-        contentWeight: contentWeight !== null && contentWeight !== void 0 ? contentWeight : mergedProps.contentWeight,
-        contentColor: contentColor !== null && contentColor !== void 0 ? contentColor : mergedProps.contentColor,
-        contentClass: contentClass !== null && contentClass !== void 0 ? contentClass : mergedProps.contentClass,
-        image: image !== null && image !== void 0 ? image : mergedProps.image,
-        imageUrl: imageUrl !== null && imageUrl !== void 0 ? imageUrl : mergedProps.imageUrl,
-        imageAlt: imageAlt !== null && imageAlt !== void 0 ? imageAlt : mergedProps.imageAlt,
-        imageClass: imageClass !== null && imageClass !== void 0 ? imageClass : mergedProps.imageClass,
-        imageSize: imageSize !== null && imageSize !== void 0 ? imageSize : mergedProps.imageSize,
-        cta: cta !== null && cta !== void 0 ? cta : mergedProps.cta,
-        ctaClass: ctaClass !== null && ctaClass !== void 0 ? ctaClass : mergedProps.ctaClass,
-        // CTA Buttons
-        showPrimaryCTA: showPrimaryCTA !== null && showPrimaryCTA !== void 0 ? showPrimaryCTA : mergedProps.showPrimaryCTA,
-        showSecondaryCTA: showSecondaryCTA !== null && showSecondaryCTA !== void 0 ? showSecondaryCTA : mergedProps.showSecondaryCTA,
-        showAccentCTA: showAccentCTA !== null && showAccentCTA !== void 0 ? showAccentCTA : mergedProps.showAccentCTA,
-        primaryButtonOutlined: primaryButtonOutlined !== null && primaryButtonOutlined !== void 0 ? primaryButtonOutlined : mergedProps.primaryButtonOutlined,
-        secondaryButtonOutlined: secondaryButtonOutlined !== null && secondaryButtonOutlined !== void 0 ? secondaryButtonOutlined : mergedProps.secondaryButtonOutlined,
-        accentButtonOutlined: accentButtonOutlined !== null && accentButtonOutlined !== void 0 ? accentButtonOutlined : mergedProps.accentButtonOutlined,
-        ctaPrimaryUrl: ctaPrimaryUrl !== null && ctaPrimaryUrl !== void 0 ? ctaPrimaryUrl : mergedProps.ctaPrimaryUrl,
-        ctaSecondaryUrl: ctaSecondaryUrl !== null && ctaSecondaryUrl !== void 0 ? ctaSecondaryUrl : mergedProps.ctaSecondaryUrl,
-        ctaAccentUrl: ctaAccentUrl !== null && ctaAccentUrl !== void 0 ? ctaAccentUrl : mergedProps.ctaAccentUrl,
-        ctaPrimaryText: ctaPrimaryText !== null && ctaPrimaryText !== void 0 ? ctaPrimaryText : mergedProps.ctaPrimaryText,
-        ctaSecondaryText: ctaSecondaryText !== null && ctaSecondaryText !== void 0 ? ctaSecondaryText : mergedProps.ctaSecondaryText,
-        ctaAccentText: ctaAccentText !== null && ctaAccentText !== void 0 ? ctaAccentText : mergedProps.ctaAccentText,
-        ctaGap: ctaGap !== null && ctaGap !== void 0 ? ctaGap : mergedProps.ctaGap,
-        ctaFlexJustify: ctaFlexJustify !== null && ctaFlexJustify !== void 0 ? ctaFlexJustify : mergedProps.ctaFlexJustify,
-        ctaPrimaryRounded: ctaPrimaryRounded !== null && ctaPrimaryRounded !== void 0 ? ctaPrimaryRounded : mergedProps.ctaPrimaryRounded,
-        ctaPrimaryFlat: ctaPrimaryFlat !== null && ctaPrimaryFlat !== void 0 ? ctaPrimaryFlat : mergedProps.ctaPrimaryFlat,
-        ctaPrimaryPrefix: ctaPrimaryPrefix !== null && ctaPrimaryPrefix !== void 0 ? ctaPrimaryPrefix : mergedProps.ctaPrimaryPrefix,
-        ctaPrimarySuffix: ctaPrimarySuffix !== null && ctaPrimarySuffix !== void 0 ? ctaPrimarySuffix : mergedProps.ctaPrimarySuffix,
-        ctaSecondaryRounded: ctaSecondaryRounded !== null && ctaSecondaryRounded !== void 0 ? ctaSecondaryRounded : mergedProps.ctaSecondaryRounded,
-        ctaSecondaryFlat: ctaSecondaryFlat !== null && ctaSecondaryFlat !== void 0 ? ctaSecondaryFlat : mergedProps.ctaSecondaryFlat,
-        ctaSecondaryPrefix: ctaSecondaryPrefix !== null && ctaSecondaryPrefix !== void 0 ? ctaSecondaryPrefix : mergedProps.ctaSecondaryPrefix,
-        ctaSecondarySuffix: ctaSecondarySuffix !== null && ctaSecondarySuffix !== void 0 ? ctaSecondarySuffix : mergedProps.ctaSecondarySuffix,
-        ctaAccentRounded: ctaAccentRounded !== null && ctaAccentRounded !== void 0 ? ctaAccentRounded : mergedProps.ctaAccentRounded,
-        ctaAccentFlat: ctaAccentFlat !== null && ctaAccentFlat !== void 0 ? ctaAccentFlat : mergedProps.ctaAccentFlat,
-        ctaAccentPrefix: ctaAccentPrefix !== null && ctaAccentPrefix !== void 0 ? ctaAccentPrefix : mergedProps.ctaAccentPrefix,
-        ctaAccentSuffix: ctaAccentSuffix !== null && ctaAccentSuffix !== void 0 ? ctaAccentSuffix : mergedProps.ctaAccentSuffix,
-        primaryIconSize: primaryIconSize !== null && primaryIconSize !== void 0 ? primaryIconSize : mergedProps.primaryIconSize,
-        secondaryIconSize: secondaryIconSize !== null && secondaryIconSize !== void 0 ? secondaryIconSize : mergedProps.secondaryIconSize,
-        accentIconSize: accentIconSize !== null && accentIconSize !== void 0 ? accentIconSize : mergedProps.accentIconSize,
-    };
+    // 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' : '',
@@ -225,7 +56,7 @@ var Vista = function (_a) {
     var TextContent = (react_1.default.createElement("div", { className: "vista-text ".concat(final.layout === 'centered' ? "text-center" : "", " ").concat(final.textWrapperClass) },
         final.heading && (react_1.default.createElement(Text_1.default, { block: true, size: final.headingSize, weight: final.headingWeight, color: final.headingColor, funcss: final.headingClass }, final.heading)),
         final.subheading && (react_1.default.createElement(Text_1.default, { block: true, size: final.subheadingSize, weight: final.subheadingWeight, color: final.subheadingColor, funcss: "mt-2 ".concat(final.subheadingClass) }, final.subheading)),
-        final.content && (react_1.default.createElement(Text_1.default, { block: true, size: final.contentSize, weight: final.contentWeight, color: final.contentColor, funcss: "mt-4 ".concat(final.contentClass), article: true }, children || (typeof final.content === 'string' ? react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: final.content } }) : final.content))),
+        final.content && (react_1.default.createElement(Text_1.default, { block: true, size: final.contentSize, weight: final.contentWeight, color: final.contentColor, funcss: "mt-4 ".concat(final.contentClass), article: true }, localProps.children || (typeof final.content === 'string' ? react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: final.content } }) : final.content))),
         final.cta ? (react_1.default.createElement("div", { className: "mt-6 ".concat(final.ctaClass) }, final.cta)) : (react_1.default.createElement(CTAButtons, null))));
     // Enhanced Image Content - uses imageUrl if no image component provided
     var ImageContent = (final.image || final.imageUrl) && (react_1.default.createElement("div", { className: "vista-image ".concat(final.imageWrapperClass) }, final.image ? (final.image) : (react_1.default.createElement("img", { src: final.imageUrl, alt: final.imageAlt || 'Vista image', className: "".concat(final.imageClass), style: {
@@ -244,7 +75,7 @@ var Vista = function (_a) {
     };
     var primaryColor = (0, getCssVariable_1.getCssVariableValue)('primary');
     var secondaryColor = (0, getCssVariable_1.getCssVariableValue)('secondary');
-    var gradientStyle = __assign({ position: 'absolute', width: final.gradientSize, height: final.gradientSize, background: final.gradientColors || "radial-gradient(circle, ".concat(primaryColor, ", ").concat(secondaryColor, ")"), opacity: final.opacity, filter: "blur(".concat(final.blurry, "px)"), pointerEvents: 'none', zIndex: 0 }, positionStyles[final.gradientPosition]);
+    var gradientStyle = __assign({ position: 'absolute', width: final.gradientSize || "200px", height: final.gradientSize || "200px", background: final.gradientColors || "radial-gradient(circle, ".concat(primaryColor, ", ").concat(secondaryColor, ")"), opacity: final.opacity, filter: "blur(".concat(final.blurry || 4, "rem)"), pointerEvents: 'none', zIndex: 0 }, positionStyles[final.gradientPosition]);
     return (react_1.default.createElement(ScrollInView_1.default, null,
         react_1.default.createElement("div", { className: "vista \n          ".concat(final.pattern === 'grid' ? 'grid-bg' :
                 final.pattern === 'dots' ? 'bg-pattern-dots' :