@depict-ai/ui 4.4.3 → 4.4.5

package/ES10/index.cjs

@@ -100,7 +100,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $335c02c1241a9ca8$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $335c02c1241a9ca8$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $c10e33c4681f8c9b$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.4.3";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.4.5";
 const $5401a6698b0c0658$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -115,8 +115,9 @@ const $5401a6698b0c0658$var$transform_elements = sorted_cols_at_size => {
   return cols_at_size;
 };
 const $5401a6698b0c0658$export$6daf8749b65a1b77 = cols_at_size => {
+  var _cols_at_size$every;
   // Check that every element is an array
-  const are_arrays = cols_at_size.every(element => Array.isArray(element));
+  const are_arrays = cols_at_size === null || cols_at_size === void 0 ? void 0 : (_cols_at_size$every = cols_at_size.every) === null || _cols_at_size$every === void 0 ? void 0 : _cols_at_size$every.call(cols_at_size, element => Array.isArray(element));
   if (!are_arrays) throw new Error("Every element in cols_at_size must be an array");
   // Check width duplicates
   const widths = cols_at_size.map(_ref => {
@@ -3614,7 +3615,7 @@ var $29e5dbeb69da7a36$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<but
   $29e5dbeb69da7a36$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<button type=button class=clear>`),
   $29e5dbeb69da7a36$var$_tmpl$3 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=spacer>`),
   $29e5dbeb69da7a36$var$_tmpl$4 = /*#__PURE__*/$52FdA$solidjsweb.template(`<button class="submit major"type=button>`),
-  $29e5dbeb69da7a36$var$_tmpl$5 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=search-field role=search><!$><!/><!$><!/><div class=field><!$><!/><input class=query tabindex=0><!$><!/></div><!$><!/><!$><!/>`);
+  $29e5dbeb69da7a36$var$_tmpl$5 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div role=search><!$><!/><!$><!/><div class=field><!$><!/><input class=query tabindex=0><!$><!/></div><!$><!/><!$><!/>`);
 function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
   let {
     search_field_value_: [searchFieldValue, setSearchFieldValue],
@@ -3628,7 +3629,8 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
     i18n_: i18n_,
     after_focusing_: after_focusing_,
     BackIcon_: BackIcon_,
-    buttonInFieldRef_: buttonInFieldRef_
+    buttonInFieldRef_: buttonInFieldRef_,
+    class_: class_
   } = _ref;
   let input_element;
   // This is the div where we recommend (and ourselves do) attach the event listener to that opens the search modal.
@@ -3726,7 +3728,6 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
       [_el$17, _co$5] = $52FdA$solidjsweb.getNextMarker(_el$16.nextSibling),
       _el$18 = _el$17.nextSibling,
       [_el$19, _co$6] = $52FdA$solidjsweb.getNextMarker(_el$18.nextSibling);
-    _el$3.classList.toggle("in-modal", !!!!on_back_);
     $52FdA$solidjsweb.insert(_el$3, $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
       get when() {
         return getBackButtonWidth() !== undefined && on_back_;
@@ -3837,14 +3838,17 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
       }
     }), _el$19, _co$6);
     $52FdA$solidjsweb.effect(_p$ => {
-      var _v$ = i18n_.search_field_field_aria_label_(),
-        _v$2 = i18n_.placeholder_text_();
-      _v$ !== _p$.e && $52FdA$solidjsweb.setAttribute(_el$6, "aria-label", _p$.e = _v$);
-      _v$2 !== _p$.t && $52FdA$solidjsweb.setAttribute(_el$6, "placeholder", _p$.t = _v$2);
+      var _v$ = "search-field".concat(on_back_ ? " in-modal" : "").concat(class_ !== null && class_ !== void 0 && class_() ? " ".concat(class_()) : ""),
+        _v$2 = i18n_.search_field_field_aria_label_(),
+        _v$3 = i18n_.placeholder_text_();
+      _v$ !== _p$.e && $52FdA$solidjsweb.className(_el$3, _p$.e = _v$);
+      _v$2 !== _p$.t && $52FdA$solidjsweb.setAttribute(_el$6, "aria-label", _p$.t = _v$2);
+      _v$3 !== _p$.a && $52FdA$solidjsweb.setAttribute(_el$6, "placeholder", _p$.a = _v$3);
       return _p$;
     }, {
       e: undefined,
-      t: undefined
+      t: undefined,
+      a: undefined
     });
     $52FdA$solidjsweb.effect(() => $52FdA$solidjsweb.setProperty(_el$6, "value", searchFieldValue()));
     $52FdA$solidjsweb.runHydrationEvents();
