funuicss 3.6.8 → 3.6.10

package/css/fun.css

@@ -1953,7 +1953,9 @@ link:hover {
 .text-dark{
   color: var(--dark) !important;
 }
-
+.text-default{
+  color: var(--text-color) !important;
+}
 .text-gradient,
 .hover-text-gradient:hover {
   background: -webkit-linear-gradient(var(--gradientColors));
@@ -1987,7 +1989,7 @@ body {
   background-color: var(--page-bg) !important;
   color: var(--text-color) !important;
 }
-.bg{
+.bg, .page-bg{
   background-color: var(--page-bg) !important;
 }
 
@@ -3223,16 +3225,13 @@ border-radius: var(--borderRadius);
 
 .main-content {
   flex: 1;
-  padding: 1rem 5px;
   overflow-y: auto;
 }
 
 .sidebar-link {
-  display: flex;
-  align-items: center !important;
-  gap: 0.5rem;
+ text-align: left !important;
+ justify-content: flex-start !important;
   text-decoration: none;
-  border-radius: 0.3rem;
 }
 
 
@@ -3493,7 +3492,6 @@ border-radius: var(--borderRadius);
 }
 
 
-.button
 /*inputs*/
 .input {
   padding: var(--inputPadding);
@@ -3559,17 +3557,6 @@ border-radius: var(--borderRadius);
   display: none;
 }
 
-.input.success-input{
-  border-bottom:var(--inputBorder) solid var(--success) !important;
-}
-
-
-.input.warning-input{
-  border-bottom:var(--inputBorder) solid var(--warning) !important;
-}
-.input.danger-input{
-  border-bottom:var(--inputBorder) solid var(--danger) !important;
-}
 .input.success-input ,
 .warning-input,
 .input.danger-input:focus
@@ -3578,8 +3565,7 @@ outline: none !important;
 }
 input , select {height: var(--inputButtonHeight);   border-radius: var(--radius);}
 textarea{border-radius: var(--radius) !important; height: fit-content !important;}
-.input.flat{border-radius: 0;}
-
+.input.flat{border-radius: 0 !important;}
 .input:focus {
   border-bottom: var(--inputBorder) solid var(--primary);
 }
@@ -3625,9 +3611,7 @@ background-color: rgba(var(--borderRgb), 0.3);
   box-shadow: 0 0 0 3px rgba(var(--borderRgb), 0.1);
 }
 
-.input.borderless {
-  border: none;
-}
+.input.borderless {border: none !important;}
 .input.borderless:focus {
   border: none;
 }
