funuicss 3.6.14 → 3.6.16

package/ui/input/Input.js

@@ -65,6 +65,13 @@ 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");
+// Status icons mapping
+var statusIcons = {
+    success: react_1.default.createElement(pi_1.PiCheckCircle, null),
+    warning: react_1.default.createElement(pi_1.PiWarning, null),
+    danger: react_1.default.createElement(pi_1.PiX, null),
+    info: react_1.default.createElement(pi_1.PiInfo, null)
+};
 // Utility function to generate CSS classes
 var generateInputClasses = function (_a) {
     var status = _a.status, rounded = _a.rounded, bg = _a.bg, funcss = _a.funcss, flat = _a.flat, leftRounded = _a.leftRounded, rightRounded = _a.rightRounded, bordered = _a.bordered, borderless = _a.borderless, _b = _a.additionalClasses, additionalClasses = _b === void 0 ? '' : _b;
@@ -76,26 +83,47 @@ var generateInputClasses = function (_a) {
     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
+// Iconic Input Wrapper Component - Updated to support both prefix/suffix and startIcon/endIcon
 var IconicInputWrapper = function (_a) {
-    var startIcon = _a.startIcon, endIcon = _a.endIcon, iconicBg = _a.iconicBg, funcss = _a.funcss, children = _a.children;
-    if (!startIcon && !endIcon) {
+    var startIcon = _a.startIcon, endIcon = _a.endIcon, prefix = _a.prefix, suffix = _a.suffix, iconicBg = _a.iconicBg, funcss = _a.funcss, children = _a.children;
+    // Use prefix/suffix if provided, otherwise fall back to startIcon/endIcon
+    var effectiveStartIcon = prefix !== undefined ? prefix : startIcon;
+    var effectiveEndIcon = suffix !== undefined ? suffix : endIcon;
+    if (!effectiveStartIcon && !effectiveEndIcon) {
         return react_1.default.createElement(react_1.default.Fragment, null, children);
     }
-    return (react_1.default.createElement("div", { className: "icon-container ".concat(funcss || '') },
-        startIcon && (react_1.default.createElement("div", { className: "leftIcon", style: {
+    return (react_1.default.createElement("div", { className: "icon-container ".concat(effectiveStartIcon ? 'has-left-icon' : '', " ").concat(funcss || '') },
+        effectiveStartIcon && (react_1.default.createElement("div", { className: "leftIcon", style: {
                 backgroundColor: iconicBg || '',
                 border: iconicBg ? "0.1rem ".concat(iconicBg, " solid") : '',
-            } }, startIcon)),
-        react_1.default.createElement("div", { className: "icon_input_wrapper ".concat(startIcon ? 'lefticon' : '', " ").concat(endIcon ? 'righticon' : '') }, children),
-        endIcon && (react_1.default.createElement("div", { className: "rightIcon", style: { backgroundColor: iconicBg || '' } }, endIcon))));
+            } }, effectiveStartIcon)),
+        children,
+        effectiveEndIcon && (react_1.default.createElement("div", { className: "rightIcon", style: { backgroundColor: iconicBg || '' } }, effectiveEndIcon))));
+};
+// 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;
+    var showFloatingLabel = label && (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)),
+            children),
+        (helperText || status) && (react_1.default.createElement("div", { className: "input-helper-text ".concat(status ? "helper-".concat(status) : '') },
+            status && statusIcons[status] && (react_1.default.createElement("span", { className: "helper-icon" }, statusIcons[status])),
+            react_1.default.createElement("span", null, helperText)))));
 };
 // Text Input Component
 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 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, prefix = _a.prefix, suffix = _a.suffix, iconicBg = _a.iconicBg, _c = _a.type, type = _c === void 0 ? 'text' : _c, label = _a.label, helperText = _a.helperText, _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", "prefix", "suffix", "iconicBg", "type", "label", "helperText", "variant"]);
