/**
 * FederatedDropdown Component
 *
 * Full-featured federated search dropdown with:
 * - Multi-column layout (suggestions + products)
 * - Filtered tabs with product results
 * - Popular brands
 * - Trending products
 * - Category navigation
 * - Responsive design
 * - Rich product cards
 */
import React, { useState, useRef, useCallback, useMemo, forwardRef, useImperativeHandle, } from 'react';
import { useSearchContext } from './SearchProvider';
import { useQuerySuggestionsEnhanced } from '../hooks/useQuerySuggestionsEnhanced';
import { clsx } from 'clsx';
// ============================================================================
// Constants
// ============================================================================
const TRANSITIONS = {
    fast: '150ms ease-in-out',
    normal: '200ms ease-in-out',
    slow: '300ms ease-in-out',
};
const BORDER_RADIUS = {
    sm: 4,
    md: 6,
    lg: 8,
    full: 9999,
};
// ============================================================================
// Styles
// ============================================================================
const styles = {
    container: {
        backgroundColor: 'var(--seekora-bg-surface, transparent)',
        border: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
        borderRadius: `var(--seekora-border-radius-lg, ${BORDER_RADIUS.lg * 1.5}px)`,
        boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
        overflow: 'hidden',
    },
    header: {
        padding: '12px 20px',
        borderBottom: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
        backgroundColor: 'var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1))',
    },
    content: {
        display: 'flex',
        overflowY: 'auto',
    },
    contentStacked: {
        flexDirection: 'column',
    },
    suggestionsColumn: {
        borderRight: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
        overflowY: 'auto',
    },
    productsColumn: {
        flex: 1,
        overflowY: 'auto',
        backgroundColor: 'var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1))',
    },
    section: {
        padding: '12px 0',
    },
    sectionHeader: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: '0 20px 8px',
    },
    sectionTitle: {
        fontSize: '11px',
        fontWeight: 700,
        color: 'var(--seekora-text-tertiary, #9ca3af)',
        textTransform: 'uppercase',
        letterSpacing: '0.08em',
        margin: 0,
    },
    viewAllLink: {
        fontSize: '12px',
        color: 'var(--seekora-primary, #3b82f6)',
        textDecoration: 'none',
        fontWeight: 600,
        cursor: 'pointer',
    },
    suggestionItem: {
        display: 'flex',
        alignItems: 'center',
        padding: '10px 20px',
        cursor: 'pointer',
        transition: `background-color ${TRANSITIONS.fast}`,
        gap: '12px',
    },
    suggestionItemActive: {
        backgroundColor: 'var(--seekora-bg-hover, #f3f4f6)',
    },
    suggestionIcon: {
        width: '16px',
        height: '16px',
        color: 'var(--seekora-text-secondary, #6b7280)',
        flexShrink: 0,
    },
    suggestionText: {
        flex: 1,
        fontSize: '14px',
        color: 'var(--seekora-text-primary, inherit)',
        fontWeight: 500,
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
    },
    suggestionArrow: {
        width: '16px',
        height: '16px',
        color: 'var(--seekora-text-tertiary, #d1d5db)',
        opacity: 0,
        transition: 'opacity 100ms ease',
    },
    suggestionArrowVisible: {
        opacity: 1,
    },
    suggestionCount: {
        fontSize: '12px',
        color: 'var(--seekora-text-tertiary, #9ca3af)',
    },
    tabsContainer: {
        display: 'flex',
        gap: '4px',
        padding: '12px 20px',
        borderBottom: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
        overflowX: 'auto',
    },
    tab: {
        display: 'flex',
        alignItems: 'center',
        gap: '6px',
        padding: '8px 16px',
        fontSize: '13px',
        fontWeight: 500,
        color: 'var(--seekora-text-secondary, inherit)',
        backgroundColor: 'transparent',
        border: '1px solid transparent',
        borderRadius: `${BORDER_RADIUS.full}px`,
        cursor: 'pointer',
        whiteSpace: 'nowrap',
        transition: `all ${TRANSITIONS.fast}`,
    },
    tabActive: {
        color: 'var(--seekora-primary, #3b82f6)',
        backgroundColor: 'var(--seekora-primary-light, #eff6ff)',
        borderColor: 'var(--seekora-primary, #3b82f6)',
    },
    tabCount: {
        fontSize: '11px',
        fontWeight: 600,
        padding: '2px 6px',
        borderRadius: `${BORDER_RADIUS.lg}px`,
        backgroundColor: 'var(--seekora-bg-tertiary, rgba(255, 255, 255, 0.1))',
    },
    tabCountActive: {
        backgroundColor: 'var(--seekora-primary, #3b82f6)',
        color: 'white',
    },
    productsGrid: {
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
        gap: '16px',
        padding: '16px 20px',
    },
    productCard: {
        display: 'flex',
        flexDirection: 'column',
        backgroundColor: 'var(--seekora-bg-surface, transparent)',
        borderRadius: `${BORDER_RADIUS.lg}px`,
        overflow: 'hidden',
        cursor: 'pointer',
        transition: `transform ${TRANSITIONS.fast}, box-shadow ${TRANSITIONS.fast}`,
        border: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
    },
    productCardHover: {
        transform: 'translateY(-2px)',
        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
    },
    productImage: {
        width: '100%',
        aspectRatio: '1',
        objectFit: 'cover',
        backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
    },
    productInfo: {
        padding: '10px',
    },
    productTitle: {
        fontSize: '13px',
        fontWeight: 500,
        color: 'var(--seekora-text-primary, inherit)',
        margin: 0,
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        display: '-webkit-box',
        WebkitLineClamp: 2,
        WebkitBoxOrient: 'vertical',
        lineHeight: 1.3,
    },
    productPrice: {
        fontSize: '14px',
        fontWeight: 700,
        color: 'var(--seekora-primary, #3b82f6)',
        marginTop: '4px',
    },
    brandsGrid: {
        display: 'flex',
        flexWrap: 'wrap',
        gap: '8px',
        padding: '8px 20px 16px',
    },
    brandChip: {
        display: 'inline-flex',
        alignItems: 'center',
        gap: '8px',
        padding: '8px 14px',
        fontSize: '13px',
        fontWeight: 500,
        color: 'var(--seekora-text-primary, inherit)',
        backgroundColor: 'var(--seekora-bg-surface, transparent)',
        border: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
        borderRadius: `${BORDER_RADIUS.lg}px`,
        cursor: 'pointer',
        transition: `all ${TRANSITIONS.fast}`,
    },
    brandChipHover: {
        borderColor: 'var(--seekora-primary, #3b82f6)',
        backgroundColor: 'var(--seekora-primary-light, #eff6ff)',
    },
    brandLogo: {
        width: '20px',
        height: '20px',
        borderRadius: `${BORDER_RADIUS.sm}px`,
        objectFit: 'contain',
        backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
    },
    footer: {
        padding: '12px 20px',
        borderTop: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
        backgroundColor: 'var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1))',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        fontSize: '12px',
        color: 'var(--seekora-text-secondary, inherit)',
    },
    emptyState: {
        padding: '48px 20px',
        textAlign: 'center',
        color: 'var(--seekora-text-secondary, inherit)',
    },
    highlight: {
        backgroundColor: 'var(--seekora-highlight-bg, #fef9c3)',
        fontWeight: 600,
        padding: '0 2px',
        borderRadius: `${BORDER_RADIUS.sm / 2}px`,
    },
};
// ============================================================================
// Icons
// ============================================================================
const SearchIcon = ({ style }) => (React.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", style: { ...styles.suggestionIcon, ...style } },
    React.createElement("path", { fillRule: "evenodd", d: "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z", clipRule: "evenodd" })));
