@searchcraft/javascript-sdk 0.3.1 → 0.4.1

package/dist/collection/components/searchcraft-auto-search-form/searchcraft-auto-search-form.js

@@ -1,5 +1,4 @@
 import { h, } from "@stencil/core";
-import classNames from "classnames";
 import { SearchcraftCore, } from "@searchcraft/core";
 import { useSearchcraftStore } from "../../provider/store";
 import { parseCustomStyles } from "../../utils/utils";
@@ -10,35 +9,35 @@ export class SearchcraftAutoSearchForm {
         this.debounceDelay = 0;
         this.searchStore = useSearchcraftStore.getState();
         this.handleInputChange = (event) => {
-            this.query = event.detail;
-            this.searchStore.setQuery(this.query);
-            if (this.query.trim() === '') {
-                this.searchResults = null;
-                this.inputClearedOrNoResults.emit();
-                this.searchStore.setSearchResults(null);
-            }
-        };
-        this.handleInputKeyUp = (event) => {
             const target = event.detail;
             if (target === this.query) {
                 return;
             }
             this.query = target;
-            if (this.debounceTimeout) {
-                clearTimeout(this.debounceTimeout);
-            }
-            this.debounceTimeout = setTimeout(() => {
+            const performSearchActions = () => {
                 if (this.query.trim() === '') {
+                    this.searchStore.setQuery('');
                     this.searchResults = null;
                     this.searchStore.setSearchResults(null);
                     this.inputClearedOrNoResults.emit();
                 }
                 else {
                     this.searchStore.setQuery(this.query);
-                    this.querySubmit.emit(this.query);
+                    this.querySubmit.emit();
                     this.runSearch();
                 }
-            }, this.debounceDelay);
+            };
+            // Only set a timeout if debounceDelay > 0
+            if (this.debounceDelay > 0) {
+                if (this.debounceTimeout) {
+                    clearTimeout(this.debounceTimeout);
+                }
+                this.debounceTimeout = setTimeout(performSearchActions, this.debounceDelay);
+            }
+            else {
+                // Otherwise just call search actions directly
+                performSearchActions();
+            }
         };
         this.handleClearInput = () => {
             if (this.query === '' && !this.searchResults) {
@@ -65,7 +64,6 @@ export class SearchcraftAutoSearchForm {
             else {
                 this.error = false;
                 this.searchStore.setQuery(this.query);
-                this.searchStore.setSelectedFilters([]);
                 try {
                     await this.searchStore.search();
                 }
@@ -81,46 +79,47 @@ export class SearchcraftAutoSearchForm {
         };
         this.autoSearchFormClass = '';
         this.clearInput = () => { };
-        this.config = {
-            readKey: '',
-            endpointURL: '',
-            index: [],
-            organizationId: '',
-            applicationId: '',
-        };
+        this.config = undefined;
         this.customStylesForInput = {};
         this.inputCaptionValue = '';
-        this.inputIconHeight = 20;
-        this.inputIconWidth = 20;
         this.labelForInput = '';
         this.placeholderValue = 'Search here';
-        this.rightToLeftOrientation = false;
         this.searchContainerClass = '';
         this.error = false;
         this.isRequesting = false;
         this.query = '';
         this.searchResults = null;
     }
+    init() {
+        var _a;
+        if (this.config) {
+            const searchcraft = new SearchcraftCore(this.config, {
+                sdkName: packageJson.name,
+                sdkVersion: packageJson.version,
+            });
+            this.searchStore.initialize(searchcraft, true);
+            (_a = this.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.unsubscribe = useSearchcraftStore.subscribe((state) => {
+                this.isRequesting = state.isRequesting;
+                this.searchResults = Object.assign({}, state.searchResults);
+            });
+        }
+    }
     componentDidLoad() {
-        const searchcraft = new SearchcraftCore(this.config, {
-            sdkName: packageJson.name,
-            sdkVersion: packageJson.version,
-        });
-        this.searchStore.initialize(searchcraft, true);
-        this.unsubscribe = useSearchcraftStore.subscribe((state) => {
-            this.isRequesting = state.isRequesting;
-            this.searchResults = Object.assign({}, state.searchResults);
-        });
+        this.init();
     }
+    onConfigChange() {
+        this.init();
+    }
+    connectedCallback() { }
     disconnectedCallback() {
         if (this.unsubscribe) {
             this.unsubscribe();
         }
     }
     render() {
-        const formClass = this.rightToLeftOrientation ? 'formRTL' : 'formLTR';
         const parsedCustomStyles = parseCustomStyles(this.customStylesForInput);
-        return (h("form", { key: '3f8e9a36e827b3f1f8d591622a1c824e7ccc6f83', class: classNames(`${formClass}`, 'searchcraft-auto-search-form'), onSubmit: this.handleFormSubmit }, h("searchcraft-input-label", { key: 'daf9b6aab7185e045891a975ac70a3bf3b7ff75f', label: this.labelForInput }), h("searchcraft-input", { key: '655e92d562a73dcf9857f24075c65c6bbe2215f5', customStyles: parsedCustomStyles, "input-caption-value": this.inputCaptionValue, "input-icon-height": this.inputIconHeight, "input-icon-width": this.inputIconWidth, "is-requesting": this.isRequesting, onClearInput: this.handleClearInput, onInputKeyUp: this.handleInputKeyUp, onSearchInputChange: this.handleInputChange, "placeholder-value": this.placeholderValue, query: this.query, "right-to-left-orientation": this.rightToLeftOrientation }), this.error && (h("searchcraft-error-message", { key: '988624eb1ff71adde2a2e38ab8adb868a5a12469', errorMessage: 'Please enter a search query.' }))));
+        return (h("form", { key: '3c1069cbaf543e9b06616d7440eb784010a7b601', class: 'searchcraft-auto-search-form', onSubmit: this.handleFormSubmit }, h("searchcraft-input-label", { key: '7ba138f9335b59ee2205a22ef3a8af306db102d1', label: this.labelForInput }), h("searchcraft-input", { key: 'a7400629e259ea15cd58d5f2c87f1659c8d6addb', customStyles: parsedCustomStyles, "input-caption-value": this.inputCaptionValue, "is-requesting": this.isRequesting, onClearInput: this.handleClearInput, onInputChange: this.handleInputChange.bind(this), "placeholder-value": this.placeholderValue, query: this.query }), this.error && (h("searchcraft-error-message", { key: 'f304152c611d3e8849a9d24b07a9db3d5d71197f', errorMessage: 'Please enter a search query.' }))));
     }
     static get is() { return "searchcraft-auto-search-form"; }
     static get originalStyleUrls() {
@@ -173,7 +172,7 @@ export class SearchcraftAutoSearchForm {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "SearchcraftConfig",
+                    "original": "SearchcraftConfig | undefined",
                     "resolved": "SearchcraftConfig",
                     "references": {
                         "SearchcraftConfig": {
@@ -188,8 +187,7 @@ export class SearchcraftAutoSearchForm {
                 "docs": {
                     "tags": [],
                     "text": ""
-                },
-                "defaultValue": "{\n    readKey: '',\n    endpointURL: '',\n    index: [],\n    organizationId: '',\n    applicationId: '',\n  }"
+                }
             },
             "customStylesForInput": {
                 "type": "string",
@@ -232,42 +230,6 @@ export class SearchcraftAutoSearchForm {
                 "reflect": false,
                 "defaultValue": "''"
             },
-            "inputIconHeight": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "input-icon-height",
-                "reflect": false,
-                "defaultValue": "20"
-            },
-            "inputIconWidth": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "input-icon-width",
-                "reflect": false,
-                "defaultValue": "20"
-            },
             "labelForInput": {
                 "type": "string",
                 "mutable": false,
@@ -304,24 +266,6 @@ export class SearchcraftAutoSearchForm {
                 "reflect": false,
                 "defaultValue": "'Search here'"
             },
-            "rightToLeftOrientation": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "attribute": "right-to-left-orientation",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "searchContainerClass": {
                 "type": "string",
                 "mutable": false,
@@ -383,5 +327,12 @@ export class SearchcraftAutoSearchForm {
                 }
             }];
     }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "config",
+                "methodName": "onConfigChange"
+            }];
+    }
 }
 //# sourceMappingURL=searchcraft-auto-search-form.js.map

package/dist/collection/components/searchcraft-auto-search-form/searchcraft-auto-search-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"searchcraft-auto-search-form.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-auto-search-form/searchcraft-auto-search-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  State,\n  Event,\n  type EventEmitter,\n  h,\n} from '@stencil/core';\nimport classNames from 'classnames';\n\nimport {\n  type SearchcraftConfig,\n  SearchcraftCore,\n  type SearchcraftResponse,\n} from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\nimport { parseCustomStyles } from '@utils/utils';\nimport type { ScInputCustomEvent } from '@components/searchcraft-input/searchcraft-input';\n\nimport packageJson from '../../../package.json';\n\n@Component({\n  tag: 'searchcraft-auto-search-form',\n  styleUrl: 'searchcraft-auto-search-form.module.scss',\n  shadow: false,\n})\nexport class SearchcraftAutoSearchForm {\n  @Prop() autoSearchFormClass = '';\n  @Prop() clearInput: () => void = () => {};\n  @Prop() config: SearchcraftConfig = {\n    readKey: '',\n    endpointURL: '',\n    index: [],\n    organizationId: '',\n    applicationId: '',\n  };\n  @Prop() customStylesForInput: string | Record<string, string> = {};\n  @Prop() inputCaptionValue = '';\n  @Prop() inputIconHeight = 20;\n  @Prop() inputIconWidth = 20;\n  @Prop() labelForInput = '';\n  @Prop() placeholderValue = 'Search here';\n  @Prop() rightToLeftOrientation = false;\n  @Prop() searchContainerClass = '';\n\n  @Event() inputClearedOrNoResults: EventEmitter<void>;\n  @Event() querySubmit: EventEmitter<string>;\n\n  @State() error = false;\n  @State() isRequesting = false;\n  @State() query = '';\n  @State() searchResults: SearchcraftResponse | null = null;\n\n  private debounceTimeout: ReturnType<typeof setTimeout> | null = null;\n  private debounceDelay = 0;\n  private searchStore = useSearchcraftStore.getState();\n  unsubscribe: () => void;\n\n  componentDidLoad() {\n    const searchcraft = new SearchcraftCore(this.config, {\n      sdkName: packageJson.name,\n      sdkVersion: packageJson.version,\n    });\n    this.searchStore.initialize(searchcraft, true);\n\n    this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n      this.isRequesting = state.isRequesting;\n      this.searchResults = { ...state.searchResults };\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  handleInputChange = (event: ScInputCustomEvent<string>) => {\n    this.query = event.detail;\n    this.searchStore.setQuery(this.query);\n    if (this.query.trim() === '') {\n      this.searchResults = null;\n      this.inputClearedOrNoResults.emit();\n      this.searchStore.setSearchResults(null);\n    }\n  };\n\n  handleInputKeyUp = (event: ScInputCustomEvent<string>) => {\n    const target = event.detail;\n    if (target === this.query) {\n      return;\n    }\n    this.query = target;\n\n    if (this.debounceTimeout) {\n      clearTimeout(this.debounceTimeout);\n    }\n\n    this.debounceTimeout = setTimeout(() => {\n      if (this.query.trim() === '') {\n        this.searchResults = null;\n        this.searchStore.setSearchResults(null);\n        this.inputClearedOrNoResults.emit();\n      } else {\n        this.searchStore.setQuery(this.query);\n        this.querySubmit.emit(this.query);\n        this.runSearch();\n      }\n    }, this.debounceDelay);\n  };\n\n  handleClearInput = () => {\n    if (this.query === '' && !this.searchResults) {\n      return;\n    }\n    this.query = '';\n    this.searchResults = null;\n    this.searchStore.setQuery('');\n    this.searchStore.setSearchResults(null);\n\n    if (typeof this.clearInput === 'function') {\n      this.clearInput();\n    }\n\n    if (this.debounceTimeout) {\n      clearTimeout(this.debounceTimeout);\n    }\n\n    this.error = false;\n    this.inputClearedOrNoResults.emit();\n  };\n\n  private runSearch = async () => {\n    if (this.query.trim() === '') {\n      this.error = true;\n      this.inputClearedOrNoResults.emit();\n    } else {\n      this.error = false;\n      this.searchStore.setQuery(this.query);\n      this.searchStore.setSelectedFilters([]);\n\n      try {\n        await this.searchStore.search();\n      } catch (error) {\n        this.error = true;\n        this.inputClearedOrNoResults.emit();\n      }\n    }\n  };\n\n  handleFormSubmit = async (event: Event) => {\n    event.preventDefault();\n    await this.runSearch();\n  };\n\n  render() {\n    const formClass = this.rightToLeftOrientation ? 'formRTL' : 'formLTR';\n    const parsedCustomStyles = parseCustomStyles(this.customStylesForInput);\n    return (\n      <form\n        class={classNames(`${formClass}`, 'searchcraft-auto-search-form')}\n        onSubmit={this.handleFormSubmit}\n      >\n        <searchcraft-input-label label={this.labelForInput} />\n        <searchcraft-input\n          customStyles={parsedCustomStyles}\n          input-caption-value={this.inputCaptionValue}\n          input-icon-height={this.inputIconHeight}\n          input-icon-width={this.inputIconWidth}\n          is-requesting={this.isRequesting}\n          onClearInput={this.handleClearInput}\n          onInputKeyUp={this.handleInputKeyUp}\n          onSearchInputChange={this.handleInputChange}\n          placeholder-value={this.placeholderValue}\n          query={this.query}\n          right-to-left-orientation={this.rightToLeftOrientation}\n        />\n        {this.error && (\n          <searchcraft-error-message errorMessage='Please enter a search query.' />\n        )}\n      </form>\n    );\n  }\n}\n"]}
+{"version":3,"file":"searchcraft-auto-search-form.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-auto-search-form/searchcraft-auto-search-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  State,\n  Event,\n  type EventEmitter,\n  h,\n  Element,\n  Watch,\n} from '@stencil/core';\n\nimport {\n  type SearchcraftConfig,\n  SearchcraftCore,\n  type SearchcraftResponse,\n} from '@searchcraft/core';\n\nimport { useSearchcraftStore } from '@provider/store';\nimport { parseCustomStyles } from '@utils/utils';\nimport type { ScInputCustomEvent } from '@components/searchcraft-input/searchcraft-input';\n\nimport packageJson from '../../../package.json';\n\n@Component({\n  tag: 'searchcraft-auto-search-form',\n  styleUrl: 'searchcraft-auto-search-form.module.scss',\n  shadow: false,\n})\nexport class SearchcraftAutoSearchForm {\n  @Prop() autoSearchFormClass = '';\n  @Prop() clearInput: () => void = () => {};\n  @Prop() config: SearchcraftConfig | undefined;\n  @Prop() customStylesForInput: string | Record<string, string> = {};\n  @Prop() inputCaptionValue = '';\n  @Prop() labelForInput = '';\n  @Prop() placeholderValue = 'Search here';\n  @Prop() searchContainerClass = '';\n\n  @Event() inputClearedOrNoResults: EventEmitter<void>;\n  @Event() querySubmit: EventEmitter<string>;\n\n  @State() error = false;\n  @State() isRequesting = false;\n  @State() query = '';\n  @State() searchResults: SearchcraftResponse | null = null;\n\n  @Element() element: HTMLElement;\n\n  private debounceTimeout: ReturnType<typeof setTimeout> | null = null;\n  private debounceDelay = 0;\n  private searchStore = useSearchcraftStore.getState();\n  unsubscribe: () => void;\n\n  init() {\n    if (this.config) {\n      const searchcraft = new SearchcraftCore(this.config, {\n        sdkName: packageJson.name,\n        sdkVersion: packageJson.version,\n      });\n      this.searchStore.initialize(searchcraft, true);\n\n      this.unsubscribe?.();\n      this.unsubscribe = useSearchcraftStore.subscribe((state) => {\n        this.isRequesting = state.isRequesting;\n        this.searchResults = { ...state.searchResults };\n      });\n    }\n  }\n\n  componentDidLoad() {\n    this.init();\n  }\n\n  @Watch('config')\n  onConfigChange() {\n    this.init();\n  }\n\n  connectedCallback() {}\n\n  disconnectedCallback() {\n    if (this.unsubscribe) {\n      this.unsubscribe();\n    }\n  }\n\n  handleInputChange = (event: ScInputCustomEvent<string>) => {\n    const target = event.detail;\n    if (target === this.query) {\n      return;\n    }\n    this.query = target;\n\n    const performSearchActions = () => {\n      if (this.query.trim() === '') {\n        this.searchStore.setQuery('');\n        this.searchResults = null;\n        this.searchStore.setSearchResults(null);\n        this.inputClearedOrNoResults.emit();\n      } else {\n        this.searchStore.setQuery(this.query);\n        this.querySubmit.emit();\n        this.runSearch();\n      }\n    };\n\n    // Only set a timeout if debounceDelay > 0\n    if (this.debounceDelay > 0) {\n      if (this.debounceTimeout) {\n        clearTimeout(this.debounceTimeout);\n      }\n      this.debounceTimeout = setTimeout(\n        performSearchActions,\n        this.debounceDelay,\n      );\n    } else {\n      // Otherwise just call search actions directly\n      performSearchActions();\n    }\n  };\n\n  handleClearInput = () => {\n    if (this.query === '' && !this.searchResults) {\n      return;\n    }\n    this.query = '';\n    this.searchResults = null;\n    this.searchStore.setQuery('');\n    this.searchStore.setSearchResults(null);\n\n    if (typeof this.clearInput === 'function') {\n      this.clearInput();\n    }\n\n    if (this.debounceTimeout) {\n      clearTimeout(this.debounceTimeout);\n    }\n\n    this.error = false;\n    this.inputClearedOrNoResults.emit();\n  };\n\n  private runSearch = async () => {\n    if (this.query.trim() === '') {\n      this.error = true;\n      this.inputClearedOrNoResults.emit();\n    } else {\n      this.error = false;\n      this.searchStore.setQuery(this.query);\n\n      try {\n        await this.searchStore.search();\n      } catch (error) {\n        this.error = true;\n        this.inputClearedOrNoResults.emit();\n      }\n    }\n  };\n\n  handleFormSubmit = async (event: Event) => {\n    event.preventDefault();\n    await this.runSearch();\n  };\n\n  render() {\n    const parsedCustomStyles = parseCustomStyles(this.customStylesForInput);\n    return (\n      <form\n        class='searchcraft-auto-search-form'\n        onSubmit={this.handleFormSubmit}\n      >\n        <searchcraft-input-label label={this.labelForInput} />\n        <searchcraft-input\n          customStyles={parsedCustomStyles}\n          input-caption-value={this.inputCaptionValue}\n          is-requesting={this.isRequesting}\n          onClearInput={this.handleClearInput}\n          onInputChange={this.handleInputChange.bind(this)}\n          placeholder-value={this.placeholderValue}\n          query={this.query}\n        />\n        {this.error && (\n          <searchcraft-error-message errorMessage='Please enter a search query.' />\n        )}\n      </form>\n    );\n  }\n}\n"]}

