import { AtomicAriaLive as AtomicAriaLive$1, AtomicAutomaticFacet as AtomicAutomaticFacet$1, AtomicAutomaticFacetGenerator as AtomicAutomaticFacetGenerator$1, AtomicBreadbox as AtomicBreadbox$1, AtomicCategoryFacet as AtomicCategoryFacet$1, AtomicColorFacet as AtomicColorFacet$1, AtomicComponentError as AtomicComponentError$1, AtomicDidYouMean as AtomicDidYouMean$1, AtomicExternal as AtomicExternal$1, AtomicFacet as AtomicFacet$1, AtomicFacetManager as AtomicFacetManager$1, AtomicFocusTrap as AtomicFocusTrap$1, AtomicFoldedResultList as AtomicFoldedResultList$1, AtomicFormatCurrency as AtomicFormatCurrency$1, AtomicFormatNumber as AtomicFormatNumber$1, AtomicFormatUnit as AtomicFormatUnit$1, AtomicGeneratedAnswer as AtomicGeneratedAnswer$1, AtomicGeneratedAnswerFeedbackModal as AtomicGeneratedAnswerFeedbackModal$1, AtomicHtml as AtomicHtml$1, AtomicIcon as AtomicIcon$1, AtomicLayoutSection as AtomicLayoutSection$1, AtomicLoadMoreResults as AtomicLoadMoreResults$1, AtomicNoResults as AtomicNoResults$1, AtomicNotifications as AtomicNotifications$1, AtomicNumericFacet as AtomicNumericFacet$1, AtomicNumericRange as AtomicNumericRange$1, AtomicPager as AtomicPager$1, AtomicPopover as AtomicPopover$1, AtomicQueryError as AtomicQueryError$1, AtomicQuerySummary as AtomicQuerySummary$1, AtomicQuickview as AtomicQuickview$1, AtomicQuickviewModal as AtomicQuickviewModal$1, AtomicRatingFacet as AtomicRatingFacet$1, AtomicRatingRangeFacet as AtomicRatingRangeFacet$1, AtomicRecsError as AtomicRecsError$1, AtomicRecsInterface as AtomicRecsInterface$1, AtomicRecsResult as AtomicRecsResult$1, AtomicRefineModal as AtomicRefineModal$1, AtomicRefineToggle as AtomicRefineToggle$1, AtomicResult as AtomicResult$1, AtomicResultBadge as AtomicResultBadge$1, AtomicResultChildren as AtomicResultChildren$1, AtomicResultChildrenTemplate as AtomicResultChildrenTemplate$1, AtomicResultDate as AtomicResultDate$1, AtomicResultFieldsList as AtomicResultFieldsList$1, AtomicResultHtml as AtomicResultHtml$1, AtomicResultIcon as AtomicResultIcon$1, AtomicResultImage as AtomicResultImage$1, AtomicResultLink as AtomicResultLink$1, AtomicResultList as AtomicResultList$1, AtomicResultLocalizedText as AtomicResultLocalizedText$1, AtomicResultMultiValueText as AtomicResultMultiValueText$1, AtomicResultNumber as AtomicResultNumber$1, AtomicResultPrintableUri as AtomicResultPrintableUri$1, AtomicResultRating as AtomicResultRating$1, AtomicResultSectionActions as AtomicResultSectionActions$1, AtomicResultSectionBadges as AtomicResultSectionBadges$1, AtomicResultSectionBottomMetadata as AtomicResultSectionBottomMetadata$1, AtomicResultSectionChildren as AtomicResultSectionChildren$1, AtomicResultSectionEmphasized as AtomicResultSectionEmphasized$1, AtomicResultSectionExcerpt as AtomicResultSectionExcerpt$1, AtomicResultSectionTitle as AtomicResultSectionTitle$1, AtomicResultSectionTitleMetadata as AtomicResultSectionTitleMetadata$1, AtomicResultSectionVisual as AtomicResultSectionVisual$1, AtomicResultsPerPage as AtomicResultsPerPage$1, AtomicResultText as AtomicResultText$1, AtomicResultTimespan as AtomicResultTimespan$1, AtomicSearchBox as AtomicSearchBox$1, AtomicSearchBoxInstantResults as AtomicSearchBoxInstantResults$1, AtomicSearchBoxQuerySuggestions as AtomicSearchBoxQuerySuggestions$1, AtomicSearchBoxRecentQueries as AtomicSearchBoxRecentQueries$1, AtomicSearchInterface as AtomicSearchInterface$1, AtomicSearchLayout as AtomicSearchLayout$1, AtomicSegmentedFacet as AtomicSegmentedFacet$1, AtomicSegmentedFacetScrollable as AtomicSegmentedFacetScrollable$1, AtomicSmartSnippet as AtomicSmartSnippet$1, AtomicSmartSnippetFeedbackModal as AtomicSmartSnippetFeedbackModal$1, AtomicSmartSnippetSuggestions as AtomicSmartSnippetSuggestions$1, AtomicSortDropdown as AtomicSortDropdown$1, AtomicSortExpression as AtomicSortExpression$1, AtomicTab as AtomicTab$1, AtomicTableElement as AtomicTableElement$1, AtomicTabManager as AtomicTabManager$1, AtomicText as AtomicText$1, AtomicTimeframe as AtomicTimeframe$1, AtomicTimeframeFacet as AtomicTimeframeFacet$1 } from '@coveo/atomic/components';
import { createComponent } from '@lit/react';
import React, { createElement, useRef, useEffect } from 'react';
import 'react-dom';
import { defineCustomElements } from '@coveo/atomic/loader';
import { buildRecommendationEngine, getSampleRecommendationEngineConfiguration } from '@coveo/headless/recommendation';
import { createRoot } from 'react-dom/client';
import { renderToString } from 'react-dom/server';