@@ -13768,7 +13772,7 @@ function $a60bc7692ce52705$export$44f738469d5570cf(_ref) {
   });
 }
 var $739c927cbecd26b0$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=filter-results-for-one-row><!$><!/><!$><!/>`),
-  $739c927cbecd26b0$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class="depict plp search"><div class=listing-page><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/></div><!$><!/><!$><!/>`);
+  $739c927cbecd26b0$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div><div class=listing-page><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/></div><!$><!/><!$><!/>`);
 function $739c927cbecd26b0$export$a54ec244c8863715(_ref) {
   let {
     depict_api_: depict_api_,
@@ -13803,7 +13807,8 @@ function $739c927cbecd26b0$export$a54ec244c8863715(_ref) {
     content_blocks_by_row_: content_blocks_by_row_,
     modalVersionUsed_: modalVersionUsed_,
     BackIcon_: BackIcon_,
-    filterModalParent_: filterModalParent_
+    filterModalParent_: filterModalParent_,
+    class_: class_
   } = _ref;
   const [get_sorting] = current_sorting_;
   const all_products_loaded_ = $52FdA$solidjs.createSignal(false);
@@ -14222,7 +14227,16 @@ function $739c927cbecd26b0$export$a54ec244c8863715(_ref) {
         });
       }
     }), _el$25, _co$11);
-    $52FdA$solidjsweb.effect(() => $52FdA$solidjsweb.setAttribute(_el$6, "id", (0, $c95c6dd9e93acd82$export$44dad306455dddf).SEARCH_PAGE));
+    $52FdA$solidjsweb.effect(_p$ => {
+      var _v$ = (0, $c95c6dd9e93acd82$export$44dad306455dddf).SEARCH_PAGE,
+        _v$2 = "depict plp search".concat(class_ !== null && class_ !== void 0 && class_() ? " ".concat(class_()) : "");
+      _v$ !== _p$.e && $52FdA$solidjsweb.setAttribute(_el$6, "id", _p$.e = _v$);
+      _v$2 !== _p$.t && $52FdA$solidjsweb.className(_el$6, _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     return _el$6;
   })()];
 }
@@ -14688,7 +14702,8 @@ function $ddd39c5f36f49703$export$f2dc7e4e4aa11abb(props) {
         ...grid_spacing_override()
       })),
       filterModalParent_: $52FdA$solidjs.untrack(() => props.filterModalParent_),
-      product_card_template_: product_card_template
+      product_card_template_: product_card_template,
+      class_: () => props.class
     });
   }, "Entire SearchPage failed");
 }
@@ -15080,6 +15095,7 @@ function $98aef9965764903d$export$316f6f283ae64765(props) {
     let input_element;
     let buttonInField;
     const search_field = $52FdA$solidjsweb.createComponent((0, $29e5dbeb69da7a36$export$b94867ecbd698f21), {
+      class_: () => props.class,
       get BackIcon_() {
         return shared_properties.BackIcon_;
       },

package/ES10/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.4.3";
+export const version = "4.4.5";
 declare const LISTING_ID = "listingId";
 declare const EXTERNAL_ID = "externalId";
 type ScrollRestorationData = {
@@ -1360,6 +1360,7 @@ export function SearchPage<OriginalDisplay extends Display, TransformedDisplay e
   content_blocks_by_row?: ContentBlocksByRow;
   on_query_change?: (new_query?: string | undefined, old_query?: string | undefined) => void;
   filterModalParent_?: HTMLElement | ShadowRoot;
+  class?: string;
 }): import("@depict-ai/utilishared").Node_Array;
 /**
  * Connects the height of the search field to the height of the aligner.
@@ -1399,7 +1400,7 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
  * Open the modal with support for alignment.
  * @returns {void}
  */
-export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
+export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends unknown>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
 export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
 export interface PageReplacer {
   readonly render_: () => Node_Array;
@@ -1445,6 +1446,7 @@ interface SearchFieldParams {
   modal_dispose_handler?: VoidFunction;
   click_handler?: (this: HTMLDivElement, ev: MouseEvent) => any;
   aligner_ref?: HTMLElement | null;
+  class?: string;
 }
 /**
  * Returns a SearchField that will open a modal aligned to it when clicked.
@@ -1477,5 +1479,5 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
   filterModalParent_?: HTMLElement | ShadowRoot;
-}): import("@depict-ai/utilishared/latest").Node_Array;
+}): import("@depict-ai/utilishared").Node_Array;
 export type { SearchFilter } from "@depict-ai/types/api/SearchRequestV3";

package/ES10/index.js

@@ -10,7 +10,7 @@ import { createStore as $8tj43$createStore, reconcile as $8tj43$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "4.4.3";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.4.5";
 const $a9c7ba6087881ac2$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -25,8 +25,9 @@ const $a9c7ba6087881ac2$var$transform_elements = sorted_cols_at_size => {
   return cols_at_size;
 };
 const $a9c7ba6087881ac2$export$6daf8749b65a1b77 = cols_at_size => {
+  var _cols_at_size$every;
   // Check that every element is an array
-  const are_arrays = cols_at_size.every(element => Array.isArray(element));
+  const are_arrays = cols_at_size === null || cols_at_size === void 0 ? void 0 : (_cols_at_size$every = cols_at_size.every) === null || _cols_at_size$every === void 0 ? void 0 : _cols_at_size$every.call(cols_at_size, element => Array.isArray(element));
   if (!are_arrays) throw new Error("Every element in cols_at_size must be an array");
   // Check width duplicates
   const widths = cols_at_size.map(_ref => {
@@ -3524,7 +3525,7 @@ var $584c06c09cf4609d$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<button class=b
   $584c06c09cf4609d$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<button type=button class=clear>`),
   $584c06c09cf4609d$var$_tmpl$3 = /*#__PURE__*/$8tj43$template(`<div class=spacer>`),
   $584c06c09cf4609d$var$_tmpl$4 = /*#__PURE__*/$8tj43$template(`<button class="submit major"type=button>`),
-  $584c06c09cf4609d$var$_tmpl$5 = /*#__PURE__*/$8tj43$template(`<div class=search-field role=search><!$><!/><!$><!/><div class=field><!$><!/><input class=query tabindex=0><!$><!/></div><!$><!/><!$><!/>`);
+  $584c06c09cf4609d$var$_tmpl$5 = /*#__PURE__*/$8tj43$template(`<div role=search><!$><!/><!$><!/><div class=field><!$><!/><input class=query tabindex=0><!$><!/></div><!$><!/><!$><!/>`);
 function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
   let {
     search_field_value_: [searchFieldValue, setSearchFieldValue],
@@ -3538,7 +3539,8 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
     i18n_: i18n_,
     after_focusing_: after_focusing_,
     BackIcon_: BackIcon_,
-    buttonInFieldRef_: buttonInFieldRef_
+    buttonInFieldRef_: buttonInFieldRef_,
+    class_: class_
   } = _ref;
   let input_element;
   // This is the div where we recommend (and ourselves do) attach the event listener to that opens the search modal.
@@ -3636,7 +3638,6 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
       [_el$17, _co$5] = $8tj43$getNextMarker(_el$16.nextSibling),
       _el$18 = _el$17.nextSibling,
       [_el$19, _co$6] = $8tj43$getNextMarker(_el$18.nextSibling);
-    _el$3.classList.toggle("in-modal", !!!!on_back_);
     $8tj43$insert(_el$3, $8tj43$createComponent((0, $8tj43$Show), {
       get when() {
         return getBackButtonWidth() !== undefined && on_back_;
@@ -3747,14 +3748,17 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
       }
     }), _el$19, _co$6);
     $8tj43$effect(_p$ => {
-      var _v$ = i18n_.search_field_field_aria_label_(),
-        _v$2 = i18n_.placeholder_text_();
-      _v$ !== _p$.e && $8tj43$setAttribute(_el$6, "aria-label", _p$.e = _v$);
-      _v$2 !== _p$.t && $8tj43$setAttribute(_el$6, "placeholder", _p$.t = _v$2);
+      var _v$ = "search-field".concat(on_back_ ? " in-modal" : "").concat(class_ !== null && class_ !== void 0 && class_() ? " ".concat(class_()) : ""),
+        _v$2 = i18n_.search_field_field_aria_label_(),
+        _v$3 = i18n_.placeholder_text_();
+      _v$ !== _p$.e && $8tj43$className(_el$3, _p$.e = _v$);
+      _v$2 !== _p$.t && $8tj43$setAttribute(_el$6, "aria-label", _p$.t = _v$2);
+      _v$3 !== _p$.a && $8tj43$setAttribute(_el$6, "placeholder", _p$.a = _v$3);
       return _p$;
     }, {
       e: undefined,
-      t: undefined
+      t: undefined,
+      a: undefined
     });
     $8tj43$effect(() => $8tj43$setProperty(_el$6, "value", searchFieldValue()));
     $8tj43$runHydrationEvents();