@@ -4671,6 +4655,7 @@ th {
 
 .accordion {
 width: 100%;
+overflow: visible !important;
 }
 
 .accordion-item {
@@ -4705,7 +4690,6 @@ cursor: pointer;
 
 .accordion-content {
 max-height: 0;
-overflow: hidden;
 transition: max-height 1s ease-in-out, opacity 0.3s ease;
 opacity: 0;
 }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.6.8",
+  "version": "3.6.10",
   "name": "funuicss",
   "description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
   "main": "index.js",

package/ui/accordion/Accordion.d.ts

@@ -26,6 +26,7 @@ export type AccordionProps = {
     iconClass?: string;
     contentClass?: string;
     activeClass?: string;
+    funcss?: string;
 };
 declare const Accordion: React.FC<AccordionProps>;
 export default Accordion;

package/ui/accordion/Accordion.js

@@ -59,14 +59,14 @@ var AccordionItem = function (_a) {
                 react_1.default.createElement("div", { className: "col fit" }, title)),
             react_1.default.createElement("div", { style: { lineHeight: 0 }, className: "".concat(iconClass, " ").concat(isOpen ? 'accordion-rotated' : '') },
                 react_1.default.createElement(pi_1.PiCaretDown, null))),
-        react_1.default.createElement("div", { className: "accordion-content ".concat(contentClass, " ").concat(isOpen ? 'open' : '') },
+        react_1.default.createElement("div", { style: { overflow: isOpen ? 'visible' : 'hidden' }, className: "accordion-content ".concat(contentClass, " ").concat(isOpen ? 'open' : '') },
             react_1.default.createElement("div", { className: "accordion-inner" }, content))));
 };
 exports.AccordionItem = AccordionItem;
 var Accordion = function (_a) {
     var _b;
-    var items = _a.items, _c = _a.allowMultiple, allowMultiple = _c === void 0 ? false : _c, _d = _a.defaultOpenIndexes, defaultOpenIndexes = _d === void 0 ? [] : _d, itemClass = _a.itemClass, titleClass = _a.titleClass, iconClass = _a.iconClass, contentClass = _a.contentClass, activeClass = _a.activeClass;
-    var _e = (0, react_1.useState)(allowMultiple ? defaultOpenIndexes : [(_b = defaultOpenIndexes[0]) !== null && _b !== void 0 ? _b : -1]), openIndexes = _e[0], setOpenIndexes = _e[1];
+    var items = _a.items, _c = _a.allowMultiple, allowMultiple = _c === void 0 ? false : _c, _d = _a.defaultOpenIndexes, defaultOpenIndexes = _d === void 0 ? [] : _d, itemClass = _a.itemClass, titleClass = _a.titleClass, iconClass = _a.iconClass, contentClass = _a.contentClass, activeClass = _a.activeClass, _e = _a.funcss, funcss = _e === void 0 ? '' : _e;
+    var _f = (0, react_1.useState)(allowMultiple ? defaultOpenIndexes : [(_b = defaultOpenIndexes[0]) !== null && _b !== void 0 ? _b : -1]), openIndexes = _f[0], setOpenIndexes = _f[1];
     var toggleIndex = function (index) {
         if (allowMultiple) {
             if (openIndexes.includes(index)) {
@@ -80,6 +80,6 @@ var Accordion = function (_a) {
             setOpenIndexes(openIndexes.includes(index) ? [] : [index]);
         }
     };
-    return (react_1.default.createElement("div", { className: "accordion" }, items.map(function (item, index) { return (react_1.default.createElement(exports.AccordionItem, { key: index, index: index, icon: item.icon, title: item.title, content: item.content, isOpen: openIndexes.includes(index), onToggle: function () { return toggleIndex(index); }, itemClass: itemClass, titleClass: titleClass, iconClass: iconClass, contentClass: contentClass, activeClass: activeClass })); })));
+    return (react_1.default.createElement("div", { className: "accordion ".concat(funcss) }, items.map(function (item, index) { return (react_1.default.createElement(exports.AccordionItem, { key: index, index: index, icon: item.icon, title: item.title, content: item.content, isOpen: openIndexes.includes(index), onToggle: function () { return toggleIndex(index); }, itemClass: itemClass, titleClass: titleClass, iconClass: iconClass, contentClass: contentClass, activeClass: activeClass })); })));
 };
 exports.default = Accordion;

package/ui/input/Input.js

@@ -73,7 +73,7 @@ var generateInputClasses = function (_a) {
     var bgClass = bg || '';
     var flatClass = flat ? 'flat' : '';
     var cornerClass = leftRounded ? 'leftRounded' : rightRounded ? 'rightRounded' : '';
-    var borderClass = bordered ? 'borderedInput' : borderless ? 'borderless' : '';
+    var borderClass = bordered ? 'borderedInput' : borderless ? 'borderless' : (!bordered && !borderless ? 'borderedInput' : '');
     return "\n    ".concat(statusClass, "\n    ").concat(roundedClass, "\n    ").concat(bgClass, "\n    ").concat(funcss || '', "\n    ").concat(flatClass, "\n    ").concat(cornerClass, "\n    ").concat(borderClass, "\n    ").concat(additionalClasses, "\n    input\n  ").trim().replace(/\s+/g, ' ');
 };
 // Iconic Input Wrapper Component
@@ -95,8 +95,24 @@ var TextInput = function (_a) {
     var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, _b = _a.fullWidth, fullWidth = _b === void 0 ? true : _b, flat = _a.flat, bordered = _a.bordered, borderless = _a.borderless, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, iconicBg = _a.iconicBg, _c = _a.type, type = _c === void 0 ? 'text' : _c, label = _a.label, _d = _a.variant, variant = _d === void 0 ? '' : _d, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "iconicBg", "type", "label", "variant"]);
     // Use the component config hook
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
-    // Merge config with local props - local props should override config
-    var mergedProps = mergeWithLocal(__assign({ status: status, funcss: funcss, bg: bg, fullWidth: fullWidth, flat: flat, bordered: bordered, borderless: borderless, rounded: rounded, leftRounded: leftRounded, rightRounded: rightRounded, startIcon: startIcon, endIcon: endIcon, iconicBg: iconicBg }, rest)).props;
+    // Merge config with local props - local props override config
+    var mergedProps = mergeWithLocal({
+        status: status,
+        funcss: funcss,
+        bg: bg,
+        fullWidth: fullWidth,
+        flat: flat,
+        bordered: bordered,
+        borderless: borderless,
+        rounded: rounded,
+        leftRounded: leftRounded,
+        rightRounded: rightRounded,
+        startIcon: startIcon,
+        endIcon: endIcon,
+        iconicBg: iconicBg,
+    }).props;
+    // Use theme variant for fallback
+    var themeVariant = (0, theme_1.useVariant)().variant;
     var className = generateInputClasses({
         status: mergedProps.status,
         rounded: mergedProps.rounded,
@@ -106,10 +122,10 @@ var TextInput = function (_a) {
         leftRounded: mergedProps.leftRounded,
         rightRounded: mergedProps.rightRounded,
         bordered: mergedProps.bordered,
-        borderless: mergedProps.borderless
+        borderless: mergedProps.borderless,
     });
     var style = mergedProps.fullWidth ? { width: '100%' } : undefined;
-    var inputElement = (react_1.default.createElement("input", __assign({ id: id, name: name, className: className, onChange: onChange, defaultValue: defaultValue, type: type, placeholder: label, style: style, value: value }, mergedProps)));
+    var inputElement = (react_1.default.createElement("input", __assign({ id: id, name: name, className: className, onChange: onChange, defaultValue: defaultValue, type: type, placeholder: label, style: style, value: value }, rest, mergedProps)));
     return (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, inputElement));
 };
 exports.TextInput = TextInput;