const AtomicAriaLive = createComponent({
    tagName: 'atomic-aria-live',
    react: React,
    elementClass: AtomicAriaLive$1,
});
const AtomicAutomaticFacet = createComponent({
    tagName: 'atomic-automatic-facet',
    react: React,
    elementClass: AtomicAutomaticFacet$1,
});
const AtomicAutomaticFacetGenerator = createComponent({
    tagName: 'atomic-automatic-facet-generator',
    react: React,
    elementClass: AtomicAutomaticFacetGenerator$1,
});
const AtomicBreadbox = createComponent({
    tagName: 'atomic-breadbox',
    react: React,
    elementClass: AtomicBreadbox$1,
});
const AtomicCategoryFacet = createComponent({
    tagName: 'atomic-category-facet',
    react: React,
    elementClass: AtomicCategoryFacet$1,
});
const AtomicColorFacet = createComponent({
    tagName: 'atomic-color-facet',
    react: React,
    elementClass: AtomicColorFacet$1,
});
const AtomicComponentError = createComponent({
    tagName: 'atomic-component-error',
    react: React,
    elementClass: AtomicComponentError$1,
});
const AtomicDidYouMean = createComponent({
    tagName: 'atomic-did-you-mean',
    react: React,
    elementClass: AtomicDidYouMean$1,
});
const AtomicExternal = createComponent({
    tagName: 'atomic-external',
    react: React,
    elementClass: AtomicExternal$1,
});
const AtomicFacet = createComponent({
    tagName: 'atomic-facet',
    react: React,
    elementClass: AtomicFacet$1,
});
const AtomicFacetManager = createComponent({
    tagName: 'atomic-facet-manager',
    react: React,
    elementClass: AtomicFacetManager$1,
});
const AtomicFocusTrap = createComponent({
    tagName: 'atomic-focus-trap',
    react: React,
    elementClass: AtomicFocusTrap$1,
});
const AtomicFoldedResultList = createComponent({
    tagName: 'atomic-folded-result-list',
    react: React,
    elementClass: AtomicFoldedResultList$1,
});
const AtomicFormatCurrency = createComponent({
    tagName: 'atomic-format-currency',
    react: React,
    elementClass: AtomicFormatCurrency$1,
});
const AtomicFormatNumber = createComponent({
    tagName: 'atomic-format-number',
    react: React,
    elementClass: AtomicFormatNumber$1,
});
const AtomicFormatUnit = createComponent({
    tagName: 'atomic-format-unit',
    react: React,
    elementClass: AtomicFormatUnit$1,
});
const AtomicGeneratedAnswer = createComponent({
    tagName: 'atomic-generated-answer',
    react: React,
    elementClass: AtomicGeneratedAnswer$1,
});
const AtomicGeneratedAnswerFeedbackModal = createComponent({
    tagName: 'atomic-generated-answer-feedback-modal',
    react: React,
    elementClass: AtomicGeneratedAnswerFeedbackModal$1,
});
const AtomicHtml = createComponent({
    tagName: 'atomic-html',
    react: React,
    elementClass: AtomicHtml$1,
});
const AtomicIcon = createComponent({
    tagName: 'atomic-icon',
    react: React,
    elementClass: AtomicIcon$1,
});
const AtomicLayoutSection = createComponent({
    tagName: 'atomic-layout-section',
    react: React,
    elementClass: AtomicLayoutSection$1,
});
const AtomicLoadMoreResults = createComponent({
    tagName: 'atomic-load-more-results',
    react: React,
    elementClass: AtomicLoadMoreResults$1,
});
const AtomicNoResults = createComponent({
    tagName: 'atomic-no-results',
    react: React,
    elementClass: AtomicNoResults$1,
});
const AtomicNotifications = createComponent({
    tagName: 'atomic-notifications',
    react: React,
    elementClass: AtomicNotifications$1,
});
const AtomicNumericFacet = createComponent({
    tagName: 'atomic-numeric-facet',
    react: React,
    elementClass: AtomicNumericFacet$1,
});
const AtomicNumericRange = createComponent({
    tagName: 'atomic-numeric-range',
    react: React,
    elementClass: AtomicNumericRange$1,
});
const AtomicPager = createComponent({
    tagName: 'atomic-pager',
    react: React,
    elementClass: AtomicPager$1,
});
const AtomicPopover = createComponent({
    tagName: 'atomic-popover',
    react: React,
    elementClass: AtomicPopover$1,
});
const AtomicQueryError = createComponent({
    tagName: 'atomic-query-error',
    react: React,
    elementClass: AtomicQueryError$1,
});
const AtomicQuerySummary = createComponent({
    tagName: 'atomic-query-summary',
    react: React,
    elementClass: AtomicQuerySummary$1,
});
const AtomicQuickview = createComponent({
    tagName: 'atomic-quickview',
    react: React,
    elementClass: AtomicQuickview$1,
});
const AtomicQuickviewModal = createComponent({
    tagName: 'atomic-quickview-modal',
    react: React,
    elementClass: AtomicQuickviewModal$1,
});
const AtomicRatingFacet = createComponent({
    tagName: 'atomic-rating-facet',
    react: React,
    elementClass: AtomicRatingFacet$1,
});
const AtomicRatingRangeFacet = createComponent({
    tagName: 'atomic-rating-range-facet',
    react: React,
    elementClass: AtomicRatingRangeFacet$1,
});
const AtomicRecsError = createComponent({
    tagName: 'atomic-recs-error',
    react: React,
    elementClass: AtomicRecsError$1,
});
const AtomicRecsInterface = createComponent({
    tagName: 'atomic-recs-interface',
    react: React,
    elementClass: AtomicRecsInterface$1,
});
const AtomicRecsResult = createComponent({
    tagName: 'atomic-recs-result',
    react: React,
    elementClass: AtomicRecsResult$1,
});
const AtomicRefineModal = createComponent({
    tagName: 'atomic-refine-modal',
    react: React,
    elementClass: AtomicRefineModal$1,
});
const AtomicRefineToggle = createComponent({
    tagName: 'atomic-refine-toggle',
    react: React,
    elementClass: AtomicRefineToggle$1,
});
const AtomicResult = createComponent({
    tagName: 'atomic-result',
    react: React,
    elementClass: AtomicResult$1,
});
const AtomicResultBadge = createComponent({
    tagName: 'atomic-result-badge',
    react: React,
    elementClass: AtomicResultBadge$1,
});
const AtomicResultChildren = createComponent({
    tagName: 'atomic-result-children',
    react: React,
    elementClass: AtomicResultChildren$1,
});
const AtomicResultChildrenTemplate = createComponent({
    tagName: 'atomic-result-children-template',
    react: React,
    elementClass: AtomicResultChildrenTemplate$1,
});
const AtomicResultDate = createComponent({
    tagName: 'atomic-result-date',
    react: React,
    elementClass: AtomicResultDate$1,
});
const AtomicResultFieldsList = createComponent({
    tagName: 'atomic-result-fields-list',
    react: React,
    elementClass: AtomicResultFieldsList$1,
});
const AtomicResultHtml = createComponent({
    tagName: 'atomic-result-html',
    react: React,
    elementClass: AtomicResultHtml$1,
});
const AtomicResultIcon = createComponent({
    tagName: 'atomic-result-icon',
    react: React,
    elementClass: AtomicResultIcon$1,
});
const AtomicResultImage = createComponent({
    tagName: 'atomic-result-image',
    react: React,
    elementClass: AtomicResultImage$1,
});
const AtomicResultLink = createComponent({
    tagName: 'atomic-result-link',
    react: React,
    elementClass: AtomicResultLink$1,
});
const AtomicResultList = createComponent({
    tagName: 'atomic-result-list',
    react: React,
    elementClass: AtomicResultList$1,
});
const AtomicResultLocalizedText = createComponent({
    tagName: 'atomic-result-localized-text',
    react: React,
    elementClass: AtomicResultLocalizedText$1,
});
const AtomicResultMultiValueText = createComponent({
    tagName: 'atomic-result-multi-value-text',
    react: React,
    elementClass: AtomicResultMultiValueText$1,
});
const AtomicResultNumber = createComponent({
    tagName: 'atomic-result-number',
    react: React,
    elementClass: AtomicResultNumber$1,
});
const AtomicResultPrintableUri = createComponent({
    tagName: 'atomic-result-printable-uri',
    react: React,
    elementClass: AtomicResultPrintableUri$1,
});
const AtomicResultRating = createComponent({
    tagName: 'atomic-result-rating',
    react: React,
    elementClass: AtomicResultRating$1,
});
const AtomicResultSectionActions = createComponent({
    tagName: 'atomic-result-section-actions',
    react: React,
    elementClass: AtomicResultSectionActions$1,
});
const AtomicResultSectionBadges = createComponent({
    tagName: 'atomic-result-section-badges',
    react: React,
    elementClass: AtomicResultSectionBadges$1,
});
const AtomicResultSectionBottomMetadata = createComponent({
    tagName: 'atomic-result-section-bottom-metadata',
    react: React,
    elementClass: AtomicResultSectionBottomMetadata$1,
});
const AtomicResultSectionChildren = createComponent({
    tagName: 'atomic-result-section-children',
    react: React,
    elementClass: AtomicResultSectionChildren$1,
});
const AtomicResultSectionEmphasized = createComponent({
    tagName: 'atomic-result-section-emphasized',
    react: React,
    elementClass: AtomicResultSectionEmphasized$1,
});
const AtomicResultSectionExcerpt = createComponent({
    tagName: 'atomic-result-section-excerpt',
    react: React,
    elementClass: AtomicResultSectionExcerpt$1,
});
const AtomicResultSectionTitle = createComponent({
    tagName: 'atomic-result-section-title',
    react: React,
    elementClass: AtomicResultSectionTitle$1,
});
const AtomicResultSectionTitleMetadata = createComponent({
    tagName: 'atomic-result-section-title-metadata',
    react: React,
    elementClass: AtomicResultSectionTitleMetadata$1,
});
const AtomicResultSectionVisual = createComponent({
    tagName: 'atomic-result-section-visual',
    react: React,
    elementClass: AtomicResultSectionVisual$1,
});
const AtomicResultsPerPage = createComponent({
    tagName: 'atomic-results-per-page',
    react: React,
    elementClass: AtomicResultsPerPage$1,
});
const AtomicResultText = createComponent({
    tagName: 'atomic-result-text',
    react: React,
    elementClass: AtomicResultText$1,
});
const AtomicResultTimespan = createComponent({
    tagName: 'atomic-result-timespan',
    react: React,
    elementClass: AtomicResultTimespan$1,
});
const AtomicSearchBox = createComponent({
    tagName: 'atomic-search-box',
    react: React,
    elementClass: AtomicSearchBox$1,
});
const AtomicSearchBoxInstantResults = createComponent({
    tagName: 'atomic-search-box-instant-results',
    react: React,
    elementClass: AtomicSearchBoxInstantResults$1,
});
const AtomicSearchBoxQuerySuggestions = createComponent({
    tagName: 'atomic-search-box-query-suggestions',
    react: React,
    elementClass: AtomicSearchBoxQuerySuggestions$1,
});
const AtomicSearchBoxRecentQueries = createComponent({
    tagName: 'atomic-search-box-recent-queries',
    react: React,
    elementClass: AtomicSearchBoxRecentQueries$1,
});
const AtomicSearchInterface = createComponent({
    tagName: 'atomic-search-interface',
    react: React,
    elementClass: AtomicSearchInterface$1,
});
const AtomicSearchLayout = createComponent({
    tagName: 'atomic-search-layout',
    react: React,
    elementClass: AtomicSearchLayout$1,
});
const AtomicSegmentedFacet = createComponent({
    tagName: 'atomic-segmented-facet',
    react: React,
    elementClass: AtomicSegmentedFacet$1,
});
const AtomicSegmentedFacetScrollable = createComponent({
    tagName: 'atomic-segmented-facet-scrollable',
    react: React,
    elementClass: AtomicSegmentedFacetScrollable$1,
});
const AtomicSmartSnippet = createComponent({
    tagName: 'atomic-smart-snippet',
    react: React,
    elementClass: AtomicSmartSnippet$1,
});
const AtomicSmartSnippetFeedbackModal = createComponent({
    tagName: 'atomic-smart-snippet-feedback-modal',
    react: React,
    elementClass: AtomicSmartSnippetFeedbackModal$1,
});
const AtomicSmartSnippetSuggestions = createComponent({
    tagName: 'atomic-smart-snippet-suggestions',
    react: React,
    elementClass: AtomicSmartSnippetSuggestions$1,
});
const AtomicSortDropdown = createComponent({
    tagName: 'atomic-sort-dropdown',
    react: React,
    elementClass: AtomicSortDropdown$1,
});
const AtomicSortExpression = createComponent({
    tagName: 'atomic-sort-expression',
    react: React,
    elementClass: AtomicSortExpression$1,
});
const AtomicTab = createComponent({
    tagName: 'atomic-tab',
    react: React,
    elementClass: AtomicTab$1,
});
const AtomicTableElement = createComponent({
    tagName: 'atomic-table-element',
    react: React,
    elementClass: AtomicTableElement$1,
});
const AtomicTabManager = createComponent({
    tagName: 'atomic-tab-manager',
    react: React,
    elementClass: AtomicTabManager$1,
});
const AtomicText = createComponent({
    tagName: 'atomic-text',
    react: React,
    elementClass: AtomicText$1,
});
const AtomicTimeframe = createComponent({
    tagName: 'atomic-timeframe',
    react: React,
    elementClass: AtomicTimeframe$1,
});
const AtomicTimeframeFacet = createComponent({
    tagName: 'atomic-timeframe-facet',
    react: React,
    elementClass: AtomicTimeframeFacet$1,
});

