@salla.sa/twilight-components 2.14.557 → 2.14.558

package/dist/collection/components/salla-modal/salla-modal.js

@@ -65,6 +65,11 @@ export class SallaModal {
          * Show a back button in the header corner. Defaults to `false`
          */
         this.showBack = false;
+        /**
+         * Hide the close (X) button in the modal header, without affecting `isClosable`
+         * (backdrop click / programmatic close still work). Defaults to `false`
+         */
+        this.hideCloseButton = false;
         salla.event.on('modal::open', target => target == this.host.id && this.open());
         salla.event.on('modal::close', target => target == this.host.id && this.close());
         this.modalTitle = this.host.getAttribute('modal-title');
@@ -80,7 +85,7 @@ export class SallaModal {
         setTimeout(() => this.toggleModal(true)); //small amont of time to running toggle After adding hidden
     }
     handleKeyUp(ev) {
-        if (ev.key === "KeyUp") {
+        if (ev.key === "Escape") {
             this.closeModal();
         }
     }
@@ -175,7 +180,7 @@ export class SallaModal {
         }
         return (h(Host, { class: 'salla-modal s-modal s-modal-container s-hidden', "aria-modal": "true", role: "dialog" }, h("div", { class: "s-modal-overlay", ref: el => this.overlay = el, onClick: () => this.closeModal("backdropClick") }), h("div", { class: "s-modal-wrapper" }, h("span", { class: 's-modal-spacer s-modal-align-' + this.position }, "\u200B"), h("div", { class: 's-modal-body ' + 's-modal-align-' + this.position + ' s-modal-' + this.getWidth() + (this.noPadding ? ' s-modal-nopadding' : ' s-modal-padding'), style: this.getCustomWidthStyle() }, h("div", { class: { 's-modal-header': true, 's-modal-is-center': this.centered } }, this.showBack ?
             h("salla-button", { class: "s-modal-back", shape: "icon", color: "light", size: "medium", "aria-label": "Back", onClick: () => this.handleBack() }, h("span", { innerHTML: this.getBackIcon() }))
-            : '', this.isClosable ?
+            : '', this.isClosable && !this.hideCloseButton ?
             h("button", { class: "s-modal-close", onClick: () => this.closeModal("closeButtonClick"), type: "button" }, h("span", { innerHTML: CancelIcon }))
             : '', this.modalTitle || this.subTitle ?
             h("div", { class: "s-modal-header-inner" }, h("slot", { name: 'icon' }, !!this.iconStyle ?
@@ -459,6 +464,26 @@ export class SallaModal {
                 "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "hideCloseButton": {
+                "type": "boolean",
+                "attribute": "hide-close-button",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide the close (X) button in the modal header, without affecting `isClosable`\n(backdrop click / programmatic close still work). Defaults to `false`"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/salla-product-card/salla-product-card.css

@@ -366,6 +366,7 @@
 }
 .s-product-card-content-title a {
   display: block;
+  text-align: start;
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
@@ -382,6 +383,13 @@
   align-items: center;
   justify-content: space-between;
 }
+.s-product-card-out-of-stock-label {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 700;
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+}
 .s-product-card-rating {
   display: flex;
   align-items: center;
@@ -622,6 +630,12 @@
 .s-product-card-compact .s-product-card-content-footer {
   margin-top: 0px;
   flex-shrink: 0;
+  gap: 0.5rem;
+}
+.s-product-card-add-to-cart-icon svg {
+  height: 1rem;
+  width: 1rem;
+  fill: currentColor;
 }
 .s-product-card-compact .s-add-product-button-compact salla-button .s-button-btn {
   height: 2rem;
@@ -658,7 +672,7 @@
 .s-product-card-compact .s-product-card-content-title {
   font-size: 0.875rem;
   line-height: 1.25rem;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 1.25;
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity, 1));
@@ -668,7 +682,7 @@
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
-  display: block;
+  font-weight: 500;
 }
 .s-product-card-compact .s-product-card-content-subtitle {
   margin-top: 0.25rem;
@@ -710,3 +724,9 @@
 .s-product-card-compact .s-product-card-promotion-title {
   display: none;
 }
+.s-search-grid-item .s-product-card-out-badge {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
+}

package/dist/collection/components/salla-product-card/salla-product-card.js

@@ -4,11 +4,30 @@
 import { Host, h } from "@stencil/core";
 import Heart from "../../assets/svg/heart.svg";
 import Star from "../../assets/svg/star2.svg";
+import Cart from "../../assets/svg/cart.svg";
 /**
  * @slot add-to-cart-label - Add to cart label.
  */
 export class SallaProductCard {
     constructor() {
+        /**
+         *  Force-show the wishlist button even in layouts (e.g. horizontal + compact)
+         *  that otherwise wouldn't render one. Defaults to `false`.
+         */
+        this.forceShowWishlistButton = false;
+        /**
+         *  Show only the cart icon instead of the text label on the add-to-cart button.
+         *  Defaults to `false`.
+         */
+        this.compactAddToCart = false;
+        /**
+         *  Show the out-of-stock label beside the price instead of as the image badge
+         *  rendered by `getProductBadge()`. Defaults to `false`.
+         */
+        this.showOutOfStockBesidePrice = false;
+        // CSS line-clamp alone isn't reliable enough here (cross-browser + RTL edge cases), so
+        // compact titles are also hard-truncated in JS to guarantee at most ~2 lines.
+        this.COMPACT_TITLE_MAX_LENGTH = 60;
         // Store configs
         salla.onReady(() => {
             this.fitImageHeight = salla.config.get('store.settings.product.fit_type');
@@ -63,18 +82,30 @@ export class SallaProductCard {
         let d = new Date(date);
         return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
     }
+    getDisplayTitle() {
+        const name = this.productData?.name || '';
+        if (!this.compact || name.length <= this.COMPACT_TITLE_MAX_LENGTH) {
+            return name;
+        }
+        return name.slice(0, this.COMPACT_TITLE_MAX_LENGTH).trimEnd() + '…';
+    }
     getProductBadge() {
-        if (this.productData.promotion_title) {
-            return h("div", { class: "s-product-card-promotion-title" }, this.productData.promotion_title);
+        if (this.productData?.is_out_of_stock && !this.showOutOfStockBesidePrice) {
+            return h("div", { class: "s-product-card-out-badge" }, this.outOfStock);
         }
         if (this.showQuantity && this.productData?.quantity) {
             return h("div", { class: "s-product-card-quantity" }, this.remained, " ", salla.helpers.number(this.productData?.quantity));
         }
-        if (this.showQuantity && this.productData?.is_out_of_stock) {
-            return h("div", { class: "s-product-card-out-badge" }, this.outOfStock);
+        if (this.productData.promotion_title) {
+            return h("div", { class: "s-product-card-promotion-title" }, this.productData.promotion_title);
         }
         return '';
     }
+    renderAddToCartLabel() {
+        return (h("slot", { name: "add-to-cart-label" }, this.compactAddToCart
+            ? h("span", { class: "s-product-card-add-to-cart-icon", innerHTML: Cart })
+            : this.productData.add_to_cart_label));
+    }
     getPriceFormat(price) {
         if (!price || price == 0) {
             return salla.config.get('store.settings.product.show_price_as_dash') ? '-' : '';
@@ -105,14 +136,14 @@ export class SallaProductCard {
             's-product-card-out-of-stock': this.productData?.is_out_of_stock,
         };
         const hrefProp = this.productData?.url ? { href: this.productData.url, title: `Learn more about ${this.productData?.name}` } : {};
-        return (h(Host, { key: 'c5a6d2bc2fcf23da1a41ab8b19b2e981fb111e30', id: `product-${this.productData?.id}`, class: classes }, h("div", { key: 'e8d5105e4dbe367c612d62ef1dd6c95d04f440b0', class: !this.fullImage ? 's-product-card-image' : 's-product-card-image-full' }, h("a", { key: '8714997fcb48ef0eaabdf0a52cb775514e53db56', ...hrefProp }, h("img", { key: 'eebd3c1dde0894037a7723c46e2f07f6a5aef939', class: `s-product-card-image-${salla.url.is_placeholder(this.productData?.image?.url)
+        return (h(Host, { key: 'e0748a44b8e851c7aff3ee741a17dcb19dabfdaf', id: `product-${this.productData?.id}`, class: classes }, h("div", { key: '10cc1deb8384ad2bbe83263f82b257d5042cff8e', class: !this.fullImage ? 's-product-card-image' : 's-product-card-image-full' }, h("a", { key: 'd976cc14bb10c2d5fe6c55253ea051b8a57d7721', ...hrefProp }, h("img", { key: '9007014be0cb7adc56541e0b1e823fb4d6f92b84', class: `s-product-card-image-${salla.url.is_placeholder(this.productData?.image?.url)
                 ? 'contain'
                 : this.fitImageHeight
                     ? this.fitImageHeight
-                    : 'cover'} lazy`, src: this.placeholder, alt: this.productData?.image?.alt || this.productData?.name, "data-src": this.productData?.image?.url || this.productData?.thumbnail }), !this.fullImage && !this.minimal ? this.getProductBadge() : ''), this.fullImage && h("a", { key: '72e240315320e976dcad8d3f027711b9c1d7bcf1', ...hrefProp, class: "s-product-card-overlay" }), !this.horizontal && !this.fullImage ?
-            h("salla-button", { shape: "icon", fill: "none", color: "light", loading: false, "aria-label": "Add or remove to wishlist", ref: el => this.wishlistBtn = el, class: "s-product-card-wishlist-btn animated", onClick: () => this.handleWishlistClick() }, h("span", { innerHTML: Heart })) : ''), h("div", { key: '2f0186ffc102488824cd7c346f4e07439474fc26', class: "s-product-card-content" }, this.isSpecial && this.productData?.quantity ?
+                    : 'cover'} lazy`, src: this.placeholder, alt: this.productData?.image?.alt || this.productData?.name, "data-src": this.productData?.image?.url || this.productData?.thumbnail }), !this.fullImage && !this.minimal ? this.getProductBadge() : ''), this.fullImage && h("a", { key: 'c101c02eeb4e0245fbcd713b0e83c81148e594c1', ...hrefProp, class: "s-product-card-overlay" }), !this.horizontal && !this.fullImage ?
+            h("salla-button", { shape: "icon", fill: "none", color: "light", loading: false, "aria-label": "Add or remove to wishlist", ref: el => this.wishlistBtn = el, class: "s-product-card-wishlist-btn animated", onClick: () => this.handleWishlistClick() }, h("span", { innerHTML: Heart })) : ''), h("div", { key: 'f02eaeabefd56d7b560dcd268e2b941cf843cc95', class: "s-product-card-content" }, this.isSpecial && this.productData?.quantity ?
             h("div", { class: "s-product-card-content-pie", ref: pie => this.pie = pie }, h("span", null, h("b", null, salla.helpers.number(this.productData?.quantity)), this.remained), h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "-2 -1 36 34", class: "s-product-card-content-pie-svg" }, h("circle", { cx: "16", cy: "16", r: "15.9155", class: "s-product-card-content-pie-svg-base" }), h("circle", { cx: "16", cy: "16", r: "15.9155", class: "s-product-card-content-pie-svg-bar" })))
-            : '', h("div", { key: 'd50ea0726d25bf3b551050e906fc615bc682e694', class: { 's-product-card-content-main': true, 's-product-card-content-extra-padding': this.isSpecial } }, h("h3", { key: 'e4f39676d661a01d1aa6352cac7be6e764fa8687', class: "s-product-card-content-title" }, h("a", { key: '0aacc2e00a0db730d1e803da34336085082df75d', ...hrefProp }, this.productData?.name)), this.productData?.subtitle && !this.minimal ?
+            : '', h("div", { key: '9776564de24468852192dce1ff0db35cd6c533c3', class: { 's-product-card-content-main': true, 's-product-card-content-extra-padding': this.isSpecial } }, h("h3", { key: 'd78ea05cba95053f99495c5e8aeb59a9b66557c8', class: "s-product-card-content-title" }, h("a", { key: 'a8ba81e8ba7a4e59cf4c6bcb4370ea0965b82087', ...hrefProp }, this.getDisplayTitle())), this.productData?.subtitle && !this.minimal ?
             h("p", { class: "s-product-card-content-subtitle" }, this.productData?.subtitle)
             : ''), this.productData?.donation && !this.minimal && !this.fullImage ?
             [h("salla-progress-bar", { donation: this.productData?.donation }), h("div", { class: "s-product-card-donation-input" }, this.productData?.donation?.can_donate ?
@@ -121,16 +152,20 @@ export class SallaProductCard {
                                 this.addBtn.donatingAmount = e.target.value;
                             }, id: "donation-amount", name: "donating_amount", class: "s-form-control", placeholder: this.donationAmount })]
                     : '')]
-            : '', h("div", { key: '445a1e16fee6ebb6ab5012aca324d3845991d13e', class: { 's-product-card-content-sub': true, 's-product-card-content-extra-padding': this.isSpecial } }, this.getProductPrice(), this.productData?.rating?.stars && !this.minimal ?
+            : '', h("div", { key: '290e93db790c81a11e8d2edf3d215cec03edc965', class: { 's-product-card-content-sub': true, 's-product-card-content-extra-padding': this.isSpecial } }, this.getProductPrice(), this.showOutOfStockBesidePrice && this.productData?.is_out_of_stock ?
+            h("span", { class: "s-product-card-out-of-stock-label" }, this.outOfStock)
+            : '', this.productData?.rating?.stars && !this.minimal ?
             h("div", { class: "s-product-card-rating" }, h("span", { innerHTML: Star }), h("span", null, this.productData.rating.stars))
             : ''), this.isSpecial && this.productData.discount_ends
             ? h("salla-count-down", { date: this.formatDate(this.productData.discount_ends), "end-of-day": true, boxed: true, labeled: true })
             : '', !this.hideAddBtn && !this.compact ?
-            h("div", { class: "s-product-card-content-footer" }, h("salla-add-product-button", { fill: "outline", width: "wide", ref: el => this.addBtn = el, "product-id": this.productData.id, "product-status": this.productData.status, "product-type": this.productData.type }, h("slot", { name: "add-to-cart-label" }, this.productData.add_to_cart_label)), this.horizontal || this.fullImage ?
+            h("div", { class: "s-product-card-content-footer" }, h("salla-add-product-button", { fill: "outline", width: "wide", ref: el => this.addBtn = el, "product-id": this.productData.id, "product-status": this.productData.status, "product-type": this.productData.type }, this.renderAddToCartLabel()), this.horizontal || this.fullImage ?
                 h("salla-button", { shape: "icon", fill: "none", color: "light", loading: false, ref: el => this.wishlistBtn = el, "aria-label": "Add or remove to wishlist", class: "s-product-card-wishlist-btn animated", onClick: () => this.handleWishlistClick(), "data-id": "{{ product.id }}" }, h("span", { class: "text-xl", innerHTML: Heart }))
                 : '')
             : ''), !this.hideAddBtn && this.compact ?
-            h("div", { class: "s-product-card-content-footer" }, h("salla-add-product-button", { ref: el => this.addBtn = el, "product-id": this.productData.id, "product-status": this.productData.status, "product-type": this.productData.type, class: "s-add-product-button-compact" }, h("slot", { name: "add-to-cart-label" }, this.productData.add_to_cart_label)))
+            h("div", { class: "s-product-card-content-footer" }, h("salla-add-product-button", { ref: el => this.addBtn = el, "product-id": this.productData.id, "product-status": this.productData.status, "product-type": this.productData.type, class: "s-add-product-button-compact" }, this.renderAddToCartLabel()), this.forceShowWishlistButton ?
+                h("salla-button", { shape: "icon", fill: "none", color: "light", loading: false, ref: el => this.wishlistBtn = el, "aria-label": "Add or remove to wishlist", class: "s-product-card-wishlist-btn animated", onClick: () => this.handleWishlistClick() }, h("span", { innerHTML: Heart }))
+                : '')
             : ''));
     }
     componentDidLoad() {
@@ -326,6 +361,66 @@ export class SallaProductCard {
                 "getter": false,
                 "setter": false,
                 "reflect": true
+            },
+            "forceShowWishlistButton": {
+                "type": "boolean",
+                "attribute": "force-show-wishlist-button",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Force-show the wishlist button even in layouts (e.g. horizontal + compact)\nthat otherwise wouldn't render one. Defaults to `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "compactAddToCart": {
+                "type": "boolean",
+                "attribute": "compact-add-to-cart",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show only the cart icon instead of the text label on the add-to-cart button.\nDefaults to `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showOutOfStockBesidePrice": {
+                "type": "boolean",
+                "attribute": "show-out-of-stock-beside-price",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the out-of-stock label beside the price instead of as the image badge\nrendered by `getProductBadge()`. Defaults to `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/salla-search/interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/salla-search/salla-search.css

@@ -14,15 +14,24 @@
   appearance: none;
   text-align: start;
 }
+.visible {
+  visibility: visible;
+}
 .block {
   display: block;
 }
 .inline {
   display: inline;
 }
+.hidden {
+  display: none;
+}
 .border {
   border-width: 1px;
 }
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .s-search-container {
   position: relative;
   z-index: 99;
@@ -87,6 +96,10 @@
 .s-search-input:where([dir="rtl"], [dir="rtl"] *) {
   padding-right: 2.5rem;
 }
+.s-search-modal-new .s-search-input {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
 .s-search-icon-wrap {
   position: absolute;
   top: 50%;
@@ -145,6 +158,7 @@
   border-bottom-left-radius: 0px !important;
 }
 .s-search-no-results-placeholder {
+  grid-column: 1 / -1;
   padding: 1rem;
   text-align: center;
   font-size: 0.875rem;
@@ -283,30 +297,326 @@
   border-top-left-radius: 9999px;
   border-bottom-left-radius: 9999px;
 }
+.s-search-input-row {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.s-search-back-btn {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  line-height: 1;
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+.s-search-back-btn:hover {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
+}
+@media (min-width: 640px) {
+  .s-search-back-btn {
+    display: none;
+  }
+}
+.s-search-back-btn svg {
+  height: 1.5rem;
+  width: 1.5rem;
+  fill: #6b7280;
+}
 .s-search-input-wrapper {
   position: relative;
   display: flex;
   flex-grow: 1;
   align-items: center;
 }
-.s-search-modal .s-modal-wrapper {
-  align-items: flex-start;
-  padding: 0;
+.s-search-input-clearable:where([dir="ltr"], [dir="ltr"] *) {
+  padding-right: 2.25rem;
 }
-.s-search-modal .s-modal-spacer {
-  display: inline;
+.s-search-input-clearable:where([dir="rtl"], [dir="rtl"] *) {
+  padding-left: 2.25rem;
+}
+.s-search-input-clearable::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+}
+.s-search-clear-icon {
+  position: absolute;
+  top: 50%;
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  padding: 0.25rem;
+  line-height: 1;
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+.s-search-clear-icon:hover {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+}
+.s-search-clear-icon:where([dir="ltr"], [dir="ltr"] *) {
+  right: 0.75rem;
+}
+.s-search-clear-icon:where([dir="rtl"], [dir="rtl"] *) {
+  left: 0.75rem;
+}
+.s-search-clear-icon svg {
+  height: 1rem;
+  width: 1rem;
+  fill: #9ca3af;
+}
+.s-search-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 0px;
+}
+@media (min-width: 640px) {
+  .s-search-panel {
+    padding: 1rem;
+  }
+}
+.s-search-results-body {
+  display: flex;
+  max-height: 24rem;
+  gap: 0.75rem;
+  overflow-y: auto;
+}
+.s-search-results-grid-wrap {
+  min-width: 0px;
+  flex: 1 1 0%;
+}
+.s-search-results-grid {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  align-content: flex-start;
+  column-gap: 0.75rem;
+  row-gap: 0.25rem;
+}
+@media (min-width: 640px) {
+  .s-search-results-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+.s-search-grid-item {
+  cursor: pointer;
+  border-radius: 0.375rem;
+  padding: 0.25rem;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+.s-search-grid-item:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+}
+.s-search-grid-item .s-product-card-out-badge {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
+}
+.s-search-view-all {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  border-top-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
+  padding-top: 0.75rem;
+  text-align: center;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+.s-search-view-all:hover {
+  text-decoration-line: underline;
+}
+.s-search-view-all-icon {
+  line-height: 1;
+}
+.s-search-view-all-icon svg {
+  height: 1rem;
+  width: 1rem;
+  fill: #6b7280;
+}
+.s-search-sidebar {
+  width: 7rem;
+  flex-shrink: 0;
 }
-.s-search-modal .s-modal-body {
-  padding: 0;
-  width: 700px;
-  max-width: 90%;
-  margin-top: 3.2rem;
-  border-radius: 0.5rem;
-  background: transparent;
-  overflow: visible;
-  position: relative !important;
+.s-search-sidebar > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+.s-search-sidebar {
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
+}
+@media (min-width: 480px) {
+  .s-search-sidebar {
+    width: 8rem;
+  }
+}
+.s-search-sidebar:where([dir="ltr"], [dir="ltr"] *) {
+  border-right-width: 1px;
+  padding-right: 0.75rem;
+}
+.s-search-sidebar:where([dir="rtl"], [dir="rtl"] *) {
+  border-left-width: 1px;
+  padding-left: 0.75rem;
+}
+.s-search-idle-panel {
+  max-height: 24rem;
+  min-height: 6rem;
+}
+.s-search-idle-panel > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+.s-search-idle-panel {
+  overflow-y: auto;
+}
+.s-search-idle-section-title {
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+.s-search-history-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+.s-search-history-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+}
+.s-search-history-chip:where([dir="ltr"], [dir="ltr"] *) {
+  padding-left: 0.75rem;
+  padding-right: 0.5rem;
+}
+.s-search-history-chip:where([dir="rtl"], [dir="rtl"] *) {
+  padding-right: 0.75rem;
+  padding-left: 0.5rem;
+}
+.s-search-history-chip-term {
+  line-height: 1;
+}
+.s-search-history-chip-remove svg {
+  height: 0.625rem;
+  width: 0.625rem;
+  fill: #9ca3af;
+}
+.s-search-idle-categories-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+.s-search-idle-category-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+}
+.s-search-idle-category-chip:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
+}
+.s-search-idle-category-count {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+.s-search-most-searched-list {
+  display: flex;
+  flex-direction: column;
+}
+.s-search-most-searched-item {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.5rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+}
+.s-search-most-searched-item:hover {
+  color: var(--color-primary);
+}
+.s-search-most-searched-icon svg {
+  height: 0.875rem;
+  width: 0.875rem;
+  fill: #9ca3af;
+}
+@media (min-width: 640px) {
+  .s-search-modal .s-modal-wrapper {
+    align-items: flex-start;
+    padding: 0;
+  }
+  .s-search-modal .s-modal-spacer {
+    display: inline;
+  }
+}
+@media (max-width: 639px) {
+  .s-search-modal .s-modal-body {
+    height: 100dvh;
+    max-height: 100dvh !important;
+  }
+}
+@media (min-width: 640px) {
+  .s-search-modal .s-modal-body {
+    padding: 0;
+    width: 700px;
+    max-width: 90%;
+    margin-top: 3.2rem;
+    border-radius: 0.5rem;
+    background: transparent;
+    overflow: visible;
+    position: relative !important;
+  }
 }
 .s-search-modal .s-modal-close {
   top: 50%;
   transform: translateY(-50%);
 }
+@media (min-width: 640px) {
+  .s-search-modal.s-search-modal-new .s-modal-body {
+    background: white;
+    overflow: hidden;
+    width: 1100px;
+    max-width: 95%;
+  }
+}