@@ -118,8 +134,24 @@ var SelectInput = function (_a) {
     var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, bordered = _a.bordered, borderless = _a.borderless, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, iconicBg = _a.iconicBg, _b = _a.options, options = _b === void 0 ? [] : _b, _c = _a.variant, variant = _c === void 0 ? '' : _c, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "iconicBg", "options", "variant"]);
     // Use the component config hook
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
-    // Merge config with local props - local props should override config
-    var mergedProps = mergeWithLocal(__assign({ status: status, funcss: funcss, bg: bg, fullWidth: fullWidth, flat: flat, bordered: bordered, borderless: borderless, rounded: rounded, leftRounded: leftRounded, rightRounded: rightRounded, startIcon: startIcon, endIcon: endIcon, iconicBg: iconicBg }, rest)).props;
+    // Merge config with local props
+    var mergedProps = mergeWithLocal({
+        status: status,
+        funcss: funcss,
+        bg: bg,
+        fullWidth: fullWidth,
+        flat: flat,
+        bordered: bordered,
+        borderless: borderless,
+        rounded: rounded,
+        leftRounded: leftRounded,
+        rightRounded: rightRounded,
+        startIcon: startIcon,
+        endIcon: endIcon,
+        iconicBg: iconicBg,
+    }).props;
+    // Use theme variant for fallback
+    var themeVariant = (0, theme_1.useVariant)().variant;
     var className = generateInputClasses({
         status: mergedProps.status,
         rounded: mergedProps.rounded,
@@ -129,10 +161,10 @@ var SelectInput = function (_a) {
         leftRounded: mergedProps.leftRounded,
         rightRounded: mergedProps.rightRounded,
         bordered: mergedProps.bordered,
-        borderless: mergedProps.borderless
+        borderless: mergedProps.borderless,
     });
     var style = mergedProps.fullWidth ? { width: '100%' } : undefined;
-    var selectElement = (react_1.default.createElement("select", __assign({ id: id, name: name, className: className, onChange: onChange, defaultValue: defaultValue, value: value, style: style }, mergedProps), options.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.text)); })));
+    var selectElement = (react_1.default.createElement("select", __assign({ id: id, name: name, className: className, onChange: onChange, defaultValue: defaultValue, value: value, style: style }, rest, mergedProps), options.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.text)); })));
     return (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, selectElement));
 };
 exports.SelectInput = SelectInput;
@@ -141,8 +173,24 @@ var TextareaInput = function (_a) {
     var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, status = _a.status, funcss = _a.funcss, bg = _a.bg, fullWidth = _a.fullWidth, flat = _a.flat, bordered = _a.bordered, borderless = _a.borderless, rounded = _a.rounded, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, startIcon = _a.startIcon, endIcon = _a.endIcon, iconicBg = _a.iconicBg, label = _a.label, _b = _a.rows, rows = _b === void 0 ? 2 : _b, _c = _a.variant, variant = _c === void 0 ? '' : _c, rest = __rest(_a, ["id", "name", "value", "defaultValue", "onChange", "status", "funcss", "bg", "fullWidth", "flat", "bordered", "borderless", "rounded", "leftRounded", "rightRounded", "startIcon", "endIcon", "iconicBg", "label", "rows", "variant"]);
     // Use the component config hook
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
-    // Merge config with local props - local props should override config
-    var mergedProps = mergeWithLocal(__assign({ status: status, funcss: funcss, bg: bg, fullWidth: fullWidth, flat: flat, bordered: bordered, borderless: borderless, rounded: rounded, leftRounded: leftRounded, rightRounded: rightRounded, startIcon: startIcon, endIcon: endIcon, iconicBg: iconicBg }, rest)).props;
+    // Merge config with local props
+    var mergedProps = mergeWithLocal({
+        status: status,
+        funcss: funcss,
+        bg: bg,
+        fullWidth: fullWidth,
+        flat: flat,
+        bordered: bordered,
+        borderless: borderless,
+        rounded: rounded,
+        leftRounded: leftRounded,
+        rightRounded: rightRounded,
+        startIcon: startIcon,
+        endIcon: endIcon,
+        iconicBg: iconicBg,
+    }).props;
+    // Use theme variant for fallback
+    var themeVariant = (0, theme_1.useVariant)().variant;
     var className = generateInputClasses({
         status: mergedProps.status,
         rounded: mergedProps.rounded,
@@ -152,10 +200,10 @@ var TextareaInput = function (_a) {
         leftRounded: mergedProps.leftRounded,
         rightRounded: mergedProps.rightRounded,
         bordered: mergedProps.bordered,
-        borderless: mergedProps.borderless
+        borderless: mergedProps.borderless,
     });
     var style = mergedProps.fullWidth ? { width: '100%' } : undefined;
-    var textareaElement = (react_1.default.createElement("textarea", __assign({ id: id, name: name, className: className, onChange: onChange, defaultValue: defaultValue, placeholder: label, style: style, value: value, rows: rows }, mergedProps)));
+    var textareaElement = (react_1.default.createElement("textarea", __assign({ id: id, name: name, className: className, onChange: onChange, defaultValue: defaultValue, placeholder: label, style: style, value: value, rows: rows }, rest, mergedProps)));
     return (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, textareaElement));
 };
 exports.TextareaInput = TextareaInput;
