@searchcraft/javascript-sdk 0.1.5 → 0.1.6

package/dist/collection/provider/store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.js","sourceRoot":"","sources":["../../src/provider/store.tsx"],"names":[],"mappings":"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","sourcesContent":["import { create } from 'zustand';\nimport {\n  type CoreSDK as SearchcraftCore,\n  SDKDebugger,\n  LogLevel,\n  type SearchcraftResponse,\n} from '@searchcraft/core';\n\ninterface SearchcraftState {\n  query: string;\n  isRequesting: boolean;\n  searchResults: SearchcraftResponse | null;\n  setQuery: (query: string) => void;\n  setSearchResults: (results: SearchcraftResponse | null) => void;\n  setIsRequesting: (isRequesting: boolean) => void;\n  search: () => Promise<void>;\n  initialize: (searchcraft: SearchcraftCore, debug?: boolean) => void;\n}\n\ninterface ThemeState {\n  theme: 'light' | 'dark';\n  toggleTheme: () => void;\n}\n\n// Zustand store for Searchcraft state\nconst useSearchcraftStore = create<SearchcraftState>((set, get) => {\n  let searchcraft: SearchcraftCore | null = null;\n  let debuggerInstance: SDKDebugger | null = null;\n\n  const log = (level: LogLevel, message: string) => {\n    if (debuggerInstance) {\n      switch (level) {\n        case LogLevel.DEBUG:\n          debuggerInstance.debug(message);\n          break;\n        case LogLevel.INFO:\n          debuggerInstance.info(message);\n          break;\n        case LogLevel.WARN:\n          debuggerInstance.warn(message);\n          break;\n        case LogLevel.ERROR:\n          debuggerInstance.error(message);\n          break;\n      }\n    }\n  };\n\n  return {\n    query: '',\n    isRequesting: false,\n    searchResults: null,\n    setQuery: (query) => set({ query }),\n    setSearchResults: (results) => set({ searchResults: results }),\n    setIsRequesting: (isRequesting) => set({ isRequesting }),\n    search: async () => {\n      const { query, setIsRequesting, setSearchResults } = get();\n      if (!searchcraft) {\n        throw new Error('Searchcraft instance is not initialized.');\n      }\n      setIsRequesting(true);\n      log(LogLevel.INFO, `Starting search with query: \"${query}\"`);\n      try {\n        const results = await searchcraft.search({ query, mode: 'fuzzy' });\n        setSearchResults(results);\n        log(LogLevel.DEBUG, `Search results: ${JSON.stringify(results)}`);\n      } catch (error) {\n        console.error(`Search failed: ${(error as Error).message}`);\n        log(\n          LogLevel.ERROR,\n          `Search failed with error: ${(error as Error).message}`,\n        );\n      } finally {\n        setIsRequesting(false);\n      }\n    },\n    initialize: (searchcraftInstance, debug = false) => {\n      searchcraft = searchcraftInstance;\n      debuggerInstance = debug\n        ? new SDKDebugger({ logLevel: LogLevel.DEBUG })\n        : null;\n\n      log(LogLevel.INFO, 'Searchcraft store initialized.');\n    },\n  };\n});\n\n// Zustand store for Theme state\nconst useThemeStore = create<ThemeState>((set) => ({\n  theme: 'light',\n  toggleTheme: () =>\n    set((state) => ({ theme: state.theme === 'light' ? 'dark' : 'light' })),\n}));\n\n// Export the Zustand stores for use in Stencil components\nexport { useSearchcraftStore, useThemeStore };\n"]}

package/dist/collection/utils/utils.js

@@ -0,0 +1,45 @@
+export function parseCustomStyles(styles) {
+    if (typeof styles === 'string') {
+        try {
+            return JSON.parse(styles);
+        }
+        catch (error) {
+            console.error('Invalid customStyles format:', styles);
+            return {};
+        }
+    }
+    return styles || {};
+}
+export function parseSearchKeys(searchKeys) {
+    try {
+        // Attempt to parse the string as JSON
+        const parsedKeys = JSON.parse(searchKeys);
+        if (Array.isArray(parsedKeys) &&
+            parsedKeys.every((key) => typeof key === 'string')) {
+            return parsedKeys; // Return the array if it's valid
+        }
+        console.warn('searchKeys must be a JSON array of strings. Defaulting to an empty array.');
+        return [];
+    }
+    catch (error) {
+        console.error('Failed to parse searchKeys:', error);
+        return []; // Return an empty array in case of a parsing error
+    }
+}
+export function extractDynamicProperties(document, keys) {
+    const extractedProperties = {};
+    keys.forEach((key) => {
+        extractedProperties[key] = document[key] || '';
+    });
+    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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,5 @@
+export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-af65953e.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-9c617862.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"file":"index.js","mappings":";;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/{searchcraft-javascript-sdk/searchcraft-base-search-result.entry.js → components/p-04409bad.js}

@@ -1,10 +1,13 @@
-import { r as registerInstance, a as createEvent, h } from './index-2e19f875.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-af65953e.js';
 
 const searchcraftBaseSearchResultModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.interactiveResultContainerLight{background-color:#FAFAFA;align-items:flex-start;border-radius:16px;display:flex;position:relative;flex-direction:column;gap:16px;padding:8px}@media (min-width: 600px){.interactiveResultContainerLight{flex-direction:row}}.interactiveResultContainerDark{background-color:#2E2E2E;align-items:flex-start;border-radius:16px;display:flex;position:relative;flex-direction:column;gap:16px;padding:8px}@media (min-width: 600px){.interactiveResultContainerDark{flex-direction:row}}.resultContainer{align-items:flex-start;display:flex;flex-direction:column;gap:16px}@media (min-width: 600px){.resultContainer{flex-direction:row}}.interactiveIconLarge{display:inline-block;position:absolute;right:5px;top:8px}@media (max-width: 600px){.interactiveIconLarge{display:none}}.interactiveIconSmall{position:absolute;right:5px;top:-2px;display:inline-block}@media (min-width: 600px){.interactiveIconSmall{display:none}}.imageContainer{max-height:540px;max-width:100%}@media (min-width: 600px){.imageContainer{max-height:175px;max-width:100%}}.contentContainer{max-height:100%;max-width:100%}@media (min-width: 600px){.contentContainer{max-width:50%}}.imageLight{aspect-ratio:2/1;border-radius:8px;max-height:100%;max-width:100%;border:1px solid #D9D9D9}.imageDark{aspect-ratio:2/1;border-radius:8px;max-height:100%;max-width:100%;border:1px solid #333}.headingLight{font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;margin-bottom:4px;margin-top:0px;position:relative;color:#292929}.headingDark{font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;margin-bottom:4px;margin-top:0px;position:relative;color:#FFF}.subheadingLight{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-bottom:4px;margin-top:0px;color:#737373}.subheadingDark{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-bottom:4px;margin-top:0px;color:#BFBFBF}.primaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#404040}.primaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#E6E6E6}.secondaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#404040}.secondaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#E6E6E6}.tertiaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#404040}.tertiaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#E6E6E6}";
+const SearchcraftBaseSearchResultStyle0 = searchcraftBaseSearchResultModuleCss;
 
-const SearchcraftBaseSearchResult = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+const SearchcraftBaseSearchResult = /*@__PURE__*/ proxyCustomElement(class SearchcraftBaseSearchResult extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
         this.buttonCallback = createEvent(this, "buttonCallback", 7);
         this.keyDownCallback = createEvent(this, "keyDownCallback", 7);
         this.resultCallback = createEvent(this, "resultCallback", 7);
@@ -49,9 +52,35 @@ const SearchcraftBaseSearchResult = class {
                     : 'interactiveResultContainerDark'
                 : 'resultContainer', style: styles.container || {}, tabindex: '0', onClick: this.handleContainerClick, onKeyDown: this.keyDownCallback }, h("div", { key: 'f2154ce85febbe54956a7f28292b13113e3048dd', class: 'imageContainer' }, h("img", { key: '8063fa3b88ba56b9cba63ded99967c8097b8b185', alt: this.imageDescription, src: this.imageSource, style: styles.image || {}, class: isLightTheme ? 'imageLight' : 'imageDark' })), h("div", { key: 'e04a38165dc98b0d72f215e4252f7065db3664d6', class: 'contentContainer' }, h("h2", { key: '33d2d3483d7c0f4e1ae7e15ba5895a8b15b45a34', style: styles.heading || {}, class: isLightTheme ? 'headingLight' : 'headingDark' }, this.headingText), h("h3", { key: '9587d0acea25ede251eba3e79dba932a5565f51a', style: styles.subheading || {}, class: isLightTheme ? 'subheadingLight' : 'subheadingDark' }, this.subheadingText), h("p", { key: '74f55a23963d5ddc8753d68b164587865da2dd13', style: styles.primaryContent || {}, class: isLightTheme ? 'primaryContentLight' : 'primaryContentDark' }, this.primaryContent), h("div", { key: 'db4e498b08c7075b276e90d8ed233dd48992ecdd' }, h("p", { key: 'c09d3164a15452c5fbfa23a54028f2080dd56550', style: styles.secondaryContent || {}, class: isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark' }, this.secondaryContent), h("p", { key: 'ae78c4f53d9b12d62cad6b408aad5caf103303db', style: styles.tertiaryContent || {}, class: isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark' }, this.tertiaryContent)), this.buttonText && (h("button", { key: '3ea036c680f3970e9d6f1b00b3505f11e338922c', onClick: this.handleButtonClick, style: styles.button || {}, type: 'button' }, this.buttonText)))));
     }