const dashToPascalCase = (str) => str
    .toLowerCase()
    .split('-')
    .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
    .join('');
const camelToDashCase = (str) => str.replace(/([A-Z])/g, (m) => `-${m[0].toLowerCase()}`);

const attachProps = (node, newProps, oldProps = {}) => {
    // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
    if (node instanceof Element) {
        // add any classes in className to the class list
        const className = getClassName(node.classList, newProps, oldProps);
        if (className !== '') {
            node.className = className;
        }
        Object.keys(newProps).forEach((name) => {
            if (name === 'children' ||
                name === 'style' ||
                name === 'ref' ||
                name === 'class' ||
                name === 'className' ||
                name === 'forwardedRef') {
                return;
            }
            if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
                const eventName = name.substring(2);
                const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
                if (!isCoveredByReact(eventNameLc)) {
                    syncEvent(node, eventNameLc, newProps[name]);
                }
            }
            else {
                node[name] = newProps[name];
                const propType = typeof newProps[name];
                if (propType === 'string') {
                    node.setAttribute(camelToDashCase(name), newProps[name]);
                }
            }
        });
    }
};
const getClassName = (classList, newProps, oldProps) => {
    const newClassProp = newProps.className || newProps.class;
    const oldClassProp = oldProps.className || oldProps.class;
    // map the classes to Maps for performance
    const currentClasses = arrayToMap(classList);
    const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);
    const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);
    const finalClassNames = [];
    // loop through each of the current classes on the component
    // to see if it should be a part of the classNames added
    currentClasses.forEach((currentClass) => {
        if (incomingPropClasses.has(currentClass)) {
            // add it as its already included in classnames coming in from newProps
            finalClassNames.push(currentClass);
            incomingPropClasses.delete(currentClass);
        }
        else if (!oldPropClasses.has(currentClass)) {
            // add it as it has NOT been removed by user
            finalClassNames.push(currentClass);
        }
    });
    incomingPropClasses.forEach((s) => finalClassNames.push(s));
    return finalClassNames.join(' ');
};
/**
 * Transforms a React event name to a browser event name.
 */
