funuicss 3.8.12 → 3.8.14

package/ui/feature/Feature.js

@@ -54,7 +54,9 @@ var componentUtils_1 = require("../../utils/componentUtils");
 var Text_1 = __importDefault(require("../text/Text"));
 var Button_1 = __importDefault(require("../button/Button"));
 var getDynamicIcon_1 = require("../../utils/getDynamicIcon");
-var Carousel_1 = __importDefault(require("../carousel/Carousel")); // Import the Carousel component
+var Carousel_1 = __importDefault(require("../carousel/Carousel"));
+var theme_1 = require("../theme/theme");
+var pi_1 = require("react-icons/pi");
 var useDynamicIcon = function (iconString) {
     var _a = (0, react_1.useState)(null), iconNode = _a[0], setIconNode = _a[1];
     var _b = (0, react_1.useState)(false), hasValidIcon = _b[0], setHasValidIcon = _b[1];
@@ -77,52 +79,98 @@ var useDynamicIcon = function (iconString) {
     }, [iconString]);
     return { iconNode: iconNode, hasValidIcon: hasValidIcon };
 };
-var FeatureIcon = function (_a) {
-    var icon = _a.icon, iconColor = _a.iconColor, _b = _a.iconSize, iconSize = _b === void 0 ? 24 : _b, _c = _a.iconClassName, iconClassName = _c === void 0 ? '' : _c, layout = _a.layout, _d = _a.checklistIcon, checklistIcon = _d === void 0 ? 'PiCheck' : _d, _e = _a.checklistColor, checklistColor = _e === void 0 ? 'success' : _e, _f = _a.checklistSize, checklistSize = _f === void 0 ? 20 : _f, _g = _a.checklistClassName, checklistClassName = _g === void 0 ? '' : _g;
+// Dynamic Icon Component with proper typing
+var DynamicIcon = function (_a) {
+    var icon = _a.icon, color = _a.color, _b = _a.size, size = _b === void 0 ? 24 : _b;
     var isStringIcon = icon && typeof icon === 'string';
-    var _h = useDynamicIcon(isStringIcon ? icon : undefined), dynamicIconNode = _h.iconNode, hasValidDynamicIcon = _h.hasValidIcon;
-    var _j = useDynamicIcon(layout === 'checklist' ? checklistIcon : undefined), checkmarkIconNode = _j.iconNode, hasValidCheckmarkIcon = _j.hasValidIcon;
-    var getIconColorStyle = function (color) {
+    var _c = useDynamicIcon(isStringIcon ? icon : undefined), iconNode = _c.iconNode, hasValidIcon = _c.hasValidIcon;
+    var getIconColorStyle = function () {
         if (!color)
             return {};
-        if (color.startsWith('text-') || color.startsWith('bg-') || color.startsWith('border-')) {
-            return {};
-        }
-        var colorNames = ['primary', 'secondary', 'accent', 'success', 'warning', 'error', 'info', 'dark', 'light'];
-        if (colorNames.includes(color)) {
-            var cssValue = (0, getCssVariable_1.getCssVariableValue)(color);
-            if (cssValue) {
-                return { color: cssValue };
-            }
+        var cssValue = (0, getCssVariable_1.getCssVariableValue)(color);
+        if (cssValue && cssValue !== color) {
+            return { color: cssValue };
         }
         return { color: color };
     };
-    var iconColorStyle = getIconColorStyle(iconColor);
-    var checklistColorStyle = getIconColorStyle(checklistColor);
-    var renderIconWithProps = function (iconElement, className, style, size) {
-        if (!react_1.default.isValidElement(iconElement))
-            return iconElement;
-        var props = {
-            className: className,
-            style: __assign(__assign({}, style), iconElement.props.style),
-        };
-        if (size !== undefined) {
-            props.size = size;
-        }
-        return react_1.default.cloneElement(iconElement, props);
-    };
     if (icon && typeof icon !== 'string' && react_1.default.isValidElement(icon)) {
-        return renderIconWithProps(icon, "feature-section__icon ".concat(iconClassName), iconColorStyle, iconSize);
-    }
-    if (isStringIcon && hasValidDynamicIcon && dynamicIconNode) {
-        return renderIconWithProps(dynamicIconNode, "feature-section__icon ".concat(iconClassName), iconColorStyle, iconSize);
+        // Handle React element icons
+        var iconElement = icon;
+        return react_1.default.cloneElement(iconElement, {
+            size: size,
+            style: __assign(__assign({}, getIconColorStyle()), iconElement.props.style),
+        });
     }
-    if (layout === 'checklist' && hasValidCheckmarkIcon && checkmarkIconNode) {
-        return renderIconWithProps(checkmarkIconNode, "feature-section__checkmark ".concat(checklistClassName), checklistColorStyle, checklistSize);
+    if (isStringIcon && hasValidIcon && iconNode && react_1.default.isValidElement(iconNode)) {
+        // Handle dynamically loaded icons
+        var dynamicIconElement = iconNode;
+        var newProps = {
+            size: size,
+            style: getIconColorStyle(),
+        };
+        // Preserve existing props
+        if (dynamicIconElement.props.className) {
+            newProps.className = dynamicIconElement.props.className;
+        }
+        return react_1.default.cloneElement(dynamicIconElement, newProps);
     }
     return null;
 };
-// Helper function to convert shorthand flex values to proper CSS values
+// Star Rating Component with dynamic icon
+var StarRating = function (_a) {
+    var rating = _a.rating, _b = _a.icon, icon = _b === void 0 ? 'PiStar' : _b, _c = _a.color, color = _c === void 0 ? 'warning' : _c, _d = _a.size, size = _d === void 0 ? 16 : _d;
+    var _e = (0, react_1.useState)(null), ratingIconNode = _e[0], setRatingIconNode = _e[1];
+    var iconNode = useDynamicIcon(icon).iconNode;
+    (0, react_1.useEffect)(function () {
+        if (iconNode) {
+            setRatingIconNode(iconNode);
+        }
+    }, [iconNode]);
+    var renderIcon = function (type, index) {
+        var colorValue = (0, getCssVariable_1.getCssVariableValue)(color) || color;
+        var emptyColor = 'var(--muted)';
+        // If we have a dynamic icon and it's not empty
+        if (ratingIconNode && react_1.default.isValidElement(ratingIconNode) && type !== 'empty') {
+            var iconElement = ratingIconNode;
+            // Create a new props object
+            var newProps = {
+                key: index,
+                style: __assign({ color: colorValue }, iconElement.props.style)
+            };
+            // Add size prop if it exists
+            if (size !== undefined) {
+                newProps.size = size;
+            }
+            return react_1.default.cloneElement(iconElement, newProps);
+        }
+        // For empty stars or fallback, use PiStar icons
+        if (type === 'full') {
+            return react_1.default.createElement(pi_1.PiStarFill, { key: index, size: size, style: { color: colorValue } });
+        }
+        else if (type === 'half') {
+            return react_1.default.createElement(pi_1.PiStarHalf, { key: index, size: size, style: { color: colorValue } });
+        }
+        else {
+            return react_1.default.createElement(pi_1.PiStar, { key: index, size: size, style: { color: emptyColor } });
+        }
+    };
+    var stars = [];
+    var fullStars = Math.floor(rating);
+    var hasHalfStar = rating % 1 >= 0.5;
+    for (var i = 1; i <= 5; i++) {
+        if (i <= fullStars) {
+            stars.push(renderIcon('full', i));
+        }
+        else if (hasHalfStar && i === fullStars + 1) {
+            stars.push(renderIcon('half', i));
+        }
+        else {
+            stars.push(renderIcon('empty', i));
+        }
+    }
+    return (react_1.default.createElement("div", { className: "star-rating", style: { display: 'flex', gap: '2px', alignItems: 'center' } }, stars));
+};
+// Helper function to convert shorthand flex values
 var convertFlexValue = function (value) {
     if (!value)
         return undefined;
@@ -132,188 +180,878 @@ var convertFlexValue = function (value) {
         'center': 'center',
         'between': 'space-between',
         'around': 'space-around',
-        'stretch': 'stretch',
     };
     return flexMap[value] || value;
 };
+// Format date
+var formatDate = function (dateString) {
+    if (!dateString)
+        return '';
+    try {
+        var date = new Date(dateString);
+        if (isNaN(date.getTime()))
+            return '';
+        return date.toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric'
+        });
+    }
+    catch (_a) {
+        return dateString;
+    }
+};
+// Truncate HTML content safely
+var truncateHtml = function (html, maxLength) {
+    if (!html)
+        return { truncated: '', isTruncated: false };
+    // Strip HTML tags for length calculation
+    var text = html.replace(/<[^>]*>/g, '');
+    if (text.length <= maxLength) {
+        return { truncated: html, isTruncated: false };
+    }
+    // Truncate text
+    var truncatedText = text.substring(0, maxLength) + '...';
+    return { truncated: truncatedText, isTruncated: true };
+};
 var Feature = function (localProps) {
     var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Feature', localProps.variant).mergeWithLocal;
     var mergedProps = mergeWithLocal(localProps).props;
     var final = mergedProps;
-    var _a = (0, react_1.useState)([]), featuresArray = _a[0], setFeaturesArray = _a[1];
-    // Parse features
+    var _a = (0, react_1.useState)([]), itemsArray = _a[0], setItemsArray = _a[1];
+    var _b = (0, react_1.useState)(new Set()), expandedItems = _b[0], setExpandedItems = _b[1];
+    // Use bucket data if bucket is provided
+    var _c = (0, theme_1.usePaginatedRecords)(final.bucket || '', final.bucketPage || 1, final.bucketSize || 50), bucketRecords = _c.records, bucketLoading = _c.loading;
+    // Parse items from props or bucket
     (0, react_1.useEffect)(function () {
-        if (typeof final.features === 'string') {
-            try {
-                var parsed = JSON.parse(final.features);
-                setFeaturesArray(Array.isArray(parsed) ? parsed : [parsed]);
+        var parseItems = function () {
+            if (final.bucket && bucketRecords) {
+                // Map bucket records to content format
+                var mappedItems = bucketRecords.map(function (record) {
+                    var _a, _b;
+                    var values = record.values || record;
+                    if (final.isTestimonial) {
+                        return {
+                            customerName: values.customerName || values.name || values.customer,
+                            company: values.company || values.organization,
+                            avatar: ((_a = values === null || values === void 0 ? void 0 : values.avatar) === null || _a === void 0 ? void 0 : _a.url) || values.imageUrl || values.photo,
+                            content: values.content || values.testimonial || values.description,
+                            rating: values.rating || values.stars || 5,
+                            role: values.role || values.position,
+                            project: values.project || values.service,
+                            date: values.date || values.createdAt,
+                            featured: values.featured || values.highlighted || false,
+                            title: values.customerName || values.name,
+                            description: values.content || values.testimonial,
+                            imageUrl: values.avatar || values.imageUrl,
+                            icon: final.quoteIcon || 'PiQuotes',
+                            iconColor: final.quoteColor || 'primary'
+                        };
+                    }
+                    else {
+                        return __assign({ title: values.title || values.name, description: values.description || values.content, icon: values.icon, iconColor: values.iconColor, imageUrl: values.imageUrl || ((_b = values.avatar) === null || _b === void 0 ? void 0 : _b.url) }, values);
+                    }
+                });
+                setItemsArray(mappedItems);
             }
-            catch (error) {
-                console.error('Error parsing features JSON:', error);
-                setFeaturesArray([]);
+            else if (typeof final.items === 'string') {
+                try {
+                    var parsed = JSON.parse(final.items);
+                    setItemsArray(Array.isArray(parsed) ? parsed : [parsed]);
+                }
+                catch (error) {
+                    console.error('Error parsing items JSON:', error);
+                    setItemsArray([]);
+                }
             }
-        }
-        else if (Array.isArray(final.features)) {
-            setFeaturesArray(final.features);
-        }
-        else {
-            setFeaturesArray([]);
-        }
-    }, [final.features]);
-    var getSpacingValue = function (value, defaultValue) {
-        if (defaultValue === void 0) { defaultValue = '0'; }
-        if (!value)
-            return defaultValue;
-        if (/^\d+$/.test(value)) {
-            return "".concat(parseInt(value) * 0.25, "rem");
-        }
-        return value;
-    };
-    var renderItemCTA = function (item) {
-        if (!item.ctaText)
-            return null;
-        return (react_1.default.createElement("a", { href: item.ctaUrl, onClick: item.ctaOnClick, className: "feature-section__item-cta ".concat(item.ctaClassName || ''), style: {
-                marginTop: '1rem',
-                display: 'inline-block',
-                textDecoration: 'none',
-                color: 'var(--primary)',
-                fontWeight: 500,
-                fontSize: '0.875rem',
-            } }, item.ctaText));
+            else if (Array.isArray(final.items)) {
+                setItemsArray(final.items);
+            }
+            else {
+                setItemsArray([]);
+            }
+        };
+        parseItems();
+    }, [final.items, final.isTestimonial, final.bucket, bucketRecords, final.quoteIcon, final.quoteColor]);
+    // Toggle expanded state for an item
+    var toggleExpand = function (index) {
+        setExpandedItems(function (prev) {
+            var newSet = new Set(prev);
+            if (newSet.has(index)) {
+                newSet.delete(index);
+            }
+            else {
+                newSet.add(index);
+            }
+            return newSet;
+        });
     };
-    var renderFeatureItem = function (item, index) {
-        var _a;
-        if (item.customRender) {
-            return item.customRender();
+    var renderItem = function (item, index) {
+        var isExpanded = expandedItems.has(index);
+        var contentLimit = final.contentLimit || 150;
+        // Get content to display
+        var displayContent = item.description || item.content || '';
+        var isTruncated = false;
+        if (typeof displayContent === 'string' && displayContent.length > contentLimit && !isExpanded) {
+            var _a = truncateHtml(displayContent, contentLimit), truncated = _a.truncated, truncatedFlag = _a.isTruncated;
+            displayContent = truncated;
+            isTruncated = truncatedFlag;
         }
-        var iconColor = item.iconColor || final.iconColor;
-        var iconSize = item.iconSize || final.iconSize || 24;
-        var iconClassName = item.iconClassName || final.iconClassName || '';
-        var checkmarkIcon = final.checkmarkIcon || 'PiCheck';
-        var checkmarkColor = final.checkmarkColor || 'success';
-        var checkmarkSize = final.checkmarkSize || 20;
-        var checkmarkClassName = final.checkmarkClassName || '';
-        var cardPadding = final.cardPadding || '1.5rem';
-        var cardRounded = final.cardRounded || '0.5rem';
-        var cardShadow = final.cardShadow || 'md';
-        var cardBorder = (_a = final.cardBorder) !== null && _a !== void 0 ? _a : true;
-        var cardBorderColor = final.cardBorderColor || 'var(--borderRgb)';
-        var cardHoverEffect = final.cardHoverEffect || 'none';
-        var titleSize = item.titleSize || final.itemTitleSize || '1.125rem';
-        var titleWeight = item.titleWeight || final.itemTitleWeight || 600;
-        var titleColor = item.titleColor || final.itemTitleColor || 'var(--text-color)';
-        var titleClassName = item.titleClassName || '';
-        var descriptionSize = item.descriptionSize || final.itemDescriptionSize || '0.875rem';
-        var descriptionWeight = item.descriptionWeight || final.itemDescriptionWeight || 400;
-        var descriptionColor = item.descriptionColor || final.itemDescriptionColor || 'var(--text-muted)';
-        var descriptionClassName = item.descriptionClassName || '';
-        var featureContent = (react_1.default.createElement("div", { className: "feature-section__item ".concat(item.className || ''), style: item.style },
-            (item.icon || item.imageUrl || final.layout === 'checklist') && (react_1.default.createElement("div", { className: "feature-section__icon-container", style: { marginBottom: '1rem' } }, item.imageUrl ? (react_1.default.createElement("img", { src: item.imageUrl, alt: item.imageAlt || '', className: "feature-section__image ".concat(item.imageClassName || ''), style: __assign({ width: "".concat(iconSize, "px"), height: "".concat(iconSize, "px"), objectFit: 'cover', borderRadius: '50%' }, item.imageStyle) })) : (react_1.default.createElement("div", { className: "feature-section__icon-wrapper" },
-                react_1.default.createElement(FeatureIcon, { icon: item.icon, iconColor: iconColor, iconSize: iconSize, iconClassName: iconClassName, layout: final.layout, checklistIcon: checkmarkIcon, checklistColor: checkmarkColor, checklistSize: checkmarkSize, checklistClassName: checkmarkClassName }))))),
-            item.title && (react_1.default.createElement(Text_1.default, { block: true, size: titleSize, weight: titleWeight, color: titleColor, funcss: "feature-section__title ".concat(titleClassName), style: { marginBottom: '0.75rem' } }, item.title)),
-            item.description && (react_1.default.createElement(Text_1.default, { block: true, size: descriptionSize, weight: descriptionWeight, color: descriptionColor, funcss: "feature-section__description ".concat(descriptionClassName) }, item.description)),
-            item.content && (react_1.default.createElement("div", { className: "feature-section__additional-content", style: { marginTop: '1rem' } }, item.content)),
-            renderItemCTA(item)));
-        // Apply card styling if card prop is true
+        // Item content
+        var itemContent = (react_1.default.createElement(react_1.default.Fragment, null,
+            final.isTestimonial && final.showQuote && (react_1.default.createElement("div", { className: "feature__quote-icon", style: { marginBottom: '1rem' } }, react_1.default.isValidElement(final.quoteIcon) ? final.quoteIcon : (react_1.default.createElement(DynamicIcon, { icon: final.quoteIcon || 'PiQuotes', color: final.quoteColor, size: final.iconSize })))),
+            (item.icon || item.imageUrl) && !final.isTestimonial && (react_1.default.createElement("div", { className: "feature__icon-container", style: { marginBottom: '1rem' } }, item.imageUrl ? (react_1.default.createElement("img", { src: item.imageUrl, alt: item.imageAlt || '', className: "feature__image", style: {
+                    width: "".concat(final.iconSize || 24, "px"),
+                    height: "".concat(final.iconSize || 24, "px"),
+                    objectFit: 'cover',
+                    borderRadius: '50%',
+                } })) : (react_1.default.createElement(DynamicIcon, { icon: item.icon, color: item.iconColor || final.iconColor, size: final.iconSize })))),
+            item.title && (react_1.default.createElement(Text_1.default, { block: true, size: final.itemTitleSize || 'lg', weight: 600, color: "default", style: { marginBottom: '0.75rem' } }, item.title)),
+            (item.description || item.content) && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(Text_1.default, { block: true, size: final.itemDescriptionSize || 'base', weight: 400, color: "muted", dangerouslySetInnerHTML: true, text: displayContent }),
+                isTruncated && final.showExpand && (react_1.default.createElement("button", { onClick: function () { return toggleExpand(index); }, className: "feature__expand-btn", style: {
+                        background: 'none',
+                        border: 'none',
+                        color: 'var(--primary)',
+                        cursor: 'pointer',
+                        fontSize: '0.875rem',
+                        marginTop: '0.5rem',
+                        padding: 0,
+                        textDecoration: 'underline'
+                    } }, isExpanded ? (final.collapseText || 'Show less') : (final.expandText || 'Read more'))))),
+            final.isTestimonial && (react_1.default.createElement("div", { className: "feature__testimonial-info", style: { marginTop: '1rem' } },
+                final.showStars && item.rating && (react_1.default.createElement("div", { style: { marginBottom: '0.5rem' } },
+                    react_1.default.createElement(StarRating, { rating: item.rating, icon: final.ratingIcon, color: final.starColor, size: 16 }))),
+                react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '0.75rem' } },
+                    item.avatar && (react_1.default.createElement("img", { src: item.avatar, alt: item.customerName || 'Customer', style: {
+                            width: '40px',
+                            height: '40px',
+                            borderRadius: '50%',
+                            objectFit: 'cover'
+                        } })),
+                    react_1.default.createElement("div", null,
+                        item.customerName && (react_1.default.createElement(Text_1.default, { block: true, size: "sm", weight: 600, style: { marginBottom: '0.25rem' } }, item.customerName)),
+                        react_1.default.createElement("div", { style: { fontSize: '0.75rem', color: 'var(--text-muted)' } },
+                            item.role && final.showRole && react_1.default.createElement("span", null, item.role),
+                            item.company && final.showCompany && (react_1.default.createElement("span", null,
+                                item.role ? ' at ' : '',
+                                item.company)),
+                            item.date && final.showDate && react_1.default.createElement("span", null,
+                                " \u2022 ",
+                                formatDate(item.date))))))),
+            !final.isTestimonial && final.showCTA && final.ctaText && (react_1.default.createElement("div", { style: { marginTop: '1rem' } },
+                react_1.default.createElement(Button_1.default, { url: final.ctaUrl, color: "primary", text: final.ctaText, funcss: 'p-0' })))));
+        // Apply card styling if enabled
         if (final.card) {
-            var cardClasses = [
-                'feature-section__card',
-                'card',
-                cardHoverEffect !== 'none' ? "card--hover-".concat(cardHoverEffect) : '',
-                item.className || '',
-                final.cardClassName || '',
-            ].filter(Boolean).join(' ');
-            var cardStyles = __assign({ padding: getSpacingValue(cardPadding, '1.5rem'), borderRadius: cardRounded, boxShadow: cardShadow !== 'none' ? (0, getCssVariable_1.getCssVariableValue)("shadow-".concat(cardShadow)) || undefined : undefined, border: cardBorder ? "1px solid ".concat((0, getCssVariable_1.getCssVariableValue)(cardBorderColor) || cardBorderColor) : 'none', height: '100%', maxWidth: final.itemMaxWidth || '100%' }, item.style);
-            return (react_1.default.createElement("div", { key: index, className: cardClasses, style: cardStyles }, featureContent));
+            var shadowValue = final.cardShadow !== 'none' ?
+                (0, getCssVariable_1.getCssVariableValue)("shadow-".concat(final.cardShadow)) || undefined :
+                undefined;
+            return (react_1.default.createElement("div", { key: index, className: "feature__card ".concat(final.cardClassName || ''), style: __assign({ padding: final.cardPadding || '1.5rem', borderRadius: final.cardRounded || '0.5rem', boxShadow: shadowValue, border: '1px solid var(--borderRgb)', height: '100%', maxWidth: final.itemMaxWidth || '100%' }, item.style) }, itemContent));
         }
         // Regular item without card
-        return (react_1.default.createElement("div", { key: index, className: "feature-section__item-wrapper ".concat(item.className || ''), style: __assign({ maxWidth: final.itemMaxWidth || '100%' }, item.style) }, featureContent));
+        return (react_1.default.createElement("div", { key: index, className: "feature__item", style: __assign({ maxWidth: final.itemMaxWidth || '100%' }, item.style) }, itemContent));
     };
-    var renderFlexFeatures = function () {
-        if (featuresArray.length === 0)
+    var renderFlexItems = function () {
+        if (itemsArray.length === 0)
             return null;
         var gapValue = final.gap !== undefined ? "".concat(final.gap * 0.25, "rem") : '2rem';
-        var flexGap = gapValue;
         if (final.layout === 'centered') {
             var maxWidth = final.maxWidth || '48rem';
-            return (react_1.default.createElement("div", { className: "feature-section__centered-container", style: {
+            return (react_1.default.createElement("div", { className: "feature__centered-container", style: {
                     maxWidth: maxWidth,
                     margin: '0 auto',
-                } }, featuresArray.map(function (item, index) { return renderFeatureItem(item, index); })));
+                } }, itemsArray.map(function (item, index) { return renderItem(item, index); })));
         }
-        // Use Flex layout with proper flexbox values
-        return (react_1.default.createElement("div", { className: "feature-section__flex-container", style: {
+        // Use Flex layout
+        return (react_1.default.createElement("div", { className: "feature__flex-container", style: {
                 display: 'flex',
                 flexWrap: final.wrap !== false ? 'wrap' : 'nowrap',
-                gap: flexGap,
+                gap: gapValue,
                 alignItems: convertFlexValue(final.align) || 'stretch',
                 justifyContent: convertFlexValue(final.justify) || 'flex-start',
                 maxWidth: final.maxWidth || '100%',
                 margin: '0 auto',
-            } }, featuresArray.map(function (item, index) { return (react_1.default.createElement("div", { key: index, className: "feature-section__flex-item" }, renderFeatureItem(item, index))); })));
+            } }, itemsArray.map(function (item, index) { return (react_1.default.createElement("div", { key: index, className: "feature__flex-item", style: { flex: '1 1 300px' } }, renderItem(item, index))); })));
     };
-    var renderCarouselFeatures = function () {
-        if (featuresArray.length === 0)
+    var renderCarouselItems = function () {
+        if (itemsArray.length === 0)
             return null;
         // Prepare carousel items
-        var carouselItems = featuresArray.map(function (item, index) {
-            return renderFeatureItem(item, index);
-        });
-        return (react_1.default.createElement("div", { className: "feature-section__carousel-container ".concat(final.carouselContainerClassName || ''), style: final.carouselContainerStyle },
-            react_1.default.createElement(Carousel_1.default, { scrollNumber: final.scrollNumber, gap: final.gap || 1, funcss: final.carouselFuncss, showDashes: final.showDashes, allowVerticalOverflow: final.allowVerticalOverflow, itemPadding: final.itemPadding || '0.5rem', controlerSize: final.controlerSize, controlerIconSize: final.controlerIconSize, infiniteScroll: final.infiniteScroll, infiniteScrollSpeed: final.infiniteScrollSpeed, infiniteScrollDirection: final.infiniteScrollDirection }, carouselItems)));
+        var carouselItems = itemsArray.map(function (item, index) { return renderItem(item, index); });
+        return (react_1.default.createElement("div", { className: "feature__carousel-container" },
+            react_1.default.createElement(Carousel_1.default, { scrollNumber: final.scrollNumber || 320, gap: final.gap || 1, funcss: final.carouselFuncss, showDashes: final.showDashes !== false }, carouselItems)));
     };
-    var renderFeaturesContent = function () {
-        if (featuresArray.length === 0)
+    var renderContent = function () {
+        if (itemsArray.length === 0)
             return null;
         // Use carousel if isCarousel is true
         if (final.isCarousel) {
-            return renderCarouselFeatures();
+            return renderCarouselItems();
         }
         // Otherwise use flex layout
-        return renderFlexFeatures();
-    };
-    var getLayoutClasses = function () {
-        var classes = ['feature-section'];
-        if (final.layout) {
-            classes.push("feature-section--".concat(final.layout));
-        }
-        if (final.isCarousel) {
-            classes.push('feature-section--carousel');
-        }
-        if (final.className) {
-            classes.push(final.className);
-        }
-        if (final.sectionClass) {
-            classes.push(final.sectionClass);
-        }
-        if (final.funcss) {
-            classes.push(final.funcss);
-        }
-        return classes.filter(Boolean).join(' ');
-    };
-    var getContainerStyles = function () {
-        var padding = getSpacingValue(final.padding, '3rem 0');
-        return __assign({ padding: padding }, final.style);
+        return renderFlexItems();
     };
-    var getTextAlign = function (align) {
-        return {
-            textAlign: align || 'center',
-        };
-    };
-    return (react_1.default.createElement("section", { id: final.id, className: getLayoutClasses(), style: getContainerStyles() },
-        react_1.default.createElement("div", { className: "feature-section__container ".concat(final.containerClassName || ''), style: __assign({ maxWidth: final.maxWidth || '1280px', margin: '0 auto', padding: '0 1rem' }, final.containerStyle) },
-            (final.title || final.subtitle || final.description) && (react_1.default.createElement("div", { className: "feature-section__header", style: __assign({ marginBottom: '3rem', maxWidth: final.layout === 'centered' ? '48rem' : '100%', marginLeft: 'auto', marginRight: 'auto' }, getTextAlign(final.titleAlign)) },
-                final.subtitle && (react_1.default.createElement(Text_1.default, { block: true, size: final.subtitleSize || 'sm', weight: final.subtitleWeight || 600, color: final.subtitleColor || 'var(--primary)', funcss: "feature-section__subtitle ".concat(final.subtitleClassName || ''), style: {
+    return (react_1.default.createElement("section", { id: final.id, className: "feature-section ".concat(final.className || '', " ").concat(final.funcss || ''), style: {
+            padding: final.padding || '3rem 0',
+        } },
+        react_1.default.createElement("div", { className: "feature__container ".concat(final.containerClassName || ''), style: {
+                maxWidth: final.maxWidth || '1280px',
+                margin: '0 auto',
+                padding: '0 1rem',
+            } },
+            (final.title || final.subtitle || final.description) && (react_1.default.createElement("div", { className: "feature__header", style: {
+                    marginBottom: '3rem',
+                    maxWidth: final.layout === 'centered' ? '48rem' : '100%',
+                    marginLeft: 'auto',
+                    marginRight: 'auto',
+                    textAlign: final.titleAlign || 'center',
+                } },
+                final.subtitle && (react_1.default.createElement(Text_1.default, { block: true, size: final.subtitleSize || 'sm', weight: 600, color: final.subtitleColor || 'primary', style: {
                         textTransform: 'uppercase',
                         letterSpacing: '0.05em',
                         marginBottom: '0.5rem',
                     } }, final.subtitle)),
-                final.title && (react_1.default.createElement(Text_1.default, { block: true, size: final.titleSize || 'xl', weight: final.titleWeight || 700, color: final.titleColor || 'var(--text-color)', funcss: "feature-section__main-title ".concat(final.titleClassName || ''), style: { marginBottom: '1rem' } }, final.title)),
-                final.description && (react_1.default.createElement(Text_1.default, { block: true, size: final.descriptionSize || 'sm', weight: final.descriptionWeight || 400, color: final.descriptionColor || 'var(--text-muted)', funcss: "feature-section__section-description ".concat(final.descriptionClassName || '') }, final.description)))),
-            react_1.default.createElement("div", { className: "feature-section__content" },
-                renderFeaturesContent(),
+                final.title && (react_1.default.createElement(Text_1.default, { block: true, size: final.titleSize || 'xl', weight: 700, color: final.titleColor || 'default', style: { marginBottom: '1rem' } }, final.title)),
+                final.description && (react_1.default.createElement(Text_1.default, { block: true, size: final.descriptionSize || 'base', weight: 400, color: final.descriptionColor || 'muted' }, final.description)))),
+            react_1.default.createElement("div", { className: "feature__content" },
+                renderContent(),
                 final.children),
-            final.ctaText && (react_1.default.createElement("div", { className: "feature-section__cta-container", style: __assign({ marginTop: '2.5rem' }, getTextAlign(final.ctaAlign)) },
-                react_1.default.createElement(Button_1.default, { onClick: final.ctaOnClick || (function () { return final.ctaUrl && (window.location.href = final.ctaUrl); }), funcss: "feature-section__cta ".concat(final.ctaClassName || ''), stringPrefix: final.ctaStringPrefix, stringSuffix: final.ctaStringSuffix, startIcon: final.ctaStartIcon, endIcon: final.ctaEndIcon, iconSize: final.ctaIconSize, bg: final.ctaBg || 'primary', isLoading: final.ctaIsLoading, status: final.ctaStatus, url: final.ctaUrl }, final.ctaText))))));
+            final.ctaText && (react_1.default.createElement("div", { className: "feature__cta-container", style: {
+                    marginTop: '2.5rem',
+                    textAlign: final.ctaAlign || 'center',
+                } },
+                react_1.default.createElement(Button_1.default, { url: final.ctaUrl, bg: final.ctaBg || 'primary', text: final.ctaText }))))));
 };
 exports.default = Feature;
+// 'use client';
+// import React, { useState, useEffect } from 'react';
+// import { getCssVariableValue } from '../../utils/getCssVariable';
+// import { useComponentConfiguration } from '../../utils/componentUtils';
+// import Text from '../text/Text';
+// import Button from '../button/Button';
+// import { getDynamicIcon } from '../../utils/getDynamicIcon';
+// import Carousel from '../carousel/Carousel'; // Import the Carousel component
+// type FeatureItem = {
+//   icon?: string | React.ReactNode;
+//   iconColor?: string;
+//   iconSize?: number;
+//   iconClassName?: string;
+//   title?: React.ReactNode;
+//   titleSize?: string;
+//   titleWeight?: number;
+//   titleColor?: string;
+//   titleClassName?: string;
+//   description?: React.ReactNode;
+//   descriptionSize?: string;
+//   descriptionWeight?: number;
+//   descriptionColor?: string;
+//   descriptionClassName?: string;
+//   imageUrl?: string;
+//   imageAlt?: string;
+//   imageClassName?: string;
+//   imageStyle?: React.CSSProperties;
+//   content?: React.ReactNode;
+//   className?: string;
+//   style?: React.CSSProperties;
+//   ctaText?: string;
+//   ctaUrl?: string;
+//   ctaOnClick?: () => void;
+//   ctaClassName?: string;
+//   customRender?: () => React.ReactNode;
+// };
+// // Carousel-specific props
+// interface CarouselOptions {
+//   isCarousel?: boolean;
+//   // Carousel props
+//   scrollNumber?: number;
+//   gap?: number;
+//   carouselFuncss?: string;
+//   showDashes?: boolean;
+//   allowVerticalOverflow?: boolean;
+//   itemPadding?: string;
+//   controlerSize?: number;
+//   controlerIconSize?: number;
+//   infiniteScroll?: boolean;
+//   infiniteScrollSpeed?: number;
+//   infiniteScrollDirection?: 'left' | 'right' | 'alternate';
+//   // Carousel container styling
+//   carouselContainerClassName?: string;
+//   carouselContainerStyle?: React.CSSProperties;
+// }
+// type FeatureProps = {
+//   variant?: string;
+//   layout?: 'checklist' | 'centered' | 'grid';
+//   title?: React.ReactNode;
+//   titleSize?: string;
+//   titleWeight?: number;
+//   titleColor?: string;
+//   titleClassName?: string;
+//   titleAlign?: 'left' | 'center' | 'right';
+//   subtitle?: React.ReactNode;
+//   subtitleSize?: string;
+//   subtitleWeight?: number;
+//   subtitleColor?: string;
+//   subtitleClassName?: string;
+//   description?: React.ReactNode;
+//   descriptionSize?: string;
+//   descriptionWeight?: number;
+//   descriptionColor?: string;
+//   descriptionClassName?: string;
+//   features?: FeatureItem[] | string;
+//   gap?: number;
+//   itemMaxWidth?: string;
+//   align?: 'start' | 'center' | 'end' | 'stretch';
+//   justify?: 'start' | 'center' | 'end' | 'between' | 'around';
+//   wrap?: boolean;
+//   card?: boolean;
+//   cardPadding?: string;
+//   cardRounded?: string;
+//   cardShadow?: 'sm' | 'md' | 'lg' | 'xl' | 'none';
+//   cardBorder?: boolean;
+//   cardBorderColor?: string;
+//   cardHoverEffect?: 'lift' | 'glow' | 'scale' | 'none';
+//   cardClassName?: string;
+//   padding?: string;
+//   className?: string;
+//   style?: React.CSSProperties;
+//   containerClassName?: string;
+//   containerStyle?: React.CSSProperties;
+//   iconColor?: string;
+//   iconSize?: number;
+//   iconClassName?: string;
+//   itemTitleSize?: string;
+//   itemTitleWeight?: number;
+//   itemTitleColor?: string;
+//   itemDescriptionSize?: string;
+//   itemDescriptionWeight?: number;
+//   itemDescriptionColor?: string;
+//   checkmarkIcon?: string;
+//   checkmarkColor?: string;
+//   checkmarkSize?: number;
+//   checkmarkClassName?: string;
+//   ctaText?: string;
+//   ctaUrl?: string;
+//   ctaOnClick?: () => void;
+//   ctaClassName?: string;
+//   ctaAlign?: 'left' | 'center' | 'right';
+//   ctaStringPrefix?: string;
+//   ctaStringSuffix?: string;
+//   ctaStartIcon?: React.ReactNode;
+//   ctaEndIcon?: React.ReactNode;
+//   ctaIconSize?: number;
+//   ctaIsLoading?: boolean;
+//   ctaStatus?: 'success' | 'warning' | 'info' | 'error';
+//   ctaBg?: string;
+//   children?: React.ReactNode;
+//   id?: string;
+//   funcss?: string;
+//   sectionClass?: string;
+//   maxWidth?: string;
+// } & CarouselOptions; // Merge CarouselOptions into FeatureProps
+// const useDynamicIcon = (iconString?: string) => {
+//   const [iconNode, setIconNode] = useState<React.ReactNode>(null);
+//   const [hasValidIcon, setHasValidIcon] = useState(false);
+//   useEffect(() => {
+//     if (!iconString || typeof iconString !== 'string' || iconString.trim() === '') {
+//       setIconNode(null);
+//       setHasValidIcon(false);
+//       return;
+//     }
+//     getDynamicIcon(iconString).then((node) => {
+//       if (node) {
+//         setIconNode(node);
+//         setHasValidIcon(true);
+//       } else {
+//         setIconNode(null);
+//         setHasValidIcon(false);
+//       }
+//     });
+//   }, [iconString]);
+//   return { iconNode, hasValidIcon };
+// };
+// const FeatureIcon: React.FC<{
+//   icon?: string | React.ReactNode;
+//   iconColor?: string;
+//   iconSize?: number;
+//   iconClassName?: string;
+//   layout?: string;
+//   checklistIcon?: string;
+//   checklistColor?: string;
+//   checklistSize?: number;
+//   checklistClassName?: string;
+// }> = ({ 
+//   icon, 
+//   iconColor, 
+//   iconSize = 24, 
+//   iconClassName = '',
+//   layout,
+//   checklistIcon = 'PiCheck',
+//   checklistColor = 'success',
+//   checklistSize = 20,
+//   checklistClassName = ''
+// }) => {
+//   const isStringIcon = icon && typeof icon === 'string';
+//   const { iconNode: dynamicIconNode, hasValidIcon: hasValidDynamicIcon } = useDynamicIcon(
+//     isStringIcon ? icon as string : undefined
+//   );
+//   const { iconNode: checkmarkIconNode, hasValidIcon: hasValidCheckmarkIcon } = useDynamicIcon(
+//     layout === 'checklist' ? checklistIcon : undefined
+//   );
+//   const getIconColorStyle = (color?: string): React.CSSProperties => {
+//     if (!color) return {};
+//     if (color.startsWith('text-') || color.startsWith('bg-') || color.startsWith('border-')) {
+//       return {};
+//     }
+//     const colorNames = ['primary', 'secondary', 'accent', 'success', 'warning', 'error', 'info', 'dark', 'light'];
+//     if (colorNames.includes(color)) {
+//       const cssValue = getCssVariableValue(color);
+//       if (cssValue) {
+//         return { color: cssValue };
+//       }
+//     }
+//     return { color };
+//   };
+//   const iconColorStyle = getIconColorStyle(iconColor);
+//   const checklistColorStyle = getIconColorStyle(checklistColor);
+//   const renderIconWithProps = (iconElement: React.ReactNode, className: string, style: React.CSSProperties, size?: number) => {
+//     if (!React.isValidElement(iconElement)) return iconElement;
+//     const props: any = {
+//       className,
+//       style: { ...style, ...(iconElement.props as any).style },
+//     };
+//     if (size !== undefined) {
+//       props.size = size;
+//     }
+//     return React.cloneElement(iconElement, props);
+//   };
+//   if (icon && typeof icon !== 'string' && React.isValidElement(icon)) {
+//     return renderIconWithProps(
+//       icon,
+//       `feature-section__icon ${iconClassName}`,
+//       iconColorStyle,
+//       iconSize
+//     );
+//   }
+//   if (isStringIcon && hasValidDynamicIcon && dynamicIconNode) {
+//     return renderIconWithProps(
+//       dynamicIconNode,
+//       `feature-section__icon ${iconClassName}`,
+//       iconColorStyle,
+//       iconSize
+//     );
+//   }
+//   if (layout === 'checklist' && hasValidCheckmarkIcon && checkmarkIconNode) {
+//     return renderIconWithProps(
+//       checkmarkIconNode,
+//       `feature-section__checkmark ${checklistClassName}`,
+//       checklistColorStyle,
+//       checklistSize
+//     );
+//   }
+//   return null;
+// };
+// // Helper function to convert shorthand flex values to proper CSS values
+// const convertFlexValue = (value?: string): string | undefined => {
+//   if (!value) return undefined;
+//   const flexMap: Record<string, string> = {
+//     'start': 'flex-start',
+//     'end': 'flex-end',
+//     'center': 'center',
+//     'between': 'space-between',
+//     'around': 'space-around',
+//     'stretch': 'stretch',
+//   };
+//   return flexMap[value] || value;
+// };
+// const Feature: React.FC<FeatureProps> = (localProps) => {
+//   const { mergeWithLocal } = useComponentConfiguration('Feature', localProps.variant);
+//   const { props: mergedProps } = mergeWithLocal(localProps);
+//   const final = mergedProps;
+//   const [featuresArray, setFeaturesArray] = useState<FeatureItem[]>([]);
+//   // Parse features
+//   useEffect(() => {
+//     if (typeof final.features === 'string') {
+//       try {
+//         const parsed = JSON.parse(final.features);
+//         setFeaturesArray(Array.isArray(parsed) ? parsed : [parsed]);
+//       } catch (error) {
+//         console.error('Error parsing features JSON:', error);
+//         setFeaturesArray([]);
+//       }
+//     } else if (Array.isArray(final.features)) {
+//       setFeaturesArray(final.features);
+//     } else {
+//       setFeaturesArray([]);
+//     }
+//   }, [final.features]);
+//   const getSpacingValue = (value?: string, defaultValue: string = '0'): string => {
+//     if (!value) return defaultValue;
+//     if (/^\d+$/.test(value)) {
+//       return `${parseInt(value) * 0.25}rem`;
+//     }
+//     return value;
+//   };
+//   const renderItemCTA = (item: FeatureItem) => {
+//     if (!item.ctaText) return null;
+//     return (
+//       <a
+//         href={item.ctaUrl}
+//         onClick={item.ctaOnClick}
+//         className={`feature-section__item-cta ${item.ctaClassName || ''}`}
+//         style={{ 
+//           marginTop: '1rem', 
+//           display: 'inline-block',
+//           textDecoration: 'none',
+//           color: 'var(--primary)',
+//           fontWeight: 500,
+//           fontSize: '0.875rem',
+//         }}
+//       >
+//         {item.ctaText}
+//       </a>
+//     );
+//   };
+//   const renderFeatureItem = (item: FeatureItem, index: number) => {
+//     if (item.customRender) {
+//       return item.customRender();
+//     }
+//     const iconColor = item.iconColor || final.iconColor;
+//     const iconSize = item.iconSize || final.iconSize || 24;
+//     const iconClassName = item.iconClassName || final.iconClassName || '';
+//     const checkmarkIcon = final.checkmarkIcon || 'PiCheck';
+//     const checkmarkColor = final.checkmarkColor || 'success';
+//     const checkmarkSize = final.checkmarkSize || 20;
+//     const checkmarkClassName = final.checkmarkClassName || '';
+//     const cardPadding = final.cardPadding || '1.5rem';
+//     const cardRounded = final.cardRounded || '0.5rem';
+//     const cardShadow = final.cardShadow || 'md';
+//     const cardBorder = final.cardBorder ?? true;
+//     const cardBorderColor = final.cardBorderColor || 'var(--borderRgb)';
+//     const cardHoverEffect = final.cardHoverEffect || 'none';
+//     const titleSize = item.titleSize || final.itemTitleSize || '1.125rem';
+//     const titleWeight = item.titleWeight || final.itemTitleWeight || 600;
+//     const titleColor = item.titleColor || final.itemTitleColor || 'var(--text-color)';
+//     const titleClassName = item.titleClassName || '';
+//     const descriptionSize = item.descriptionSize || final.itemDescriptionSize || '0.875rem';
+//     const descriptionWeight = item.descriptionWeight || final.itemDescriptionWeight || 400;
+//     const descriptionColor = item.descriptionColor || final.itemDescriptionColor || 'var(--text-muted)';
+//     const descriptionClassName = item.descriptionClassName || '';
+//     const featureContent = (
+//       <div className={`feature-section__item ${item.className || ''}`} style={item.style}>
+//         {(item.icon || item.imageUrl || final.layout === 'checklist') && (
+//           <div 
+//             className="feature-section__icon-container"
+//             style={{ marginBottom: '1rem' }}
+//           >
+//             {item.imageUrl ? (
+//               <img 
+//                 src={item.imageUrl} 
+//                 alt={item.imageAlt || ''} 
+//                 className={`feature-section__image ${item.imageClassName || ''}`}
+//                 style={{
+//                   width: `${iconSize}px`,
+//                   height: `${iconSize}px`,
+//                   objectFit: 'cover',
+//                   borderRadius: '50%',
+//                   ...item.imageStyle,
+//                 }}
+//               />
+//             ) : (
+//               <div className="feature-section__icon-wrapper">
+//                 <FeatureIcon
+//                   icon={item.icon}
+//                   iconColor={iconColor}
+//                   iconSize={iconSize}
+//                   iconClassName={iconClassName}
+//                   layout={final.layout}
+//                   checklistIcon={checkmarkIcon}
+//                   checklistColor={checkmarkColor}
+//                   checklistSize={checkmarkSize}
+//                   checklistClassName={checkmarkClassName}
+//                 />
+//               </div>
+//             )}
+//           </div>
+//         )}
+//         {item.title && (
+//           <Text 
+//             block
+//             size={titleSize}
+//             weight={titleWeight}
+//             color={titleColor}
+//             funcss={`feature-section__title ${titleClassName}`}
+//             style={{ marginBottom: '0.75rem' }}
+//           >
+//             {item.title}
+//           </Text>
+//         )}
+//         {item.description && (
+//           <Text 
+//             block
+//             size={descriptionSize}
+//             weight={descriptionWeight}
+//             color={descriptionColor}
+//             funcss={`feature-section__description ${descriptionClassName}`}
+//           >
+//             {item.description}
+//           </Text>
+//         )}
+//         {item.content && (
+//           <div 
+//             className="feature-section__additional-content"
+//             style={{ marginTop: '1rem' }}
+//           >
+//             {item.content}
+//           </div>
+//         )}
+//         {renderItemCTA(item)}
+//       </div>
+//     );
+//     // Apply card styling if card prop is true
+//     if (final.card) {
+//       const cardClasses = [
+//         'feature-section__card',
+//         'card',
+//         cardHoverEffect !== 'none' ? `card--hover-${cardHoverEffect}` : '',
+//         item.className || '',
+//         final.cardClassName || '',
+//       ].filter(Boolean).join(' ');
+//       const cardStyles: React.CSSProperties = {
+//         padding: getSpacingValue(cardPadding, '1.5rem'),
+//         borderRadius: cardRounded,
+//         boxShadow: cardShadow !== 'none' ? getCssVariableValue(`shadow-${cardShadow}`) || undefined : undefined,
+//         border: cardBorder ? `1px solid ${getCssVariableValue(cardBorderColor) || cardBorderColor}` : 'none',
+//         height: '100%',
+//         maxWidth: final.itemMaxWidth || '100%',
+//         ...item.style,
+//       };
+//       return (
+//         <div key={index} className={cardClasses} style={cardStyles}>
+//           {featureContent}
+//         </div>
+//       );
+//     }
+//     // Regular item without card
+//     return (
+//       <div 
+//         key={index} 
+//         className={`feature-section__item-wrapper ${item.className || ''}`}
+//         style={{ 
+//           maxWidth: final.itemMaxWidth || '100%',
+//           ...item.style 
+//         }}
+//       >
+//         {featureContent}
+//       </div>
+//     );
+//   };
+//   const renderFlexFeatures = () => {
+//     if (featuresArray.length === 0) return null;
+//     const gapValue = final.gap !== undefined ? `${final.gap * 0.25}rem` : '2rem';
+//     const flexGap = gapValue;
+//     if (final.layout === 'centered') {
+//       const maxWidth = final.maxWidth || '48rem';
+//       return (
+//         <div 
+//           className="feature-section__centered-container"
+//           style={{ 
+//             maxWidth,
+//             margin: '0 auto',
+//           }}
+//         >
+//           {featuresArray.map((item, index) => renderFeatureItem(item, index))}
+//         </div>
+//       );
+//     }
+//     // Use Flex layout with proper flexbox values
+//     return (
+//       <div 
+//         className="feature-section__flex-container"
+//         style={{
+//           display: 'flex',
+//           flexWrap: final.wrap !== false ? 'wrap' : 'nowrap',
+//           gap: flexGap,
+//           alignItems: convertFlexValue(final.align) || 'stretch',
+//           justifyContent: convertFlexValue(final.justify) || 'flex-start',
+//           maxWidth: final.maxWidth || '100%',
+//           margin: '0 auto',
+//         }}
+//       >
+//         {featuresArray.map((item, index) => (
+//           <div key={index} className="feature-section__flex-item">
+//             {renderFeatureItem(item, index)}
+//           </div>
+//         ))}
+//       </div>
+//     );
+//   };
+//   const renderCarouselFeatures = () => {
+//     if (featuresArray.length === 0) return null;
+//     // Prepare carousel items
+//     const carouselItems = featuresArray.map((item, index) => 
+//       renderFeatureItem(item, index)
+//     );
+//     return (
+//       <div 
+//         className={`feature-section__carousel-container ${final.carouselContainerClassName || ''}`}
+//         style={final.carouselContainerStyle}
+//       >
+//         <Carousel
+//           scrollNumber={final.scrollNumber}
+//           gap={final.gap || 1} // Default gap for carousel
+//           funcss={final.carouselFuncss}
+//           showDashes={final.showDashes}
+//           allowVerticalOverflow={final.allowVerticalOverflow}
+//           itemPadding={final.itemPadding || '0.5rem'}
+//           controlerSize={final.controlerSize}
+//           controlerIconSize={final.controlerIconSize}
+//           infiniteScroll={final.infiniteScroll}
+//           infiniteScrollSpeed={final.infiniteScrollSpeed}
+//           infiniteScrollDirection={final.infiniteScrollDirection}
+//         >
+//           {carouselItems}
+//         </Carousel>
+//       </div>
+//     );
+//   };
+//   const renderFeaturesContent = () => {
+//     if (featuresArray.length === 0) return null;
+//     // Use carousel if isCarousel is true
+//     if (final.isCarousel) {
+//       return renderCarouselFeatures();
+//     }
+//     // Otherwise use flex layout
+//     return renderFlexFeatures();
+//   };
+//   const getLayoutClasses = () => {
+//     const classes = ['feature-section'];
+//     if (final.layout) {
+//       classes.push(`feature-section--${final.layout}`);
+//     }
+//     if (final.isCarousel) {
+//       classes.push('feature-section--carousel');
+//     }
+//     if (final.className) {
+//       classes.push(final.className);
+//     }
+//     if (final.sectionClass) {
+//       classes.push(final.sectionClass);
+//     }
+//     if (final.funcss) {
+//       classes.push(final.funcss);
+//     }
+//     return classes.filter(Boolean).join(' ');
+//   };
+//   const getContainerStyles = (): React.CSSProperties => {
+//     const padding = getSpacingValue(final.padding, '3rem 0');
+//     return {
+//       padding: padding,
+//       ...final.style,
+//     };
+//   };
+//   const getTextAlign = (align?: 'left' | 'center' | 'right'): React.CSSProperties => {
+//     return {
+//       textAlign: align || 'center',
+//     };
+//   };
+//   return (
+//     <section
+//       id={final.id}
+//       className={getLayoutClasses()}
+//       style={getContainerStyles()}
+//     >
+//       <div 
+//         className={`feature-section__container ${final.containerClassName || ''}`}
+//         style={{
+//           maxWidth: final.maxWidth || '1280px',
+//           margin: '0 auto',
+//           padding: '0 1rem',
+//           ...final.containerStyle,
+//         }}
+//       >
+//         {(final.title || final.subtitle || final.description) && (
+//           <div 
+//             className="feature-section__header"
+//             style={{
+//               marginBottom: '3rem',
+//               maxWidth: final.layout === 'centered' ? '48rem' : '100%',
+//               marginLeft: 'auto',
+//               marginRight: 'auto',
+//               ...getTextAlign(final.titleAlign),
+//             }}
+//           >
+//             {final.subtitle && (
+//               <Text 
+//                 block
+//                 size={final.subtitleSize || 'sm'}
+//                 weight={final.subtitleWeight || 600}
+//                 color={final.subtitleColor || 'var(--primary)'}
+//                 funcss={`feature-section__subtitle ${final.subtitleClassName || ''}`}
+//                 style={{
+//                   textTransform: 'uppercase',
+//                   letterSpacing: '0.05em',
+//                   marginBottom: '0.5rem',
+//                 }}
+//               >
+//                 {final.subtitle}
+//               </Text>
+//             )}
+//             {final.title && (
+//               <Text 
+//                 block
+//                 size={final.titleSize || 'xl'}
+//                 weight={final.titleWeight || 700}
+//                 color={final.titleColor || 'var(--text-color)'}
+//                 funcss={`feature-section__main-title ${final.titleClassName || ''}`}
+//                 style={{ marginBottom: '1rem' }}
+//               >
+//                 {final.title}
+//               </Text>
+//             )}
+//             {final.description && (
+//               <Text 
+//                 block
+//                 size={final.descriptionSize || 'sm'}
+//                 weight={final.descriptionWeight || 400}
+//                 color={final.descriptionColor || 'var(--text-muted)'}
+//                 funcss={`feature-section__section-description ${final.descriptionClassName || ''}`}
+//               >
+//                 {final.description}
+//               </Text>
+//             )}
+//           </div>
+//         )}
+//         <div className="feature-section__content">
+//           {renderFeaturesContent()}
+//           {final.children}
+//         </div>
+//         {final.ctaText && (
+//           <div 
+//             className="feature-section__cta-container"
+//             style={{
+//               marginTop: '2.5rem',
+//               ...getTextAlign(final.ctaAlign),
+//             }}
+//           >
+//             <Button
+//               onClick={final.ctaOnClick || (() => final.ctaUrl && (window.location.href = final.ctaUrl))}
+//               funcss={`feature-section__cta ${final.ctaClassName || ''}`}
+//               stringPrefix={final.ctaStringPrefix}
+//               stringSuffix={final.ctaStringSuffix}
+//               startIcon={final.ctaStartIcon}
+//               endIcon={final.ctaEndIcon}
+//               iconSize={final.ctaIconSize}
+//               bg={final.ctaBg || 'primary'}
+//               isLoading={final.ctaIsLoading}
+//               status={final.ctaStatus}
+//               url={final.ctaUrl}
+//             >
+//               {final.ctaText}
+//             </Button>
+//           </div>
+//         )}
+//       </div>
+//     </section>
+//   );
+// };
+// export default Feature;