-};
-SearchcraftBaseSearchResult.style = searchcraftBaseSearchResultModuleCss;
+    static get style() { return SearchcraftBaseSearchResultStyle0; }
+}, [1, "searchcraft-base-search-result", {
+        "buttonText": [1, "button-text"],
+        "imageDescription": [1, "image-description"],
+        "imageSource": [1, "image-source"],
+        "isInteractive": [4, "is-interactive"],
+        "primaryContent": [1, "primary-content"],
+        "secondaryContent": [1, "secondary-content"],
+        "tertiaryContent": [1, "tertiary-content"],
+        "headingText": [1, "heading-text"],
+        "subheadingText": [1, "subheading-text"],
+        "themeMode": [1, "theme-mode"],
+        "customStyles": [1, "custom-styles"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["searchcraft-base-search-result"];
+    components.forEach(tagName => { switch (tagName) {
+        case "searchcraft-base-search-result":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SearchcraftBaseSearchResult);
+            }
+            break;
+    } });
+}
+defineCustomElement();
 
-export { SearchcraftBaseSearchResult as searchcraft_base_search_result };
+export { SearchcraftBaseSearchResult as S, defineCustomElement as d };
 
-//# sourceMappingURL=searchcraft-base-search-result.entry.js.map
+//# sourceMappingURL=p-04409bad.js.map

package/dist/components/p-04409bad.js.map