const transformReactEventName = (eventNameSuffix) => {
    switch (eventNameSuffix) {
        case 'doubleclick':
            return 'dblclick';
    }
    return eventNameSuffix;
};
/**
 * Checks if an event is supported in the current execution environment.
 * @license Modernizr 3.0.0pre (Custom Build) | MIT
 */
const isCoveredByReact = (eventNameSuffix) => {
    if (typeof document === 'undefined') {
        return true;
    }
    else {
        const eventName = 'on' + transformReactEventName(eventNameSuffix);
        let isSupported = eventName in document;
        if (!isSupported) {
            const element = document.createElement('div');
            element.setAttribute(eventName, 'return;');
            isSupported = typeof element[eventName] === 'function';
        }
        return isSupported;
    }
};
const syncEvent = (node, eventName, newEventHandler) => {
    const eventStore = node.__events || (node.__events = {});
    const oldEventHandler = eventStore[eventName];
    // Remove old listener so they don't double up.
    if (oldEventHandler) {
        node.removeEventListener(eventName, oldEventHandler);
    }
    // Bind new listener.
    node.addEventListener(eventName, (eventStore[eventName] = function handler(e) {
        if (newEventHandler) {
            newEventHandler.call(this, e);
        }
    }));
};
const arrayToMap = (arr) => {
    const map = new Map();
    arr.forEach((s) => map.set(s, s));
    return map;
};

