@searchcraft/javascript-sdk 0.1.2 → 0.1.4

package/dist/collection/components/searchcraft-base-search-result/searchcraft-base-search-result.js

@@ -22,16 +22,26 @@ export class SearchcraftBaseSearchResult {
         this.headingText = '';
         this.subheadingText = '';
         this.themeMode = 'light';
-        this.customStyles = {};
+        this.customStyles = '{}';
+    }
+    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    parseStyles() {
+        try {
+            return JSON.parse(this.customStyles);
+        }
+        catch (error) {
+            console.error('Error parsing custom styles:', error);
+            return {};
+        }
     }
     render() {
         const isLightTheme = this.themeMode === 'light';
-        const containerStyle = Object.assign({}, this.customStyles);
-        return (h("div", { key: '512b19a2637993cd71fe9b0ac1557106f8501cf2', class: this.isInteractive
+        const styles = this.parseStyles();
+        return (h("div", { key: '096a8c89cb39b5dca0949b11981747b55c6f374f', class: this.isInteractive
                 ? isLightTheme
                     ? 'interactiveResultContainerLight'
                     : 'interactiveResultContainerDark'
-                : 'resultContainer', id: 'searchcraft-item', onClick: this.handleContainerClick, onKeyDown: this.keyDownCallback, style: containerStyle, tabindex: '0' }, this.isInteractive && (h("div", { key: '735b5c931e6bb209cb948d1a4834f689c836528c', class: 'interactiveIconLarge' }, isLightTheme ? (h("searchcraft-clear-icon-set", { type: 'arrow-light' })) : (h("searchcraft-clear-icon-set", { type: 'arrow-dark' })))), h("div", { key: 'd864f312cc779cb52f7f4529691f32b2460a38c1', class: 'imageContainer' }, h("img", { key: 'b705f3ebaa1c02e0a80c181c0cb9e6c5afd1b10c', alt: this.imageDescription, class: isLightTheme ? 'imageLight' : 'imageDark', src: this.imageSource })), h("div", { key: 'da90f1ba12456a8a25c5983e1061fba917632ebf', class: 'contentContainer' }, h("h2", { key: '27af1079e7b12025a96cc0ac890dc9a2516bfa4a', class: isLightTheme ? 'headingLight' : 'headingDark' }, this.headingText, this.isInteractive && (h("div", { key: 'da3f8e81bb039fb68b1afb8e3656ce04adc552ba', class: 'interactiveIconSmall' }, isLightTheme ? (h("searchcraft-clear-icon-set", { type: 'arrow-light' })) : (h("searchcraft-clear-icon-set", { type: 'arrow-dark' }))))), h("h3", { key: 'f62cd5e67cdf03286387061ed944504ac1b0e0d2', class: isLightTheme ? 'subheadingLight' : 'subheadingDark' }, this.subheadingText), h("p", { key: 'b8024831da3be09abfb758370e25b42a7d9e8517', class: isLightTheme ? 'primaryContentLight' : 'primaryContentDark' }, this.primaryContent), h("p", { key: 'b9a847323f17b8cda2c8de170c9308359f113cfd', class: isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark' }, this.secondaryContent), h("p", { key: 'cda9259099171541f59fcf6ab4524d4ba3d40f29', class: isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark' }, this.tertiaryContent), this.buttonText && (h("button", { key: 'f527dad1a614f3bf54d8ce724f374423013f8ca2', onClick: this.handleButtonClick, type: 'button' }, this.buttonText)))));
+                : 'resultContainer', style: styles.container || {}, tabindex: '0', onClick: this.handleContainerClick, onKeyDown: this.keyDownCallback }, h("div", { key: '91eb80e1c2e68c148e12bd6046bcfbe190c2560f', class: 'imageContainer' }, h("img", { key: 'e83722c85e2b32d359c702f968cdb9e84aab5f04', alt: this.imageDescription, src: this.imageSource, style: styles.image || {}, class: isLightTheme ? 'imageLight' : 'imageDark' })), h("div", { key: '7450df6c0f77ccccd74d23d05e0b8bc4b3211189', class: 'contentContainer' }, h("h2", { key: '480ae0e87ecdcb2bc93551a2bc8288ad38472128', style: styles.heading || {}, class: isLightTheme ? 'headingLight' : 'headingDark' }, this.headingText), h("h3", { key: '67a6e12968a53bcb3e6cb96a020cdbf69d5b66b4', style: styles.subheading || {}, class: isLightTheme ? 'subheadingLight' : 'subheadingDark' }, this.subheadingText), h("p", { key: '9ebc20428528e0abafa5c31f13e32aeb23f95648', style: styles.primaryContent || {}, class: isLightTheme ? 'primaryContentLight' : 'primaryContentDark' }, this.primaryContent), h("p", { key: '6e2d3491d45056f1a9805477d003938c22d5119b', style: styles.secondaryContent || {}, class: isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark' }, this.secondaryContent), h("p", { key: 'f1eed685d08cfc64a01f350940bbdfc2722ab4a2', style: styles.tertiaryContent || {}, class: isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark' }, this.tertiaryContent), this.buttonText && (h("button", { key: 'c53407c532f7c70e898cf025e1279f2081a7fb74', onClick: this.handleButtonClick, style: styles.button || {}, type: 'button' }, this.buttonText)))));
     }
     static get is() { return "searchcraft-base-search-result"; }
     static get encapsulation() { return "shadow"; }
@@ -228,17 +238,12 @@ export class SearchcraftBaseSearchResult {
                 "defaultValue": "'light'"
             },
             "customStyles": {
-                "type": "unknown",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "Record<string, string>",
-                    "resolved": "{ [x: string]: string; }",
-                    "references": {
-                        "Record": {
-                            "location": "global",
-                            "id": "global::Record"
-                        }
-                    }
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
@@ -246,7 +251,9 @@ export class SearchcraftBaseSearchResult {
                     "tags": [],
                     "text": ""
                 },
-                "defaultValue": "{}"
+                "attribute": "custom-styles",
+                "reflect": false,
+                "defaultValue": "'{}'"
             }
         };
     }

package/dist/collection/components/searchcraft-base-search-result/searchcraft-base-search-result.js.map

