@searchcraft/javascript-sdk 0.1.0

package/dist/collection/components/sc-input/sc-input.module.css

@@ -0,0 +1,224 @@
+:root {
+  --font-stack: Helvetica, Arial, sans-serif;
+}
+
+.inputContainerLTR {
+  position: relative;
+}
+
+.inputContainerRTL {
+  position: relative;
+  margin-left: 8px;
+}
+
+.inputLightLTR {
+  border: none;
+  border-radius: 8px;
+  font-family: var(--font-stack);
+  outline: none;
+  padding-bottom: 15px;
+  padding-top: 15px;
+  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;
+  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;
+  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;
+  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;
+  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;
+  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;
+  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;
+  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;
+}

package/dist/collection/components/sc-input-caption/sc-input-caption.js

@@ -0,0 +1,122 @@
+import { h } from "@stencil/core";
+import classNames from "classnames";
+export class ScInputCaption {
+    constructor() {
+        this.error = undefined;
+        this.inputCaptionClassName = '';
+        this.inputCaptionValue = 'Enter Search';
+        this.rightToLeftOrientation = false;
+        this.theme = 'light';
+    }
+    isLightTheme() {
+        return this.theme === 'light';
+    }
+    render() {
+        return this.rightToLeftOrientation ? (h("p", { class: classNames(this.error
+                ? this.isLightTheme
+                    ? 'inputCaptionErrorLightRTL'
+                    : 'inputCaptionErrorDarkRTL'
+                : this.isLightTheme
+                    ? 'inputCaptionLightRTL'
+                    : 'inputCaptionDarkRTL', this.inputCaptionClassName, '.searchcraft-input-caption') }, this.inputCaptionValue)) : (h("p", { class: classNames(this.error
+                ? this.isLightTheme
+                    ? 'inputCaptionErrorLightLTR'
+                    : 'inputCaptionErrorDarkLTR'
+                : this.isLightTheme
+                    ? 'inputCaptionLightLTR'
+                    : 'inputCaptionDarkLTR', this.inputCaptionClassName, '.searchcraft-input-caption') }, this.inputCaptionValue));
+    }
+    static get is() { return "sc-input-caption"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sc-input-caption.module.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sc-input-caption.module.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "error",
+                "reflect": false
+            },
+            "inputCaptionClassName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "input-caption-class-name",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "inputCaptionValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "input-caption-value",
+                "reflect": false,
+                "defaultValue": "'Enter Search'"
+            },
+            "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"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "theme": {}
+        };
+    }
+}
+//# sourceMappingURL=sc-input-caption.js.map

package/dist/collection/components/sc-input-caption/sc-input-caption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sc-input-caption.js","sourceRoot":"","sources":["../../../src/components/sc-input-caption/sc-input-caption.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,OAAO,cAAc;;;qCAEQ,EAAE;iCACP,cAAc;sCACT,KAAK;qBACrB,OAAO;;IAEhB,YAAY;QAClB,OAAO,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC;IAChC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,CACnC,SACE,KAAK,EAAE,UAAU,CACf,IAAI,CAAC,KAAK;gBACR,CAAC,CAAC,IAAI,CAAC,YAAY;oBACjB,CAAC,CAAC,2BAA2B;oBAC7B,CAAC,CAAC,0BAA0B;gBAC9B,CAAC,CAAC,IAAI,CAAC,YAAY;oBACjB,CAAC,CAAC,sBAAsB;oBACxB,CAAC,CAAC,qBAAqB,EAC3B,IAAI,CAAC,qBAAqB,EAC1B,4BAA4B,CAC7B,IAEA,IAAI,CAAC,iBAAiB,CACrB,CACL,CAAC,CAAC,CAAC,CACF,SACE,KAAK,EAAE,UAAU,CACf,IAAI,CAAC,KAAK;gBACR,CAAC,CAAC,IAAI,CAAC,YAAY;oBACjB,CAAC,CAAC,2BAA2B;oBAC7B,CAAC,CAAC,0BAA0B;gBAC9B,CAAC,CAAC,IAAI,CAAC,YAAY;oBACjB,CAAC,CAAC,sBAAsB;oBACxB,CAAC,CAAC,qBAAqB,EAC3B,IAAI,CAAC,qBAAqB,EAC1B,4BAA4B,CAC7B,IAEA,IAAI,CAAC,iBAAiB,CACrB,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, State } from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'sc-input-caption',\n  styleUrl: 'sc-input-caption.module.scss',\n  shadow: true,\n})\nexport class ScInputCaption {\n  @Prop() error?: boolean;\n  @Prop() inputCaptionClassName? = '';\n  @Prop() inputCaptionValue = 'Enter Search';\n  @Prop() rightToLeftOrientation = false;\n  @State() theme = 'light';\n\n  private isLightTheme() {\n    return this.theme === 'light';\n  }\n\n  render() {\n    return this.rightToLeftOrientation ? (\n      <p\n        class={classNames(\n          this.error\n            ? this.isLightTheme\n              ? 'inputCaptionErrorLightRTL'\n              : 'inputCaptionErrorDarkRTL'\n            : this.isLightTheme\n              ? 'inputCaptionLightRTL'\n              : 'inputCaptionDarkRTL',\n          this.inputCaptionClassName,\n          '.searchcraft-input-caption',\n        )}\n      >\n        {this.inputCaptionValue}\n      </p>\n    ) : (\n      <p\n        class={classNames(\n          this.error\n            ? this.isLightTheme\n              ? 'inputCaptionErrorLightLTR'\n              : 'inputCaptionErrorDarkLTR'\n            : this.isLightTheme\n              ? 'inputCaptionLightLTR'\n              : 'inputCaptionDarkLTR',\n          this.inputCaptionClassName,\n          '.searchcraft-input-caption',\n        )}\n      >\n        {this.inputCaptionValue}\n      </p>\n    );\n  }\n}\n"]}