const setRef = (ref, value) => {
    if (typeof ref === 'function') {
        ref(value);
    }
    else if (ref != null) {
        // Cast as a MutableRef so we can assign current
        ref.current = value;
    }
};
const mergeRefs = (...refs) => {
    return (value) => {
        refs.forEach((ref) => {
            setRef(ref, value);
        });
    };
};
const createForwardRef = (ReactComponent, displayName) => {
    const Forwarded = React.forwardRef((props, ref) => {
        return React.createElement(ReactComponent, { ...props, forwardedRef: ref });
    });
    Forwarded.displayName = displayName;
    return Forwarded;
};

const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
    const displayName = dashToPascalCase(tagName);
    const ReactComponent = class extends React.Component {
        componentEl;
        setComponentElRef = (element) => {
            this.componentEl = element;
        };
        constructor(props) {
            super(props);
        }
        componentDidMount() {
            this.componentDidUpdate(this.props);
        }
        componentDidUpdate(prevProps) {
            attachProps(this.componentEl, this.props, prevProps);
        }
        render() {
            const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
            let propsToPass = Object.keys(cProps).reduce((acc, name) => {
                const value = cProps[name];
                if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
                    const eventName = name.substring(2).toLowerCase();
                    if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
                        acc[name] = value;
                    }
                }
                else {
                    // we should only render strings, booleans, and numbers as attrs in html.
                    // objects, functions, arrays etc get synced via properties on mount.
                    const type = typeof value;
                    if (type === 'string' || type === 'boolean' || type === 'number') {
                        acc[camelToDashCase(name)] = value;
                    }
                }
                return acc;
            }, {});
            const newProps = {
                ...propsToPass,
                ref: mergeRefs(forwardedRef, this.setComponentElRef),
                style,
            };
            /**
             * We use createElement here instead of
             * React.createElement to work around a
             * bug in Vite (https://github.com/vitejs/vite/issues/6104).
             * React.createElement causes all elements to be rendered
             * as <tagname> instead of the actual Web Component.
             */
            return createElement(tagName, newProps, children);
        }
        static get displayName() {
            return displayName;
        }
    };
    return createForwardRef(ReactComponent, displayName);
};