@@ -0,0 +1 @@
+{"file":"p-04409bad.js","mappings":";;AAAA,MAAM,oCAAoC,GAAG,y0FAAy0F,CAAC;AACv3F,0CAAe,oCAAoC;;MCMtC,2BAA2B;;;;;;;;QAa7B,mBAAc,GAAe,SAAQ,CAAC;QACtC,oBAAe,GAAe,SAAQ,CAAC;QACvC,mBAAc,GAAe,SAAQ,CAAC;QAEvC,sBAAiB,GAAG;YAC1B,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB,CAAC;QAEM,yBAAoB,GAAG;YAC7B,IAAI,IAAI,CAAC,aAAa,EAAE;gBACtB,IAAI,CAAC,cAAc,EAAE,CAAC;aACvB;SACF,CAAC;0BAxBmB,EAAE;gCACI,EAAE;2BACP,EAAE;6BACA,KAAK;8BACJ,EAAE;gCACA,EAAE;+BACH,EAAE;2BACN,EAAE;8BACC,EAAE;yBACW,OAAO;4BACtB,IAAI;;IAgBnB,WAAW;QACjB,IAAI;YACF,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SACtC;QAAC,OAAO,KAAK,EAAE;YACd,OAAO,CAAC,KAAK,CAAC,8BAA8B,EAAE,KAAK,CAAC,CAAC;YACrD,OAAO,EAAE,CAAC;SACX;KACF;IAED,MAAM;QACJ,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC;QAChD,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAElC,QACE,4DACE,KAAK,EACH,IAAI,CAAC,aAAa;kBACd,YAAY;sBACV,iCAAiC;sBACjC,gCAAgC;kBAClC,iBAAiB,EAEvB,KAAK,EAAE,MAAM,CAAC,SAAS,IAAI,EAAE,EAC7B,QAAQ,EAAC,GAAG,EACZ,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClC,SAAS,EAAE,IAAI,CAAC,eAAe,IAE/B,4DAAK,KAAK,EAAC,gBAAgB,IACzB,4DACE,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAC1B,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,KAAK,EAAE,MAAM,CAAC,KAAK,IAAI,EAAE,EACzB,KAAK,EAAE,YAAY,GAAG,YAAY,GAAG,WAAW,GAChD,CACE,EACN,4DAAK,KAAK,EAAC,kBAAkB,IAC3B,2DACE,KAAK,EAAE,MAAM,CAAC,OAAO,IAAI,EAAE,EAC3B,KAAK,EAAE,YAAY,GAAG,cAAc,GAAG,aAAa,IAEnD,IAAI,CAAC,WAAW,CACd,EACL,2DACE,KAAK,EAAE,MAAM,CAAC,UAAU,IAAI,EAAE,EAC9B,KAAK,EAAE,YAAY,GAAG,iBAAiB,GAAG,gBAAgB,IAEzD,IAAI,CAAC,cAAc,CACjB,EACL,0DACE,KAAK,EAAE,MAAM,CAAC,cAAc,IAAI,EAAE,EAClC,KAAK,EAAE,YAAY,GAAG,qBAAqB,GAAG,oBAAoB,IAEjE,IAAI,CAAC,cAAc,CAClB,EACJ,8DACE,0DACE,KAAK,EAAE,MAAM,CAAC,gBAAgB,IAAI,EAAE,EACpC,KAAK,EACH,YAAY,GAAG,uBAAuB,GAAG,sBAAsB,IAGhE,IAAI,CAAC,gBAAgB,CACpB,EACJ,0DACE,KAAK,EAAE,MAAM,CAAC,eAAe,IAAI,EAAE,EACnC,KAAK,EACH,YAAY,GAAG,sBAAsB,GAAG,qBAAqB,IAG9D,IAAI,CAAC,eAAe,CACnB,CACA,EACL,IAAI,CAAC,UAAU,KACd,+DACE,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,KAAK,EAAE,MAAM,CAAC,MAAM,IAAI,EAAE,EAC1B,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,UAAU,CACT,CACV,CACG,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/searchcraft-base-search-result/searchcraft-base-search-result.module.scss?tag=searchcraft-base-search-result&encapsulation=shadow","src/components/searchcraft-base-search-result/searchcraft-base-search-result.tsx"],"sourcesContent":["@import '../../utils/theme';\n\n:root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n@mixin interactive-result-container-base {\n  align-items: flex-start;\n  border-radius: 16px;\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  gap: 16px;\n  padding: 8px;\n\n  @media (min-width: 600px) {\n    flex-direction: row;\n  }\n}\n\n.interactiveResultContainerLight {\n  background-color: $light-search-result-container-background;\n  @include interactive-result-container-base;\n}\n\n.interactiveResultContainerDark {\n  background-color: $dark-search-result-container-background;\n  @include interactive-result-container-base;\n}\n\n.resultContainer {\n  align-items: flex-start;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n\n  @media (min-width: 600px) {\n    flex-direction: row;\n  }\n}\n\n.interactiveIconLarge {\n  display: inline-block;\n  position: absolute;\n  right: 5px;\n  top: 8px;\n\n\n  @media (max-width: 600px) {\n   display: none;\n  }\n}\n\n.interactiveIconSmall {\n  position: absolute;\n  right: 5px;\n  top: -2px;\n  display: inline-block;\n\n\n  @media (min-width: 600px) {\n   display: none;\n  }\n}\n\n.imageContainer {\n  max-height: 540px;\n  max-width: 100%;\n\n  @media (min-width: 600px) {\n    max-height: 175px;\n    max-width: 100%;\n  }\n}\n\n.contentContainer {\n  max-height: 100%;\n  max-width: 100%;\n\n  @media (min-width: 600px) {\n    max-width: 50%;\n  }\n}\n\n@mixin image-base {\n  aspect-ratio: 2 / 1;\n  border-radius: 8px;\n  max-height: 100%;\n  max-width: 100%;\n}\n\n.imageLight {\n  @include image-base;\n  border: 1px solid $light-search-result-image-border;\n}\n\n.imageDark {\n  @include image-base;\n  border: 1px solid $dark-search-result-image-border;\n}\n\n@mixin heading-base {\n  font-family: var(--font-stack);\n  font-size: 16px;\n  font-weight: 700;\n  line-height: 20px;\n  margin-bottom: 4px;\n  margin-top: 0px;\n  position: relative;\n}\n\n.headingLight {\n  @include heading-base;\n  color: $light-search-result-heading-color;\n}\n\n.headingDark {\n  @include heading-base;\n  color: $dark-search-result-heading-color;\n}\n\n@mixin subheading-base {\n  font-family: var(--font-stack);\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 16px;\n  margin-bottom: 4px;\n  margin-top: 0px;\n}\n\n.subheadingLight {\n  @include subheading-base;\n  color: $light-search-result-subheading-color;\n}\n\n.subheadingDark {\n  @include subheading-base;\n  color: $dark-search-result-subheading-color\n}\n\n@mixin body-content-base {\n  font-family: var(--font-stack);\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 4px;\n  margin-top: 0px;\n}\n\n.primaryContentLight {\n  @include body-content-base;\n  color: $light-search-result-body-content-color;\n}\n\n.primaryContentDark {\n  @include body-content-base;\n  color: $dark-search-result-body-content-color;\n}\n\n.secondaryContentLight {\n  @include body-content-base;\n  color: $light-search-result-body-content-color;\n}\n\n.secondaryContentDark {\n  @include body-content-base;\n  color: $dark-search-result-body-content-color;\n}\n\n.tertiaryContentLight {\n  @include body-content-base;\n  color: $light-search-result-body-content-color;\n}\n\n.tertiaryContentDark {\n  @include body-content-base;\n  color: $dark-search-result-body-content-color;\n}","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  private parseStyles(): Record<string, { [key: string]: string }> {\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          <div>\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          </div>\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"],"version":3}

package/dist/components/p-04bad430.js