package/dist/collection/components/searchcraft-auto-search-form/searchcraft-auto-search-form.module.css

@@ -1,15 +1,104 @@
 :root {
-  --font-stack: Helvetica, Arial, sans-serif;
+  /** Appearance & Layout */
+  --sc-spinner-size: 20px;
+  --sc-input-border-radius: 8px;
+  --sc-input-search-icon-size: 20px;
+  --sc-input-clear-icon-size: 20px;
+  --sc-input-padding-left: 44px;
+  --sc-input-padding-right: 44px;
+  --sc-image-border-radius: 8px;
 }
 
-.formLTR {
-  font-family: var(--font-stack);
-  text-align: left;
-  width: 100%;
+:root {
+  --sc-surface-disabled: #D9D9D9;
+  --sc-surface-neutral-primary: #FFFFFF;
+  --sc-surface-neutral-secondary: #F3F3F3;
+  --sc-surface-neutral-light: #FFFFFF;
+  --sc-surface-neutral-primary-hover: #FAFAFA;
+  --sc-surface-neutral-primary-active: #F7F7F7;
+  --sc-surface-neutral-secondary-hover: #EDEDED;
+  --sc-surface-neutral-secondary-active: #E6E6E6;
+  --sc-surface-brand-primary: #000000;
+  --sc-surface-brand-secondary: #E6E6E6;
+  --sc-surface-brand-primary-hover: #2E2E2E;
+  --sc-surface-brand-primary-active: #292929;
+  --sc-surface-brand-secondary-hover: #EBEBEB;
+  --sc-surface-brand-secondary-active: #E0E0E0;
+  --sc-surface-success-primary: #008000;
+  --sc-surface-success-secondary: #CCFFCC;
+  --sc-surface-success-primary-hover: #009900;
+  --sc-surface-success-primary-active: #006600;
+  --sc-surface-success-secondary-hover: #E6FFE6;
+  --sc-surface-success-secondary-active: #E6FFE6;
+  --sc-surface-caution-primary: #CC6600;
+  --sc-surface-caution-secondary: #FFD9B3;
+  --sc-surface-caution-primary-hover: #E57300;
+  --sc-surface-caution-primary-active: #B25A00;
+  --sc-surface-caution-secondary-hover: #FFE5CC;
+  --sc-surface-caution-secondary-active: #FFCC99;
+  --sc-surface-danger-primary: #CC0000;
+  --sc-surface-danger-secondary: #FFCCCC;
+  --sc-surface-danger-primary-hover: #E50000;
+  --sc-surface-danger-primary-active: #B30000;
+  --sc-surface-danger-secondary-hover: #FFE7E7;
+  --sc-surface-danger-secondary-active: #FFB3B3;
+  --sc-content-brand: #000000;
+  --sc-content-success: #008000;
+  --sc-content-caution: #994D00;
+  --sc-content-danger: #990000;
+  --sc-content-disabled: #737373;
+  --sc-content-neutral-primary: #292929;
+  --sc-content-neutral-secondary: #404040;
+  --sc-content-brand-on-primary: #FFFFFF;
+  --sc-content-success-on-primary: #FFFFFF;
+  --sc-content-caution-on-primary: #FFFFFF;
+  --sc-content-danger-on-primary: #FFFFFF;
+  --sc-content-disabled-on-disabled: #737373;
+  --sc-border-neutral: rgba(0,0,0, 0.1);
+  --sc-border-brand: #000000;
+  --sc-border-success: #008000;
+  --sc-border-caution: #CC6600;
+  --sc-border-danger: #CC0000;
+  --sc-border-disabled: #737373;
+}
+
+:root {
+  /** Typography */
+  --sc-font-family: sans-serif;
+  --sc-heading-1-font-size: 32px;
+  --sc-heading-1-line-height: 36px;
+  --sc-heading-1-font-weight: 700;
+  --sc-heading-2-font-size: 29px;
+  --sc-heading-2-line-height: 32px;
+  --sc-heading-2-font-weight: 700;
+  --sc-heading-3-font-size: 26px;
+  --sc-heading-3-line-height: 28px;
+  --sc-heading-3-font-weight: 700;
+  --sc-heading-4-font-size: 23px;
+  --sc-heading-4-line-height: 24px;
+  --sc-heading-4-font-weight: 700;
+  --sc-heading-5-font-size: 20px;
+  --sc-heading-5-line-height: 24px;
+  --sc-heading-5-font-weight: 700;
+  --sc-heading-6-font-size: 10px;
+  --sc-heading-6-line-height: 12px;
+  --sc-heading-6-font-weight: 700;
+  --sc-body-bold-font-size: 16px;
+  --sc-body-bold-line-height: 20px;
+  --sc-body-bold-font-weight: 700;
+  --sc-body-font-size: 16px;
+  --sc-body-line-height: 20px;
+  --sc-body-font-weight:400;
+  --sc-body-small-bold-font-size: 12px;
+  --sc-body-small-bold-line-height: 16px;
+  --sc-body-small-bold-font-weight: 700;
+  --sc-body-small-font-size: 12px;
+  --sc-body-small-line-height: 16px;
+  --sc-body-small-font-weight: 400;
 }
 
-.formRTL {
-  font-family: var(--font-stack);
-  text-align: right;
-  width: 100%;
+.searchcraft-auto-search-form {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }

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

@@ -1,5 +1,4 @@
 import { h } from "@stencil/core";
-import classNames from "classnames";
 import { SearchcraftCore } from "@searchcraft/core";
 import { useSearchcraftStore, useThemeStore } from "../../provider/store";
 import packageJson from "../../../package.json";
@@ -41,19 +40,17 @@ export class SearchcraftBaseSearchForm {
             readKey: '',
             endpointURL: '',
             index: [],
-            organizationId: '',
-            applicationId: '',
         };
         this.errorMessage = 'Search was unsuccessful';
-        this.labelForInput = 'Search';
-        this.rightToLeftOrientation = false;
+        this.inputLabel = 'Search';
+        this.buttonLabel = 'Find';
+        this.buttonPlacement = 'right';
         this.error = false;
         this.query = '';
         this.searchResults = null;
     }
     render() {
-        const formClass = this.rightToLeftOrientation ? 'formRTL' : 'formLTR';
-        return (h("form", { key: '7a0640c6646a1eefda23ceb1623a72b457be648a', class: classNames(`${formClass}`, 'searchcraft-base-search-form'), onSubmit: this.handleFormSubmit }, h("searchcraft-input-label", { key: '33d98e7db9af81170cb693b1f89a38da0a8234e7', label: this.labelForInput }), h("div", { key: '8764b5abbc5008d46bdd8b60b95558252ad6999c', class: classNames('searchContainer', 'searchcraft-base-search-form-input-container') }, this.rightToLeftOrientation && h("searchcraft-button", { key: 'c2a008f5da3bae24bd7417245c4e0df0aa73fd7c' }), h("searchcraft-input", { key: 'dad6c9c1e37ff05a8f032ad3f63ddb1ec234d2e5', onClearInput: this.handleClearInput, onSearchInputChange: this.handleSearchInputChange, query: this.query, rightToLeftOrientation: this.rightToLeftOrientation }), !this.rightToLeftOrientation && (h("searchcraft-button", { key: '2f2a75da81103e3435cbf3337daf605010167339', onButtonClick: this.handleFormSubmit }))), this.error && (h("searchcraft-error-message", { key: '8477fb8f5c3662587e318d8d7c9e1bbd3b7d86a5', errorMessage: this.errorMessage }))));
+        return (h("form", { key: '3200182783a9612326e4350beda3e0facc3abd83', class: 'searchcraft-base-search-form', onSubmit: this.handleFormSubmit }, h("searchcraft-input-label", { key: '51fbd74cab7f82435b21edcee9855fe570199d5a', label: this.inputLabel }), h("div", { key: '245a6e8fd2abf14f379e8dee9a2012a7a0fa7636', class: 'searchcraft-base-search-form-input-container' }, this.buttonPlacement === 'left' && (h("searchcraft-button", { key: '53b09c93f5ebaf548b6954923eaa5eb0e8c6ba18', onButtonClick: this.handleFormSubmit, label: this.buttonLabel })), h("searchcraft-input", { key: 'b8154b313b93cbd043bf141bdb505f8fc874428b', onClearInput: this.handleClearInput, onInputChange: this.handleSearchInputChange, query: this.query }), this.buttonPlacement === 'right' && (h("searchcraft-button", { key: '534fbb59f038a670f2a65293fa5dd6a9a3cba92d', onButtonClick: this.handleFormSubmit, label: this.buttonLabel }))), this.error && (h("searchcraft-error-message", { key: '8ed98aa322c4104346ac3dcb578133d8e2758866', errorMessage: this.errorMessage }))));
     }
     static get is() { return "searchcraft-base-search-form"; }
     static get originalStyleUrls() {
@@ -88,7 +85,7 @@ export class SearchcraftBaseSearchForm {
                     "tags": [],
                     "text": ""
                 },
-                "defaultValue": "{\n    readKey: '',\n    endpointURL: '',\n    index: [],\n    organizationId: '',\n    applicationId: '',\n  }"
+                "defaultValue": "{\n    readKey: '',\n    endpointURL: '',\n    index: [],\n  }"
             },
             "errorMessage": {
                 "type": "string",
@@ -108,7 +105,7 @@ export class SearchcraftBaseSearchForm {
                 "reflect": false,
                 "defaultValue": "'Search was unsuccessful'"
             },
-            "labelForInput": {
+            "inputLabel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -122,16 +119,34 @@ export class SearchcraftBaseSearchForm {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label-for-input",
+                "attribute": "input-label",
                 "reflect": false,
                 "defaultValue": "'Search'"
             },
-            "rightToLeftOrientation": {
-                "type": "boolean",
+            "buttonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "button-label",
+                "reflect": false,
+                "defaultValue": "'Find'"
+            },
+            "buttonPlacement": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "'right' | 'left'",
+                    "resolved": "\"left\" | \"right\"",
                     "references": {}
                 },
                 "required": false,
@@ -140,9 +155,9 @@ export class SearchcraftBaseSearchForm {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "right-to-left-orientation",
+                "attribute": "button-placement",
                 "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "'right'"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"searchcraft-base-search-form.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-base-search-form/searchcraft-base-search-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Event, Prop, State } from '@stencil/core';\nimport classNames from 'classnames';\n\nimport { type SearchcraftConfig, SearchcraftCore } from '@searchcraft/core';\n\nimport { useSearchcraftStore, useThemeStore } from '@provider/store';\n\nimport type { ScInputCustomEvent } from '@components/searchcraft-input/searchcraft-input';\n\nimport packageJson from '../../../package.json';\n\n@Component({\n  tag: 'searchcraft-base-search-form',\n  styleUrl: 'searchcraft-base-search-form.module.scss',\n  shadow: false,\n})\nexport class SearchcraftBaseSearchForm {\n  @Prop() config: SearchcraftConfig = {\n    readKey: '',\n    endpointURL: '',\n    index: [],\n    organizationId: '',\n    applicationId: '',\n  };\n  @Prop() errorMessage = 'Search was unsuccessful';\n  @Prop() labelForInput = 'Search';\n  @Prop() rightToLeftOrientation = false;\n\n  @Event() clearInput = () => {};\n\n  @State() error = false;\n  @State() query = '';\n  @State() searchResults: string | null = null;\n\n  private searchStore = useSearchcraftStore.getState();\n  private themeStore = useThemeStore.getState();\n\n  componentDidLoad = () => {\n    const searchcraft = new SearchcraftCore(this.config, {\n      sdkName: packageJson.name,\n      sdkVersion: packageJson.version,\n    });\n    this.searchStore.initialize(searchcraft, true);\n  };\n\n  handleFormSubmit = async (event) => {\n    event.preventDefault();\n    if (this.query.trim() === '') {\n      this.error = true;\n    } else {\n      this.error = false;\n      this.searchStore.setQuery(this.query);\n      await this.searchStore.search();\n      this.searchResults = JSON.stringify(this.searchStore.searchResults);\n    }\n  };\n\n  handleSearchInputChange = (event: ScInputCustomEvent<string>) => {\n    this.query = event.detail;\n  };\n\n  handleClearInput = () => {\n    this.query = '';\n    this?.clearInput();\n  };\n\n  toggleTheme = () => {\n    this.themeStore.toggleTheme();\n  };\n\n  render() {\n    const formClass = this.rightToLeftOrientation ? 'formRTL' : 'formLTR';\n    return (\n      <form\n        class={classNames(`${formClass}`, 'searchcraft-base-search-form')}\n        onSubmit={this.handleFormSubmit}\n      >\n        <searchcraft-input-label label={this.labelForInput} />\n        <div\n          class={classNames(\n            'searchContainer',\n            'searchcraft-base-search-form-input-container',\n          )}\n        >\n          {this.rightToLeftOrientation && <searchcraft-button />}\n          <searchcraft-input\n            onClearInput={this.handleClearInput}\n            onSearchInputChange={this.handleSearchInputChange}\n            query={this.query}\n            rightToLeftOrientation={this.rightToLeftOrientation}\n          />\n          {!this.rightToLeftOrientation && (\n            <searchcraft-button onButtonClick={this.handleFormSubmit} />\n          )}\n        </div>\n        {this.error && (\n          <searchcraft-error-message errorMessage={this.errorMessage} />\n        )}\n      </form>\n    );\n  }\n}\n"]}
+{"version":3,"file":"searchcraft-base-search-form.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-base-search-form/searchcraft-base-search-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Event, Prop, State } from '@stencil/core';\n\nimport { type SearchcraftConfig, SearchcraftCore } from '@searchcraft/core';\n\nimport { useSearchcraftStore, useThemeStore } from '@provider/store';\n\nimport type { ScInputCustomEvent } from '@components/searchcraft-input/searchcraft-input';\n\nimport packageJson from '../../../package.json';\n\n@Component({\n  tag: 'searchcraft-base-search-form',\n  styleUrl: 'searchcraft-base-search-form.module.scss',\n  shadow: false,\n})\nexport class SearchcraftBaseSearchForm {\n  @Prop() config: SearchcraftConfig = {\n    readKey: '',\n    endpointURL: '',\n    index: [],\n  };\n  @Prop() errorMessage = 'Search was unsuccessful';\n  @Prop() inputLabel = 'Search';\n  @Prop() buttonLabel = 'Find';\n  @Prop() buttonPlacement: 'right' | 'left' = 'right';\n\n  @Event() clearInput = () => {};\n\n  @State() error = false;\n  @State() query = '';\n  @State() searchResults: string | null = null;\n\n  private searchStore = useSearchcraftStore.getState();\n  private themeStore = useThemeStore.getState();\n\n  componentDidLoad = () => {\n    const searchcraft = new SearchcraftCore(this.config, {\n      sdkName: packageJson.name,\n      sdkVersion: packageJson.version,\n    });\n    this.searchStore.initialize(searchcraft, true);\n  };\n\n  handleFormSubmit = async (event) => {\n    event.preventDefault();\n    if (this.query.trim() === '') {\n      this.error = true;\n    } else {\n      this.error = false;\n      this.searchStore.setQuery(this.query);\n      await this.searchStore.search();\n      this.searchResults = JSON.stringify(this.searchStore.searchResults);\n    }\n  };\n\n  handleSearchInputChange = (event: ScInputCustomEvent<string>) => {\n    this.query = event.detail;\n  };\n\n  handleClearInput = () => {\n    this.query = '';\n    this?.clearInput();\n  };\n\n  toggleTheme = () => {\n    this.themeStore.toggleTheme();\n  };\n\n  render() {\n    return (\n      <form\n        class='searchcraft-base-search-form'\n        onSubmit={this.handleFormSubmit}\n      >\n        <searchcraft-input-label label={this.inputLabel} />\n        <div class='searchcraft-base-search-form-input-container'>\n          {this.buttonPlacement === 'left' && (\n            <searchcraft-button\n              onButtonClick={this.handleFormSubmit}\n              label={this.buttonLabel}\n            />\n          )}\n          <searchcraft-input\n            onClearInput={this.handleClearInput}\n            onInputChange={this.handleSearchInputChange}\n            query={this.query}\n          />\n          {this.buttonPlacement === 'right' && (\n            <searchcraft-button\n              onButtonClick={this.handleFormSubmit}\n              label={this.buttonLabel}\n            />\n          )}\n        </div>\n        {this.error && (\n          <searchcraft-error-message errorMessage={this.errorMessage} />\n        )}\n      </form>\n    );\n  }\n}\n"]}