+    var _e = (0, react_1.useState)(false), isFocused = _e[0], setIsFocused = _e[1];
+    var _f = (0, react_1.useState)(value || defaultValue || ''), inputValue = _f[0], setInputValue = _f[1];
+    var inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        if (value !== undefined) {
+            setInputValue(value);
+        }
+    }, [value]);
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
-    // Merge config with local props - local props override config
     var mergedProps = mergeWithLocal({
         status: status,
         funcss: funcss,
@@ -109,9 +137,10 @@ var TextInput = function (_a) {
         rightRounded: rightRounded,
         startIcon: startIcon,
         endIcon: endIcon,
+        prefix: prefix,
+        suffix: suffix,
         iconicBg: iconicBg,
     }).props;
-    // Use theme variant for fallback
     var themeVariant = (0, theme_1.useVariant)().variant;
     var className = generateInputClasses({
         status: mergedProps.status,
@@ -125,16 +154,39 @@ var TextInput = function (_a) {
         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 }, rest, mergedProps)));
-    return (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, inputElement));
+    var handleChange = function (e) {
+        setInputValue(e.target.value);
+        if (onChange)
+            onChange(e);
+    };
+    var handleFocus = function (e) {
+        setIsFocused(true);
+        if (rest.onFocus)
+            rest.onFocus(e);
+    };
+    var handleBlur = function (e) {
+        setIsFocused(false);
+        if (rest.onBlur)
+            rest.onBlur(e);
+    };
+    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: !label ? rest.placeholder : '', style: style, value: value }, rest)));
+    var wrappedInput = (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, prefix: mergedProps.prefix, suffix: mergedProps.suffix, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, inputElement));
+    return (react_1.default.createElement(InputContainer, { startIcon: startIcon, prefix: prefix, label: label, status: mergedProps.status, helperText: helperText, isFocused: isFocused, hasValue: !!inputValue, fullWidth: mergedProps.fullWidth, id: id }, wrappedInput));
 };
 exports.TextInput = TextInput;
 // Select Component
 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 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, prefix = _a.prefix, suffix = _a.suffix, iconicBg = _a.iconicBg, _b = _a.options, options = _b === void 0 ? [] : _b, label = _a.label, helperText = _a.helperText, _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", "prefix", "suffix", "iconicBg", "options", "label", "helperText", "variant"]);
