@coveo/atomic 3.47.1 → 3.49.0

package/dist/atomic/components/components/common/generated-answer/render-answer-content.js

@@ -4,65 +4,35 @@ import { renderGeneratedContentContainer } from "./generated-content-container";
 import { renderRetryPrompt } from "./retry-prompt";
 import { renderShowButton } from "./show-button";
 import { renderSourceCitations } from "./source-citations";
-import { renderHeading } from "../heading";
-import { renderSwitch } from "../switch";
-import { renderDisclaimer } from './render-disclaimer';
 import { renderGeneratingAnswerLabel } from './render-generating-answer-label';
 import "../atomic-icon/atomic-icon";
 /**
- * Renders the main content of the generated answer including header, toggle, answer text, and citations.
+ * Renders the answer content of a given generated answer including question, answer text, and citations.
  */
 export const renderAnswerContent = ({ props }) => {
-    const { i18n, generatedAnswerState, isAnswerVisible, hasRetryableError, toggleTooltip, withToggle, collapsible, question, renderFeedbackAndCopyButtonsSlot, renderCitationsSlot, onToggle, onRetry, onClickShowButton, } = props;
-    const { isStreaming, answer, citations, answerContentFormat, expanded } = generatedAnswerState ?? {};
+    const { i18n, generatedAnswer, collapsible, renderFeedbackAndCopyButtonsSlot, renderCitationsSlot, onRetry, onClickShowButton, } = props;
+    const { answer, question, isStreaming, citations, answerContentFormat, expanded, error, } = generatedAnswer;
     const isExpanded = collapsible ? expanded : true;
-    const currentQuestion = question.trim();
+    const trimmedQuestion = question.trim();
+    const hasRetryableError = error?.isRetryable === true;
     return html `
-    <div part="generated-content">
-      <div part="header" class="flex items-center ${isAnswerVisible ? 'border-b-1 border-gray-200' : ''} px-6 py-3">
-        <atomic-icon
-          part="header-icon"
-          class="text-primary h-4 w-4 fill-current"
-          .icon=${'assets://sparkles.svg'}>
-        </atomic-icon>
-        ${renderHeading({
-        props: {
-            level: 0,
-            part: 'header-label',
-            class: 'text-primary inline-block rounded-md px-2.5 py-2 font-medium',
-        },
-    })(html `${i18n.t('generated-answer-title')}`)}
-        <div class="ml-auto flex h-9 items-center">
-          ${renderSwitch({
-        props: {
-            part: 'toggle',
-            checked: isAnswerVisible,
-            onToggle,
-            ariaLabel: i18n.t('generated-answer-title'),
-            title: toggleTooltip,
-            withToggle,
-            tabIndex: 0,
-        },
-    })}
-        </div>
-      </div>
-      ${when(isAnswerVisible, () => html `
-          <div part="generated-content-container" class="px-6 pb-6">
-            <div class="mt-6 flex gap-3">
-              <p
-                class="question-text min-w-0 flex-1 text-base font-semibold leading-6">
-                ${currentQuestion}
-              </p>
-              ${when(!hasRetryableError && isExpanded, () => html `
-                  <div
-                    part="feedback-and-copy-buttons"
-                    class="flex h-9 shrink-0 items-center justify-end gap-2"
-                  >
-                    ${renderFeedbackAndCopyButtonsSlot()}
-                  </div>
-                `)}
+    <div>
+      <div class="mt-6 flex gap-3">
+        <p
+          class="question-text min-w-0 flex-1 text-base font-semibold leading-6"
+        >
+          ${trimmedQuestion}
+        </p>
+        ${when(!hasRetryableError && isExpanded, () => html `
+            <div
+              part="feedback-and-copy-buttons"
+              class="flex h-9 shrink-0 items-center justify-end gap-2"
+            >
+              ${renderFeedbackAndCopyButtonsSlot()}
             </div>
-            ${hasRetryableError
+          `)}
+      </div>
+      ${hasRetryableError
         ? renderRetryPrompt({
             props: {
                 onClick: onRetry,
@@ -71,7 +41,7 @@ export const renderAnswerContent = ({ props }) => {
             },
         })
         : nothing}
-            ${!hasRetryableError
+      ${!hasRetryableError
         ? renderGeneratedContentContainer({
             props: {
                 answer,
@@ -79,19 +49,21 @@ export const renderAnswerContent = ({ props }) => {
                 isStreaming: !!isStreaming,
             },
         })(html `
-                  ${renderSourceCitations({
+            ${renderSourceCitations({
             props: {
                 label: i18n.t('citations'),
                 isVisible: !!citations?.length,
             },
         })(renderCitationsSlot())}
-                `)
+          `)
         : nothing}
-            ${!hasRetryableError
+      ${!hasRetryableError
         ? html `
-                  <div part="generated-answer-footer" class="mt-6">
-                    ${renderGeneratingAnswerLabel({ props: { i18n, isStreaming: !!isStreaming, collapsible } })}
-                    ${collapsible && !isStreaming
+            <div part="generated-answer-footer" class="mt-6">
+              ${renderGeneratingAnswerLabel({
+            props: { i18n, isStreaming: !!isStreaming, collapsible },
+        })}
+              ${collapsible && !isStreaming
             ? renderShowButton({
                 props: {
                     i18n,
@@ -100,14 +72,9 @@ export const renderAnswerContent = ({ props }) => {
                 },
             })
             : nothing}
-                    <div class="flex justify-end">
-                      ${renderDisclaimer({ props: { i18n, isStreaming: !!isStreaming } })}
-                    </div>
-                  </div>
-                `
+            </div>
+          `
         : nothing}
-          </div>
-        `, () => nothing)}
     </div>
   `;
 };

package/dist/atomic/components/components/common/generated-answer/render-card-header.js

@@ -0,0 +1,41 @@
+import { html } from 'lit';
+import "../atomic-icon/atomic-icon";
+import { renderHeading } from "../heading";
+import { renderSwitch } from "../switch";
+/**
+ * Renders the card header for the generated answer.
+ */
+export const renderCardHeader = ({ props, }) => {
+    const { i18n, isAnswerVisible, toggleTooltip, withToggle, onToggle } = props;
+    return html ` <div
+    part="header"
+    class="flex items-center ${isAnswerVisible ? 'border-b-1 border-gray-200' : ''} px-6 py-3"
+  >
+    <atomic-icon
+      part="header-icon"
+      class="text-primary h-4 w-4 fill-current"
+      .icon=${'assets://sparkles.svg'}
+    >
+    </atomic-icon>
+    ${renderHeading({
+        props: {
+            level: 0,
+            part: 'header-label',
+            class: 'text-primary inline-block rounded-md px-2.5 py-2 font-medium',
+        },
+    })(html `${i18n.t('generated-answer-title')}`)}
+    <div class="ml-auto flex h-9 items-center">
+      ${renderSwitch({
+        props: {
+            part: 'toggle',
+            checked: isAnswerVisible,
+            onToggle,
+            ariaLabel: i18n.t('generated-answer-title'),
+            title: toggleTooltip,
+            withToggle,
+            tabIndex: 0,
+        },
+    })}
+    </div>
+  </div>`;
+};

package/dist/atomic/components/components/common/generated-answer/render-custom-no-answer-message.js

@@ -1,24 +1,11 @@
 import { html } from 'lit';
-import { renderHeading } from "../heading";
 /**
  * Renders the custom "no answer" message container.
  */
-export const renderCustomNoAnswerMessage = ({ props }) => {
-    const { i18n } = props;
+export const renderCustomNoAnswerMessage = () => {
     return html `
-    <div part="generated-content">
-      <div class="flex items-center">
-        ${renderHeading({
-        props: {
-            level: 0,
-            part: 'header-label',
-            class: 'text-primary bg-primary-background inline-block rounded-md px-2.5 py-2 font-medium',
-        },
-    })(html `${i18n.t('generated-answer-title')}`)}
-      </div>
-      <div part="generated-container" class="mt-6 break-words">
+      <div part="generated-container" class="mt-6 break-words px-6 pb-6">
         <slot name="no-answer-message"></slot>
       </div>
-    </div>
   `;
 };

package/dist/atomic/components/components/common/generated-answer/render-disclaimer.js

@@ -6,7 +6,7 @@ import { when } from 'lit/directives/when.js';
 export const renderDisclaimer = ({ props, }) => {
     const { i18n, isStreaming } = props;
     return html `${when(!isStreaming, () => html `
-      <div class="text-neutral-dark text-xs/[1rem]">
+      <div class="flex justify-end text-neutral-dark text-xs/[1rem]">
         <slot name="disclaimer">${i18n.t('generated-answer-disclaimer')}</slot>
       </div>
     `)}`;

package/dist/atomic/components/components/common/generated-answer/show-button.js

@@ -1,3 +1,4 @@
+import "../atomic-icon/atomic-icon";
 import { html } from 'lit';
 import { when } from 'lit/directives/when.js';
 import { renderButton } from "../button";

package/dist/atomic/components/components/common/index.js

@@ -6,6 +6,7 @@ export { AtomicFacetDateInput } from './atomic-facet-date-input/atomic-facet-dat
 export { AtomicFacetNumberInput } from './atomic-facet-number-input/atomic-facet-number-input.js';
 export { AtomicFacetPlaceholder } from './atomic-facet-placeholder/atomic-facet-placeholder.js';
 export { AtomicFocusTrap } from './atomic-focus-trap/atomic-focus-trap.js';
+export { AtomicGeneratedAnswerFeedbackModal } from './atomic-generated-answer-feedback-modal/atomic-generated-answer-feedback-modal.js';
 export { AtomicIcon } from './atomic-icon/atomic-icon.js';
 export { AtomicLayoutSection } from './atomic-layout-section/atomic-layout-section.js';
 export { AtomicModal } from './atomic-modal/atomic-modal.js';

package/dist/atomic/components/components/common/item-list/result-template-provider.js

@@ -1,5 +1,7 @@
 import { buildResultTemplatesManager, } from '@coveo/headless';
 import { TemplateProvider, } from '../template-provider/template-provider';
+// TODO: add this import once this class isn't used in Stencil components anymore
+// import '@/src/components/search/atomic-result-link/atomic-result-link';
 export class ResultTemplateProvider extends TemplateProvider {
     constructor(props, gridCellLinkTarget) {
         super(props, () => buildResultTemplatesManager(props.bindings.engine));

package/dist/atomic/components/components/common/item-list/table-layout.js

@@ -1,3 +1,4 @@
+import "../../search/atomic-text/atomic-text";
 import { html } from 'lit';
 import { keyed } from 'lit/directives/keyed.js';
 import { map } from 'lit/directives/map.js';

package/dist/atomic/components/components/common/lazy-index.js

@@ -7,6 +7,7 @@ export default {
     'atomic-facet-number-input': async () => await import('./atomic-facet-number-input/atomic-facet-number-input.js'),
     'atomic-facet-placeholder': async () => await import('./atomic-facet-placeholder/atomic-facet-placeholder.js'),
     'atomic-focus-trap': async () => await import('./atomic-focus-trap/atomic-focus-trap.js'),
+    'atomic-generated-answer-feedback-modal': async () => await import('./atomic-generated-answer-feedback-modal/atomic-generated-answer-feedback-modal.js'),
     'atomic-icon': async () => await import('./atomic-icon/atomic-icon.js'),
     'atomic-layout-section': async () => await import('./atomic-layout-section/atomic-layout-section.js'),
     'atomic-modal': async () => await import('./atomic-modal/atomic-modal.js'),

package/dist/atomic/components/components/common/no-items/magnifying-glass.js

@@ -1,3 +1,4 @@
+import "../atomic-icon/atomic-icon";
 import { html } from 'lit';
 const MagnifyingGlassIcon = "<svg viewBox=\"0 0 312 312\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g clip-path=\"url(#clip0)\">\n<g filter=\"url(#filter0_b)\">\n<rect x=\"156.118\" width=\"220.784\" height=\"220.784\" rx=\"14.7189\" transform=\"rotate(45 156.118 0)\" fill=\"#F6F7F9\"/>\n</g>\n<rect x=\"60.1178\" y=\"126\" width=\"34\" height=\"9\" rx=\"4.5\" fill=\"#E5E8E8\"/>\n<rect x=\"102.118\" y=\"126\" width=\"67\" height=\"9\" rx=\"4.5\" fill=\"#E5E8E8\"/>\n<rect x=\"177.118\" y=\"126\" width=\"67\" height=\"9\" rx=\"4.5\" fill=\"#E5E8E8\"/>\n<rect x=\"60.1178\" y=\"151\" width=\"162\" height=\"9\" rx=\"4.5\" fill=\"#E5E8E8\"/>\n<rect x=\"60.1178\" y=\"176\" width=\"177\" height=\"9\" rx=\"4.5\" fill=\"#E5E8E8\"/>\n<g filter=\"url(#filter1_f)\">\n<path d=\"M183.857 226.206C179.378 223.774 178.389 217.774 181.85 214.033C184.309 211.374 188.273 210.753 191.427 212.532L247.561 244.198C251.767 246.571 252.551 252.302 249.136 255.717C246.849 258.004 243.331 258.513 240.49 256.97L183.857 226.206Z\" fill=\"#E5E8E8\"/>\n</g>\n<rect x=\"195.143\" y=\"205.948\" width=\"15.064\" height=\"78.2384\" rx=\"7.53201\" transform=\"rotate(-45 195.143 205.948)\" fill=\"#333357\"/>\n<g filter=\"url(#filter2_d)\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M161.415 226.595C200.792 226.595 232.713 194.674 232.713 155.298C232.713 115.921 200.792 84 161.415 84C122.039 84 90.1178 115.921 90.1178 155.298C90.1178 194.674 122.039 226.595 161.415 226.595ZM161.441 212.539C193.041 212.539 218.657 186.922 218.657 155.323C218.657 123.724 193.041 98.108 161.441 98.108C129.842 98.108 104.226 123.724 104.226 155.323C104.226 186.922 129.842 212.539 161.441 212.539Z\" fill=\"url(#paint0_linear)\"/>\n</g>\n<g filter=\"url(#filter3_d)\">\n<circle cx=\"161.415\" cy=\"155.298\" r=\"59.6307\" fill=\"url(#paint1_linear)\"/>\n</g>\n<g filter=\"url(#filter4_i)\">\n<circle cx=\"161.441\" cy=\"155.323\" r=\"57.2153\" fill=\"url(#paint2_linear)\"/>\n</g>\n<mask id=\"mask0\" mask-type=\"alpha\" maskUnits=\"userSpaceOnUse\" x=\"104\" y=\"98\" width=\"115\" height=\"115\">\n<circle cx=\"161.415\" cy=\"155.298\" r=\"57.038\" fill=\"white\"/>\n</mask>\n<g mask=\"url(#mask0)\">\n<rect opacity=\"0.5\" x=\"104.118\" y=\"126\" width=\"37\" height=\"18\" rx=\"8\" fill=\"url(#paint3_linear)\"/>\n<rect opacity=\"0.5\" x=\"184.118\" y=\"167\" width=\"37\" height=\"18\" rx=\"8\" fill=\"url(#paint4_linear)\"/>\n<g opacity=\"0.6\" filter=\"url(#filter5_f)\">\n<path d=\"M179.303 90.5597L187.576 96.3233C187.576 96.3233 140.259 159.434 177.535 239.024C164.157 234.174 126.719 230.494 120.018 222.474C88.6871 131.944 179.303 90.5597 179.303 90.5597Z\" fill=\"url(#paint5_linear)\"/>\n</g>\n<g opacity=\"0.5\" filter=\"url(#filter6_f)\">\n<circle cx=\"197.896\" cy=\"133.778\" r=\"7.77791\" fill=\"white\"/>\n</g>\n<g opacity=\"0.7\" filter=\"url(#filter7_f)\">\n<circle cx=\"207.359\" cy=\"150.241\" r=\"3.2408\" fill=\"white\"/>\n</g>\n</g>\n</g>\n<defs>\n<filter id=\"filter0_b\" x=\"-3.67968\" y=\"-3.67973\" width=\"319.595\" height=\"319.595\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feComposite in2=\"SourceAlpha\" operator=\"in\" result=\"effect1_backgroundBlur\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_backgroundBlur\" result=\"shape\"/>\n</filter>\n<filter id=\"filter1_f\" x=\"171.347\" y=\"190.878\" width=\"88.139\" height=\"88.139\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n<feGaussianBlur stdDeviation=\"2.59264\" result=\"effect1_foregroundBlur\"/>\n</filter>\n<filter id=\"filter2_d\" x=\"59.0061\" y=\"84\" width=\"204.818\" height=\"206.115\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset dy=\"32.408\"/>\n<feGaussianBlur stdDeviation=\"15.5558\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.320677 0 0 0 0 0.320677 0 0 0 0 0.5875 0 0 0 0.38 0\"/>\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"/>\n</filter>\n<filter id=\"filter3_d\" x=\"91.4141\" y=\"85.2963\" width=\"140.002\" height=\"140.002\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset/>\n<feGaussianBlur stdDeviation=\"5.18528\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.320677 0 0 0 0 0.320677 0 0 0 0 0.5875 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"/>\n</filter>\n<filter id=\"filter4_i\" x=\"104.226\" y=\"98.108\" width=\"114.431\" height=\"124.801\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n<feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\"/>\n<feOffset dy=\"10.3706\"/>\n<feGaussianBlur stdDeviation=\"5.83344\"/>\n<feComposite in2=\"hardAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"/>\n<feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.529306 0 0 0 0 0.529306 0 0 0 0 0.858333 0 0 0 1 0\"/>\n<feBlend mode=\"normal\" in2=\"shape\" result=\"effect1_innerShadow\"/>\n</filter>\n<filter id=\"filter5_f\" x=\"93.7083\" y=\"75.6215\" width=\"134.473\" height=\"171.666\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n<feGaussianBlur stdDeviation=\"1.5\" result=\"effect1_foregroundBlur\"/>\n</filter>\n<filter id=\"filter6_f\" x=\"187.525\" y=\"123.407\" width=\"20.7411\" height=\"20.7411\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n<feGaussianBlur stdDeviation=\"1.29632\" result=\"effect1_foregroundBlur\"/>\n</filter>\n<filter id=\"filter7_f\" x=\"201.525\" y=\"144.407\" width=\"11.6669\" height=\"11.6669\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\n<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/>\n<feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\"/>\n<feGaussianBlur stdDeviation=\"1.29632\" result=\"effect1_foregroundBlur\"/>\n</filter>\n<linearGradient id=\"paint0_linear\" x1=\"106.615\" y1=\"63.4032\" x2=\"289.344\" y2=\"240.521\" gradientUnits=\"userSpaceOnUse\">\n<stop offset=\"0.505208\" stop-color=\"#3F3F71\"/>\n<stop offset=\"1\" stop-color=\"#5D237D\"/>\n</linearGradient>\n<linearGradient id=\"paint1_linear\" x1=\"200.305\" y1=\"208.447\" x2=\"121.878\" y2=\"98.259\" gradientUnits=\"userSpaceOnUse\">\n<stop stop-color=\"#333357\"/>\n<stop offset=\"1\" stop-color=\"#6B6BBD\" stop-opacity=\"0.49\"/>\n</linearGradient>\n<linearGradient id=\"paint2_linear\" x1=\"116.692\" y1=\"142.334\" x2=\"206.138\" y2=\"195.483\" gradientUnits=\"userSpaceOnUse\">\n<stop offset=\"0.0255459\" stop-color=\"white\"/>\n<stop offset=\"1\" stop-color=\"#E5E8E8\"/>\n</linearGradient>\n<linearGradient id=\"paint3_linear\" x1=\"134.811\" y1=\"148.895\" x2=\"127.845\" y2=\"133.378\" gradientUnits=\"userSpaceOnUse\">\n<stop stop-color=\"#8787DB\" stop-opacity=\"0.41\"/>\n<stop offset=\"1\" stop-color=\"#C5CACF\" stop-opacity=\"0.44\"/>\n</linearGradient>\n<linearGradient id=\"paint4_linear\" x1=\"214.811\" y1=\"189.895\" x2=\"207.845\" y2=\"174.378\" gradientUnits=\"userSpaceOnUse\">\n<stop stop-color=\"#8787DB\"/>\n<stop offset=\"1\" stop-color=\"#C5CACF\" stop-opacity=\"0.44\"/>\n</linearGradient>\n<linearGradient id=\"paint5_linear\" x1=\"164.859\" y1=\"93.962\" x2=\"143.031\" y2=\"190.673\" gradientUnits=\"userSpaceOnUse\">\n<stop stop-color=\"white\" stop-opacity=\"0\"/>\n<stop offset=\"0.198345\" stop-color=\"white\" stop-opacity=\"0.72\"/>\n<stop offset=\"1\" stop-color=\"white\" stop-opacity=\"0\"/>\n</linearGradient>\n<clipPath id=\"clip0\">\n<rect width=\"312\" height=\"312\" fill=\"white\"/>\n</clipPath>\n</defs>\n</svg>\n";
 export const renderMagnifyingGlass = () => {

package/dist/atomic/components/components/common/refine-modal/cloned-facet-elements.js

@@ -0,0 +1,21 @@
+import { popoverClass } from '../facets/popover/popover-type';
+import { isRefineModalFacet } from '../interface/store';
+export function getClonedFacetElements(facetElements, collapseFacetsAfter, root) {
+    const divSlot = document.createElement('div');
+    divSlot.setAttribute('slot', 'facets');
+    divSlot.style.display = 'flex';
+    divSlot.style.flexDirection = 'column';
+    divSlot.style.gap = 'var(--atomic-refine-modal-facet-margin, 20px)';
+    const allFacetTags = Array.from(new Set(facetElements.map((el) => el.tagName.toLowerCase())));
+    const allFacetsInOrderInDOM = allFacetTags.length
+        ? root.querySelectorAll(allFacetTags.join(','))
+        : [];
+    allFacetsInOrderInDOM.forEach((facetElement, index) => {
+        const clone = facetElement.cloneNode(true);
+        clone.isCollapsed = index + 1 > collapseFacetsAfter;
+        clone.classList.remove(popoverClass);
+        clone.setAttribute(isRefineModalFacet, '');
+        divSlot.append(clone);
+    });
+    return divSlot;
+}

package/dist/atomic/components/components/common/search-box/submit-button.js

@@ -1,3 +1,4 @@
+import "../atomic-icon/atomic-icon";
 import { html } from 'lit';
 const SearchSlimIcon = "<svg width=\"17\" height=\"17\" viewBox=\"0 0 17 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<circle cx=\"7\" cy=\"7\" r=\"6.5\" stroke=\"currentColor\"/>\n<path d=\"M16 16L12 12\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n";
 import { renderButton } from '../button';

package/dist/atomic/components/components/common/search-box/text-area-clear-button.js

@@ -1,3 +1,4 @@
+import "../atomic-icon/atomic-icon";
 import { html } from 'lit';
 const ClearSlim = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M15 1.00012L1.00012 14.9999\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M0.999878 1L14.9999 15\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n";
 import { renderButton } from '../button';

package/dist/atomic/components/components/common/smart-snippets/smart-snippet-feedback-banner.js

@@ -1,3 +1,4 @@
+import "../atomic-icon/atomic-icon";
 import { html } from 'lit';
 import { when } from 'lit/directives/when.js';
 import { multiClassMap } from "../../../directives/multi-class-map";

package/dist/atomic/components/components/common/suggestions/query-suggestions.js

@@ -1,3 +1,4 @@
+import "../atomic-icon/atomic-icon";
 import { html, nothing, render } from 'lit';
 import { encodeForDomAttribute } from '../../../utils/string-utils.js';
 export const getPartialSearchBoxSuggestionElement = (suggestion, i18n) => {

package/dist/atomic/components/components/common/suggestions/recent-queries.js

@@ -1,3 +1,4 @@
+import "../atomic-icon/atomic-icon";
 import { HighlightUtils } from '@coveo/headless';
 import { html, render } from 'lit';
 import { when } from 'lit/directives/when.js';