@searchcraft/javascript-sdk 0.3.0 → 0.3.1

package/dist/cjs/{searchcraft-auto-search-form_19.cjs.entry.js → searchcraft-auto-search-form_17.cjs.entry.js}

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6c5282a0.js');
-const store = require('./store-f3bec622.js');
+const index = require('./index-264ebadc.js');
 const index$1 = require('./index-5b0b9d4c.js');
+const store = require('./store-e3bbdd49.js');
+const _package = require('./package-35d3b670.js');
 
 const searchcraftAutoSearchFormModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.formLTR{font-family:var(--font-stack);text-align:left;width:100%}.formRTL{font-family:var(--font-stack);text-align:right;width:100%}";
 const SearchcraftAutoSearchFormStyle0 = searchcraftAutoSearchFormModuleCss;
@@ -22,6 +23,7 @@ const SearchcraftAutoSearchForm = class {
             this.searchStore.setQuery(this.query);
             if (this.query.trim() === '') {
                 this.searchResults = null;
+                this.inputClearedOrNoResults.emit();
                 this.searchStore.setSearchResults(null);
             }
         };
@@ -38,6 +40,7 @@ const SearchcraftAutoSearchForm = class {
                 if (this.query.trim() === '') {
                     this.searchResults = null;
                     this.searchStore.setSearchResults(null);
+                    this.inputClearedOrNoResults.emit();
                 }
                 else {
                     this.searchStore.setQuery(this.query);
@@ -88,9 +91,11 @@ const SearchcraftAutoSearchForm = class {
         this.autoSearchFormClass = '';
         this.clearInput = () => { };
         this.config = {
-            apiKey: '',
+            readKey: '',
             endpointURL: '',
             index: [],
+            organizationId: '',
+            applicationId: '',
         };
         this.customStylesForInput = {};
         this.inputCaptionValue = '';
@@ -106,7 +111,10 @@ const SearchcraftAutoSearchForm = class {
         this.searchResults = null;
     }
     componentDidLoad() {
-        const searchcraft = new store.g(this.config);
+        const searchcraft = new store.ie(this.config, {
+            sdkName: _package.packageJson.name,
+            sdkVersion: _package.packageJson.version,
+        });
         this.searchStore.initialize(searchcraft, true);
         this.unsubscribe = store.useSearchcraftStore.subscribe((state) => {
             this.isRequesting = state.isRequesting;
@@ -121,12 +129,12 @@ const SearchcraftAutoSearchForm = class {
     render() {
         const formClass = this.rightToLeftOrientation ? 'formRTL' : 'formLTR';
         const parsedCustomStyles = store.parseCustomStyles(this.customStylesForInput);
-        return (index.h("form", { key: '6f59f4b7d525c62fce6b21712519e3880c6756a2', class: `${formClass}`, onSubmit: this.handleFormSubmit }, index.h("searchcraft-input-label", { key: 'cbaa772a365131dbfcffec9e2a28438f1c978efe', label: this.labelForInput }), index.h("searchcraft-input", { key: '70a4933978df3878720e1189a15481123e12eba5', customStyles: parsedCustomStyles, "input-caption-value": this.inputCaptionValue, "input-icon-height": this.inputIconHeight, "input-icon-width": this.inputIconWidth, "is-requesting": this.isRequesting, onClearInput: this.handleClearInput, onInputKeyUp: this.handleInputKeyUp, onSearchInputChange: this.handleInputChange, "placeholder-value": this.placeholderValue, query: this.query, "right-to-left-orientation": this.rightToLeftOrientation }), this.error && (index.h("searchcraft-error-message", { key: 'd665a04dcc8999a09afa47f1a20156f12db6600c', errorMessage: 'Please enter a search query.' }))));
+        return (index.h("form", { key: '3f8e9a36e827b3f1f8d591622a1c824e7ccc6f83', class: index$1.classNames(`${formClass}`, 'searchcraft-auto-search-form'), onSubmit: this.handleFormSubmit }, index.h("searchcraft-input-label", { key: 'daf9b6aab7185e045891a975ac70a3bf3b7ff75f', label: this.labelForInput }), index.h("searchcraft-input", { key: '655e92d562a73dcf9857f24075c65c6bbe2215f5', customStyles: parsedCustomStyles, "input-caption-value": this.inputCaptionValue, "input-icon-height": this.inputIconHeight, "input-icon-width": this.inputIconWidth, "is-requesting": this.isRequesting, onClearInput: this.handleClearInput, onInputKeyUp: this.handleInputKeyUp, onSearchInputChange: this.handleInputChange, "placeholder-value": this.placeholderValue, query: this.query, "right-to-left-orientation": this.rightToLeftOrientation }), this.error && (index.h("searchcraft-error-message", { key: '988624eb1ff71adde2a2e38ab8adb868a5a12469', errorMessage: 'Please enter a search query.' }))));
     }
 };
 SearchcraftAutoSearchForm.style = SearchcraftAutoSearchFormStyle0;
 
-const searchcraftBaseSearchResultModuleCss = "@charset \"UTF-8\";:root{--font-stack:Helvetica, Arial, sans-serif}.interactiveResultContainerLight{align-items:flex-start;border-radius:16px;display:flex;flex-direction:column;gap:16px;padding:8px;position:relative;background-color:#FAFAFA}@media (min-width: 600px){.interactiveResultContainerLight{flex-direction:row}}.interactiveResultContainerDark{align-items:flex-start;border-radius:16px;display:flex;flex-direction:column;gap:16px;padding:8px;position:relative;background-color:#2E2E2E}@media (min-width: 600px){.interactiveResultContainerDark{flex-direction:row}}.resultContainer{align-items:flex-start;display:flex;flex-direction:column;gap:16px}@media (min-width: 600px){.resultContainer{flex-direction:row}}.interactiveIconLarge{display:inline-block;position:absolute;right:5px;top:8px}@media (max-width: 600px){.interactiveIconLarge{display:none}}.interactiveIconSmall{display:inline-block;position:absolute;right:5px;top:-2px}@media (min-width: 600px){.interactiveIconSmall{display:none}}.imageContainer{max-width:100%}.contentContainer{max-height:100%;max-width:100%}@media (min-width: 600px){.contentContainer{max-width:50%}}.secondaryContentContainer{display:flex}.imageLight{border-radius:8px;max-height:100%;max-width:100%;border:1px solid #D9D9D9}.imageDark{border-radius:8px;max-height:100%;max-width:100%;border:1px solid #333}.headingLight{font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;margin-bottom:4px;margin-top:0;position:relative;-webkit-font-smoothing:antialiased;color:#292929}.headingDark{font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;margin-bottom:4px;margin-top:0;position:relative;-webkit-font-smoothing:antialiased;color:#FFF}.subheadingLight{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#737373}.subheadingDark{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#BFBFBF}.primaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#404040}.primaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#E6E6E6}.secondaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#404040}.secondaryContentLight::after{content:\"•\";color:#404040;font-size:1em;margin-left:5px;margin-right:5px}.secondaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#E6E6E6}.tertiaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#404040}.tertiaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#E6E6E6}";
+const searchcraftBaseSearchResultModuleCss = "@charset \"UTF-8\";:root{--font-stack:Helvetica, Arial, sans-serif}.interactiveResultContainerLight{align-items:flex-start;border-radius:16px;display:flex;flex-direction:column;gap:16px;padding:8px;position:relative;background-color:#F7F7F7}@media (min-width: 900px){.interactiveResultContainerLight{flex-direction:row;justify-content:space-between}}.interactiveResultContainerDark{align-items:flex-start;border-radius:16px;display:flex;flex-direction:column;gap:16px;padding:8px;position:relative;background-color:#2E2E2E}@media (min-width: 900px){.interactiveResultContainerDark{flex-direction:row;justify-content:space-between}}.resultContainer{align-items:flex-start;display:flex;flex-direction:column;gap:16px;all:unset;display:inline;color:inherit;text-decoration:none}.resultContainer:hover{cursor:pointer}@media (min-width: 900px){.resultContainer{flex-direction:row}}.interactiveIconLarge{display:inline-block;position:absolute;right:5px;top:8px}@media (max-width: 900px){.interactiveIconLarge{display:none}}.interactiveIconSmall{display:inline-block;position:absolute;right:5px;top:-2px}@media (min-width: 900px){.interactiveIconSmall{display:none}}.imageContainer{max-width:100%}@media (min-width: 900px){.imageContainer{max-width:400px}}.contentContainer{max-height:100%;max-width:100%}@media (min-width: 900px){.contentContainer{max-width:50%}}.secondaryContentContainer{display:flex}.imageLight{border-radius:8px;max-height:100%;max-width:100%}.imageDark{border-radius:8px;max-height:100%;max-width:100%}.titleLight{font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;margin-bottom:4px;margin-top:0;position:relative;-webkit-font-smoothing:antialiased;color:#292929}.titleDark{font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;margin-bottom:4px;margin-top:0;position:relative;-webkit-font-smoothing:antialiased;color:#FFFFFF}.subtitleContentLight{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#737373}.subtitleContentDark{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#BFBFBF}.primaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#404040}.primaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#E6E6E6}.secondaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#404040}.secondaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#E6E6E6}.tertiaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#404040}.tertiaryContentLight.hasContent::before{color:#404040;content:\"•\";font-size:10px;margin-left:5px;margin-right:5px}.tertiaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;-webkit-font-smoothing:antialiased;color:#E6E6E6}.tertiaryContentDark.hasContent::before{color:#404040;content:\"•\";font-size:10px;margin-left:5px;margin-right:5px}";
 const SearchcraftBaseSearchResultStyle0 = searchcraftBaseSearchResultModuleCss;
 
 const SearchcraftBaseSearchResult = class {
@@ -135,49 +143,62 @@ const SearchcraftBaseSearchResult = class {
         this.buttonCallback = index.createEvent(this, "buttonCallback", 7);
         this.keyDownCallback = index.createEvent(this, "keyDownCallback", 7);
         this.resultCallback = index.createEvent(this, "resultCallback", 7);
-        this.buttonCallback = () => { }; // Callback for button click
-        this.keyDownCallback = () => { }; // Callback for key down event
-        this.resultCallback = () => { }; // Callback for result container click
+        this.buttonCallback = () => { };
+        this.keyDownCallback = () => { };
+        this.resultCallback = () => { };
+        this.searchcraftStore = store.useSearchcraftStore.getState();
         this.handleButtonClick = () => {
             this.buttonCallback();
         };
-        this.handleContainerClick = () => {
-            if (this.isInteractive) {
-                this.resultCallback();
+        this.handleClick = () => {
+            var _a, _b, _c;
+            const searchcraft = this.searchcraftStore.getSearchcraftInstance();
+            if (searchcraft) {
+                const document_position = this.documentPosition;
+                const search_term = this.searchcraftStore.query;
+                const number_of_documents = ((_c = (_b = (_a = this.searchcraftStore.searchResults) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.hits) === null || _c === void 0 ? void 0 : _c.length) || 0;
+                searchcraft.sendMeasureEvent('document_clicked', {
+                    document_position,
+                    number_of_documents,
+                    search_term,
+                });
+            }
+        };
+        this.parseStyles = () => {
+            try {
+                return JSON.parse(this.customStyles);
+            }
+            catch (error) {
+                console.error('Error parsing custom styles:', error);
+                return {};
             }
         };
         this.buttonText = '';
         this.customStyles = '{}';
-        this.headingText = '';
+        this.titleContent = '';
         this.imageDescription = '';
         this.imageSource = '';
         this.isInteractive = false;
+        this.linkHref = '';
         this.primaryContent = '';
         this.secondaryContent = '';
-        this.subheadingText = '';
+        this.subtitleContent = '';
         this.tertiaryContent = '';
         this.themeMode = 'light';
         this.placeImageRight = false;
-    }
-    parseStyles() {
-        try {
-            return JSON.parse(this.customStyles);
-        }
-        catch (error) {
-            console.error('Error parsing custom styles:', error);
-            return {};
-        }
+        this.documentPosition = 0;
     }
     render() {
         const isLightTheme = this.themeMode === 'light';
         const styles = this.parseStyles();
-        const imageContainer = this.imageSource && (index.h("div", { key: '5446a636265cf330a7e67f7539dad7e25077ecda', class: 'imageContainer' }, index.h("img", { key: '59529cce35008eb171f4ee634ed94ff96e716dad', alt: this.imageDescription, class: isLightTheme ? 'imageLight' : 'imageDark', src: this.imageSource, style: styles.image || {} })));
-        const contentContainer = (index.h("div", { key: 'fd052ef1e3dedcf5b1467b6b0760d0be349c1faf', class: 'contentContainer' }, index.h("h2", { key: '1d1eca475651641b34d477ea7e2ea2f3eb7a2c49', class: isLightTheme ? 'headingLight' : 'headingDark', style: styles.heading || {} }, this.headingText), index.h("h3", { key: '9fcf054f634d088b72b67a2675b67a89f651285b', class: isLightTheme ? 'subheadingLight' : 'subheadingDark', style: styles.subheading || {} }, this.subheadingText), index.h("p", { key: '477078081008771a462abb042232b84f1e72ddd5', class: isLightTheme ? 'primaryContentLight' : 'primaryContentDark', style: styles.primaryContent || {} }, this.primaryContent), index.h("div", { key: '716ea0fe1efbd18f0b6313baac80834fbab53001', class: 'secondaryContentContainer' }, index.h("p", { key: '340dad3f568e5cc2b0a1b412b92a335b9afb7a0f', class: isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark', style: styles.secondaryContent || {} }, this.secondaryContent), index.h("p", { key: 'b0c940aab4b48d4e560aabe7551b3c1a0a4ef3ae', class: isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark', style: styles.tertiaryContent || {} }, this.tertiaryContent)), this.buttonText && (index.h("button", { key: 'd9a08ff62c8bc7d2b13bb42872e2391290de0712', onClick: this.handleButtonClick, style: styles.button || {}, type: 'button' }, this.buttonText))));
-        return (index.h("div", { key: '310676a0e48c3a3d76559b3e3012db1681a55499', class: this.isInteractive
+        const imageStyle = isLightTheme ? 'imageLight' : 'imageDark';
+        const imageContainer = this.imageSource && (index.h("div", { key: '53541a311548a653d43505356b9a4f25a417093f', class: index$1.classNames('imageContainer', 'searchcraft-base-search-result-image-container') }, index.h("img", { key: '919a46fd856b521a548c2ce6bab8b360507469c2', alt: this.imageDescription, class: index$1.classNames(imageStyle, 'searchcraft-search-result-image'), src: this.imageSource, style: styles.image || {} })));
+        const contentContainer = (index.h("div", { key: '944700daf2a0b683769bad992253a8482f71f685', class: index$1.classNames('contentContainer', 'searchcraft-base-search-result-content-container') }, index.h("h2", { key: '623096e2c7cf5f11bac7127cb00342386866089e', class: index$1.classNames(isLightTheme ? 'titleLight' : 'titleDark', 'searchcraft-base-search-result-title'), style: styles.title || {} }, this.titleContent), index.h("h3", { key: '2928f4d872e90d99fac31b75c9fecfee7e2a9a41', class: index$1.classNames(isLightTheme ? 'subtitleContentLight' : 'subtitleContentDark', 'searchcraft-base-search-result-subtitle'), style: styles.subtitle || {} }, this.subtitleContent), index.h("p", { key: '93bd00c9482d492a2d3d6262dba33044d4470d2c', class: index$1.classNames(isLightTheme ? 'primaryContentLight' : 'primaryContentDark', 'searchcraft-base-search-result-primary-content'), style: styles.primaryContent || {} }, this.primaryContent), index.h("div", { key: 'dc3bce7c0f75d121ba3068b3717fd5d934036012', class: index$1.classNames('secondaryContentContainer', 'searchcraft-base-search-result-secondary-content-container') }, index.h("p", { key: '80624ec83a0a7086142b6a35b4ac65d1fdb76a4e', class: index$1.classNames(isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark', 'searchcraft-base-search-result-secondary-content'), style: styles.secondaryContent || {} }, this.secondaryContent), index.h("p", { key: '53bdb3471b16fd4a1f525d99472c3a4d5662b722', class: index$1.classNames(`${isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark'}${this.tertiaryContent ? ' hasContent' : ''}`, 'searchcraft-base-search-result-tertiary-content'), style: styles.tertiaryContent || {} }, this.tertiaryContent)), this.buttonText && (index.h("button", { key: '442dc9aebe748ef06710e196382a80bf006a383e', onClick: this.handleButtonClick, style: styles.button || {}, type: 'button' }, this.buttonText))));
+        return (index.h("a", { key: '2cf6a6d3768266f6d46e700588083aade92142f7', class: index$1.classNames(this.isInteractive
                 ? isLightTheme
                     ? 'interactiveResultContainerLight'
                     : 'interactiveResultContainerDark'
-                : 'resultContainer', onKeyDown: this.keyDownCallback, onClick: this.handleContainerClick, style: styles.container || {}, tabindex: '0' }, this.placeImageRight ? (index.h(index.Fragment, null, contentContainer, imageContainer)) : (index.h(index.Fragment, null, imageContainer, contentContainer))));
+                : 'resultContainer', 'searchcraft-search-result-container'), onKeyDown: this.keyDownCallback, onClick: this.handleClick, href: this.linkHref, rel: 'noreferrer', style: styles.container || {}, tabindex: '0', target: '_blank' }, this.placeImageRight ? (index.h(index.Fragment, null, contentContainer, imageContainer)) : (index.h(index.Fragment, null, imageContainer, contentContainer))));
     }
 };
 SearchcraftBaseSearchResult.style = SearchcraftBaseSearchResultStyle0;
@@ -188,6 +209,7 @@ const SearchcraftBaseSearchResultsStyle0 = searchcraftBaseSearchResultsModuleCss
 const SearchcraftBaseSearchResults = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.noResults = index.createEvent(this, "noResults", 7);
         this.adInterval = 4;
         this.customStylesForResults = {};
         this.documentAttributesForDisplay = '';
@@ -196,6 +218,7 @@ const SearchcraftBaseSearchResults = class {
         this.placeAdAtEnd = false;
         this.placeAdAtStart = true;
         this.placeResultImageRight = false;
+        this.isInteractive = false;
         this.hasSearched = false;
         this.query = '';
         this.searchResults = null;
@@ -226,9 +249,9 @@ const SearchcraftBaseSearchResults = class {
         }
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         if (!this.hasSearched) {
-            return (index.h("div", { class: 'emptyState' }, index.h("slot", { name: 'empty-search' })));
+            return (index.h("div", { class: index$1.classNames('emptyState', 'searchcraft-search-results-empty-state-container') }, index.h("slot", { name: 'empty-search' })));
         }
         if (!((_a = this.searchResults) === null || _a === void 0 ? void 0 : _a.data)) {
             return;
@@ -251,17 +274,17 @@ const SearchcraftBaseSearchResults = class {
                     }
                 }
             }
-            return (index.h("searchcraft-base-search-result", { "button-callback": () => console.log('button callback'), "custom-styles": serializedStyles, "image-source": dynamicProperties[parsedSearchKeys[parsedSearchKeys.length - 1]], "is-interactive": true, key: `${document.document_id}-${index$1}`, "keydown-callback": () => console.log('keydown'), "heading-text": dynamicProperties[parsedSearchKeys[0]], "place-image-right": this.placeResultImageRight, "primary-content": dynamicProperties[parsedSearchKeys[2]], "result-callback": () => console.log('interactive element'), "secondary-content": dynamicProperties[parsedSearchKeys[3]], "subheading-text": dynamicProperties[parsedSearchKeys[1]], "tertiary-content": dynamicProperties[parsedSearchKeys[4]] }));
+            return (index.h("searchcraft-base-search-result", { "button-callback": () => console.log('button callback'), "custom-styles": serializedStyles, "image-source": dynamicProperties[parsedSearchKeys[5]], "is-interactive": this.isInteractive, key: `${document.document_id}-${index$1}`, "keydown-callback": () => console.log('keydown'), linkHref: dynamicProperties[parsedSearchKeys[6]], "place-image-right": this.placeResultImageRight, "primary-content": dynamicProperties[parsedSearchKeys[2]], "result-callback": () => console.log('interactive element'), "secondary-content": dynamicProperties[parsedSearchKeys[3]], "subtitle-content": dynamicProperties[parsedSearchKeys[1]], "tertiary-content": dynamicProperties[parsedSearchKeys[4]], "title-content": dynamicProperties[parsedSearchKeys[0]], "document-position": index$1 }));
         });
         const finalComponents = [];
         if (this.placeAdAtStart) {
-            finalComponents.push(index.h("div", { key: 'ad-section-start', class: 'adSection' }, index.h("span", null, "##"), index.h("p", null, " Ad Impressions")));
+            finalComponents.push(index.h("div", { key: 'ad-section-start', class: index$1.classNames('adSection', 'searchcraft-beginning-injected-ad-section') }, index.h("span", null, "##"), index.h("p", null, " Ad Impressions")));
         }
         if (this.adInterval > 0) {
-            resultsComponents.forEach((component, index$1) => {
+            resultsComponents.forEach((component, index$2) => {
                 finalComponents.push(component);
-                if ((index$1 + 1) % this.adInterval === 0) {
-                    finalComponents.push(index.h("div", { key: `ad-section-${index$1 + 1}`, class: 'adSection' }, index.h("span", null, "##"), index.h("p", null, " Ad Impressions")));
+                if ((index$2 + 1) % this.adInterval === 0) {
+                    finalComponents.push(index.h("div", { key: `ad-section-${index$2 + 1}`, class: index$1.classNames('adSection', 'searchcraft-dynamic-injected-ad-section') }, index.h("span", null, "##"), index.h("p", null, " Ad Impressions")));
                 }
             });
         }
@@ -269,10 +292,13 @@ const SearchcraftBaseSearchResults = class {
             finalComponents.push(...resultsComponents);
         }
         if (this.placeAdAtEnd) {
-            finalComponents.push(index.h("div", { key: 'ad-section-end', class: 'adSection' }, index.h("span", null, "##"), index.h("p", null, " Ad Impressions")));
+            finalComponents.push(index.h("div", { key: 'ad-section-end', class: index$1.classNames('adSection', 'searchcraft-end-injected-ad-section') }, index.h("span", null, "##"), index.h("p", null, " Ad Impressions")));
+        }
+        if (this.query.length > 0 && ((_g = (_f = (_e = this.searchResults) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.hits) === null || _g === void 0 ? void 0 : _g.length) === 0) {
+            this.noResults.emit();
         }
-        return (index.h("div", { class: 'resultsContainer' }, finalComponents, this.query.length > 0 &&
-            ((_g = (_f = (_e = this.searchResults) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.hits) === null || _g === void 0 ? void 0 : _g.length) === 0 && (index.h("div", { class: 'errorMessageContainer' }, index.h("searchcraft-error-message", { "error-message": `No search results found for "${this.query}" query` })))));
+        return (index.h("div", { class: index$1.classNames('resultsContainer', 'searchcraft-search-results-container') }, finalComponents, this.query.length > 0 &&
+            ((_k = (_j = (_h = this.searchResults) === null || _h === void 0 ? void 0 : _h.data) === null || _j === void 0 ? void 0 : _j.hits) === null || _k === void 0 ? void 0 : _k.length) === 0 && (index.h("div", { class: index$1.classNames('errorMessageContainer', 'searchcraft-search-results-error-message-container') }, index.h("searchcraft-error-message", { "error-message": `No search results found for "${this.query}" query` })))));
     }
 };
 SearchcraftBaseSearchResults.style = SearchcraftBaseSearchResultsStyle0;
@@ -307,13 +333,16 @@ const SearchcraftClearIconSet = class {
     }
 };
 
-const searchcraftClearInputButtonModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.inputClearButtonLTR{align-items:center;background:none;border:none;display:flex;height:20px;justify-content:center;padding:0;position:absolute;right:0;top:50%;transform:translateY(-50%);width:20px}.inputClearButtonRTL{align-items:center;background:none;border:none;display:flex;height:20px;justify-content:center;left:0px;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:20px}";
+const searchcraftClearInputButtonModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.inputClearButtonLTR{align-items:center;background:none;border:none;display:flex;height:20px;justify-content:center;padding:0;position:absolute;right:16px;top:52%;transform:translateY(-50%);width:20px}.inputClearButtonRTL{align-items:center;background:none;border:none;display:flex;height:20px;justify-content:center;left:0px;padding:0;position:absolute;top:52%;transform:translateY(-50%);width:20px}";
 const SearchcraftClearInputButtonStyle0 = searchcraftClearInputButtonModuleCss;
 
 const SearchcraftClearInputButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.clearInput = index.createEvent(this, "clearInput", 7);
+        this.isLightTheme = () => {
+            return this.theme === 'light';
+        };
         this.handleClearClick = (event) => {
             event.preventDefault();
             this.clearInput.emit();
@@ -322,11 +351,8 @@ const SearchcraftClearInputButton = class {
         this.rightToLeftOrientation = false;
         this.theme = 'light';
     }
-    isLightTheme() {
-        return this.theme === 'light';
-    }
     render() {
-        return this.rightToLeftOrientation ? (index.h("button", { class: index$1.classNames('inputClearButtonRTL', '.sc-clear-input-button-rtl'), onClick: this.handleClearClick, type: 'button' }, this.isRequesting ? (this.isLightTheme ? (index.h("searchcraft-spinner-light", null)) : (index.h("searchcraft-spinner-dark", null))) : this.isLightTheme ? (index.h("searchcraft-clear-icon-set", { type: 'clear-light' })) : (index.h("searchcraft-clear-icon-set", { type: 'clear-dark' })))) : (index.h("button", { class: index$1.classNames('inputClearButtonLTR', '.sc-clear-input-button-ltr'), onClick: this.handleClearClick, type: 'button' }, this.isRequesting ? (this.isLightTheme ? (index.h("searchcraft-spinner-light", null)) : (index.h("searchcraft-spinner-dark", null))) : this.isLightTheme ? (index.h("searchcraft-clear-icon-set", { type: 'clear-light' })) : (index.h("searchcraft-clear-icon-set", { type: 'clear-dark' }))));
+        return this.rightToLeftOrientation ? (index.h("button", { class: index$1.classNames('inputClearButtonRTL', 'searchcraft-clear-input-button-rtl'), onClick: this.handleClearClick, type: 'button' }, this.isLightTheme ? (index.h("searchcraft-clear-icon-set", { type: 'clear-light' })) : (index.h("searchcraft-clear-icon-set", { type: 'clear-dark' })))) : (index.h("button", { class: index$1.classNames('inputClearButtonLTR', 'searchcraft-clear-input-button-ltr'), onClick: this.handleClearClick, type: 'button' }, this.isLightTheme ? (index.h("searchcraft-clear-icon-set", { type: 'clear-light' })) : (index.h("searchcraft-clear-icon-set", { type: 'clear-dark' }))));
     }
 };
 SearchcraftClearInputButton.style = SearchcraftClearInputButtonStyle0;
@@ -351,12 +377,12 @@ const SearchcraftErrorMessage = class {
     }
     render() {
         const errorMessageStyle = this.theme === 'light' ? 'errorMessageLight' : 'errorMessageDark';
-        return (index.h("p", { key: '7c26f9a1b2589d57a81f7909c456e712d9b7fe79', class: index$1.classNames(errorMessageStyle) }, this.errorMessage || 'Search term is required.'));
+        return (index.h("p", { key: '877438178c5fe951ff4cd184de7130e4e46739a1', class: index$1.classNames(errorMessageStyle, 'searchcraft-error-message') }, this.errorMessage || 'Search term is required.'));
     }
 };
 SearchcraftErrorMessage.style = SearchcraftErrorMessageStyle0;
 
-const searchcraftFiltersListModuleCss = ".filtersList{width:100%}.checkboxLabel{align-items:center;color:#292929;display:flex;font-family:\"Source Sans Pro\";font-size:14px;font-weight:600;gap:14px;position:relative;-webkit-font-smoothing:antialiased}.checkboxLabel input[type=checkbox]{align-items:center;appearance:none;background-color:#EDEDED;border:1px solid #D9D9D9;border-radius:8px;cursor:pointer;display:flex;height:24px;justify-content:center;width:24px}.checkboxLabel input[type=checkbox]:focus{outline:2px solid #007DB3}.checkboxLabel input[type=checkbox]:checked{background-color:#007DB3;position:relative}.checkboxLabel input[type=checkbox]:checked+.checkContainer{display:block}.checkboxLabel input[type=checkbox]:checked+.dashContainer{display:block}.remainingFilterListCheckbox{margin-left:16px}.childCheckboxLabel{align-items:center;color:#292929;display:flex;font-family:\"Source Sans Pro\";font-size:14px;font-weight:600;gap:12px;position:relative}.childCheckboxLabel input[type=checkbox]{align-items:center;appearance:none;background-color:#EDEDED;border:1px solid #D9D9D9;border-radius:8px;cursor:pointer;display:flex;height:24px;justify-content:center;position:relative;width:24px;-webkit-font-smoothing:antialiased}.childCheckboxLabel input[type=checkbox]:focus{outline:2px solid #007DB3}.childCheckboxLabel input[type=checkbox]:checked{background-color:#007DB3;position:relative}.childCheckboxLabel input[type=checkbox]:checked+.checkContainer{display:block}.childCheckboxLabel input[type=checkbox]:checked+.dashContainer{display:block}.checkContainer{display:none;height:16px;width:16px;position:absolute;top:9px;left:8px}.dashContainer{display:none;height:3px;width:14px;position:absolute;top:3px;left:9px}";
+const searchcraftFiltersListModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.filtersListContainer{width:100%}.filterCheckboxLabel{align-items:center;color:#292929;display:flex;font-family:var(--font-stack);font-size:14px;font-weight:600;gap:14px;position:relative;-webkit-font-smoothing:antialiased}.filterCheckboxLabel input[type=checkbox]{align-items:center;appearance:none;background-color:#EBEBEB;border:1px solid #D9D9D9;border-radius:8px;cursor:pointer;display:flex;height:24px;justify-content:center;width:24px}.filterCheckboxLabel input[type=checkbox]:focus{outline:2px solid #000000}.filterCheckboxLabel input[type=checkbox]:checked{background-color:#000000;position:relative}.filterCheckboxLabel input[type=checkbox]:checked+.checkContainer{display:block}.filterCheckboxLabel input[type=checkbox]:checked+.dashContainer{display:block}.childFilterCheckboxLabel{align-items:center;color:#292929;display:flex;font-family:var(--font-stack);font-size:14px;font-weight:600;gap:12px;margin-left:24px;position:relative}.childFilterCheckboxLabel input[type=checkbox]{align-items:center;appearance:none;background-color:#EBEBEB;border:1px solid #D9D9D9;border-radius:8px;cursor:pointer;display:flex;height:24px;justify-content:center;position:relative;width:24px;-webkit-font-smoothing:antialiased}.childFilterCheckboxLabel input[type=checkbox]:focus{outline:2px solid #000000}.childFilterCheckboxLabel input[type=checkbox]:checked{background-color:#000000;position:relative}.childFilterCheckboxLabel input[type=checkbox]:checked+.checkContainer{display:block}.childFilterCheckboxLabel input[type=checkbox]:checked+.dashContainer{display:block}.checkContainer{display:none;height:16px;width:16px;position:absolute;top:9px;left:8px}.dashContainer{display:none;height:3px;width:14px;position:absolute;top:3px;left:9px}";
 const SearchcraftFiltersListStyle0 = searchcraftFiltersListModuleCss;
 
 const SearchcraftFiltersList = class {
@@ -370,6 +396,7 @@ const SearchcraftFiltersList = class {
             this.searchStore.setSelectedFilters([]);
             this.emitFiltersUpdate();
         };
+        this.formatLabel = (label, count) => `${label.replace(/-/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase())} (${count})`;
         this.filters = [];
         this.dynamicFilters = [];
         this.selectedFilters = [];
@@ -424,7 +451,6 @@ const SearchcraftFiltersList = class {
             const parentFilter = this.dynamicFilters.find((filter) => filter.value === value);
             const childValues = ((_a = parentFilter === null || parentFilter === void 0 ? void 0 : parentFilter.children) === null || _a === void 0 ? void 0 : _a.map((child) => child.value)) || [];
             if (!isChecked) {
-                // Remove children from selectedFilters when parent is unchecked
                 this.selectedFilters = this.selectedFilters.filter((filter) => filter !== value && !childValues.includes(filter));
             }
             else {
@@ -443,23 +469,19 @@ const SearchcraftFiltersList = class {
         this.searchStore.setSelectedFilters(this.selectedFilters);
         this.searchStore.search();
     }
-    formatLabel(label, count) {
-        return `${label.replace(/-/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase())} (${count})`;
-    }
     render() {
         if (!this.query || this.resultsCount === 0) {
             return null;
         }
-        return (index.h("div", { class: 'filtersList' }, this.dynamicFilters.map((filter) => {
+        return (index.h("div", { class: index$1.classNames('filtersListContainer', 'searchcraft-filters-list-container') }, this.dynamicFilters.map((filter) => {
             const isChildSelected = filter.children
                 ? filter.children.some((child) => this.selectedFilters.includes(child.value))
                 : false;
-            return (index.h("div", { key: filter.value, class: 'filterItem' }, index.h("label", { class: 'checkboxLabel' }, index.h("input", { checked: this.selectedFilters.includes(filter.value), onChange: (event) => this.handleCheckboxChange(filter.value, event.target.checked, true), type: 'checkbox' }), isChildSelected ? (index.h("div", { class: 'dashContainer' }, index.h("searchcraft-dash-icon", null))) : (index.h("div", { class: 'checkContainer' }, index.h("searchcraft-check-icon", null))), this.formatLabel(filter.label, filter.count)), filter.children && filter.children.length > 0 && (index.h("div", { class: 'childrenContainer' }, filter.children.map((child) => (index.h("label", { key: child.value, class: 'childCheckboxLabel', style: {
-                    marginLeft: '20px',
+            return (index.h("div", { key: filter.value, class: index$1.classNames('searchcraft-filters-list-item') }, index.h("label", { class: index$1.classNames('filterCheckboxLabel', 'searchcraft-filters-list-checkbox-label') }, index.h("input", { checked: this.selectedFilters.includes(filter.value), onChange: (event) => this.handleCheckboxChange(filter.value, event.target.checked, true), type: 'checkbox' }), isChildSelected ? (index.h("div", { class: index$1.classNames('dashContainer', 'searchcraft-filter-list-dash-container') }, index.h("searchcraft-dash-icon", null))) : (index.h("div", { class: index$1.classNames('checkContainer', 'searchcraft-filter-list-check-container') }, index.h("searchcraft-check-icon", null))), this.formatLabel(filter.label, filter.count)), filter.children && filter.children.length > 0 && (index.h(index.Fragment, null, filter.children.map((child) => (index.h("label", { key: child.value, class: index$1.classNames('childFilterCheckboxLabel', 'searchcraft-child-filter-checkbox-label'), style: {
                     display: this.selectedFilters.includes(filter.value)
                         ? 'flex'
                         : 'none',
-                } }, index.h("input", { type: 'checkbox', checked: this.selectedFilters.includes(child.value), onChange: (event) => this.handleCheckboxChange(child.value, event.target.checked) }), index.h("div", { class: 'checkContainer' }, index.h("searchcraft-check-icon", null)), this.formatLabel(child.label.includes('/')
+                } }, index.h("input", { checked: this.selectedFilters.includes(child.value), onChange: (event) => this.handleCheckboxChange(child.value, event.target.checked), type: 'checkbox' }), index.h("div", { class: index$1.classNames('checkContainer', 'searchcraft-filter-list-check-container') }, index.h("searchcraft-check-icon", null)), this.formatLabel(child.label.includes('/')
                 ? child.label.split('/').pop() || child.label
                 : child.label, child.count))))))));
         })));
@@ -467,7 +489,7 @@ const SearchcraftFiltersList = class {
 };
 SearchcraftFiltersList.style = SearchcraftFiltersListStyle0;
 
-const searchcraftInputModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.inputContainerLTR{position:relative;width:100%}.inputContainerRTL{position:relative;width:100%;margin-left:8px}.inputLightLTR{border:none;border-radius:8px;font-family:\"Brygada 1918\";outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#EDEDED;color:#292929;margin-right:8px;padding-left:36px;padding-right:16px}.inputLightLTR::placeholder{font-family:\"Brygada 1918\";font-size:16px;font-weight:600}.inputLightLTR::placeholder{color:#737373}.inputLightLTR:focus{outline:2px solid #000}.inputDarkLTR{border:none;border-radius:8px;font-family:\"Brygada 1918\";outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#1A1A1A;color:#FFF;margin-right:8px;padding-left:36px;padding-right:16px}.inputDarkLTR::placeholder{font-family:\"Brygada 1918\";font-size:16px;font-weight:600}.inputDarkLTR::placeholder{color:#BFBFBF}.inputDarkLTR:focus{outline:2px solid #FFF}.inputErrorLightLTR{border:none;border-radius:8px;font-family:\"Brygada 1918\";outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#EDEDED;color:#292929;outline:2px solid #c00;margin-right:8px;padding-left:36px;padding-right:16px}.inputErrorLightLTR::placeholder{font-family:\"Brygada 1918\";font-size:16px;font-weight:600}.inputErrorLightLTR::placeholder{color:#737373}.inputErrorLightLTR:focus{outline:2px solid #000}.inputErrorLightLTR:focus-visible{outline:2px solid #c00}.inputErrorDarkLTR{border:none;border-radius:8px;font-family:\"Brygada 1918\";outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#1A1A1A;color:#FFF;outline:2px solid #FFB3B3;margin-right:8px;padding-left:36px;padding-right:16px}.inputErrorDarkLTR::placeholder{font-family:\"Brygada 1918\";font-size:16px;font-weight:600}.inputErrorDarkLTR::placeholder{color:#BFBFBF}.inputErrorDarkLTR:focus{outline:2px solid #FFF}.inputErrorDarkLTR:focus-visible{outline:2px solid #FFB3B3}.inputLightRTL{border:none;border-radius:8px;font-family:\"Brygada 1918\";outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#EDEDED;color:#292929;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputLightRTL::placeholder{font-family:\"Brygada 1918\";font-size:16px;font-weight:600}.inputLightRTL::placeholder{color:#737373}.inputLightRTL:focus{outline:2px solid #000}.inputDarkRTL{border:none;border-radius:8px;font-family:\"Brygada 1918\";outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#1A1A1A;color:#FFF;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputDarkRTL::placeholder{font-family:\"Brygada 1918\";font-size:16px;font-weight:600}.inputDarkRTL::placeholder{color:#BFBFBF}.inputDarkRTL:focus{outline:2px solid #FFF}.inputErrorLightRTL{border:none;border-radius:8px;font-family:\"Brygada 1918\";outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#EDEDED;color:#292929;outline:2px solid #c00;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputErrorLightRTL::placeholder{font-family:\"Brygada 1918\";font-size:16px;font-weight:600}.inputErrorLightRTL::placeholder{color:#737373}.inputErrorLightRTL:focus{outline:2px solid #000}.inputErrorLightRTL:focus-visible{outline:2px solid #c00}.inputErrorDarkRTL{border:none;border-radius:8px;font-family:\"Brygada 1918\";outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#1A1A1A;color:#FFF;outline:2px solid #FFB3B3;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputErrorDarkRTL::placeholder{font-family:\"Brygada 1918\";font-size:16px;font-weight:600}.inputErrorDarkRTL::placeholder{color:#BFBFBF}.inputErrorDarkRTL:focus{outline:2px solid #FFF}.inputErrorDarkRTL:focus-visible{outline:2px solid #FFB3B3}.inputWrapper{align-items:center;display:flex;position:relative;width:100%}";
+const searchcraftInputModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.inputContainerLTR{position:relative;width:100%}.inputContainerRTL{position:relative;width:100%;margin-left:8px}.inputLightLTR{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;background-color:#F3F3F3;color:#292929;margin-right:8px;padding-left:36px;padding-right:16px}.inputLightLTR::placeholder{font-family:var(--font-stack);font-size:16px;font-weight:400}.inputLightLTR::placeholder{color:#737373}.inputLightLTR:focus{outline:2px solid #000000}.inputDarkLTR{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;background-color:#1A1A1A;color:#FFFFFF;margin-right:8px;padding-left:36px;padding-right:16px}.inputDarkLTR::placeholder{font-family:var(--font-stack);font-size:16px;font-weight:400}.inputDarkLTR::placeholder{color:#BFBFBF}.inputDarkLTR:focus{outline:2px solid #FFFFFF}.inputErrorLightLTR{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;background-color:#F3F3F3;color:#292929;outline:2px solid #CC0000;margin-right:8px;padding-left:36px;padding-right:16px}.inputErrorLightLTR::placeholder{font-family:var(--font-stack);font-size:16px;font-weight:400}.inputErrorLightLTR::placeholder{color:#737373}.inputErrorLightLTR:focus{outline:2px solid #000000}.inputErrorLightLTR:focus-visible{outline:2px solid #CC0000}.inputErrorDarkLTR{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;background-color:#1A1A1A;color:#FFFFFF;outline:2px solid #FFB3B3;margin-right:8px;padding-left:36px;padding-right:16px}.inputErrorDarkLTR::placeholder{font-family:var(--font-stack);font-size:16px;font-weight:400}.inputErrorDarkLTR::placeholder{color:#BFBFBF}.inputErrorDarkLTR:focus{outline:2px solid #FFFFFF}.inputErrorDarkLTR:focus-visible{outline:2px solid #FFB3B3}.inputLightRTL{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;background-color:#F3F3F3;color:#292929;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputLightRTL::placeholder{font-family:var(--font-stack);font-size:16px;font-weight:400}.inputLightRTL::placeholder{color:#737373}.inputLightRTL:focus{outline:2px solid #000000}.inputDarkRTL{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;background-color:#1A1A1A;color:#FFFFFF;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputDarkRTL::placeholder{font-family:var(--font-stack);font-size:16px;font-weight:400}.inputDarkRTL::placeholder{color:#BFBFBF}.inputDarkRTL:focus{outline:2px solid #FFFFFF}.inputErrorLightRTL{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;background-color:#F3F3F3;color:#292929;outline:2px solid #CC0000;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputErrorLightRTL::placeholder{font-family:var(--font-stack);font-size:16px;font-weight:400}.inputErrorLightRTL::placeholder{color:#737373}.inputErrorLightRTL:focus{outline:2px solid #000000}.inputErrorLightRTL:focus-visible{outline:2px solid #CC0000}.inputErrorDarkRTL{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;background-color:#1A1A1A;color:#FFFFFF;outline:2px solid #FFB3B3;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputErrorDarkRTL::placeholder{font-family:var(--font-stack);font-size:16px;font-weight:400}.inputErrorDarkRTL::placeholder{color:#BFBFBF}.inputErrorDarkRTL:focus{outline:2px solid #FFFFFF}.inputErrorDarkRTL:focus-visible{outline:2px solid #FFB3B3}.inputWrapper{align-items:center;display:flex;position:relative;width:100%}";
 const SearchcraftInputStyle0 = searchcraftInputModuleCss;
 
 const SearchcraftInput = class {
@@ -476,6 +498,23 @@ const SearchcraftInput = class {
         this.clearInput = index.createEvent(this, "clearInput", 7);
         this.searchInputChange = index.createEvent(this, "searchInputChange", 7);
         this.inputKeyUp = index.createEvent(this, "inputKeyUp", 7);
+        this.handleInputChange = (event) => {
+            const input = event.target;
+            this.searchInputChange.emit(input.value);
+        };
+        this.handleInputKeyUp = (event) => {
+            const input = event.target;
+            this.inputKeyUp.emit(input.value);
+        };
+        this.handleClearInput = () => {
+            if (this.query === '') {
+                return;
+            }
+            this.query = '';
+            if (this.clearInput) {
+                this.clearInput.emit();
+            }
+        };
         this.customStyles = {};
         this.error = false;
         this.formClassName = '';
@@ -493,39 +532,22 @@ const SearchcraftInput = class {
     get isLightTheme() {
         return this.theme === 'light';
     }
-    handleInputChange(event) {
-        const input = event.target;
-        this.searchInputChange.emit(input.value);
-    }
-    handleInputKeyUp(event) {
-        const input = event.target;
-        this.inputKeyUp.emit(input.value);
-    }
-    handleClearInput() {
-        if (this.query === '') {
-            return;
-        }
-        this.query = '';
-        if (this.clearInput) {
-            this.clearInput.emit();
-        }
-    }
     render() {
         const containerClassName = this.rightToLeftOrientation
             ? 'inputContainerRTL'
             : 'inputContainerLTR';
-        const inputClassName = index$1.classNames(this.error
+        const inputClassName = this.error
             ? this.isLightTheme
                 ? 'inputErrorLightRTL'
                 : 'inputErrorDarkRTL'
             : this.isLightTheme
                 ? 'inputLightLTR'
-                : 'inputDarkLTR', 'searchcraft-input');
+                : 'inputDarkLTR';
         const validatedCustomStyles = store.parseCustomStyles(this.customStyles);
         const placeholderStyle = {
             fontSize: validatedCustomStyles.placeholderFontSize || '16px',
         };
-        return (index.h("div", { key: '7047cbe1692a4c8f11232d7f65e00824703d8b50', class: index$1.classNames(containerClassName, this.formClassName, 'searchcraft-input-form') }, this.rightToLeftOrientation ? (index.h(index.Fragment, null, index.h("input", { autoComplete: 'off', class: index$1.classNames(inputClassName, 'searchcraft-input'), id: 'searchcraft-input-id', onChange: this.handleInputChange.bind(this), onKeyUp: this.handleInputKeyUp.bind(this), placeholder: this.placeholderValue, type: 'text', value: this.query, style: validatedCustomStyles }), index.h("style", null, `
+        return (index.h("div", { key: '931c969802f73f4fa4d44ea591b506e5d1f9caf1', class: index$1.classNames(containerClassName, this.formClassName, 'searchcraft-input-form') }, this.rightToLeftOrientation ? (index.h(index.Fragment, null, index.h("input", { autoComplete: 'off', class: index$1.classNames(inputClassName, 'searchcraft-input'), id: 'searchcraft-input-id', onChange: this.handleInputChange.bind(this), onKeyUp: this.handleInputKeyUp.bind(this), placeholder: this.placeholderValue, style: validatedCustomStyles, type: 'text', value: this.query }), index.h("style", null, `
                 #searchcraft-input-id::placeholder {
                   font-size: ${placeholderStyle.fontSize};
                 }
@@ -560,18 +582,18 @@ const SearchcraftInputCaption = class {
                     : 'inputCaptionErrorDarkRTL'
                 : this.isLightTheme
                     ? 'inputCaptionLightRTL'
-                    : 'inputCaptionDarkRTL', this.inputCaptionClassName, '.searchcraft-input-caption') }, this.inputCaptionValue)) : (index.h("p", { class: index$1.classNames(this.error
+                    : 'inputCaptionDarkRTL', this.inputCaptionClassName, 'searchcraft-input-caption') }, this.inputCaptionValue)) : (index.h("p", { class: index$1.classNames(this.error
                 ? this.isLightTheme
                     ? 'inputCaptionErrorLightLTR'
                     : 'inputCaptionErrorDarkLTR'
                 : this.isLightTheme
                     ? 'inputCaptionLightLTR'
-                    : 'inputCaptionDarkLTR', this.inputCaptionClassName, '.searchcraft-input-caption') }, this.inputCaptionValue));
+                    : 'inputCaptionDarkLTR', this.inputCaptionClassName, 'searchcraft-input-caption') }, this.inputCaptionValue));
     }
 };
 SearchcraftInputCaption.style = SearchcraftInputCaptionStyle0;
 
-const searchcraftInputIconModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.inputIconLTR{left:15px;position:absolute;top:50%;transform:translateY(-50%)}.inputIconRTL{position:absolute;right:15px;top:50%;transform:translateY(-50%)}";
+const searchcraftInputIconModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.inputIconLTR{left:15px;position:absolute;top:52%;transform:translateY(-50%)}.inputIconRTL{position:absolute;right:15px;top:52%;transform:translateY(-50%)}";
 const SearchcraftInputIconStyle0 = searchcraftInputIconModuleCss;
 
 const SearchcraftInputIcon = class {
@@ -587,12 +609,12 @@ const SearchcraftInputIcon = class {
         return this.theme === 'light';
     }
     render() {
-        return this.error ? (index.h("div", { class: this.rightToLeftOrientation ? 'inputIconRTL' : 'inputIconLTR' }, this.isLightTheme() ? (index.h("searchcraft-search-icon-set", { height: this.height, type: 'error-light', width: this.width })) : (index.h("searchcraft-search-icon-set", { height: this.height, type: 'error-dark', width: this.width })))) : (index.h("div", { class: this.rightToLeftOrientation ? 'inputIconRTL' : 'inputIconLTR' }, this.isLightTheme() ? (index.h("searchcraft-search-icon-set", { height: this.height, type: 'search-light', width: this.width })) : (index.h("searchcraft-search-icon-set", { height: this.height, type: 'search-dark', width: this.width }))));
+        return this.error ? (index.h("div", { class: index$1.classNames(this.rightToLeftOrientation ? 'inputIconRTL' : 'inputIconLTR', 'searchcraft-input-icon-container') }, this.isLightTheme() ? (index.h("searchcraft-search-icon-set", { height: this.height, type: 'error-light', width: this.width })) : (index.h("searchcraft-search-icon-set", { height: this.height, type: 'error-dark', width: this.width })))) : (index.h("div", { class: index$1.classNames(this.rightToLeftOrientation ? 'inputIconRTL' : 'inputIconLTR', 'searchcraft-input-icon-container') }, this.isLightTheme() ? (index.h("searchcraft-search-icon-set", { height: this.height, type: 'search-light', width: this.width })) : (index.h("searchcraft-search-icon-set", { height: this.height, type: 'search-dark', width: this.width }))));
     }
 };
 SearchcraftInputIcon.style = SearchcraftInputIconStyle0;
 
-const searchcraftInputLabelModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.labelLight{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#292929}.labelDark{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#FFF}";
+const searchcraftInputLabelModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.labelLight{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#292929}.labelDark{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#FFFFFF}";
 const SearchcraftInputLabelStyle0 = searchcraftInputLabelModuleCss;
 
 const SearchcraftInputLabel = class {
@@ -610,12 +632,12 @@ const SearchcraftInputLabel = class {
             return null;
         }
         const labelStyle = this.isLightTheme() ? 'labelLight' : 'labelDark';
-        return (index.h("label", { class: index$1.classNames(labelStyle, this.inputLabelClassName), htmlFor: 'searchcraft-input-id' }, this.label));
+        return (index.h("label", { class: index$1.classNames(labelStyle, this.inputLabelClassName, 'searchcraft-input-label'), htmlFor: 'searchcraft-input-id' }, this.label));
     }
 };
 SearchcraftInputLabel.style = SearchcraftInputLabelStyle0;
 
-const searchcraftResultsInfoModuleCss = ".container{border-bottom:1px solid #D9D9D9;display:flex;justify-content:flex-start;width:100%}.resultsInfo{color:#292929;font-size:18px;font-weight:600;line-height:20px;margin:0;margin-bottom:8px}";
+const searchcraftResultsInfoModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.resultsInfoContainer{border-bottom:1px solid #D9D9D9;display:flex;justify-content:flex-start;width:100%}.resultsInfoContent{color:#292929;font-family:var(--font-stack);font-size:18px;font-weight:600;line-height:20px;margin:24px 0 8px}@media (max-width: 900px){.resultsInfoContent{margin:0;margin-bottom:8px}}";
 const SearchcraftResultsInfoStyle0 = searchcraftResultsInfoModuleCss;
 
 const SearchcraftResultsInfo = class {
@@ -632,7 +654,7 @@ const SearchcraftResultsInfo = class {
             this.isRequesting = state.isRequesting;
             this.resultsCount = ((_b = (_a = state.searchResults) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.count) || 0;
             this.responseTime = ((((_d = (_c = state.searchResults) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.time_taken) || 0) * 1000).toFixed(2);
-            this.query = state.query || ''; // Update query from store
+            this.query = state.query || '';
         });
     }
     disconnectedCallback() {
@@ -644,7 +666,8 @@ const SearchcraftResultsInfo = class {
         if (!this.query || this.resultsCount === 0) {
             return null;
         }
-        return (index.h("div", { class: 'container' }, index.h("p", { class: 'resultsInfo' }, this.resultsCount, " results found in ", this.responseTime, "ms")));
+        const formattedResults = store.formatNumberWithCommas(this.resultsCount);
+        return (index.h("div", { class: index$1.classNames('resultsInfoContainer', 'searchcraft-results-info-container') }, index.h("p", { class: index$1.classNames('resultsInfoContent', 'searchcraft-results-info-content') }, formattedResults, " results found in ", this.responseTime, "ms")));
     }
 };
 SearchcraftResultsInfo.style = SearchcraftResultsInfoStyle0;
@@ -673,15 +696,20 @@ const SearchcraftSearchIconSet = class {
     }
 };
 
-const searchcraftSliderModuleCss = ".sliderContainer{display:flex;flex-direction:column;gap:10px;font-family:Arial, sans-serif;align-items:center;width:100%}.rangeContainer{display:flex;position:relative;width:100%;align-items:center}.rangeContainer .activeRange{background:#007DB3;border-radius:2px;height:4px;position:absolute;top:50%;transform:translateY(-50%);z-index:0}.rangeContainer .rangeSlider{width:100%;height:4px;background:transparent;border-radius:2px;outline:none;-webkit-appearance:none;appearance:none;position:absolute;margin:0}.rangeContainer .rangeSlider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background-color:#FFF;border-radius:50%;border:2px solid #e6e6e6;cursor:pointer}.rangeContainer .rangeSlider::-moz-range-thumb{width:20px;height:20px;background-color:#FFF;border-radius:50%;border:2px solid #e6e6e6;cursor:pointer}.yearLabels{display:flex;justify-content:space-between;width:100%;margin-top:10px;font-size:15px;font-weight:600;font-family:\"Source Sans Pro\", sans-serif;color:#666}.yearLabel{min-width:30px;text-align:center}";
+const searchcraftSliderModuleCss = ".sliderContainer{align-items:center;display:flex;flex-direction:column;gap:10px;width:100%}.rangeContainer{align-items:center;background-color:#D9D9D9;border-radius:999px;display:flex;position:relative;height:4px;width:100%}.rangeContainer::-webkit-slider-runnable-track{pointer-events:none}.rangeContainer .activeRange{background-color:#000000;border-radius:2px;height:4px;position:absolute;top:50%;transform:translateY(-50%);z-index:0}.rangeContainer .activeRange::-webkit-slider-runnable-track{pointer-events:none}.rangeContainer .activeRange::-moz-range-track{pointer-events:none}.rangeContainer .rangeSlider{appearance:none;background:transparent;border-radius:2px;height:4px;margin:0;outline:none;pointer-events:none;position:absolute;width:100%;-webkit-appearance:none}.rangeContainer .rangeSlider::-webkit-slider-thumb{background-color:#FFFFFF;border-radius:50%;border:2px solid #E6E6E6;cursor:pointer;height:20px;pointer-events:all;width:20px;-webkit-appearance:none}.rangeContainer .rangeSlider::-moz-range-thumb{background-color:#FFFFFF;border-radius:50%;border:2px solid #E6E6E6;cursor:pointer;height:20px;pointer-events:all;width:20px}.yearLabels{color:#292929;display:flex;font-family:\"Source Sans Pro\", sans-serif;font-size:15px;font-weight:600;justify-content:space-between;margin-top:10px;width:100%}.yearLabel{min-width:30px;text-align:center}";
 const SearchcraftSliderStyle0 = searchcraftSliderModuleCss;
 
 const SearchcraftSlider = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.rangeChanged = index.createEvent(this, "rangeChanged", 7);
         this.searchStore = store.useSearchcraftStore.getState();
         this.updateYears = async () => {
             this.searchStore.setYearsRange([this.startYear, this.endYear]);
+            this.rangeChanged.emit({
+                startYear: this.startYear,
+                endYear: this.endYear,
+            });
             try {
                 if (typeof this.query === 'string' && this.query.trim() !== '') {
                     await this.searchStore.search();
@@ -696,13 +724,17 @@ const SearchcraftSlider = class {
         };
         this.handleStartYearChange = (event) => {
             const value = Number.parseInt(event.target.value, 10);
-            this.startYear = Math.min(value, this.endYear);
-            this.updateYears();
+            if (value <= this.endYear) {
+                this.startYear = value;
+                this.updateYears();
+            }
         };
         this.handleEndYearChange = (event) => {
             const value = Number.parseInt(event.target.value, 10);
-            this.endYear = Math.max(value, this.startYear);
-            this.updateYears();
+            if (value >= this.startYear) {
+                this.endYear = value;
+                this.updateYears();
+            }
         };
         this.maxYear = new Date().getFullYear();
         this.minYear = 2014;
@@ -735,41 +767,15 @@ const SearchcraftSlider = class {
         const rangeMax = this.maxYear;
         const startPercent = ((this.startYear - rangeMin) / (rangeMax - rangeMin)) * 100;
         const endPercent = ((this.endYear - rangeMin) / (rangeMax - rangeMin)) * 100;
-        return (index.h("div", { class: 'sliderContainer' }, index.h("div", { class: 'rangeContainer' }, index.h("div", { class: 'activeRange', style: {
+        return (index.h("div", { class: index$1.classNames('sliderContainer', 'searchcraft-slider-container') }, index.h("div", { class: index$1.classNames('rangeContainer', 'searchcraft-slider-range-container') }, index.h("div", { class: index$1.classNames('activeRange', 'searchcraft-slider-active-range'), style: {
                 left: `${startPercent}%`,
                 width: `${endPercent - startPercent}%`,
-            } }), index.h("input", { class: 'rangeSlider', max: this.maxYear, min: this.minYear, onInput: this.handleStartYearChange, step: '1', type: 'range', value: this.startYear }), index.h("input", { class: 'rangeSlider', max: this.maxYear, min: this.minYear, onInput: this.handleEndYearChange, step: '1', type: 'range', value: this.endYear })), index.h("div", { class: 'yearLabels' }, index.h("span", { class: 'yearLabel' }, this.startYear), index.h("span", { class: 'yearLabel' }, this.endYear))));
+            } }), index.h("input", { class: index$1.classNames('rangeSlider', 'searchcraft-slider-range-slider-start-thumb'), max: this.maxYear, min: this.minYear, onInput: this.handleStartYearChange, step: '1', type: 'range', value: this.startYear }), index.h("input", { class: index$1.classNames('rangeSlider', 'searchcraft-slider-range-slider-end-thumb'), max: this.maxYear, min: this.minYear, onInput: this.handleEndYearChange, step: '1', type: 'range', value: this.endYear })), index.h("div", { class: index$1.classNames('yearLabels', 'searchcraft-slider-year-label-container') }, index.h("span", { class: index$1.classNames('yearLabel', 'searchcraft-slider-start-year-label') }, this.startYear), index.h("span", { class: index$1.classNames('yearLabel', 'searchcraft-slider-end-year-label') }, this.endYear))));
     }
 };
 SearchcraftSlider.style = SearchcraftSliderStyle0;
 
-const searchcraftSpinnerDarkModuleCss = ".spinnerContainer{background-color:transparent;height:20px;width:20px}.spinnerDark{animation:spinning 1s linear infinite;background:conic-gradient(#000 50%, #FFFFFF);clip-path:circle(50%);height:100%;mask-image:radial-gradient(circle at center, rgba(0, 0, 0, 0) 6.6666666667px, rgb(0, 0, 0) 6.6666666667px);width:100%}.spinnerLight{animation:spinning 1s linear infinite;background:conic-gradient(#737373 50%, #FFFFFF);clip-path:circle(50%);height:100%;mask-image:radial-gradient(circle at center, rgba(0, 0, 0, 0) 6.6666666667px, rgb(0, 0, 0) 6.6666666667px);width:100%}@keyframes spinning{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}";
-const SearchcraftSpinnerDarkStyle0 = searchcraftSpinnerDarkModuleCss;
-
-const SearchcraftSpinnerDark = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    render() {
-        return (index.h("div", { key: 'be34b9a3ecec05fdc169145a5db5a4f37bbd404b', class: 'spinnerContainer' }, index.h("div", { key: 'b59ffd2fe8dd3ac990003bff3085cb571c08730e', class: 'spinnerDark' })));
-    }
-};
-SearchcraftSpinnerDark.style = SearchcraftSpinnerDarkStyle0;
-
-const searchcraftSpinnerLightModuleCss = ".spinnerContainer{background-color:transparent;height:20px;width:20px}.spinnerLight{animation:spinning 1s linear infinite;background:conic-gradient(#737373 50%, #FFFFFF);clip-path:circle(50%);height:100%;mask-image:radial-gradient(circle at center, rgba(0, 0, 0, 0) 6.6666666667px, rgb(0, 0, 0) 6.6666666667px);width:100%}@keyframes spinning{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}";
-const SearchcraftSpinnerLightStyle0 = searchcraftSpinnerLightModuleCss;
-
-const SearchcraftSpinnerLight = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    render() {
-        return (index.h("div", { key: 'a4f73eee03d4d7253c04c47995315bd121e8ded3', class: 'spinnerContainer' }, index.h("div", { key: '53e3486ef7a2fa6029a6107bae2c0655b1608a12', class: 'spinnerLight' })));
-    }
-};
-SearchcraftSpinnerLight.style = SearchcraftSpinnerLightStyle0;
-
-const searchcraftToggleButtonModuleCss = ".toggle-wrapper{background:#ddd;border:none;border-radius:16px;box-shadow:0px 0px 0px 1px rgba(0, 0, 0, 0.05);cursor:pointer;height:26px;margin-left:10px;position:relative;width:44px}.toggle-wrapper.active{background:#007DB3;box-shadow:0px 0px 0px 1px rgba(0, 0, 0, 0.05)}.toggle-wrapper .toggle-switch{background:#fff;border-radius:50%;height:18px;left:4px;position:absolute;top:calc(50% - 9px);transition:transform 0.3s ease;width:18px}.toggle-wrapper .toggle-switch.active{transform:translateX(16px)}";
+const searchcraftToggleButtonModuleCss = ".toggleWrapper{background:#D9D9D9;border:none;border-radius:16px;box-shadow:0px 0px 0px 1px rgba(0, 0, 0, 0.05);cursor:pointer;height:26px;margin-left:10px;position:relative;width:44px}.toggleWrapper.active{background:#000000;box-shadow:0px 0px 0px 1px rgba(0, 0, 0, 0.05)}.toggleWrapper .toggleSwitch{background:#FFFFFF;border-radius:50%;height:18px;left:4px;position:absolute;top:calc(50% - 9px);transition:transform 0.3s ease;width:18px}.toggleWrapper .toggleSwitch.active{transform:translateX(16px)}";
 const SearchcraftToggleButtonStyle0 = searchcraftToggleButtonModuleCss;
 
 const SearchcraftToggleButton = class {
@@ -833,7 +839,9 @@ const SearchcraftToggleButton = class {
         if (!this.query || this.resultsCount === 0) {
             return null;
         }
-        return (index.h("button", { class: `toggle-wrapper ${this.isActive ? 'active' : ''}`, onClick: this.handleToggle, type: 'button' }, index.h("div", { class: `toggle-switch ${this.isActive ? 'active' : ''}` })));
+        const toggleContainerStyle = `toggleWrapper ${this.isActive ? 'active' : ''}`;
+        const toggleSwitchStyle = `toggleSwitch ${this.isActive ? 'active' : ''}`;
+        return (index.h("button", { class: index$1.classNames(toggleContainerStyle, 'searchcraft-toggle-button-container'), onClick: this.handleToggle, type: 'button' }, index.h("div", { class: index$1.classNames(toggleSwitchStyle, 'searchcraft-toggle-switch') })));
     }
 };
 SearchcraftToggleButton.style = SearchcraftToggleButtonStyle0;
@@ -854,8 +862,6 @@ exports.searchcraft_input_label = SearchcraftInputLabel;
 exports.searchcraft_results_info = SearchcraftResultsInfo;
 exports.searchcraft_search_icon_set = SearchcraftSearchIconSet;
 exports.searchcraft_slider = SearchcraftSlider;
-exports.searchcraft_spinner_dark = SearchcraftSpinnerDark;
-exports.searchcraft_spinner_light = SearchcraftSpinnerLight;
 exports.searchcraft_toggle_button = SearchcraftToggleButton;
 
-//# sourceMappingURL=searchcraft-auto-search-form_19.cjs.entry.js.map
+//# sourceMappingURL=searchcraft-auto-search-form_17.cjs.entry.js.map