+    var _d = (0, react_1.useState)(false), isFocused = _d[0], setIsFocused = _d[1];
+    var _e = (0, react_1.useState)(value || defaultValue || ''), selectValue = _e[0], setSelectValue = _e[1];
+    (0, react_1.useEffect)(function () {
+        if (value !== undefined) {
+            setSelectValue(value);
+        }
+    }, [value]);
+    // For select inputs, label should always be active when there's a label
+    var selectHasValue = true; // Always true for select to keep label at top
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
-    // Merge config with local props
     var mergedProps = mergeWithLocal({
         status: status,
         funcss: funcss,
@@ -148,9 +200,10 @@ var SelectInput = function (_a) {
         rightRounded: rightRounded,
         startIcon: startIcon,
         endIcon: endIcon,
+        prefix: prefix,
+        suffix: suffix,
         iconicBg: iconicBg,
     }).props;
-    // Use theme variant for fallback
     var themeVariant = (0, theme_1.useVariant)().variant;
     var className = generateInputClasses({
         status: mergedProps.status,
@@ -164,16 +217,37 @@ var SelectInput = function (_a) {
         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 }, 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));
+    var handleChange = function (e) {
+        setSelectValue(e.target.value);
+        if (onChange)
+            onChange(e);
+    };
+    var handleFocus = function (e) {
+        setIsFocused(true);
+        if (rest.onFocus)
+            rest.onFocus(e);
+    };
+    var handleBlur = function (e) {
+        setIsFocused(false);
+        if (rest.onBlur)
+            rest.onBlur(e);
+    };
+    var selectElement = (react_1.default.createElement("select", __assign({ id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, defaultValue: defaultValue, value: value, 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: mergedProps.startIcon, endIcon: mergedProps.endIcon, prefix: mergedProps.prefix, suffix: mergedProps.suffix, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, selectElement));
+    return (react_1.default.createElement(InputContainer, { startIcon: startIcon, prefix: prefix, label: label, status: mergedProps.status, helperText: helperText, isFocused: isFocused, hasValue: selectHasValue, fullWidth: mergedProps.fullWidth, id: id }, wrappedSelect));
 };
 exports.SelectInput = SelectInput;
 // Textarea Component
 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 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, prefix = _a.prefix, suffix = _a.suffix, iconicBg = _a.iconicBg, label = _a.label, helperText = _a.helperText, _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", "prefix", "suffix", "iconicBg", "label", "helperText", "rows", "variant"]);
+    var _d = (0, react_1.useState)(false), isFocused = _d[0], setIsFocused = _d[1];
+    var _e = (0, react_1.useState)(value || defaultValue || ''), textValue = _e[0], setTextValue = _e[1];
+    (0, react_1.useEffect)(function () {
+        if (value !== undefined) {
+            setTextValue(value);
+        }
+    }, [value]);
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Input', variant).mergeWithLocal;
-    // Merge config with local props
     var mergedProps = mergeWithLocal({
         status: status,
         funcss: funcss,
@@ -187,9 +261,10 @@ var TextareaInput = function (_a) {
         rightRounded: rightRounded,
         startIcon: startIcon,
         endIcon: endIcon,
+        prefix: prefix,
+        suffix: suffix,
         iconicBg: iconicBg,
     }).props;
-    // Use theme variant for fallback
     var themeVariant = (0, theme_1.useVariant)().variant;
     var className = generateInputClasses({
         status: mergedProps.status,
@@ -203,17 +278,31 @@ var TextareaInput = function (_a) {
         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 }, rest, mergedProps)));
-    return (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, textareaElement));
+    var handleChange = function (e) {
+        setTextValue(e.target.value);
+        if (onChange)
+            onChange(e);
+    };
+    var handleFocus = function (e) {
+        setIsFocused(true);
+        if (rest.onFocus)
+            rest.onFocus(e);
+    };
+    var handleBlur = function (e) {
+        setIsFocused(false);
+        if (rest.onBlur)
+            rest.onBlur(e);
+    };
+    var textareaElement = (react_1.default.createElement("textarea", __assign({ id: id, name: name, className: className, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, defaultValue: defaultValue, placeholder: !label ? rest.placeholder : '', style: style, value: value, rows: rows }, rest)));
+    var wrappedTextarea = (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, prefix: mergedProps.prefix, suffix: mergedProps.suffix, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, textareaElement));
+    return (react_1.default.createElement(InputContainer, { startIcon: startIcon, prefix: prefix, label: label, status: mergedProps.status, helperText: helperText, isFocused: isFocused, hasValue: !!textValue, fullWidth: mergedProps.fullWidth, id: id }, wrappedTextarea));
 };
 exports.TextareaInput = TextareaInput;
 // File Input Component
 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, iconicBg = _a.iconicBg, _c = _a.label, label = _c === void 0 ? 'Upload File' : _c, 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", "iconicBg", "label", "icon", "extra", "button", "btn", "value", "variant"]);
