funuicss 3.6.14 → 3.6.15

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>;

package/utils/getDynamicIcon.js

@@ -0,0 +1,112 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDynamicIcon = getDynamicIcon;
+// utils/getDynamicIcon.ts
+var react_1 = __importDefault(require("react"));
+var iconPacks = {
+    fa: function () { return Promise.resolve().then(function () { return __importStar(require("react-icons/fa")); }); },
+    pi: function () { return Promise.resolve().then(function () { return __importStar(require("react-icons/pi")); }); },
+    md: function () { return Promise.resolve().then(function () { return __importStar(require("react-icons/md")); }); },
+    io: function () { return Promise.resolve().then(function () { return __importStar(require("react-icons/io5")); }); },
+    bi: function () { return Promise.resolve().then(function () { return __importStar(require("react-icons/bi")); }); },
+    ai: function () { return Promise.resolve().then(function () { return __importStar(require("react-icons/ai")); }); },
+};
+function getDynamicIcon(iconName) {
+    return __awaiter(this, void 0, void 0, function () {
+        var prefix, loader, pack, Icon, err_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    prefix = iconName.slice(0, 2).toLowerCase();
+                    loader = iconPacks[prefix];
+                    if (!loader)
+                        return [2 /*return*/, null];
+                    return [4 /*yield*/, loader()];
+                case 1:
+                    pack = _a.sent();
+                    Icon = pack[iconName];
+                    if (!Icon)
+                        return [2 /*return*/, null];
+                    return [2 /*return*/, react_1.default.createElement(Icon, null)];
+                case 2:
+                    err_1 = _a.sent();
+                    console.error("Failed to load icon: ".concat(iconName), err_1);
+                    return [2 /*return*/, null];
+                case 3: return [2 /*return*/];
+            }
+        });
+    });
+}