/* eslint-disable */
/* tslint:disable */
/* auto-generated react proxies */
defineCustomElements();
const AtomicRecsList = /*@__PURE__*/ createReactComponent('atomic-recs-list');

const DefaultProps = {
    onReady: (getRecommendations) => {
        return getRecommendations ? getRecommendations() : Promise.resolve();
    },
    localization: () => { },
};
/**
 * This component serves as a wrapper for the core AtomicRecsInterface.
 * @param props
 * @returns
 */
const RecsInterfaceWrapper = (props) => {
    const mergedProps = { ...DefaultProps, ...props };
    if (!mergedProps.engine) {
        mergedProps.engine = buildRecommendationEngine({
            configuration: getSampleRecommendationEngineConfiguration(),
        });
    }
    const { engine, localization, onReady, ...allOtherProps } = mergedProps;
    const recsInterfaceRef = useRef(null);
    let initialization = null;
    useEffect(() => {
        const recsInterfaceAtomic = recsInterfaceRef.current;
        if (!initialization) {
            initialization =
                recsInterfaceAtomic.initializeWithRecommendationEngine(engine);
            initialization.then(() => {
                localization(recsInterfaceAtomic.i18n);
                onReady(recsInterfaceAtomic.getRecommendations.bind(recsInterfaceAtomic));
            });
        }
    }, [engine, initialization, localization, onReady]);
    return (React.createElement(AtomicRecsInterface, { ref: recsInterfaceRef, ...allOtherProps }, props.children));
};