+    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, 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", "iconicBg", "label", "helperText", "icon", "extra", "button", "btn", "value", "variant"]);
     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
     var mergedProps = mergeWithLocal({
         status: status,
         funcss: funcss,
@@ -225,11 +314,12 @@ var FileInput = function (_a) {
         rightRounded: rightRounded,
         startIcon: startIcon,
         endIcon: endIcon,
+        prefix: prefix,
+        suffix: suffix,
         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;
@@ -256,8 +346,9 @@ 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 }, rest, mergedProps))));
-        return (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, fileInputElement));
+            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: mergedProps.startIcon, endIcon: mergedProps.endIcon, prefix: mergedProps.prefix, suffix: mergedProps.suffix, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, fileInputElement));
+        return (react_1.default.createElement(InputContainer, { startIcon: startIcon, prefix: prefix, label: undefined, status: mergedProps.status, helperText: helperText, isFocused: false, hasValue: !!fileName, fullWidth: mergedProps.fullWidth, id: id }, wrappedFileInput));
     }
     var uploadElement = (react_1.default.createElement("div", { className: "_upload_container" },
         react_1.default.createElement("label", { htmlFor: id, className: "_upload_label" },
@@ -270,17 +361,14 @@ 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" }, rest, mergedProps))));
-    return (react_1.default.createElement(IconicInputWrapper, { startIcon: mergedProps.startIcon, endIcon: mergedProps.endIcon, iconicBg: mergedProps.iconicBg, funcss: mergedProps.funcss }, uploadElement));
+        react_1.default.createElement("input", __assign({ onChange: handleChange, type: "file", id: id, className: "_upload_input" }, rest))));
+    return (react_1.default.createElement(InputContainer, { startIcon: startIcon, prefix: prefix, label: undefined, status: mergedProps.status, helperText: helperText, isFocused: false, hasValue: !!fileName, fullWidth: mergedProps.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, iconicBg = _a.iconicBg, _b = _a.variant, variant = _b === void 0 ? '' : _b, props = __rest(_a, ["select", "multiline", "file", "noBorder", "startIcon", "endIcon", "iconicBg", "variant"]);
-    // Use the component config hook for the main Input component
+    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, iconicBg = _a.iconicBg, _b = _a.variant, variant = _b === void 0 ? '' : _b, props = __rest(_a, ["select", "multiline", "file", "noBorder", "startIcon", "endIcon", "prefix", "suffix", "iconicBg", "variant"]);
     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
+    var mergedProps = mergeWithLocal(__assign(__assign({}, props), { startIcon: startIcon, endIcon: endIcon, prefix: prefix, suffix: suffix, iconicBg: iconicBg })).props;
     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/richtext/RichText.d.ts

@@ -9,7 +9,6 @@ interface RichTextProps {
     modules?: any;
     theme?: 'bubble' | 'snow';
     fontFamily?: string;
-    /** Maximum number of characters allowed */
     maxValue?: number;
 }
 declare const RichText: React.FC<RichTextProps>;

package/ui/richtext/RichText.js

@@ -66,19 +66,21 @@ var RichText = function (_a) {
                 savedRange.current = range;
         };
         var handleTextChange = function () {
+            var _a, _b, _c;
             if (!quill)
                 return;
-            var plainText = quill.getText(); // Includes \n
-            var trimmedText = plainText.trim(); // Exclude trailing \n for accurate count
-            if (maxValue && trimmedText.length > maxValue) {
-                var truncated = trimmedText.slice(0, maxValue);
+            var plainText = quill.getText().trim();
+            // --- Enforce maxValue if needed ---
+            if (maxValue && plainText.length > maxValue) {
+                var truncated = plainText.slice(0, maxValue);
                 quill.setText(truncated);
                 quill.setSelection(truncated.length);
-                onChange(quill.root.innerHTML);
-            }
-            else {
-                onChange(quill.root.innerHTML);
             }
+            // --- Clean the HTML output ---
+            var cleanedHTML = (_c = (_b = (_a = quill.root.innerHTML) === null || _a === void 0 ? void 0 : _a.replace(/<p><br><\/p>/g, '') // remove empty paragraphs
+            ) === null || _b === void 0 ? void 0 : _b.replace(/\s+/g, ' ') // collapse multiple spaces
+            ) === null || _c === void 0 ? void 0 : _c.trim(); // remove leading/trailing spaces
+            onChange(cleanedHTML || '');
         };
         quill.on('selection-change', handleSelectionChange);
         quill.on('text-change', handleTextChange);
@@ -88,8 +90,11 @@ var RichText = function (_a) {
         };
     }, [quill, onChange, maxValue]);
     (0, react_1.useEffect)(function () {
+        var _a, _b;
         if (quill && value !== quill.root.innerHTML) {
-            quill.root.innerHTML = value;
+            // clean before setting editor value
+            var cleanedValue = (_b = (_a = value === null || value === void 0 ? void 0 : value.replace(/<p><br><\/p>/g, '')) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, ' ')) === null || _b === void 0 ? void 0 : _b.trim();
+            quill.root.innerHTML = cleanedValue || '';
         }
     }, [quill, value]);
     var insertEmoji = function (emoji) {
@@ -104,15 +109,15 @@ var RichText = function (_a) {
     var renderEmojiSection = function (title, emojis) { return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: "mb-2 mt-2 text-sm" }, title),
         react_1.default.createElement(RowFlex_1.default, { gap: 0.3 }, emojis.map(function (emoji, i) { return (react_1.default.createElement("span", { key: i, className: "h6 pointer", onClick: function () { return insertEmoji(emoji); } }, emoji)); })))); };
