@coveo/atomic 3.33.8-pre.b74eafaaaf → 3.33.8-pre.b914715b30

package/dist/atomic/components/atomic-numeric-facet.js

@@ -289,7 +289,7 @@ const AtomicNumericFacet$1 = /*@__PURE__*/ proxyCustomElement(class AtomicNumeri
     }
     render() {
         const { searchStatusState: { firstSearchExecuted, hasError }, bindings: { i18n }, } = this;
-        return (h(FacetGuard, { key: '481b5d0d304d6e7f6696faa14dc0dbb501f0490d', enabled: this.enabled, firstSearchExecuted: firstSearchExecuted, hasError: hasError, hasResults: this.shouldRenderFacet }, firstSearchExecuted ? (h(FacetContainer, null, h(FacetHeader, { i18n: i18n, label: this.label, onClearFilters: () => {
+        return (h(FacetGuard, { key: '15b03c400b65ced232766d9ef8a7a9b2fbff9c98', enabled: this.enabled, firstSearchExecuted: firstSearchExecuted, hasError: hasError, hasResults: this.shouldRenderFacet }, firstSearchExecuted ? (h(FacetContainer, null, h(FacetHeader, { i18n: i18n, label: this.label, onClearFilters: () => {
                 this.focusTarget.focusAfterSearch();
                 if (this.filterState?.range) {
                     this.filter?.clear();

package/dist/atomic/components/atomic-query-error.js

@@ -37,7 +37,7 @@ const AtomicQueryError$1 = /*@__PURE__*/ proxyCustomElement(class AtomicQueryErr
         if (hasError) {
             this.ariaMessage = getAriaMessageFromErrorType(i18n, organizationId, url, error?.type);
         }
-        return (h(QueryErrorGuard, { key: 'ffb2ce6b51bbb932a641ca4913d9e526f83c07cb', hasError: hasError }, h(QueryErrorContainer, { key: 'c59053c9d4ef036c9875816343bbdc73845410c3' }, h(QueryErrorIcon, { key: '278d4b8216dbfa149a041fc2cc16e8799e1c0810', errorType: error?.type }), h(QueryErrorTitle, { key: '6aa2ae0ac592206ff2e29d70810f0789132e556a', errorType: error?.type, i18n: i18n, organizationId: organizationId }), h(QueryErrorDescription, { key: '0a7af988b7769aaa45d8659cd7782a3c0321aa30', i18n: i18n, organizationId: organizationId, url: url, errorType: error?.type }), h(QueryErrorShowMore, { key: 'c12b72ed1b843f60d8709fe6212d902b3c920c28', link: h(QueryErrorLink, { i18n: i18n, errorType: error?.type }), onShowMore: () => (this.showMoreInfo = !this.showMoreInfo), i18n: i18n }), h(QueryErrorDetails, { key: 'e772576f173f5c67a7a2e6d4a824bf454c2c2370', error: error, show: this.showMoreInfo }))));
+        return (h(QueryErrorGuard, { key: '03bbb522c2940aba7bd608dc2f8c5f3ccfcdc4bb', hasError: hasError }, h(QueryErrorContainer, { key: '527e7454327429302b58c227bdec3b48fbbe4711' }, h(QueryErrorIcon, { key: '6f64bd01c47cbca966c9f579de76a2a0037918b7', errorType: error?.type }), h(QueryErrorTitle, { key: '434d6a8521b4e5684f3d4eef383d7eb202ee3a23', errorType: error?.type, i18n: i18n, organizationId: organizationId }), h(QueryErrorDescription, { key: 'e81443b64f891b0db01403b7962ce3694fc3c4b7', i18n: i18n, organizationId: organizationId, url: url, errorType: error?.type }), h(QueryErrorShowMore, { key: '40b280ffce9d9041425f8955d9ea0b1791d300bb', link: h(QueryErrorLink, { i18n: i18n, errorType: error?.type }), onShowMore: () => (this.showMoreInfo = !this.showMoreInfo), i18n: i18n }), h(QueryErrorDetails, { key: '26091175ee3103ea36f3acbcf3cda528590a376a', error: error, show: this.showMoreInfo }))));
     }
     static get style() { return AtomicQueryErrorStyle0; }
 }, [1, "atomic-query-error", {

package/dist/atomic/components/atomic-quickview-modal2.js

@@ -582,7 +582,7 @@ const AtomicQuickviewModal = /*@__PURE__*/ proxyCustomElement(class AtomicQuickv
         });
     }
     render() {
-        return (h("atomic-modal", { key: '39961d2d82abff5de836cc62847719c3c8e42a8a', fullscreen: this.bindings.store.isMobile(), class: 'atomic-quickview-modal', isOpen: this.isOpen, close: () => this.onClose(), exportparts: ATOMIC_MODAL_EXPORT_PARTS }, this.renderHeader(), this.renderBody(), this.renderFooter()));
+        return (h("atomic-modal", { key: '9b31f319fb04a44adb84434f2e09bc211b7cf03a', fullscreen: this.bindings.store.isMobile(), class: 'atomic-quickview-modal', isOpen: this.isOpen, close: () => this.onClose(), exportparts: ATOMIC_MODAL_EXPORT_PARTS }, this.renderHeader(), this.renderBody(), this.renderFooter()));
     }
     static get watchers() { return {
         "highlightKeywords": ["watchHighlightKeywords"]

package/dist/atomic/components/atomic-quickview.js

@@ -106,7 +106,7 @@ const AtomicQuickview$1 = /*@__PURE__*/ proxyCustomElement(class AtomicQuickview
     }
     render() {
         if (this.quickviewState.resultHasPreview) {
-            return (h(Button, { key: 'e764a4103dfec30f0fc15ad4237aaa64a2db267c', part: "button", title: this.bindings.i18n.t('quickview'), style: "outline-primary", class: "p-2", onClick: (event) => this.onClick(event), ref: this.focusTarget.setTarget }, h("atomic-icon", { key: '5df8ef61e0138ba63512897f99364391e5c5be14', part: "icon", class: "flex w-5 justify-center", icon: QuickviewIcon })));
+            return (h(Button, { key: '923515932e09ccd18ec5060671a55800e5e6e83a', part: "button", title: this.bindings.i18n.t('quickview'), style: "outline-primary", class: "p-2", onClick: (event) => this.onClick(event), ref: this.focusTarget.setTarget }, h("atomic-icon", { key: '375e24610aae279d97f4efa17c6084cea5957008', part: "icon", class: "flex w-5 justify-center", icon: QuickviewIcon })));
         }
     }
     static get style() { return AtomicQuickviewStyle0; }

package/dist/atomic/components/atomic-refine-modal2.js

@@ -204,7 +204,7 @@ const AtomicRefineModal = /*@__PURE__*/ proxyCustomElement(class AtomicRefineMod
         return (h(RefineModalFiltersSection, { i18n: i18n, withFacets: hasFacetElements, withAutomaticFacets: hasAutomaticFacets }, this.breadcrumbManagerState.hasBreadcrumbs && (h(RefineModalFiltersClearButton, { i18n: i18n, onClick: () => this.breadcrumbManager.deselectAll() }))));
     }
     render() {
-        return (h(RefineModal, { key: 'f73c3acc43f2fee8af45e90cd39c3adaedb76dd0', i18n: this.bindings.i18n, host: this.host, isOpen: this.isOpen, onClose: () => (this.isOpen = false), title: this.bindings.i18n.t('sort-and-filter'), numberOfItems: this.querySummaryState.total, openButton: this.openButton }, h(RefineModalBody, { key: 'd02d887640c8ad335300b5808a34abc40cdf598a' }, this.renderSort(), this.renderFilters())));
+        return (h(RefineModal, { key: 'b24978bc166205334991a7cd364924dcc33a41f6', i18n: this.bindings.i18n, host: this.host, isOpen: this.isOpen, onClose: () => (this.isOpen = false), title: this.bindings.i18n.t('sort-and-filter'), numberOfItems: this.querySummaryState.total, openButton: this.openButton }, h(RefineModalBody, { key: '5ef9af05829d5b359005abc8ee7a584cf5c955d4' }, this.renderSort(), this.renderFilters())));
     }
     componentDidLoad() {
         this.host.style.display = '';

package/dist/atomic/components/atomic-refine-toggle.js

@@ -68,7 +68,7 @@ const AtomicRefineToggle$1 = /*@__PURE__*/ proxyCustomElement(class AtomicRefine
         this.modalRef && (this.modalRef.isOpen = true);
     }
     render() {
-        return (h(RefineToggleGuard, { key: '30146bbcdbbf8fc15c2f5b6e03f72e909b975b4c', firstRequestExecuted: this.searchStatusState.firstSearchExecuted, hasError: this.searchStatusState.hasError, hasItems: this.searchStatusState.hasResults }, h(RefineToggleButton, { key: 'df667755709ab4d7f1d4c2f3af3ea78ec89a57eb', i18n: this.bindings.i18n, onClick: () => this.enableModal(), setRef: (button) => {
+        return (h(RefineToggleGuard, { key: '312e1ac5b9c66596ae803bd31cc0348232b8f326', firstRequestExecuted: this.searchStatusState.firstSearchExecuted, hasError: this.searchStatusState.hasError, hasItems: this.searchStatusState.hasResults }, h(RefineToggleButton, { key: 'a9d05a44b082ccf83b6be5e84a076c0259b27a39', i18n: this.bindings.i18n, onClick: () => this.enableModal(), setRef: (button) => {
                 if (!button) {
                     return;
                 }

package/dist/atomic/components/atomic-relevance-inspector2.js

@@ -16,9 +16,9 @@ const AtomicRelevanceInspector = /*@__PURE__*/ proxyCustomElement(class AtomicRe
         this.open = false;
     }
     render() {
-        return (h("atomic-modal", { key: 'a2a06af98fa63735677cb7bd1c81208ce01ede22', exportparts: "footer", isOpen: this.open, close: () => {
+        return (h("atomic-modal", { key: 'e3ce0d01d697da5adb7e6028692734ce78fe88b5', exportparts: "footer", isOpen: this.open, close: () => {
                 this.closeRelevanceInspector?.emit();
-            } }, h("p", { key: 'ca288b04b48ea98d5e7e8a9e13e6768886415118', slot: "header" }, "Open the relevance inspector"), h("p", { key: '7eb8f2bb1b8a39d6ad0c900b7d4647c751b8020c', slot: "body" }, "The Relevance Inspector will open in the Coveo Administration Console."), h("div", { key: 'df1dbdcc3db3f5ba75c2f9472977f19c51a539e7', slot: "footer", class: "flex w-full items-center justify-end" }, h(Button, { key: '57808d93ac86afc8897c90c2da61f5004ee23d33', style: "outline-primary", class: "mr-2 p-2", onClick: () => this.closeRelevanceInspector?.emit() }, "Ignore"), h("a", { key: 'c2cabaacd04b5ce4de627bd8dc1351dc020342f2', class: "btn-primary p-2", target: "_blank", href: this.adminHref, onClick: () => this.closeRelevanceInspector?.emit() }, "Open"))));
+            } }, h("p", { key: 'a9d5de1f5c779b36843f0c4b92352707ed57f59f', slot: "header" }, "Open the relevance inspector"), h("p", { key: 'ded771ba370b30470ead89dd71dcd3d7942de20e', slot: "body" }, "The Relevance Inspector will open in the Coveo Administration Console."), h("div", { key: 'bd7f1afa7457ca17b45c1a913dc82586d72c5bb7', slot: "footer", class: "flex w-full items-center justify-end" }, h(Button, { key: 'ebe15b64f3ebcd37fac4e5d5b1d270a9611df18e', style: "outline-primary", class: "mr-2 p-2", onClick: () => this.closeRelevanceInspector?.emit() }, "Ignore"), h("a", { key: 'f774884a805fbe36c5f5529142a0becf0b200e2d', class: "btn-primary p-2", target: "_blank", href: this.adminHref, onClick: () => this.closeRelevanceInspector?.emit() }, "Open"))));
     }
     get adminHref() {
         const { organizationId, environment } = this.bindings.engine.state.configuration;

package/dist/atomic/components/atomic-result-children.js

@@ -138,7 +138,7 @@ const AtomicResultChildren$1 = /*@__PURE__*/ proxyCustomElement(class AtomicResu
         return (h(ChildrenWrapper, { hasChildren: children.length > 0 }, children.map((child, i) => this.renderChild(child, i === children.length - 1))));
     }
     render() {
-        return (h(ResultChildrenGuard, { key: '28a209dcfc87da57c297a1a5fe5a06877311eaf7', inheritTemplates: this.inheritTemplates, resultTemplateRegistered: this.resultTemplateRegistered, templateHasError: this.templateHasError }, this.collection ? this.renderCollection() : this.renderFoldedResult()));
+        return (h(ResultChildrenGuard, { key: '87e4eb542feb7fd2fe4adafb1a966a77653195e6', inheritTemplates: this.inheritTemplates, resultTemplateRegistered: this.resultTemplateRegistered, templateHasError: this.templateHasError }, this.collection ? this.renderCollection() : this.renderFoldedResult()));
     }
     get host() { return this; }
     static get style() { return AtomicResultChildrenStyle0; }

package/dist/atomic/components/atomic-result-fields-list.js

@@ -98,7 +98,7 @@ const AtomicResultFieldsList$1 = /*@__PURE__*/ proxyCustomElement(class AtomicRe
         }
     }
     render() {
-        return h(Host, { key: '7206c67fd17f812fdf7a5aaf9429af162907677e' });
+        return h(Host, { key: 'bb78009f1c331adf546e3fb7516413cce13de162' });
     }
     get host() { return this; }
     static get style() { return AtomicResultFieldsListStyle0; }

package/dist/atomic/components/atomic-result-link.js

@@ -43,7 +43,7 @@ const AtomicResultLink$1 = /*@__PURE__*/ proxyCustomElement(class AtomicResultLi
         const href = isUndefined(this.hrefTemplate)
             ? this.result.clickUri
             : buildStringTemplateFromResult(this.hrefTemplate, this.result, this.bindings);
-        return (h(LinkWithItemAnalytics, { key: 'adbdf25dba24847402d7ba4afd254627e6ae833c', href: href, onSelect: () => this.interactiveResult.select(), onBeginDelayedSelect: () => this.interactiveResult.beginDelayedSelect(), onCancelPendingSelect: () => this.interactiveResult.cancelPendingSelect(), attributes: this.linkAttributes, stopPropagation: this.stopPropagation }, this.hasDefaultSlot ? (h("slot", null)) : (h("atomic-result-text", { field: "title", default: "no-title" }))));
+        return (h(LinkWithItemAnalytics, { key: '161199ea164427d67db5456e43d7c3cb2ebe9d8d', href: href, onSelect: () => this.interactiveResult.select(), onBeginDelayedSelect: () => this.interactiveResult.beginDelayedSelect(), onCancelPendingSelect: () => this.interactiveResult.cancelPendingSelect(), attributes: this.linkAttributes, stopPropagation: this.stopPropagation }, this.hasDefaultSlot ? (h("slot", null)) : (h("atomic-result-text", { field: "title", default: "no-title" }))));
     }
     get host() { return this; }
     static get style() { return AtomicResultLinkStyle0; }

package/dist/atomic/components/atomic-result-list.js

@@ -194,7 +194,7 @@ const AtomicResultList$1 = /*@__PURE__*/ proxyCustomElement(class AtomicResultLi
     render() {
         this.resultListCommon.updateBreakpoints();
         const listClasses = this.computeListDisplayClasses();
-        return (h(TabGuard, { key: '3300c868d8f38a4f7215288c091db4f60bec918b', tabsIncluded: this.tabsIncluded, tabsExcluded: this.tabsExcluded, activeTab: this.tabManagerState.activeTab }, h(ItemListGuard, { key: '76429f5c16104eed0ff58b83dd2cb94f807e2b62', hasError: this.resultListState.hasError, hasTemplate: this.resultTemplateRegistered, templateHasError: this.itemTemplateProvider.hasError, firstRequestExecuted: this.resultListState.firstSearchExecuted, hasItems: this.resultListState.hasResults }, h(DisplayWrapper, { key: 'f0944363d4bba184e1e76869f507ea03bed2951d', display: this.display, listClasses: listClasses }, h(ResultsPlaceholdersGuard, { key: 'c91a24daf9e86581e73f8ac514eca75275778376', density: this.density, display: this.display, imageSize: this.imageSize, displayPlaceholders: !this.isAppLoaded, numberOfPlaceholders: this.resultsPerPageState.numberOfResults }), h(ItemDisplayGuard, { key: '8266609ac00b5e0c3fb8eb7be5c3485b20c7b3d6', firstRequestExecuted: this.resultListState.firstSearchExecuted, hasItems: this.resultListState.hasResults }, this.display === 'table'
+        return (h(TabGuard, { key: '649dedc762f1c1c9dd45851b000ef76ecd07effa', tabsIncluded: this.tabsIncluded, tabsExcluded: this.tabsExcluded, activeTab: this.tabManagerState.activeTab }, h(ItemListGuard, { key: '05afb457fd344b7ccf5cb925d0baf32227f2ddba', hasError: this.resultListState.hasError, hasTemplate: this.resultTemplateRegistered, templateHasError: this.itemTemplateProvider.hasError, firstRequestExecuted: this.resultListState.firstSearchExecuted, hasItems: this.resultListState.hasResults }, h(DisplayWrapper, { key: 'a68a18d3eb5c4fad3949bbc8f11a1610db400346', display: this.display, listClasses: listClasses }, h(ResultsPlaceholdersGuard, { key: '19c2415dc2c2497abc612acd1866f1284cdf2422', density: this.density, display: this.display, imageSize: this.imageSize, displayPlaceholders: !this.isAppLoaded, numberOfPlaceholders: this.resultsPerPageState.numberOfResults }), h(ItemDisplayGuard, { key: '5eadfb9707d35affe14cc9eabfe70a436981cc80', firstRequestExecuted: this.resultListState.firstSearchExecuted, hasItems: this.resultListState.hasResults }, this.display === 'table'
             ? this.renderAsTable()
             : this.display === 'grid'
                 ? this.renderAsGrid()

package/dist/atomic/components/atomic-result-table-placeholder2.js

@@ -18,7 +18,7 @@ const AtomicResultTablePlaceholder = /*@__PURE__*/ proxyCustomElement(class Atom
         return getItemDisplayClasses('table', this.density, this.imageSize);
     }
     render() {
-        return (h("table", { key: 'b23e982c8d8a14904231b367e5c066e14824c4b2', class: `list-root animate-pulse ${this.getClasses().join(' ')}` }, h("thead", { key: '00387bd4ff6803951c3e7609322be8472609e73f' }, h("tr", { key: 'c673c8f51db99354ea1dc361c697c96bed55ee58' }, h("th", { key: '824857b37ce0bc45ce4ae4671ee07a3eb3739781' }, h("div", { key: '2519cca4e7ebbbbff1214424e33ec230295d9a9f', class: `mt-2 h-8 ${placeholderClasses}`, style: { width: '14.5rem' } })), h("th", { key: 'd26312cc0a3a3e3d29300f65d2b53b743bb44365' }, h("div", { key: '3e9cac4825ef7a63147b19f3dab0a03dcf276596', class: `mt-2 h-8 ${placeholderClasses}`, style: { width: '9.75rem' } })), h("th", { key: '48bd51072cd57e612dd4d80ab46bebaea4bc1fe7' }, h("div", { key: '5d84e58fcdb543d1c767dbe80a013339c50567b4', class: `mt-2 h-8 ${placeholderClasses}`, style: { width: '6.5rem' } })))), h("tbody", { key: '2f0d8102e80d9fa5fa0d2e20e2541f2d1b3e2a13' }, Array.from({ length: this.rows }, () => (h("tr", null, h("td", null, h("div", { class: `mb-6 h-8 ${placeholderClasses}`, style: { width: '22.875rem' } }), h("div", { class: `mb-2 h-5 ${placeholderClasses}`, style: { width: '23.75rem' } }), h("div", { class: `h-5 ${placeholderClasses}`, style: { width: '11.5rem' } })), h("td", null, h("div", { class: `mt-1.5 h-5 ${placeholderClasses}`, style: { width: '11rem' } })), h("td", null, h("div", { class: `mt-1.5 h-5 ${placeholderClasses}`, style: { width: '4.875rem' } }))))))));
+        return (h("table", { key: 'b8c5b9a4cf0bd04dcb9d0cebfe081a30c6758b35', class: `list-root animate-pulse ${this.getClasses().join(' ')}` }, h("thead", { key: '7e8092ecc1348a54780de5b079d92add1c9124a5' }, h("tr", { key: '0f3411ec8bffc6707e9214acdf15d21134fb4554' }, h("th", { key: '5d84b299102a369cf4c59b6df1487cdae303fbf6' }, h("div", { key: 'c10767a6181669697474b5804e29b265f7a8083f', class: `mt-2 h-8 ${placeholderClasses}`, style: { width: '14.5rem' } })), h("th", { key: '389fed1b7f36142236761962450032ec7739a8a7' }, h("div", { key: 'a1ed8c588b5ffb64de2c2daa234b9e1a88086043', class: `mt-2 h-8 ${placeholderClasses}`, style: { width: '9.75rem' } })), h("th", { key: '36202380fc0afaf244b5e1e9772c7e17ce2b20ba' }, h("div", { key: '6691745f3a6b867056fef0828077747e1b323a80', class: `mt-2 h-8 ${placeholderClasses}`, style: { width: '6.5rem' } })))), h("tbody", { key: 'cb2b8cb0f545b97998c80f73c4ac33a2d46cdaaf' }, Array.from({ length: this.rows }, () => (h("tr", null, h("td", null, h("div", { class: `mb-6 h-8 ${placeholderClasses}`, style: { width: '22.875rem' } }), h("div", { class: `mb-2 h-5 ${placeholderClasses}`, style: { width: '23.75rem' } }), h("div", { class: `h-5 ${placeholderClasses}`, style: { width: '11.5rem' } })), h("td", null, h("div", { class: `mt-1.5 h-5 ${placeholderClasses}`, style: { width: '11rem' } })), h("td", null, h("div", { class: `mt-1.5 h-5 ${placeholderClasses}`, style: { width: '4.875rem' } }))))))));
     }
     static get style() { return AtomicResultTablePlaceholderStyle0; }
 }, [1, "atomic-result-table-placeholder", {

package/dist/atomic/components/atomic-search-box-query-suggestions2.js

@@ -60,7 +60,7 @@ const AtomicSearchBoxQuerySuggestions = /*@__PURE__*/ proxyCustomElement(class A
     }
     render() {
         if (this.error) {
-            return (h("atomic-component-error", { key: '818ed7b1734a6f2cbf721b1eb3fd03d020791e9e', element: this.host, error: this.error }));
+            return (h("atomic-component-error", { key: 'ee518dd01ee68d5ac1e13c37335888acf7089beb', element: this.host, error: this.error }));
         }
     }
     get host() { return this; }

package/dist/atomic/components/atomic-search-box-recent-queries2.js

@@ -154,7 +154,7 @@ const AtomicSearchBoxRecentQueries = /*@__PURE__*/ proxyCustomElement(class Atom
     }
     render() {
         if (this.error) {
-            return (h("atomic-component-error", { key: 'a0eed6f3235cbc1ecd75fdb75608c6db10934dda', element: this.host, error: this.error }));
+            return (h("atomic-component-error", { key: '577129c08c073b99dbb6b86b77e2ffa7c2ff7f69', element: this.host, error: this.error }));
         }
     }
     get host() { return this; }

package/dist/atomic/components/atomic-search-box.js

@@ -425,18 +425,18 @@ const AtomicSearchBox$1 = /*@__PURE__*/ proxyCustomElement(class AtomicSearchBox
         if (!this.suggestionManager.suggestions.length) {
             this.registerSearchboxSuggestionEvents();
         }
-        return (h(Host, { key: 'e3ed5e9633d8f37158974ae3f1b21cedf5f7de01' }, this.renderAbsolutePositionSpacer(), [
-            h(SearchBoxWrapper, { key: 'b5f0da61b7ac4f1fee156de7027945040dbbf500', disabled: isDisabled, onFocusout: (event) => {
+        return (h(Host, { key: 'c6057e947ead5556e40b2cedcf06781a7e9927f0' }, this.renderAbsolutePositionSpacer(), [
+            h(SearchBoxWrapper, { key: '628b8bcabcf9612cba7970163b8c2a2f7747de9d', disabled: isDisabled, onFocusout: (event) => {
                     if (!isFocusingOut(event)) {
                         return;
                     }
                     this.suggestionManager.clearSuggestions();
                     this.isExpanded = false;
-                } }, this.renderTextBox(searchLabel), h(SubmitButton, { key: 'c8c6083671167dac6c211c7b456dcfe87ca1cfaa', bindings: this.bindings, disabled: isDisabled, onClick: () => {
+                } }, this.renderTextBox(searchLabel), h(SubmitButton, { key: '82b2a7e72b27405c8ea129dee66901dc95ea7510', bindings: this.bindings, disabled: isDisabled, onClick: () => {
                     this.searchBox.submit();
                     this.suggestionManager.clearSuggestions();
                 } }), this.renderSuggestions()),
-            !this.suggestionManager.suggestions.length && (h("slot", { key: 'd6c0f1ff47370f794d0dc81782ced70baa04db91' }, h("atomic-search-box-recent-queries", { key: 'e599e83ae1f15386e310d1e03b8111144d452a8e' }), h("atomic-search-box-query-suggestions", { key: '6d446202f6722a66714ac067ad78afcf853a5dbe' }))),
+            !this.suggestionManager.suggestions.length && (h("slot", { key: '5d3bfbd30545b9d50afde0ea178121f2157618ae' }, h("atomic-search-box-recent-queries", { key: '0c04feaf3b136bc45532a1a134d0e307bc64131d' }), h("atomic-search-box-query-suggestions", { key: '65c916e94811e1e1a0fae8a6082e8122f34be471' }))),
         ]));
     }
     get host() { return this; }

package/dist/atomic/components/atomic-smart-snippet-feedback-modal2.js

@@ -43,9 +43,9 @@ const AtomicSmartSnippetFeedbackModal = /*@__PURE__*/ proxyCustomElement(class A
     }
     render() {
         updateBreakpoints(this.host);
-        return (h("atomic-modal", { key: 'e859100c1a2aa70056f471123e6363953a8c978f', fullscreen: false, source: this.source, container: this.host, isOpen: this.isOpen, close: () => this.close(), exportparts: ATOMIC_MODAL_EXPORT_PARTS }, h(SmartSnippetFeedbackModalHeader, { key: '6f154e3e306f5fe14e724a7cc1124581c4ad50db', i18n: this.bindings.i18n }), h(SmartSnippetFeedbackModalBody, { key: '0c7aa2809a41f9725324d19d93a121e30995c322', formId: this.formId, onSubmit: (e) => this.sendFeedback(e) }, h(SmartSnippetFeebackModalOptions, { key: '7ea41f9ade73d9e28909ea5eb4d29fa277d6b762', i18n: this.bindings.i18n }, smartSnippetFeedbackOptions.map(({ id, localeKey, correspondingAnswer }) => (h(SmartSnippetFeedbackModalOption, { correspondingAnswer: correspondingAnswer, currentAnswer: this.currentAnswer, i18n: this.bindings.i18n, id: id, localeKey: localeKey, onChange: () => {
+        return (h("atomic-modal", { key: '9915bc71b6329068bc8a3731971a793946762f39', fullscreen: false, source: this.source, container: this.host, isOpen: this.isOpen, close: () => this.close(), exportparts: ATOMIC_MODAL_EXPORT_PARTS }, h(SmartSnippetFeedbackModalHeader, { key: '385350607264cd3a0dce273b18eec02909220384', i18n: this.bindings.i18n }), h(SmartSnippetFeedbackModalBody, { key: 'e1a01e0df35dbaf9da6891c825ad5e5e1e6bc534', formId: this.formId, onSubmit: (e) => this.sendFeedback(e) }, h(SmartSnippetFeebackModalOptions, { key: 'd92a6395c26802cfafbcbd50fb1b2cd86bb907de', i18n: this.bindings.i18n }, smartSnippetFeedbackOptions.map(({ id, localeKey, correspondingAnswer }) => (h(SmartSnippetFeedbackModalOption, { correspondingAnswer: correspondingAnswer, currentAnswer: this.currentAnswer, i18n: this.bindings.i18n, id: id, localeKey: localeKey, onChange: () => {
                 this.currentAnswer = correspondingAnswer;
-            } })))), h(SmartSnippetFeedbackModalDetails, { key: 'bb2bcce38f8b554e24df782edfc3bbfd2b997588', currentAnswer: this.currentAnswer, i18n: this.bindings.i18n, setDetailsInputRef: (ref) => (this.detailsInputRef = ref) })), h(SmartSnippetFeedbackModalFooter, { key: '2803172d081d52cda72b8c22b2a3b206d3b7cb23', formId: this.formId, i18n: this.bindings.i18n, onClick: () => this.close() })));
+            } })))), h(SmartSnippetFeedbackModalDetails, { key: '6dfe87c931bc44d202d78c5a800936aa733b89de', currentAnswer: this.currentAnswer, i18n: this.bindings.i18n, setDetailsInputRef: (ref) => (this.detailsInputRef = ref) })), h(SmartSnippetFeedbackModalFooter, { key: '86f51c71ade3a7e360ce5c000e45939e8744ade4', formId: this.formId, i18n: this.bindings.i18n, onClick: () => this.close() })));
     }
     close() {
         this.isOpen = false;

package/dist/atomic/components/atomic-sort-dropdown.js

@@ -117,8 +117,8 @@ const AtomicSortDropdown$1 = /*@__PURE__*/ proxyCustomElement(class AtomicSortDr
         const { hasError, hasResults, firstSearchExecuted } = this.searchStatusState;
         const { bindings: { i18n }, id, } = this;
         return [
-            h(SortGuard, { key: 'de3cefc2f8ba7dacb299dd569ca97d4d93a54249', firstSearchExecuted: firstSearchExecuted, hasError: hasError, hasResults: hasResults }, h(SortContainer, { key: '5a7296ed5a7f379509399ef260a344210c17ff34' }, h(SortLabel, { key: '1448eb9996a0b6a2df55f9ce880cd54c3312640d', i18n: i18n, id: id }), h(SortSelect, { key: '273f27873cfb73092eb7d98ef742536f3bb5fac5', i18n: i18n, id: id, onSelect: (evt) => this.select(evt) }, this.options.map(({ label, criteria, expression }) => (h(SortOption, { i18n: i18n, label: label, selected: this.sort.isSortedBy(criteria), value: expression })))))),
-            h("slot", { key: 'd1058cd5f4e28bca8816e6987ec2f3a72b2d4825' }),
+            h(SortGuard, { key: '0669c3a8c7067eef9ba5c178a5f4d12752f8b085', firstSearchExecuted: firstSearchExecuted, hasError: hasError, hasResults: hasResults }, h(SortContainer, { key: '6eb9cc11bb18013dfd384b809e6e72d2177cbe60' }, h(SortLabel, { key: '4573530fcd7c614b7ed1d3dbb8f4ad5617477ee3', i18n: i18n, id: id }), h(SortSelect, { key: 'a5ee4b55058679c63fb628337c33d1db192cf481', i18n: i18n, id: id, onSelect: (evt) => this.select(evt) }, this.options.map(({ label, criteria, expression }) => (h(SortOption, { i18n: i18n, label: label, selected: this.sort.isSortedBy(criteria), value: expression })))))),
+            h("slot", { key: '39a0d6e53adfe877b5f677d4cf9b0ff9177f84e8' }),
         ];
     }
     get host() { return this; }

package/dist/atomic/components/atomic-sort-expression.js

@@ -47,7 +47,7 @@ const AtomicSortExpression$1 = /*@__PURE__*/ proxyCustomElement(class AtomicSort
         const dropdownComponent = 'atomic-sort-dropdown';
         if (!this.host.closest(dropdownComponent)) {
             const error = new Error(`The "${this.host.nodeName.toLowerCase()}" component has to be used inside an ${dropdownComponent} element.`);
-            return (h("atomic-component-error", { key: 'c0181fed2562ac8d51cba8d9a2395ab3fc431295', element: this.host, error: error }));
+            return (h("atomic-component-error", { key: '4e946fe770ef49fc6346f0bc247db856fd38ba68', element: this.host, error: error }));
         }
     }
     get host() { return this; }

package/dist/atomic/components/atomic-tab-manager.js

@@ -59,7 +59,7 @@ const AtomicTabManager$1 = /*@__PURE__*/ proxyCustomElement(class AtomicTabManag
         });
     }
     render() {
-        return (h(Host, { key: 'abd272be633c8913b9c64f3b20d529373e7ca08c' }, h("atomic-tab-bar", { key: 'd21406c4e28a1a4fecd2986d97aa292f0cfd48a9' }, h("div", { key: '6a0375f62e5a178cec1737108984ac1e497370bd', role: "list", "aria-label": "tab-area", part: "tab-area", class: "border-neutral mb-2 flex w-full flex-row border-b" }, this.tabs.map((tab) => (h("atomic-tab-button", { active: this.tabManagerState.activeTab === tab.name, label: this.bindings.i18n.t(tab.label, {
+        return (h(Host, { key: 'ea60f4179a268319ba97570f95d6881c379c8b18' }, h("atomic-tab-bar", { key: 'ea83347d794b2f83b70706bdfc4240286c27d71e' }, h("div", { key: '9d9e588d7a4b7012f43419f3edae786b177498cc', role: "list", "aria-label": "tab-area", part: "tab-area", class: "border-neutral mb-2 flex w-full flex-row border-b" }, this.tabs.map((tab) => (h("atomic-tab-button", { active: this.tabManagerState.activeTab === tab.name, label: this.bindings.i18n.t(tab.label, {
                 defaultValue: tab.label,
             }), select: () => {
                 if (!tab.tabController.state.isActive) {

package/dist/atomic/components/components/commerce/atomic-commerce-breadbox/atomic-commerce-breadbox.js

@@ -115,23 +115,30 @@ let AtomicCommerceBreadbox = class AtomicCommerceBreadbox extends LitElement {
         this.breadcrumbShowMoreFocus = new FocusTargetController(this, this.bindings);
         this.breadcrumbShowLessFocus = new FocusTargetController(this, this.bindings);
     }
-    updated(changedProperties) {
-        super.updated(changedProperties);
+    willUpdate(changedProperties) {
         if (changedProperties.has('pathLimit')) {
             this.validateProps();
         }
+    }
+    updated() {
         this.adaptBreadcrumbs();
     }
     validateProps() {
-        new Schema({
-            pathLimit: new NumberValue({
-                default: 3,
-                min: 1,
-                required: false,
-            }),
-        }).validate({
-            pathLimit: this.pathLimit,
-        });
+        try {
+            new Schema({
+                pathLimit: new NumberValue({
+                    default: 3,
+                    min: 1,
+                    required: false,
+                }),
+            }).validate({
+                pathLimit: this.pathLimit,
+            });
+        }
+        catch (error) {
+            this.error = error;
+            return;
+        }
     }
     disconnectedCallback() {
         this.resizeObserver?.disconnect();

package/dist/atomic/components/components/commerce/atomic-commerce-interface/atomic-commerce-interface.js

@@ -4,11 +4,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { buildCommerceEngine, buildContext, buildProductListing, buildSearch, VERSION as HEADLESS_VERSION, loadConfigurationActions, loadQueryActions, } from '@coveo/headless/commerce';
+import { buildCommerceEngine, buildContext, buildProductListing, buildSearch, VERSION as HEADLESS_VERSION, loadConfigurationActions, loadContextActions, loadQueryActions, } from '@coveo/headless/commerce';
 import { provide } from '@lit/context';
 import i18next from 'i18next';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { MobileBreakpointController } from "../../common/layout/mobile-breakpoint-controller";
 import { booleanConverter } from "../../../converters/boolean-converter";
 import { errorGuard } from "../../../decorators/error-guard";
 import { watch } from "../../../decorators/watch";
@@ -85,6 +86,7 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
             this.urlManager.synchronize(this.fragment);
         };
         this.store = createCommerceStore(this.type);
+        new MobileBreakpointController(this, this.store);
         const { promise, resolve } = Promise.withResolvers();
         this.i18Initialized = promise;
         this.i18n = i18next.createInstance(undefined, resolve);
@@ -92,7 +94,6 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
     connectedCallback() {
         super.connectedCallback();
         this.store.setLoadingFlag(FirstRequestExecutedFlag);
-        this.updateMobileBreakpoint();
         this.addEventListener('atomic/initializeComponent', this.handleInitialization);
         this.addEventListener('atomic/scrollToTop', this.scrollToTop);
     }
@@ -143,6 +144,41 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
             this.searchOrListing.executeFirstRequest();
         }
     }
+    /**
+     * Updates the locale settings for the commerce interface and headless commerce
+     * engine. Only the provided parameters will be updated.
+     *
+     * Calling this method affects the localization of the interface as well as
+     * the catalog configuration being used by the Commerce API. If the resulting
+     * language-country-currency combination matches no existing catalog
+     * configuration in your Coveo organization, requests made through the
+     * commerce engine will start failing.
+     *
+     * @param language - (Optional) The IETF language code tag (e.g., `en`).
+     * @param country - (Optional) The ISO-3166-1 country tag (e.g., `US`).
+     * @param currency - (Optional) The ISO-4217 currency code (e.g., `USD`).
+     *
+     * @example
+     * ```typescript
+     * interface.updateLocale('fr', 'CA', 'CAD');
+     * ```
+     */
+    updateLocale(language, country, currency) {
+        if (!this.interfaceController.engineIsCreated(this.engine) ||
+            !this.context) {
+            return;
+        }
+        language && this.interfaceController.onLanguageChange(language);
+        if (this.isNewLocale(language, country, currency)) {
+            const { setContext } = loadContextActions(this.engine);
+            this.engine.dispatch(setContext({
+                ...this.context.state,
+                ...(language && { language }),
+                ...(country && { country }),
+                ...(currency && { currency }),
+            }));
+        }
+    }
     toggleAnalytics() {
         this.interfaceController.onAnalyticsChange();
     }
@@ -156,11 +192,10 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
             !this.context) {
             return;
         }
-        // TODO - KIT-4993: Add temporary deprecation warning.
+        this.engine.logger.warn('The `language` property will be removed in the next major version of Atomic (v4). Rather than using this property, set the initial language through the engine configuration when calling `initialize` or `initializeWithEngine`, and update the language as needed using the `updateLocale` method.');
         this.context.setLanguage(this.language);
         return this.interfaceController.onLanguageChange();
     }
-    // TODO - KIT-4993: Add updateLocale public method.
     disconnectedCallback() {
         super.disconnectedCallback();
         if (typeof this.unsubscribeUrlManager === 'function') {
@@ -210,11 +245,11 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
             throw error;
         }
     }
-    // TODO - KIT-4993: Adjust.
     initLanguage() {
-        if (!this.language) {
-            this.language = this.context.state.language;
+        if (!this.context || this.language) {
+            return;
         }
+        this.interfaceController.onLanguageChange(this.context.state.language);
     }
     initRequestStatus() {
         this.searchOrListing =
@@ -256,7 +291,7 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
             this.i18Initialized,
         ]);
         this.initContext();
-        this.updateLanguage();
+        this.updateLanguage(); // TODO - (v4) KIT-4365: Remove.
         this.bindings = this.getBindings();
         markParentAsReady(this);
         this.initRequestStatus();
@@ -266,6 +301,14 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
         this.initUrlManager();
         this.initialized = true;
     }
+    isNewLocale(language, country, currency) {
+        if (!this.context) {
+            return false;
+        }
+        return ((language && language !== this.context.state.language) ||
+            (country && country !== this.context.state.country) ||
+            (currency && currency !== this.context.state.currency));
+    }
     // TODO - (v4) KIT-4991: Make private.
     scrollToTop() {
         const scrollContainerElement = document.querySelector(this.scrollContainer);
@@ -285,12 +328,6 @@ let AtomicCommerceInterface = class AtomicCommerceInterface extends ChildrenUpda
         history.pushState(null, document.title, `#${newFragment}`);
         this.bindings.engine.logger.info(`History pushState #${newFragment}`);
     }
-    updateMobileBreakpoint() {
-        const breakpoint = this.querySelector('atomic-commerce-layout')?.mobileBreakpoint;
-        if (breakpoint) {
-            this.store.state.mobileBreakpoint = breakpoint;
-        }
-    }
 };
 AtomicCommerceInterface.styles = [
     css`:host{display:block;height:inherit;width:inherit;&>slot{height:inherit}}`,

package/dist/atomic/components/components/commerce/atomic-commerce-layout/atomic-commerce-layout.js

@@ -4,11 +4,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, unsafeCSS } from 'lit';
+import { LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { LayoutStylesController } from "../../common/layout/layout-styles-controller";
+import { watch } from "../../../decorators/watch";
 import { ChildrenUpdateCompleteMixin } from "../../../mixins/children-update-complete-mixin";
 import { LightDomMixin } from "../../../mixins/light-dom";
-import { randomID } from "../../../utils/utils";
 import { DEFAULT_MOBILE_BREAKPOINT } from '../../../utils/replace-breakpoint-utils';
 import styles from './atomic-commerce-layout.tw.css';
 import { buildCommerceLayout } from './commerce-layout';
@@ -18,8 +19,6 @@ import { buildCommerceLayout } from './commerce-layout';
  * @cssprop --atomic-layout-max-search-box-input-width: The maximum width that the search box input will take.
  * @cssprop --atomic-layout-max-search-box-double-suggestions-width: The maximum width that the search box suggestions will take when displaying a double list.
  * @cssprop --atomic-layout-search-box-left-suggestions-width: The width of the left list when displaying a double list.
- *
- * @slot default - The default slot for the layout content.
  */
 let AtomicCommerceLayout = class AtomicCommerceLayout extends LightDomMixin(ChildrenUpdateCompleteMixin(LitElement)) {
     constructor() {
@@ -29,15 +28,22 @@ let AtomicCommerceLayout = class AtomicCommerceLayout extends LightDomMixin(Chil
          * E.g., 800px, 65rem.
          */
         this.mobileBreakpoint = DEFAULT_MOBILE_BREAKPOINT;
-    }
-    async addStyles() {
-        await this.getUpdateComplete();
-        this.injectStyles(unsafeCSS(buildCommerceLayout(this, this.mobileBreakpoint)));
+        this.layoutStylesController = new LayoutStylesController(this, buildCommerceLayout, 'atomic-commerce-layout-');
     }
     connectedCallback() {
         super.connectedCallback();
-        this.id = randomID('atomic-commerce-layout-');
-        this.addStyles();
+        this.emitBreakpointChangeEvent();
+    }
+    emitBreakpointChangeEvent() {
+        this.dispatchEvent(new CustomEvent('atomic-layout-breakpoint-change', {
+            detail: { breakpoint: this.mobileBreakpoint },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    onMobileBreakpointChange() {
+        this.layoutStylesController.updateStyles();
+        this.emitBreakpointChangeEvent();
     }
 };
 AtomicCommerceLayout.styles = [styles];
@@ -47,6 +53,9 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true, attribute: 'mobile-breakpoint' })
 ], AtomicCommerceLayout.prototype, "mobileBreakpoint", void 0);
+__decorate([
+    watch('mobileBreakpoint')
+], AtomicCommerceLayout.prototype, "onMobileBreakpointChange", null);
 AtomicCommerceLayout = __decorate([
     customElement('atomic-commerce-layout')
 ], AtomicCommerceLayout);

package/dist/atomic/components/components/commerce/atomic-commerce-pager/atomic-commerce-pager.js

@@ -4,10 +4,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var AtomicCommercePager_1;
 import { NumberValue, Schema } from '@coveo/bueno';
 import { buildProductListing, buildSearch, } from '@coveo/headless/commerce';
 import { html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { keyed } from 'lit/directives/keyed.js';
 import { when } from 'lit/directives/when.js';
 import { bindStateToController } from "../../../decorators/bind-state";
 import { bindingGuard } from "../../../decorators/binding-guard";
@@ -35,9 +37,10 @@ import { getCurrentPagesRange } from './commerce-pager-utils';
  *
  * @event atomic/scrollToTop - Emitted when the user clicks the next or previous button, or a page button.
  */
-let AtomicCommercePager = class AtomicCommercePager extends LitElement {
+let AtomicCommercePager = AtomicCommercePager_1 = class AtomicCommercePager extends LitElement {
     constructor() {
         super(...arguments);
+        this.radioGroupName = randomID('atomic-commerce-pager-');
         this.isAppLoaded = false;
         /**
          * The maximum number of page buttons to display.
@@ -59,7 +62,6 @@ let AtomicCommercePager = class AtomicCommercePager extends LitElement {
          * - Use a stringified SVG to display it directly.
          */
         this.nextButtonIcon = ArrowRightIcon;
-        this.radioGroupName = randomID('atomic-commerce-pager-');
     }
     initialize() {
         this.validateProps();
@@ -74,12 +76,10 @@ let AtomicCommercePager = class AtomicCommercePager extends LitElement {
             this.isAppLoaded = isAppLoaded;
         });
     }
-    validateProps() {
-        new Schema({
-            numberOfPages: new NumberValue({ min: 0 }),
-        }).validate({
-            numberOfPages: this.numberOfPages,
-        });
+    willUpdate(changedProperties) {
+        if (changedProperties.has('numberOfPages')) {
+            this.validateProps();
+        }
     }
     render() {
         const pagesRange = getCurrentPagesRange(this.pagerState.page, this.numberOfPages, this.pagerState.totalPages - 1);
@@ -103,7 +103,7 @@ let AtomicCommercePager = class AtomicCommercePager extends LitElement {
             props: {
                 i18n: this.bindings.i18n,
             },
-        })(html `${pagesRange.map((pageNumber) => renderPagerPageButton({
+        })(html `${pagesRange.map((pageNumber, index) => keyed(`page-${pageNumber}-${index}`, renderPagerPageButton({
             props: {
                 isSelected: pageNumber === this.pagerState.page,
                 ariaLabel: this.bindings.i18n.t('page-number', {
@@ -117,7 +117,7 @@ let AtomicCommercePager = class AtomicCommercePager extends LitElement {
                 groupName: this.radioGroupName,
                 text: (pageNumber + 1).toLocaleString(this.bindings.i18n.language),
             },
-        }))}`)}
+        })))}`)}
         ${renderPagerNextButton({
             props: {
                 icon: this.nextButtonIcon,
@@ -131,11 +131,25 @@ let AtomicCommercePager = class AtomicCommercePager extends LitElement {
         })}
       `)}`)}`;
     }
+    validateProps() {
+        try {
+            AtomicCommercePager_1.propsSchema.validate({
+                numberOfPages: this.numberOfPages,
+            });
+        }
+        catch (error) {
+            this.error = error;
+            return;
+        }
+    }
     async focusOnFirstResultAndScrollToTop() {
         await this.bindings.store.state.resultList?.focusOnFirstResultAfterNextSearch();
         this.dispatchEvent(new CustomEvent('atomic/scrollToTop'));
     }
 };
+AtomicCommercePager.propsSchema = new Schema({
+    numberOfPages: new NumberValue({ min: 0 }),
+});
 __decorate([
     state()
 ], AtomicCommercePager.prototype, "bindings", void 0);
@@ -162,7 +176,7 @@ __decorate([
     bindingGuard(),
     errorGuard()
 ], AtomicCommercePager.prototype, "render", null);
-AtomicCommercePager = __decorate([
+AtomicCommercePager = AtomicCommercePager_1 = __decorate([
     customElement('atomic-commerce-pager'),
     bindings(),
     withTailwindStyles