@@ -165,8 +213,24 @@ var FileInput = function (_a) {
     var _e = (0, react_1.useState)(''), fileName = _e[0], setFileName = _e[1];
     // Use the component config hook
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
-    // Merge config with local props - local props should override config
-    var mergedProps = mergeWithLocal(__assign({ status: status, funcss: funcss, bg: bg, fullWidth: fullWidth, flat: flat, rounded: rounded, leftRounded: leftRounded, rightRounded: rightRounded, startIcon: startIcon, endIcon: endIcon, iconicBg: iconicBg }, rest)).props;
+    // Merge config with local props
+    var mergedProps = mergeWithLocal({
+        status: status,
+        funcss: funcss,
+        bg: bg,
+        fullWidth: fullWidth,
+        flat: flat,
+        rounded: rounded,
+        leftRounded: leftRounded,
+        rightRounded: rightRounded,
+        startIcon: startIcon,
+        endIcon: endIcon,
+        iconicBg: iconicBg,
+        bordered: rest.bordered,
+        borderless: rest.borderless,
+    }).props;
+    // Use theme variant for fallback
+    var themeVariant = (0, theme_1.useVariant)().variant;
     var handleChange = function (e) {
         var _a;
         var file = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
@@ -192,7 +256,7 @@ var FileInput = function (_a) {
         var style = mergedProps.fullWidth ? { width: '100%' } : undefined;
         var fileInputElement = (react_1.default.createElement("div", { className: "fileInput" },
             button || (react_1.default.createElement(Button_1.default, { funcss: mergedProps.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 }, mergedProps))));
+            react_1.default.createElement("input", __assign({ id: id, name: name, className: className, onChange: handleChange, type: "file", style: style, value: value }, rest, mergedProps))));
         return (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, fileInputElement));
     }
     var uploadElement = (react_1.default.createElement("div", { className: "_upload_container" },
@@ -206,7 +270,7 @@ var FileInput = function (_a) {
                     width: '100%',
                 } }, fileName || label),
             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" }, mergedProps))));
+        react_1.default.createElement("input", __assign({ onChange: handleChange, type: "file", id: id, className: "_upload_input" }, rest, mergedProps))));
     return (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, uploadElement));
 };
 exports.FileInput = FileInput;
@@ -216,9 +280,8 @@ var Input = function (_a) {
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
     // Merge config with local props
     var mergedProps = mergeWithLocal(__assign(__assign({}, props), { startIcon: startIcon, endIcon: endIcon, iconicBg: iconicBg })).props;
-    // Handle legacy noBorder prop and theme variant
-    var themeVariant = (0, theme_1.useVariant)().variant;
-    var inputProps = __assign(__assign({}, mergedProps), { variant: variant, bordered: themeVariant === 'standard' ? true : mergedProps.bordered, borderless: themeVariant === 'minimal' ? true : noBorder || mergedProps.borderless });
+    // Handle legacy noBorder prop
+    var inputProps = __assign(__assign(__assign({}, props), mergedProps), { variant: variant, borderless: noBorder !== undefined ? noBorder : (props.borderless !== undefined ? props.borderless : mergedProps.borderless) });
     if (select) {
         return react_1.default.createElement(exports.SelectInput, __assign({}, inputProps));
     }

package/ui/sidebar/SideBar.js

@@ -43,6 +43,7 @@ var RowFlex_1 = __importDefault(require("../specials/RowFlex"));
 var Text_1 = __importDefault(require("../text/Text"));
 var navigation_1 = require("next/navigation");
 var theme_1 = require("../theme/theme");
+var Button_1 = __importDefault(require("../button/Button"));
 function SideBar(_a) {
     var _b;
     var _c = _a.funcss, funcss = _c === void 0 ? '' : _c, _d = _a.position, position = _d === void 0 ? 'left' : _d, _e = _a.open, open = _e === void 0 ? false : _e, header = _a.header, content = _a.content, footer = _a.footer, _f = _a.top, top = _f === void 0 ? 0 : _f, _g = _a.sidebarWidth, sidebarWidth = _g === void 0 ? 250 : _g, _h = _a.iconCSS, iconCSS = _h === void 0 ? '' : _h, _j = _a.sidebarCss, sidebarCss = _j === void 0 ? '' : _j, activeCss = _a.activeCss, _k = _a.bodyCss, bodyCss = _k === void 0 ? '' : _k, _l = _a.popIcon, popIcon = _l === void 0 ? false : _l, _m = _a.dividers, dividers = _m === void 0 ? false : _m, _o = _a.links, links = _o === void 0 ? [] : _o, children = _a.children, onClose = _a.onClose;
@@ -113,21 +114,22 @@ function SideBar(_a) {
                     return (react_1.default.createElement("div", { key: section, className: "sidebar-section ".concat(dividers ? "bt" : "", " pt-2 pb-2") },
                         react_1.default.createElement(Text_1.default, { size: "sm", funcss: "opacity-6 p-1 pl-2 pr-2" }, section),
                         sectionLinks.map(function (link, index) {
-                            var isActive = link.onClick ? index.toString() === selectedOption : pathname === link.uri;
+                            var isActive = link.onClick
+                                ? selectedOption === "".concat(section, "-").concat(index)
+                                : pathname === link.uri;
                             return (react_1.default.createElement("div", { onClick: function () {
                                     if (isMobile) {
                                         handleClose();
                                     }
                                     if (link === null || link === void 0 ? void 0 : link.onClick) {
                                         link.onClick();
-                                        setselectedOption(index.toString());
+                                        setselectedOption("".concat(section, "-").concat(index));
                                     }
                                     else {
                                         window.location.href = link.uri;
                                     }
                                 }, key: link.uri },
-                                react_1.default.createElement("div", { className: "p-1 pl-2 pr-2 button sidebar-link  ".concat(isActive ? "primary  ".concat(activeCss || '') : 'hoverable') },
-                                    react_1.default.createElement("span", { className: "".concat(iconCSS || '', " \n                            ").concat((variant === 'standard' || popIcon) ? "p-1  ".concat(isActive ? "primary" : "lighter border", " central") : (variant === "minimal" && !isActive) ? "p1 central lighter " : ""), style: { lineHeight: 0, borderRadius: "0.4rem" } }, link.icon),
+                                react_1.default.createElement(Button_1.default, { fullWidth: true, small: true, funcss: "p-1 pl-2 pr-2  sidebar-link text-left  ".concat(isActive ? "primary  ".concat(activeCss || '') : 'hoverable'), startIcon: react_1.default.createElement("span", { className: "".concat(iconCSS || '', " \n                            ").concat((variant === 'standard' || popIcon) ? "p-1  ".concat(isActive ? "primary" : "lighter border", " central") : (variant === "minimal" && !isActive) ? "p-1 central lighter " : ""), style: { lineHeight: 0, borderRadius: "0.4rem" } }, link.icon) },
                                     react_1.default.createElement(Text_1.default, { text: link.text, size: "sm", weight: 400 }))));
                         })));
                 }))),