@@ -1 +1 @@
-{"version":3,"file":"searchcraft-base-search-result.js","sourceRoot":"","sources":["../../../src/components/searchcraft-base-search-result/searchcraft-base-search-result.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'searchcraft-base-search-result',\n  styleUrl: 'searchcraft-base-search-result.module.scss',\n  shadow: true,\n})\nexport class SearchcraftBaseSearchResult {\n  @Prop() buttonText = ''; // Label for the button\n  @Prop() imageDescription = ''; // Alternative text for the image\n  @Prop() imageSource = ''; // Source URL for the image\n  @Prop() isInteractive = false; // Determines if the result is interactive\n  @Prop() primaryContent = ''; // Primary body content\n  @Prop() secondaryContent = ''; // Secondary body content\n  @Prop() tertiaryContent = ''; // Tertiary body content\n  @Prop() headingText = ''; // Text for the heading\n  @Prop() subheadingText = ''; // Text for the subheading\n  @Prop() themeMode: 'light' | 'dark' = 'light'; // Light or dark theme context\n  @Prop() customStyles: Record<string, string> = {}; // Custom styles passed from parent\n\n  @Event() buttonCallback: () => void = () => {}; // Callback for button click\n  @Event() keyDownCallback: () => void = () => {}; // Callback for key down event\n  @Event() resultCallback: () => void = () => {}; // Callback for result container click\n\n  private handleButtonClick = () => {\n    this.buttonCallback();\n  };\n\n  private handleContainerClick = () => {\n    if (this.isInteractive) {\n      this.resultCallback();\n    }\n  };\n\n  render() {\n    const isLightTheme = this.themeMode === 'light';\n    const containerStyle = { ...this.customStyles };\n    return (\n      <div\n        class={\n          this.isInteractive\n            ? isLightTheme\n              ? 'interactiveResultContainerLight'\n              : 'interactiveResultContainerDark'\n            : 'resultContainer'\n        }\n        id='searchcraft-item'\n        onClick={this.handleContainerClick}\n        onKeyDown={this.keyDownCallback}\n        style={containerStyle}\n        tabindex='0'\n      >\n        {this.isInteractive && (\n          <div class='interactiveIconLarge'>\n            {isLightTheme ? (\n              <searchcraft-clear-icon-set type='arrow-light' />\n            ) : (\n              <searchcraft-clear-icon-set type='arrow-dark' />\n            )}\n          </div>\n        )}\n        <div class='imageContainer'>\n          <img\n            alt={this.imageDescription}\n            class={isLightTheme ? 'imageLight' : 'imageDark'}\n            src={this.imageSource}\n          />\n        </div>\n        <div class='contentContainer'>\n          <h2 class={isLightTheme ? 'headingLight' : 'headingDark'}>\n            {this.headingText}\n            {this.isInteractive && (\n              <div class='interactiveIconSmall'>\n                {isLightTheme ? (\n                  <searchcraft-clear-icon-set type='arrow-light' />\n                ) : (\n                  <searchcraft-clear-icon-set type='arrow-dark' />\n                )}\n              </div>\n            )}\n          </h2>\n          <h3 class={isLightTheme ? 'subheadingLight' : 'subheadingDark'}>\n            {this.subheadingText}\n          </h3>\n          <p\n            class={isLightTheme ? 'primaryContentLight' : 'primaryContentDark'}\n          >\n            {this.primaryContent}\n          </p>\n          <p\n            class={\n              isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark'\n            }\n          >\n            {this.secondaryContent}\n          </p>\n          <p\n            class={\n              isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark'\n            }\n          >\n            {this.tertiaryContent}\n          </p>\n          {this.buttonText && (\n            <button onClick={this.handleButtonClick} type='button'>\n              {this.buttonText}\n            </button>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"searchcraft-base-search-result.js","sourceRoot":"","sources":["../../../src/components/searchcraft-base-search-result/searchcraft-base-search-result.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'searchcraft-base-search-result',\n  styleUrl: 'searchcraft-base-search-result.module.scss',\n  shadow: true,\n})\nexport class SearchcraftBaseSearchResult {\n  @Prop() buttonText = ''; // Label for the button\n  @Prop() imageDescription = ''; // Alternative text for the image\n  @Prop() imageSource = ''; // Source URL for the image\n  @Prop() isInteractive = false; // Determines if the result is interactive\n  @Prop() primaryContent = ''; // Primary body content\n  @Prop() secondaryContent = ''; // Secondary body content\n  @Prop() tertiaryContent = ''; // Tertiary body content\n  @Prop() headingText = ''; // Text for the heading\n  @Prop() subheadingText = ''; // Text for the subheading\n  @Prop() themeMode: 'light' | 'dark' = 'light'; // Light or dark theme context\n  @Prop() customStyles = '{}'; // New string prop for serialized styles.\n\n  @Event() buttonCallback: () => void = () => {}; // Callback for button click\n  @Event() keyDownCallback: () => void = () => {}; // Callback for key down event\n  @Event() resultCallback: () => void = () => {}; // Callback for result container click\n\n  private handleButtonClick = () => {\n    this.buttonCallback();\n  };\n\n  private handleContainerClick = () => {\n    if (this.isInteractive) {\n      this.resultCallback();\n    }\n  };\n\n  // biome-ignore lint/suspicious/noExplicitAny: <explanation>\n  private parseStyles(): Record<string, any> {\n    try {\n      return JSON.parse(this.customStyles);\n    } catch (error) {\n      console.error('Error parsing custom styles:', error);\n      return {};\n    }\n  }\n\n  render() {\n    const isLightTheme = this.themeMode === 'light';\n    const styles = this.parseStyles();\n\n    return (\n      <div\n        class={\n          this.isInteractive\n            ? isLightTheme\n              ? 'interactiveResultContainerLight'\n              : 'interactiveResultContainerDark'\n            : 'resultContainer'\n        }\n        style={styles.container || {}}\n        tabindex='0'\n        onClick={this.handleContainerClick}\n        onKeyDown={this.keyDownCallback}\n      >\n        <div class='imageContainer'>\n          <img\n            alt={this.imageDescription}\n            src={this.imageSource}\n            style={styles.image || {}}\n            class={isLightTheme ? 'imageLight' : 'imageDark'}\n          />\n        </div>\n        <div class='contentContainer'>\n          <h2\n            style={styles.heading || {}}\n            class={isLightTheme ? 'headingLight' : 'headingDark'}\n          >\n            {this.headingText}\n          </h2>\n          <h3\n            style={styles.subheading || {}}\n            class={isLightTheme ? 'subheadingLight' : 'subheadingDark'}\n          >\n            {this.subheadingText}\n          </h3>\n          <p\n            style={styles.primaryContent || {}}\n            class={isLightTheme ? 'primaryContentLight' : 'primaryContentDark'}\n          >\n            {this.primaryContent}\n          </p>\n          <p\n            style={styles.secondaryContent || {}}\n            class={\n              isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark'\n            }\n          >\n            {this.secondaryContent}\n          </p>\n          <p\n            style={styles.tertiaryContent || {}}\n            class={\n              isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark'\n            }\n          >\n            {this.tertiaryContent}\n          </p>\n          {this.buttonText && (\n            <button\n              onClick={this.handleButtonClick}\n              style={styles.button || {}}\n              type='button'\n            >\n              {this.buttonText}\n            </button>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/searchcraft-base-search-results/searchcraft-base-search-results.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { useSearchcraftStore } from "../../provider/store";
-import { extractDynamicProperties, parseCustomStyles, parseSearchKeys, } from "../../utils/utils";
+import { extractDynamicProperties, parseSearchKeys, serializeStyles, } from "../../utils/utils";
 export class SearchcraftBaseSearchResults {
     constructor() {
         this.query = '';
@@ -9,17 +9,14 @@ export class SearchcraftBaseSearchResults {
         this.customStylesForResults = {};
     }
     componentDidLoad() {
-        // Initialize searchKeys if not provided
         if (!this.searchKeys || this.searchKeys.length === 0) {
             console.warn('No searchKeys provided; using empty keys array.');
-            this.searchKeys = ''; // Ensure it's explicitly set as an empty array
+            this.searchKeys = '';
         }
-        // Subscribe to state changes
         this.unsubscribe = useSearchcraftStore.subscribe((state) => {
             this.searchResults = Object.assign({}, state.searchResults);
             this.query = state.query;
         });
-        // Fetch initial state
         const { searchResults, query } = useSearchcraftStore.getState();
         this.searchResults = searchResults;
         this.query = query;
@@ -36,24 +33,16 @@ export class SearchcraftBaseSearchResults {
             return h("div", null, "No results to display.");
         }
         const parsedSearchKeys = parseSearchKeys(this.searchKeys);
-        const parsedCustomStyles = parseCustomStyles(this.customStylesForResults);
+        const serializedStyles = typeof this.customStylesForResults === 'string'
+            ? this.customStylesForResults
+            : serializeStyles(this.customStylesForResults);
         return (h("div", { class: 'resultsContainer' }, (_d = (_c = (_b = this.searchResults) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.hits) === null || _d === void 0 ? void 0 :
             _d.map((document, index) => {
                 const { doc: result } = document;
                 const dynamicProperties = extractDynamicProperties(result, parsedSearchKeys);
-                // Render the custom element if present, otherwise fallback to default
-                const customElement = this.hostElement.querySelector('[slot="result-template"]');
-                if (customElement) {
-                    // Clone the custom element and pass data to it
-                    const customElementClone = customElement.cloneNode(true);
-                    customElementClone.removeAttribute('slot'); // Remove the slot attribute
-                    customElementClone.setAttribute('data-result', JSON.stringify(result));
-                    return (h("div", { key: `${dynamicProperties.id}-${index}` }, customElementClone.outerHTML));
-                }
-                // Fallback to the default element
-                return (h("searchcraft-base-search-result", { key: `${dynamicProperties.id}-${index}`, "button-callback": () => console.log('button callback'), "result-callback": () => console.log('interactive element'), "keydown-callback": () => console.log('keydown'), "is-interactive": true, "heading-text": dynamicProperties[parsedSearchKeys[0]], "subheading-text": dynamicProperties[parsedSearchKeys[1]], "primary-content": dynamicProperties[parsedSearchKeys[2]], "secondary-content": dynamicProperties[parsedSearchKeys[3]], "tertiary-content": dynamicProperties[parsedSearchKeys[4]], "image-source": dynamicProperties[parsedSearchKeys[parsedSearchKeys.length - 1]], customStyles: parsedCustomStyles }));
+                return (h("searchcraft-base-search-result", { key: `${dynamicProperties.id}-${index}`, "button-callback": () => console.log('button callback'), "result-callback": () => console.log('interactive element'), "keydown-callback": () => console.log('keydown'), "is-interactive": true, "heading-text": dynamicProperties[parsedSearchKeys[0]], "subheading-text": dynamicProperties[parsedSearchKeys[1]], "primary-content": dynamicProperties[parsedSearchKeys[2]], "secondary-content": dynamicProperties[parsedSearchKeys[3]], "tertiary-content": dynamicProperties[parsedSearchKeys[4]], "image-source": dynamicProperties[parsedSearchKeys[parsedSearchKeys.length - 1]], "custom-styles": serializedStyles }));
             }), 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 && (h("searchcraft-error-message", { "error-message": `No search results found for "${this.query}" query` })), h("slot", { name: 'result-template' })));
+            ((_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 && (h("searchcraft-error-message", { "error-message": `No search results found for "${this.query}" query` }))));
     }
     static get is() { return "searchcraft-base-search-results"; }
     static get encapsulation() { return "shadow"; }
@@ -91,8 +80,8 @@ export class SearchcraftBaseSearchResults {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | Record<string, string>",
-                    "resolved": "string | { [x: string]: string; }",
+                    "original": "| string\n    | Record<string, Record<string, string>>",
+                    "resolved": "string | { [x: string]: Record<string, string>; }",
                     "references": {
                         "Record": {
                             "location": "global",
@@ -118,6 +107,5 @@ export class SearchcraftBaseSearchResults {
             "searchResults": {}
         };
     }
-    static get elementRef() { return "hostElement"; }
 }
 //# sourceMappingURL=searchcraft-base-search-results.js.map

package/dist/collection/components/searchcraft-base-search-results/searchcraft-base-search-results.js.map

@@ -1 +1 @@
-{"version":3,"file":"searchcraft-base-search-results.js","sourceRoot":"","sources":["../../../src/components/searchcraft-base-search-results/searchcraft-base-search-results.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element } from '@stencil/core';\nimport type { SearchcraftResponse } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\nimport {\n  extractDynamicProperties,\n  parseCustomStyles,\n  parseSearchKeys,\n} from '@utils/utils';\n\n@Component({\n  tag: 'searchcraft-base-search-results',\n  styleUrl: 'searchcraft-base-search-results.module.scss',\n  shadow: true,\n})\nexport class SearchcraftBaseSearchResults {\n  @State() query = '';\n  @State() searchResults: SearchcraftResponse | null = null;\n\n  /**\n   * Array of keys to dynamically extract properties from each document.\n   * Must be explicitly set by the parent component.\n   */\n  @Prop() searchKeys = '';\n\n  /**\n   * Custom styles to apply to search results.\n   * Expected format: JSON string, e.g., '{\"borderRadius\": \"10px\", \"padding\": \"16px\"}'\n   */\n  @Prop() customStylesForResults: string | Record<string, string> = {};\n\n  @Element() hostElement: HTMLElement; // Reference to the host element\n\n  private unsubscribe: () => void;\n\n  componentDidLoad() {\n    // Initialize searchKeys if not provided\n    if (!this.searchKeys || this.searchKeys.length === 0) {\n      console.warn('No searchKeys provided; using empty keys array.');\n      this.searchKeys = ''; // Ensure it's explicitly set as an empty array\n    }\n\n    // Subscribe to state changes\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      this.searchResults = { ...state.searchResults };\n      this.query = state.query;\n    });\n\n    // Fetch initial state\n    const { searchResults, query } = useSearchcraftStore.getState();\n    this.searchResults = searchResults;\n    this.query = query;\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  render() {\n    if (!this.searchResults?.data) {\n      console.warn('No search results data available');\n      return <div>No results to display.</div>;\n    }\n\n    const parsedSearchKeys = parseSearchKeys(this.searchKeys);\n    const parsedCustomStyles = parseCustomStyles(this.customStylesForResults);\n    return (\n      <div class='resultsContainer'>\n        {this.searchResults?.data?.hits?.map((document, index) => {\n          const { doc: result } = document;\n          const dynamicProperties = extractDynamicProperties(\n            result,\n            parsedSearchKeys,\n          );\n\n          // Render the custom element if present, otherwise fallback to default\n          const customElement = this.hostElement.querySelector(\n            '[slot=\"result-template\"]',\n          );\n          if (customElement) {\n            // Clone the custom element and pass data to it\n            const customElementClone = customElement.cloneNode(\n              true,\n            ) as HTMLElement;\n            customElementClone.removeAttribute('slot'); // Remove the slot attribute\n            customElementClone.setAttribute(\n              'data-result',\n              JSON.stringify(result),\n            );\n            return (\n              <div key={`${dynamicProperties.id}-${index}`}>\n                {customElementClone.outerHTML}\n              </div>\n            );\n          }\n          // Fallback to the default element\n          return (\n            <searchcraft-base-search-result\n              key={`${dynamicProperties.id}-${index}`}\n              button-callback={() => console.log('button callback')}\n              result-callback={() => console.log('interactive element')}\n              keydown-callback={() => console.log('keydown')}\n              is-interactive={true}\n              heading-text={dynamicProperties[parsedSearchKeys[0]]}\n              subheading-text={dynamicProperties[parsedSearchKeys[1]]}\n              primary-content={dynamicProperties[parsedSearchKeys[2]]}\n              secondary-content={dynamicProperties[parsedSearchKeys[3]]}\n              tertiary-content={dynamicProperties[parsedSearchKeys[4]]}\n              image-source={\n                dynamicProperties[parsedSearchKeys[parsedSearchKeys.length - 1]]\n              }\n              customStyles={parsedCustomStyles}\n            />\n          );\n        })}\n\n        {this.query.length > 0 &&\n          this.searchResults?.data?.hits?.length === 0 && (\n            <searchcraft-error-message\n              error-message={`No search results found for \"${this.query}\" query`}\n            />\n          )}\n\n        {/* Slot for custom element */}\n        <slot name='result-template' />\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"searchcraft-base-search-results.js","sourceRoot":"","sources":["../../../src/components/searchcraft-base-search-results/searchcraft-base-search-results.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\nimport type { SearchcraftResponse } from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\nimport {\n  extractDynamicProperties,\n  parseSearchKeys,\n  serializeStyles,\n} from '@utils/utils';\n\n@Component({\n  tag: 'searchcraft-base-search-results',\n  styleUrl: 'searchcraft-base-search-results.module.scss',\n  shadow: true,\n})\nexport class SearchcraftBaseSearchResults {\n  @State() query = '';\n  @State() searchResults: SearchcraftResponse | null = null;\n\n  /**\n   * Array of keys to dynamically extract properties from each document.\n   * Must be explicitly set by the parent component.\n   */\n  @Prop() searchKeys = '';\n  /**\n   * Custom styles to apply to search results.\n   * Expected format: JSON string, e.g., '{\"borderRadius\": \"10px\", \"padding\": \"16px\"}'\n   */\n  @Prop() customStylesForResults:\n    | string\n    | Record<string, Record<string, string>> = {};\n\n  private unsubscribe: () => void;\n\n  componentDidLoad() {\n    if (!this.searchKeys || this.searchKeys.length === 0) {\n      console.warn('No searchKeys provided; using empty keys array.');\n      this.searchKeys = '';\n    }\n\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      this.searchResults = { ...state.searchResults };\n      this.query = state.query;\n    });\n\n    const { searchResults, query } = useSearchcraftStore.getState();\n    this.searchResults = searchResults;\n    this.query = query;\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  render() {\n    if (!this.searchResults?.data) {\n      console.warn('No search results data available');\n      return <div>No results to display.</div>;\n    }\n\n    const parsedSearchKeys = parseSearchKeys(this.searchKeys);\n    const serializedStyles =\n      typeof this.customStylesForResults === 'string'\n        ? this.customStylesForResults\n        : serializeStyles(this.customStylesForResults);\n\n    return (\n      <div class='resultsContainer'>\n        {this.searchResults?.data?.hits?.map((document, index) => {\n          const { doc: result } = document;\n          const dynamicProperties = extractDynamicProperties(\n            result,\n            parsedSearchKeys,\n          );\n\n          return (\n            <searchcraft-base-search-result\n              key={`${dynamicProperties.id}-${index}`}\n              button-callback={() => console.log('button callback')}\n              result-callback={() => console.log('interactive element')}\n              keydown-callback={() => console.log('keydown')}\n              is-interactive={true}\n              heading-text={dynamicProperties[parsedSearchKeys[0]]}\n              subheading-text={dynamicProperties[parsedSearchKeys[1]]}\n              primary-content={dynamicProperties[parsedSearchKeys[2]]}\n              secondary-content={dynamicProperties[parsedSearchKeys[3]]}\n              tertiary-content={dynamicProperties[parsedSearchKeys[4]]}\n              image-source={\n                dynamicProperties[parsedSearchKeys[parsedSearchKeys.length - 1]]\n              }\n              custom-styles={serializedStyles}\n            />\n          );\n        })}\n        {this.query.length > 0 &&\n          this.searchResults?.data?.hits?.length === 0 && (\n            <searchcraft-error-message\n              error-message={`No search results found for \"${this.query}\" query`}\n            />\n          )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/searchcraft-button/searchcraft-button.js

@@ -17,7 +17,7 @@ export class SearchcraftButton {
     }
     render() {
         const buttonStyle = this.getButtonStyle();
-        return (h(Fragment, { key: 'd95f39680caa437650f45f089c25273ddf24e076' }, this.iconOnly ? (h("button", { class: classNames(buttonStyle, 'searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.isRequesting ? (h("searchcraft-spinner-dark", null)) : (this.iconElement))) : (h("button", { class: classNames(buttonStyle, 'searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.iconPosition === 'left' && this.isRequesting ? (h("div", { class: 'spinner-margin-right' }, h("searchcraft-spinner-dark", null))) : (this.iconElement), h("span", { class: classNames(this.isRequesting && 'button-label', 'searchcraft-button-label') }, this.label)))));
+        return (h(Fragment, { key: 'f10a9faa6357ef626c4e5414a5c8bdc1fe0b63a1' }, this.iconOnly ? (h("button", { class: classNames(buttonStyle, 'searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.isRequesting ? (h("searchcraft-spinner-dark", null)) : (this.iconElement))) : (h("button", { class: classNames(buttonStyle, 'searchcraft-button'), onClick: this.handleClick, type: 'submit' }, this.iconPosition === 'left' && this.isRequesting ? (h("div", { class: 'spinner-margin-right' }, h("searchcraft-spinner-dark", null))) : (this.iconElement), h("span", { class: classNames(this.isRequesting && 'button-label', 'searchcraft-button-label') }, this.label)))));
     }
     static get is() { return "searchcraft-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/searchcraft-error-message/searchcraft-error-message.js

@@ -7,7 +7,7 @@ export class SearchcraftErrorMessage {
     }
     render() {
         const errorMessageStyle = this.theme === 'light' ? 'errorMessageLight' : 'errorMessageDark';
-        return (h("p", { key: '4e0b94cb24f940e8c404fd752e6f02f977190043', class: classNames(errorMessageStyle) }, this.errorMessage || 'Search term is required.'));
+        return (h("p", { key: '544903d700810ed5d6efdefedab646cafed2376d', class: classNames(errorMessageStyle) }, this.errorMessage || 'Search term is required.'));
     }
     static get is() { return "searchcraft-error-message"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/searchcraft-spinner-dark/searchcraft-spinner-dark.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SearchcraftSpinnerDark {
     render() {
-        return (h("div", { key: 'fc32dd86414502f1895b157d8aa28645a5391ff9', class: 'spinnerContainer' }, h("div", { key: '260233361f9ff5a17d05b92e41ec2fc13adc2dbf', class: 'spinnerDark' })));
+        return (h("div", { key: '60b629930c2e2795236f6768b40c95ce9390e882', class: 'spinnerContainer' }, h("div", { key: 'bfef3329f2e81ecf6538738ac0213da6259dd1c3', class: 'spinnerDark' })));
     }
     static get is() { return "searchcraft-spinner-dark"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/searchcraft-spinner-light/searchcraft-spinner-light.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class SearchcraftSpinnerLight {
     render() {
-        return (h("div", { key: '0e0faa615a1548868153b07bb467ee85eabcdd09', class: 'spinnerContainer' }, h("div", { key: 'a9aac4d029d9072e01cc643da62f3338622f0ef0', class: 'spinnerLight' })));
+        return (h("div", { key: 'ad5224c97faf7e329d2a8904488c17dfd7414b9e', class: 'spinnerContainer' }, h("div", { key: '6336ce7737af65eedac46ee290b20291ce5b6096', class: 'spinnerLight' })));
     }
     static get is() { return "searchcraft-spinner-light"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/index.js

@@ -8,7 +8,7 @@
  * to consume components of this package as outlined in the `README.md`.
  */
 // Export utility functions
-export { extractDynamicProperties, parseCustomStyles, parseSearchKeys, } from './utils/utils';
+export { extractDynamicProperties, parseCustomStyles, parseSearchKeys, serializeStyles, } from './utils/utils';
 // Export Zustand store and useTheme hook
 export { useSearchcraftStore, useThemeStore } from './provider/store';
 //# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,2BAA2B;AAC3B,OAAO,EACL,wBAAwB,EACxB,iBAAiB,EACjB,eAAe,GAChB,MAAM,eAAe,CAAC;AAEvB,yCAAyC;AACzC,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["/**\n * @fileoverview entry point for your component library\n *\n * This is the entry point for your component library. Use this file to export utilities,\n * constants or data structure that accompany your components.\n *\n * DO NOT use this file to export your components. Instead, use the recommended approaches\n * to consume components of this package as outlined in the `README.md`.\n */\n\nexport type * from './components';\n\n// Export utility functions\nexport {\n  extractDynamicProperties,\n  parseCustomStyles,\n  parseSearchKeys,\n} from './utils/utils';\n\n// Export Zustand store and useTheme hook\nexport { useSearchcraftStore, useThemeStore } from './provider/store';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,2BAA2B;AAC3B,OAAO,EACL,wBAAwB,EACxB,iBAAiB,EACjB,eAAe,EACf,eAAe,GAChB,MAAM,eAAe,CAAC;AAEvB,yCAAyC;AACzC,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["/**\n * @fileoverview entry point for your component library\n *\n * This is the entry point for your component library. Use this file to export utilities,\n * constants or data structure that accompany your components.\n *\n * DO NOT use this file to export your components. Instead, use the recommended approaches\n * to consume components of this package as outlined in the `README.md`.\n */\n\nexport type * from './components';\n\n// Export utility functions\nexport {\n  extractDynamicProperties,\n  parseCustomStyles,\n  parseSearchKeys,\n  serializeStyles,\n} from './utils/utils';\n\n// Export Zustand store and useTheme hook\nexport { useSearchcraftStore, useThemeStore } from './provider/store';\n"]}

package/dist/collection/utils/utils.js

@@ -1,8 +1,3 @@
-/**
- * Utility function to parse custom styles from a string or object.
- * @param styles - Custom styles as a stringified JSON or an object.
- * @returns {Record<string, string>} - Parsed styles as an object.
- */
 export function parseCustomStyles(styles) {
     if (typeof styles === 'string') {
         try {
@@ -38,4 +33,13 @@ export function extractDynamicProperties(document, keys) {
     });
     return extractedProperties;
 }
+export function serializeStyles(styles) {
+    try {
+        return JSON.stringify(styles);
+    }
+    catch (error) {
+        console.error('Error serializing styles:', error);
+        return '{}';
+    }
+}
 //# sourceMappingURL=utils.js.map

package/dist/collection/utils/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAC/B,MAAuC;IAEvC,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE,CAAC;QAC/B,IAAI,CAAC;YACH,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC5B,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,8BAA8B,EAAE,MAAM,CAAC,CAAC;YACtD,OAAO,EAAE,CAAC;QACZ,CAAC;IACH,CAAC;IACD,OAAO,MAAM,IAAI,EAAE,CAAC;AACtB,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,UAAkB;IAChD,IAAI,CAAC;QACH,sCAAsC;QACtC,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAC1C,IACE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC;YACzB,UAAU,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,OAAO,GAAG,KAAK,QAAQ,CAAC,EAClD,CAAC;YACD,OAAO,UAAU,CAAC,CAAC,iCAAiC;QACtD,CAAC;QACD,OAAO,CAAC,IAAI,CACV,2EAA2E,CAC5E,CAAC;QACF,OAAO,EAAE,CAAC;IACZ,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,OAAO,CAAC,KAAK,CAAC,6BAA6B,EAAE,KAAK,CAAC,CAAC;QACpD,OAAO,EAAE,CAAC,CAAC,mDAAmD;IAChE,CAAC;AACH,CAAC;AAED,MAAM,UAAU,wBAAwB,CACtC,QAAyC,EACzC,IAAc;IAEd,MAAM,mBAAmB,GAAoC,EAAE,CAAC;IAChE,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QACnB,mBAAmB,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;IACjD,CAAC,CAAC,CAAC;IACH,OAAO,mBAAmB,CAAC;AAC7B,CAAC","sourcesContent":["/**\n * Utility function to parse custom styles from a string or object.\n * @param styles - Custom styles as a stringified JSON or an object.\n * @returns {Record<string, string>} - Parsed styles as an object.\n */\nexport function parseCustomStyles(\n  styles: string | Record<string, string>,\n): Record<string, string> {\n  if (typeof styles === 'string') {\n    try {\n      return JSON.parse(styles);\n    } catch (error) {\n      console.error('Invalid customStyles format:', styles);\n      return {};\n    }\n  }\n  return styles || {};\n}\n\nexport function parseSearchKeys(searchKeys: string): string[] {\n  try {\n    // Attempt to parse the string as JSON\n    const parsedKeys = JSON.parse(searchKeys);\n    if (\n      Array.isArray(parsedKeys) &&\n      parsedKeys.every((key) => typeof key === 'string')\n    ) {\n      return parsedKeys; // Return the array if it's valid\n    }\n    console.warn(\n      'searchKeys must be a JSON array of strings. Defaulting to an empty array.',\n    );\n    return [];\n  } catch (error) {\n    console.error('Failed to parse searchKeys:', error);\n    return []; // Return an empty array in case of a parsing error\n  }\n}\n\nexport function extractDynamicProperties(\n  document: Record<string, string | number>,\n  keys: string[],\n) {\n  const extractedProperties: Record<string, string | number> = {};\n  keys.forEach((key) => {\n    extractedProperties[key] = document[key] || '';\n  });\n  return extractedProperties;\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,iBAAiB,CAC/B,MAAuC;IAEvC,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE,CAAC;QAC/B,IAAI,CAAC;YACH,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC5B,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,8BAA8B,EAAE,MAAM,CAAC,CAAC;YACtD,OAAO,EAAE,CAAC;QACZ,CAAC;IACH,CAAC;IACD,OAAO,MAAM,IAAI,EAAE,CAAC;AACtB,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,UAAkB;IAChD,IAAI,CAAC;QACH,sCAAsC;QACtC,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAC1C,IACE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC;YACzB,UAAU,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,OAAO,GAAG,KAAK,QAAQ,CAAC,EAClD,CAAC;YACD,OAAO,UAAU,CAAC,CAAC,iCAAiC;QACtD,CAAC;QACD,OAAO,CAAC,IAAI,CACV,2EAA2E,CAC5E,CAAC;QACF,OAAO,EAAE,CAAC;IACZ,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,OAAO,CAAC,KAAK,CAAC,6BAA6B,EAAE,KAAK,CAAC,CAAC;QACpD,OAAO,EAAE,CAAC,CAAC,mDAAmD;IAChE,CAAC;AACH,CAAC;AAED,MAAM,UAAU,wBAAwB,CACtC,QAAyC,EACzC,IAAc;IAEd,MAAM,mBAAmB,GAAoC,EAAE,CAAC;IAChE,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QACnB,mBAAmB,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;IACjD,CAAC,CAAC,CAAC;IACH,OAAO,mBAAmB,CAAC;AAC7B,CAAC;AAED,MAAM,UAAU,eAAe,CAC7B,MAA8C;IAE9C,IAAI,CAAC;QACH,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IAChC,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,OAAO,CAAC,KAAK,CAAC,2BAA2B,EAAE,KAAK,CAAC,CAAC;QAClD,OAAO,IAAI,CAAC;IACd,CAAC;AACH,CAAC","sourcesContent":["export function parseCustomStyles(\n  styles: string | Record<string, string>,\n): Record<string, string> {\n  if (typeof styles === 'string') {\n    try {\n      return JSON.parse(styles);\n    } catch (error) {\n      console.error('Invalid customStyles format:', styles);\n      return {};\n    }\n  }\n  return styles || {};\n}\n\nexport function parseSearchKeys(searchKeys: string): string[] {\n  try {\n    // Attempt to parse the string as JSON\n    const parsedKeys = JSON.parse(searchKeys);\n    if (\n      Array.isArray(parsedKeys) &&\n      parsedKeys.every((key) => typeof key === 'string')\n    ) {\n      return parsedKeys; // Return the array if it's valid\n    }\n    console.warn(\n      'searchKeys must be a JSON array of strings. Defaulting to an empty array.',\n    );\n    return [];\n  } catch (error) {\n    console.error('Failed to parse searchKeys:', error);\n    return []; // Return an empty array in case of a parsing error\n  }\n}\n\nexport function extractDynamicProperties(\n  document: Record<string, string | number>,\n  keys: string[],\n) {\n  const extractedProperties: Record<string, string | number> = {};\n  keys.forEach((key) => {\n    extractedProperties[key] = document[key] || '';\n  });\n  return extractedProperties;\n}\n\nexport function serializeStyles(\n  styles: Record<string, Record<string, string>>,\n): string {\n  try {\n    return JSON.stringify(styles);\n  } catch (error) {\n    console.error('Error serializing styles:', error);\n    return '{}';\n  }\n}\n"]}

package/dist/components/index.js

@@ -1,5 +1,5 @@
-export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-066c8210.js';
-export { e as extractDynamicProperties, p as parseCustomStyles, a as parseSearchKeys } from './p-5e3152c4.js';
+export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-c69651f6.js';
+export { e as extractDynamicProperties, p as parseCustomStyles, a as parseSearchKeys, s as serializeStyles } from './p-17c94ac1.js';
 export { u as useSearchcraftStore, a as useThemeStore } from './p-36c95064.js';
 
 //# sourceMappingURL=index.js.map

package/dist/components/{p-d0edf961.js → p-04e7305e.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-066c8210.js';
+import { p as proxyCustomElement, H, h } from './p-c69651f6.js';
 
 const SearchcraftSearchIconSet = /*@__PURE__*/ proxyCustomElement(class SearchcraftSearchIconSet extends H {
     constructor() {
@@ -41,4 +41,4 @@ defineCustomElement();
 
 export { SearchcraftSearchIconSet as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-d0edf961.js.map
+//# sourceMappingURL=p-04e7305e.js.map

package/dist/components/{p-d0edf961.js.map → p-04e7305e.js.map}

@@ -1 +1 @@
-{"file":"p-d0edf961.js","mappings":";;MAMa,wBAAwB;;;;;oBAMjC,aAAa;;IAEf,MAAM;QACJ,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,cAAc;gBACjB,QACE,WACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,mBAAmB,IAEnC,aAAO,EAAE,EAAC,mBAAmB,oCAAsC,EACnE,YACE,CAAC,EAAC,mNAAmN,EACrN,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,EACN;YACJ,KAAK,aAAa;gBAChB,QACE,WACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,mBAAmB,IAEnC,aAAO,EAAE,EAAC,mBAAmB,mCAAqC,EAClE,YACE,CAAC,EAAC,mNAAmN,EACrN,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,EACN;YACJ,KAAK,aAAa;gBAChB,QACE,WACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,mBAAmB,IAEnC,aAAO,EAAE,EAAC,mBAAmB,0CAErB,EACR,YACE,CAAC,EAAC,mNAAmN,EACrN,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,EACN;YACJ,KAAK,YAAY;gBACf,QACE,WACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,mBAAmB,IAEnC,aAAO,EAAE,EAAC,mBAAmB,yCAErB,EACR,YACE,CAAC,EAAC,mNAAmN,EACrN,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,EACN;YACJ;gBACE,OAAO,IAAI,CAAC;SACf;KACF;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/assets/searchcraft-search-icon-set.tsx"],"sourcesContent":["import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'searchcraft-search-icon-set',\n  shadow: true,\n})\nexport class SearchcraftSearchIconSet {\n  /**\n   * Type of the icon to display.\n   * Options: ''search-light', search-dark', 'error-light', 'error-dark'\n   */\n  @Prop() type: 'search-light' | 'search-dark' | 'error-light' | 'error-dark' =\n    'search-dark';\n\n  render() {\n    switch (this.type) {\n      case 'search-light':\n        return (\n          <svg\n            width='20'\n            height='20'\n            viewBox='0 0 20 20'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            aria-labelledby='searchcraft-title'\n          >\n            <title id='searchcraft-title'>Searchcraft Search Icon Light</title>\n            <path\n              d='M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z'\n              stroke='#404040'\n              stroke-width='1.5'\n              stroke-linecap='round'\n              stroke-linejoin='round'\n            />\n          </svg>\n        );\n      case 'search-dark':\n        return (\n          <svg\n            width='18'\n            height='18'\n            viewBox='0 0 18 18'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            aria-labelledby='searchcraft-title'\n          >\n            <title id='searchcraft-title'>Searchcraft Search Icon Dark</title>\n            <path\n              d='M16.5 16.5L12.875 12.875M14.8333 8.16667C14.8333 11.8486 11.8486 14.8333 8.16667 14.8333C4.48477 14.8333 1.5 11.8486 1.5 8.16667C1.5 4.48477 4.48477 1.5 8.16667 1.5C11.8486 1.5 14.8333 4.48477 14.8333 8.16667Z'\n              stroke='#E6E6E6'\n              stroke-width='1.5'\n              stroke-linecap='round'\n              stroke-linejoin='round'\n            />\n          </svg>\n        );\n      case 'error-light':\n        return (\n          <svg\n            width='20'\n            height='20'\n            viewBox='0 0 20 20'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            aria-labelledby='searchcraft-title'\n          >\n            <title id='searchcraft-title'>\n              Searchcraft Error Search Icon Light\n            </title>\n            <path\n              d='M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z'\n              stroke='#737373'\n              stroke-width='1.5'\n              stroke-linecap='round'\n              stroke-linejoin='round'\n            />\n          </svg>\n        );\n      case 'error-dark':\n        return (\n          <svg\n            width='18'\n            height='18'\n            viewBox='0 0 18 18'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            aria-labelledby='searchcraft-title'\n          >\n            <title id='searchcraft-title'>\n              Searchcraft Error Search Icon Dark\n            </title>\n            <path\n              d='M16.5 16.5L12.875 12.875M14.8333 8.16667C14.8333 11.8486 11.8486 14.8333 8.16667 14.8333C4.48477 14.8333 1.5 11.8486 1.5 8.16667C1.5 4.48477 4.48477 1.5 8.16667 1.5C11.8486 1.5 14.8333 4.48477 14.8333 8.16667Z'\n              stroke='#BFBFBF'\n              stroke-width='1.5'\n              stroke-linecap='round'\n              stroke-linejoin='round'\n            />\n          </svg>\n        );\n      default:\n        return null;\n    }\n  }\n}\n"],"version":3}
+{"file":"p-04e7305e.js","mappings":";;MAMa,wBAAwB;;;;;oBAMjC,aAAa;;IAEf,MAAM;QACJ,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,cAAc;gBACjB,QACE,WACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,mBAAmB,IAEnC,aAAO,EAAE,EAAC,mBAAmB,oCAAsC,EACnE,YACE,CAAC,EAAC,mNAAmN,EACrN,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,EACN;YACJ,KAAK,aAAa;gBAChB,QACE,WACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,mBAAmB,IAEnC,aAAO,EAAE,EAAC,mBAAmB,mCAAqC,EAClE,YACE,CAAC,EAAC,mNAAmN,EACrN,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,EACN;YACJ,KAAK,aAAa;gBAChB,QACE,WACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,mBAAmB,IAEnC,aAAO,EAAE,EAAC,mBAAmB,0CAErB,EACR,YACE,CAAC,EAAC,mNAAmN,EACrN,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,EACN;YACJ,KAAK,YAAY;gBACf,QACE,WACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,mBAAmB,IAEnC,aAAO,EAAE,EAAC,mBAAmB,yCAErB,EACR,YACE,CAAC,EAAC,mNAAmN,EACrN,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,EACN;YACJ;gBACE,OAAO,IAAI,CAAC;SACf;KACF;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/assets/searchcraft-search-icon-set.tsx"],"sourcesContent":["import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'searchcraft-search-icon-set',\n  shadow: true,\n})\nexport class SearchcraftSearchIconSet {\n  /**\n   * Type of the icon to display.\n   * Options: ''search-light', search-dark', 'error-light', 'error-dark'\n   */\n  @Prop() type: 'search-light' | 'search-dark' | 'error-light' | 'error-dark' =\n    'search-dark';\n\n  render() {\n    switch (this.type) {\n      case 'search-light':\n        return (\n          <svg\n            width='20'\n            height='20'\n            viewBox='0 0 20 20'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            aria-labelledby='searchcraft-title'\n          >\n            <title id='searchcraft-title'>Searchcraft Search Icon Light</title>\n            <path\n              d='M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z'\n              stroke='#404040'\n              stroke-width='1.5'\n              stroke-linecap='round'\n              stroke-linejoin='round'\n            />\n          </svg>\n        );\n      case 'search-dark':\n        return (\n          <svg\n            width='18'\n            height='18'\n            viewBox='0 0 18 18'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            aria-labelledby='searchcraft-title'\n          >\n            <title id='searchcraft-title'>Searchcraft Search Icon Dark</title>\n            <path\n              d='M16.5 16.5L12.875 12.875M14.8333 8.16667C14.8333 11.8486 11.8486 14.8333 8.16667 14.8333C4.48477 14.8333 1.5 11.8486 1.5 8.16667C1.5 4.48477 4.48477 1.5 8.16667 1.5C11.8486 1.5 14.8333 4.48477 14.8333 8.16667Z'\n              stroke='#E6E6E6'\n              stroke-width='1.5'\n              stroke-linecap='round'\n              stroke-linejoin='round'\n            />\n          </svg>\n        );\n      case 'error-light':\n        return (\n          <svg\n            width='20'\n            height='20'\n            viewBox='0 0 20 20'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            aria-labelledby='searchcraft-title'\n          >\n            <title id='searchcraft-title'>\n              Searchcraft Error Search Icon Light\n            </title>\n            <path\n              d='M17.5 17.5L13.875 13.875M15.8333 9.16667C15.8333 12.8486 12.8486 15.8333 9.16667 15.8333C5.48477 15.8333 2.5 12.8486 2.5 9.16667C2.5 5.48477 5.48477 2.5 9.16667 2.5C12.8486 2.5 15.8333 5.48477 15.8333 9.16667Z'\n              stroke='#737373'\n              stroke-width='1.5'\n              stroke-linecap='round'\n              stroke-linejoin='round'\n            />\n          </svg>\n        );\n      case 'error-dark':\n        return (\n          <svg\n            width='18'\n            height='18'\n            viewBox='0 0 18 18'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            aria-labelledby='searchcraft-title'\n          >\n            <title id='searchcraft-title'>\n              Searchcraft Error Search Icon Dark\n            </title>\n            <path\n              d='M16.5 16.5L12.875 12.875M14.8333 8.16667C14.8333 11.8486 11.8486 14.8333 8.16667 14.8333C4.48477 14.8333 1.5 11.8486 1.5 8.16667C1.5 4.48477 4.48477 1.5 8.16667 1.5C11.8486 1.5 14.8333 4.48477 14.8333 8.16667Z'\n              stroke='#BFBFBF'\n              stroke-width='1.5'\n              stroke-linecap='round'\n              stroke-linejoin='round'\n            />\n          </svg>\n        );\n      default:\n        return null;\n    }\n  }\n}\n"],"version":3}

package/dist/components/{p-6f2a72d3.js → p-0c25e95d.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-066c8210.js';
+import { p as proxyCustomElement, H, h } from './p-c69651f6.js';
 import { c as classNames } from './p-5cdc6210.js';
 
 const searchcraftErrorMessageModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.errorMessageLight{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#990000}.errorMessageDark{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#FFB3B3}";
@@ -14,7 +14,7 @@ const SearchcraftErrorMessage = /*@__PURE__*/ proxyCustomElement(class Searchcra
     }
     render() {
         const errorMessageStyle = this.theme === 'light' ? 'errorMessageLight' : 'errorMessageDark';
-        return (h("p", { key: '4e0b94cb24f940e8c404fd752e6f02f977190043', class: classNames(errorMessageStyle) }, this.errorMessage || 'Search term is required.'));
+        return (h("p", { key: '544903d700810ed5d6efdefedab646cafed2376d', class: classNames(errorMessageStyle) }, this.errorMessage || 'Search term is required.'));
     }
     static get style() { return SearchcraftErrorMessageStyle0; }
 }, [1, "searchcraft-error-message", {
@@ -38,4 +38,4 @@ defineCustomElement();
 
 export { SearchcraftErrorMessage as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-6f2a72d3.js.map
+//# sourceMappingURL=p-0c25e95d.js.map

package/dist/components/{p-6f2a72d3.js.map → p-0c25e95d.js.map}

@@ -1 +1 @@
-{"file":"p-6f2a72d3.js","mappings":";;;AAAA,MAAM,gCAAgC,GAAG,6SAA6S,CAAC;AACvV,sCAAe,gCAAgC;;MCOlC,uBAAuB;;;;;;qBASA,OAAO;;IAEzC,MAAM;QACJ,MAAM,iBAAiB,GACrB,IAAI,CAAC,KAAK,KAAK,OAAO,GAAG,mBAAmB,GAAG,kBAAkB,CAAC;QAEpE,QACE,0DAAG,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,IACpC,IAAI,CAAC,YAAY,IAAI,0BAA0B,CAC9C,EACJ;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/searchcraft-error-message/searchcraft-error-message.module.scss?tag=searchcraft-error-message&encapsulation=shadow","src/components/searchcraft-error-message/searchcraft-error-message.tsx"],"sourcesContent":["@import '../../utils/theme';\n\n:root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n@mixin error-message-base {\n  font-family: var(--font-stack);\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 16px;\n  margin-top: 4px;\n}\n\n.errorMessageLight {\n  @include error-message-base;\n  color: $light-input-caption-color-error;\n}\n\n.errorMessageDark {\n  @include error-message-base;\n  color: $dark-input-caption-color-error;\n}","import { Component, Prop, h } from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'searchcraft-error-message',\n  styleUrl: 'searchcraft-error-message.module.scss',\n  shadow: true,\n})\nexport class SearchcraftErrorMessage {\n  /**\n   * The error message to display. Defaults to a standard message if not provided.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * The theme, which determines the style (light or dark).\n   */\n  @Prop() theme: 'light' | 'dark' = 'light';\n\n  render() {\n    const errorMessageStyle =\n      this.theme === 'light' ? 'errorMessageLight' : 'errorMessageDark';\n\n    return (\n      <p class={classNames(errorMessageStyle)}>\n        {this.errorMessage || 'Search term is required.'}\n      </p>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-0c25e95d.js","mappings":";;;AAAA,MAAM,gCAAgC,GAAG,6SAA6S,CAAC;AACvV,sCAAe,gCAAgC;;MCOlC,uBAAuB;;;;;;qBASA,OAAO;;IAEzC,MAAM;QACJ,MAAM,iBAAiB,GACrB,IAAI,CAAC,KAAK,KAAK,OAAO,GAAG,mBAAmB,GAAG,kBAAkB,CAAC;QAEpE,QACE,0DAAG,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,IACpC,IAAI,CAAC,YAAY,IAAI,0BAA0B,CAC9C,EACJ;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/searchcraft-error-message/searchcraft-error-message.module.scss?tag=searchcraft-error-message&encapsulation=shadow","src/components/searchcraft-error-message/searchcraft-error-message.tsx"],"sourcesContent":["@import '../../utils/theme';\n\n:root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n@mixin error-message-base {\n  font-family: var(--font-stack);\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 16px;\n  margin-top: 4px;\n}\n\n.errorMessageLight {\n  @include error-message-base;\n  color: $light-input-caption-color-error;\n}\n\n.errorMessageDark {\n  @include error-message-base;\n  color: $dark-input-caption-color-error;\n}","import { Component, Prop, h } from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'searchcraft-error-message',\n  styleUrl: 'searchcraft-error-message.module.scss',\n  shadow: true,\n})\nexport class SearchcraftErrorMessage {\n  /**\n   * The error message to display. Defaults to a standard message if not provided.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * The theme, which determines the style (light or dark).\n   */\n  @Prop() theme: 'light' | 'dark' = 'light';\n\n  render() {\n    const errorMessageStyle =\n      this.theme === 'light' ? 'errorMessageLight' : 'errorMessageDark';\n\n    return (\n      <p class={classNames(errorMessageStyle)}>\n        {this.errorMessage || 'Search term is required.'}\n      </p>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-d446eda4.js → p-155f7a59.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-066c8210.js';
+import { p as proxyCustomElement, H, h } from './p-c69651f6.js';
 
 const SearchcraftClearIconSet = /*@__PURE__*/ proxyCustomElement(class SearchcraftClearIconSet extends H {
     constructor() {
@@ -41,4 +41,4 @@ defineCustomElement();
 
 export { SearchcraftClearIconSet as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-d446eda4.js.map
+//# sourceMappingURL=p-155f7a59.js.map

package/dist/components/{p-d446eda4.js.map → p-155f7a59.js.map}

@@ -1 +1 @@
-{"file":"p-d446eda4.js","mappings":";;MAMa,uBAAuB;;;;;oBAMhC,aAAa;;IAEf,MAAM;QACJ,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,aAAa;gBAChB,QACE,WACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,YAAY,IAE5B,aAAO,EAAE,EAAC,YAAY,yCAA2C,EACjE,YACE,CAAC,EAAC,uIAAuI,EACzI,MAAM,EAAC,OAAO,kBACD,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,EACN;YACJ,KAAK,YAAY;gBACf,QACE,WACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,YAAY,IAE5B,aAAO,EAAE,EAAC,YAAY,wCAA0C,EAChE,YACE,CAAC,EAAC,uIAAuI,EACzI,MAAM,EAAC,OAAO,kBACD,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,EACN;YACJ,KAAK,aAAa;gBAChB,QACE,WACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,YAAY,IAE5B,aAAO,EAAE,EAAC,YAAY,yCAA2C,EACjE,YACE,CAAC,EAAC,uCAAuC,EACzC,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,EACN;YACJ,KAAK,YAAY;gBACf,QACE,WACE,KAAK,EAAC,GAAG,EACT,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,YAAY,IAE5B,aAAO,EAAE,EAAC,YAAY,wCAA0C,EAChE,YACE,CAAC,EAAC,qBAAqB,EACvB,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,EACN;YAEJ;gBACE,OAAO,IAAI,CAAC;SACf;KACF;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/assets/searchcraft-clear-icon-set.tsx"],"sourcesContent":["import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'searchcraft-clear-icon-set',\n  shadow: true,\n})\nexport class SearchcraftClearIconSet {\n  /**\n   * Type of the icon to display.\n   * Options: 'clear-light', 'clear-dark', 'arrow-light', 'arrow-dark'\n   */\n  @Prop() type: 'clear-light' | 'clear-dark' | 'arrow-light' | 'arrow-dark' =\n    'clear-light';\n\n  render() {\n    switch (this.type) {\n      case 'clear-light':\n        return (\n          <svg\n            width='22'\n            height='22'\n            viewBox='0 0 22 22'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            aria-labelledby='icon-title'\n          >\n            <title id='icon-title'>Searchcraft Clear Input Icon Light</title>\n            <path\n              d='M14 8L8 14M8 8L14 14M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z'\n              stroke='black'\n              stroke-width='1.5'\n              stroke-linecap='round'\n              stroke-linejoin='round'\n            />\n          </svg>\n        );\n      case 'clear-dark':\n        return (\n          <svg\n            width='22'\n            height='22'\n            viewBox='0 0 22 22'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            aria-labelledby='icon-title'\n          >\n            <title id='icon-title'>Searchcraft Clear Input Icon Dark</title>\n            <path\n              d='M14 8L8 14M8 8L14 14M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z'\n              stroke='white'\n              stroke-width='1.5'\n              stroke-linecap='round'\n              stroke-linejoin='round'\n            />\n          </svg>\n        );\n      case 'arrow-light':\n        return (\n          <svg\n            width='20'\n            height='21'\n            viewBox='0 0 20 21'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            aria-labelledby='icon-title'\n          >\n            <title id='icon-title'>Searchcraft Arrow Right Icon Light</title>\n            <path\n              d='M7.5 15.0444L12.5 10.0444L7.5 5.04443'\n              stroke='#737373'\n              stroke-width='1.5'\n              stroke-linecap='round'\n              stroke-linejoin='round'\n            />\n          </svg>\n        );\n      case 'arrow-dark':\n        return (\n          <svg\n            width='8'\n            height='12'\n            viewBox='0 0 8 12'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            aria-labelledby='icon-title'\n          >\n            <title id='icon-title'>Searchcraft Arrow Right Icon Dark</title>\n            <path\n              d='M1.5 11L6.5 6L1.5 1'\n              stroke='#BFBFBF'\n              stroke-width='1.5'\n              stroke-linecap='round'\n              stroke-linejoin='round'\n            />\n          </svg>\n        );\n\n      default:\n        return null;\n    }\n  }\n}\n"],"version":3}
+{"file":"p-155f7a59.js","mappings":";;MAMa,uBAAuB;;;;;oBAMhC,aAAa;;IAEf,MAAM;QACJ,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,aAAa;gBAChB,QACE,WACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,YAAY,IAE5B,aAAO,EAAE,EAAC,YAAY,yCAA2C,EACjE,YACE,CAAC,EAAC,uIAAuI,EACzI,MAAM,EAAC,OAAO,kBACD,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,EACN;YACJ,KAAK,YAAY;gBACf,QACE,WACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,YAAY,IAE5B,aAAO,EAAE,EAAC,YAAY,wCAA0C,EAChE,YACE,CAAC,EAAC,uIAAuI,EACzI,MAAM,EAAC,OAAO,kBACD,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,EACN;YACJ,KAAK,aAAa;gBAChB,QACE,WACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,YAAY,IAE5B,aAAO,EAAE,EAAC,YAAY,yCAA2C,EACjE,YACE,CAAC,EAAC,uCAAuC,EACzC,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,EACN;YACJ,KAAK,YAAY;gBACf,QACE,WACE,KAAK,EAAC,GAAG,EACT,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,qBAClB,YAAY,IAE5B,aAAO,EAAE,EAAC,YAAY,wCAA0C,EAChE,YACE,CAAC,EAAC,qBAAqB,EACvB,MAAM,EAAC,SAAS,kBACH,KAAK,oBACH,OAAO,qBACN,OAAO,GACvB,CACE,EACN;YAEJ;gBACE,OAAO,IAAI,CAAC;SACf;KACF;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/assets/searchcraft-clear-icon-set.tsx"],"sourcesContent":["import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'searchcraft-clear-icon-set',\n  shadow: true,\n})\nexport class SearchcraftClearIconSet {\n  /**\n   * Type of the icon to display.\n   * Options: 'clear-light', 'clear-dark', 'arrow-light', 'arrow-dark'\n   */\n  @Prop() type: 'clear-light' | 'clear-dark' | 'arrow-light' | 'arrow-dark' =\n    'clear-light';\n\n  render() {\n    switch (this.type) {\n      case 'clear-light':\n        return (\n          <svg\n            width='22'\n            height='22'\n            viewBox='0 0 22 22'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            aria-labelledby='icon-title'\n          >\n            <title id='icon-title'>Searchcraft Clear Input Icon Light</title>\n            <path\n              d='M14 8L8 14M8 8L14 14M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z'\n              stroke='black'\n              stroke-width='1.5'\n              stroke-linecap='round'\n              stroke-linejoin='round'\n            />\n          </svg>\n        );\n      case 'clear-dark':\n        return (\n          <svg\n            width='22'\n            height='22'\n            viewBox='0 0 22 22'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            aria-labelledby='icon-title'\n          >\n            <title id='icon-title'>Searchcraft Clear Input Icon Dark</title>\n            <path\n              d='M14 8L8 14M8 8L14 14M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z'\n              stroke='white'\n              stroke-width='1.5'\n              stroke-linecap='round'\n              stroke-linejoin='round'\n            />\n          </svg>\n        );\n      case 'arrow-light':\n        return (\n          <svg\n            width='20'\n            height='21'\n            viewBox='0 0 20 21'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            aria-labelledby='icon-title'\n          >\n            <title id='icon-title'>Searchcraft Arrow Right Icon Light</title>\n            <path\n              d='M7.5 15.0444L12.5 10.0444L7.5 5.04443'\n              stroke='#737373'\n              stroke-width='1.5'\n              stroke-linecap='round'\n              stroke-linejoin='round'\n            />\n          </svg>\n        );\n      case 'arrow-dark':\n        return (\n          <svg\n            width='8'\n            height='12'\n            viewBox='0 0 8 12'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            aria-labelledby='icon-title'\n          >\n            <title id='icon-title'>Searchcraft Arrow Right Icon Dark</title>\n            <path\n              d='M1.5 11L6.5 6L1.5 1'\n              stroke='#BFBFBF'\n              stroke-width='1.5'\n              stroke-linecap='round'\n              stroke-linejoin='round'\n            />\n          </svg>\n        );\n\n      default:\n        return null;\n    }\n  }\n}\n"],"version":3}

package/dist/components/{p-d6616aa5.js → p-16a533e3.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-066c8210.js';
+import { p as proxyCustomElement, H, h } from './p-c69651f6.js';
 
 const searchcraftSpinnerDarkModuleCss = ".spinnerContainer{background-color:transparent;height:20px;width:20px}.spinnerDark{height:100%;width:100%;background:conic-gradient(#000 50%, #FFFFFF);clip-path:circle(50%);mask-image:radial-gradient(circle at center, rgba(0, 0, 0, 0) 6.6666666667px, rgb(0, 0, 0) 6.6666666667px);animation:spinning 1s linear infinite}.spinnerLight{height:100%;width:100%;background:conic-gradient(#737373 50%, #FFFFFF);clip-path:circle(50%);mask-image:radial-gradient(circle at center, rgba(0, 0, 0, 0) 6.6666666667px, rgb(0, 0, 0) 6.6666666667px);animation:spinning 1s linear infinite}@keyframes spinning{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}";
 const SearchcraftSpinnerDarkStyle0 = searchcraftSpinnerDarkModuleCss;
@@ -10,7 +10,7 @@ const SearchcraftSpinnerDark = /*@__PURE__*/ proxyCustomElement(class Searchcraf
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: 'fc32dd86414502f1895b157d8aa28645a5391ff9', class: 'spinnerContainer' }, h("div", { key: '260233361f9ff5a17d05b92e41ec2fc13adc2dbf', class: 'spinnerDark' })));
+        return (h("div", { key: '60b629930c2e2795236f6768b40c95ce9390e882', class: 'spinnerContainer' }, h("div", { key: 'bfef3329f2e81ecf6538738ac0213da6259dd1c3', class: 'spinnerDark' })));
     }
     static get style() { return SearchcraftSpinnerDarkStyle0; }
 }, [1, "searchcraft-spinner-dark"]);
@@ -31,4 +31,4 @@ defineCustomElement();
 
 export { SearchcraftSpinnerDark as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-d6616aa5.js.map
+//# sourceMappingURL=p-16a533e3.js.map

package/dist/components/{p-d6616aa5.js.map → p-16a533e3.js.map}

@@ -1 +1 @@
-{"file":"p-d6616aa5.js","mappings":";;AAAA,MAAM,+BAA+B,GAAG,sqBAAsqB,CAAC;AAC/sB,qCAAe,+BAA+B;;MCMjC,sBAAsB;;;;;;IACjC,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,4DAAK,KAAK,EAAC,aAAa,GAAG,CACvB,EACN;KACH;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/searchcraft-spinner-dark/searchcraft-spinner-dark.module.scss?tag=searchcraft-spinner-dark&encapsulation=shadow","src/components/searchcraft-spinner-dark/searchcraft-spinner-dark.tsx"],"sourcesContent":["$spinner-size: 20px;\n\n.spinnerContainer {\n  background-color: transparent;\n  height: $spinner-size;\n  width: $spinner-size;\n}\n\n.spinnerDark {\n  height: 100%;\n  width: 100%;\n  background: conic-gradient(#000 50%, #FFFFFF);\n  clip-path: circle(50%);\n  mask-image: radial-gradient(circle at center, rgba(0,0,0,0) calc($spinner-size/3), rgba(0,0,0,1) calc($spinner-size/3));\n  animation: spinning 1s linear infinite;\n}\n\n.spinnerLight {\n  height: 100%;\n  width: 100%;\n  background: conic-gradient(#737373 50%, #FFFFFF);\n  clip-path: circle(50%);\n  mask-image: radial-gradient(circle at center, rgba(0,0,0,0) calc($spinner-size/3), rgba(0,0,0,1) calc($spinner-size/3));\n  animation: spinning 1s linear infinite;\n}\n\n@keyframes spinning {\n  0% { transform: rotate(0deg); }\n  50% {transform: rotate(180deg);}\n  100% { transform: rotate(360deg); }\n}","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'searchcraft-spinner-dark',\n  styleUrl: 'searchcraft-spinner-dark.module.scss',\n  shadow: true,\n})\nexport class SearchcraftSpinnerDark {\n  render() {\n    return (\n      <div class='spinnerContainer'>\n        <div class='spinnerDark' />\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-16a533e3.js","mappings":";;AAAA,MAAM,+BAA+B,GAAG,sqBAAsqB,CAAC;AAC/sB,qCAAe,+BAA+B;;MCMjC,sBAAsB;;;;;;IACjC,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,4DAAK,KAAK,EAAC,aAAa,GAAG,CACvB,EACN;KACH;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/searchcraft-spinner-dark/searchcraft-spinner-dark.module.scss?tag=searchcraft-spinner-dark&encapsulation=shadow","src/components/searchcraft-spinner-dark/searchcraft-spinner-dark.tsx"],"sourcesContent":["$spinner-size: 20px;\n\n.spinnerContainer {\n  background-color: transparent;\n  height: $spinner-size;\n  width: $spinner-size;\n}\n\n.spinnerDark {\n  height: 100%;\n  width: 100%;\n  background: conic-gradient(#000 50%, #FFFFFF);\n  clip-path: circle(50%);\n  mask-image: radial-gradient(circle at center, rgba(0,0,0,0) calc($spinner-size/3), rgba(0,0,0,1) calc($spinner-size/3));\n  animation: spinning 1s linear infinite;\n}\n\n.spinnerLight {\n  height: 100%;\n  width: 100%;\n  background: conic-gradient(#737373 50%, #FFFFFF);\n  clip-path: circle(50%);\n  mask-image: radial-gradient(circle at center, rgba(0,0,0,0) calc($spinner-size/3), rgba(0,0,0,1) calc($spinner-size/3));\n  animation: spinning 1s linear infinite;\n}\n\n@keyframes spinning {\n  0% { transform: rotate(0deg); }\n  50% {transform: rotate(180deg);}\n  100% { transform: rotate(360deg); }\n}","import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'searchcraft-spinner-dark',\n  styleUrl: 'searchcraft-spinner-dark.module.scss',\n  shadow: true,\n})\nexport class SearchcraftSpinnerDark {\n  render() {\n    return (\n      <div class='spinnerContainer'>\n        <div class='spinnerDark' />\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-5e3152c4.js → p-17c94ac1.js}

@@ -1,8 +1,3 @@
-/**
- * Utility function to parse custom styles from a string or object.
- * @param styles - Custom styles as a stringified JSON or an object.
- * @returns {Record<string, string>} - Parsed styles as an object.
- */
 function parseCustomStyles(styles) {
     if (typeof styles === 'string') {
         try {
@@ -38,7 +33,16 @@ function extractDynamicProperties(document, keys) {
     });
     return extractedProperties;
 }
+function serializeStyles(styles) {
+    try {
+        return JSON.stringify(styles);
+    }
+    catch (error) {
+        console.error('Error serializing styles:', error);
+        return '{}';
+    }
+}
 
-export { parseSearchKeys as a, extractDynamicProperties as e, parseCustomStyles as p };
+export { parseSearchKeys as a, extractDynamicProperties as e, parseCustomStyles as p, serializeStyles as s };
 
-//# sourceMappingURL=p-5e3152c4.js.map
+//# sourceMappingURL=p-17c94ac1.js.map

package/dist/components/p-17c94ac1.js.map

@@ -0,0 +1 @@
+{"file":"p-17c94ac1.js","mappings":"SAAgB,iBAAiB,CAC/B,MAAuC;IAEvC,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;QAC9B,IAAI;YACF,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;SAC3B;QAAC,OAAO,KAAK,EAAE;YACd,OAAO,CAAC,KAAK,CAAC,8BAA8B,EAAE,MAAM,CAAC,CAAC;YACtD,OAAO,EAAE,CAAC;SACX;KACF;IACD,OAAO,MAAM,IAAI,EAAE,CAAC;AACtB,CAAC;SAEe,eAAe,CAAC,UAAkB;IAChD,IAAI;;QAEF,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAC1C,IACE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC;YACzB,UAAU,CAAC,KAAK,CAAC,CAAC,GAAG,KAAK,OAAO,GAAG,KAAK,QAAQ,CAAC,EAClD;YACA,OAAO,UAAU,CAAC;SACnB;QACD,OAAO,CAAC,IAAI,CACV,2EAA2E,CAC5E,CAAC;QACF,OAAO,EAAE,CAAC;KACX;IAAC,OAAO,KAAK,EAAE;QACd,OAAO,CAAC,KAAK,CAAC,6BAA6B,EAAE,KAAK,CAAC,CAAC;QACpD,OAAO,EAAE,CAAC;KACX;AACH,CAAC;SAEe,wBAAwB,CACtC,QAAyC,EACzC,IAAc;IAEd,MAAM,mBAAmB,GAAoC,EAAE,CAAC;IAChE,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG;QACf,mBAAmB,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;KAChD,CAAC,CAAC;IACH,OAAO,mBAAmB,CAAC;AAC7B,CAAC;SAEe,eAAe,CAC7B,MAA8C;IAE9C,IAAI;QACF,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;KAC/B;IAAC,OAAO,KAAK,EAAE;QACd,OAAO,CAAC,KAAK,CAAC,2BAA2B,EAAE,KAAK,CAAC,CAAC;QAClD,OAAO,IAAI,CAAC;KACb;AACH;;;;","names":[],"sources":["src/utils/utils.ts"],"sourcesContent":["export function parseCustomStyles(\n  styles: string | Record<string, string>,\n): Record<string, string> {\n  if (typeof styles === 'string') {\n    try {\n      return JSON.parse(styles);\n    } catch (error) {\n      console.error('Invalid customStyles format:', styles);\n      return {};\n    }\n  }\n  return styles || {};\n}\n\nexport function parseSearchKeys(searchKeys: string): string[] {\n  try {\n    // Attempt to parse the string as JSON\n    const parsedKeys = JSON.parse(searchKeys);\n    if (\n      Array.isArray(parsedKeys) &&\n      parsedKeys.every((key) => typeof key === 'string')\n    ) {\n      return parsedKeys; // Return the array if it's valid\n    }\n    console.warn(\n      'searchKeys must be a JSON array of strings. Defaulting to an empty array.',\n    );\n    return [];\n  } catch (error) {\n    console.error('Failed to parse searchKeys:', error);\n    return []; // Return an empty array in case of a parsing error\n  }\n}\n\nexport function extractDynamicProperties(\n  document: Record<string, string | number>,\n  keys: string[],\n) {\n  const extractedProperties: Record<string, string | number> = {};\n  keys.forEach((key) => {\n    extractedProperties[key] = document[key] || '';\n  });\n  return extractedProperties;\n}\n\nexport function serializeStyles(\n  styles: Record<string, Record<string, string>>,\n): string {\n  try {\n    return JSON.stringify(styles);\n  } catch (error) {\n    console.error('Error serializing styles:', error);\n    return '{}';\n  }\n}\n"],"version":3}

package/dist/components/{p-cb75ba7a.js → p-199065b5.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-066c8210.js';
+import { p as proxyCustomElement, H, h } from './p-c69651f6.js';
 import { c as classNames } from './p-5cdc6210.js';
 
 const searchcraftInputCaptionModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.inputCaptionLightLTR{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#404040}.inputCaptionDarkLTR{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#E6E6E6}.inputCaptionErrorLightLTR{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#990000}.inputCaptionErrorDarkLTR{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#FFB3B3}.inputCaptionLightRTL{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#404040;text-align:right}.inputCaptionDarkRTL{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#E6E6E6;text-align:right}.inputCaptionErrorLightRTL{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#990000;text-align:right}.inputCaptionErrorDarkRTL{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-top:4px;color:#FFB3B3;text-align:right}";
@@ -58,4 +58,4 @@ defineCustomElement();
 
 export { SearchcraftInputCaption as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-cb75ba7a.js.map
+//# sourceMappingURL=p-199065b5.js.map

package/dist/components/{p-cb75ba7a.js.map → p-199065b5.js.map}

@@ -1 +1 @@
-{"file":"p-cb75ba7a.js","mappings":";;;AAAA,MAAM,gCAAgC,GAAG,8oCAA8oC,CAAC;AACxrC,sCAAe,gCAAgC;;MCOlC,uBAAuB;;;;;;qCAED,EAAE;iCACP,cAAc;sCACT,KAAK;qBACrB,OAAO;;IAEhB,YAAY;QAClB,OAAO,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC;KAC/B;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,sBAAsB,IAChC,SACE,KAAK,EAAE,UAAU,CACf,IAAI,CAAC,KAAK;kBACN,IAAI,CAAC,YAAY;sBACf,2BAA2B;sBAC3B,0BAA0B;kBAC5B,IAAI,CAAC,YAAY;sBACf,sBAAsB;sBACtB,qBAAqB,EAC3B,IAAI,CAAC,qBAAqB,EAC1B,4BAA4B,CAC7B,IAEA,IAAI,CAAC,iBAAiB,CACrB,KAEJ,SACE,KAAK,EAAE,UAAU,CACf,IAAI,CAAC,KAAK;kBACN,IAAI,CAAC,YAAY;sBACf,2BAA2B;sBAC3B,0BAA0B;kBAC5B,IAAI,CAAC,YAAY;sBACf,sBAAsB;sBACtB,qBAAqB,EAC3B,IAAI,CAAC,qBAAqB,EAC1B,4BAA4B,CAC7B,IAEA,IAAI,CAAC,iBAAiB,CACrB,CACL,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/searchcraft-input-caption/searchcraft-input-caption.module.scss?tag=searchcraft-input-caption&encapsulation=shadow","src/components/searchcraft-input-caption/searchcraft-input-caption.tsx"],"sourcesContent":["@import '../../utils/theme';\n\n:root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n@mixin input-caption-base {\n  font-family: var(--font-stack);\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 16px;\n  margin-top: 4px;\n}\n\n@mixin input-caption-base-light {\n  @include input-caption-base;\n  color: $light-input-caption-color;\n}\n\n@mixin input-caption-base-dark {\n  @include input-caption-base;\n  color: $dark-input-caption-color;\n}\n\n.inputCaptionLightLTR {\n  @include input-caption-base-light;\n}\n\n.inputCaptionDarkLTR {\n  @include input-caption-base-dark;\n}\n\n.inputCaptionErrorLightLTR {\n  @include input-caption-base;\n  color: $light-input-caption-color-error;\n}\n\n.inputCaptionErrorDarkLTR {\n  @include input-caption-base;\n  color: $dark-input-caption-color-error;\n}\n\n.inputCaptionLightRTL {\n  @include input-caption-base-light;\n  text-align: right;\n}\n\n.inputCaptionDarkRTL {\n  @include input-caption-base-dark;\n  text-align: right;\n}\n\n.inputCaptionErrorLightRTL {\n  @include input-caption-base;\n  color: $light-input-caption-color-error;\n  text-align: right;\n}\n\n.inputCaptionErrorDarkRTL {\n  @include input-caption-base;\n  color: $dark-input-caption-color-error;\n  text-align: right;\n}","import { Component, Prop, h, State } from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'searchcraft-input-caption',\n  styleUrl: 'searchcraft-input-caption.module.scss',\n  shadow: true,\n})\nexport class SearchcraftInputCaption {\n  @Prop() error?: boolean;\n  @Prop() inputCaptionClassName? = '';\n  @Prop() inputCaptionValue = 'Enter Search';\n  @Prop() rightToLeftOrientation = false;\n  @State() theme = 'light';\n\n  private isLightTheme() {\n    return this.theme === 'light';\n  }\n\n  render() {\n    return this.rightToLeftOrientation ? (\n      <p\n        class={classNames(\n          this.error\n            ? this.isLightTheme\n              ? 'inputCaptionErrorLightRTL'\n              : 'inputCaptionErrorDarkRTL'\n            : this.isLightTheme\n              ? 'inputCaptionLightRTL'\n              : 'inputCaptionDarkRTL',\n          this.inputCaptionClassName,\n          '.searchcraft-input-caption',\n        )}\n      >\n        {this.inputCaptionValue}\n      </p>\n    ) : (\n      <p\n        class={classNames(\n          this.error\n            ? this.isLightTheme\n              ? 'inputCaptionErrorLightLTR'\n              : 'inputCaptionErrorDarkLTR'\n            : this.isLightTheme\n              ? 'inputCaptionLightLTR'\n              : 'inputCaptionDarkLTR',\n          this.inputCaptionClassName,\n          '.searchcraft-input-caption',\n        )}\n      >\n        {this.inputCaptionValue}\n      </p>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-199065b5.js","mappings":";;;AAAA,MAAM,gCAAgC,GAAG,8oCAA8oC,CAAC;AACxrC,sCAAe,gCAAgC;;MCOlC,uBAAuB;;;;;;qCAED,EAAE;iCACP,cAAc;sCACT,KAAK;qBACrB,OAAO;;IAEhB,YAAY;QAClB,OAAO,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC;KAC/B;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,sBAAsB,IAChC,SACE,KAAK,EAAE,UAAU,CACf,IAAI,CAAC,KAAK;kBACN,IAAI,CAAC,YAAY;sBACf,2BAA2B;sBAC3B,0BAA0B;kBAC5B,IAAI,CAAC,YAAY;sBACf,sBAAsB;sBACtB,qBAAqB,EAC3B,IAAI,CAAC,qBAAqB,EAC1B,4BAA4B,CAC7B,IAEA,IAAI,CAAC,iBAAiB,CACrB,KAEJ,SACE,KAAK,EAAE,UAAU,CACf,IAAI,CAAC,KAAK;kBACN,IAAI,CAAC,YAAY;sBACf,2BAA2B;sBAC3B,0BAA0B;kBAC5B,IAAI,CAAC,YAAY;sBACf,sBAAsB;sBACtB,qBAAqB,EAC3B,IAAI,CAAC,qBAAqB,EAC1B,4BAA4B,CAC7B,IAEA,IAAI,CAAC,iBAAiB,CACrB,CACL,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/searchcraft-input-caption/searchcraft-input-caption.module.scss?tag=searchcraft-input-caption&encapsulation=shadow","src/components/searchcraft-input-caption/searchcraft-input-caption.tsx"],"sourcesContent":["@import '../../utils/theme';\n\n:root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n@mixin input-caption-base {\n  font-family: var(--font-stack);\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 16px;\n  margin-top: 4px;\n}\n\n@mixin input-caption-base-light {\n  @include input-caption-base;\n  color: $light-input-caption-color;\n}\n\n@mixin input-caption-base-dark {\n  @include input-caption-base;\n  color: $dark-input-caption-color;\n}\n\n.inputCaptionLightLTR {\n  @include input-caption-base-light;\n}\n\n.inputCaptionDarkLTR {\n  @include input-caption-base-dark;\n}\n\n.inputCaptionErrorLightLTR {\n  @include input-caption-base;\n  color: $light-input-caption-color-error;\n}\n\n.inputCaptionErrorDarkLTR {\n  @include input-caption-base;\n  color: $dark-input-caption-color-error;\n}\n\n.inputCaptionLightRTL {\n  @include input-caption-base-light;\n  text-align: right;\n}\n\n.inputCaptionDarkRTL {\n  @include input-caption-base-dark;\n  text-align: right;\n}\n\n.inputCaptionErrorLightRTL {\n  @include input-caption-base;\n  color: $light-input-caption-color-error;\n  text-align: right;\n}\n\n.inputCaptionErrorDarkRTL {\n  @include input-caption-base;\n  color: $dark-input-caption-color-error;\n  text-align: right;\n}","import { Component, Prop, h, State } from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'searchcraft-input-caption',\n  styleUrl: 'searchcraft-input-caption.module.scss',\n  shadow: true,\n})\nexport class SearchcraftInputCaption {\n  @Prop() error?: boolean;\n  @Prop() inputCaptionClassName? = '';\n  @Prop() inputCaptionValue = 'Enter Search';\n  @Prop() rightToLeftOrientation = false;\n  @State() theme = 'light';\n\n  private isLightTheme() {\n    return this.theme === 'light';\n  }\n\n  render() {\n    return this.rightToLeftOrientation ? (\n      <p\n        class={classNames(\n          this.error\n            ? this.isLightTheme\n              ? 'inputCaptionErrorLightRTL'\n              : 'inputCaptionErrorDarkRTL'\n            : this.isLightTheme\n              ? 'inputCaptionLightRTL'\n              : 'inputCaptionDarkRTL',\n          this.inputCaptionClassName,\n          '.searchcraft-input-caption',\n        )}\n      >\n        {this.inputCaptionValue}\n      </p>\n    ) : (\n      <p\n        class={classNames(\n          this.error\n            ? this.isLightTheme\n              ? 'inputCaptionErrorLightLTR'\n              : 'inputCaptionErrorDarkLTR'\n            : this.isLightTheme\n              ? 'inputCaptionLightLTR'\n              : 'inputCaptionDarkLTR',\n          this.inputCaptionClassName,\n          '.searchcraft-input-caption',\n        )}\n      >\n        {this.inputCaptionValue}\n      </p>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-b1ff2296.js → p-2cc8c074.js}

@@ -1,8 +1,8 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './p-066c8210.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-c69651f6.js';
 import { c as classNames } from './p-5cdc6210.js';
-import { d as defineCustomElement$3 } from './p-d446eda4.js';
-import { d as defineCustomElement$2 } from './p-d6616aa5.js';
-import { d as defineCustomElement$1 } from './p-8d9551ce.js';
+import { d as defineCustomElement$3 } from './p-155f7a59.js';
+import { d as defineCustomElement$2 } from './p-16a533e3.js';
+import { d as defineCustomElement$1 } from './p-e8e40447.js';
 
 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:25px;top:50%;transform:translateY(-50%);width:20px}.inputClearButtonRTL{align-items:center;background:none;border:none;display:flex;height:20px;justify-content:center;left:25px;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:20px}";
 const SearchcraftClearInputButtonStyle0 = searchcraftClearInputButtonModuleCss;
@@ -66,4 +66,4 @@ defineCustomElement();
 
 export { SearchcraftClearInputButton as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-b1ff2296.js.map
+//# sourceMappingURL=p-2cc8c074.js.map