@@ -13678,7 +13682,7 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
   });
 }
 var $da279c5a540c6846$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div class=filter-results-for-one-row><!$><!/><!$><!/>`),
-  $da279c5a540c6846$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<div class="depict plp search"><div class=listing-page><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/></div><!$><!/><!$><!/>`);
+  $da279c5a540c6846$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<div><div class=listing-page><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/></div><!$><!/><!$><!/>`);
 function $da279c5a540c6846$export$a54ec244c8863715(_ref) {
   let {
     depict_api_: depict_api_,
@@ -13713,7 +13717,8 @@ function $da279c5a540c6846$export$a54ec244c8863715(_ref) {
     content_blocks_by_row_: content_blocks_by_row_,
     modalVersionUsed_: modalVersionUsed_,
     BackIcon_: BackIcon_,
-    filterModalParent_: filterModalParent_
+    filterModalParent_: filterModalParent_,
+    class_: class_
   } = _ref;
   const [get_sorting] = current_sorting_;
   const all_products_loaded_ = $8tj43$createSignal(false);
@@ -14132,7 +14137,16 @@ function $da279c5a540c6846$export$a54ec244c8863715(_ref) {
         });
       }
     }), _el$25, _co$11);
-    $8tj43$effect(() => $8tj43$setAttribute(_el$6, "id", (0, $c3820807ac1e6fd7$export$44dad306455dddf).SEARCH_PAGE));
+    $8tj43$effect(_p$ => {
+      var _v$ = (0, $c3820807ac1e6fd7$export$44dad306455dddf).SEARCH_PAGE,
+        _v$2 = "depict plp search".concat(class_ !== null && class_ !== void 0 && class_() ? " ".concat(class_()) : "");
+      _v$ !== _p$.e && $8tj43$setAttribute(_el$6, "id", _p$.e = _v$);
+      _v$2 !== _p$.t && $8tj43$className(_el$6, _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     return _el$6;
   })()];
 }
@@ -14598,7 +14612,8 @@ function $eb064bc3350276c1$export$f2dc7e4e4aa11abb(props) {
         ...grid_spacing_override()
       })),
       filterModalParent_: $8tj43$untrack(() => props.filterModalParent_),
-      product_card_template_: product_card_template
+      product_card_template_: product_card_template,
+      class_: () => props.class
     });
   }, "Entire SearchPage failed");
 }
@@ -14990,6 +15005,7 @@ function $a3026fb727bc7550$export$316f6f283ae64765(props) {
     let input_element;
     let buttonInField;
     const search_field = $8tj43$createComponent((0, $584c06c09cf4609d$export$b94867ecbd698f21), {
+      class_: () => props.class,
       get BackIcon_() {
         return shared_properties.BackIcon_;
       },

package/latest/index.cjs

@@ -94,7 +94,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $1f4925833f07df29$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $1f4925833f07df29$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $14f289047713d67a$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.4.3";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.4.5";
 const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -109,7 +109,7 @@ const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
 };
 const $4e04be41243c3d80$export$6daf8749b65a1b77 = cols_at_size => {
   // Check that every element is an array
-  const are_arrays = cols_at_size.every(element => Array.isArray(element));
+  const are_arrays = cols_at_size?.every?.(element => Array.isArray(element));
   if (!are_arrays) throw new Error("Every element in cols_at_size must be an array");
   // Check width duplicates
   const widths = cols_at_size.map(([_, width]) => width);
@@ -3423,7 +3423,7 @@ var $66b8b9a9613c141d$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<but
   $66b8b9a9613c141d$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button type=button class=clear>`),
   $66b8b9a9613c141d$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=spacer>`),
   $66b8b9a9613c141d$var$_tmpl$4 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button class="submit major"type=button>`),
-  $66b8b9a9613c141d$var$_tmpl$5 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=search-field role=search><!$><!/><!$><!/><div class=field><!$><!/><input class=query tabindex=0><!$><!/></div><!$><!/><!$><!/>`);
+  $66b8b9a9613c141d$var$_tmpl$5 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div role=search><!$><!/><!$><!/><div class=field><!$><!/><input class=query tabindex=0><!$><!/></div><!$><!/><!$><!/>`);
 function $66b8b9a9613c141d$export$b94867ecbd698f21({
   search_field_value_: [searchFieldValue, setSearchFieldValue],
   input_field_ref_: input_field_ref_,
@@ -3436,7 +3436,8 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
   i18n_: i18n_,
   after_focusing_: after_focusing_,
   BackIcon_: BackIcon_,
-  buttonInFieldRef_: buttonInFieldRef_
+  buttonInFieldRef_: buttonInFieldRef_,
+  class_: class_
 }) {
   let input_element;
   // This is the div where we recommend (and ourselves do) attach the event listener to that opens the search modal.
@@ -3531,7 +3532,6 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
       [_el$17, _co$5] = $gVhhF$solidjsweb.getNextMarker(_el$16.nextSibling),
       _el$18 = _el$17.nextSibling,
       [_el$19, _co$6] = $gVhhF$solidjsweb.getNextMarker(_el$18.nextSibling);
-    _el$3.classList.toggle("in-modal", !!!!on_back_);
     $gVhhF$solidjsweb.insert(_el$3, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
       get when() {
         return getBackButtonWidth() !== undefined && on_back_;
@@ -3639,14 +3639,17 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
       }
     }), _el$19, _co$6);
     $gVhhF$solidjsweb.effect(_p$ => {
-      var _v$ = i18n_.search_field_field_aria_label_(),
-        _v$2 = i18n_.placeholder_text_();
-      _v$ !== _p$.e && $gVhhF$solidjsweb.setAttribute(_el$6, "aria-label", _p$.e = _v$);
-      _v$2 !== _p$.t && $gVhhF$solidjsweb.setAttribute(_el$6, "placeholder", _p$.t = _v$2);
+      var _v$ = `search-field${on_back_ ? " in-modal" : ""}${class_?.() ? ` ${class_()}` : ""}`,
+        _v$2 = i18n_.search_field_field_aria_label_(),
+        _v$3 = i18n_.placeholder_text_();
+      _v$ !== _p$.e && $gVhhF$solidjsweb.className(_el$3, _p$.e = _v$);
+      _v$2 !== _p$.t && $gVhhF$solidjsweb.setAttribute(_el$6, "aria-label", _p$.t = _v$2);
+      _v$3 !== _p$.a && $gVhhF$solidjsweb.setAttribute(_el$6, "placeholder", _p$.a = _v$3);
       return _p$;
     }, {
       e: undefined,
-      t: undefined
+      t: undefined,
+      a: undefined
     });
     $gVhhF$solidjsweb.effect(() => $gVhhF$solidjsweb.setProperty(_el$6, "value", searchFieldValue()));
     $gVhhF$solidjsweb.runHydrationEvents();
