@searchcraft/javascript-sdk 0.5.3 → 0.6.0

package/dist/collection/components/searchcraft-popover-form/searchcraft-popover-form.module.css

@@ -0,0 +1,322 @@
+/** Appearance & Layout */
+:root {
+  /**
+   * Border radius of the input form element.
+   */
+  --sc-input-border-radius: 8px;
+  /**
+   * Icon size of the "magnifying glass" icon rendered in the input form.
+   */
+  --sc-input-search-icon-size: 20px;
+  /**
+   * Icon size of the `x` button rendered in the input form.
+   */
+  --sc-input-clear-icon-size: 20px;
+  /**
+   * Padding on the left side of the input form.
+   */
+  --sc-input-padding-left: 44px;
+  /**
+   * Padding on the right side of the input form.
+   */
+  --sc-input-padding-right: 44px;
+  /**
+   * Border radius applied to result images.
+   */
+  --sc-image-border-radius: 8px;
+  /**
+   * Border radius applied to popover form containers.
+   */
+  --sc-popover-form-border-radius: 8px;
+  /**
+   * Height of the list view/results container portion of the popover form.
+   */
+  --sc-popover-list-view-height: 400px;
+  /**
+   * Size of images of list view items in the popoer list view.
+   */
+  --sc-popover-list-item-image-size: 60px;
+  /**
+   * Horizontal padding of popover list items.
+   */
+  --sc-popover-list-item-padding-horizontal: 8px;
+  /**
+   * Vertical padding of popover list items.
+   */
+  --sc-popover-list-item-padding-vertical: 8px;
+  /**
+   * Maximum width of popover forms of type `modal`.
+   */
+  --sc-popover-modal-max-width: 570px;
+}
+
+:root {
+  --sc-surface-disabled: #D9D9D9;
+  --sc-surface-neutral-primary: #FFFFFF;
+  --sc-surface-neutral-secondary: #F3F3F3;
+  --sc-surface-neutral-light: #FFFFFF;
+  --sc-surface-neutral-primary-hover: #FAFAFA;
+  --sc-surface-neutral-primary-active: #F7F7F7;
+  --sc-surface-neutral-secondary-hover: #EDEDED;
+  --sc-surface-neutral-secondary-active: #E6E6E6;
+  --sc-surface-brand-primary: #000000;
+  --sc-surface-brand-secondary: #E6E6E6;
+  --sc-surface-brand-primary-hover: #2E2E2E;
+  --sc-surface-brand-primary-active: #292929;
+  --sc-surface-brand-secondary-hover: #EBEBEB;
+  --sc-surface-brand-secondary-active: #E0E0E0;
+  --sc-surface-success-primary: #008000;
+  --sc-surface-success-secondary: #CCFFCC;
+  --sc-surface-success-primary-hover: #009900;
+  --sc-surface-success-primary-active: #006600;
+  --sc-surface-success-secondary-hover: #E6FFE6;
+  --sc-surface-success-secondary-active: #E6FFE6;
+  --sc-surface-caution-primary: #CC6600;
+  --sc-surface-caution-secondary: #FFD9B3;
+  --sc-surface-caution-primary-hover: #E57300;
+  --sc-surface-caution-primary-active: #B25A00;
+  --sc-surface-caution-secondary-hover: #FFE5CC;
+  --sc-surface-caution-secondary-active: #FFCC99;
+  --sc-surface-danger-primary: #CC0000;
+  --sc-surface-danger-secondary: #FFCCCC;
+  --sc-surface-danger-primary-hover: #E50000;
+  --sc-surface-danger-primary-active: #B30000;
+  --sc-surface-danger-secondary-hover: #FFE7E7;
+  --sc-surface-danger-secondary-active: #FFB3B3;
+  --sc-content-brand: #000000;
+  --sc-content-success: #008000;
+  --sc-content-caution: #994D00;
+  --sc-content-danger: #990000;
+  --sc-content-disabled: #737373;
+  --sc-content-neutral-primary: #292929;
+  --sc-content-neutral-secondary: #404040;
+  --sc-content-brand-on-primary: #FFFFFF;
+  --sc-content-success-on-primary: #FFFFFF;
+  --sc-content-caution-on-primary: #FFFFFF;
+  --sc-content-danger-on-primary: #FFFFFF;
+  --sc-content-disabled-on-disabled: #737373;
+  --sc-border-neutral: rgba(0,0,0, 0.1);
+  --sc-border-brand: #000000;
+  --sc-border-success: #008000;
+  --sc-border-caution: #CC6600;
+  --sc-border-danger: #CC0000;
+  --sc-border-disabled: #737373;
+}
+
+:root {
+  /** 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;
+}
+
+/**
+* Variables that need to be part of the preprocessor can go here.
+*/
+:root {
+  --sc-breakpoint-sm: 576px;
+  --sc-breakpoint-md: 768px;
+  --sc-breakpoint-lg: 992px;
+}
+
+/**
+* Styles applied to all popover form variants.
+*/
+.searchcraft-popover-form {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+.searchcraft-popover-form .searchcraft-popover-form-input-wrapper {
+  padding: 12px;
+  background-color: var(--sc-surface-neutral-secondary);
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+}
+.searchcraft-popover-form .searchcraft-popover-form-input-wrapper > searchcraft-input-form {
+  flex: 1;
+}
+.searchcraft-popover-form .searchcraft-popover-form-cancel-button {
+  font-family: var(--sc-font-family);
+  -webkit-font-smoothing: antialiased;
+  font-size: var(--sc-body-font-size);
+  font-weight: var(--sc-body-font-weight);
+  line-height: var(--sc-body-line-height);
+  border: 0;
+  outline: 0;
+  padding: 0;
+  flex-shrink: 0;
+  background: none;
+  cursor: pointer;
+  padding-left: 12px;
+  padding-right: 12px;
+  border-radius: calc(var(--sc-popover-form-border-radius) * 0.8);
+}
+.searchcraft-popover-form .searchcraft-popover-form-cancel-button:hover {
+  background-color: var(--sc-surface-brand-secondary-hover);
+}
+.searchcraft-popover-form .searchcraft-popover-form-cancel-button:focus {
+  background-color: var(--sc-surface-brand-secondary-active);
+}
+
+/**
+ * Styles applied to `inline` popover forms.
+ */
+.searchcraft-popover-form-inline .searchcraft-input {
+  border-top-left-radius: var(--sc-popover-form-border-radius);
+  border-top-right-radius: var(--sc-popover-form-border-radius);
+  border-bottom-left-radius: var(--sc-popover-form-border-radius);
+  border-bottom-right-radius: var(--sc-popover-form-border-radius);
+  border: none;
+  outline: none;
+}
+.searchcraft-popover-form-inline.searchcraft-popover-form-active .searchcraft-input {
+  border-top-left-radius: var(--sc-popover-form-border-radius);
+  border-top-right-radius: var(--sc-popover-form-border-radius);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.searchcraft-popover-form-inline .searchcraft-popover-inline-wrapper-outer {
+  position: relative;
+}
+.searchcraft-popover-form-inline .searchcraft-popover-inline-wrapper-inner {
+  position: absolute;
+  height: var(--sc-popover-list-view-height);
+  z-index: 1000;
+  width: 100%;
+}
+.searchcraft-popover-form-inline .searchcraft-popover-list-view {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  background-color: var(--sc-surface-neutral-secondary);
+  border-bottom-left-radius: var(--sc-popover-form-border-radius);
+  border-bottom-right-radius: var(--sc-popover-form-border-radius);
+  max-height: var(--sc-popover-list-view-height);
+}
+
+/**
+ * Styles applied to `modal` popover forms.
+ */
+.searchcraft-popover-form-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 0;
+  background-color: var(--sc-surface-neutral-secondary);
+}
+@media (min-width: 576px) {
+  .searchcraft-popover-form-modal {
+    padding: 16px;
+    background-color: transparent;
+  }
+}
+.searchcraft-popover-form-modal .searchcraft-input {
+  border-radius: calc(var(--sc-popover-form-border-radius) * 0.8);
+  outline-width: 1px;
+  outline-color: var(--sc-border-neutral);
+}
+.searchcraft-popover-form-modal .searchcraft-popover-form-modal-backdrop {
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: none;
+}
+@media (min-width: 576px) {
+  .searchcraft-popover-form-modal .searchcraft-popover-form-modal-backdrop {
+    display: block;
+  }
+}
+.searchcraft-popover-form-modal .searchcraft-popover-form-modal-inner {
+  position: absolute;
+  inset: 0;
+  z-index: 1002;
+  margin-top: 0px;
+  display: flex;
+  border-radius: var(--sc-popover-form-border-radius);
+  overflow: hidden;
+}
+@media (min-width: 576px) {
+  .searchcraft-popover-form-modal .searchcraft-popover-form-modal-inner {
+    inset: auto;
+    position: relative;
+    width: 100%;
+    margin-top: 100px;
+    max-width: var(--sc-popover-modal-max-width);
+  }
+}
+.searchcraft-popover-form-modal .searchcraft-popover-list-view {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  background-color: var(--sc-surface-neutral-secondary);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+@media (min-width: 576px) {
+  .searchcraft-popover-form-modal .searchcraft-popover-list-view {
+    max-height: var(--sc-popover-list-view-height);
+  }
+}
+.searchcraft-popover-form-modal searchcraft-popover-list-view {
+  overflow: scroll;
+}
+@media (min-width: 576px) {
+  .searchcraft-popover-form-modal searchcraft-popover-list-view {
+    overflow: auto;
+  }
+}
+
+/**
+ * Styles applied to `fullscreen` popover forms.
+ */
+.searchcraft-popover-form-fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background-color: var(--sc-surface-neutral-secondary);
+}
+.searchcraft-popover-form-fullscreen .searchcraft-popover-form {
+  position: absolute;
+  inset: 0;
+}
+.searchcraft-popover-form-fullscreen .searchcraft-input {
+  border-radius: calc(var(--sc-popover-form-border-radius) * 0.8);
+  outline-width: 1px;
+  outline-color: var(--sc-border-neutral);
+}
+.searchcraft-popover-form-fullscreen searchcraft-popover-list-view {
+  overflow: scroll;
+}

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

@@ -0,0 +1,139 @@
+import { h } from "@stencil/core";
+/**
+ * A single list item rendered in a searchcraft-popover-list-view.
+ */
+export class SearchcraftPopoverListItem {
+    constructor() {
+        this.titleContent = undefined;
+        this.subtitleContent = undefined;
+        this.imageSrc = undefined;
+        this.imageAlt = undefined;
+        this.href = undefined;
+        this.documentPosition = undefined;
+    }
+    componentDidLoad() { }
+    connectedCallback() { }
+    disconnectedCallback() { }
+    handleButtonClick() { }
+    render() {
+        return (h("a", { key: 'b7a590e92994869477825dd17545e8d4e05d1d07', class: 'searchcraft-popover-list-item', href: this.href }, this.imageSrc && (h("div", { key: '129525e50ec17dce052f503af318b56e06c900ef', class: 'searchcraft-popover-list-item-image-wrapper' }, h("img", { key: '4ba701f35cbf7e167e7edd63ba19e3576e620c26', alt: this.imageAlt, src: this.imageSrc, class: 'searchcraft-popover-list-item-image' }))), h("div", { key: '6a6ab09451f5d9d4e554dc1f1fcd57ec13adf2f2', class: 'searchcraft-popover-list-item-info-wrapper' }, h("p", { key: '476fdefff6cb35167fb00f24cdf03b9f8d826ba5', class: 'searchcraft-popover-list-item-title' }, this.titleContent), h("p", { key: 'b43fd584bfcc8efc7d50d7220b649fafc8bba244', class: 'searchcraft-popover-list-item-subtitle' }, this.subtitleContent))));
+    }
+    static get is() { return "searchcraft-popover-list-item"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["searchcraft-popover-list-item.module.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["searchcraft-popover-list-item.module.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "titleContent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The result title"
+                },
+                "attribute": "title-content",
+                "reflect": false
+            },
+            "subtitleContent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The result subtitle"
+                },
+                "attribute": "subtitle-content",
+                "reflect": false
+            },
+            "imageSrc": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The source of the image. If not included, no item will be rendered."
+                },
+                "attribute": "image-src",
+                "reflect": false
+            },
+            "imageAlt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The image alt tag."
+                },
+                "attribute": "image-alt",
+                "reflect": false
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The link href"
+                },
+                "attribute": "href",
+                "reflect": false
+            },
+            "documentPosition": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The document position relative to the search results (For Measure)"
+                },
+                "attribute": "document-position",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=searchcraft-popover-list-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"searchcraft-popover-list-item.js","sourceRoot":"","sources":["../../../../src/components/searchcraft-popover-list-item/searchcraft-popover-list-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AAMH,MAAM,OAAO,0BAA0B;;;;;;;;;IAcrC,gBAAgB,KAAI,CAAC;IAErB,iBAAiB,KAAI,CAAC;IAEtB,oBAAoB,KAAI,CAAC;IAEzB,iBAAiB,KAAI,CAAC;IAEtB,MAAM;QACJ,OAAO,CACL,0DAAG,KAAK,EAAC,+BAA+B,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI;YACrD,IAAI,CAAC,QAAQ,IAAI,CAChB,4DAAK,KAAK,EAAC,6CAA6C;gBACtD,4DACE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,qCAAqC,GAC3C,CACE,CACP;YACD,4DAAK,KAAK,EAAC,4CAA4C;gBACrD,0DAAG,KAAK,EAAC,qCAAqC,IAAE,IAAI,CAAC,YAAY,CAAK;gBACtE,0DAAG,KAAK,EAAC,wCAAwC,IAC9C,IAAI,CAAC,eAAe,CACnB,CACA,CACJ,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * A single list item rendered in a searchcraft-popover-list-view.\n */\n@Component({\n  tag: 'searchcraft-popover-list-item',\n  styleUrl: 'searchcraft-popover-list-item.module.scss',\n  shadow: false,\n})\nexport class SearchcraftPopoverListItem {\n  /** The result title */\n  @Prop() titleContent: string | undefined;\n  /** The result subtitle */\n  @Prop() subtitleContent: string | undefined;\n  /** The source of the image. If not included, no item will be rendered. */\n  @Prop() imageSrc: string | undefined;\n  /** The image alt tag. */\n  @Prop() imageAlt: string | undefined;\n  /** The link href */\n  @Prop() href: string | undefined;\n  /** The document position relative to the search results (For Measure) */\n  @Prop() documentPosition: number;\n\n  componentDidLoad() {}\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  handleButtonClick() {}\n\n  render() {\n    return (\n      <a class='searchcraft-popover-list-item' href={this.href}>\n        {this.imageSrc && (\n          <div class='searchcraft-popover-list-item-image-wrapper'>\n            <img\n              alt={this.imageAlt}\n              src={this.imageSrc}\n              class='searchcraft-popover-list-item-image'\n            />\n          </div>\n        )}\n        <div class='searchcraft-popover-list-item-info-wrapper'>\n          <p class='searchcraft-popover-list-item-title'>{this.titleContent}</p>\n          <p class='searchcraft-popover-list-item-subtitle'>\n            {this.subtitleContent}\n          </p>\n        </div>\n      </a>\n    );\n  }\n}\n"]}