package/dist/collection/components/sc-input-caption/sc-input-caption.module.css

@@ -0,0 +1,79 @@
+:root {
+  --font-stack: Helvetica, Arial, sans-serif;
+}
+
+.inputCaptionLightLTR {
+  font-family: var(--font-stack);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  margin-top: 4px;
+  color: #404040;
+}
+
+.inputCaptionDarkLTR {
+  font-family: var(--font-stack);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  margin-top: 4px;
+  color: #E6E6E6;
+}
+
+.inputCaptionErrorLightLTR {
+  font-family: var(--font-stack);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  margin-top: 4px;
+  color: #990000;
+}
+
+.inputCaptionErrorDarkLTR {
+  font-family: var(--font-stack);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  margin-top: 4px;
+  color: #FFB3B3;
+}
+
+.inputCaptionLightRTL {
+  font-family: var(--font-stack);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  margin-top: 4px;
+  color: #404040;
+  text-align: right;
+}
+
+.inputCaptionDarkRTL {
+  font-family: var(--font-stack);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  margin-top: 4px;
+  color: #E6E6E6;
+  text-align: right;
+}
+
+.inputCaptionErrorLightRTL {
+  font-family: var(--font-stack);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  margin-top: 4px;
+  color: #990000;
+  text-align: right;
+}
+
+.inputCaptionErrorDarkRTL {
+  font-family: var(--font-stack);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  margin-top: 4px;
+  color: #FFB3B3;
+  text-align: right;
+}

package/dist/collection/components/sc-input-icon/sc-input-icon.js

@@ -0,0 +1,72 @@
+import { h } from "@stencil/core";
+import { SearchIconLight, SearchIconDark, SearchIconLightError, SearchIconDarkError, } from "../../assets/SearchIcons";
+export class ScInputIcon {
+    constructor() {
+        this.error = undefined;
+        this.rightToLeftOrientation = false;
+        this.theme = 'light';
+    }
+    isLightTheme() {
+        return this.theme === 'light';
+    }
+    render() {
+        return this.error ? (h("div", { class: this.rightToLeftOrientation ? 'inputIconRTL' : 'inputIconLTR' }, this.isLightTheme ? h(SearchIconLightError, null) : h(SearchIconDarkError, null))) : (h("div", { class: this.rightToLeftOrientation ? 'inputIconRTL' : 'inputIconLTR' }, this.isLightTheme ? h(SearchIconLight, null) : h(SearchIconDark, null)));
+    }
+    static get is() { return "sc-input-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sc-input-icon.module.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sc-input-icon.module.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "error",
+                "reflect": false
+            },
+            "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"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "theme": {}
+        };
+    }
+}
+//# sourceMappingURL=sc-input-icon.js.map