@@ -12973,7 +12976,7 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
   });
 }
 var $f1d7cb69f839a526$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=filter-results-for-one-row><!$><!/><!$><!/>`),
-  $f1d7cb69f839a526$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="depict plp search"><div class=listing-page><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/></div><!$><!/><!$><!/>`);
+  $f1d7cb69f839a526$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div><div class=listing-page><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/></div><!$><!/><!$><!/>`);
 function $f1d7cb69f839a526$export$a54ec244c8863715({
   depict_api_: depict_api_,
   search_field_value_: search_field_value_,
@@ -13007,7 +13010,8 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
   content_blocks_by_row_: content_blocks_by_row_,
   modalVersionUsed_: modalVersionUsed_,
   BackIcon_: BackIcon_,
-  filterModalParent_: filterModalParent_
+  filterModalParent_: filterModalParent_,
+  class_: class_
 }) {
   const [get_sorting] = current_sorting_;
   const all_products_loaded_ = $gVhhF$solidjs.createSignal(false);
@@ -13403,7 +13407,16 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
         });
       }
     }), _el$25, _co$11);
-    $gVhhF$solidjsweb.effect(() => $gVhhF$solidjsweb.setAttribute(_el$6, "id", (0, $0b6e2070a98de347$export$44dad306455dddf).SEARCH_PAGE));
+    $gVhhF$solidjsweb.effect(_p$ => {
+      var _v$ = (0, $0b6e2070a98de347$export$44dad306455dddf).SEARCH_PAGE,
+        _v$2 = `depict plp search${class_?.() ? ` ${class_()}` : ""}`;
+      _v$ !== _p$.e && $gVhhF$solidjsweb.setAttribute(_el$6, "id", _p$.e = _v$);
+      _v$2 !== _p$.t && $gVhhF$solidjsweb.className(_el$6, _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     return _el$6;
   })()];
 }
@@ -13782,7 +13795,8 @@ function $2c61e4cd8229c49a$export$f2dc7e4e4aa11abb(props) {
         ...grid_spacing_override()
       })),
       filterModalParent_: $gVhhF$solidjs.untrack(() => props.filterModalParent_),
-      product_card_template_: product_card_template
+      product_card_template_: product_card_template,
+      class_: () => props.class
     });
   }, "Entire SearchPage failed");
 }
@@ -14081,6 +14095,7 @@ function $c0a0659cf97e8eb2$export$316f6f283ae64765(props) {
     let input_element;
     let buttonInField;
     const search_field = $gVhhF$solidjsweb.createComponent((0, $66b8b9a9613c141d$export$b94867ecbd698f21), {
+      class_: () => props.class,
       get BackIcon_() {
         return shared_properties.BackIcon_;
       },

package/latest/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.4.3";
+export const version = "4.4.5";
 declare const LISTING_ID = "listingId";
 declare const EXTERNAL_ID = "externalId";
 type ScrollRestorationData = {
@@ -1360,6 +1360,7 @@ export function SearchPage<OriginalDisplay extends Display, TransformedDisplay e
   content_blocks_by_row?: ContentBlocksByRow;
   on_query_change?: (new_query?: string | undefined, old_query?: string | undefined) => void;
   filterModalParent_?: HTMLElement | ShadowRoot;
+  class?: string;
 }): import("@depict-ai/utilishared").Node_Array;
 /**
  * Connects the height of the search field to the height of the aligner.
@@ -1399,7 +1400,7 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
  * Open the modal with support for alignment.
  * @returns {void}
  */
-export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
+export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends unknown>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
 export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
 export interface PageReplacer {
   readonly render_: () => Node_Array;
@@ -1445,6 +1446,7 @@ interface SearchFieldParams {
   modal_dispose_handler?: VoidFunction;
   click_handler?: (this: HTMLDivElement, ev: MouseEvent) => any;
   aligner_ref?: HTMLElement | null;
+  class?: string;
 }
 /**
  * Returns a SearchField that will open a modal aligned to it when clicked.
@@ -1477,5 +1479,5 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
   filterModalParent_?: HTMLElement | ShadowRoot;
-}): import("@depict-ai/utilishared/latest").Node_Array;
+}): import("@depict-ai/utilishared").Node_Array;
 export type { SearchFilter } from "@depict-ai/types/api/SearchRequestV3";

package/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.4.3";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.4.5";
 const $b5cccc8ee7d24677$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -22,7 +22,7 @@ const $b5cccc8ee7d24677$var$transform_elements = sorted_cols_at_size => {
 };
 const $b5cccc8ee7d24677$export$6daf8749b65a1b77 = cols_at_size => {
   // Check that every element is an array
-  const are_arrays = cols_at_size.every(element => Array.isArray(element));
+  const are_arrays = cols_at_size?.every?.(element => Array.isArray(element));
   if (!are_arrays) throw new Error("Every element in cols_at_size must be an array");
   // Check width duplicates
   const widths = cols_at_size.map(([_, width]) => width);
@@ -3336,7 +3336,7 @@ var $5285d2814d0fac0c$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<button class=b
   $5285d2814d0fac0c$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<button type=button class=clear>`),
   $5285d2814d0fac0c$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<div class=spacer>`),
   $5285d2814d0fac0c$var$_tmpl$4 = /*#__PURE__*/$9HbP8$template(`<button class="submit major"type=button>`),
-  $5285d2814d0fac0c$var$_tmpl$5 = /*#__PURE__*/$9HbP8$template(`<div class=search-field role=search><!$><!/><!$><!/><div class=field><!$><!/><input class=query tabindex=0><!$><!/></div><!$><!/><!$><!/>`);
+  $5285d2814d0fac0c$var$_tmpl$5 = /*#__PURE__*/$9HbP8$template(`<div role=search><!$><!/><!$><!/><div class=field><!$><!/><input class=query tabindex=0><!$><!/></div><!$><!/><!$><!/>`);
 function $5285d2814d0fac0c$export$b94867ecbd698f21({
   search_field_value_: [searchFieldValue, setSearchFieldValue],
   input_field_ref_: input_field_ref_,
@@ -3349,7 +3349,8 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
   i18n_: i18n_,
   after_focusing_: after_focusing_,
   BackIcon_: BackIcon_,
-  buttonInFieldRef_: buttonInFieldRef_
+  buttonInFieldRef_: buttonInFieldRef_,
+  class_: class_
 }) {
   let input_element;
   // This is the div where we recommend (and ourselves do) attach the event listener to that opens the search modal.
@@ -3444,7 +3445,6 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
       [_el$17, _co$5] = $9HbP8$getNextMarker(_el$16.nextSibling),
       _el$18 = _el$17.nextSibling,
       [_el$19, _co$6] = $9HbP8$getNextMarker(_el$18.nextSibling);
-    _el$3.classList.toggle("in-modal", !!!!on_back_);
     $9HbP8$insert(_el$3, $9HbP8$createComponent((0, $9HbP8$Show), {
       get when() {
         return getBackButtonWidth() !== undefined && on_back_;
@@ -3552,14 +3552,17 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
       }
     }), _el$19, _co$6);
     $9HbP8$effect(_p$ => {
-      var _v$ = i18n_.search_field_field_aria_label_(),
-        _v$2 = i18n_.placeholder_text_();
-      _v$ !== _p$.e && $9HbP8$setAttribute(_el$6, "aria-label", _p$.e = _v$);
-      _v$2 !== _p$.t && $9HbP8$setAttribute(_el$6, "placeholder", _p$.t = _v$2);
+      var _v$ = `search-field${on_back_ ? " in-modal" : ""}${class_?.() ? ` ${class_()}` : ""}`,
+        _v$2 = i18n_.search_field_field_aria_label_(),
+        _v$3 = i18n_.placeholder_text_();
+      _v$ !== _p$.e && $9HbP8$className(_el$3, _p$.e = _v$);
+      _v$2 !== _p$.t && $9HbP8$setAttribute(_el$6, "aria-label", _p$.t = _v$2);
+      _v$3 !== _p$.a && $9HbP8$setAttribute(_el$6, "placeholder", _p$.a = _v$3);
       return _p$;
     }, {
       e: undefined,
-      t: undefined
+      t: undefined,
+      a: undefined
     });
     $9HbP8$effect(() => $9HbP8$setProperty(_el$6, "value", searchFieldValue()));
     $9HbP8$runHydrationEvents();
@@ -12886,7 +12889,7 @@ function $0e562a5b247b1fc2$export$44f738469d5570cf({
   });
 }
 var $7097477c78a89208$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=filter-results-for-one-row><!$><!/><!$><!/>`),
