@searchcraft/javascript-sdk 0.7.0 → 0.7.1

package/dist/components/searchcraft-popover-form.js

@@ -1,77 +1,52 @@
-import { p as proxyCustomElement, H, h } from './p-6cafd48d.js';
+import { p as proxyCustomElement, H, h } from './p-5365011f.js';
 import { c as classNames } from './p-5cdc6210.js';
-import { u as useSearchcraftStore } from './p-01dc5b3b.js';
-import { d as defineCustomElement$7 } from './p-cf096782.js';
-import { d as defineCustomElement$6 } from './p-f5a06210.js';
-import { d as defineCustomElement$5 } from './p-da5b92ef.js';
-import { d as defineCustomElement$4 } from './p-c273e43d.js';
-import { d as defineCustomElement$3 } from './p-1ae87308.js';
-import { d as defineCustomElement$2 } from './p-e1cf5f9d.js';
-
-const searchcraftPopoverFormModuleCss = ":root{--sc-input-border-radius:8px;--sc-input-search-icon-size:20px;--sc-input-clear-icon-size:20px;--sc-input-padding-left:44px;--sc-input-padding-right:44px;--sc-image-border-radius:8px;--sc-popover-form-border-radius:8px;--sc-popover-list-view-height:400px;--sc-popover-list-item-image-size:60px;--sc-popover-list-item-padding-horizontal:8px;--sc-popover-list-item-padding-vertical:8px;--sc-popover-modal-max-width:570px}:root{--sc-surface-disabled:#D9D9D9;--sc-surface-neutral-primary:#FFFFFF;--sc-surface-neutral-secondary:#F3F3F3;--sc-surface-neutral-light:#FFFFFF;--sc-surface-neutral-primary-hover:#FAFAFA;--sc-surface-neutral-primary-active:#F7F7F7;--sc-surface-neutral-secondary-hover:#EDEDED;--sc-surface-neutral-secondary-active:#E6E6E6;--sc-surface-brand-primary:#000000;--sc-surface-brand-secondary:#E6E6E6;--sc-surface-brand-primary-hover:#2E2E2E;--sc-surface-brand-primary-active:#292929;--sc-surface-brand-secondary-hover:#EBEBEB;--sc-surface-brand-secondary-active:#E0E0E0;--sc-surface-success-primary:#008000;--sc-surface-success-secondary:#CCFFCC;--sc-surface-success-primary-hover:#009900;--sc-surface-success-primary-active:#006600;--sc-surface-success-secondary-hover:#E6FFE6;--sc-surface-success-secondary-active:#E6FFE6;--sc-surface-caution-primary:#CC6600;--sc-surface-caution-secondary:#FFD9B3;--sc-surface-caution-primary-hover:#E57300;--sc-surface-caution-primary-active:#B25A00;--sc-surface-caution-secondary-hover:#FFE5CC;--sc-surface-caution-secondary-active:#FFCC99;--sc-surface-danger-primary:#CC0000;--sc-surface-danger-secondary:#FFCCCC;--sc-surface-danger-primary-hover:#E50000;--sc-surface-danger-primary-active:#B30000;--sc-surface-danger-secondary-hover:#FFE7E7;--sc-surface-danger-secondary-active:#FFB3B3;--sc-content-brand:#000000;--sc-content-success:#008000;--sc-content-caution:#994D00;--sc-content-danger:#990000;--sc-content-disabled:#737373;--sc-content-neutral-primary:#292929;--sc-content-neutral-secondary:#404040;--sc-content-brand-on-primary:#FFFFFF;--sc-content-success-on-primary:#FFFFFF;--sc-content-caution-on-primary:#FFFFFF;--sc-content-danger-on-primary:#FFFFFF;--sc-content-disabled-on-disabled:#737373;--sc-border-neutral:rgba(0,0,0, 0.1);--sc-border-brand:#000000;--sc-border-success:#008000;--sc-border-caution:#CC6600;--sc-border-danger:#CC0000;--sc-border-disabled:#737373}:root{--sc-font-family:sans-serif;--sc-heading-1-font-size:32px;--sc-heading-1-line-height:36px;--sc-heading-1-font-weight:700;--sc-heading-2-font-size:29px;--sc-heading-2-line-height:32px;--sc-heading-2-font-weight:700;--sc-heading-3-font-size:26px;--sc-heading-3-line-height:28px;--sc-heading-3-font-weight:700;--sc-heading-4-font-size:23px;--sc-heading-4-line-height:24px;--sc-heading-4-font-weight:700;--sc-heading-5-font-size:20px;--sc-heading-5-line-height:24px;--sc-heading-5-font-weight:700;--sc-heading-6-font-size:10px;--sc-heading-6-line-height:12px;--sc-heading-6-font-weight:700;--sc-body-bold-font-size:16px;--sc-body-bold-line-height:20px;--sc-body-bold-font-weight:700;--sc-body-font-size:16px;--sc-body-line-height:20px;--sc-body-font-weight:400;--sc-body-small-bold-font-size:12px;--sc-body-small-bold-line-height:16px;--sc-body-small-bold-font-weight:700;--sc-body-small-font-size:12px;--sc-body-small-line-height:16px;--sc-body-small-font-weight:400}:root{--sc-breakpoint-sm:576px;--sc-breakpoint-md:768px;--sc-breakpoint-lg:992px}.searchcraft-popover-form{display:flex;flex-direction:column;flex:1}.searchcraft-popover-form .searchcraft-popover-form-input-wrapper{padding:12px;background-color:var(--sc-surface-neutral-secondary);display:flex;flex-direction:row;gap:4px}.searchcraft-popover-form .searchcraft-popover-form-input-wrapper>searchcraft-input-form{flex:1}.searchcraft-popover-form .searchcraft-popover-form-cancel-button{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-font-size);font-weight:var(--sc-body-font-weight);line-height:var(--sc-body-line-height);border:0;outline:0;padding:0;flex-shrink:0;background:none;cursor:pointer;padding-left:12px;padding-right:12px;border-radius:calc(var(--sc-popover-form-border-radius) * 0.8)}.searchcraft-popover-form .searchcraft-popover-form-cancel-button:hover{background-color:var(--sc-surface-brand-secondary-hover)}.searchcraft-popover-form .searchcraft-popover-form-cancel-button:focus{background-color:var(--sc-surface-brand-secondary-active)}.searchcraft-popover-form-inline .searchcraft-input{border-top-left-radius:var(--sc-popover-form-border-radius);border-top-right-radius:var(--sc-popover-form-border-radius);border-bottom-left-radius:var(--sc-popover-form-border-radius);border-bottom-right-radius:var(--sc-popover-form-border-radius);border:none;outline:none}.searchcraft-popover-form-inline.searchcraft-popover-form-active .searchcraft-input{border-top-left-radius:var(--sc-popover-form-border-radius);border-top-right-radius:var(--sc-popover-form-border-radius);border-bottom-left-radius:0;border-bottom-right-radius:0}.searchcraft-popover-form-inline .searchcraft-popover-inline-wrapper-outer{position:relative}.searchcraft-popover-form-inline .searchcraft-popover-inline-wrapper-inner{position:absolute;height:var(--sc-popover-list-view-height);z-index:1000;width:100%}.searchcraft-popover-form-inline .searchcraft-popover-list-view{display:flex;flex-direction:column;overflow:auto;background-color:var(--sc-surface-neutral-secondary);border-bottom-left-radius:var(--sc-popover-form-border-radius);border-bottom-right-radius:var(--sc-popover-form-border-radius);max-height:var(--sc-popover-list-view-height)}.searchcraft-popover-form-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:0;background-color:var(--sc-surface-neutral-secondary)}@media (min-width: 576px){.searchcraft-popover-form-modal{padding:16px;background-color:transparent}}.searchcraft-popover-form-modal .searchcraft-input{border-radius:calc(var(--sc-popover-form-border-radius) * 0.8);outline-width:1px;outline-color:var(--sc-border-neutral)}.searchcraft-popover-form-modal .searchcraft-popover-form-modal-backdrop{position:absolute;inset:0;background-color:rgba(0, 0, 0, 0.5);display:none}@media (min-width: 576px){.searchcraft-popover-form-modal .searchcraft-popover-form-modal-backdrop{display:block}}.searchcraft-popover-form-modal .searchcraft-popover-form-modal-inner{position:absolute;inset:0;z-index:1002;margin-top:0px;display:flex;border-radius:var(--sc-popover-form-border-radius);overflow:hidden}@media (min-width: 576px){.searchcraft-popover-form-modal .searchcraft-popover-form-modal-inner{inset:auto;position:relative;width:100%;margin-top:100px;max-width:var(--sc-popover-modal-max-width)}}.searchcraft-popover-form-modal .searchcraft-popover-list-view{display:flex;flex-direction:column;overflow:auto;background-color:var(--sc-surface-neutral-secondary);border-bottom-left-radius:0;border-bottom-right-radius:0}@media (min-width: 576px){.searchcraft-popover-form-modal .searchcraft-popover-list-view{max-height:var(--sc-popover-list-view-height)}}.searchcraft-popover-form-modal searchcraft-popover-list-view{overflow:scroll}@media (min-width: 576px){.searchcraft-popover-form-modal searchcraft-popover-list-view{overflow:auto}}.searchcraft-popover-form-fullscreen{position:fixed;inset:0;z-index:1000;background-color:var(--sc-surface-neutral-secondary)}.searchcraft-popover-form-fullscreen .searchcraft-popover-form{position:absolute;inset:0}.searchcraft-popover-form-fullscreen .searchcraft-input{border-radius:calc(var(--sc-popover-form-border-radius) * 0.8);outline-width:1px;outline-color:var(--sc-border-neutral)}.searchcraft-popover-form-fullscreen searchcraft-popover-list-view{overflow:scroll}";
-const SearchcraftPopoverFormStyle0 = searchcraftPopoverFormModuleCss;
+import { u as useSearchcraftStore } from './p-936e2ed4.js';
+import { d as defineCustomElement$7 } from './p-521fe971.js';
+import { d as defineCustomElement$6 } from './p-a75ef832.js';
+import { d as defineCustomElement$5 } from './p-d95bc2a0.js';
+import { d as defineCustomElement$4 } from './p-ca881e5c.js';
+import { d as defineCustomElement$3 } from './p-0ef4ab33.js';
+import { d as defineCustomElement$2 } from './p-506cdac1.js';
 
 const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftPopoverForm extends H {
     constructor() {
         super();
         this.__registerHost();
-        /**
-         * The type of popover form to render.
-         *
-         * - `inline` - Renders inline with the rest of the content on the page. The search results pop over the page content.
-         * - `fullscreen` - Renders in fullscreen view. Used together with the `searchcraft-popover-button` component.
-         * - `modal` - Renders in a modal view. Used together with the `searchcraft-popover-button` component.
-         */
-        this.type = 'inline';
-        /**
-         * The hotkey that activates the popover.
-         */
-        this.hotkey = 'k';
-        /**
-         * The hotkey modifier that activates the popover. Used together with the `hotkey` prop.
-         */
-        this.hotkeyModifier = 'meta';
-        this.isPopoverVisibleInState = false;
-        this.isFocused = false;
-        this.breakpointSm = 576;
-        this.breakpointMd = 768;
-        this.breakpointLg = 992;
-        this.handleDocumentClick = (event) => {
-            if (!this.hostElement.contains(event.target)) {
-                this.isFocused = false;
-            }
-        };
-        /**
-         * Actions to perform when various keys are pressed within the popover form.
-         */
-        this.handleDocumentKeyDown = (event) => {
-            // Document-scoped actions
-            if (event.key === this.hotkey) {
-                this.handleHotkeyPressed(event);
-            }
-            // Document-scoped -> Popover-scoped keyboard event boundary
-            if (!this.hostElement.contains(document.activeElement)) {
-                return;
-            }
-            // Popover-scoped actions
-            switch (event.key) {
-                case 'ArrowDown':
-                case 'ArrowUp':
-                    event.preventDefault();
-                    this.focusOnNextListItem(event.key);
-                    break;
-                case 'Escape':
-                    useSearchcraftStore.getState().setPopoverVisibility(false);
-                    break;
-                default:
-                    return;
-            }
-        };
-        this.handleInputInit = () => {
-            const input = this.hostElement.querySelector('.searchcraft-input');
-            input === null || input === void 0 ? void 0 : input.focus();
-        };
     }
+    /**
+     * The Searchcraft config object.
+     */
+    config;
+    /**
+     * The type of popover form to render.
+     *
+     * - `inline` - Renders inline with the rest of the content on the page. The search results pop over the page content.
+     * - `fullscreen` - Renders in fullscreen view. Used together with the `searchcraft-popover-button` component.
+     * - `modal` - Renders in a modal view. Used together with the `searchcraft-popover-button` component.
+     */
+    type = 'inline';
+    /**
+     * Formats the content rendered for each result.
+     */
+    popoverResultMappings;
+    /**
+     * The hotkey that activates the popover.
+     */
+    hotkey = 'k';
+    /**
+     * The hotkey modifier that activates the popover. Used together with the `hotkey` prop.
+     */
+    hotkeyModifier = 'meta';
+    isPopoverVisibleInState = false;
+    unsubscribe;
+    searchResults;
+    searchTerm;
+    isFocused = false;
+    breakpointSm = 576;
+    breakpointMd = 768;
+    breakpointLg = 992;
+    modalElement;
+    get hostElement() { return this; }
     componentDidLoad() {
         // Loads the breakpoint values into state
         const computedStyle = getComputedStyle(document.documentElement);
@@ -89,16 +64,20 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
             if (this.isPopoverVisibleInState !== state.isPopoverVisible) {
                 this.handlePopoverVisibilityChange(state.isPopoverVisible);
             }
-            this.searchResults = Object.assign({}, state.searchResults);
+            this.searchResults = { ...state.searchResults };
             this.searchTerm = state.query;
         });
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.unsubscribe?.();
         document.removeEventListener('click', this.handleDocumentClick);
         document.removeEventListener('keydown', this.handleDocumentKeyDown);
     }