package/dist/collection/components/sc-input-icon/sc-input-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sc-input-icon.js","sourceRoot":"","sources":["../../../src/components/sc-input-icon/sc-input-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE1D,OAAO,EACL,eAAe,EACf,cAAc,EACd,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,qBAAqB,CAAC;AAO7B,MAAM,OAAO,WAAW;;;sCAEW,KAAK;qBACrB,OAAO;;IAEhB,YAAY;QAClB,OAAO,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC;IAChC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAClB,WACE,KAAK,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,IAEnE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAC,oBAAoB,OAAG,CAAC,CAAC,CAAC,EAAC,mBAAmB,OAAG,CACnE,CACP,CAAC,CAAC,CAAC,CACF,WACE,KAAK,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,IAEnE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAC,eAAe,OAAG,CAAC,CAAC,CAAC,EAAC,cAAc,OAAG,CACzD,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, State } from '@stencil/core';\n\nimport {\n  SearchIconLight,\n  SearchIconDark,\n  SearchIconLightError,\n  SearchIconDarkError,\n} from '@assets/SearchIcons';\n\n@Component({\n  tag: 'sc-input-icon',\n  styleUrl: 'sc-input-icon.module.scss',\n  shadow: true,\n})\nexport class ScInputIcon {\n  @Prop() error?: boolean;\n  @Prop() rightToLeftOrientation = false;\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 ? <SearchIconLightError /> : <SearchIconDarkError />}\n      </div>\n    ) : (\n      <div\n        class={this.rightToLeftOrientation ? 'inputIconRTL' : 'inputIconLTR'}\n      >\n        {this.isLightTheme ? <SearchIconLight /> : <SearchIconDark />}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/sc-input-icon/sc-input-icon.module.css

@@ -0,0 +1,19 @@
+:root {
+  --font-stack: Helvetica, Arial, sans-serif;
+}
+
+.inputIconLTR {
+  height: 20px;
+  left: 10px;
+  position: absolute;
+  top: 11px;
+  width: 20px;
+}
+
+.inputIconRTL {
+  height: 20px;
+  position: absolute;
+  right: 10px;
+  top: 11px;
+  width: 20px;
+}

package/dist/collection/components/sc-input-label/sc-input-label.js

@@ -0,0 +1,74 @@
+import { h } from "@stencil/core";
+import classNames from "classnames";
+export class ScInputLabel {
+    constructor() {
+        this.inputLabelClassName = '';
+        this.label = 'Enter Search';
+        this.theme = 'light';
+    }
+    isLightTheme() {
+        return this.theme === 'light';
+    }
+    render() {
+        const labelStyle = this.isLightTheme ? 'labelLight' : 'labelDark';
+        return (h("label", { key: 'd6f4e489c05903a0b27266df9a22b5fe5ecd57f3', class: classNames(labelStyle, this.inputLabelClassName), htmlFor: 'searchcraft-input-id' }, this.label));
+    }
+    static get is() { return "sc-input-label"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sc-input-label.module.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sc-input-label.module.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "inputLabelClassName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "input-label-class-name",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "'Enter Search'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "theme": {}
+        };
+    }
+}
+//# sourceMappingURL=sc-input-label.js.map

package/dist/collection/components/sc-input-label/sc-input-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sc-input-label.js","sourceRoot":"","sources":["../../../src/components/sc-input-label/sc-input-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,OAAO,YAAY;;mCACQ,EAAE;qBACjB,cAAc;qBACb,OAAO;;IAEhB,YAAY;QAClB,OAAO,IAAI,CAAC,KAAK,KAAK,OAAO,CAAC;IAChC,CAAC;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,CAAC;QAClE,OAAO,CACL,8DACE,KAAK,EAAE,UAAU,CAAC,UAAU,EAAE,IAAI,CAAC,mBAAmB,CAAC,EACvD,OAAO,EAAC,sBAAsB,IAE7B,IAAI,CAAC,KAAK,CACL,CACT,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, State } from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n  tag: 'sc-input-label',\n  styleUrl: 'sc-input-label.module.scss',\n  shadow: true,\n})\nexport class ScInputLabel {\n  @Prop() inputLabelClassName? = '';\n  @Prop() label = 'Enter Search';\n  @State() theme = 'light';\n\n  private isLightTheme() {\n    return this.theme === 'light';\n  }\n\n  render() {\n    const labelStyle = this.isLightTheme ? 'labelLight' : 'labelDark';\n    return (\n      <label\n        class={classNames(labelStyle, this.inputLabelClassName)}\n        htmlFor='searchcraft-input-id'\n      >\n        {this.label}\n      </label>\n    );\n  }\n}\n"]}

package/dist/collection/components/sc-input-label/sc-input-label.module.css

@@ -0,0 +1,21 @@
+:root {
+  --font-stack: Helvetica, Arial, sans-serif;
+}
+
+.labelLight {
+  font-family: var(--font-stack);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  margin-top: 4px;
+  color: #292929;
+}
+
+.labelDark {
+  font-family: var(--font-stack);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  margin-top: 4px;
+  color: #FFF;
+}

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

@@ -0,0 +1,19 @@
+import { h } from "@stencil/core";
+export class ScSpinnerDark {
+    render() {
+        return (h("div", { key: '201b6ffa04c9ad69cb169dd385e25289bae6f98d', class: 'spinnerContainer' }, h("div", { key: 'e20614e8266fe57882f0ada0c210bb0b05e0fe99', class: 'spinnerDark' })));
+    }
+    static get is() { return "sc-spinner-dark"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sc-spinner-dark.module.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sc-spinner-dark.module.css"]
+        };
+    }
+}
+//# sourceMappingURL=sc-spinner-dark.js.map

package/dist/collection/components/sc-spinner-dark/sc-spinner-dark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sc-spinner-dark.js","sourceRoot":"","sources":["../../../src/components/sc-spinner-dark/sc-spinner-dark.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7C,MAAM,OAAO,aAAa;IACxB,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,kBAAkB;YAC3B,4DAAK,KAAK,EAAC,aAAa,GAAG,CACvB,CACP,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'sc-spinner-dark',\n  styleUrl: 'sc-spinner-dark.module.scss',\n  shadow: true,\n})\nexport class ScSpinnerDark {\n  render() {\n    return (\n      <div class='spinnerContainer'>\n        <div class='spinnerDark' />\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/sc-spinner-dark/sc-spinner-dark.module.css

@@ -0,0 +1,35 @@
+.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);
+  }
+}