-    return (react_1.default.createElement("div", { className: "fit round-edge ".concat(funcss), style: { position: "relative", overflow: "visible" } },
+    return (react_1.default.createElement("div", { className: "fit round-edge ".concat(funcss), style: { position: 'relative', overflow: 'visible' } },
         react_1.default.createElement("div", { id: "editor-container", className: "bubble-editor-container p-0" },
             react_1.default.createElement("div", { ref: quillRef, className: theme === 'bubble' ? 'bubble-editor' : 'snow-editor', style: {
                     fontFamily: fontFamily || 'inherit',
                 } })),
-        (showEmojis || maxValue) && (react_1.default.createElement("div", { className: 'p-1', style: { height: 'fit-content', top: "calc(100%)", width: "100%" } },
-            react_1.default.createElement(Flex_1.default, { justify: 'space-between', gap: 1, alignItems: 'center', width: '100%' },
+        (showEmojis || maxValue) && (react_1.default.createElement("div", { className: "p-1", style: { height: 'fit-content', top: "calc(100%)", width: '100%' } },
+            react_1.default.createElement(Flex_1.default, { justify: "space-between", gap: 1, alignItems: "center", width: "100%" },
                 (showEmojis || afterEmoji) ? (react_1.default.createElement("div", null,
-                    react_1.default.createElement(Flex_1.default, { width: '100%', gap: 0.5, alignItems: 'center' },
+                    react_1.default.createElement(Flex_1.default, { width: "100%", gap: 0.5, alignItems: "center" },
                         showEmojis && (react_1.default.createElement(Dropdown_1.default, { closableOnlyOutside: true, direction: "dropdown", openOnHover: false, button: react_1.default.createElement(ToolTip_1.default, null,
                                 react_1.default.createElement(Circle_1.default, { size: 2, funcss: "bg border" },
                                     react_1.default.createElement(md_1.MdOutlineEmojiEmotions, null)),
@@ -128,9 +133,9 @@ var RichText = function (_a) {
                                 },
                             ] })),
                         afterEmoji))) : (react_1.default.createElement("div", null)),
-                (maxValue && quill) ? (react_1.default.createElement("div", { className: "text-xs text-right" },
+                maxValue && quill ? (react_1.default.createElement("div", { className: "text-xs text-right" },
                     react_1.default.createElement("span", { className: "text-primary" }, quill.getText().trim().length),
-                    " /",
+                    "/",
                     maxValue)) : (react_1.default.createElement("div", null)))))));
 };
 exports.default = RichText;

package/ui/select/Select.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 interface SelectOption {
     value: string;
     text: string;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
 }
 interface CustomSelectProps {
     id?: string;

package/ui/select/Select.js

@@ -32,9 +32,13 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var theme_1 = require("../theme/theme");
+var Flex_1 = __importDefault(require("../flex/Flex"));
 var Select = function (_a) {
     var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, _b = _a.label, label = _b === void 0 ? 'Select an option' : _b, _c = _a.options, options = _c === void 0 ? [] : _c, onChange = _a.onChange, onBlur = _a.onBlur, _d = _a.searchable, searchable = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.bordered, bordered = _f === void 0 ? false : _f, _g = _a.borderless, borderless = _g === void 0 ? false : _g, _h = _a.rounded, rounded = _h === void 0 ? false : _h, _j = _a.flat, flat = _j === void 0 ? false : _j, _k = _a.fullWidth, fullWidth = _k === void 0 ? false : _k, _l = _a.status, status = _l === void 0 ? '' : _l, _m = _a.className, className = _m === void 0 ? '' : _m, _o = _a.funcss, funcss = _o === void 0 ? '' : _o, _p = _a.style, style = _p === void 0 ? {} : _p, _q = _a.searchAutoFocus, searchAutoFocus = _q === void 0 ? false : _q, _r = _a.required, required = _r === void 0 ? false : _r;
     var _s = (0, react_1.useState)(false), isOpen = _s[0], setIsOpen = _s[1];
@@ -211,7 +215,13 @@ var Select = function (_a) {
                 react_1.default.createElement("svg", { width: "16", height: "16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
                     react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7" })))),
         react_1.default.createElement("div", { className: "select-dropdown ".concat(isOpen ? 'open' : '', " ") },
-            searchable && (react_1.default.createElement("input", { ref: searchInputRef, type: "text", className: "select-search", placeholder: "Search options...", value: searchQuery, onChange: function (e) { return setSearchQuery(e.target.value); }, onKeyDown: handleSearchKeyDown })),
-            react_1.default.createElement("div", { className: "select-options", role: "listbox" }, filteredOptions.length === 0 ? (react_1.default.createElement("div", { className: "select-option no-results" }, "No options found")) : (filteredOptions.map(function (option, index) { return (react_1.default.createElement("button", { key: option.value, type: "button", className: "select-option ".concat((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value ? 'selected' : '', " ").concat(index === focusedIndex ? 'focused' : ''), onClick: function () { return selectOption(option); }, role: "option", "aria-selected": (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value }, option.text)); }))))));
+            searchable && (react_1.default.createElement("input", { ref: searchInputRef, type: "text", className: "select-search", placeholder: "Search options...", style: { borderRadius: 0 }, value: searchQuery, onChange: function (e) { return setSearchQuery(e.target.value); }, onKeyDown: handleSearchKeyDown })),
+            react_1.default.createElement("div", { className: "select-options", role: "listbox" }, filteredOptions.length === 0 ? (react_1.default.createElement("div", { className: "select-option no-results" }, "No options found")) : (filteredOptions.map(function (option, index) { return (react_1.default.createElement("button", { style: { borderRadius: 0 }, key: option.value, type: "button", className: "select-option ".concat((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value ? 'selected' : '', " ").concat(index === focusedIndex ? 'focused' : ''), onClick: function () { return selectOption(option); }, role: "option", "aria-selected": (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value },
+                react_1.default.createElement(Flex_1.default, { width: '100%', gap: 0.5 }, option === null || option === void 0 ? void 0 :
+                    option.prefix,
+                    " ",
+                    option.text,
+                    " ", option === null || option === void 0 ? void 0 :
+                    option.suffix))); }))))));
 };
 exports.default = Select;

package/ui/text/Text.d.ts

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

package/ui/text/Text.js

@@ -31,12 +31,14 @@ var pi_1 = require("react-icons/pi");
 var getCssVariable_1 = require("../../utils/getCssVariable");
 var componentUtils_1 = require("../../utils/componentUtils");
 var Text = function (_a) {
-    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, _b = _a.variant, variant = _b === void 0 ? '' : _b, _c = _a.size, size = _c === void 0 ? 'base' : _c, 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"]);
+    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, _b = _a.variant, variant = _b === void 0 ? '' : _b, _c = _a.size, size = _c === void 0 ? 'base' : _c, 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"]);
     // Use the component config hook
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Text', variant).mergeWithLocal;
     // Merge config with local props - local props override config
-    var mergedProps = mergeWithLocal(__assign({ bg: bg, color: color, funcss: funcss, emp: emp, bold: bold, block: block, body: body, article: article, light: light, lighter: lighter, italic: italic, weight: weight, underline: underline, align: align, lineHeight: lineHeight, letterSpacing: letterSpacing, uppercase: uppercase, lowercase: lowercase, capitalize: capitalize, textDecoration: textDecoration, textTransform: textTransform, whiteSpace: whiteSpace, wordBreak: wordBreak, fontFamily: fontFamily, truncate: truncate, textShadow: textShadow, textAlign: textAlign, monospace: monospace, quote: quote, opacity: opacity, size: size }, rest)).props;
-    var Tag = mergedProps.block ? 'div' : 'span';
+    var mergedProps = mergeWithLocal(__assign({ bg: bg, color: color, funcss: funcss, emp: emp, bold: bold, block: block, body: body, article: article, light: light, lighter: lighter, italic: italic, weight: weight, underline: underline, align: align, lineHeight: lineHeight, letterSpacing: letterSpacing, uppercase: uppercase, lowercase: lowercase, capitalize: capitalize, textDecoration: textDecoration, textTransform: textTransform, whiteSpace: whiteSpace, wordBreak: wordBreak, fontFamily: fontFamily, truncate: truncate, textShadow: textShadow, textAlign: textAlign, monospace: monospace, quote: quote, opacity: opacity, size: size, margin: margin, padding: padding }, rest)).props;
+    // If margin is provided, force block display
+    var shouldBeBlock = mergedProps.block || !!mergedProps.margin;
+    var Tag = shouldBeBlock ? 'div' : 'span';
     var sizeClass = "".concat(mergedProps.size === 'h1' ? "h1" :
         mergedProps.size === 'h2' ? "h2" :
             mergedProps.size === 'h3' ? "h3" :
@@ -45,7 +47,7 @@ var Text = function (_a) {
                         mergedProps.size === 'h6' ? "h6" :
                             "text-".concat(mergedProps.size));
     var bdFontWeight = (0, getCssVariable_1.getCssVariableValue)('bd-font-weight');
-    var mergedStyles = __assign(__assign({ display: mergedProps.block ? 'block' : undefined, fontWeight: mergedProps.bold ? 'bold' : mergedProps.weight ? mergedProps.weight : Number(bdFontWeight), lineHeight: mergedProps.lineHeight, letterSpacing: mergedProps.letterSpacing, textTransform: mergedProps.textTransform, textDecoration: mergedProps.textDecoration, fontFamily: mergedProps.fontFamily, textShadow: mergedProps.textShadow, textAlign: mergedProps.textAlign, whiteSpace: mergedProps.whiteSpace, wordBreak: mergedProps.wordBreak, transform: mergedProps.transform }, customStyles), (mergedProps.truncate
+    var mergedStyles = __assign(__assign({ display: shouldBeBlock ? 'block' : undefined, fontWeight: mergedProps.bold ? 'bold' : mergedProps.weight ? mergedProps.weight : Number(bdFontWeight), lineHeight: mergedProps.lineHeight, letterSpacing: mergedProps.letterSpacing, textTransform: mergedProps.textTransform, textDecoration: mergedProps.textDecoration, fontFamily: mergedProps.fontFamily, textShadow: mergedProps.textShadow, textAlign: mergedProps.textAlign, whiteSpace: mergedProps.whiteSpace, wordBreak: mergedProps.wordBreak, transform: mergedProps.transform, margin: mergedProps.margin, padding: mergedProps.padding }, customStyles), (mergedProps.truncate
         ? {
             display: '-webkit-box',
             WebkitBoxOrient: 'vertical',

package/ui/vista/Vista.d.ts

@@ -61,6 +61,21 @@ type VistaProps = {
     ctaPrimaryText?: string;
     ctaSecondaryText?: string;
     ctaAccentText?: string;
+    ctaPrimaryRounded?: boolean;
+    ctaPrimaryFlat?: boolean;
+    ctaPrimaryPrefix?: string;
+    ctaPrimarySuffix?: string;
+    primaryIconSize?: number;
+    ctaSecondaryRounded?: boolean;
+    ctaSecondaryFlat?: boolean;
+    ctaSecondaryPrefix?: string;
+    ctaSecondarySuffix?: string;
+    secondaryIconSize?: number;
+    ctaAccentRounded?: boolean;
+    ctaAccentFlat?: boolean;
+    ctaAccentPrefix?: string;
+    ctaAccentSuffix?: string;
+    accentIconSize?: number;
     ctaGap?: number;
     ctaFlexJustify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around';
 };

package/ui/vista/Vista.js

@@ -34,7 +34,7 @@ var Vista = function (_a) {
     // 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;
+    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;
     // Merge config with local props - local props should override config
@@ -102,6 +102,21 @@ var Vista = function (_a) {
         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,
     }).props;
     var layoutClass = [
         mergedProps.layout,
@@ -116,15 +131,15 @@ var Vista = function (_a) {
         if (!hasCTAs)
             return null;
         return (react_1.default.createElement(Flex_1.default, { gap: mergedProps.ctaGap, justify: mergedProps.ctaFlexJustify, className: "mt-6 ".concat(mergedProps.ctaClass), wrap: "wrap", width: '100%' },
-            mergedProps.showPrimaryCTA && (react_1.default.createElement(Button_1.default, { bg: "primary", outlined: mergedProps.primaryButtonOutlined, onClick: function () { return window.location.href = mergedProps.ctaPrimaryUrl; } }, mergedProps.ctaPrimaryText)),
-            mergedProps.showSecondaryCTA && (react_1.default.createElement(Button_1.default, { bg: "secondary", outlined: mergedProps.secondaryButtonOutlined, onClick: function () { return window.location.href = mergedProps.ctaSecondaryUrl; } }, mergedProps.ctaSecondaryText)),
-            mergedProps.showAccentCTA && (react_1.default.createElement(Button_1.default, { bg: "accent", outlined: mergedProps.accentButtonOutlined, onClick: function () { return window.location.href = mergedProps.ctaAccentUrl; } }, mergedProps.ctaAccentText))));
+            mergedProps.showPrimaryCTA && (react_1.default.createElement(Button_1.default, { bg: "primary", outlined: mergedProps.primaryButtonOutlined, onClick: function () { return window.location.href = mergedProps.ctaPrimaryUrl; }, rounded: mergedProps.ctaPrimaryRounded, flat: mergedProps.ctaPrimaryFlat, stringPrefix: mergedProps.ctaPrimaryPrefix, stringSuffix: mergedProps.ctaPrimarySuffix, iconSize: mergedProps.primaryIconSize }, mergedProps.ctaPrimaryText)),
+            mergedProps.showSecondaryCTA && (react_1.default.createElement(Button_1.default, { bg: "secondary", outlined: mergedProps.secondaryButtonOutlined, onClick: function () { return window.location.href = mergedProps.ctaSecondaryUrl; }, rounded: mergedProps.ctaSecondaryRounded, flat: mergedProps.ctaSecondaryFlat, stringPrefix: mergedProps.ctaSecondaryPrefix, stringSuffix: mergedProps.ctaSecondarySuffix, iconSize: mergedProps.secondaryIconSize }, mergedProps.ctaSecondaryText)),
+            mergedProps.showAccentCTA && (react_1.default.createElement(Button_1.default, { bg: "accent", outlined: mergedProps.accentButtonOutlined, onClick: function () { return window.location.href = mergedProps.ctaAccentUrl; }, rounded: mergedProps.ctaAccentRounded, flat: mergedProps.ctaAccentFlat, stringPrefix: mergedProps.ctaAccentPrefix, stringSuffix: mergedProps.ctaAccentSuffix, iconSize: mergedProps.accentIconSize }, mergedProps.ctaAccentText))));
     };
     // 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) },
         mergedProps.heading && (react_1.default.createElement(Text_1.default, { block: true, size: mergedProps.headingSize, weight: mergedProps.headingWeight, color: mergedProps.headingColor, funcss: mergedProps.headingClass }, mergedProps.heading)),
         mergedProps.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) }, mergedProps.subheading)),
-        mergedProps.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 }, mergedProps.content || children)),
+        mergedProps.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 }, children || (typeof mergedProps.content === 'string' ? react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: mergedProps.content } }) : mergedProps.content))),
         mergedProps.cta ? (react_1.default.createElement("div", { className: "mt-6 ".concat(mergedProps.ctaClass) }, mergedProps.cta)) : (react_1.default.createElement(CTAButtons, null))));
     // Enhanced Image Content - uses imageUrl if no image component provided
     var ImageContent = (mergedProps.image || mergedProps.imageUrl) && (react_1.default.createElement("div", { className: "vista-image ".concat(mergedProps.imageWrapperClass) }, mergedProps.image ? (mergedProps.image) : (react_1.default.createElement("img", { src: mergedProps.imageUrl, alt: mergedProps.imageAlt || 'Vista image', className: "".concat(mergedProps.imageClass), style: {

package/utils/getDynamicIcon.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function getDynamicIcon(iconName: string): Promise<React.ReactNode | null>;