const ClockIcon = ({ style }) => (React.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", style: { ...styles.suggestionIcon, ...style } },
    React.createElement("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z", clipRule: "evenodd" })));
const ArrowRightIcon = ({ style }) => (React.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", style: { ...styles.suggestionArrow, ...style } },
    React.createElement("path", { fillRule: "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", clipRule: "evenodd" })));
const TrendingIcon = ({ style }) => (React.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", style: { width: 14, height: 14, color: '#10b981', ...style } },
    React.createElement("path", { fillRule: "evenodd", d: "M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z", clipRule: "evenodd" })));
const ImagePlaceholder = () => (React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", style: { width: '40%', height: '40%', color: '#d1d5db' } },
    React.createElement("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2", strokeWidth: "2" }),
    React.createElement("circle", { cx: "8.5", cy: "8.5", r: "1.5", strokeWidth: "2" }),
    React.createElement("polyline", { points: "21 15 16 10 5 21", strokeWidth: "2" })));
// ============================================================================
// Component
// ============================================================================
export const FederatedDropdown = forwardRef(function FederatedDropdown(props, ref) {
    const { query, isOpen = true, maxSuggestions = 8, maxProducts = 8, maxBrands = 8, minQueryLength = 0, debounceMs = 200, filteredTabs: tabsConfig, showProducts = true, showBrands = true, showFilteredTabs = true, showRecentSearches = true, layout = 'side-by-side', productsColumnWidth = '60%', suggestionsColumnWidth = '40%', showPrices = true, currencySymbol = '$', classNames = {}, style, renderProduct, renderSuggestion, renderBrand, renderTab, header, footer, viewAllProductsLink, width = '800px', maxHeight = '600px', zIndex = 1000, analyticsTags, includeFacets: includeFacetsProp = true, includeCategories: includeCategoriesProp = true, includeDropdownRecommendations: includeDropdownRecommendationsProp = true, onSuggestionSelect, onProductClick, onBrandClick, onTabSelect, onRecentSearchClick, onRecentSearchRemove, onViewAllClick, onOpen, onClose, } = props;
    const { client } = useSearchContext();
    const containerRef = useRef(null);
    const [activeIndex, setActiveIndex] = useState(-1);
    const [activeTab, setActiveTab] = useState('all');
    const [hoveredProduct, setHoveredProduct] = useState(null);
    const [hoveredBrand, setHoveredBrand] = useState(null);
    // Use enhanced hook
    const { suggestions, loading, filteredTabs, trendingProducts, popularBrands, recentSearches, addRecentSearch, removeRecentSearch, hasContent, } = useQuerySuggestionsEnhanced({
        client,
        query,
        enabled: isOpen,
        debounceMs,
        maxSuggestions,
        minQueryLength,
        includeDropdownRecommendations: includeDropdownRecommendationsProp,
        includeCategories: includeCategoriesProp,
        includeFacets: includeFacetsProp,
        filteredTabs: tabsConfig,
        analyticsTags,
        enableRecentSearches: showRecentSearches,
    });
    // Get products for current tab
    const currentTabProducts = useMemo(() => {
        if (activeTab === 'all') {
            // Combine trending products with first tab products
            const allProducts = [...trendingProducts];
            filteredTabs.forEach(tab => {
                if (tab.products) {
                    tab.products.forEach(product => {
                        if (!allProducts.find(p => p.id === product.id)) {
                            allProducts.push(product);
                        }
                    });
                }
            });
            return allProducts.slice(0, maxProducts);
        }
        const tab = filteredTabs.find(t => t.id === activeTab);
        return tab?.products?.slice(0, maxProducts) || [];
    }, [activeTab, filteredTabs, trendingProducts, maxProducts]);
    // All navigable items
    const allItems = useMemo(() => {
        const items = [];
        // Recent searches (when no query)
        if (query.length === 0 && showRecentSearches) {
            recentSearches.slice(0, 5).forEach(search => {
                items.push({ type: 'recent', data: search });
            });
        }
        // Suggestions
        suggestions.forEach(suggestion => {
            items.push({ type: 'suggestion', data: suggestion });
        });
        return items;
    }, [query, showRecentSearches, recentSearches, suggestions]);
    // Navigation
    const navigateNext = useCallback(() => {
        setActiveIndex(prev => (prev < allItems.length - 1 ? prev + 1 : 0));
    }, [allItems.length]);
    const navigatePrevious = useCallback(() => {
        setActiveIndex(prev => (prev > 0 ? prev - 1 : allItems.length - 1));
    }, [allItems.length]);
    const selectActive = useCallback(() => {
        if (activeIndex < 0 || activeIndex >= allItems.length)
            return;
        const item = allItems[activeIndex];
        if (item.type === 'recent') {
            onRecentSearchClick?.(item.data);
        }
        else if (item.type === 'suggestion') {
            onSuggestionSelect?.(item.data);
            addRecentSearch(item.data.query);
        }
    }, [activeIndex, allItems, onRecentSearchClick, onSuggestionSelect, addRecentSearch]);
    // Expose ref
    useImperativeHandle(ref, () => ({
        getActiveIndex: () => activeIndex,
        setActiveIndex,
        selectActive,
        navigateNext,
        navigatePrevious,
        getActiveTab: () => activeTab,
        setActiveTab,
    }), [activeIndex, selectActive, navigateNext, navigatePrevious, activeTab]);
    // Highlight query in text
    const highlightQuery = (text) => {
        if (!query)
            return text;
        const parts = text.split(new RegExp(`(${query})`, 'gi'));
        return parts.map((part, i) => part.toLowerCase() === query.toLowerCase() ? (React.createElement("span", { key: i, style: styles.highlight }, part)) : part);
    };
    // Format price
    const formatPrice = (price, currency) => {
        if (price === undefined)
            return '';
        const symbol = currency || currencySymbol;
        return `${symbol}${price.toLocaleString()}`;
    };
    // Handle tab change
    const handleTabChange = (tabId) => {
        setActiveTab(tabId);
        const tab = filteredTabs.find(t => t.id === tabId);
        if (tab) {
            onTabSelect?.(tab);
        }
    };
    if (!isOpen)
        return null;
    const showTabs = showFilteredTabs && (filteredTabs.length > 0 || trendingProducts.length > 0);
    const showProductsSection = showProducts && currentTabProducts.length > 0;
    const showBrandsSection = showBrands && popularBrands.length > 0;
    const showRecent = showRecentSearches && query.length === 0 && recentSearches.length > 0;
    const showSuggestions = suggestions.length > 0;
    const isStackedLayout = layout === 'stacked' || layout === 'full-width';
    return (React.createElement("div", { ref: containerRef, role: "listbox", "aria-label": "Search suggestions and products", className: clsx('seekora-federated-dropdown', classNames.root, classNames.container), style: {
            position: 'absolute',
            width,
            zIndex,
            ...styles.container,
            ...style,
        } },
        header && React.createElement("div", { style: styles.header }, header),
        showTabs && (React.createElement("div", { style: styles.tabsContainer, className: classNames.tabsList },
            React.createElement("button", { style: {
                    ...styles.tab,
                    ...(activeTab === 'all' ? styles.tabActive : {}),
                }, onClick: () => handleTabChange('all'), className: clsx(classNames.tabItem, activeTab === 'all' && classNames.tabActive) },
                "All Results",
                trendingProducts.length > 0 && (React.createElement("span", { style: {
                        ...styles.tabCount,
                        ...(activeTab === 'all' ? styles.tabCountActive : {}),
                    } },
                    trendingProducts.length,
                    "+"))),
            filteredTabs.map((tab) => (renderTab ? renderTab(tab, activeTab === tab.id) : (React.createElement("button", { key: tab.id, style: {
                    ...styles.tab,
                    ...(activeTab === tab.id ? styles.tabActive : {}),
                }, onClick: () => handleTabChange(tab.id), className: clsx(classNames.tabItem, activeTab === tab.id && classNames.tabActive) },
                tab.label,
                tab.nb_hits !== undefined && (React.createElement("span", { style: {
                        ...styles.tabCount,
                        ...(activeTab === tab.id ? styles.tabCountActive : {}),
                    } }, tab.nb_hits)))))))),
        React.createElement("div", { style: {
                ...styles.content,
                ...(isStackedLayout ? styles.contentStacked : {}),
                maxHeight,
            } },
            React.createElement("div", { style: {
                    ...styles.suggestionsColumn,
                    width: isStackedLayout ? '100%' : suggestionsColumnWidth,
                    minWidth: isStackedLayout ? undefined : '280px',
                    borderRight: isStackedLayout ? 'none' : styles.suggestionsColumn.borderRight,
                } },
                showRecent && (React.createElement("div", { style: styles.section, className: classNames.recentSearches },
                    React.createElement("div", { style: styles.sectionHeader },
                        React.createElement("h3", { style: styles.sectionTitle }, "Recent Searches")),
                    recentSearches.slice(0, 5).map((search, index) => {
                        const isActive = activeIndex === index;
                        return (React.createElement("div", { key: `recent-${search.query}`, role: "option", "aria-selected": isActive, style: {
                                ...styles.suggestionItem,
                                ...(isActive ? styles.suggestionItemActive : {}),
                            }, onClick: () => onRecentSearchClick?.(search), onMouseEnter: () => setActiveIndex(index), className: clsx(classNames.recentItem, isActive && classNames.suggestionItemActive) },
                            React.createElement(ClockIcon, null),
                            React.createElement("span", { style: styles.suggestionText }, search.query),
                            React.createElement(ArrowRightIcon, { style: isActive ? styles.suggestionArrowVisible : {} })));
                    }))),
                showSuggestions && (React.createElement("div", { style: styles.section, className: classNames.suggestionsList },
                    React.createElement("div", { style: styles.sectionHeader },
                        React.createElement("h3", { style: styles.sectionTitle }, query ? 'Suggestions' : 'Popular Searches')),
                    suggestions.slice(0, maxSuggestions).map((suggestion, index) => {
                        const itemIndex = showRecent ? recentSearches.length + index : index;
                        const isActive = activeIndex === itemIndex;
                        return renderSuggestion ? renderSuggestion(suggestion, index, isActive) : (React.createElement("div", { key: suggestion.objectID || `suggestion-${index}`, role: "option", "aria-selected": isActive, style: {
                                ...styles.suggestionItem,
                                ...(isActive ? styles.suggestionItemActive : {}),
                            }, onClick: () => {
                                onSuggestionSelect?.(suggestion);
                                addRecentSearch(suggestion.query);
                            }, onMouseEnter: () => setActiveIndex(itemIndex), className: clsx(classNames.suggestionItem, isActive && classNames.suggestionItemActive) },
                            React.createElement(SearchIcon, null),
                            React.createElement("span", { style: styles.suggestionText }, highlightQuery(suggestion.query)),
                            suggestion.count !== undefined && (React.createElement("span", { style: styles.suggestionCount }, suggestion.count.toLocaleString())),
                            React.createElement(ArrowRightIcon, { style: isActive ? styles.suggestionArrowVisible : {} })));
                    }))),
                showBrandsSection && (React.createElement("div", { style: styles.section, className: classNames.brandsList },
                    React.createElement("div", { style: styles.sectionHeader },
                        React.createElement("h3", { style: styles.sectionTitle }, "Popular Brands")),
                    React.createElement("div", { style: styles.brandsGrid }, popularBrands.slice(0, maxBrands).map((brand, index) => (renderBrand ? renderBrand(brand, index) : (React.createElement("button", { key: `brand-${brand.name}`, style: {
                            ...styles.brandChip,
                            ...(hoveredBrand === brand.name ? styles.brandChipHover : {}),
                        }, onClick: () => onBrandClick?.(brand), onMouseEnter: () => setHoveredBrand(brand.name), onMouseLeave: () => setHoveredBrand(null), className: classNames.brandItem },
                        brand.logo && (React.createElement("img", { src: brand.logo, alt: brand.name, style: styles.brandLogo, onError: (e) => {
                                e.target.style.display = 'none';
                            } })),
                        React.createElement("span", null, brand.name))))))))),
            showProductsSection && !isStackedLayout && (React.createElement("div", { style: {
                    ...styles.productsColumn,
                    width: productsColumnWidth,
                } },
                React.createElement("div", { style: styles.section },
                    React.createElement("div", { style: styles.sectionHeader },
                        React.createElement("h3", { style: styles.sectionTitle }, activeTab === 'all' ? 'Trending Products' : `Products in ${filteredTabs.find(t => t.id === activeTab)?.label || activeTab}`),
                        viewAllProductsLink && (React.createElement("a", { href: viewAllProductsLink, style: styles.viewAllLink, onClick: (e) => {
                                e.preventDefault();
                                onViewAllClick?.('products');
                            } }, "View all"))),
                    React.createElement("div", { style: styles.productsGrid, className: classNames.productsList }, currentTabProducts.map((product, index) => (renderProduct ? renderProduct(product, index) : (React.createElement("div", { key: product.id || product.objectID, style: {
                            ...styles.productCard,
                            ...(hoveredProduct === product.id ? styles.productCardHover : {}),
                        }, onClick: () => onProductClick?.(product), onMouseEnter: () => setHoveredProduct(product.id), onMouseLeave: () => setHoveredProduct(null), className: classNames.productItem },
                        product.image ? (React.createElement("img", { src: product.image, alt: product.title || product.name || '', style: styles.productImage, onError: (e) => {
                                e.target.style.display = 'none';
                            } })) : (React.createElement("div", { style: {
                                ...styles.productImage,
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                            } },
                            React.createElement(ImagePlaceholder, null))),
                        React.createElement("div", { style: styles.productInfo },
                            React.createElement("h4", { style: styles.productTitle }, product.title || product.name),
                            showPrices && product.price !== undefined && (React.createElement("p", { style: styles.productPrice }, formatPrice(product.price, product.currency))))))))))))),
        footer ? (React.createElement("div", { style: styles.footer }, footer)) : (React.createElement("div", { style: styles.footer },
            React.createElement("span", null, "Press \u21B5 to search, \u2191\u2193 to navigate"),
            query && (React.createElement("button", { style: { ...styles.viewAllLink, background: 'none', border: 'none' }, onClick: () => onViewAllClick?.('suggestions') },
                "See all results for \"",
                query,
                "\"")))),
        React.createElement("style", null, `
          .seekora-federated-dropdown mark {
            background-color: var(--seekora-highlight-bg, #fef9c3);
            font-weight: 600;
            border-radius: 2px;
            padding: 0 2px;
          }
          .seekora-federated-dropdown [role="option"]:hover svg:last-child {
            opacity: 1;
          }
        `)));
});
export default FederatedDropdown;