-  $7097477c78a89208$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<div class="depict plp search"><div class=listing-page><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/></div><!$><!/><!$><!/>`);
+  $7097477c78a89208$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<div><div class=listing-page><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/></div><!$><!/><!$><!/>`);
 function $7097477c78a89208$export$a54ec244c8863715({
   depict_api_: depict_api_,
   search_field_value_: search_field_value_,
@@ -12920,7 +12923,8 @@ function $7097477c78a89208$export$a54ec244c8863715({
   content_blocks_by_row_: content_blocks_by_row_,
   modalVersionUsed_: modalVersionUsed_,
   BackIcon_: BackIcon_,
-  filterModalParent_: filterModalParent_
+  filterModalParent_: filterModalParent_,
+  class_: class_
 }) {
   const [get_sorting] = current_sorting_;
   const all_products_loaded_ = $9HbP8$createSignal(false);
@@ -13316,7 +13320,16 @@ function $7097477c78a89208$export$a54ec244c8863715({
         });
       }
     }), _el$25, _co$11);
-    $9HbP8$effect(() => $9HbP8$setAttribute(_el$6, "id", (0, $f86ba724282f6690$export$44dad306455dddf).SEARCH_PAGE));
+    $9HbP8$effect(_p$ => {
+      var _v$ = (0, $f86ba724282f6690$export$44dad306455dddf).SEARCH_PAGE,
+        _v$2 = `depict plp search${class_?.() ? ` ${class_()}` : ""}`;
+      _v$ !== _p$.e && $9HbP8$setAttribute(_el$6, "id", _p$.e = _v$);
+      _v$2 !== _p$.t && $9HbP8$className(_el$6, _p$.t = _v$2);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     return _el$6;
   })()];
 }
@@ -13695,7 +13708,8 @@ function $806c97b931758897$export$f2dc7e4e4aa11abb(props) {
         ...grid_spacing_override()
       })),
       filterModalParent_: $9HbP8$untrack(() => props.filterModalParent_),
-      product_card_template_: product_card_template
+      product_card_template_: product_card_template,
+      class_: () => props.class
     });
   }, "Entire SearchPage failed");
 }
@@ -13994,6 +14008,7 @@ function $58b3487626e85ece$export$316f6f283ae64765(props) {
     let input_element;
     let buttonInField;
     const search_field = $9HbP8$createComponent((0, $5285d2814d0fac0c$export$b94867ecbd698f21), {
+      class_: () => props.class,
       get BackIcon_() {
         return shared_properties.BackIcon_;
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.4.3",
+  "version": "4.4.5",
   "description": "Base package containing the actual UI of Depict UI along with translations, with a not-simplified API. We recommend using @depict-ai/js-ui or @depict-ai/react-ui instead.",
   "packageManager": "yarn@3.2.2",
   "sass": "styles.scss",
@@ -236,9 +236,9 @@
     "@babel/plugin-transform-typescript": "^7.22.9",
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "^7.22.6",
-    "@depict-ai/plp-styling": "^4.1.3",
-    "@depict-ai/types": "^5.1.3",
-    "@depict-ai/utilishared": "^2.1.3",
+    "@depict-ai/plp-styling": "^4.1.5",
+    "@depict-ai/types": "^5.1.4",
+    "@depict-ai/utilishared": "^2.1.4",
     "solid-js": "^1.8.12"
   },
   "type": "module",

package/server/ES10/index.cjs

@@ -100,7 +100,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $335c02c1241a9ca8$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $335c02c1241a9ca8$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $c10e33c4681f8c9b$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.4.3";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.4.5";
 const $5401a6698b0c0658$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -115,8 +115,9 @@ const $5401a6698b0c0658$var$transform_elements = sorted_cols_at_size => {
   return cols_at_size;
 };
 const $5401a6698b0c0658$export$6daf8749b65a1b77 = cols_at_size => {
+  var _cols_at_size$every;
   // Check that every element is an array
-  const are_arrays = cols_at_size.every(element => Array.isArray(element));
+  const are_arrays = cols_at_size === null || cols_at_size === void 0 ? void 0 : (_cols_at_size$every = cols_at_size.every) === null || _cols_at_size$every === void 0 ? void 0 : _cols_at_size$every.call(cols_at_size, element => Array.isArray(element));
   if (!are_arrays) throw new Error("Every element in cols_at_size must be an array");
   // Check width duplicates
   const widths = cols_at_size.map(_ref => {
@@ -3082,7 +3083,8 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
     i18n_: i18n_,
     after_focusing_: after_focusing_,
     BackIcon_: BackIcon_,
-    buttonInFieldRef_: buttonInFieldRef_
+    buttonInFieldRef_: buttonInFieldRef_,
+    class_: class_
   } = _ref;
   let input_element;
   // This is the div where we recommend (and ourselves do) attach the event listener to that opens the search modal.
@@ -3142,7 +3144,7 @@ function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
       return $3hooq$solidjsweb.createComponent(BackIcon_, {});
     }
   })) : $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $083b2336093176cf$export$3b621d86b1566b2), {})), true);
-  return $3hooq$solidjsweb.ssr($29e5dbeb69da7a36$var$_tmpl$3, $3hooq$solidjsweb.ssrHydrationKey(), "search-field ".concat(!!on_back_ ? "in-modal" : ""), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
+  return $3hooq$solidjsweb.ssr($29e5dbeb69da7a36$var$_tmpl$3, $3hooq$solidjsweb.ssrHydrationKey(), "search-field".concat(on_back_ ? " in-modal" : "").concat(class_ !== null && class_ !== void 0 && class_() ? " ".concat($3hooq$solidjsweb.escape(class_(), true)) : ""), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
     get when() {
       return getBackButtonWidth() !== undefined && on_back_;
     },
@@ -11315,7 +11317,7 @@ function $a60bc7692ce52705$export$44f738469d5570cf(_ref) {
   });
 }
 var $739c927cbecd26b0$var$_tmpl$ = ["<div", ' class="filter-results-for-one-row"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"],
-  $739c927cbecd26b0$var$_tmpl$2 = ["<div", ' class="depict plp search"><div class="listing-page"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
+  $739c927cbecd26b0$var$_tmpl$2 = ["<div", ' class="', '"><div class="listing-page"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
 function $739c927cbecd26b0$export$a54ec244c8863715(_ref) {
   let {
     depict_api_: depict_api_,
@@ -11350,7 +11352,8 @@ function $739c927cbecd26b0$export$a54ec244c8863715(_ref) {
     content_blocks_by_row_: content_blocks_by_row_,
     modalVersionUsed_: modalVersionUsed_,
     BackIcon_: BackIcon_,
-    filterModalParent_: filterModalParent_
+    filterModalParent_: filterModalParent_,
+    class_: class_
   } = _ref;
   const [get_sorting] = current_sorting_;
   const all_products_loaded_ = $3hooq$solidjs.createSignal(false);
@@ -11594,7 +11597,7 @@ function $739c927cbecd26b0$export$a54ec244c8863715(_ref) {
       alignmentSignals_: alignmentSignals_
     });
   });
-  return [(0, $3hooq$solidjsweb.isServer) ? "<!-- Search page based on Depict SDK -->" : document.createComment("Search page based on Depict SDK"), $3hooq$solidjsweb.ssr($739c927cbecd26b0$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey() + $3hooq$solidjsweb.ssrAttribute("id", $3hooq$solidjsweb.escape((0, $c95c6dd9e93acd82$export$44dad306455dddf).SEARCH_PAGE, true), false), $3hooq$solidjsweb.escape(get_search_field_elements()), make_category_suggestion_card_ ? $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $1b3cf201cdd38687$export$b69d0d92862de18b), {
+  return [(0, $3hooq$solidjsweb.isServer) ? "<!-- Search page based on Depict SDK -->" : document.createComment("Search page based on Depict SDK"), $3hooq$solidjsweb.ssr($739c927cbecd26b0$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey() + $3hooq$solidjsweb.ssrAttribute("id", $3hooq$solidjsweb.escape((0, $c95c6dd9e93acd82$export$44dad306455dddf).SEARCH_PAGE, true), false), "depict plp search".concat(class_ !== null && class_ !== void 0 && class_() ? " ".concat($3hooq$solidjsweb.escape(class_(), true)) : ""), $3hooq$solidjsweb.escape(get_search_field_elements()), make_category_suggestion_card_ ? $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $1b3cf201cdd38687$export$b69d0d92862de18b), {
     severity_: "error",
     message_: "Category suggestions failed",
     get children() {
@@ -12194,7 +12197,8 @@ function $ddd39c5f36f49703$export$f2dc7e4e4aa11abb(props) {
         ...grid_spacing_override()
       })),
       filterModalParent_: $3hooq$solidjs.untrack(() => props.filterModalParent_),
-      product_card_template_: product_card_template
+      product_card_template_: product_card_template,
+      class_: () => props.class
     });
   }, "Entire SearchPage failed");
 }