package/dist/collection/components/searchcraft-popover-list-item/searchcraft-popover-list-item.module.css

@@ -0,0 +1,209 @@
+/** Appearance & Layout */
+:root {
+  /**
+   * Border radius of the input form element.
+   */
+  --sc-input-border-radius: 8px;
+  /**
+   * Icon size of the "magnifying glass" icon rendered in the input form.
+   */
+  --sc-input-search-icon-size: 20px;
+  /**
+   * Icon size of the `x` button rendered in the input form.
+   */
+  --sc-input-clear-icon-size: 20px;
+  /**
+   * Padding on the left side of the input form.
+   */
+  --sc-input-padding-left: 44px;
+  /**
+   * Padding on the right side of the input form.
+   */
+  --sc-input-padding-right: 44px;
+  /**
+   * Border radius applied to result images.
+   */
+  --sc-image-border-radius: 8px;
+  /**
+   * Border radius applied to popover form containers.
+   */
+  --sc-popover-form-border-radius: 8px;
+  /**
+   * Height of the list view/results container portion of the popover form.
+   */
+  --sc-popover-list-view-height: 400px;
+  /**
+   * Size of images of list view items in the popoer list view.
+   */
+  --sc-popover-list-item-image-size: 60px;
+  /**
+   * Horizontal padding of popover list items.
+   */
+  --sc-popover-list-item-padding-horizontal: 8px;
+  /**
+   * Vertical padding of popover list items.
+   */
+  --sc-popover-list-item-padding-vertical: 8px;
+  /**
+   * Maximum width of popover forms of type `modal`.
+   */
+  --sc-popover-modal-max-width: 570px;
+}
+
+:root {
+  --sc-surface-disabled: #D9D9D9;
+  --sc-surface-neutral-primary: #FFFFFF;
+  --sc-surface-neutral-secondary: #F3F3F3;
+  --sc-surface-neutral-light: #FFFFFF;
+  --sc-surface-neutral-primary-hover: #FAFAFA;
+  --sc-surface-neutral-primary-active: #F7F7F7;
+  --sc-surface-neutral-secondary-hover: #EDEDED;
+  --sc-surface-neutral-secondary-active: #E6E6E6;
+  --sc-surface-brand-primary: #000000;
+  --sc-surface-brand-secondary: #E6E6E6;
+  --sc-surface-brand-primary-hover: #2E2E2E;
+  --sc-surface-brand-primary-active: #292929;
+  --sc-surface-brand-secondary-hover: #EBEBEB;
+  --sc-surface-brand-secondary-active: #E0E0E0;
+  --sc-surface-success-primary: #008000;
+  --sc-surface-success-secondary: #CCFFCC;
+  --sc-surface-success-primary-hover: #009900;
+  --sc-surface-success-primary-active: #006600;
+  --sc-surface-success-secondary-hover: #E6FFE6;
+  --sc-surface-success-secondary-active: #E6FFE6;
+  --sc-surface-caution-primary: #CC6600;
+  --sc-surface-caution-secondary: #FFD9B3;
+  --sc-surface-caution-primary-hover: #E57300;
+  --sc-surface-caution-primary-active: #B25A00;
+  --sc-surface-caution-secondary-hover: #FFE5CC;
+  --sc-surface-caution-secondary-active: #FFCC99;
+  --sc-surface-danger-primary: #CC0000;
+  --sc-surface-danger-secondary: #FFCCCC;
+  --sc-surface-danger-primary-hover: #E50000;
+  --sc-surface-danger-primary-active: #B30000;
+  --sc-surface-danger-secondary-hover: #FFE7E7;
+  --sc-surface-danger-secondary-active: #FFB3B3;
+  --sc-content-brand: #000000;
+  --sc-content-success: #008000;
+  --sc-content-caution: #994D00;
+  --sc-content-danger: #990000;
+  --sc-content-disabled: #737373;
+  --sc-content-neutral-primary: #292929;
+  --sc-content-neutral-secondary: #404040;
+  --sc-content-brand-on-primary: #FFFFFF;
+  --sc-content-success-on-primary: #FFFFFF;
+  --sc-content-caution-on-primary: #FFFFFF;
+  --sc-content-danger-on-primary: #FFFFFF;
+  --sc-content-disabled-on-disabled: #737373;
+  --sc-border-neutral: rgba(0,0,0, 0.1);
+  --sc-border-brand: #000000;
+  --sc-border-success: #008000;
+  --sc-border-caution: #CC6600;
+  --sc-border-danger: #CC0000;
+  --sc-border-disabled: #737373;
+}
+
+:root {
+  /** 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;
+}
+
+/**
+* Variables that need to be part of the preprocessor can go here.
+*/
+:root {
+  --sc-breakpoint-sm: 576px;
+  --sc-breakpoint-md: 768px;
+  --sc-breakpoint-lg: 992px;
+}
+
+.searchcraft-popover-list-item {
+  all: unset;
+  display: flex;
+  flex-direction: row;
+  cursor: pointer;
+  gap: 8px;
+  padding-right: var(--sc-popover-list-item-padding-horizontal);
+  padding-left: var(--sc-popover-list-item-padding-horizontal);
+  padding-top: var(--sc-popover-list-item-padding-vertical);
+  padding-bottom: var(--sc-popover-list-item-padding-vertical);
+}
+.searchcraft-popover-list-item:focus {
+  background-color: var(--sc-surface-neutral-secondary-active);
+  color: var(--sc-content-neutral-secondary);
+}
+.searchcraft-popover-list-item:hover {
+  background-color: var(--sc-surface-neutral-secondary-hover);
+  color: var(--sc-content-neutral-secondary);
+}
+
+.searchcraft-popover-list-item-title {
+  font-family: var(--sc-font-family);
+  -webkit-font-smoothing: antialiased;
+  font-size: var(--sc-body-font-size);
+  font-weight: var(--sc-body-font-weight);
+  line-height: var(--sc-body-line-height);
+  margin: 0;
+  color: inherit;
+}
+
+.searchcraft-popover-list-item-subtitle {
+  font-family: var(--sc-font-family);
+  -webkit-font-smoothing: antialiased;
+  font-size: var(--sc-body-small-font-size);
+  font-weight: var(--sc-body-small-font-weight);
+  line-height: var(--sc-body-small-line-height);
+  margin: 0;
+  color: inherit;
+}
+
+.searchcraft-popover-list-item-image-wrapper {
+  width: var(--sc-popover-list-item-image-size);
+  height: var(--sc-popover-list-item-image-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.searchcraft-popover-list-item-image {
+  max-width: var(--sc-popover-list-item-image-size);
+  max-height: var(--sc-popover-list-item-image-size);
+}
+
+.searchcraft-popover-list-item-info-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  justify-content: center;
+}