/**
 * This component serves as a wrapper for the core AtomicRecsList.
 *
 * @param props
 * @returns
 */
const RecsListWrapper = (props) => {
    const { template, ...otherProps } = props;
    const recsListRef = useRef(null);
    useEffect(() => {
        recsListRef.current?.setRenderFunction((result, root, linkContainer) => {
            const templateResult = template(result);
            if (hasLinkTemplate(templateResult)) {
                createRoot(linkContainer).render(templateResult.linkTemplate);
                createRoot(root).render(templateResult.contentTemplate);
                return renderToString(templateResult.contentTemplate);
            }
            else {
                createRoot(root).render(templateResult);
                otherProps.display === 'grid'
                    ? createRoot(linkContainer).render(React.createElement(AtomicResultLink, null))
                    : // biome-ignore lint/complexity/noUselessFragments: <>
                        createRoot(linkContainer).render(React.createElement(React.Fragment, null));
                return renderToString(templateResult);
            }
        });
    }, [otherProps.display, template]);
    return React.createElement(AtomicRecsList, { ref: recsListRef, ...otherProps });
};
const hasLinkTemplate = (template) => {
    return template.linkTemplate !== undefined;
};

export { AtomicAriaLive, AtomicAutomaticFacet, AtomicAutomaticFacetGenerator, AtomicBreadbox, AtomicCategoryFacet, AtomicColorFacet, AtomicComponentError, AtomicDidYouMean, AtomicExternal, AtomicFacet, AtomicFacetManager, AtomicFocusTrap, AtomicFoldedResultList, AtomicFormatCurrency, AtomicFormatNumber, AtomicFormatUnit, AtomicGeneratedAnswer, AtomicGeneratedAnswerFeedbackModal, AtomicHtml, AtomicIcon, AtomicLayoutSection, AtomicLoadMoreResults, AtomicNoResults, AtomicNotifications, AtomicNumericFacet, AtomicNumericRange, AtomicPager, AtomicPopover, AtomicQueryError, AtomicQuerySummary, AtomicQuickview, AtomicQuickviewModal, AtomicRatingFacet, AtomicRatingRangeFacet, AtomicRecsError, RecsInterfaceWrapper as AtomicRecsInterface, RecsListWrapper as AtomicRecsList, AtomicRecsResult, AtomicRefineModal, AtomicRefineToggle, AtomicResult, AtomicResultBadge, AtomicResultChildren, AtomicResultChildrenTemplate, AtomicResultDate, AtomicResultFieldsList, AtomicResultHtml, AtomicResultIcon, AtomicResultImage, AtomicResultLink, AtomicResultList, AtomicResultLocalizedText, AtomicResultMultiValueText, AtomicResultNumber, AtomicResultPrintableUri, AtomicResultRating, AtomicResultSectionActions, AtomicResultSectionBadges, AtomicResultSectionBottomMetadata, AtomicResultSectionChildren, AtomicResultSectionEmphasized, AtomicResultSectionExcerpt, AtomicResultSectionTitle, AtomicResultSectionTitleMetadata, AtomicResultSectionVisual, AtomicResultText, AtomicResultTimespan, AtomicResultsPerPage, AtomicSearchBox, AtomicSearchBoxInstantResults, AtomicSearchBoxQuerySuggestions, AtomicSearchBoxRecentQueries, AtomicSearchInterface, AtomicSearchLayout, AtomicSegmentedFacet, AtomicSegmentedFacetScrollable, AtomicSmartSnippet, AtomicSmartSnippetFeedbackModal, AtomicSmartSnippetSuggestions, AtomicSortDropdown, AtomicSortExpression, AtomicTab, AtomicTabManager, AtomicTableElement, AtomicText, AtomicTimeframe, AtomicTimeframeFacet };
//# sourceMappingURL=atomic-react.mjs.map