+    handleDocumentClick = (event) => {
+        if (!this.hostElement.contains(event.target)) {
+            this.isFocused = false;
+        }
+    };
     /**
      * Handles when popover visibility is changed in state
      */
@@ -106,6 +85,36 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
         this.isPopoverVisibleInState = isVisible;
         document.body.style.overflow = isVisible ? 'hidden' : 'auto';
     }
+    /**
+     * Actions to perform when various keys are pressed within the popover form.
+     */
+    handleDocumentKeyDown = (event) => {
+        // Document-scoped actions
+        if (event.key === this.hotkey) {
+            this.handleHotkeyPressed(event);
+        }
+        // Document-scoped -> Popover-scoped keyboard event boundary
+        if (!this.hostElement.contains(document.activeElement)) {
+            return;
+        }
+        // Popover-scoped actions
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowUp':
+                event.preventDefault();
+                this.focusOnNextListItem(event.key);
+                break;
+            case 'Escape':
+                useSearchcraftStore.getState().setPopoverVisibility(false);
+                break;
+            default:
+                return;
+        }
+    };
+    handleInputInit = () => {
+        const input = this.hostElement.querySelector('.searchcraft-input');
+        input?.focus();
+    };
     /**
      * When popover is `inline` and the viewport is at the smallest breakpoint,
      * focusing on the input will open a modal version of the popover form.
@@ -113,6 +122,7 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
     handleInputFocus() {
         this.isFocused = true;
         if (this.type === 'inline' &&
+            window.visualViewport &&
             window.visualViewport.width < this.breakpointSm) {
             useSearchcraftStore.getState().setPopoverVisibility(true);
             // Appends a popover form of type=`modal` to the body
@@ -139,7 +149,7 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
             event.preventDefault();
             if (this.type === 'inline' && !this.isPopoverVisibleInState) {
                 const hostElementInput = this.hostElement.querySelector('.searchcraft-input');
-                hostElementInput === null || hostElementInput === void 0 ? void 0 : hostElementInput.focus();
+                hostElementInput?.focus();
             }
             else {
                 useSearchcraftStore
@@ -158,15 +168,14 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
      * @param direction
      */
     focusOnNextListItem(direction) {
-        var _a, _b;
         const listItems = Array.from(document.querySelectorAll('a.searchcraft-popover-list-item')).filter((el) => !el.hasAttribute('disabled') && el.offsetParent !== null);
         const currentIndex = listItems.indexOf(document.activeElement);
         if (direction === 'ArrowDown') {
-            (_a = listItems[(currentIndex + 1) % listItems.length]) === null || _a === void 0 ? void 0 : _a.focus();
+            listItems[(currentIndex + 1) % listItems.length]?.focus();
         }
         else if (direction === 'ArrowUp') {
             if (currentIndex >= 1) {
-                (_b = listItems[currentIndex - 1]) === null || _b === void 0 ? void 0 : _b.focus();
+                listItems[currentIndex - 1]?.focus();
             }
             else {
                 const input = document.querySelector('.searchcraft-input');
@@ -181,9 +190,9 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
         }
     }
     get hasResultsToShow() {
-        var _a, _b, _c, _d, _e;
-        return (((_b = (_a = this.searchTerm) === null || _a === void 0 ? void 0 : _a.trim()) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
-            ((_e = (_d = (_c = this.searchResults) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.hits) === null || _e === void 0 ? void 0 : _e.length) > 0);
+        return (this.searchTerm &&
+            this.searchTerm?.trim()?.length > 0 &&
+            (this.searchResults?.data?.hits?.length || 0) > 0);
     }
     renderInlinePopover(documents) {
         const isListViewVisible = this.hasResultsToShow && this.isFocused;
@@ -206,8 +215,7 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
         }
     }
     render() {
-        var _a, _b, _c;
-        const documents = (_c = (_b = (_a = this.searchResults) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.hits) === null || _c === void 0 ? void 0 : _c.map((data, _index) => {
+        const documents = this.searchResults?.data?.hits?.map((data, _index) => {
             const { doc: result } = data;
             return result;
         });
@@ -220,8 +228,6 @@ const SearchcraftPopoverForm$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
                 return this.renderFullscreenPopover(documents);
         }
     }
-    get hostElement() { return this; }
-    static get style() { return SearchcraftPopoverFormStyle0; }
 }, [0, "searchcraft-popover-form", {
         "config": [16],
         "type": [1],

package/dist/components/searchcraft-popover-form.js.map

@@ -1 +1 @@
-{"file":"searchcraft-popover-form.js","mappings":"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","names":["SearchcraftPopoverForm"],"sources":["src/components/searchcraft-popover-form/searchcraft-popover-form.module.scss?tag=searchcraft-popover-form","src/components/searchcraft-popover-form/searchcraft-popover-form.tsx"],"sourcesContent":["/**\n * Styles applied to all popover form variants.\n */\n.searchcraft-popover-form {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n\n  & .searchcraft-popover-form-input-wrapper {\n    padding: 12px;\n    background-color: var(--sc-surface-neutral-secondary);\n    display: flex;\n    flex-direction: row;\n    gap: 4px;\n  }\n\n  & .searchcraft-popover-form-input-wrapper > searchcraft-input-form {\n    flex: 1;\n  }\n\n  & .searchcraft-popover-form-cancel-button {\n    @include body();\n    border: 0;\n    outline: 0;\n    padding: 0;\n    flex-shrink: 0;\n    background: none;\n    cursor: pointer;\n    padding-left: 12px;\n    padding-right: 12px;\n    border-radius: calc(var(--sc-popover-form-border-radius) * 0.8);\n\n    &:hover {\n      background-color: var(--sc-surface-brand-secondary-hover);\n    }\n\n    &:focus {\n      background-color: var(--sc-surface-brand-secondary-active);\n    }\n  }\n}\n\n/**\n * Styles applied to `inline` popover forms.\n */\n.searchcraft-popover-form-inline {\n  & .searchcraft-input {\n    border-top-left-radius: var(--sc-popover-form-border-radius);\n    border-top-right-radius: var(--sc-popover-form-border-radius);\n    border-bottom-left-radius: var(--sc-popover-form-border-radius);\n    border-bottom-right-radius: var(--sc-popover-form-border-radius);\n    border: none;\n    outline: none;\n  }\n\n  &.searchcraft-popover-form-active .searchcraft-input {\n    border-top-left-radius: var(--sc-popover-form-border-radius);\n    border-top-right-radius: var(--sc-popover-form-border-radius);\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n  & .searchcraft-popover-inline-wrapper-outer {\n    position: relative;\n  }\n\n  & .searchcraft-popover-inline-wrapper-inner {\n    position: absolute;\n    height: var(--sc-popover-list-view-height);\n    z-index: 1000;\n    width: 100%;\n  }\n\n  & .searchcraft-popover-list-view {\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    background-color: var(--sc-surface-neutral-secondary);\n    border-bottom-left-radius: var(--sc-popover-form-border-radius);\n    border-bottom-right-radius: var(--sc-popover-form-border-radius);\n    max-height: var(--sc-popover-list-view-height)\n  }\n}\n\n/**\n * Styles applied to `modal` popover forms.\n */\n.searchcraft-popover-form-modal {\n  position: fixed;\n  inset: 0;\n  z-index: 1000;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 0;\n  background-color: var(--sc-surface-neutral-secondary);\n\n  @media (min-width: $breakpoint-sm) {\n    padding: 16px;\n    background-color: transparent;\n  }\n\n  & .searchcraft-input {\n    border-radius: calc(var(--sc-popover-form-border-radius) * 0.8);\n    outline-width: 1px;\n    outline-color: var(--sc-border-neutral);\n  }\n\n  & .searchcraft-popover-form-modal-backdrop {\n    position: absolute;\n    inset: 0;\n    background-color: rgba(0,0,0, 0.5);\n    display: none;\n\n    @media (min-width: $breakpoint-sm) {\n      display: block;\n    }\n  }\n\n  & .searchcraft-popover-form-modal-inner {\n    position: absolute;\n    inset: 0;\n    z-index: 1002;\n    margin-top: 0px;\n    display: flex;\n    border-radius: var(--sc-popover-form-border-radius);\n    overflow: hidden;\n\n    @media (min-width: $breakpoint-sm) {\n      inset: auto;\n      position: relative;\n      width: 100%;\n      margin-top: 100px;\n      max-width: var(--sc-popover-modal-max-width);\n    }\n  }\n\n  & .searchcraft-popover-list-view {\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    background-color: var(--sc-surface-neutral-secondary);\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n\n    @media (min-width: $breakpoint-sm) {\n      max-height: var(--sc-popover-list-view-height)\n    }\n  }\n\n  & searchcraft-popover-list-view {\n    overflow: scroll;\n\n    @media (min-width: $breakpoint-sm) {\n      overflow: auto;\n    }\n  }\n}\n\n/**\n * Styles applied to `fullscreen` popover forms.\n */\n.searchcraft-popover-form-fullscreen {\n  position: fixed;\n  inset: 0;\n  z-index: 1000;\n  background-color: var(--sc-surface-neutral-secondary);\n\n  & .searchcraft-popover-form {\n    position: absolute;\n    inset: 0;\n  }\n\n  & .searchcraft-input {\n    border-radius: calc(var(--sc-popover-form-border-radius) * 0.8);\n    outline-width: 1px;\n    outline-color: var(--sc-border-neutral);\n  }\n\n  & searchcraft-popover-list-view {\n    overflow: scroll;\n  }\n}\n","import { Component, Element, Prop, State, h } from '@stencil/core';\nimport classNames from 'classnames';\nimport type { SearchcraftConfig, SearchcraftResponse } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\nimport type { PopoverResultMappings } from 'types';\n\n/**\n * This web component is designed to display search results in a popover container that dynamically appears when the user interacts with a search input field.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-popover-form type=\"fullscreen\" />\n * ```\n *\n * ```js\n * // index.js\n * const popoverForm = document.querySelector('searchcraft-popover-form');\n *\n * popoverForm.config = {\n *   index: [index_name_from_vektron],\n *   readKey: 'read_key_from_vektron',\n *   endpointUrl: 'enpoint_url_from_vektron',\n * };\n *\n * popoverForm.popoverResultMappings = {\n *  containerHref: {\n *   fieldNames: [\n *    {\n *      fieldName: 'canonical_link',\n *      dataType: 'text',\n *    },\n *  ],\n *  };\n * ```\n */\n@Component({\n  tag: 'searchcraft-popover-form',\n  styleUrl: 'searchcraft-popover-form.module.scss',\n  shadow: false,\n})\nexport class SearchcraftPopoverForm {\n  /**\n   * The Searchcraft config object.\n   */\n  @Prop() config: SearchcraftConfig | undefined;\n  /**\n   * The type of popover form to render.\n   *\n   * - `inline` - Renders inline with the rest of the content on the page. The search results pop over the page content.\n   * - `fullscreen` - Renders in fullscreen view. Used together with the `searchcraft-popover-button` component.\n   * - `modal` - Renders in a modal view. Used together with the `searchcraft-popover-button` component.\n   */\n  @Prop() type: 'inline' | 'fullscreen' | 'modal' = 'inline';\n  /**\n   * Formats the content rendered for each result.\n   */\n  @Prop() popoverResultMappings: PopoverResultMappings | undefined;\n  /**\n   * The hotkey that activates the popover.\n   */\n  @Prop() hotkey = 'k';\n  /**\n   * The hotkey modifier that activates the popover. Used together with the `hotkey` prop.\n   */\n  @Prop() hotkeyModifier: 'ctrl' | 'meta' | 'alt' | 'option' = 'meta';\n\n  @State() isPopoverVisibleInState = false;\n  @State() unsubscribe: (() => void) | undefined;\n  @State() searchResults: SearchcraftResponse | undefined;\n  @State() searchTerm: string | undefined;\n  @State() isFocused = false;\n  @State() breakpointSm = 576;\n  @State() breakpointMd = 768;\n  @State() breakpointLg = 992;\n\n  @State() modalElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  componentDidLoad() {\n    // Loads the breakpoint values into state\n    const computedStyle = getComputedStyle(document.documentElement);\n    this.breakpointSm = Number.parseFloat(\n      computedStyle.getPropertyValue('--sc-breakpoint-sm').trim(),\n    );\n    this.breakpointMd = Number.parseFloat(\n      computedStyle.getPropertyValue('--sc-breakpoint-md').trim(),\n    );\n    this.breakpointLg = Number.parseFloat(\n      computedStyle.getPropertyValue('--sc-breakpoint-lg').trim(),\n    );\n    // Set popover visiblity in state\n    this.isPopoverVisibleInState =\n      useSearchcraftStore.getState().isPopoverVisible;\n\n    // Add event listeners\n    document.addEventListener('click', this.handleDocumentClick);\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n\n    // Subscribe to state events\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      if (this.isPopoverVisibleInState !== state.isPopoverVisible) {\n        this.handlePopoverVisibilityChange(state.isPopoverVisible);\n      }\n\n      this.searchResults = { ...state.searchResults };\n      this.searchTerm = state.query;\n    });\n  }\n\n  disconnectedCallback() {\n    this.unsubscribe?.();\n    document.removeEventListener('click', this.handleDocumentClick);\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  handleDocumentClick = (event: MouseEvent) => {\n    if (!this.hostElement.contains(event.target as Node)) {\n      this.isFocused = false;\n    }\n  };\n\n  /**\n   * Handles when popover visibility is changed in state\n   */\n  handlePopoverVisibilityChange(isVisible: boolean) {\n    this.isPopoverVisibleInState = isVisible;\n    document.body.style.overflow = isVisible ? 'hidden' : 'auto';\n  }\n\n  /**\n   * Actions to perform when various keys are pressed within the popover form.\n   */\n  handleDocumentKeyDown = (event: KeyboardEvent) => {\n    // Document-scoped actions\n    if (event.key === this.hotkey) {\n      this.handleHotkeyPressed(event);\n    }\n\n    // Document-scoped -> Popover-scoped keyboard event boundary\n    if (!this.hostElement.contains(document.activeElement)) {\n      return;\n    }\n\n    // Popover-scoped actions\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'ArrowUp':\n        event.preventDefault();\n        this.focusOnNextListItem(event.key);\n        break;\n      case 'Escape':\n        useSearchcraftStore.getState().setPopoverVisibility(false);\n        break;\n      default:\n        return;\n    }\n  };\n\n  handleInputInit = () => {\n    const input = this.hostElement.querySelector('.searchcraft-input') as\n      | HTMLInputElement\n      | undefined;\n    input?.focus();\n  };\n\n  /**\n   * When popover is `inline` and the viewport is at the smallest breakpoint,\n   * focusing on the input will open a modal version of the popover form.\n   */\n  handleInputFocus() {\n    this.isFocused = true;\n\n    if (\n      this.type === 'inline' &&\n      window.visualViewport.width < this.breakpointSm\n    ) {\n      useSearchcraftStore.getState().setPopoverVisibility(true);\n\n      // Appends a popover form of type=`modal` to the body\n      if (!this.modalElement) {\n        this.modalElement = document.createElement('searchcraft-popover-form');\n        this.modalElement.config = this.config;\n        this.modalElement.popoverResultMappings = this.popoverResultMappings;\n        this.modalElement.setAttribute('type', 'fullscreen');\n        document.body.appendChild(this.modalElement);\n      }\n    }\n  }\n\n  handleModalBackdropClick(_event: MouseEvent) {\n    useSearchcraftStore.getState().setPopoverVisibility(false);\n  }\n\n  /**\n   * When a hotkey is pressed, tests if the modifiers also match.\n   * If modifiers match, toggles visibility of the popover modal.\n   */\n  handleHotkeyPressed(event: KeyboardEvent) {\n    if (\n      (event.ctrlKey && this.hotkeyModifier === 'ctrl') ||\n      (event.altKey && this.hotkeyModifier === 'alt') ||\n      (event.metaKey && this.hotkeyModifier === 'meta')\n    ) {\n      event.preventDefault();\n      if (this.type === 'inline' && !this.isPopoverVisibleInState) {\n        const hostElementInput = this.hostElement.querySelector(\n          '.searchcraft-input',\n        ) as HTMLInputElement | undefined;\n        hostElementInput?.focus();\n      } else {\n        useSearchcraftStore\n          .getState()\n          .setPopoverVisibility(!this.isPopoverVisibleInState);\n      }\n    }\n  }\n\n  handleCancelButtonClick() {\n    useSearchcraftStore.getState().setPopoverVisibility(false);\n  }\n\n  /**\n   * Moves focus to the next/previous list item in the list view. If you are at the top\n   * of the list view, it moves focus back to the input.\n   *\n   * @param direction\n   */\n  focusOnNextListItem(direction: 'ArrowDown' | 'ArrowUp') {\n    const listItems = Array.from(\n      document.querySelectorAll<HTMLAnchorElement>(\n        'a.searchcraft-popover-list-item',\n      ),\n    ).filter((el) => !el.hasAttribute('disabled') && el.offsetParent !== null);\n\n    const currentIndex = listItems.indexOf(\n      document.activeElement as HTMLAnchorElement,\n    );\n\n    if (direction === 'ArrowDown') {\n      listItems[(currentIndex + 1) % listItems.length]?.focus();\n    } else if (direction === 'ArrowUp') {\n      if (currentIndex >= 1) {\n        listItems[currentIndex - 1]?.focus();\n      } else {\n        const input = document.querySelector('.searchcraft-input') as\n          | HTMLInputElement\n          | undefined;\n\n        if (input) {\n          input.focus();\n          requestAnimationFrame(() => {\n            input.selectionEnd = input.value.length;\n            input.selectionStart = input.value.length;\n          });\n        }\n      }\n    }\n  }\n\n  get hasResultsToShow() {\n    return (\n      this.searchTerm?.trim()?.length > 0 &&\n      this.searchResults?.data?.hits?.length > 0\n    );\n  }\n\n  renderInlinePopover(documents: Record<string, unknown>[]) {\n    const isListViewVisible = this.hasResultsToShow && this.isFocused;\n\n    const popoverFormClassNames = classNames(\n      'searchcraft-popover-form searchcraft-popover-form-inline',\n      {\n        'searchcraft-popover-form-active': isListViewVisible,\n      },\n    );\n\n    return (\n      <div class={popoverFormClassNames}>\n        <searchcraft-input-form\n          config={this.config}\n          onInputFocus={this.handleInputFocus.bind(this)}\n        />\n        {isListViewVisible && (\n          <div class='searchcraft-popover-inline-wrapper-outer'>\n            <div class='searchcraft-popover-inline-wrapper-inner'>\n              <searchcraft-popover-list-view\n                popoverResultMappings={this.popoverResultMappings}\n                documents={documents}\n              />\n            </div>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  renderModalPopover(documents: Record<string, unknown>[]) {\n    if (this.isPopoverVisibleInState) {\n      const popoverFormClassNames = classNames('searchcraft-popover-form', {\n        'searchcraft-popover-form-active': this.hasResultsToShow,\n      });\n\n      return (\n        <div class='searchcraft-popover-form-modal'>\n          {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}\n          <div\n            class='searchcraft-popover-form-modal-backdrop'\n            onClick={this.handleModalBackdropClick}\n          />\n          <div class='searchcraft-popover-form-modal-inner'>\n            <div class={popoverFormClassNames}>\n              <div class='searchcraft-popover-form-input-wrapper'>\n                <searchcraft-input-form\n                  config={this.config}\n                  onInputFocus={this.handleInputFocus.bind(this)}\n                  onInputInit={this.handleInputInit.bind(this)}\n                />\n                <button\n                  type='button'\n                  class='searchcraft-popover-form-cancel-button'\n                  onClick={this.handleCancelButtonClick.bind(this)}\n                >\n                  Cancel\n                </button>\n              </div>\n              {this.hasResultsToShow && (\n                <searchcraft-popover-list-view\n                  popoverResultMappings={this.popoverResultMappings}\n                  documents={documents}\n                />\n              )}\n            </div>\n          </div>\n        </div>\n      );\n    }\n  }\n\n  renderFullscreenPopover(documents: Record<string, unknown>[]) {\n    if (this.isPopoverVisibleInState) {\n      return (\n        <div class='searchcraft-popover-form-fullscreen'>\n          <div class='searchcraft-popover-form'>\n            <div class='searchcraft-popover-form-input-wrapper'>\n              <searchcraft-input-form\n                config={this.config}\n                onInputFocus={this.handleInputFocus.bind(this)}\n                onInputInit={this.handleInputInit.bind(this)}\n              />\n              <button\n                type='button'\n                class='searchcraft-popover-form-cancel-button'\n                onClick={this.handleCancelButtonClick.bind(this)}\n              >\n                Cancel\n              </button>\n            </div>\n            {this.hasResultsToShow && (\n              <searchcraft-popover-list-view\n                popoverResultMappings={this.popoverResultMappings}\n                documents={documents}\n              />\n            )}\n          </div>\n        </div>\n      );\n    }\n  }\n\n  render() {\n    const documents: Record<string, unknown>[] =\n      this.searchResults?.data?.hits?.map((data, _index) => {\n        const { doc: result } = data;\n        return result;\n      });\n\n    switch (this.type) {\n      case 'inline':\n        return this.renderInlinePopover(documents);\n      case 'modal':\n        return this.renderModalPopover(documents);\n      case 'fullscreen':\n        return this.renderFullscreenPopover(documents);\n    }\n  }\n}\n"],"version":3}
+{"file":"searchcraft-popover-form.js","mappings":"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","names":["SearchcraftPopoverForm"],"sources":["src/components/searchcraft-popover-form/searchcraft-popover-form.tsx"],"sourcesContent":["import { Component, Element, Prop, State, h } from '@stencil/core';\nimport classNames from 'classnames';\nimport type { SearchcraftConfig, SearchcraftResponse } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\nimport type { PopoverResultMappings } from 'types';\n\n/**\n * This web component is designed to display search results in a popover container that dynamically appears when the user interacts with a search input field.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-popover-form type=\"fullscreen\" />\n * ```\n *\n * ```js\n * // index.js\n * const popoverForm = document.querySelector('searchcraft-popover-form');\n *\n * popoverForm.config = {\n *   index: [index_name_from_vektron],\n *   readKey: 'read_key_from_vektron',\n *   endpointUrl: 'enpoint_url_from_vektron',\n * };\n *\n * popoverForm.popoverResultMappings = {\n *  containerHref: {\n *   fieldNames: [\n *    {\n *      fieldName: 'canonical_link',\n *      dataType: 'text',\n *    },\n *  ],\n *  };\n * ```\n */\n@Component({\n  tag: 'searchcraft-popover-form',\n  shadow: false,\n})\nexport class SearchcraftPopoverForm {\n  /**\n   * The Searchcraft config object.\n   */\n  @Prop() config: SearchcraftConfig | undefined;\n  /**\n   * The type of popover form to render.\n   *\n   * - `inline` - Renders inline with the rest of the content on the page. The search results pop over the page content.\n   * - `fullscreen` - Renders in fullscreen view. Used together with the `searchcraft-popover-button` component.\n   * - `modal` - Renders in a modal view. Used together with the `searchcraft-popover-button` component.\n   */\n  @Prop() type: 'inline' | 'fullscreen' | 'modal' = 'inline';\n  /**\n   * Formats the content rendered for each result.\n   */\n  @Prop() popoverResultMappings: PopoverResultMappings | undefined;\n  /**\n   * The hotkey that activates the popover.\n   */\n  @Prop() hotkey = 'k';\n  /**\n   * The hotkey modifier that activates the popover. Used together with the `hotkey` prop.\n   */\n  @Prop() hotkeyModifier: 'ctrl' | 'meta' | 'alt' | 'option' = 'meta';\n\n  @State() isPopoverVisibleInState = false;\n  @State() unsubscribe: (() => void) | undefined;\n  @State() searchResults: SearchcraftResponse | undefined;\n  @State() searchTerm: string | undefined;\n  @State() isFocused = false;\n  @State() breakpointSm = 576;\n  @State() breakpointMd = 768;\n  @State() breakpointLg = 992;\n\n  @State() modalElement;\n\n  @Element() hostElement!: HTMLElement;\n\n  componentDidLoad() {\n    // Loads the breakpoint values into state\n    const computedStyle = getComputedStyle(document.documentElement);\n    this.breakpointSm = Number.parseFloat(\n      computedStyle.getPropertyValue('--sc-breakpoint-sm').trim(),\n    );\n    this.breakpointMd = Number.parseFloat(\n      computedStyle.getPropertyValue('--sc-breakpoint-md').trim(),\n    );\n    this.breakpointLg = Number.parseFloat(\n      computedStyle.getPropertyValue('--sc-breakpoint-lg').trim(),\n    );\n    // Set popover visiblity in state\n    this.isPopoverVisibleInState =\n      useSearchcraftStore.getState().isPopoverVisible;\n\n    // Add event listeners\n    document.addEventListener('click', this.handleDocumentClick);\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n\n    // Subscribe to state events\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      if (this.isPopoverVisibleInState !== state.isPopoverVisible) {\n        this.handlePopoverVisibilityChange(state.isPopoverVisible);\n      }\n\n      this.searchResults = { ...state.searchResults } as SearchcraftResponse;\n      this.searchTerm = state.query;\n    });\n  }\n\n  disconnectedCallback() {\n    this.unsubscribe?.();\n    document.removeEventListener('click', this.handleDocumentClick);\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  handleDocumentClick = (event: MouseEvent) => {\n    if (!this.hostElement.contains(event.target as Node)) {\n      this.isFocused = false;\n    }\n  };\n\n  /**\n   * Handles when popover visibility is changed in state\n   */\n  handlePopoverVisibilityChange(isVisible: boolean) {\n    this.isPopoverVisibleInState = isVisible;\n    document.body.style.overflow = isVisible ? 'hidden' : 'auto';\n  }\n\n  /**\n   * Actions to perform when various keys are pressed within the popover form.\n   */\n  handleDocumentKeyDown = (event: KeyboardEvent) => {\n    // Document-scoped actions\n    if (event.key === this.hotkey) {\n      this.handleHotkeyPressed(event);\n    }\n\n    // Document-scoped -> Popover-scoped keyboard event boundary\n    if (!this.hostElement.contains(document.activeElement)) {\n      return;\n    }\n\n    // Popover-scoped actions\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'ArrowUp':\n        event.preventDefault();\n        this.focusOnNextListItem(event.key);\n        break;\n      case 'Escape':\n        useSearchcraftStore.getState().setPopoverVisibility(false);\n        break;\n      default:\n        return;\n    }\n  };\n\n  handleInputInit = () => {\n    const input = this.hostElement.querySelector('.searchcraft-input') as\n      | HTMLInputElement\n      | undefined;\n    input?.focus();\n  };\n\n  /**\n   * When popover is `inline` and the viewport is at the smallest breakpoint,\n   * focusing on the input will open a modal version of the popover form.\n   */\n  handleInputFocus() {\n    this.isFocused = true;\n\n    if (\n      this.type === 'inline' &&\n      window.visualViewport &&\n      window.visualViewport.width < this.breakpointSm\n    ) {\n      useSearchcraftStore.getState().setPopoverVisibility(true);\n\n      // Appends a popover form of type=`modal` to the body\n      if (!this.modalElement) {\n        this.modalElement = document.createElement('searchcraft-popover-form');\n        this.modalElement.config = this.config;\n        this.modalElement.popoverResultMappings = this.popoverResultMappings;\n        this.modalElement.setAttribute('type', 'fullscreen');\n        document.body.appendChild(this.modalElement);\n      }\n    }\n  }\n\n  handleModalBackdropClick(_event: MouseEvent) {\n    useSearchcraftStore.getState().setPopoverVisibility(false);\n  }\n\n  /**\n   * When a hotkey is pressed, tests if the modifiers also match.\n   * If modifiers match, toggles visibility of the popover modal.\n   */\n  handleHotkeyPressed(event: KeyboardEvent) {\n    if (\n      (event.ctrlKey && this.hotkeyModifier === 'ctrl') ||\n      (event.altKey && this.hotkeyModifier === 'alt') ||\n      (event.metaKey && this.hotkeyModifier === 'meta')\n    ) {\n      event.preventDefault();\n      if (this.type === 'inline' && !this.isPopoverVisibleInState) {\n        const hostElementInput = this.hostElement.querySelector(\n          '.searchcraft-input',\n        ) as HTMLInputElement | undefined;\n        hostElementInput?.focus();\n      } else {\n        useSearchcraftStore\n          .getState()\n          .setPopoverVisibility(!this.isPopoverVisibleInState);\n      }\n    }\n  }\n\n  handleCancelButtonClick() {\n    useSearchcraftStore.getState().setPopoverVisibility(false);\n  }\n\n  /**\n   * Moves focus to the next/previous list item in the list view. If you are at the top\n   * of the list view, it moves focus back to the input.\n   *\n   * @param direction\n   */\n  focusOnNextListItem(direction: 'ArrowDown' | 'ArrowUp') {\n    const listItems = Array.from(\n      document.querySelectorAll<HTMLAnchorElement>(\n        'a.searchcraft-popover-list-item',\n      ),\n    ).filter((el) => !el.hasAttribute('disabled') && el.offsetParent !== null);\n\n    const currentIndex = listItems.indexOf(\n      document.activeElement as HTMLAnchorElement,\n    );\n\n    if (direction === 'ArrowDown') {\n      listItems[(currentIndex + 1) % listItems.length]?.focus();\n    } else if (direction === 'ArrowUp') {\n      if (currentIndex >= 1) {\n        listItems[currentIndex - 1]?.focus();\n      } else {\n        const input = document.querySelector('.searchcraft-input') as\n          | HTMLInputElement\n          | undefined;\n\n        if (input) {\n          input.focus();\n          requestAnimationFrame(() => {\n            input.selectionEnd = input.value.length;\n            input.selectionStart = input.value.length;\n          });\n        }\n      }\n    }\n  }\n\n  get hasResultsToShow() {\n    return (\n      this.searchTerm &&\n      this.searchTerm?.trim()?.length > 0 &&\n      (this.searchResults?.data?.hits?.length || 0) > 0\n    );\n  }\n\n  renderInlinePopover(documents: Record<string, unknown>[]) {\n    const isListViewVisible = this.hasResultsToShow && this.isFocused;\n\n    const popoverFormClassNames = classNames(\n      'searchcraft-popover-form searchcraft-popover-form-inline',\n      {\n        'searchcraft-popover-form-active': isListViewVisible,\n      },\n    );\n\n    return (\n      <div class={popoverFormClassNames}>\n        <searchcraft-input-form\n          config={this.config}\n          onInputFocus={this.handleInputFocus.bind(this)}\n        />\n        {isListViewVisible && (\n          <div class='searchcraft-popover-inline-wrapper-outer'>\n            <div class='searchcraft-popover-inline-wrapper-inner'>\n              <searchcraft-popover-list-view\n                popoverResultMappings={this.popoverResultMappings}\n                documents={documents}\n              />\n            </div>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  renderModalPopover(documents: Record<string, unknown>[]) {\n    if (this.isPopoverVisibleInState) {\n      const popoverFormClassNames = classNames('searchcraft-popover-form', {\n        'searchcraft-popover-form-active': this.hasResultsToShow,\n      });\n\n      return (\n        <div class='searchcraft-popover-form-modal'>\n          {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}\n          <div\n            class='searchcraft-popover-form-modal-backdrop'\n            onClick={this.handleModalBackdropClick}\n          />\n          <div class='searchcraft-popover-form-modal-inner'>\n            <div class={popoverFormClassNames}>\n              <div class='searchcraft-popover-form-input-wrapper'>\n                <searchcraft-input-form\n                  config={this.config}\n                  onInputFocus={this.handleInputFocus.bind(this)}\n                  onInputInit={this.handleInputInit.bind(this)}\n                />\n                <button\n                  type='button'\n                  class='searchcraft-popover-form-cancel-button'\n                  onClick={this.handleCancelButtonClick.bind(this)}\n                >\n                  Cancel\n                </button>\n              </div>\n              {this.hasResultsToShow && (\n                <searchcraft-popover-list-view\n                  popoverResultMappings={this.popoverResultMappings}\n                  documents={documents}\n                />\n              )}\n            </div>\n          </div>\n        </div>\n      );\n    }\n  }\n\n  renderFullscreenPopover(documents: Record<string, unknown>[]) {\n    if (this.isPopoverVisibleInState) {\n      return (\n        <div class='searchcraft-popover-form-fullscreen'>\n          <div class='searchcraft-popover-form'>\n            <div class='searchcraft-popover-form-input-wrapper'>\n              <searchcraft-input-form\n                config={this.config}\n                onInputFocus={this.handleInputFocus.bind(this)}\n                onInputInit={this.handleInputInit.bind(this)}\n              />\n              <button\n                type='button'\n                class='searchcraft-popover-form-cancel-button'\n                onClick={this.handleCancelButtonClick.bind(this)}\n              >\n                Cancel\n              </button>\n            </div>\n            {this.hasResultsToShow && (\n              <searchcraft-popover-list-view\n                popoverResultMappings={this.popoverResultMappings}\n                documents={documents}\n              />\n            )}\n          </div>\n        </div>\n      );\n    }\n  }\n\n  render() {\n    const documents: Record<string, unknown>[] =\n      this.searchResults?.data?.hits?.map((data, _index) => {\n        const { doc: result } = data;\n        return result;\n      }) as Record<string, unknown>[];\n\n    switch (this.type) {\n      case 'inline':\n        return this.renderInlinePopover(documents);\n      case 'modal':\n        return this.renderModalPopover(documents);\n      case 'fullscreen':\n        return this.renderFullscreenPopover(documents);\n    }\n  }\n}\n"],"version":3}

package/dist/components/searchcraft-popover-list-item.js

@@ -1,4 +1,4 @@
-import { S as SearchcraftPopoverListItem$1, d as defineCustomElement$1 } from './p-1ae87308.js';
+import { S as SearchcraftPopoverListItem$1, d as defineCustomElement$1 } from './p-0ef4ab33.js';
 
 const SearchcraftPopoverListItem = SearchcraftPopoverListItem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-popover-list-view.js

@@ -1,4 +1,4 @@
-import { S as SearchcraftPopoverListView$1, d as defineCustomElement$1 } from './p-e1cf5f9d.js';
+import { S as SearchcraftPopoverListView$1, d as defineCustomElement$1 } from './p-506cdac1.js';
 
 const SearchcraftPopoverListView = SearchcraftPopoverListView$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-results-info.js

@@ -1,25 +1,22 @@
-import { p as proxyCustomElement, H, h } from './p-6cafd48d.js';
-import { u as useSearchcraftStore } from './p-01dc5b3b.js';
+import { p as proxyCustomElement, H, h } from './p-5365011f.js';
+import { u as useSearchcraftStore } from './p-936e2ed4.js';
 import { f as formatNumberWithCommas } from './p-755f491b.js';
 
-const searchcraftResultsInfoModuleCss = ":root{--sc-input-border-radius:8px;--sc-input-search-icon-size:20px;--sc-input-clear-icon-size:20px;--sc-input-padding-left:44px;--sc-input-padding-right:44px;--sc-image-border-radius:8px;--sc-popover-form-border-radius:8px;--sc-popover-list-view-height:400px;--sc-popover-list-item-image-size:60px;--sc-popover-list-item-padding-horizontal:8px;--sc-popover-list-item-padding-vertical:8px;--sc-popover-modal-max-width:570px}:root{--sc-surface-disabled:#D9D9D9;--sc-surface-neutral-primary:#FFFFFF;--sc-surface-neutral-secondary:#F3F3F3;--sc-surface-neutral-light:#FFFFFF;--sc-surface-neutral-primary-hover:#FAFAFA;--sc-surface-neutral-primary-active:#F7F7F7;--sc-surface-neutral-secondary-hover:#EDEDED;--sc-surface-neutral-secondary-active:#E6E6E6;--sc-surface-brand-primary:#000000;--sc-surface-brand-secondary:#E6E6E6;--sc-surface-brand-primary-hover:#2E2E2E;--sc-surface-brand-primary-active:#292929;--sc-surface-brand-secondary-hover:#EBEBEB;--sc-surface-brand-secondary-active:#E0E0E0;--sc-surface-success-primary:#008000;--sc-surface-success-secondary:#CCFFCC;--sc-surface-success-primary-hover:#009900;--sc-surface-success-primary-active:#006600;--sc-surface-success-secondary-hover:#E6FFE6;--sc-surface-success-secondary-active:#E6FFE6;--sc-surface-caution-primary:#CC6600;--sc-surface-caution-secondary:#FFD9B3;--sc-surface-caution-primary-hover:#E57300;--sc-surface-caution-primary-active:#B25A00;--sc-surface-caution-secondary-hover:#FFE5CC;--sc-surface-caution-secondary-active:#FFCC99;--sc-surface-danger-primary:#CC0000;--sc-surface-danger-secondary:#FFCCCC;--sc-surface-danger-primary-hover:#E50000;--sc-surface-danger-primary-active:#B30000;--sc-surface-danger-secondary-hover:#FFE7E7;--sc-surface-danger-secondary-active:#FFB3B3;--sc-content-brand:#000000;--sc-content-success:#008000;--sc-content-caution:#994D00;--sc-content-danger:#990000;--sc-content-disabled:#737373;--sc-content-neutral-primary:#292929;--sc-content-neutral-secondary:#404040;--sc-content-brand-on-primary:#FFFFFF;--sc-content-success-on-primary:#FFFFFF;--sc-content-caution-on-primary:#FFFFFF;--sc-content-danger-on-primary:#FFFFFF;--sc-content-disabled-on-disabled:#737373;--sc-border-neutral:rgba(0,0,0, 0.1);--sc-border-brand:#000000;--sc-border-success:#008000;--sc-border-caution:#CC6600;--sc-border-danger:#CC0000;--sc-border-disabled:#737373}:root{--sc-font-family:sans-serif;--sc-heading-1-font-size:32px;--sc-heading-1-line-height:36px;--sc-heading-1-font-weight:700;--sc-heading-2-font-size:29px;--sc-heading-2-line-height:32px;--sc-heading-2-font-weight:700;--sc-heading-3-font-size:26px;--sc-heading-3-line-height:28px;--sc-heading-3-font-weight:700;--sc-heading-4-font-size:23px;--sc-heading-4-line-height:24px;--sc-heading-4-font-weight:700;--sc-heading-5-font-size:20px;--sc-heading-5-line-height:24px;--sc-heading-5-font-weight:700;--sc-heading-6-font-size:10px;--sc-heading-6-line-height:12px;--sc-heading-6-font-weight:700;--sc-body-bold-font-size:16px;--sc-body-bold-line-height:20px;--sc-body-bold-font-weight:700;--sc-body-font-size:16px;--sc-body-line-height:20px;--sc-body-font-weight:400;--sc-body-small-bold-font-size:12px;--sc-body-small-bold-line-height:16px;--sc-body-small-bold-font-weight:700;--sc-body-small-font-size:12px;--sc-body-small-line-height:16px;--sc-body-small-font-weight:400}:root{--sc-breakpoint-sm:576px;--sc-breakpoint-md:768px;--sc-breakpoint-lg:992px}.searchcraft-results-info-container{border-bottom:1px solid var(--sc-surface-disabled);display:flex;justify-content:flex-start}.searchcraft-results-info-content{color:var(--sc-content-primary);font-family:var(--sc-font-family);font-size:18px;font-weight:600;line-height:20px;margin:0px 0 8px}@media (max-width: 768px){.searchcraft-results-info-content{margin:0;margin-bottom:8px}}";
-const SearchcraftResultsInfoStyle0 = searchcraftResultsInfoModuleCss;
-
 const SearchcraftResultsInfo$1 = /*@__PURE__*/ proxyCustomElement(class SearchcraftResultsInfo extends H {
     constructor() {
         super();
         this.__registerHost();
-        this.isRequesting = false;
-        this.resultsCount = 0;
-        this.responseTime = '';
-        this.query = '';
     }
+    isRequesting = false;
+    resultsCount = 0;
+    responseTime = '';
+    query = '';
+    unsubscribe = () => { };
     connectedCallback() {
         this.unsubscribe = useSearchcraftStore.subscribe((state) => {
-            var _a, _b, _c, _d;
             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.resultsCount = state.searchResults?.data?.count || 0;
+            this.responseTime = ((state.searchResults?.data?.time_taken || 0) * 1000).toFixed(2);
             this.query = state.query || '';
         });
     }
@@ -35,7 +32,6 @@ const SearchcraftResultsInfo$1 = /*@__PURE__*/ proxyCustomElement(class Searchcr
         const formattedResults = formatNumberWithCommas(this.resultsCount);
         return (h("div", { class: 'searchcraft-results-info-container' }, h("p", { class: 'searchcraft-results-info-content' }, formattedResults, " results found in ", this.responseTime, "ms")));
     }
-    static get style() { return SearchcraftResultsInfoStyle0; }
 }, [0, "searchcraft-results-info", {
         "isRequesting": [32],
         "resultsCount": [32],

package/dist/components/searchcraft-results-info.js.map

@@ -1 +1 @@
-{"file":"searchcraft-results-info.js","mappings":";;;;AAAA,MAAM,+BAA+B,GAAG,6rHAA6rH,CAAC;AACtuH,qCAAe,+BAA+B;;MCoBjCA,wBAAsB;IALnC;;;QAMW,iBAAY,GAAG,KAAK,CAAC;QACrB,iBAAY,GAAG,CAAC,CAAC;QACjB,iBAAY,GAAG,EAAE,CAAC;QAClB,UAAK,GAAG,EAAE,CAAC;KAkCrB;IA9BC,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC,KAAK;;YACrD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,CAAC;YACvC,IAAI,CAAC,YAAY,GAAG,CAAA,MAAA,MAAA,KAAK,CAAC,aAAa,0CAAE,IAAI,0CAAE,KAAK,KAAI,CAAC,CAAC;YAC1D,IAAI,CAAC,YAAY,GAAG,CAClB,CAAC,CAAA,MAAA,MAAA,KAAK,CAAC,aAAa,0CAAE,IAAI,0CAAE,UAAU,KAAI,CAAC,IAAI,IAAI,EACnD,OAAO,CAAC,CAAC,CAAC,CAAC;YACb,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;SAChC,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;KACF;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC,EAAE;YAC1C,OAAO,IAAI,CAAC;SACb;QACD,MAAM,gBAAgB,GAAG,sBAAsB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACnE,QACE,WAAK,KAAK,EAAC,oCAAoC,IAC7C,SAAG,KAAK,EAAC,kCAAkC,IACxC,gBAAgB,wBAAoB,IAAI,CAAC,YAAY,OACpD,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SearchcraftResultsInfo"],"sources":["src/components/searchcraft-results-info/searchcraft-results-info.module.scss?tag=searchcraft-results-info","src/components/searchcraft-results-info/searchcraft-results-info.tsx"],"sourcesContent":[".searchcraft-results-info-container {\n  border-bottom: 1px solid var(--sc-surface-disabled);\n  display: flex;\n  justify-content: flex-start;\n}\n\n.searchcraft-results-info-content {\n  color: var(--sc-content-primary);\n  font-family: var(--sc-font-family);\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 20px;\n  margin: 0px 0 8px;\n\n  @media (max-width: $breakpoint-md) {\n    margin: 0;\n    margin-bottom: 8px;\n  }\n}","import { Component, h, State } from '@stencil/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\nimport { formatNumberWithCommas } from '@utils';\n\n/**\n * This web component is designed to display the number of results returned from a search query.\n * It provides users with real-time feedback on the scale of the results, such as the total number of items found.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-results-info />\n * ```\n */\n@Component({\n  tag: 'searchcraft-results-info',\n  styleUrl: 'searchcraft-results-info.module.scss',\n  shadow: false,\n})\nexport class SearchcraftResultsInfo {\n  @State() isRequesting = false;\n  @State() resultsCount = 0;\n  @State() responseTime = '';\n  @State() query = '';\n\n  unsubscribe: () => void;\n\n  connectedCallback() {\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      this.isRequesting = state.isRequesting;\n      this.resultsCount = state.searchResults?.data?.count || 0;\n      this.responseTime = (\n        (state.searchResults?.data?.time_taken || 0) * 1000\n      ).toFixed(2);\n      this.query = state.query || '';\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  render() {\n    if (!this.query || this.resultsCount === 0) {\n      return null;\n    }\n    const formattedResults = formatNumberWithCommas(this.resultsCount);\n    return (\n      <div class='searchcraft-results-info-container'>\n        <p class='searchcraft-results-info-content'>\n          {formattedResults} results found in {this.responseTime}ms\n        </p>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"searchcraft-results-info.js","mappings":";;;;MAoBaA,wBAAsB;;;;;IACxB,YAAY,GAAG,KAAK,CAAC;IACrB,YAAY,GAAG,CAAC,CAAC;IACjB,YAAY,GAAG,EAAE,CAAC;IAClB,KAAK,GAAG,EAAE,CAAC;IAEpB,WAAW,GAAe,SAAQ,CAAC;IAEnC,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC,KAAK;YACrD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,CAAC;YACvC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,aAAa,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC,CAAC;YAC1D,IAAI,CAAC,YAAY,GAAG,CAClB,CAAC,KAAK,CAAC,aAAa,EAAE,IAAI,EAAE,UAAU,IAAI,CAAC,IAAI,IAAI,EACnD,OAAO,CAAC,CAAC,CAAC,CAAC;YACb,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;SAChC,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;KACF;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC,EAAE;YAC1C,OAAO,IAAI,CAAC;SACb;QACD,MAAM,gBAAgB,GAAG,sBAAsB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACnE,QACE,WAAK,KAAK,EAAC,oCAAoC,IAC7C,SAAG,KAAK,EAAC,kCAAkC,IACxC,gBAAgB,wBAAoB,IAAI,CAAC,YAAY,OACpD,CACA,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SearchcraftResultsInfo"],"sources":["src/components/searchcraft-results-info/searchcraft-results-info.tsx"],"sourcesContent":["import { Component, h, State } from '@stencil/core';\n\nimport { useSearchcraftStore } from '@provider/store';\n\nimport { formatNumberWithCommas } from '@utils';\n\n/**\n * This web component is designed to display the number of results returned from a search query.\n * It provides users with real-time feedback on the scale of the results, such as the total number of items found.\n *\n * ## Usage\n * ```html\n * <!-- index.html -->\n * <searchcraft-results-info />\n * ```\n */\n@Component({\n  tag: 'searchcraft-results-info',\n  shadow: false,\n})\nexport class SearchcraftResultsInfo {\n  @State() isRequesting = false;\n  @State() resultsCount = 0;\n  @State() responseTime = '';\n  @State() query = '';\n\n  unsubscribe: () => void = () => {};\n\n  connectedCallback() {\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      this.isRequesting = state.isRequesting;\n      this.resultsCount = state.searchResults?.data?.count || 0;\n      this.responseTime = (\n        (state.searchResults?.data?.time_taken || 0) * 1000\n      ).toFixed(2);\n      this.query = state.query || '';\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  render() {\n    if (!this.query || this.resultsCount === 0) {\n      return null;\n    }\n    const formattedResults = formatNumberWithCommas(this.resultsCount);\n    return (\n      <div class='searchcraft-results-info-container'>\n        <p class='searchcraft-results-info-content'>\n          {formattedResults} results found in {this.responseTime}ms\n        </p>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/searchcraft-slider.js

@@ -1,4 +1,4 @@
-import { S as SearchcraftSlider$1, d as defineCustomElement$1 } from './p-cc9f8c61.js';
+import { S as SearchcraftSlider$1, d as defineCustomElement$1 } from './p-4b92ae26.js';
 
 const SearchcraftSlider = SearchcraftSlider$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/searchcraft-theme.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SearchcraftTheme extends Components.SearchcraftTheme, HTMLElement {}
+export const SearchcraftTheme: {
+    prototype: SearchcraftTheme;
+    new (): SearchcraftTheme;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/searchcraft-theme.js

@@ -0,0 +1,51 @@
+import { p as proxyCustomElement, H } from './p-5365011f.js';
+
+const styles = `:root{--sc-font-family: sans-serif;--sc-heading-1-font-size: 32px;--sc-heading-1-line-height: 36px;--sc-heading-1-font-weight: 700;--sc-heading-2-font-size: 29px;--sc-heading-2-line-height: 32px;--sc-heading-2-font-weight: 700;--sc-heading-3-font-size: 26px;--sc-heading-3-line-height: 28px;--sc-heading-3-font-weight: 700;--sc-heading-4-font-size: 23px;--sc-heading-4-line-height: 24px;--sc-heading-4-font-weight: 700;--sc-heading-5-font-size: 20px;--sc-heading-5-line-height: 24px;--sc-heading-5-font-weight: 700;--sc-heading-6-font-size: 10px;--sc-heading-6-line-height: 12px;--sc-heading-6-font-weight: 700;--sc-body-bold-font-size: 16px;--sc-body-bold-line-height: 20px;--sc-body-bold-font-weight: 700;--sc-body-font-size: 16px;--sc-body-line-height: 20px;--sc-body-font-weight:400;--sc-body-small-bold-font-size: 12px;--sc-body-small-bold-line-height: 16px;--sc-body-small-bold-font-weight: 700;--sc-body-small-font-size: 12px;--sc-body-small-line-height: 16px;--sc-body-small-font-weight: 400}:root{--sc-input-border-radius: 8px;--sc-input-search-icon-size: 20px;--sc-input-clear-icon-size: 20px;--sc-input-padding-left: 44px;--sc-input-padding-right: 44px;--sc-image-border-radius: 8px;--sc-popover-form-border-radius: 8px;--sc-popover-list-view-height: 400px;--sc-popover-list-item-image-size: 60px;--sc-popover-list-item-padding-horizontal: 8px;--sc-popover-list-item-padding-vertical: 8px;--sc-popover-modal-max-width: 570px}:root{--sc-breakpoint-sm: 576px;--sc-breakpoint-md: 768px;--sc-breakpoint-lg: 992px}:root{--sc-surface-disabled: #D9D9D9;--sc-surface-neutral-primary: #FFFFFF;--sc-surface-neutral-secondary: #F3F3F3;--sc-surface-neutral-light: #FFFFFF;--sc-surface-neutral-primary-hover: #FAFAFA;--sc-surface-neutral-primary-active: #F7F7F7;--sc-surface-neutral-secondary-hover: #EDEDED;--sc-surface-neutral-secondary-active: #E6E6E6;--sc-surface-brand-primary: #000000;--sc-surface-brand-secondary: #E6E6E6;--sc-surface-brand-primary-hover: #2E2E2E;--sc-surface-brand-primary-active: #292929;--sc-surface-brand-secondary-hover: #EBEBEB;--sc-surface-brand-secondary-active: #E0E0E0;--sc-surface-success-primary: #008000;--sc-surface-success-secondary: #CCFFCC;--sc-surface-success-primary-hover: #009900;--sc-surface-success-primary-active: #006600;--sc-surface-success-secondary-hover: #E6FFE6;--sc-surface-success-secondary-active: #E6FFE6;--sc-surface-caution-primary: #CC6600;--sc-surface-caution-secondary: #FFD9B3;--sc-surface-caution-primary-hover: #E57300;--sc-surface-caution-primary-active: #B25A00;--sc-surface-caution-secondary-hover: #FFE5CC;--sc-surface-caution-secondary-active: #FFCC99;--sc-surface-danger-primary: #CC0000;--sc-surface-danger-secondary: #FFCCCC;--sc-surface-danger-primary-hover: #E50000;--sc-surface-danger-primary-active: #B30000;--sc-surface-danger-secondary-hover: #FFE7E7;--sc-surface-danger-secondary-active: #FFB3B3;--sc-content-brand: #000000;--sc-content-success: #008000;--sc-content-caution: #994D00;--sc-content-danger: #990000;--sc-content-disabled: #737373;--sc-content-neutral-primary: #292929;--sc-content-neutral-secondary: #404040;--sc-content-brand-on-primary: #FFFFFF;--sc-content-success-on-primary: #FFFFFF;--sc-content-caution-on-primary: #FFFFFF;--sc-content-danger-on-primary: #FFFFFF;--sc-content-disabled-on-disabled: #737373;--sc-border-neutral: rgba(0,0,0, 0.1);--sc-border-brand: #000000;--sc-border-success: #008000;--sc-border-caution: #CC6600;--sc-border-danger: #CC0000;--sc-border-disabled: #737373}.searchcraft-search-result-container{all:unset;align-items:flex-start;border-radius:16px;display:flex;flex-direction:column;gap:16px;padding:8px;color:inherit;background-color:var(--sc-surface-neutral-primary)}@media(min-width: 768px){.searchcraft-search-result-container{flex-direction:row}}a.searchcraft-search-result-container{cursor:pointer;transition:background-color 100ms}.searchcraft-base-search-result-content-container{flex:1;display:flex;flex-direction:column;gap:8px}.searchcraft-search-result-image{border-radius:var(--sc-image-border-radius);width:100%}@media(min-width: 768px){.searchcraft-search-result-image{width:200px}}.searchcraft-base-search-result-title{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-bold-font-size);font-weight:var(--sc-body-bold-font-weight);line-height:var(--sc-body-bold-line-height);margin:0;color:var(--sc-content-neutral-primary)}.searchcraft-base-search-result-subtitle{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-small-font-size);font-weight:var(--sc-body-small-font-weight);line-height:var(--sc-body-small-line-height);margin:0;color:var(--sc-content-disabled)}.searchcraft-base-search-result-body-content{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-font-size);font-weight:var(--sc-body-font-weight);line-height:var(--sc-body-line-height);margin:0;color:var(--sc-content-neutral-secondary)}.searchcraft-base-search-result-footer-content{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-font-size);font-weight:var(--sc-body-font-weight);line-height:var(--sc-body-line-height);margin:0;color:var(--sc-content-disabled)}.searchcraft-search-results-container{display:flex;flex-direction:column;justify-content:center;gap:16px}.searchcraft-ad-section{align-items:center;background-color:#f1f1f1;border-radius:16px;display:flex;flex-direction:column;font-size:16px;justify-content:center;min-height:176px;text-align:center}.searchcraft-ad-section p{margin:0;color:var(--sc-content-disabled)}.searchcraft-search-results-empty-state-container{text-align:center}.searchcraft-search-results-error-message-container{text-align:center}.searchcraft-button{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-bold-font-size);font-weight:var(--sc-body-bold-font-weight);line-height:var(--sc-body-bold-line-height);border-radius:8px;display:flex;padding:12px 20px;position:relative;background-color:var(--sc-surface-brand-primary);border:1px solid var(--sc-border-primary);color:var(--sc-content-brand-on-primary)}.searchcraft-button:hover{cursor:pointer;background-color:var(--sc-surface-brand-primary-hover)}.searchcraft-button:focus{outline:2px solid var(--sc-surface-brand-primary)}.buttonLabel{position:relative}.searchcraft-error-message{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-small-font-size);font-weight:var(--sc-body-small-font-weight);line-height:var(--sc-body-small-line-height);color:var(--sc-content-danger);margin:0}.filtersListContainer{width:100%}.filterCheckboxLabel{align-items:center;color:var(--sc-content-primary);display:flex;font-family:var(--sc-font-family);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:var(--sc-surface-brand-secondary-hover);border:1px solid var(--sc-surface-disabled);border-radius:8px;cursor:pointer;display:flex;height:24px;justify-content:center;width:24px}.filterCheckboxLabel input[type=checkbox]:focus{outline:2px solid var(--sc-surface-brand-primary)}.filterCheckboxLabel input[type=checkbox]:checked{background-color:var(--sc-surface-brand-primary);position:relative}.filterCheckboxLabel input[type=checkbox]:checked+.checkContainer{display:block}.filterCheckboxLabel input[type=checkbox]:checked+.dashContainer{display:block}.childFilterCheckboxLabel{align-items:center;color:var(--sc-content-primary);display:flex;font-family:var(--sc-font-family);font-size:14px;font-weight:600;gap:12px;margin-left:24px;position:relative}.childFilterCheckboxLabel input[type=checkbox]{align-items:center;appearance:none;background-color:var(--sc-surface-brand-secondary-hover);border:1px solid var(--sc-surface-disabled);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 var(--sc-surface-brand-primary)}.childFilterCheckboxLabel input[type=checkbox]:checked{background-color:var(--sc-surface-brand-primary);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}.searchcraft-facet-message{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-small-font-size);font-weight:var(--sc-body-small-font-weight);line-height:var(--sc-body-small-line-height);color:var(--sc-content-disabled);text-align:center}.searchcraft-filter-panel{display:flex;flex-direction:column;gap:16px}.searchcraft-filter-panel-section{display:flex;flex-direction:column;gap:8px}.searchcraft-filter-panel-label{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-small-bold-font-size);font-weight:var(--sc-body-small-bold-font-weight);line-height:var(--sc-body-small-bold-line-height)}.searchcraft-input-grid{display:grid;gap:4px 8px}.searchcraft-input-grid-buttonLeft{grid-template-rows:repeat(3, auto);grid-template-columns:auto 1fr}.searchcraft-input-grid-buttonLeft .searchcraft-input-button-wrapper{grid-column:1/span 1;grid-row:2/span 1}.searchcraft-input-grid-buttonLeft .searchcraft-input-label-wrapper{grid-column:2/span 1;grid-row:1/span 1}.searchcraft-input-grid-buttonLeft .searchcraft-input-error-wrapper{grid-column:2/span 1;grid-row:3/span 1}.searchcraft-input-grid-buttonLeft .searchcraft-input-wrapper{grid-column:2/span 1;grid-row:2/span 1}.searchcraft-input-grid-buttonRight{grid-template-rows:repeat(3, auto);grid-template-columns:1fr auto}.searchcraft-input-grid-buttonRight .searchcraft-input-button-wrapper{grid-column:2/span 1;grid-row:2/span 1}.searchcraft-input-grid-buttonRight .searchcraft-input-label-wrapper{grid-column:1/span 1;grid-row:1/span 1}.searchcraft-input-grid-buttonRight .searchcraft-input-error-wrapper{grid-column:1/span 1;grid-row:3/span 1}.searchcraft-input-grid-buttonRight .searchcraft-input-wrapper{grid-column:1/span 1;grid-row:2/span 1}.searchcraft-input-grid-buttonNone{grid-template-rows:repeat(3, auto);grid-template-columns:auto}.searchcraft-input-grid-buttonNone .searchcraft-input-button-wrapper{display:none}.searchcraft-input-grid-buttonNone .searchcraft-input-label-wrapper{grid-column:1/span 1;grid-row:1/span 1}.searchcraft-input-grid-buttonNone .searchcraft-input-error-wrapper{grid-column:1/span 1;grid-row:3/span 1}.searchcraft-input-grid-buttonNone .searchcraft-input-wrapper{grid-column:1/span 1;grid-row:2/span 1}.searchcraft-input-wrapper{position:relative;display:flex}.searchcraft-input{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-font-size);font-weight:var(--sc-body-font-weight);line-height:var(--sc-body-line-height);background-color:var(--sc-surface-neutral-secondary);border-radius:var(--sc-input-border-radius);border:none;color:var(--sc-content-neutral-primary);outline:none;padding-left:var(--sc-input-padding-left);padding-right:var(--sc-input-padding-right);padding-top:12px;padding-bottom:12px;flex:1}.searchcraft-input::placeholder{color:var(--sc-content-disabled)}.searchcraft-input:focus{outline:var(--sc-border-brand) solid 2px}.searchcraft-input:focus::placeholder{opacity:0}.searchcraft-input.error{color:var(--sc-content-danger);outline:var(--sc-border-danger) solid 2px}.searchcraft-input.error:focus{outline:var(--sc-border-danger) solid 2px}.searchcraft-input-search-icon-wrapper{align-items:center;justify-content:center;display:flex;position:absolute;pointer-events:none;bottom:0;left:0;top:0;width:var(--sc-input-padding-left)}.searchcraft-input-search-icon{pointer-events:none;width:var(--sc-input-search-icon-size);height:var(--sc-input-search-icon-size)}.searchcraft-input-clear-button{all:unset;align-items:center;justify-content:center;cursor:pointer;display:flex;position:absolute;border:none;outline:none;bottom:0;right:0;top:0;width:var(--sc-input-padding-right)}.searchcraft-input-clear-icon{width:var(--sc-input-clear-icon-size);height:var(--sc-input-clear-icon-size)}.searchcraft-input-label{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-small-bold-font-size);font-weight:var(--sc-body-small-bold-font-weight);line-height:var(--sc-body-small-bold-line-height);color:var(--sc-content-neutral-primary);margin-top:4px;margin-bottom:4px}.searchcraft-popover-form{display:flex;flex-direction:column;flex:1}.searchcraft-popover-form .searchcraft-popover-form-input-wrapper{padding:12px;background-color:var(--sc-surface-neutral-secondary);display:flex;flex-direction:row;gap:4px}.searchcraft-popover-form .searchcraft-popover-form-input-wrapper>searchcraft-input-form{flex:1}.searchcraft-popover-form .searchcraft-popover-form-cancel-button{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-font-size);font-weight:var(--sc-body-font-weight);line-height:var(--sc-body-line-height);border:0;outline:0;padding:0;flex-shrink:0;background:none;cursor:pointer;padding-left:12px;padding-right:12px;border-radius:calc(var(--sc-popover-form-border-radius)*.8)}.searchcraft-popover-form .searchcraft-popover-form-cancel-button:hover{background-color:var(--sc-surface-brand-secondary-hover)}.searchcraft-popover-form .searchcraft-popover-form-cancel-button:focus{background-color:var(--sc-surface-brand-secondary-active)}.searchcraft-popover-form-inline .searchcraft-input{border-top-left-radius:var(--sc-popover-form-border-radius);border-top-right-radius:var(--sc-popover-form-border-radius);border-bottom-left-radius:var(--sc-popover-form-border-radius);border-bottom-right-radius:var(--sc-popover-form-border-radius);border:none;outline:none}.searchcraft-popover-form-inline.searchcraft-popover-form-active .searchcraft-input{border-top-left-radius:var(--sc-popover-form-border-radius);border-top-right-radius:var(--sc-popover-form-border-radius);border-bottom-left-radius:0;border-bottom-right-radius:0}.searchcraft-popover-form-inline .searchcraft-popover-inline-wrapper-outer{position:relative}.searchcraft-popover-form-inline .searchcraft-popover-inline-wrapper-inner{position:absolute;height:var(--sc-popover-list-view-height);z-index:1000;width:100%}.searchcraft-popover-form-inline .searchcraft-popover-list-view{display:flex;flex-direction:column;overflow:auto;background-color:var(--sc-surface-neutral-secondary);border-bottom-left-radius:var(--sc-popover-form-border-radius);border-bottom-right-radius:var(--sc-popover-form-border-radius);max-height:var(--sc-popover-list-view-height)}.searchcraft-popover-form-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:0;background-color:var(--sc-surface-neutral-secondary)}@media(min-width: 576px){.searchcraft-popover-form-modal{padding:16px;background-color:rgba(0,0,0,0)}}.searchcraft-popover-form-modal .searchcraft-input{border-radius:calc(var(--sc-popover-form-border-radius)*.8);outline-width:1px;outline-color:var(--sc-border-neutral)}.searchcraft-popover-form-modal .searchcraft-popover-form-modal-backdrop{position:absolute;inset:0;background-color:rgba(0,0,0,.5);display:none}@media(min-width: 576px){.searchcraft-popover-form-modal .searchcraft-popover-form-modal-backdrop{display:block}}.searchcraft-popover-form-modal .searchcraft-popover-form-modal-inner{position:absolute;inset:0;z-index:1002;margin-top:0px;display:flex;border-radius:var(--sc-popover-form-border-radius);overflow:hidden}@media(min-width: 576px){.searchcraft-popover-form-modal .searchcraft-popover-form-modal-inner{inset:auto;position:relative;width:100%;margin-top:100px;max-width:var(--sc-popover-modal-max-width)}}.searchcraft-popover-form-modal .searchcraft-popover-list-view{display:flex;flex-direction:column;overflow:auto;background-color:var(--sc-surface-neutral-secondary);border-bottom-left-radius:0;border-bottom-right-radius:0}@media(min-width: 576px){.searchcraft-popover-form-modal .searchcraft-popover-list-view{max-height:var(--sc-popover-list-view-height)}}.searchcraft-popover-form-modal searchcraft-popover-list-view{overflow:scroll}@media(min-width: 576px){.searchcraft-popover-form-modal searchcraft-popover-list-view{overflow:auto}}.searchcraft-popover-form-fullscreen{position:fixed;inset:0;z-index:1000;background-color:var(--sc-surface-neutral-secondary)}.searchcraft-popover-form-fullscreen .searchcraft-popover-form{position:absolute;inset:0}.searchcraft-popover-form-fullscreen .searchcraft-input{border-radius:calc(var(--sc-popover-form-border-radius)*.8);outline-width:1px;outline-color:var(--sc-border-neutral)}.searchcraft-popover-form-fullscreen searchcraft-popover-list-view{overflow:scroll}.searchcraft-popover-list-item{all:unset;display:flex;flex-direction:row;cursor:pointer;gap:8px;padding-right:var(--sc-popover-list-item-padding-horizontal);padding-left:var(--sc-popover-list-item-padding-horizontal);padding-top:var(--sc-popover-list-item-padding-vertical);padding-bottom:var(--sc-popover-list-item-padding-vertical)}.searchcraft-popover-list-item:focus{background-color:var(--sc-surface-neutral-secondary-active);color:var(--sc-content-neutral-secondary)}.searchcraft-popover-list-item:hover{background-color:var(--sc-surface-neutral-secondary-hover);color:var(--sc-content-neutral-secondary)}.searchcraft-popover-list-item-title{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-font-size);font-weight:var(--sc-body-font-weight);line-height:var(--sc-body-line-height);margin:0;color:inherit}.searchcraft-popover-list-item-subtitle{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-small-font-size);font-weight:var(--sc-body-small-font-weight);line-height:var(--sc-body-small-line-height);margin:0;color:inherit}.searchcraft-popover-list-item-image-wrapper{width:var(--sc-popover-list-item-image-size);height:var(--sc-popover-list-item-image-size);display:flex;align-items:center;justify-content:center;flex-shrink:0}.searchcraft-popover-list-item-image{max-width:var(--sc-popover-list-item-image-size);max-height:var(--sc-popover-list-item-image-size)}.searchcraft-popover-list-item-info-wrapper{display:flex;flex-direction:column;gap:8px;justify-content:center}.searchcraft-results-info-container{border-bottom:1px solid var(--sc-surface-disabled);display:flex;justify-content:flex-start}.searchcraft-results-info-content{color:var(--sc-content-primary);font-family:var(--sc-font-family);font-size:18px;font-weight:600;line-height:20px;margin:0px 0 8px}@media(max-width: 768px){.searchcraft-results-info-content{margin:0;margin-bottom:8px}}.searchcraft-slider-container{align-items:center;display:flex;flex-direction:column;gap:10px;width:100%}.searchcraft-slider-range-container{align-items:center;background-color:var(--sc-surface-disabled);border-radius:999px;display:flex;position:relative;height:4px;width:100%}.searchcraft-slider-range-container::-webkit-slider-runnable-track{pointer-events:none}.searchcraft-slider-range-container .searchcraft-slider-active-range{background-color:var(--sc-surface-brand-primary);border-radius:2px;height:4px;position:absolute;top:50%;transform:translateY(-50%);z-index:0}.searchcraft-slider-range-container .searchcraft-slider-active-range::-webkit-slider-runnable-track{pointer-events:none}.searchcraft-slider-range-container .searchcraft-slider-active-range::-moz-range-track{pointer-events:none}.searchcraft-slider-range-container .searchcraft-slider-input{appearance:none;background:rgba(0,0,0,0);border-radius:2px;height:4px;margin:0;outline:none;pointer-events:none;position:absolute;width:100%;-webkit-appearance:none}.searchcraft-slider-range-container .searchcraft-slider-input::-webkit-slider-thumb{background-color:var(--sc-surface-neutral-light);border-radius:50%;border:2px solid var(--sc-border-neutral);cursor:pointer;height:20px;pointer-events:all;width:20px;-webkit-appearance:none}.searchcraft-slider-range-container .searchcraft-slider-input::-moz-range-thumb{background-color:var(--sc-surface-neutral-light);border-radius:50%;border:2px solid var(--sc-border-neutral);cursor:pointer;height:20px;pointer-events:all;width:20px}.searchcraft-slider-label-container{color:var(--sc-content-primary);display:flex;font-family:"Source Sans Pro",sans-serif;font-size:15px;font-weight:600;justify-content:space-between;margin-top:10px;width:100%}.searchcraft-slider-label{min-width:30px;text-align:center}.searchcraft-toggle-button-container{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.searchcraft-toggle-button-label{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-font-size);font-weight:var(--sc-body-font-weight);line-height:var(--sc-body-line-height);margin:0;color:var(--sc-content-neutral-primary)}.searchcraft-toggle-button-sub-label{font-family:var(--sc-font-family);-webkit-font-smoothing:antialiased;font-size:var(--sc-body-small-font-size);font-weight:var(--sc-body-small-font-weight);line-height:var(--sc-body-small-line-height);margin:0;color:var(--sc-content-neutral-secondary)}.searchcraft-toggle-button-background{transition:background-color .2s;background:var(--sc-surface-disabled);border:none;border-radius:16px;cursor:pointer;height:26px;position:relative;width:44px;flex-shrink:0}.searchcraft-toggle-button-background.active{background:var(--sc-surface-brand-primary);box-shadow:0px 0px 0px 1px rgba(0,0,0,.05)}.searchcraft-toggle-button-handle{background:var(--sc-surface-neutral-light);border-radius:50%;height:18px;left:4px;position:absolute;top:calc(50% - 9px);transition:transform .3s ease;width:18px}.searchcraft-toggle-button-handle.active{transform:translateX(16px)}/*# sourceMappingURL=hologram.css.map */
+`;
+
+const SearchcraftErrorMessage = /*@__PURE__*/ proxyCustomElement(class SearchcraftErrorMessage extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    componentDidLoad() {
+        console.log('Loading theme...');
+        console.log(styles);
+        const styleTag = document.querySelector('#searchcraft-theme') ||
+            document.createElement('style');
+        styleTag.innerHTML = styles;
+        styleTag.id = 'searchcraft-theme';
+        const head = document.head || document.getElementsByTagName('head')[0];
+        if (!head.contains(styleTag)) {
+            if (head.firstChild) {
+                head.insertBefore(styleTag, head.firstChild);
+            }
+            else {
+                head.appendChild(styleTag);
+            }
+        }
+    }
+    render() {
+        return;
+    }
+}, [0, "searchcraft-theme"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["searchcraft-theme"];
+    components.forEach(tagName => { switch (tagName) {
+        case "searchcraft-theme":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SearchcraftErrorMessage);
+            }
+            break;
+    } });
+}
+
+const SearchcraftTheme = SearchcraftErrorMessage;
+const defineCustomElement = defineCustomElement$1;
+
+export { SearchcraftTheme, defineCustomElement };
+
+//# sourceMappingURL=searchcraft-theme.js.map