package/ui/theme/theme.d.ts

@@ -15,6 +15,8 @@ interface ProjectData {
 interface ThemeProviderProps {
     theme: ThemeName;
     projectId: string;
+    funcss?: string;
+    minHeight?: string;
     children: ReactNode;
 }
 interface ThemeContextType {

package/ui/theme/theme.js

@@ -190,13 +190,13 @@ var subscribeToTheme = function (projectId, callback) {
 /*                                COMPONENT                                   */
 /* -------------------------------------------------------------------------- */
 var ThemeProvider = function (_a) {
-    var theme = _a.theme, children = _a.children, projectId = _a.projectId;
-    var _b = (0, react_1.useState)('standard'), variant = _b[0], setVariant = _b[1];
-    var _c = (0, react_1.useState)({}), themeConfig = _c[0], setThemeConfig = _c[1];
-    var _d = (0, react_1.useState)(null), projectData = _d[0], setProjectData = _d[1];
-    var _e = (0, react_1.useState)(true), isLoading = _e[0], setIsLoading = _e[1];
-    var _f = (0, react_1.useState)(true), isInitialLoad = _f[0], setIsInitialLoad = _f[1];
-    var _g = (0, react_1.useState)(null), error = _g[0], setError = _g[1];
+    var theme = _a.theme, children = _a.children, _b = _a.funcss, funcss = _b === void 0 ? '' : _b, _c = _a.minHeight, minHeight = _c === void 0 ? '100vh' : _c, projectId = _a.projectId;
+    var _d = (0, react_1.useState)('standard'), variant = _d[0], setVariant = _d[1];
+    var _e = (0, react_1.useState)({}), themeConfig = _e[0], setThemeConfig = _e[1];
+    var _f = (0, react_1.useState)(null), projectData = _f[0], setProjectData = _f[1];
+    var _g = (0, react_1.useState)(true), isLoading = _g[0], setIsLoading = _g[1];
+    var _h = (0, react_1.useState)(true), isInitialLoad = _h[0], setIsInitialLoad = _h[1];
+    var _j = (0, react_1.useState)(null), error = _j[0], setError = _j[1];
     /* -------------------------- Apply base theme --------------------------- */
     (0, react_1.useEffect)(function () {
         var root = document.documentElement;
@@ -303,10 +303,10 @@ var ThemeProvider = function (_a) {
     }); }, [variant, themeConfig, projectData, isLoading, isInitialLoad, error]);
     /* ------------------------------- Render ------------------------------- */
     return (react_1.default.createElement(ThemeContext.Provider, { value: contextValue },
-        react_1.default.createElement("div", { className: "theme-".concat(theme), style: {
+        react_1.default.createElement("div", { className: "theme-".concat(theme, " ").concat(funcss), style: {
                 backgroundColor: 'var(--page-bg)',
                 color: 'var(--text-color)',
-                minHeight: '100vh',
+                minHeight: minHeight,
                 // Smooth transition when theme changes
                 transition: isInitialLoad ? 'none' : 'background-color 0.3s ease, color 0.3s ease',
             } }, children)));

package/ui/vista/Vista.d.ts

@@ -12,12 +12,30 @@ type VistaProps = {
     blurry?: number;
     opacity?: number;
     heading?: React.ReactNode;
+    headingSize?: string;
+    headingWeight?: number;
+    headingColor?: string;
+    headingClass?: string;
     subheading?: React.ReactNode;
+    subheadingSize?: string;
+    subheadingWeight?: number;
+    subheadingColor?: string;
+    subheadingClass?: string;
     content?: React.ReactNode;
+    contentSize?: string;
+    contentWeight?: number;
+    contentColor?: string;
+    contentClass?: string;
     image?: React.ReactNode;
+    imageUrl?: string;
+    imageAlt?: string;
+    imageClass?: string;
+    imageSize?: string;
     cta?: React.ReactNode;
+    ctaClass?: string;
     sectionClass?: string;
     containerClass?: string;
+    gap?: string;
     textWrapperClass?: string;
     imageWrapperClass?: string;
     children?: React.ReactNode;
@@ -30,6 +48,7 @@ type VistaProps = {
     fadeRadial?: boolean;
     fadeOverlayDarken?: number;
     backgroundImage?: string;
+    variant?: string;
 };
 declare const Vista: React.FC<VistaProps>;
 export default Vista;

package/ui/vista/Vista.js

@@ -18,28 +18,86 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var ScrollInView_1 = __importDefault(require("../ScrollInView/ScrollInView"));
 var getCssVariable_1 = require("../../utils/getCssVariable");
+var componentUtils_1 = require("../../utils/componentUtils");
+var Text_1 = __importDefault(require("../text/Text"));
+var Col_1 = __importDefault(require("../grid/Col"));
 var 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, 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, 
+    // 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
-    _q = _a.showGradient, 
+    _8 = _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, _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;
+    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;
+    // Use the component config hook
+    var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Vista', variant).mergeWithLocal;
+    // Merge config with local props - local props should override config
+    var mergedProps = mergeWithLocal({
+        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,
+        // Enhanced content props
+        headingSize: headingSize,
+        headingWeight: headingWeight,
+        headingColor: headingColor,
+        headingClass: headingClass,
+        subheadingSize: subheadingSize,
+        subheadingWeight: subheadingWeight,
+        subheadingColor: subheadingColor,
+        subheadingClass: subheadingClass,
+        contentSize: contentSize,
+        contentWeight: contentWeight,
+        contentColor: contentColor,
+        contentClass: contentClass,
+        imageUrl: imageUrl,
+        imageSize: imageSize,
+        imageAlt: imageAlt,
+        imageClass: imageClass,
+        gap: gap,
+        ctaClass: ctaClass
+    }).props;
     var layoutClass = [
-        layout,
-        reverse ? 'reverse' : '',
-        "text-".concat(textAlign),
+        mergedProps.layout,
+        mergedProps.reverse ? 'reverse' : '',
+        "text-".concat(mergedProps.textAlign),
     ]
         .filter(Boolean)
         .join(' ');
-    var TextContent = (react_1.default.createElement("div", { className: "vista-text ".concat(textWrapperClass) },
-        heading,
-        subheading,
-        content,
-        cta,
-        children));
-    var ImageContent = image && (react_1.default.createElement("div", { className: "vista-image ".concat(imageWrapperClass) }, image));
-    var isCentered = layout === 'centered';
-    var isStacked = layout === 'stacked';
+    // Enhanced Text Content with flexible styling
+    var TextContent = (react_1.default.createElement("div", { className: "vista-text ".concat(mergedProps.layout === 'centered' ? "text-center" : "", " ").concat(mergedProps.textWrapperClass) },
+        heading && (react_1.default.createElement(Text_1.default, { block: true, size: mergedProps.headingSize, weight: mergedProps.headingWeight, color: mergedProps.headingColor, funcss: mergedProps.headingClass }, heading)),
+        subheading && (react_1.default.createElement(Text_1.default, { block: true, size: mergedProps.subheadingSize, weight: mergedProps.subheadingWeight, color: mergedProps.subheadingColor, funcss: "mt-2 ".concat(mergedProps.subheadingClass) }, subheading)),
+        content && (react_1.default.createElement(Text_1.default, { block: true, size: mergedProps.contentSize, weight: mergedProps.contentWeight, color: mergedProps.contentColor, funcss: "mt-4 ".concat(mergedProps.contentClass), article: true }, content || children)),
+        cta && (react_1.default.createElement("div", { className: "mt-6 ".concat(mergedProps.ctaClass) }, cta))));
+    // Enhanced Image Content - uses imageUrl if no image component provided
+    var ImageContent = (image || mergedProps.imageUrl) && (react_1.default.createElement("div", { className: "vista-image ".concat(mergedProps.imageWrapperClass) }, image ? (image) : (react_1.default.createElement("img", { src: mergedProps.imageUrl, alt: mergedProps.imageAlt || 'Vista image', className: "".concat(mergedProps.imageClass), style: {
+            objectFit: 'cover',
+            maxWidth: imageSize,
+            borderRadius: 'inherit'
+        } }))));
+    var isCentered = mergedProps.layout === 'centered';
+    var isStacked = mergedProps.layout === 'stacked';
     var positionStyles = {
         'top-left': { top: '-100px', left: '-100px' },
         'top-right': { top: '-100px', right: '-100px' },
@@ -49,59 +107,61 @@ var Vista = function (_a) {
     };
     var primaryColor = (0, getCssVariable_1.getCssVariableValue)('primary');
     var secondaryColor = (0, getCssVariable_1.getCssVariableValue)('secondary');
-    var gradientStyle = __assign({ position: 'absolute', width: gradientSize, height: gradientSize, background: gradientColors || "radial-gradient(circle, ".concat(primaryColor, ", ").concat(secondaryColor, ")"), opacity: opacity, filter: "blur(".concat(blurry, "px)"), pointerEvents: 'none', zIndex: 0 }, positionStyles[gradientPosition]);
+    var gradientStyle = __assign({ position: 'absolute', width: mergedProps.gradientSize, height: mergedProps.gradientSize, background: mergedProps.gradientColors || "radial-gradient(circle, ".concat(primaryColor, ", ").concat(secondaryColor, ")"), opacity: mergedProps.opacity, filter: "blur(".concat(mergedProps.blurry, "px)"), pointerEvents: 'none', zIndex: 0 }, positionStyles[mergedProps.gradientPosition]);
     return (react_1.default.createElement(ScrollInView_1.default, null,
-        react_1.default.createElement("div", { className: "vista \n          ".concat(pattern === 'grid' ? 'grid-bg' :
-                pattern === 'dots' ? 'bg-pattern-dots' :
-                    pattern === 'diagonal' ? 'bg-pattern-diagonal' :
-                        pattern === 'checkerboard' ? 'bg-pattern-checkerboard' :
-                            pattern === 'horizontal' ? 'bg-pattern-horizontal' :
-                                pattern === 'vertical' ? 'bg-pattern-vertical' : '', " \n            ").concat(bg, " ").concat(padding, " ").concat(layoutClass, " ").concat(sectionClass, " ").concat(funcss), style: { position: 'relative',
+        react_1.default.createElement("div", { className: "vista \n          ".concat(mergedProps.pattern === 'grid' ? 'grid-bg' :
+                mergedProps.pattern === 'dots' ? 'bg-pattern-dots' :
+                    mergedProps.pattern === 'diagonal' ? 'bg-pattern-diagonal' :
+                        mergedProps.pattern === 'checkerboard' ? 'bg-pattern-checkerboard' :
+                            mergedProps.pattern === 'horizontal' ? 'bg-pattern-horizontal' :
+                                mergedProps.pattern === 'vertical' ? 'bg-pattern-vertical' : '', " \n            ").concat(mergedProps.bg, " p-").concat(mergedProps.padding, " ").concat(layoutClass, " ").concat(mergedProps.sectionClass, " ").concat(mergedProps.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)") :
-                        pattern === 'diagonal' ? "repeating-linear-gradient(45deg, rgba(var(--borderRgb), ".concat(patternOpacity, "), rgba(var(--borderRgb), ").concat(patternOpacity, ") 1px, transparent 1px, transparent 10px)") :
-                            pattern === 'checkerboard' ? "linear-gradient(45deg, rgba(var(--borderRgb), ".concat(patternOpacity, ") 25%, transparent 25%), linear-gradient(-45deg, rgba(var(--borderRgb), ").concat(patternOpacity, ") 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(var(--borderRgb), ").concat(patternOpacity, ") 75%), linear-gradient(-45deg, transparent 75%, rgba(var(--borderRgb), ").concat(patternOpacity, ") 75%)") :
-                                pattern === 'horizontal' ? "linear-gradient(to bottom, rgba(var(--borderRgb), ".concat(patternOpacity, ") 1px, transparent 1px)") :
-                                    pattern === 'vertical' ? "linear-gradient(to right, rgba(var(--borderRgb), ".concat(patternOpacity, ") 1px, transparent 1px)") : ''
+                minHeight: "90vh",
+                backgroundImage: mergedProps.pattern === 'grid' ? "linear-gradient(to right, rgba(var(--borderRgb), ".concat(mergedProps.patternOpacity, ") 1px, transparent 1px),\n          linear-gradient(to bottom, rgba(var(--borderRgb), ").concat(mergedProps.patternOpacity, ") 1px, transparent 1px)") :
+                    mergedProps.pattern === 'dots' ? "radial-gradient(rgba(var(--borderRgb), ".concat(mergedProps.patternOpacity, ") 1px, transparent 1px)") :
+                        mergedProps.pattern === 'diagonal' ? "repeating-linear-gradient(45deg, rgba(var(--borderRgb), ".concat(mergedProps.patternOpacity, "), rgba(var(--borderRgb), ").concat(mergedProps.patternOpacity, ") 1px, transparent 1px, transparent 10px)") :
+                            mergedProps.pattern === 'checkerboard' ? "linear-gradient(45deg, rgba(var(--borderRgb), ".concat(mergedProps.patternOpacity, ") 25%, transparent 25%), linear-gradient(-45deg, rgba(var(--borderRgb), ").concat(mergedProps.patternOpacity, ") 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(var(--borderRgb), ").concat(mergedProps.patternOpacity, ") 75%), linear-gradient(-45deg, transparent 75%, rgba(var(--borderRgb), ").concat(mergedProps.patternOpacity, ") 75%)") :
+                                mergedProps.pattern === 'horizontal' ? "linear-gradient(to bottom, rgba(var(--borderRgb), ".concat(mergedProps.patternOpacity, ") 1px, transparent 1px)") :
+                                    mergedProps.pattern === 'vertical' ? "linear-gradient(to right, rgba(var(--borderRgb), ".concat(mergedProps.patternOpacity, ") 1px, transparent 1px)") : ''
             } },
-            showGradient && react_1.default.createElement("div", { style: gradientStyle }),
-            react_1.default.createElement("div", { className: "vista-container ".concat(containerClass), style: { position: 'relative', zIndex: 1 } }, isCentered || isStacked ? (react_1.default.createElement(react_1.default.Fragment, null,
-                (imgPosition === 'top') && ImageContent,
+            mergedProps.showGradient && react_1.default.createElement("div", { style: gradientStyle }),
+            react_1.default.createElement("div", { className: "vista-container ".concat(mergedProps.containerClass), style: { position: 'relative', zIndex: 1, gap: mergedProps.gap || "2rem" } }, isCentered || isStacked ? (react_1.default.createElement(react_1.default.Fragment, null,
+                (mergedProps.imgPosition === 'top') && ImageContent,
                 TextContent,
-                (imgPosition === 'bottom') && ImageContent)) : reverse ? (react_1.default.createElement(react_1.default.Fragment, null,
+                (mergedProps.imgPosition === 'bottom') && ImageContent)) : mergedProps.reverse ? (react_1.default.createElement(react_1.default.Fragment, null,
                 ImageContent,
                 TextContent)) : (react_1.default.createElement(react_1.default.Fragment, null,
-                (layout === 'imageLeft') && ImageContent,
+                (mergedProps.layout === 'imageLeft') && react_1.default.createElement(Col_1.default, null, ImageContent),
                 TextContent,
-                (layout === 'imageRight') && ImageContent))),
-            fade && (react_1.default.createElement("div", { style: {
+                (mergedProps.layout === 'imageRight') && react_1.default.createElement(Col_1.default, null, ImageContent)))),
+            mergedProps.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%)"),
+                    background: mergedProps.fadeRadial
+                        ? "radial-gradient(circle, transparent 0%, ".concat((0, getCssVariable_1.getCssVariableValue)(mergedProps.bg || 'page-bg'), " 100%)")
+                        : "linear-gradient(to ".concat(mergedProps.fadeDirection || 'bottom', ", ").concat((0, getCssVariable_1.getCssVariableValue)(mergedProps.bg || 'page-bg'), " 0%, transparent 100%)"),
                     zIndex: 0,
                     pointerEvents: 'none'
                 } })),
-            backgroundImage && (react_1.default.createElement("div", { style: {
+            mergedProps.backgroundImage && (react_1.default.createElement("div", { style: {
                     position: 'absolute',
                     inset: 0,
-                    backgroundImage: "url(".concat(backgroundImage, ")"),
+                    backgroundImage: "url(".concat(mergedProps.backgroundImage, ")"),
                     backgroundSize: 'cover',
                     backgroundPosition: 'center',
                     zIndex: -1,
                     width: '100%',
                     height: '100%',
                 } })),
-            backgroundImage && fadeOverlayDarken !== undefined && (react_1.default.createElement("div", { style: {
+            mergedProps.backgroundImage && mergedProps.fadeOverlayDarken !== undefined && (react_1.default.createElement("div", { style: {
                     position: 'absolute',
                     width: '100%',
                     height: '100%',
                     inset: 0,
-                    backgroundColor: "rgba(0, 0, 0, ".concat(fadeOverlayDarken, ")"),
+                    backgroundColor: "rgba(0, 0, 0, ".concat(mergedProps.fadeOverlayDarken, ")"),
                     zIndex: -1,
                 } })))));
 };

package/utils/componentUtils.js

@@ -74,9 +74,9 @@ var mergeComponentConfig = function (config, localProps) {
         };
     }
     return {
-        // Props: config overrides local only if variant exists
-        props: __assign(__assign({}, localProps), config.componentProps),
-        // Metadata
+        // FIXED: Local props should override config (correct order)
+        props: __assign(__assign({}, config.componentProps), localProps // Local props second (higher priority)
+        ),
         variant: config.actualVariant,
         hasConfig: true
     };