@@ -12586,6 +12590,7 @@ function $98aef9965764903d$export$316f6f283ae64765(props) {
     let input_element;
     let buttonInField;
     const search_field = $3hooq$solidjsweb.createComponent((0, $29e5dbeb69da7a36$export$b94867ecbd698f21), {
+      class_: () => props.class,
       get BackIcon_() {
         return shared_properties.BackIcon_;
       },

package/server/ES10/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.4.3";
+export const version = "4.4.5";
 declare const LISTING_ID = "listingId";
 declare const EXTERNAL_ID = "externalId";
 type ScrollRestorationData = {
@@ -1360,6 +1360,7 @@ export function SearchPage<OriginalDisplay extends Display, TransformedDisplay e
   content_blocks_by_row?: ContentBlocksByRow;
   on_query_change?: (new_query?: string | undefined, old_query?: string | undefined) => void;
   filterModalParent_?: HTMLElement | ShadowRoot;
+  class?: string;
 }): import("@depict-ai/utilishared").Node_Array;
 /**
  * Connects the height of the search field to the height of the aligner.
@@ -1399,7 +1400,7 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
  * Open the modal with support for alignment.
  * @returns {void}
  */
-export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
+export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends unknown>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
 export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
 export interface PageReplacer {
   readonly render_: () => Node_Array;
@@ -1445,6 +1446,7 @@ interface SearchFieldParams {
   modal_dispose_handler?: VoidFunction;
   click_handler?: (this: HTMLDivElement, ev: MouseEvent) => any;
   aligner_ref?: HTMLElement | null;
+  class?: string;
 }
 /**
  * Returns a SearchField that will open a modal aligned to it when clicked.
@@ -1477,5 +1479,5 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
   filterModalParent_?: HTMLElement | ShadowRoot;
-}): import("@depict-ai/utilishared/latest").Node_Array;
+}): import("@depict-ai/utilishared").Node_Array;
 export type { SearchFilter } from "@depict-ai/types/api/SearchRequestV3";

package/server/ES10/index.js

@@ -10,7 +10,7 @@ import { createStore as $b8hua$createStore, reconcile as $b8hua$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "4.4.3";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.4.5";
 const $a9c7ba6087881ac2$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -25,8 +25,9 @@ const $a9c7ba6087881ac2$var$transform_elements = sorted_cols_at_size => {
   return cols_at_size;
 };
 const $a9c7ba6087881ac2$export$6daf8749b65a1b77 = cols_at_size => {
+  var _cols_at_size$every;
   // Check that every element is an array
-  const are_arrays = cols_at_size.every(element => Array.isArray(element));
+  const are_arrays = cols_at_size === null || cols_at_size === void 0 ? void 0 : (_cols_at_size$every = cols_at_size.every) === null || _cols_at_size$every === void 0 ? void 0 : _cols_at_size$every.call(cols_at_size, element => Array.isArray(element));
   if (!are_arrays) throw new Error("Every element in cols_at_size must be an array");
   // Check width duplicates
   const widths = cols_at_size.map(_ref => {
@@ -2992,7 +2993,8 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
     i18n_: i18n_,
     after_focusing_: after_focusing_,
     BackIcon_: BackIcon_,
-    buttonInFieldRef_: buttonInFieldRef_
+    buttonInFieldRef_: buttonInFieldRef_,
+    class_: class_
   } = _ref;
   let input_element;
   // This is the div where we recommend (and ourselves do) attach the event listener to that opens the search modal.
@@ -3052,7 +3054,7 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
       return $b8hua$createComponent(BackIcon_, {});
     }
   })) : $b8hua$escape($b8hua$createComponent((0, $9783d437ad61594c$export$3b621d86b1566b2), {})), true);
-  return $b8hua$ssr($584c06c09cf4609d$var$_tmpl$3, $b8hua$ssrHydrationKey(), "search-field ".concat(!!on_back_ ? "in-modal" : ""), $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
+  return $b8hua$ssr($584c06c09cf4609d$var$_tmpl$3, $b8hua$ssrHydrationKey(), "search-field".concat(on_back_ ? " in-modal" : "").concat(class_ !== null && class_ !== void 0 && class_() ? " ".concat($b8hua$escape(class_(), true)) : ""), $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
     get when() {
       return getBackButtonWidth() !== undefined && on_back_;
     },
@@ -11225,7 +11227,7 @@ function $937791b86d3d1509$export$44f738469d5570cf(_ref) {
   });
 }
 var $da279c5a540c6846$var$_tmpl$ = ["<div", ' class="filter-results-for-one-row"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"],
-  $da279c5a540c6846$var$_tmpl$2 = ["<div", ' class="depict plp search"><div class="listing-page"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
+  $da279c5a540c6846$var$_tmpl$2 = ["<div", ' class="', '"><div class="listing-page"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
 function $da279c5a540c6846$export$a54ec244c8863715(_ref) {
   let {
     depict_api_: depict_api_,
@@ -11260,7 +11262,8 @@ function $da279c5a540c6846$export$a54ec244c8863715(_ref) {
     content_blocks_by_row_: content_blocks_by_row_,
     modalVersionUsed_: modalVersionUsed_,
     BackIcon_: BackIcon_,
-    filterModalParent_: filterModalParent_
+    filterModalParent_: filterModalParent_,
+    class_: class_
   } = _ref;
   const [get_sorting] = current_sorting_;
   const all_products_loaded_ = $b8hua$createSignal(false);
@@ -11504,7 +11507,7 @@ function $da279c5a540c6846$export$a54ec244c8863715(_ref) {
       alignmentSignals_: alignmentSignals_
     });
   });
-  return [(0, $b8hua$isServer) ? "<!-- Search page based on Depict SDK -->" : document.createComment("Search page based on Depict SDK"), $b8hua$ssr($da279c5a540c6846$var$_tmpl$2, $b8hua$ssrHydrationKey() + $b8hua$ssrAttribute("id", $b8hua$escape((0, $c3820807ac1e6fd7$export$44dad306455dddf).SEARCH_PAGE, true), false), $b8hua$escape(get_search_field_elements()), make_category_suggestion_card_ ? $b8hua$escape($b8hua$createComponent((0, $74777e8fe65b3dcb$export$b69d0d92862de18b), {
+  return [(0, $b8hua$isServer) ? "<!-- Search page based on Depict SDK -->" : document.createComment("Search page based on Depict SDK"), $b8hua$ssr($da279c5a540c6846$var$_tmpl$2, $b8hua$ssrHydrationKey() + $b8hua$ssrAttribute("id", $b8hua$escape((0, $c3820807ac1e6fd7$export$44dad306455dddf).SEARCH_PAGE, true), false), "depict plp search".concat(class_ !== null && class_ !== void 0 && class_() ? " ".concat($b8hua$escape(class_(), true)) : ""), $b8hua$escape(get_search_field_elements()), make_category_suggestion_card_ ? $b8hua$escape($b8hua$createComponent((0, $74777e8fe65b3dcb$export$b69d0d92862de18b), {
     severity_: "error",
     message_: "Category suggestions failed",
     get children() {
@@ -12104,7 +12107,8 @@ function $eb064bc3350276c1$export$f2dc7e4e4aa11abb(props) {
         ...grid_spacing_override()
       })),
       filterModalParent_: $b8hua$untrack(() => props.filterModalParent_),
-      product_card_template_: product_card_template
+      product_card_template_: product_card_template,
+      class_: () => props.class
     });
   }, "Entire SearchPage failed");
 }
@@ -12496,6 +12500,7 @@ function $a3026fb727bc7550$export$316f6f283ae64765(props) {
     let input_element;
     let buttonInField;
     const search_field = $b8hua$createComponent((0, $584c06c09cf4609d$export$b94867ecbd698f21), {
+      class_: () => props.class,
       get BackIcon_() {
         return shared_properties.BackIcon_;
       },

package/server/latest/index.cjs

@@ -94,7 +94,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $1f4925833f07df29$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $1f4925833f07df29$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $14f289047713d67a$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.4.3";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.4.5";
 const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -109,7 +109,7 @@ const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
 };
 const $4e04be41243c3d80$export$6daf8749b65a1b77 = cols_at_size => {
   // Check that every element is an array
-  const are_arrays = cols_at_size.every(element => Array.isArray(element));
+  const are_arrays = cols_at_size?.every?.(element => Array.isArray(element));
   if (!are_arrays) throw new Error("Every element in cols_at_size must be an array");
   // Check width duplicates
   const widths = cols_at_size.map(([_, width]) => width);
@@ -2910,7 +2910,8 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
   i18n_: i18n_,
   after_focusing_: after_focusing_,
   BackIcon_: BackIcon_,
-  buttonInFieldRef_: buttonInFieldRef_
+  buttonInFieldRef_: buttonInFieldRef_,
+  class_: class_
 }) {
   let input_element;
   // This is the div where we recommend (and ourselves do) attach the event listener to that opens the search modal.
@@ -2967,7 +2968,7 @@ function $66b8b9a9613c141d$export$b94867ecbd698f21({
       return $5vyXB$solidjsweb.createComponent(BackIcon_, {});
     }
   })) : $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $c77c68e559a1506c$export$3b621d86b1566b2), {})), true);
-  return $5vyXB$solidjsweb.ssr($66b8b9a9613c141d$var$_tmpl$3, $5vyXB$solidjsweb.ssrHydrationKey(), `search-field ${!!on_back_ ? "in-modal" : ""}`, $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+  return $5vyXB$solidjsweb.ssr($66b8b9a9613c141d$var$_tmpl$3, $5vyXB$solidjsweb.ssrHydrationKey(), `search-field${on_back_ ? " in-modal" : ""}${class_?.() ? ` ${$5vyXB$solidjsweb.escape(class_(), true)}` : ""}`, $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
     get when() {
       return getBackButtonWidth() !== undefined && on_back_;
     },
@@ -10591,7 +10592,7 @@ function $5cbaffcb5602e671$export$44f738469d5570cf({
   });
 }
 var $f1d7cb69f839a526$var$_tmpl$ = ["<div", ' class="filter-results-for-one-row"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"],
-  $f1d7cb69f839a526$var$_tmpl$2 = ["<div", ' class="depict plp search"><div class="listing-page"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
+  $f1d7cb69f839a526$var$_tmpl$2 = ["<div", ' class="', '"><div class="listing-page"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
 function $f1d7cb69f839a526$export$a54ec244c8863715({
   depict_api_: depict_api_,
   search_field_value_: search_field_value_,
@@ -10625,7 +10626,8 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
   content_blocks_by_row_: content_blocks_by_row_,
   modalVersionUsed_: modalVersionUsed_,
   BackIcon_: BackIcon_,
-  filterModalParent_: filterModalParent_
+  filterModalParent_: filterModalParent_,
+  class_: class_
 }) {
   const [get_sorting] = current_sorting_;
   const all_products_loaded_ = $5vyXB$solidjs.createSignal(false);
@@ -10850,7 +10852,7 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({
       alignmentSignals_: alignmentSignals_
     });
   });
-  return [(0, $5vyXB$solidjsweb.isServer) ? "<!-- Search page based on Depict SDK -->" : document.createComment("Search page based on Depict SDK"), $5vyXB$solidjsweb.ssr($f1d7cb69f839a526$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey() + $5vyXB$solidjsweb.ssrAttribute("id", $5vyXB$solidjsweb.escape((0, $0b6e2070a98de347$export$44dad306455dddf).SEARCH_PAGE, true), false), $5vyXB$solidjsweb.escape(get_search_field_elements()), make_category_suggestion_card_ ? $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
+  return [(0, $5vyXB$solidjsweb.isServer) ? "<!-- Search page based on Depict SDK -->" : document.createComment("Search page based on Depict SDK"), $5vyXB$solidjsweb.ssr($f1d7cb69f839a526$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey() + $5vyXB$solidjsweb.ssrAttribute("id", $5vyXB$solidjsweb.escape((0, $0b6e2070a98de347$export$44dad306455dddf).SEARCH_PAGE, true), false), `depict plp search${class_?.() ? ` ${$5vyXB$solidjsweb.escape(class_(), true)}` : ""}`, $5vyXB$solidjsweb.escape(get_search_field_elements()), make_category_suggestion_card_ ? $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
     severity_: "error",
     message_: "Category suggestions failed",
     get children() {
@@ -11359,7 +11361,8 @@ function $2c61e4cd8229c49a$export$f2dc7e4e4aa11abb(props) {
         ...grid_spacing_override()
       })),
       filterModalParent_: $5vyXB$solidjs.untrack(() => props.filterModalParent_),
-      product_card_template_: product_card_template
+      product_card_template_: product_card_template,
+      class_: () => props.class
     });
   }, "Entire SearchPage failed");
 }
@@ -11658,6 +11661,7 @@ function $c0a0659cf97e8eb2$export$316f6f283ae64765(props) {
     let input_element;
     let buttonInField;
     const search_field = $5vyXB$solidjsweb.createComponent((0, $66b8b9a9613c141d$export$b94867ecbd698f21), {
+      class_: () => props.class,
       get BackIcon_() {
         return shared_properties.BackIcon_;
       },

package/server/latest/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.4.3";
+export const version = "4.4.5";
 declare const LISTING_ID = "listingId";
 declare const EXTERNAL_ID = "externalId";
 type ScrollRestorationData = {
@@ -1360,6 +1360,7 @@ export function SearchPage<OriginalDisplay extends Display, TransformedDisplay e
   content_blocks_by_row?: ContentBlocksByRow;
   on_query_change?: (new_query?: string | undefined, old_query?: string | undefined) => void;
   filterModalParent_?: HTMLElement | ShadowRoot;
+  class?: string;
 }): import("@depict-ai/utilishared").Node_Array;
 /**
  * Connects the height of the search field to the height of the aligner.
@@ -1399,7 +1400,7 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
  * Open the modal with support for alignment.
  * @returns {void}
  */
-export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
+export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends unknown>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
 export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
 export interface PageReplacer {
   readonly render_: () => Node_Array;
@@ -1445,6 +1446,7 @@ interface SearchFieldParams {
   modal_dispose_handler?: VoidFunction;
   click_handler?: (this: HTMLDivElement, ev: MouseEvent) => any;
   aligner_ref?: HTMLElement | null;
+  class?: string;
 }
 /**
  * Returns a SearchField that will open a modal aligned to it when clicked.
@@ -1477,5 +1479,5 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
   filterModalParent_?: HTMLElement | ShadowRoot;
-}): import("@depict-ai/utilishared/latest").Node_Array;
+}): import("@depict-ai/utilishared").Node_Array;
 export type { SearchFilter } from "@depict-ai/types/api/SearchRequestV3";

package/server/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $i7OB2$createStore, reconcile as $i7OB2$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.4.3";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.4.5";
 const $b5cccc8ee7d24677$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -22,7 +22,7 @@ const $b5cccc8ee7d24677$var$transform_elements = sorted_cols_at_size => {
 };
 const $b5cccc8ee7d24677$export$6daf8749b65a1b77 = cols_at_size => {
   // Check that every element is an array
-  const are_arrays = cols_at_size.every(element => Array.isArray(element));
+  const are_arrays = cols_at_size?.every?.(element => Array.isArray(element));
   if (!are_arrays) throw new Error("Every element in cols_at_size must be an array");
   // Check width duplicates
   const widths = cols_at_size.map(([_, width]) => width);
@@ -2823,7 +2823,8 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
   i18n_: i18n_,
   after_focusing_: after_focusing_,
   BackIcon_: BackIcon_,
-  buttonInFieldRef_: buttonInFieldRef_
+  buttonInFieldRef_: buttonInFieldRef_,
+  class_: class_
 }) {
   let input_element;
   // This is the div where we recommend (and ourselves do) attach the event listener to that opens the search modal.
@@ -2880,7 +2881,7 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
       return $i7OB2$createComponent(BackIcon_, {});
     }
   })) : $i7OB2$escape($i7OB2$createComponent((0, $19976a74d273070d$export$3b621d86b1566b2), {})), true);
-  return $i7OB2$ssr($5285d2814d0fac0c$var$_tmpl$3, $i7OB2$ssrHydrationKey(), `search-field ${!!on_back_ ? "in-modal" : ""}`, $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
+  return $i7OB2$ssr($5285d2814d0fac0c$var$_tmpl$3, $i7OB2$ssrHydrationKey(), `search-field${on_back_ ? " in-modal" : ""}${class_?.() ? ` ${$i7OB2$escape(class_(), true)}` : ""}`, $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
     get when() {
       return getBackButtonWidth() !== undefined && on_back_;
     },
@@ -10504,7 +10505,7 @@ function $0e562a5b247b1fc2$export$44f738469d5570cf({
   });
 }
 var $7097477c78a89208$var$_tmpl$ = ["<div", ' class="filter-results-for-one-row"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"],
-  $7097477c78a89208$var$_tmpl$2 = ["<div", ' class="depict plp search"><div class="listing-page"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
+  $7097477c78a89208$var$_tmpl$2 = ["<div", ' class="', '"><div class="listing-page"><!--$-->', "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"];
 function $7097477c78a89208$export$a54ec244c8863715({
   depict_api_: depict_api_,
   search_field_value_: search_field_value_,
@@ -10538,7 +10539,8 @@ function $7097477c78a89208$export$a54ec244c8863715({
   content_blocks_by_row_: content_blocks_by_row_,
   modalVersionUsed_: modalVersionUsed_,
   BackIcon_: BackIcon_,
-  filterModalParent_: filterModalParent_
+  filterModalParent_: filterModalParent_,
+  class_: class_
 }) {
   const [get_sorting] = current_sorting_;
   const all_products_loaded_ = $i7OB2$createSignal(false);
@@ -10763,7 +10765,7 @@ function $7097477c78a89208$export$a54ec244c8863715({
       alignmentSignals_: alignmentSignals_
     });
   });
-  return [(0, $i7OB2$isServer) ? "<!-- Search page based on Depict SDK -->" : document.createComment("Search page based on Depict SDK"), $i7OB2$ssr($7097477c78a89208$var$_tmpl$2, $i7OB2$ssrHydrationKey() + $i7OB2$ssrAttribute("id", $i7OB2$escape((0, $f86ba724282f6690$export$44dad306455dddf).SEARCH_PAGE, true), false), $i7OB2$escape(get_search_field_elements()), make_category_suggestion_card_ ? $i7OB2$escape($i7OB2$createComponent((0, $b7436a6d1fd64e3b$export$b69d0d92862de18b), {
+  return [(0, $i7OB2$isServer) ? "<!-- Search page based on Depict SDK -->" : document.createComment("Search page based on Depict SDK"), $i7OB2$ssr($7097477c78a89208$var$_tmpl$2, $i7OB2$ssrHydrationKey() + $i7OB2$ssrAttribute("id", $i7OB2$escape((0, $f86ba724282f6690$export$44dad306455dddf).SEARCH_PAGE, true), false), `depict plp search${class_?.() ? ` ${$i7OB2$escape(class_(), true)}` : ""}`, $i7OB2$escape(get_search_field_elements()), make_category_suggestion_card_ ? $i7OB2$escape($i7OB2$createComponent((0, $b7436a6d1fd64e3b$export$b69d0d92862de18b), {
     severity_: "error",
     message_: "Category suggestions failed",
     get children() {
@@ -11272,7 +11274,8 @@ function $806c97b931758897$export$f2dc7e4e4aa11abb(props) {
         ...grid_spacing_override()
       })),
       filterModalParent_: $i7OB2$untrack(() => props.filterModalParent_),
-      product_card_template_: product_card_template
+      product_card_template_: product_card_template,
+      class_: () => props.class
     });
   }, "Entire SearchPage failed");
 }
@@ -11571,6 +11574,7 @@ function $58b3487626e85ece$export$316f6f283ae64765(props) {
     let input_element;
     let buttonInField;
     const search_field = $i7OB2$createComponent((0, $5285d2814d0fac0c$export$b94867ecbd698f21), {
+      class_: () => props.class,
       get BackIcon_() {
         return shared_properties.BackIcon_;
       },