@@ -0,0 +1,34 @@
+import { p as proxyCustomElement, H, h } from './p-af65953e.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;
+
+const SearchcraftSpinnerDark = /*@__PURE__*/ proxyCustomElement(class SearchcraftSpinnerDark extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    render() {
+        return (h("div", { key: '76685b09609a42adbff41ee43ecb4b4e161d4598', class: 'spinnerContainer' }, h("div", { key: '7e7a01010f21e5b95358b7385d41a45e90a5b3bd', class: 'spinnerDark' })));
+    }
+    static get style() { return SearchcraftSpinnerDarkStyle0; }
+}, [1, "searchcraft-spinner-dark"]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["searchcraft-spinner-dark"];
+    components.forEach(tagName => { switch (tagName) {
+        case "searchcraft-spinner-dark":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SearchcraftSpinnerDark);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SearchcraftSpinnerDark as S, defineCustomElement as d };
+
+//# sourceMappingURL=p-04bad430.js.map

package/dist/components/p-04bad430.js.map

@@ -0,0 +1 @@
+{"file":"p-04bad430.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-07fba086.js

@@ -0,0 +1,69 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-af65953e.js';
+import { c as classNames } from './p-5cdc6210.js';
+import { d as defineCustomElement$3 } from './p-a3ea7edc.js';
+import { d as defineCustomElement$2 } from './p-04bad430.js';
+import { d as defineCustomElement$1 } from './p-781a9a8c.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;
+
+const SearchcraftClearInputButton = /*@__PURE__*/ proxyCustomElement(class SearchcraftClearInputButton extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.clearInput = createEvent(this, "clearInput", 7);
+        // Added a click handler to emit the event
+        this.handleClearClick = (event) => {
+            event.preventDefault(); // Prevent default if necessary
+            this.clearInput.emit(); // Emit the event
+        };
+        this.isRequesting = false;
+        this.rightToLeftOrientation = false;
+        this.theme = 'light';
+    }
+    isLightTheme() {
+        return this.theme === 'light';
+    }
+    render() {
+        return this.rightToLeftOrientation ? (h("button", { class: classNames('inputClearButtonRTL', '.sc-clear-input-button-rtl'), onClick: this.handleClearClick, type: 'button' }, this.isRequesting ? (this.isLightTheme ? (h("searchcraft-spinner-light", null)) : (h("searchcraft-spinner-dark", null))) : this.isLightTheme ? (h("searchcraft-clear-icon-set", { type: 'clear-light' })) : (h("searchcraft-clear-icon-set", { type: 'clear-dark' })))) : (h("button", { class: classNames('inputClearButtonLTR', '.sc-clear-input-button-ltr'), onClick: this.handleClearClick, type: 'button' }, this.isRequesting ? (this.isLightTheme ? (h("searchcraft-spinner-light", null)) : (h("searchcraft-spinner-dark", null))) : this.isLightTheme ? (h("searchcraft-clear-icon-set", { type: 'clear-light' })) : (h("searchcraft-clear-icon-set", { type: 'clear-dark' }))));
+    }
+    static get style() { return SearchcraftClearInputButtonStyle0; }
+}, [1, "searchcraft-clear-input-button", {
+        "isRequesting": [4, "is-requesting"],
+        "rightToLeftOrientation": [4, "right-to-left-orientation"],
+        "theme": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["searchcraft-clear-input-button", "searchcraft-clear-icon-set", "searchcraft-spinner-dark", "searchcraft-spinner-light"];
+    components.forEach(tagName => { switch (tagName) {
+        case "searchcraft-clear-input-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SearchcraftClearInputButton);
+            }
+            break;
+        case "searchcraft-clear-icon-set":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "searchcraft-spinner-dark":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "searchcraft-spinner-light":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SearchcraftClearInputButton as S, defineCustomElement as d };
+
+//# sourceMappingURL=p-07fba086.js.map

package/dist/components/p-07fba086.js.map

@@ -0,0 +1 @@
+{"file":"p-07fba086.js","mappings":";;;;;;AAAA,MAAM,oCAAoC,GAAG,mcAAmc,CAAC;AACjf,0CAAe,oCAAoC;;MCctC,2BAA2B;;;;;;;QAc9B,qBAAgB,GAAG,CAAC,KAAiB;YAC3C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;SACxB,CAAC;4BAhBsB,KAAK;sCACI,KAAK;qBAKrB,OAAO;;IAEhB,YAAY;QAClB,OAAO,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC;KAC/B;IAQD,MAAM;QACJ,OAAO,IAAI,CAAC,sBAAsB,IAChC,cACE,KAAK,EAAE,UAAU,CAAC,qBAAqB,EAAE,4BAA4B,CAAC,EACtE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,IAChB,IAAI,CAAC,YAAY,IACf,oCAA6B,KAE7B,mCAA4B,CAC7B,IACC,IAAI,CAAC,YAAY,IACnB,kCAA4B,IAAI,EAAC,aAAa,GAAG,KAEjD,kCAA4B,IAAI,EAAC,YAAY,GAAG,CACjD,CACM,KAET,cACE,KAAK,EAAE,UAAU,CAAC,qBAAqB,EAAE,4BAA4B,CAAC,EACtE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,IAChB,IAAI,CAAC,YAAY,IACf,oCAA6B,KAE7B,mCAA4B,CAC7B,IACC,IAAI,CAAC,YAAY,IACnB,kCAA4B,IAAI,EAAC,aAAa,GAAG,KAEjD,kCAA4B,IAAI,EAAC,YAAY,GAAG,CACjD,CACM,CACV,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/searchcraft-clear-input-button/searchcraft-clear-input-button.module.scss?tag=searchcraft-clear-input-button&encapsulation=shadow","src/components/searchcraft-clear-input-button/searchcraft-clear-input-button.tsx"],"sourcesContent":[":root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n.inputClearButtonLTR {\n  align-items: center;\n  background: none;\n  border: none;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  padding: 0;\n  position: absolute;\n  right: 25px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 20px;\n}\n\n.inputClearButtonRTL {\n  align-items: center;\n  background: none;\n  border: none;\n  display: flex;\n  height: 20px;\n  justify-content: center;\n  left: 25px;\n  padding: 0;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 20px;\n}","import {\n  Component,\n  Event,\n  type EventEmitter,\n  Prop,\n  h,\n  State,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'searchcraft-clear-input-button',\n  styleUrl: 'searchcraft-clear-input-button.module.scss',\n  shadow: true,\n})\nexport class SearchcraftClearInputButton {\n  @Prop() isRequesting? = false;\n  @Prop() rightToLeftOrientation = false;\n\n  // Updated `clearInput` to an EventEmitter\n  @Event() clearInput: EventEmitter<void>;\n\n  @State() theme = 'light';\n\n  private isLightTheme() {\n    return this.theme === 'light';\n  }\n\n  // Added a click handler to emit the event\n  private handleClearClick = (event: MouseEvent) => {\n    event.preventDefault(); // Prevent default if necessary\n    this.clearInput.emit(); // Emit the event\n  };\n\n  render() {\n    return this.rightToLeftOrientation ? (\n      <button\n        class={classNames('inputClearButtonRTL', '.sc-clear-input-button-rtl')}\n        onClick={this.handleClearClick}\n        type='button'\n      >\n        {this.isRequesting ? (\n          this.isLightTheme ? (\n            <searchcraft-spinner-light />\n          ) : (\n            <searchcraft-spinner-dark />\n          )\n        ) : this.isLightTheme ? (\n          <searchcraft-clear-icon-set type='clear-light' />\n        ) : (\n          <searchcraft-clear-icon-set type='clear-dark' />\n        )}\n      </button>\n    ) : (\n      <button\n        class={classNames('inputClearButtonLTR', '.sc-clear-input-button-ltr')}\n        onClick={this.handleClearClick}\n        type='button'\n      >\n        {this.isRequesting ? (\n          this.isLightTheme ? (\n            <searchcraft-spinner-light />\n          ) : (\n            <searchcraft-spinner-dark />\n          )\n        ) : this.isLightTheme ? (\n          <searchcraft-clear-icon-set type='clear-light' />\n        ) : (\n          <searchcraft-clear-icon-set type='clear-dark' />\n        )}\n      </button>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,48 @@
+function parseCustomStyles(styles) {
+    if (typeof styles === 'string') {
+        try {
+            return JSON.parse(styles);
+        }
+        catch (error) {
+            console.error('Invalid customStyles format:', styles);
+            return {};
+        }
+    }
+    return styles || {};
+}
+function parseSearchKeys(searchKeys) {
+    try {
+        // Attempt to parse the string as JSON
+        const parsedKeys = JSON.parse(searchKeys);
+        if (Array.isArray(parsedKeys) &&
+            parsedKeys.every((key) => typeof key === 'string')) {
+            return parsedKeys; // Return the array if it's valid
+        }
+        console.warn('searchKeys must be a JSON array of strings. Defaulting to an empty array.');
+        return [];
+    }
+    catch (error) {
+        console.error('Failed to parse searchKeys:', error);
+        return []; // Return an empty array in case of a parsing error
+    }
+}
+function extractDynamicProperties(document, keys) {
+    const extractedProperties = {};
+    keys.forEach((key) => {
+        extractedProperties[key] = document[key] || '';
+    });
+    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, serializeStyles as s };
+
+//# 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/{searchcraft-javascript-sdk/searchcraft-input.entry.js → components/p-350c8005.js}

@@ -1,13 +1,22 @@
-import { r as registerInstance, a as createEvent, h, F as Fragment } from './index-2e19f875.js';
-import { c as classNames } from './index-d6567b9c.js';
-import { p as parseCustomStyles } from './utils-7bff0c78.js';
-import './_commonjsHelpers-63cbe26c.js';
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './p-af65953e.js';
+import { c as classNames } from './p-5cdc6210.js';
+import { p as parseCustomStyles } from './p-17c94ac1.js';
+import { d as defineCustomElement$7 } from './p-a3ea7edc.js';
+import { d as defineCustomElement$6 } from './p-07fba086.js';
+import { d as defineCustomElement$5 } from './p-85d96d9b.js';
+import { d as defineCustomElement$4 } from './p-3b07b0dc.js';
+import { d as defineCustomElement$3 } from './p-d33fdd81.js';
+import { d as defineCustomElement$2 } from './p-04bad430.js';
+import { d as defineCustomElement$1 } from './p-781a9a8c.js';
 
 const searchcraftInputModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.inputContainerLTR{position:relative;width:100%}.inputContainerRTL{position:relative;width:100%;margin-left:8px}.inputLightLTR{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#EDEDED;color:#292929;margin-right:8px;padding-left:36px;padding-right:16px}.inputLightLTR::placeholder{font-family:var(--font-stack);font-size:16px}.inputLightLTR::placeholder{color:#737373}.inputLightLTR:focus{outline:2px solid #000}.inputDarkLTR{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#1A1A1A;color:#FFF;margin-right:8px;padding-left:36px;padding-right:16px}.inputDarkLTR::placeholder{font-family:var(--font-stack);font-size:16px}.inputDarkLTR::placeholder{color:#BFBFBF}.inputDarkLTR:focus{outline:2px solid #FFF}.inputErrorLightLTR{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#EDEDED;color:#292929;outline:2px solid #c00;margin-right:8px;padding-left:36px;padding-right:16px}.inputErrorLightLTR::placeholder{font-family:var(--font-stack);font-size:16px}.inputErrorLightLTR::placeholder{color:#737373}.inputErrorLightLTR:focus{outline:2px solid #000}.inputErrorLightLTR:focus-visible{outline:2px solid #c00}.inputErrorDarkLTR{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#1A1A1A;color:#FFF;outline:2px solid #FFB3B3;margin-right:8px;padding-left:36px;padding-right:16px}.inputErrorDarkLTR::placeholder{font-family:var(--font-stack);font-size:16px}.inputErrorDarkLTR::placeholder{color:#BFBFBF}.inputErrorDarkLTR:focus{outline:2px solid #FFF}.inputErrorDarkLTR:focus-visible{outline:2px solid #FFB3B3}.inputLightRTL{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#EDEDED;color:#292929;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputLightRTL::placeholder{font-family:var(--font-stack);font-size:16px}.inputLightRTL::placeholder{color:#737373}.inputLightRTL:focus{outline:2px solid #000}.inputDarkRTL{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#1A1A1A;color:#FFF;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputDarkRTL::placeholder{font-family:var(--font-stack);font-size:16px}.inputDarkRTL::placeholder{color:#BFBFBF}.inputDarkRTL:focus{outline:2px solid #FFF}.inputErrorLightRTL{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#EDEDED;color:#292929;outline:2px solid #c00;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputErrorLightRTL::placeholder{font-family:var(--font-stack);font-size:16px}.inputErrorLightRTL::placeholder{color:#737373}.inputErrorLightRTL:focus{outline:2px solid #000}.inputErrorLightRTL:focus-visible{outline:2px solid #c00}.inputErrorDarkRTL{border:none;border-radius:8px;font-family:var(--font-stack);outline:none;padding-bottom:15px;padding-top:15px;width:100%;background-color:#1A1A1A;color:#FFF;outline:2px solid #FFB3B3;margin-left:8px;padding-left:16px;padding-right:36px;text-align:right}.inputErrorDarkRTL::placeholder{font-family:var(--font-stack);font-size:16px}.inputErrorDarkRTL::placeholder{color:#BFBFBF}.inputErrorDarkRTL:focus{outline:2px solid #FFF}.inputErrorDarkRTL:focus-visible{outline:2px solid #FFB3B3}.inputWrapper{align-items:center;display:flex;position:relative;width:100%}";
+const SearchcraftInputStyle0 = searchcraftInputModuleCss;
 
-const SearchcraftInput = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+const SearchcraftInput = /*@__PURE__*/ proxyCustomElement(class SearchcraftInput extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
         this.clearInput = createEvent(this, "clearInput", 7);
         this.searchInputChange = createEvent(this, "searchInputChange", 7);
         this.customStyles = {};
@@ -61,9 +70,72 @@ const SearchcraftInput = class {
                 }
               `), this.inputCaptionValue && (h("searchcraft-input-caption", { inputCaptionClassName: this.inputCaptionClassName, inputCaptionValue: this.inputCaptionValue, rightToLeftOrientation: this.rightToLeftOrientation })), this.query.length > 0 && (h("searchcraft-clear-input-button", { isRequesting: this.isRequesting, onClearInput: this.handleClearInput, rightToLeftOrientation: this.rightToLeftOrientation }))))));
     }
-};
-SearchcraftInput.style = searchcraftInputModuleCss;
+    static get style() { return SearchcraftInputStyle0; }
+}, [1, "searchcraft-input", {
+        "customStyles": [1, "custom-styles"],
+        "error": [4],
+        "formClassName": [1, "form-class-name"],
+        "inputCaptionClassName": [1, "input-caption-class-name"],
+        "inputCaptionValue": [1, "input-caption-value"],
+        "inputClassName": [1, "input-class-name"],
+        "inputIconHeight": [2, "input-icon-height"],
+        "inputIconWidth": [2, "input-icon-width"],
+        "isRequesting": [4, "is-requesting"],
+        "placeholderValue": [1, "placeholder-value"],
+        "rightToLeftOrientation": [4, "right-to-left-orientation"],
+        "query": [1],
+        "theme": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["searchcraft-input", "searchcraft-clear-icon-set", "searchcraft-clear-input-button", "searchcraft-input-caption", "searchcraft-input-icon", "searchcraft-search-icon-set", "searchcraft-spinner-dark", "searchcraft-spinner-light"];
+    components.forEach(tagName => { switch (tagName) {
+        case "searchcraft-input":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SearchcraftInput);
+            }
+            break;
+        case "searchcraft-clear-icon-set":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "searchcraft-clear-input-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "searchcraft-input-caption":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "searchcraft-input-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "searchcraft-search-icon-set":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "searchcraft-spinner-dark":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "searchcraft-spinner-light":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
 
-export { SearchcraftInput as searchcraft_input };
+export { SearchcraftInput as S, defineCustomElement as d };
 
-//# sourceMappingURL=searchcraft-input.entry.js.map
+//# sourceMappingURL=p-350c8005.js.map

package/dist/components/p-350c8005.js.map

@@ -0,0 +1 @@
+{"file":"p-350c8005.js","mappings":";;;;;;;;;;;AAAA,MAAM,yBAAyB,GAAG,2sHAA2sH,CAAC;AAC9uH,+BAAe,yBAAyB;;MCsB3B,gBAAgB;;;;;;;4BAC6B,EAAE;qBAC1C,KAAK;6BACG,EAAE;qCACM,EAAE;iCACN,EAAE;8BACL,EAAE;+BACD,EAAE;8BACH,EAAE;4BACJ,KAAK;gCACD,cAAc;sCACR,KAAK;qBACtB,EAAE;qBAKD,OAAO;;IAExB,IAAY,YAAY;QACtB,OAAO,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC;KAC/B;IAED,iBAAiB,CAAC,KAAY;QAC5B,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;QAC/C,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KAC1C;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;SACxB;KACF;IAED,MAAM;QACJ,MAAM,kBAAkB,GAAG,IAAI,CAAC,sBAAsB;cAClD,mBAAmB;cACnB,mBAAmB,CAAC;QAExB,MAAM,cAAc,GAAG,UAAU,CAC/B,IAAI,CAAC,KAAK;cACN,IAAI,CAAC,YAAY;kBACf,oBAAoB;kBACpB,mBAAmB;cACrB,IAAI,CAAC,YAAY;kBACf,eAAe;kBACf,cAAc,EACpB,mBAAmB,CACpB,CAAC;QAEF,MAAM,qBAAqB,GAAG,iBAAiB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAEnE,MAAM,gBAAgB,GAAG;YACvB,QAAQ,EAAE,qBAAqB,CAAC,mBAAmB,IAAI,MAAM;SAC9D,CAAC;QACF,QACE,4DACE,KAAK,EAAE,UAAU,CACf,kBAAkB,EAClB,IAAI,CAAC,aAAa,EAClB,wBAAwB,CACzB,IAEA,IAAI,CAAC,sBAAsB,IAC1B,EAAC,QAAQ,QACP,aACE,KAAK,EAAE,UAAU,CAAC,cAAc,EAAE,mBAAmB,CAAC,EACtD,EAAE,EAAC,sBAAsB,EACzB,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,EAC3C,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAClC,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,qBAAqB,GAC5B,EACF,iBACG;;+BAEgB,gBAAgB,CAAC,QAAQ;;eAEzC,CACK,EACP,IAAI,CAAC,iBAAiB,KACrB,iCACE,qBAAqB,EAAE,IAAI,CAAC,qBAAqB,EACjD,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,GACnD,CACH,EACA,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,KACpB,sCACE,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,GACnD,CACH,EACD,8BACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,eAAe,EAC5B,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,EACnD,KAAK,EAAE,IAAI,CAAC,cAAc,GAC1B,CACO,KAEX,WAAK,KAAK,EAAC,cAAc,IACvB,8BACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,eAAe,EAC5B,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,EACnD,KAAK,EAAE,IAAI,CAAC,cAAc,GAC1B,EACF,aACE,KAAK,EAAE,UAAU,CAAC,cAAc,EAAE,mBAAmB,CAAC,EACtD,EAAE,EAAC,sBAAsB,EACzB,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,EAC3C,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAClC,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,qBAAqB,GAC5B,EACF,iBACG;;+BAEgB,gBAAgB,CAAC,QAAQ;;eAEzC,CACK,EACP,IAAI,CAAC,iBAAiB,KACrB,iCACE,qBAAqB,EAAE,IAAI,CAAC,qBAAqB,EACjD,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,GACnD,CACH,EACA,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,KACpB,sCACE,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,GACnD,CACH,CACG,CACP,CACG,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/searchcraft-input/searchcraft-input.module.scss?tag=searchcraft-input&encapsulation=shadow","src/components/searchcraft-input/searchcraft-input.tsx"],"sourcesContent":["@import '../../utils/theme';\n\n:root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n@mixin input-container-base {\n  position: relative;\n  width: 100%;\n}\n\n@mixin input-base {\n  border: none;\n  border-radius: 8px;\n  font-family: var(--font-stack);\n  outline: none;\n  padding-bottom: 15px;\n  padding-top: 15px;\n  width: 100%;\n\n  &::placeholder {\n    font-family: var(--font-stack);\n    font-size: 16px;\n  }\n}\n\n@mixin input-base-light {\n  @include input-base;\n  background-color: $light-input-background-color;\n  color: $light-input-label-color;\n\n  &::placeholder {\n    color: $light-input-placeholder-color;\n  }\n\n  &:focus {\n    outline: 2px solid $light-input-outline-focus;\n  }\n}\n\n@mixin input-base-dark {\n  @include input-base;\n  background-color: $dark-input-background-color;\n  color: $dark-input-label-color;\n\n  &::placeholder {\n    color: $dark-input-placeholder-color;\n  }\n\n  &:focus {\n    outline: 2px solid $dark-input-outline-focus;\n  }\n}\n\n@mixin input-error-base-light {\n  @include input-base-light;\n  outline: 2px solid $light-input-error-outline;\n\n  &:focus-visible {\n    outline: 2px solid $light-input-error-outline,\n  }\n}\n\n@mixin input-error-base-dark {\n  @include input-base-dark;\n  outline: 2px solid $dark-input-error-outline;\n\n  &:focus-visible {\n    outline: 2px solid $dark-input-error-outline;\n  }\n}\n\n.inputContainerLTR {\n  @include input-container-base;\n}\n\n.inputContainerRTL {\n  @include input-container-base;\n  margin-left: 8px;\n}\n\n@mixin align-LTR {\n  margin-right: 8px;\n  padding-left: 36px;\n  padding-right: 16px;\n}\n\n.inputLightLTR {\n  @include input-base-light;\n  @include align-LTR;\n}\n\n.inputDarkLTR {\n  @include input-base-dark;\n  @include align-LTR;\n}\n\n.inputErrorLightLTR {\n  @include input-error-base-light;\n  @include align-LTR;\n}\n\n.inputErrorDarkLTR {\n  @include input-error-base-dark;\n  @include align-LTR;\n}\n\n@mixin align-RTL {\n  margin-left: 8px;\n  padding-left: 16px;\n  padding-right: 36px;\n  text-align: right;\n}\n\n.inputLightRTL {\n  @include input-base-light;\n  @include align-RTL;\n}\n\n.inputDarkRTL {\n  @include input-base-dark;\n  @include align-RTL;\n}\n\n.inputErrorLightRTL {\n  @include input-error-base-light;\n  @include align-RTL;\n}\n\n.inputErrorDarkRTL {\n  @include input-error-base-dark;\n  @include align-RTL;\n}\n\n.inputWrapper {\n  align-items: center;\n  display: flex;\n  position: relative;\n  width: 100%;\n}\n","import {\n  Component,\n  h,\n  Prop,\n  State,\n  Event,\n  Fragment,\n  type EventEmitter,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { parseCustomStyles } from '@utils/utils';\n\nexport interface ScInputCustomEvent<T> extends CustomEvent<T> {\n  detail: T;\n  target: HTMLSearchcraftInputElement;\n}\n\n@Component({\n  tag: 'searchcraft-input',\n  styleUrl: 'searchcraft-input.module.scss',\n  shadow: true,\n})\nexport class SearchcraftInput {\n  @Prop() customStyles: string | Record<string, string> = {};\n  @Prop() error = false;\n  @Prop() formClassName = '';\n  @Prop() inputCaptionClassName = '';\n  @Prop() inputCaptionValue = '';\n  @Prop() inputClassName = '';\n  @Prop() inputIconHeight = 20;\n  @Prop() inputIconWidth = 20;\n  @Prop() isRequesting = false;\n  @Prop() placeholderValue = 'Enter Search';\n  @Prop() rightToLeftOrientation = false;\n  @Prop() query = '';\n\n  @Event() clearInput: EventEmitter<void>;\n  @Event() searchInputChange: EventEmitter<string>;\n\n  @State() theme = 'light';\n\n  private get isLightTheme() {\n    return this.theme === 'light';\n  }\n\n  handleInputChange(event: Event) {\n    const input = event.target as HTMLInputElement;\n    this.searchInputChange.emit(input.value);\n  }\n\n  handleClearInput() {\n    if (this.clearInput) {\n      this.clearInput.emit();\n    }\n  }\n\n  render() {\n    const containerClassName = this.rightToLeftOrientation\n      ? 'inputContainerRTL'\n      : 'inputContainerLTR';\n\n    const inputClassName = classNames(\n      this.error\n        ? this.isLightTheme\n          ? 'inputErrorLightRTL'\n          : 'inputErrorDarkRTL'\n        : this.isLightTheme\n          ? 'inputLightLTR'\n          : 'inputDarkLTR',\n      'searchcraft-input',\n    );\n\n    const validatedCustomStyles = parseCustomStyles(this.customStyles);\n\n    const placeholderStyle = {\n      fontSize: validatedCustomStyles.placeholderFontSize || '16px',\n    };\n    return (\n      <div\n        class={classNames(\n          containerClassName,\n          this.formClassName,\n          'searchcraft-input-form',\n        )}\n      >\n        {this.rightToLeftOrientation ? (\n          <Fragment>\n            <input\n              class={classNames(inputClassName, 'searchcraft-input')}\n              id='searchcraft-input-id'\n              onChange={this.handleInputChange.bind(this)}\n              placeholder={this.placeholderValue}\n              type='text'\n              value={this.query}\n              style={validatedCustomStyles}\n            />\n            <style>\n              {`\n                #searchcraft-input-id::placeholder {\n                  font-size: ${placeholderStyle.fontSize};\n                }\n              `}\n            </style>\n            {this.inputCaptionValue && (\n              <searchcraft-input-caption\n                inputCaptionClassName={this.inputCaptionClassName}\n                inputCaptionValue={this.inputCaptionValue}\n                rightToLeftOrientation={this.rightToLeftOrientation}\n              />\n            )}\n            {this.query.length > 0 && (\n              <searchcraft-clear-input-button\n                isRequesting={this.isRequesting}\n                onClearInput={this.handleClearInput}\n                rightToLeftOrientation={this.rightToLeftOrientation}\n              />\n            )}\n            <searchcraft-input-icon\n              error={this.error}\n              height={this.inputIconHeight}\n              rightToLeftOrientation={this.rightToLeftOrientation}\n              width={this.inputIconWidth}\n            />\n          </Fragment>\n        ) : (\n          <div class='inputWrapper'>\n            <searchcraft-input-icon\n              error={this.error}\n              height={this.inputIconHeight}\n              rightToLeftOrientation={this.rightToLeftOrientation}\n              width={this.inputIconWidth}\n            />\n            <input\n              class={classNames(inputClassName, 'searchcraft-input')}\n              id='searchcraft-input-id'\n              onChange={this.handleInputChange.bind(this)}\n              placeholder={this.placeholderValue}\n              type='text'\n              value={this.query}\n              style={validatedCustomStyles}\n            />\n            <style>\n              {`\n                #searchcraft-input-id::placeholder {\n                  font-size: ${placeholderStyle.fontSize};\n                }\n              `}\n            </style>\n            {this.inputCaptionValue && (\n              <searchcraft-input-caption\n                inputCaptionClassName={this.inputCaptionClassName}\n                inputCaptionValue={this.inputCaptionValue}\n                rightToLeftOrientation={this.rightToLeftOrientation}\n              />\n            )}\n            {this.query.length > 0 && (\n              <searchcraft-clear-input-button\n                isRequesting={this.isRequesting}\n                onClearInput={this.handleClearInput}\n                rightToLeftOrientation={this.rightToLeftOrientation}\n              />\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-3b07b0dc.js

@@ -0,0 +1,54 @@
+import { p as proxyCustomElement, H, h } from './p-af65953e.js';
+import { d as defineCustomElement$1 } from './p-d33fdd81.js';
+
+const searchcraftInputIconModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.inputIconLTR{height:20px;left:15px;position:absolute;top:50%;transform:translateY(-50%);width:20px}.inputIconRTL{height:20px;position:absolute;right:15px;top:50%;transform:translateY(-50%);width:20px}";
+const SearchcraftInputIconStyle0 = searchcraftInputIconModuleCss;
+
+const SearchcraftInputIcon = /*@__PURE__*/ proxyCustomElement(class SearchcraftInputIcon extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.error = undefined;
+        this.rightToLeftOrientation = false;
+        this.height = 20;
+        this.width = 20;
+        this.theme = 'light';
+    }
+    isLightTheme() {
+        return this.theme === 'light';
+    }
+    render() {
+        return this.error ? (h("div", { class: this.rightToLeftOrientation ? 'inputIconRTL' : 'inputIconLTR' }, this.isLightTheme() ? (h("searchcraft-search-icon-set", { height: this.height, type: 'error-light', width: this.width })) : (h("searchcraft-search-icon-set", { height: this.height, type: 'error-dark', width: this.width })))) : (h("div", { class: this.rightToLeftOrientation ? 'inputIconRTL' : 'inputIconLTR' }, this.isLightTheme() ? (h("searchcraft-search-icon-set", { height: this.height, type: 'search-light', width: this.width })) : (h("searchcraft-search-icon-set", { height: this.height, type: 'search-dark', width: this.width }))));
+    }
+    static get style() { return SearchcraftInputIconStyle0; }
+}, [1, "searchcraft-input-icon", {
+        "error": [4],
+        "rightToLeftOrientation": [4, "right-to-left-orientation"],
+        "height": [2],
+        "width": [2],
+        "theme": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["searchcraft-input-icon", "searchcraft-search-icon-set"];
+    components.forEach(tagName => { switch (tagName) {
+        case "searchcraft-input-icon":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SearchcraftInputIcon);
+            }
+            break;
+        case "searchcraft-search-icon-set":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SearchcraftInputIcon as S, defineCustomElement as d };
+
+//# sourceMappingURL=p-3b07b0dc.js.map

package/dist/components/p-3b07b0dc.js.map

@@ -0,0 +1 @@
+{"file":"p-3b07b0dc.js","mappings":";;;AAAA,MAAM,6BAA6B,GAAG,2PAA2P,CAAC;AAClS,mCAAe,6BAA6B;;MCM/B,oBAAoB;;;;;;sCASE,KAAK;sBACrB,EAAE;qBACH,EAAE;qBAED,OAAO;;IAEhB,YAAY;QAClB,OAAO,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC;KAC/B;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,IACf,WACE,KAAK,EAAE,IAAI,CAAC,sBAAsB,GAAG,cAAc,GAAG,cAAc,IAEnE,IAAI,CAAC,YAAY,EAAE,IAClB,mCACE,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,KAEF,mCACE,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,CACH,CACG,KAEN,WACE,KAAK,EAAE,IAAI,CAAC,sBAAsB,GAAG,cAAc,GAAG,cAAc,IAEnE,IAAI,CAAC,YAAY,EAAE,IAClB,mCACE,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,KAEF,mCACE,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,CACH,CACG,CACP,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/searchcraft-input-icon/searchcraft-input-icon.module.scss?tag=searchcraft-input-icon&encapsulation=shadow","src/components/searchcraft-input-icon/searchcraft-input-icon.tsx"],"sourcesContent":[":root {\n  --font-stack: Helvetica, Arial, sans-serif;\n}\n\n.inputIconLTR {\n  height: 20px;\n  left: 15px;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 20px;\n}\n\n.inputIconRTL {\n  height: 20px;\n  position: absolute;\n  right: 15px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 20px;\n}","import { Component, Prop, h, State } from '@stencil/core';\n\n@Component({\n  tag: 'searchcraft-input-icon',\n  styleUrl: 'searchcraft-input-icon.module.scss',\n  shadow: true,\n})\nexport class SearchcraftInputIcon {\n  /**\n   * Determines if an error icon should be displayed.\n   */\n  @Prop() error?: boolean;\n\n  /**\n   * Determines if the layout should be right-to-left.\n   */\n  @Prop() rightToLeftOrientation = false;\n  @Prop() height = 20;\n  @Prop() width = 20;\n\n  @State() theme = 'light';\n\n  private isLightTheme() {\n    return this.theme === 'light';\n  }\n\n  render() {\n    return this.error ? (\n      <div\n        class={this.rightToLeftOrientation ? 'inputIconRTL' : 'inputIconLTR'}\n      >\n        {this.isLightTheme() ? (\n          <searchcraft-search-icon-set\n            height={this.height}\n            type='error-light'\n            width={this.width}\n          />\n        ) : (\n          <searchcraft-search-icon-set\n            height={this.height}\n            type='error-dark'\n            width={this.width}\n          />\n        )}\n      </div>\n    ) : (\n      <div\n        class={this.rightToLeftOrientation ? 'inputIconRTL' : 'inputIconLTR'}\n      >\n        {this.isLightTheme() ? (\n          <searchcraft-search-icon-set\n            height={this.height}\n            type='search-light'\n            width={this.width}\n          />\n        ) : (\n          <searchcraft-search-icon-set\n            height={this.height}\n            type='search-dark'\n            width={this.width}\n          />\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-3ea9ba3a.js

@@ -0,0 +1,62 @@
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './p-af65953e.js';
+import { c as classNames } from './p-5cdc6210.js';
+import { d as defineCustomElement$1 } from './p-04bad430.js';
+
+const searchcraftButtonModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.buttonLight{border-radius:8px;display:flex;font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;padding:11px 20px;position:relative;background-color:#000;border:1px solid #E6E6E6;color:#FFF}.buttonLight:hover{cursor:pointer}.buttonLight:hover{background-color:#2E2E2E}.buttonLight:focus{outline:2px solid #000000}.buttonDark{border-radius:8px;display:flex;font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;padding:11px 20px;position:relative;background-color:#FFF;border:1px solid #404040;color:#292929}.buttonDark:hover{cursor:pointer}.buttonDark:hover{background-color:#FAFAFA}.buttonDark:focus{outline:2px solid #404040}.spinnerMarginRight{left:4px;margin-right:4px;position:absolute}.spinnerMarginLeft{left:4px;margin-left:4px;position:absolute}.buttonLabel{animation:right-and-back 0.2s;margin-left:4px;position:relative}@keyframes right-and-back{0%{right:-6px}50%{right:-12px}75%{right:-6px}100%{right:0px}}";
+const SearchcraftButtonStyle0 = searchcraftButtonModuleCss;
+
+const SearchcraftButton = /*@__PURE__*/ proxyCustomElement(class SearchcraftButton extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.buttonClick = createEvent(this, "buttonClick", 7);
+        this.handleClick = () => {
+            this.buttonClick.emit(); // Emit the event instead of calling a function
+        };
+        this.iconElement = undefined;
+        this.iconOnly = false;
+        this.iconPosition = 'left';
+        this.label = 'Search';
+        this.isRequesting = false;
+        this.theme = 'light';
+    }
+    getButtonStyle() {
+        return this.theme === 'light' ? 'buttonLight' : 'buttonDark';
+    }
+    render() {
+        const buttonStyle = this.getButtonStyle();
+        return (h(Fragment, { key: '2a29411990063b67c92c60a3f1f805818bea047f' }, 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 style() { return SearchcraftButtonStyle0; }
+}, [1, "searchcraft-button", {
+        "iconElement": [16],
+        "iconOnly": [4, "icon-only"],
+        "iconPosition": [1, "icon-position"],
+        "label": [1],
+        "isRequesting": [32],
+        "theme": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["searchcraft-button", "searchcraft-spinner-dark"];
+    components.forEach(tagName => { switch (tagName) {
+        case "searchcraft-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SearchcraftButton);
+            }
+            break;
+        case "searchcraft-spinner-dark":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SearchcraftButton as S, defineCustomElement as d };
+
+//# sourceMappingURL=p-3ea9ba3a.js.map