package/dist/collection/components/searchcraft-base-search-form/searchcraft-base-search-form.module.css

@@ -1,18 +1,104 @@
 :root {
-  --font-stack: Helvetica, Arial, sans-serif;
+  /** Appearance & Layout */
+  --sc-spinner-size: 20px;
+  --sc-input-border-radius: 8px;
+  --sc-input-search-icon-size: 20px;
+  --sc-input-clear-icon-size: 20px;
+  --sc-input-padding-left: 44px;
+  --sc-input-padding-right: 44px;
+  --sc-image-border-radius: 8px;
 }
 
-.formLTR {
-  font-family: var(--font-stack);
-  text-align: left;
+:root {
+  --sc-surface-disabled: #D9D9D9;
+  --sc-surface-neutral-primary: #FFFFFF;
+  --sc-surface-neutral-secondary: #F3F3F3;
+  --sc-surface-neutral-light: #FFFFFF;
+  --sc-surface-neutral-primary-hover: #FAFAFA;
+  --sc-surface-neutral-primary-active: #F7F7F7;
+  --sc-surface-neutral-secondary-hover: #EDEDED;
+  --sc-surface-neutral-secondary-active: #E6E6E6;
+  --sc-surface-brand-primary: #000000;
+  --sc-surface-brand-secondary: #E6E6E6;
+  --sc-surface-brand-primary-hover: #2E2E2E;
+  --sc-surface-brand-primary-active: #292929;
+  --sc-surface-brand-secondary-hover: #EBEBEB;
+  --sc-surface-brand-secondary-active: #E0E0E0;
+  --sc-surface-success-primary: #008000;
+  --sc-surface-success-secondary: #CCFFCC;
+  --sc-surface-success-primary-hover: #009900;
+  --sc-surface-success-primary-active: #006600;
+  --sc-surface-success-secondary-hover: #E6FFE6;
+  --sc-surface-success-secondary-active: #E6FFE6;
+  --sc-surface-caution-primary: #CC6600;
+  --sc-surface-caution-secondary: #FFD9B3;
+  --sc-surface-caution-primary-hover: #E57300;
+  --sc-surface-caution-primary-active: #B25A00;
+  --sc-surface-caution-secondary-hover: #FFE5CC;
+  --sc-surface-caution-secondary-active: #FFCC99;
+  --sc-surface-danger-primary: #CC0000;
+  --sc-surface-danger-secondary: #FFCCCC;
+  --sc-surface-danger-primary-hover: #E50000;
+  --sc-surface-danger-primary-active: #B30000;
+  --sc-surface-danger-secondary-hover: #FFE7E7;
+  --sc-surface-danger-secondary-active: #FFB3B3;
+  --sc-content-brand: #000000;
+  --sc-content-success: #008000;
+  --sc-content-caution: #994D00;
+  --sc-content-danger: #990000;
+  --sc-content-disabled: #737373;
+  --sc-content-neutral-primary: #292929;
+  --sc-content-neutral-secondary: #404040;
+  --sc-content-brand-on-primary: #FFFFFF;
+  --sc-content-success-on-primary: #FFFFFF;
+  --sc-content-caution-on-primary: #FFFFFF;
+  --sc-content-danger-on-primary: #FFFFFF;
+  --sc-content-disabled-on-disabled: #737373;
+  --sc-border-neutral: rgba(0,0,0, 0.1);
+  --sc-border-brand: #000000;
+  --sc-border-success: #008000;
+  --sc-border-caution: #CC6600;
+  --sc-border-danger: #CC0000;
+  --sc-border-disabled: #737373;
 }
 
-.formRTL {
-  font-family: var(--font-stack);
-  text-align: right;
+:root {
+  /** Typography */
+  --sc-font-family: sans-serif;
+  --sc-heading-1-font-size: 32px;
+  --sc-heading-1-line-height: 36px;
+  --sc-heading-1-font-weight: 700;
+  --sc-heading-2-font-size: 29px;
+  --sc-heading-2-line-height: 32px;
+  --sc-heading-2-font-weight: 700;
+  --sc-heading-3-font-size: 26px;
+  --sc-heading-3-line-height: 28px;
+  --sc-heading-3-font-weight: 700;
+  --sc-heading-4-font-size: 23px;
+  --sc-heading-4-line-height: 24px;
+  --sc-heading-4-font-weight: 700;
+  --sc-heading-5-font-size: 20px;
+  --sc-heading-5-line-height: 24px;
+  --sc-heading-5-font-weight: 700;
+  --sc-heading-6-font-size: 10px;
+  --sc-heading-6-line-height: 12px;
+  --sc-heading-6-font-weight: 700;
+  --sc-body-bold-font-size: 16px;
+  --sc-body-bold-line-height: 20px;
+  --sc-body-bold-font-weight: 700;
+  --sc-body-font-size: 16px;
+  --sc-body-line-height: 20px;
+  --sc-body-font-weight:400;
+  --sc-body-small-bold-font-size: 12px;
+  --sc-body-small-bold-line-height: 16px;
+  --sc-body-small-bold-font-weight: 700;
+  --sc-body-small-font-size: 12px;
+  --sc-body-small-line-height: 16px;
+  --sc-body-small-font-weight: 400;
 }
 
-.searchContainer {
+.searchcraft-base-search-form-input-container {
   align-items: center;
   display: flex;
+  gap: 8px;
 }