@depict-ai/ui 4.0.20 → 4.0.22

package/ES10/index.cjs

@@ -95,7 +95,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447a
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $98aef9965764903d$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.0.20";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.0.22";
 
 /**
  * Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
@@ -1692,7 +1692,7 @@ let $c95c6dd9e93acd82$export$44dad306455dddf;
   DEPICT_ID["PLP_CATEGORY"] = "depict-plp-category";
 })($c95c6dd9e93acd82$export$44dad306455dddf || ($c95c6dd9e93acd82$export$44dad306455dddf = {}));
 var $29e5dbeb69da7a36$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<button class=back type=button>`),
-  $29e5dbeb69da7a36$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=search-field><!$><!/><div class=field><input class=query tabindex=0><button type=button class=clear></button></div><button class="submit major"type=button>`);
+  $29e5dbeb69da7a36$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=search-field role=search><!$><!/><div class=field><input class=query tabindex=0><button type=button class=clear></button></div><button class="submit major"type=button>`);
 function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
   let {
     search_field_value_: search_field_value_,
@@ -2521,13 +2521,10 @@ var $ce467edb5343cfcd$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div
 function $ce467edb5343cfcd$export$94026ee33dbabc26(props) {
   return (() => {
     var _el$ = $52FdA$solidjsweb.getNextElement($ce467edb5343cfcd$var$_tmpl$);
-    $52FdA$solidjsweb.classList(_el$, {
-      ["s-image-container"]: true
-    });
     $52FdA$solidjsweb.insert(_el$, () => props.children);
     $52FdA$solidjsweb.effect(_p$ => {
       var _v$ = "padding-bottom:calc(calc(1 / ".concat(props.aspectRatio, ") * 100%)"),
-        _v$2 = props.class;
+        _v$2 = "s-image-container" + (props.class ? " " + props.class : "");
       _p$.e = $52FdA$solidjsweb.style(_el$, _v$, _p$.e);
       _v$2 !== _p$.t && $52FdA$solidjsweb.className(_el$, _p$.t = _v$2);
       return _p$;
@@ -2819,8 +2816,9 @@ function $317500f39819fba6$export$9ca09caa9c849d9c() {
   return $52FdA$solidjsweb.getNextElement($317500f39819fba6$var$_tmpl$);
 }
 var $d1e7b96fb13cd1d3$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<a>`),
-  $d1e7b96fb13cd1d3$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=listing-card><div class=image-part></div><!$><!/><h3 class=title>`),
-  $d1e7b96fb13cd1d3$var$_tmpl$3 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=empty-image>`);
+  $d1e7b96fb13cd1d3$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=images-wrapper>`),
+  $d1e7b96fb13cd1d3$var$_tmpl$3 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=listing-card><!$><!/><!$><!/><h3 class=title>`),
+  $d1e7b96fb13cd1d3$var$_tmpl$4 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=empty-image>`);
 const $d1e7b96fb13cd1d3$var$aspectRatioWidthComponent = 400;
 const $d1e7b96fb13cd1d3$var$aspectRatioHeightComponent = 200;
 const $d1e7b96fb13cd1d3$var$listingSuggestionCollageAspectRatio = $d1e7b96fb13cd1d3$var$aspectRatioWidthComponent / $d1e7b96fb13cd1d3$var$aspectRatioHeightComponent;
@@ -2842,26 +2840,22 @@ function $d1e7b96fb13cd1d3$export$67152d26d4f56ee8(_ref) {
   }); // <- could be made reactive getter created in displayTransformers, read it in memo here since it might create computations (for example in the preview-brower), and there's no owner in the onClick handler
   const LinkToListing = props => (() => {
     var _el$ = $52FdA$solidjsweb.getNextElement($d1e7b96fb13cd1d3$var$_tmpl$);
-    $52FdA$solidjsweb.addEventListener(_el$, "click", $52FdA$depictaiutilishared.catchify(ev => href() && router_.navigate_.go_to_({
-      new_url_: href(),
-      is_replace_: false,
-      event_: ev,
-      listing_query_: {
-        id: listing_().listing_id,
-        type: $c3739e86187f2054$export$74ee7529ce0f8a00
+    $52FdA$solidjsweb.spread(_el$, $52FdA$solidjsweb.mergeProps(props, {
+      get href() {
+        return href();
+      },
+      get onClick() {
+        return $52FdA$depictaiutilishared.catchify(ev => href() && router_.navigate_.go_to_({
+          new_url_: href(),
+          is_replace_: false,
+          event_: ev,
+          listing_query_: {
+            id: listing_().listing_id,
+            type: $c3739e86187f2054$export$74ee7529ce0f8a00
+          }
+        }));
       }
-    })), true);
-    $52FdA$solidjsweb.insert(_el$, () => props.children);
-    $52FdA$solidjsweb.effect(_p$ => {
-      var _v$ = props.tabIndex_,
-        _v$2 = href();
-      _v$ !== _p$.e && $52FdA$solidjsweb.setAttribute(_el$, "tabindex", _p$.e = _v$);
-      _v$2 !== _p$.t && $52FdA$solidjsweb.setAttribute(_el$, "href", _p$.t = _v$2);
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined
-    });
+    }), false, false);
     $52FdA$solidjsweb.runHydrationEvents();
     return _el$;
   })();
@@ -2875,11 +2869,12 @@ function $d1e7b96fb13cd1d3$export$67152d26d4f56ee8(_ref) {
     return (_listing_3 = listing_()) === null || _listing_3 === void 0 ? void 0 : _listing_3.ancestors;
   });
   return (() => {
-    var _el$2 = $52FdA$solidjsweb.getNextElement($d1e7b96fb13cd1d3$var$_tmpl$2),
-      _el$3 = _el$2.firstChild,
-      _el$5 = _el$3.nextSibling,
+    var _el$2 = $52FdA$solidjsweb.getNextElement($d1e7b96fb13cd1d3$var$_tmpl$3),
+      _el$5 = _el$2.firstChild,
       [_el$6, _co$] = $52FdA$solidjsweb.getNextMarker(_el$5.nextSibling),
-      _el$4 = _el$6.nextSibling;
+      _el$7 = _el$6.nextSibling,
+      [_el$8, _co$2] = $52FdA$solidjsweb.getNextMarker(_el$7.nextSibling),
+      _el$4 = _el$8.nextSibling;
     $52FdA$solidjsweb.use(element => $b0f8d9f49e018db9$export$12761f53d7ab7f27(element, selectedDueToKeyboardNavigation), _el$2);
     $52FdA$solidjsweb.addEventListener(_el$2, "mouseleave", $52FdA$depictaiutilishared.catchify(() => write_selected_index_()));
     $52FdA$solidjsweb.addEventListener(_el$2, "mouseover", $52FdA$depictaiutilishared.catchify(_ref2 => {
@@ -2894,15 +2889,22 @@ function $d1e7b96fb13cd1d3$export$67152d26d4f56ee8(_ref) {
       }
       write_selected_index_([keyboardNavigationGroupIndex_(), index_()]);
     }), true);
-    $52FdA$solidjsweb.insert(_el$3, $52FdA$solidjsweb.createComponent(LinkToListing, {
-      tabIndex_: -1,
+    $52FdA$solidjsweb.insert(_el$2, $52FdA$solidjsweb.createComponent(LinkToListing, {
+      "class": "image-part",
+      get style() {
+        var _image_urls$length, _image_urls;
+        return "--image-count: ".concat((_image_urls$length = (_image_urls = image_urls()) === null || _image_urls === void 0 ? void 0 : _image_urls.length) !== null && _image_urls$length !== void 0 ? _image_urls$length : 0);
+      },
+      tabIndex: -1,
       get children() {
-        return $52FdA$solidjsweb.createComponent($d1e7b96fb13cd1d3$export$ea41102db9bd68c3, {
+        var _el$3 = $52FdA$solidjsweb.getNextElement($d1e7b96fb13cd1d3$var$_tmpl$2);
+        $52FdA$solidjsweb.insert(_el$3, $52FdA$solidjsweb.createComponent($d1e7b96fb13cd1d3$export$ea41102db9bd68c3, {
           image_urls_: image_urls,
           merchant_: merchant_
-        });
+        }));
+        return _el$3;
       }
-    }));
+    }), _el$6, _co$);
     $52FdA$solidjsweb.insert(_el$2, $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
       get when() {
         var _crumbData;
@@ -2918,7 +2920,7 @@ function $d1e7b96fb13cd1d3$export$67152d26d4f56ee8(_ref) {
           placeholderData_: [,,]
         });
       }
-    }), _el$6, _co$);
+    }), _el$8, _co$2);
     $52FdA$solidjsweb.insert(_el$4, $52FdA$solidjsweb.createComponent(LinkToListing, {
       get children() {
         var _listing_4;
@@ -2928,17 +2930,7 @@ function $d1e7b96fb13cd1d3$export$67152d26d4f56ee8(_ref) {
         });
       }
     }));
-    $52FdA$solidjsweb.effect(_p$ => {
-      var _image_urls$length, _image_urls;
-      var _v$3 = !!isSelected(),
-        _v$4 = "--image-count: ".concat((_image_urls$length = (_image_urls = image_urls()) === null || _image_urls === void 0 ? void 0 : _image_urls.length) !== null && _image_urls$length !== void 0 ? _image_urls$length : 0);
-      _v$3 !== _p$.e && _el$2.classList.toggle("selected", _p$.e = _v$3);
-      _p$.t = $52FdA$solidjsweb.style(_el$3, _v$4, _p$.t);
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined
-    });
+    $52FdA$solidjsweb.effect(() => _el$2.classList.toggle("selected", !!isSelected()));
     $52FdA$solidjsweb.runHydrationEvents();
     return _el$2;
   })();
@@ -2983,13 +2975,13 @@ function $d1e7b96fb13cd1d3$export$ea41102db9bd68c3(_ref3) {
 }
 function $d1e7b96fb13cd1d3$var$EmptyImage() {
   return (() => {
-    var _el$7 = $52FdA$solidjsweb.getNextElement($d1e7b96fb13cd1d3$var$_tmpl$3);
-    _el$7.style.setProperty("aspect-ratio", "2");
-    $52FdA$solidjsweb.insert(_el$7, $52FdA$solidjsweb.createComponent((0, $317500f39819fba6$export$9ca09caa9c849d9c), {}));
-    return _el$7;
+    var _el$9 = $52FdA$solidjsweb.getNextElement($d1e7b96fb13cd1d3$var$_tmpl$4);
+    _el$9.style.setProperty("aspect-ratio", "2");
+    $52FdA$solidjsweb.insert(_el$9, $52FdA$solidjsweb.createComponent((0, $317500f39819fba6$export$9ca09caa9c849d9c), {}));
+    return _el$9;
   })();
 }
-$52FdA$solidjsweb.delegateEvents(["click", "mouseover"]);
+$52FdA$solidjsweb.delegateEvents(["mouseover"]);
 var $9d19451330d04c3c$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0"fill=#0f0f0f>`);
 function $9d19451330d04c3c$export$8be2714ec7f169ee() {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

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 _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.0.20";
+export const version = "4.0.22";
 /**
  * Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
  */
@@ -1211,7 +1211,7 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   on_listing_query_change?: (new_listing_query?: ListingQuery | undefined, old_listing_query?: ListingQuery | undefined) => void;
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
-}): import("@depict-ai/utilishared/latest").Node_Array;
+}): import("@depict-ai/utilishared").Node_Array;
 export function BreadCrumbs<T extends Display>({
   depict_category
 }: {
@@ -1351,7 +1351,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;

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.0.20";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.0.22";
 
 /**
  * Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
@@ -1607,7 +1607,7 @@ let $c3820807ac1e6fd7$export$44dad306455dddf;
   DEPICT_ID["PLP_CATEGORY"] = "depict-plp-category";
 })($c3820807ac1e6fd7$export$44dad306455dddf || ($c3820807ac1e6fd7$export$44dad306455dddf = {}));
 var $584c06c09cf4609d$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<button class=back type=button>`),
-  $584c06c09cf4609d$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<div class=search-field><!$><!/><div class=field><input class=query tabindex=0><button type=button class=clear></button></div><button class="submit major"type=button>`);
+  $584c06c09cf4609d$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<div class=search-field role=search><!$><!/><div class=field><input class=query tabindex=0><button type=button class=clear></button></div><button class="submit major"type=button>`);
 function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
   let {
     search_field_value_: search_field_value_,
@@ -2436,13 +2436,10 @@ var $801e8845d3fa3653$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div>`);
 function $801e8845d3fa3653$export$94026ee33dbabc26(props) {
   return (() => {
     var _el$ = $8tj43$getNextElement($801e8845d3fa3653$var$_tmpl$);
-    $8tj43$classList(_el$, {
-      ["s-image-container"]: true
-    });
     $8tj43$insert(_el$, () => props.children);
     $8tj43$effect(_p$ => {
       var _v$ = "padding-bottom:calc(calc(1 / ".concat(props.aspectRatio, ") * 100%)"),
-        _v$2 = props.class;
+        _v$2 = "s-image-container" + (props.class ? " " + props.class : "");
       _p$.e = $8tj43$style(_el$, _v$, _p$.e);
       _v$2 !== _p$.t && $8tj43$className(_el$, _p$.t = _v$2);
       return _p$;
@@ -2734,8 +2731,9 @@ function $4a3ed70b3b7c60d5$export$9ca09caa9c849d9c() {
   return $8tj43$getNextElement($4a3ed70b3b7c60d5$var$_tmpl$);
 }
 var $26db6925469636a4$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<a>`),
-  $26db6925469636a4$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<div class=listing-card><div class=image-part></div><!$><!/><h3 class=title>`),
-  $26db6925469636a4$var$_tmpl$3 = /*#__PURE__*/$8tj43$template(`<div class=empty-image>`);
+  $26db6925469636a4$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<div class=images-wrapper>`),
+  $26db6925469636a4$var$_tmpl$3 = /*#__PURE__*/$8tj43$template(`<div class=listing-card><!$><!/><!$><!/><h3 class=title>`),
+  $26db6925469636a4$var$_tmpl$4 = /*#__PURE__*/$8tj43$template(`<div class=empty-image>`);
 const $26db6925469636a4$var$aspectRatioWidthComponent = 400;
 const $26db6925469636a4$var$aspectRatioHeightComponent = 200;
 const $26db6925469636a4$var$listingSuggestionCollageAspectRatio = $26db6925469636a4$var$aspectRatioWidthComponent / $26db6925469636a4$var$aspectRatioHeightComponent;
@@ -2757,26 +2755,22 @@ function $26db6925469636a4$export$67152d26d4f56ee8(_ref) {
   }); // <- could be made reactive getter created in displayTransformers, read it in memo here since it might create computations (for example in the preview-brower), and there's no owner in the onClick handler
   const LinkToListing = props => (() => {
     var _el$ = $8tj43$getNextElement($26db6925469636a4$var$_tmpl$);
-    $8tj43$addEventListener(_el$, "click", $8tj43$catchify(ev => href() && router_.navigate_.go_to_({
-      new_url_: href(),
-      is_replace_: false,
-      event_: ev,
-      listing_query_: {
-        id: listing_().listing_id,
-        type: $397620a4d7958ed1$export$74ee7529ce0f8a00
+    $8tj43$spread(_el$, $8tj43$mergeProps(props, {
+      get href() {
+        return href();
+      },
+      get onClick() {
+        return $8tj43$catchify(ev => href() && router_.navigate_.go_to_({
+          new_url_: href(),
+          is_replace_: false,
+          event_: ev,
+          listing_query_: {
+            id: listing_().listing_id,
+            type: $397620a4d7958ed1$export$74ee7529ce0f8a00
+          }
+        }));
       }
-    })), true);
-    $8tj43$insert(_el$, () => props.children);
-    $8tj43$effect(_p$ => {
-      var _v$ = props.tabIndex_,
-        _v$2 = href();
-      _v$ !== _p$.e && $8tj43$setAttribute(_el$, "tabindex", _p$.e = _v$);
-      _v$2 !== _p$.t && $8tj43$setAttribute(_el$, "href", _p$.t = _v$2);
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined
-    });
+    }), false, false);
     $8tj43$runHydrationEvents();
     return _el$;
   })();
@@ -2790,11 +2784,12 @@ function $26db6925469636a4$export$67152d26d4f56ee8(_ref) {
     return (_listing_3 = listing_()) === null || _listing_3 === void 0 ? void 0 : _listing_3.ancestors;
   });
   return (() => {
-    var _el$2 = $8tj43$getNextElement($26db6925469636a4$var$_tmpl$2),
-      _el$3 = _el$2.firstChild,
-      _el$5 = _el$3.nextSibling,
+    var _el$2 = $8tj43$getNextElement($26db6925469636a4$var$_tmpl$3),
+      _el$5 = _el$2.firstChild,
       [_el$6, _co$] = $8tj43$getNextMarker(_el$5.nextSibling),
-      _el$4 = _el$6.nextSibling;
+      _el$7 = _el$6.nextSibling,
+      [_el$8, _co$2] = $8tj43$getNextMarker(_el$7.nextSibling),
+      _el$4 = _el$8.nextSibling;
     $8tj43$use(element => $d0883254246d3eb6$export$12761f53d7ab7f27(element, selectedDueToKeyboardNavigation), _el$2);
     $8tj43$addEventListener(_el$2, "mouseleave", $8tj43$catchify(() => write_selected_index_()));
     $8tj43$addEventListener(_el$2, "mouseover", $8tj43$catchify(_ref2 => {
@@ -2809,15 +2804,22 @@ function $26db6925469636a4$export$67152d26d4f56ee8(_ref) {
       }
       write_selected_index_([keyboardNavigationGroupIndex_(), index_()]);
     }), true);
-    $8tj43$insert(_el$3, $8tj43$createComponent(LinkToListing, {
-      tabIndex_: -1,
+    $8tj43$insert(_el$2, $8tj43$createComponent(LinkToListing, {
+      "class": "image-part",
+      get style() {
+        var _image_urls$length, _image_urls;
+        return "--image-count: ".concat((_image_urls$length = (_image_urls = image_urls()) === null || _image_urls === void 0 ? void 0 : _image_urls.length) !== null && _image_urls$length !== void 0 ? _image_urls$length : 0);
+      },
+      tabIndex: -1,
       get children() {
-        return $8tj43$createComponent($26db6925469636a4$export$ea41102db9bd68c3, {
+        var _el$3 = $8tj43$getNextElement($26db6925469636a4$var$_tmpl$2);
+        $8tj43$insert(_el$3, $8tj43$createComponent($26db6925469636a4$export$ea41102db9bd68c3, {
           image_urls_: image_urls,
           merchant_: merchant_
-        });
+        }));
+        return _el$3;
       }
-    }));
+    }), _el$6, _co$);
     $8tj43$insert(_el$2, $8tj43$createComponent((0, $8tj43$Show), {
       get when() {
         var _crumbData;
@@ -2833,7 +2835,7 @@ function $26db6925469636a4$export$67152d26d4f56ee8(_ref) {
           placeholderData_: [,,]
         });
       }
-    }), _el$6, _co$);
+    }), _el$8, _co$2);
     $8tj43$insert(_el$4, $8tj43$createComponent(LinkToListing, {
       get children() {
         var _listing_4;
@@ -2843,17 +2845,7 @@ function $26db6925469636a4$export$67152d26d4f56ee8(_ref) {
         });
       }
     }));
-    $8tj43$effect(_p$ => {
-      var _image_urls$length, _image_urls;
-      var _v$3 = !!isSelected(),
-        _v$4 = "--image-count: ".concat((_image_urls$length = (_image_urls = image_urls()) === null || _image_urls === void 0 ? void 0 : _image_urls.length) !== null && _image_urls$length !== void 0 ? _image_urls$length : 0);
-      _v$3 !== _p$.e && _el$2.classList.toggle("selected", _p$.e = _v$3);
-      _p$.t = $8tj43$style(_el$3, _v$4, _p$.t);
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined
-    });
+    $8tj43$effect(() => _el$2.classList.toggle("selected", !!isSelected()));
     $8tj43$runHydrationEvents();
     return _el$2;
   })();
@@ -2898,13 +2890,13 @@ function $26db6925469636a4$export$ea41102db9bd68c3(_ref3) {
 }
 function $26db6925469636a4$var$EmptyImage() {
   return (() => {
-    var _el$7 = $8tj43$getNextElement($26db6925469636a4$var$_tmpl$3);
-    _el$7.style.setProperty("aspect-ratio", "2");
-    $8tj43$insert(_el$7, $8tj43$createComponent((0, $4a3ed70b3b7c60d5$export$9ca09caa9c849d9c), {}));
-    return _el$7;
+    var _el$9 = $8tj43$getNextElement($26db6925469636a4$var$_tmpl$4);
+    _el$9.style.setProperty("aspect-ratio", "2");
+    $8tj43$insert(_el$9, $8tj43$createComponent((0, $4a3ed70b3b7c60d5$export$9ca09caa9c849d9c), {}));
+    return _el$9;
   })();
 }
-$8tj43$delegateEvents(["click", "mouseover"]);
+$8tj43$delegateEvents(["mouseover"]);
 var $ca6ab5f08bd28bca$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0"fill=#0f0f0f>`);
 function $ca6ab5f08bd28bca$export$8be2714ec7f169ee() {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

package/latest/index.cjs

@@ -89,7 +89,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad99
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $c0a0659cf97e8eb2$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.0.20";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.0.22";
 
 /**
  * Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
@@ -1611,7 +1611,7 @@ let $0b6e2070a98de347$export$44dad306455dddf;
   DEPICT_ID["PLP_CATEGORY"] = "depict-plp-category";
 })($0b6e2070a98de347$export$44dad306455dddf || ($0b6e2070a98de347$export$44dad306455dddf = {}));
 var $66b8b9a9613c141d$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<button class=back type=button>`),
-  $66b8b9a9613c141d$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=search-field><!$><!/><div class=field><input class=query tabindex=0><button type=button class=clear></button></div><button class="submit major"type=button>`);
+  $66b8b9a9613c141d$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=search-field role=search><!$><!/><div class=field><input class=query tabindex=0><button type=button class=clear></button></div><button class="submit major"type=button>`);
 function $66b8b9a9613c141d$export$b94867ecbd698f21({
   search_field_value_: search_field_value_,
   input_field_ref_: input_field_ref_,
@@ -2414,13 +2414,10 @@ var $93304d59a9747aa6$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div
 function $93304d59a9747aa6$export$94026ee33dbabc26(props) {
   return (() => {
     var _el$ = $gVhhF$solidjsweb.getNextElement($93304d59a9747aa6$var$_tmpl$);
-    $gVhhF$solidjsweb.classList(_el$, {
-      ["s-image-container"]: true
-    });
     $gVhhF$solidjsweb.insert(_el$, () => props.children);
     $gVhhF$solidjsweb.effect(_p$ => {
       var _v$ = `padding-bottom:calc(calc(1 / ${props.aspectRatio}) * 100%)`,
-        _v$2 = props.class;
+        _v$2 = "s-image-container" + (props.class ? " " + props.class : "");
       _p$.e = $gVhhF$solidjsweb.style(_el$, _v$, _p$.e);
       _v$2 !== _p$.t && $gVhhF$solidjsweb.className(_el$, _p$.t = _v$2);
       return _p$;
@@ -2703,8 +2700,9 @@ function $3a1c4fee88fb8672$export$9ca09caa9c849d9c() {
   return $gVhhF$solidjsweb.getNextElement($3a1c4fee88fb8672$var$_tmpl$);
 }
 var $1f3b5fa875714dea$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<a>`),
-  $1f3b5fa875714dea$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=listing-card><div class=image-part></div><!$><!/><h3 class=title>`),
-  $1f3b5fa875714dea$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=empty-image>`);
+  $1f3b5fa875714dea$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=images-wrapper>`),
+  $1f3b5fa875714dea$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=listing-card><!$><!/><!$><!/><h3 class=title>`),
+  $1f3b5fa875714dea$var$_tmpl$4 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=empty-image>`);
 const $1f3b5fa875714dea$var$aspectRatioWidthComponent = 400;
 const $1f3b5fa875714dea$var$aspectRatioHeightComponent = 200;
 const $1f3b5fa875714dea$var$listingSuggestionCollageAspectRatio = $1f3b5fa875714dea$var$aspectRatioWidthComponent / $1f3b5fa875714dea$var$aspectRatioHeightComponent;
@@ -2722,26 +2720,22 @@ function $1f3b5fa875714dea$export$67152d26d4f56ee8({
   const href = $gVhhF$solidjs.createMemo(() => listing_()?.page_url); // <- could be made reactive getter created in displayTransformers, read it in memo here since it might create computations (for example in the preview-brower), and there's no owner in the onClick handler
   const LinkToListing = props => (() => {
     var _el$ = $gVhhF$solidjsweb.getNextElement($1f3b5fa875714dea$var$_tmpl$);
-    $gVhhF$solidjsweb.addEventListener(_el$, "click", $gVhhF$depictaiutilishared.catchify(ev => href() && router_.navigate_.go_to_({
-      new_url_: href(),
-      is_replace_: false,
-      event_: ev,
-      listing_query_: {
-        id: listing_().listing_id,
-        type: $779741d0f266ea8c$export$74ee7529ce0f8a00
+    $gVhhF$solidjsweb.spread(_el$, $gVhhF$solidjsweb.mergeProps(props, {
+      get href() {
+        return href();
+      },
+      get onClick() {
+        return $gVhhF$depictaiutilishared.catchify(ev => href() && router_.navigate_.go_to_({
+          new_url_: href(),
+          is_replace_: false,
+          event_: ev,
+          listing_query_: {
+            id: listing_().listing_id,
+            type: $779741d0f266ea8c$export$74ee7529ce0f8a00
+          }
+        }));
       }
-    })), true);
-    $gVhhF$solidjsweb.insert(_el$, () => props.children);
-    $gVhhF$solidjsweb.effect(_p$ => {
-      var _v$ = props.tabIndex_,
-        _v$2 = href();
-      _v$ !== _p$.e && $gVhhF$solidjsweb.setAttribute(_el$, "tabindex", _p$.e = _v$);
-      _v$2 !== _p$.t && $gVhhF$solidjsweb.setAttribute(_el$, "href", _p$.t = _v$2);
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined
-    });
+    }), false, false);
     $gVhhF$solidjsweb.runHydrationEvents();
     return _el$;
   })();
@@ -2749,11 +2743,12 @@ function $1f3b5fa875714dea$export$67152d26d4f56ee8({
   const [isSelected, selectedDueToKeyboardNavigation] = $f144ea315d9e4caa$export$fb40a80c530e5f2b(read_selected_index_, keyboardNavigationGroupIndex_, index_);
   const crumbData = $gVhhF$solidjs.createMemo(() => listing_()?.ancestors);
   return (() => {
-    var _el$2 = $gVhhF$solidjsweb.getNextElement($1f3b5fa875714dea$var$_tmpl$2),
-      _el$3 = _el$2.firstChild,
-      _el$5 = _el$3.nextSibling,
+    var _el$2 = $gVhhF$solidjsweb.getNextElement($1f3b5fa875714dea$var$_tmpl$3),
+      _el$5 = _el$2.firstChild,
       [_el$6, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$5.nextSibling),
-      _el$4 = _el$6.nextSibling;
+      _el$7 = _el$6.nextSibling,
+      [_el$8, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$7.nextSibling),
+      _el$4 = _el$8.nextSibling;
     $gVhhF$solidjsweb.use(element => $f144ea315d9e4caa$export$12761f53d7ab7f27(element, selectedDueToKeyboardNavigation), _el$2);
     $gVhhF$solidjsweb.addEventListener(_el$2, "mouseleave", $gVhhF$depictaiutilishared.catchify(() => write_selected_index_()));
     $gVhhF$solidjsweb.addEventListener(_el$2, "mouseover", $gVhhF$depictaiutilishared.catchify(({
@@ -2767,15 +2762,21 @@ function $1f3b5fa875714dea$export$67152d26d4f56ee8({
       }
       write_selected_index_([keyboardNavigationGroupIndex_(), index_()]);
     }), true);
-    $gVhhF$solidjsweb.insert(_el$3, $gVhhF$solidjsweb.createComponent(LinkToListing, {
-      tabIndex_: -1,
+    $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent(LinkToListing, {
+      "class": "image-part",
+      get style() {
+        return `--image-count: ${image_urls()?.length ?? 0}`;
+      },
+      tabIndex: -1,
       get children() {
-        return $gVhhF$solidjsweb.createComponent($1f3b5fa875714dea$export$ea41102db9bd68c3, {
+        var _el$3 = $gVhhF$solidjsweb.getNextElement($1f3b5fa875714dea$var$_tmpl$2);
+        $gVhhF$solidjsweb.insert(_el$3, $gVhhF$solidjsweb.createComponent($1f3b5fa875714dea$export$ea41102db9bd68c3, {
           image_urls_: image_urls,
           merchant_: merchant_
-        });
+        }));
+        return _el$3;
       }
-    }));
+    }), _el$6, _co$);
     $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
       get when() {
         return crumbData()?.length !== 0;
@@ -2790,7 +2791,7 @@ function $1f3b5fa875714dea$export$67152d26d4f56ee8({
           placeholderData_: [,,]
         });
       }
-    }), _el$6, _co$);
+    }), _el$8, _co$2);
     $gVhhF$solidjsweb.insert(_el$4, $gVhhF$solidjsweb.createComponent(LinkToListing, {
       get children() {
         return listing_()?.title || $gVhhF$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
@@ -2799,16 +2800,7 @@ function $1f3b5fa875714dea$export$67152d26d4f56ee8({
         });
       }
     }));
-    $gVhhF$solidjsweb.effect(_p$ => {
-      var _v$3 = !!isSelected(),
-        _v$4 = `--image-count: ${image_urls()?.length ?? 0}`;
-      _v$3 !== _p$.e && _el$2.classList.toggle("selected", _p$.e = _v$3);
-      _p$.t = $gVhhF$solidjsweb.style(_el$3, _v$4, _p$.t);
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined
-    });
+    $gVhhF$solidjsweb.effect(() => _el$2.classList.toggle("selected", !!isSelected()));
     $gVhhF$solidjsweb.runHydrationEvents();
     return _el$2;
   })();
@@ -2851,13 +2843,13 @@ function $1f3b5fa875714dea$export$ea41102db9bd68c3({
 }
 function $1f3b5fa875714dea$var$EmptyImage() {
   return (() => {
-    var _el$7 = $gVhhF$solidjsweb.getNextElement($1f3b5fa875714dea$var$_tmpl$3);
-    _el$7.style.setProperty("aspect-ratio", "2");
-    $gVhhF$solidjsweb.insert(_el$7, $gVhhF$solidjsweb.createComponent((0, $3a1c4fee88fb8672$export$9ca09caa9c849d9c), {}));
-    return _el$7;
+    var _el$9 = $gVhhF$solidjsweb.getNextElement($1f3b5fa875714dea$var$_tmpl$4);
+    _el$9.style.setProperty("aspect-ratio", "2");
+    $gVhhF$solidjsweb.insert(_el$9, $gVhhF$solidjsweb.createComponent((0, $3a1c4fee88fb8672$export$9ca09caa9c849d9c), {}));
+    return _el$9;
   })();
 }
-$gVhhF$solidjsweb.delegateEvents(["click", "mouseover"]);
+$gVhhF$solidjsweb.delegateEvents(["mouseover"]);
 var $0f313083912e447a$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0"fill=#0f0f0f>`);
 function $0f313083912e447a$export$8be2714ec7f169ee(props = {}) {
   return (() => {

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 _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.0.20";
+export const version = "4.0.22";
 /**
  * Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
  */
@@ -1211,7 +1211,7 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   on_listing_query_change?: (new_listing_query?: ListingQuery | undefined, old_listing_query?: ListingQuery | undefined) => void;
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
-}): import("@depict-ai/utilishared/latest").Node_Array;
+}): import("@depict-ai/utilishared").Node_Array;
 export function BreadCrumbs<T extends Display>({
   depict_category
 }: {
@@ -1351,7 +1351,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;

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.0.20";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.0.22";
 
 /**
  * Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
@@ -1529,7 +1529,7 @@ let $f86ba724282f6690$export$44dad306455dddf;
   DEPICT_ID["PLP_CATEGORY"] = "depict-plp-category";
 })($f86ba724282f6690$export$44dad306455dddf || ($f86ba724282f6690$export$44dad306455dddf = {}));
 var $5285d2814d0fac0c$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<button class=back type=button>`),
-  $5285d2814d0fac0c$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<div class=search-field><!$><!/><div class=field><input class=query tabindex=0><button type=button class=clear></button></div><button class="submit major"type=button>`);
+  $5285d2814d0fac0c$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<div class=search-field role=search><!$><!/><div class=field><input class=query tabindex=0><button type=button class=clear></button></div><button class="submit major"type=button>`);
 function $5285d2814d0fac0c$export$b94867ecbd698f21({
   search_field_value_: search_field_value_,
   input_field_ref_: input_field_ref_,
@@ -2332,13 +2332,10 @@ var $f18d425032111270$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div>`);
 function $f18d425032111270$export$94026ee33dbabc26(props) {
   return (() => {
     var _el$ = $9HbP8$getNextElement($f18d425032111270$var$_tmpl$);
-    $9HbP8$classList(_el$, {
-      ["s-image-container"]: true
-    });
     $9HbP8$insert(_el$, () => props.children);
     $9HbP8$effect(_p$ => {
       var _v$ = `padding-bottom:calc(calc(1 / ${props.aspectRatio}) * 100%)`,
-        _v$2 = props.class;
+        _v$2 = "s-image-container" + (props.class ? " " + props.class : "");
       _p$.e = $9HbP8$style(_el$, _v$, _p$.e);
       _v$2 !== _p$.t && $9HbP8$className(_el$, _p$.t = _v$2);
       return _p$;
@@ -2621,8 +2618,9 @@ function $0eb1f9e7ee46f1c2$export$9ca09caa9c849d9c() {
   return $9HbP8$getNextElement($0eb1f9e7ee46f1c2$var$_tmpl$);
 }
 var $4ce5b8892775b62d$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<a>`),
-  $4ce5b8892775b62d$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<div class=listing-card><div class=image-part></div><!$><!/><h3 class=title>`),
-  $4ce5b8892775b62d$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<div class=empty-image>`);
+  $4ce5b8892775b62d$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<div class=images-wrapper>`),
+  $4ce5b8892775b62d$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<div class=listing-card><!$><!/><!$><!/><h3 class=title>`),
+  $4ce5b8892775b62d$var$_tmpl$4 = /*#__PURE__*/$9HbP8$template(`<div class=empty-image>`);
 const $4ce5b8892775b62d$var$aspectRatioWidthComponent = 400;
 const $4ce5b8892775b62d$var$aspectRatioHeightComponent = 200;
 const $4ce5b8892775b62d$var$listingSuggestionCollageAspectRatio = $4ce5b8892775b62d$var$aspectRatioWidthComponent / $4ce5b8892775b62d$var$aspectRatioHeightComponent;
@@ -2640,26 +2638,22 @@ function $4ce5b8892775b62d$export$67152d26d4f56ee8({
   const href = $9HbP8$createMemo(() => listing_()?.page_url); // <- could be made reactive getter created in displayTransformers, read it in memo here since it might create computations (for example in the preview-brower), and there's no owner in the onClick handler
   const LinkToListing = props => (() => {
     var _el$ = $9HbP8$getNextElement($4ce5b8892775b62d$var$_tmpl$);
-    $9HbP8$addEventListener(_el$, "click", $9HbP8$catchify(ev => href() && router_.navigate_.go_to_({
-      new_url_: href(),
-      is_replace_: false,
-      event_: ev,
-      listing_query_: {
-        id: listing_().listing_id,
-        type: $c20599a0d81d953a$export$74ee7529ce0f8a00
+    $9HbP8$spread(_el$, $9HbP8$mergeProps(props, {
+      get href() {
+        return href();
+      },
+      get onClick() {
+        return $9HbP8$catchify(ev => href() && router_.navigate_.go_to_({
+          new_url_: href(),
+          is_replace_: false,
+          event_: ev,
+          listing_query_: {
+            id: listing_().listing_id,
+            type: $c20599a0d81d953a$export$74ee7529ce0f8a00
+          }
+        }));
       }
-    })), true);
-    $9HbP8$insert(_el$, () => props.children);
-    $9HbP8$effect(_p$ => {
-      var _v$ = props.tabIndex_,
-        _v$2 = href();
-      _v$ !== _p$.e && $9HbP8$setAttribute(_el$, "tabindex", _p$.e = _v$);
-      _v$2 !== _p$.t && $9HbP8$setAttribute(_el$, "href", _p$.t = _v$2);
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined
-    });
+    }), false, false);
     $9HbP8$runHydrationEvents();
     return _el$;
   })();
@@ -2667,11 +2661,12 @@ function $4ce5b8892775b62d$export$67152d26d4f56ee8({
   const [isSelected, selectedDueToKeyboardNavigation] = $f4125ce4984deee6$export$fb40a80c530e5f2b(read_selected_index_, keyboardNavigationGroupIndex_, index_);
   const crumbData = $9HbP8$createMemo(() => listing_()?.ancestors);
   return (() => {
-    var _el$2 = $9HbP8$getNextElement($4ce5b8892775b62d$var$_tmpl$2),
-      _el$3 = _el$2.firstChild,
-      _el$5 = _el$3.nextSibling,
+    var _el$2 = $9HbP8$getNextElement($4ce5b8892775b62d$var$_tmpl$3),
+      _el$5 = _el$2.firstChild,
       [_el$6, _co$] = $9HbP8$getNextMarker(_el$5.nextSibling),
-      _el$4 = _el$6.nextSibling;
+      _el$7 = _el$6.nextSibling,
+      [_el$8, _co$2] = $9HbP8$getNextMarker(_el$7.nextSibling),
+      _el$4 = _el$8.nextSibling;
     $9HbP8$use(element => $f4125ce4984deee6$export$12761f53d7ab7f27(element, selectedDueToKeyboardNavigation), _el$2);
     $9HbP8$addEventListener(_el$2, "mouseleave", $9HbP8$catchify(() => write_selected_index_()));
     $9HbP8$addEventListener(_el$2, "mouseover", $9HbP8$catchify(({
@@ -2685,15 +2680,21 @@ function $4ce5b8892775b62d$export$67152d26d4f56ee8({
       }
       write_selected_index_([keyboardNavigationGroupIndex_(), index_()]);
     }), true);
-    $9HbP8$insert(_el$3, $9HbP8$createComponent(LinkToListing, {
-      tabIndex_: -1,
+    $9HbP8$insert(_el$2, $9HbP8$createComponent(LinkToListing, {
+      "class": "image-part",
+      get style() {
+        return `--image-count: ${image_urls()?.length ?? 0}`;
+      },
+      tabIndex: -1,
       get children() {
-        return $9HbP8$createComponent($4ce5b8892775b62d$export$ea41102db9bd68c3, {
+        var _el$3 = $9HbP8$getNextElement($4ce5b8892775b62d$var$_tmpl$2);
+        $9HbP8$insert(_el$3, $9HbP8$createComponent($4ce5b8892775b62d$export$ea41102db9bd68c3, {
           image_urls_: image_urls,
           merchant_: merchant_
-        });
+        }));
+        return _el$3;
       }
-    }));
+    }), _el$6, _co$);
     $9HbP8$insert(_el$2, $9HbP8$createComponent((0, $9HbP8$Show), {
       get when() {
         return crumbData()?.length !== 0;
@@ -2708,7 +2709,7 @@ function $4ce5b8892775b62d$export$67152d26d4f56ee8({
           placeholderData_: [,,]
         });
       }
-    }), _el$6, _co$);
+    }), _el$8, _co$2);
     $9HbP8$insert(_el$4, $9HbP8$createComponent(LinkToListing, {
       get children() {
         return listing_()?.title || $9HbP8$createComponent((0, $d134eae24341b4a1$export$89c6019e4baa40b1), {
@@ -2717,16 +2718,7 @@ function $4ce5b8892775b62d$export$67152d26d4f56ee8({
         });
       }
     }));
-    $9HbP8$effect(_p$ => {
-      var _v$3 = !!isSelected(),
-        _v$4 = `--image-count: ${image_urls()?.length ?? 0}`;
-      _v$3 !== _p$.e && _el$2.classList.toggle("selected", _p$.e = _v$3);
-      _p$.t = $9HbP8$style(_el$3, _v$4, _p$.t);
-      return _p$;
-    }, {
-      e: undefined,
-      t: undefined
-    });
+    $9HbP8$effect(() => _el$2.classList.toggle("selected", !!isSelected()));
     $9HbP8$runHydrationEvents();
     return _el$2;
   })();
@@ -2769,13 +2761,13 @@ function $4ce5b8892775b62d$export$ea41102db9bd68c3({
 }
 function $4ce5b8892775b62d$var$EmptyImage() {
   return (() => {
-    var _el$7 = $9HbP8$getNextElement($4ce5b8892775b62d$var$_tmpl$3);
-    _el$7.style.setProperty("aspect-ratio", "2");
-    $9HbP8$insert(_el$7, $9HbP8$createComponent((0, $0eb1f9e7ee46f1c2$export$9ca09caa9c849d9c), {}));
-    return _el$7;
+    var _el$9 = $9HbP8$getNextElement($4ce5b8892775b62d$var$_tmpl$4);
+    _el$9.style.setProperty("aspect-ratio", "2");
+    $9HbP8$insert(_el$9, $9HbP8$createComponent((0, $0eb1f9e7ee46f1c2$export$9ca09caa9c849d9c), {}));
+    return _el$9;
   })();
 }
-$9HbP8$delegateEvents(["click", "mouseover"]);
+$9HbP8$delegateEvents(["mouseover"]);
 var $fbbadcb080ad1d4a$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0"fill=#0f0f0f>`);
 function $fbbadcb080ad1d4a$export$8be2714ec7f169ee(props = {}) {
   return (() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.0.20",
+  "version": "4.0.22",
   "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,7 +236,7 @@
     "@babel/plugin-transform-typescript": "^7.22.9",
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "^7.22.6",
-    "@depict-ai/plp-styling": "^3.0.11",
+    "@depict-ai/plp-styling": "^3.0.12",
     "@depict-ai/types": "^5.0.5",
     "@depict-ai/utilishared": "^2.0.15",
     "solid-js": "^1.8.12"

package/server/ES10/index.cjs

@@ -95,7 +95,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447a
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $98aef9965764903d$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.0.20";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.0.22";
 
 /**
  * Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
@@ -1373,7 +1373,7 @@ let $c95c6dd9e93acd82$export$44dad306455dddf;
   DEPICT_ID["PLP_CATEGORY"] = "depict-plp-category";
 })($c95c6dd9e93acd82$export$44dad306455dddf || ($c95c6dd9e93acd82$export$44dad306455dddf = {}));
 var $29e5dbeb69da7a36$var$_tmpl$ = ["<button", ' class="back" type="button"', ">", "</button>"],
-  $29e5dbeb69da7a36$var$_tmpl$2 = ["<div", ' class="search-field"><!--$-->', '<!--/--><div class="field"><input class="', '" tabindex="0"', '><button type="button" class="clear"', ' style="', '">', "</button></div>", "</div>"];
+  $29e5dbeb69da7a36$var$_tmpl$2 = ["<div", ' class="search-field" role="search"><!--$-->', '<!--/--><div class="field"><input class="', '" tabindex="0"', '><button type="button" class="clear"', ' style="', '">', "</button></div>", "</div>"];
 function $29e5dbeb69da7a36$export$b94867ecbd698f21(_ref) {
   let {
     search_field_value_: search_field_value_,
@@ -1961,9 +1961,9 @@ function $1c819dc9d820a149$export$5646050d516e06bc(_ref) {
     }
   });
 }
-var $ce467edb5343cfcd$var$_tmpl$ = ["<div", ' class="', '" style="', '">', "</div>"];
+var $ce467edb5343cfcd$var$_tmpl$ = ["<div", ' style="', '"', ">", "</div>"];
 function $ce467edb5343cfcd$export$94026ee33dbabc26(props) {
-  return $3hooq$solidjsweb.ssr($ce467edb5343cfcd$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), "".concat($3hooq$solidjsweb.escape($3hooq$solidjsweb.escape("s-image-container", true), true)).concat($3hooq$solidjsweb.escape(props.class, true) || ""), $3hooq$solidjsweb.ssrStyle("padding-bottom:calc(calc(1 / ".concat(props.aspectRatio, ") * 100%)")), $3hooq$solidjsweb.escape(props.children));
+  return $3hooq$solidjsweb.ssr($ce467edb5343cfcd$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrStyle("padding-bottom:calc(calc(1 / ".concat(props.aspectRatio, ") * 100%)")), $3hooq$solidjsweb.ssrAttribute("class", "s-image-container" + (props.class ? " " + $3hooq$solidjsweb.escape(props.class, true) : ""), false), $3hooq$solidjsweb.escape(props.children));
 }
 let $e4e98e5080f4386e$var$browserIsBugged = false;
 function $e4e98e5080f4386e$export$2972b890694ced75(callback, _ref) {
@@ -2245,14 +2245,13 @@ var $317500f39819fba6$var$_tmpl$ = ["<svg", ' xmlns="http://www.w3.org/2000/svg"
 function $317500f39819fba6$export$9ca09caa9c849d9c() {
   return $3hooq$solidjsweb.ssr($317500f39819fba6$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey());
 }
-var $d1e7b96fb13cd1d3$var$_tmpl$ = ["<a", ">", "</a>"],
-  $d1e7b96fb13cd1d3$var$_tmpl$2 = ["<div", ' class="', '"><div class="image-part" style="', '">', "</div><!--$-->", '<!--/--><h3 class="title">', "</h3></div>"],
+var $d1e7b96fb13cd1d3$var$_tmpl$ = ["<div", ' class="images-wrapper">', "</div>"],
+  $d1e7b96fb13cd1d3$var$_tmpl$2 = ["<div", ' class="', '"><!--$-->', "<!--/--><!--$-->", '<!--/--><h3 class="title">', "</h3></div>"],
   $d1e7b96fb13cd1d3$var$_tmpl$3 = ["<div", ' class="empty-image" style="', '">', "</div>"];
 const $d1e7b96fb13cd1d3$var$aspectRatioWidthComponent = 400;
 const $d1e7b96fb13cd1d3$var$aspectRatioHeightComponent = 200;
 const $d1e7b96fb13cd1d3$var$listingSuggestionCollageAspectRatio = $d1e7b96fb13cd1d3$var$aspectRatioWidthComponent / $d1e7b96fb13cd1d3$var$aspectRatioHeightComponent;
 function $d1e7b96fb13cd1d3$export$67152d26d4f56ee8(_ref) {
-  var _image_urls$length, _image_urls;
   let {
     listing_: listing_,
     router_: router_,
@@ -2268,7 +2267,11 @@ function $d1e7b96fb13cd1d3$export$67152d26d4f56ee8(_ref) {
     var _listing_;
     return (_listing_ = listing_()) === null || _listing_ === void 0 ? void 0 : _listing_.page_url;
   }); // <- could be made reactive getter created in displayTransformers, read it in memo here since it might create computations (for example in the preview-brower), and there's no owner in the onClick handler
-  const LinkToListing = props => $3hooq$solidjsweb.ssr($d1e7b96fb13cd1d3$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey() + $3hooq$solidjsweb.ssrAttribute("tabindex", $3hooq$solidjsweb.escape(props.tabIndex_, true), false) + $3hooq$solidjsweb.ssrAttribute("href", $3hooq$solidjsweb.escape(href(), true), false), $3hooq$solidjsweb.escape(props.children));
+  const LinkToListing = props => $3hooq$solidjsweb.ssrElement("a", $3hooq$solidjsweb.mergeProps(props, {
+    get href() {
+      return href();
+    }
+  }), undefined, true);
   const image_urls = $3hooq$solidjs.createMemo(() => {
     var _listing_2;
     return (_listing_2 = listing_()) === null || _listing_2 === void 0 ? void 0 : _listing_2.image_urls;
@@ -2278,13 +2281,18 @@ function $d1e7b96fb13cd1d3$export$67152d26d4f56ee8(_ref) {
     var _listing_3;
     return (_listing_3 = listing_()) === null || _listing_3 === void 0 ? void 0 : _listing_3.ancestors;
   });
-  return $3hooq$solidjsweb.ssr($d1e7b96fb13cd1d3$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), "listing-card ".concat(isSelected() ? "selected" : ""), $3hooq$solidjsweb.ssrStyle("--image-count: ".concat((_image_urls$length = (_image_urls = image_urls()) === null || _image_urls === void 0 ? void 0 : _image_urls.length) !== null && _image_urls$length !== void 0 ? _image_urls$length : 0)), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(LinkToListing, {
-    tabIndex_: -1,
+  return $3hooq$solidjsweb.ssr($d1e7b96fb13cd1d3$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), "listing-card ".concat(isSelected() ? "selected" : ""), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(LinkToListing, {
+    "class": "image-part",
+    get style() {
+      var _image_urls$length, _image_urls;
+      return "--image-count: ".concat((_image_urls$length = (_image_urls = image_urls()) === null || _image_urls === void 0 ? void 0 : _image_urls.length) !== null && _image_urls$length !== void 0 ? _image_urls$length : 0);
+    },
+    tabIndex: -1,
     get children() {
-      return $3hooq$solidjsweb.createComponent($d1e7b96fb13cd1d3$export$ea41102db9bd68c3, {
+      return $3hooq$solidjsweb.ssr($d1e7b96fb13cd1d3$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent($d1e7b96fb13cd1d3$export$ea41102db9bd68c3, {
         image_urls_: image_urls,
         merchant_: merchant_
-      });
+      })));
     }
   })), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
     get when() {

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 _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.0.20";
+export const version = "4.0.22";
 /**
  * Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
  */
@@ -1211,7 +1211,7 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   on_listing_query_change?: (new_listing_query?: ListingQuery | undefined, old_listing_query?: ListingQuery | undefined) => void;
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
-}): import("@depict-ai/utilishared/latest").Node_Array;
+}): import("@depict-ai/utilishared").Node_Array;
 export function BreadCrumbs<T extends Display>({
   depict_category
 }: {
@@ -1351,7 +1351,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;

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.0.20";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.0.22";
 
 /**
  * Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
@@ -1288,7 +1288,7 @@ let $c3820807ac1e6fd7$export$44dad306455dddf;
   DEPICT_ID["PLP_CATEGORY"] = "depict-plp-category";
 })($c3820807ac1e6fd7$export$44dad306455dddf || ($c3820807ac1e6fd7$export$44dad306455dddf = {}));
 var $584c06c09cf4609d$var$_tmpl$ = ["<button", ' class="back" type="button"', ">", "</button>"],
-  $584c06c09cf4609d$var$_tmpl$2 = ["<div", ' class="search-field"><!--$-->', '<!--/--><div class="field"><input class="', '" tabindex="0"', '><button type="button" class="clear"', ' style="', '">', "</button></div>", "</div>"];
+  $584c06c09cf4609d$var$_tmpl$2 = ["<div", ' class="search-field" role="search"><!--$-->', '<!--/--><div class="field"><input class="', '" tabindex="0"', '><button type="button" class="clear"', ' style="', '">', "</button></div>", "</div>"];
 function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
   let {
     search_field_value_: search_field_value_,
@@ -1876,9 +1876,9 @@ function $52efc9ae4382e25a$export$5646050d516e06bc(_ref) {
     }
   });
 }
-var $801e8845d3fa3653$var$_tmpl$ = ["<div", ' class="', '" style="', '">', "</div>"];
+var $801e8845d3fa3653$var$_tmpl$ = ["<div", ' style="', '"', ">", "</div>"];
 function $801e8845d3fa3653$export$94026ee33dbabc26(props) {
-  return $b8hua$ssr($801e8845d3fa3653$var$_tmpl$, $b8hua$ssrHydrationKey(), "".concat($b8hua$escape($b8hua$escape("s-image-container", true), true)).concat($b8hua$escape(props.class, true) || ""), $b8hua$ssrStyle("padding-bottom:calc(calc(1 / ".concat(props.aspectRatio, ") * 100%)")), $b8hua$escape(props.children));
+  return $b8hua$ssr($801e8845d3fa3653$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$ssrStyle("padding-bottom:calc(calc(1 / ".concat(props.aspectRatio, ") * 100%)")), $b8hua$ssrAttribute("class", "s-image-container" + (props.class ? " " + $b8hua$escape(props.class, true) : ""), false), $b8hua$escape(props.children));
 }
 let $6db93f70c2db1486$var$browserIsBugged = false;
 function $6db93f70c2db1486$export$2972b890694ced75(callback, _ref) {
@@ -2160,14 +2160,13 @@ var $4a3ed70b3b7c60d5$var$_tmpl$ = ["<svg", ' xmlns="http://www.w3.org/2000/svg"
 function $4a3ed70b3b7c60d5$export$9ca09caa9c849d9c() {
   return $b8hua$ssr($4a3ed70b3b7c60d5$var$_tmpl$, $b8hua$ssrHydrationKey());
 }
-var $26db6925469636a4$var$_tmpl$ = ["<a", ">", "</a>"],
-  $26db6925469636a4$var$_tmpl$2 = ["<div", ' class="', '"><div class="image-part" style="', '">', "</div><!--$-->", '<!--/--><h3 class="title">', "</h3></div>"],
+var $26db6925469636a4$var$_tmpl$ = ["<div", ' class="images-wrapper">', "</div>"],
+  $26db6925469636a4$var$_tmpl$2 = ["<div", ' class="', '"><!--$-->', "<!--/--><!--$-->", '<!--/--><h3 class="title">', "</h3></div>"],
   $26db6925469636a4$var$_tmpl$3 = ["<div", ' class="empty-image" style="', '">', "</div>"];
 const $26db6925469636a4$var$aspectRatioWidthComponent = 400;
 const $26db6925469636a4$var$aspectRatioHeightComponent = 200;
 const $26db6925469636a4$var$listingSuggestionCollageAspectRatio = $26db6925469636a4$var$aspectRatioWidthComponent / $26db6925469636a4$var$aspectRatioHeightComponent;
 function $26db6925469636a4$export$67152d26d4f56ee8(_ref) {
-  var _image_urls$length, _image_urls;
   let {
     listing_: listing_,
     router_: router_,
@@ -2183,7 +2182,11 @@ function $26db6925469636a4$export$67152d26d4f56ee8(_ref) {
     var _listing_;
     return (_listing_ = listing_()) === null || _listing_ === void 0 ? void 0 : _listing_.page_url;
   }); // <- could be made reactive getter created in displayTransformers, read it in memo here since it might create computations (for example in the preview-brower), and there's no owner in the onClick handler
-  const LinkToListing = props => $b8hua$ssr($26db6925469636a4$var$_tmpl$, $b8hua$ssrHydrationKey() + $b8hua$ssrAttribute("tabindex", $b8hua$escape(props.tabIndex_, true), false) + $b8hua$ssrAttribute("href", $b8hua$escape(href(), true), false), $b8hua$escape(props.children));
+  const LinkToListing = props => $b8hua$ssrElement("a", $b8hua$mergeProps(props, {
+    get href() {
+      return href();
+    }
+  }), undefined, true);
   const image_urls = $b8hua$createMemo(() => {
     var _listing_2;
     return (_listing_2 = listing_()) === null || _listing_2 === void 0 ? void 0 : _listing_2.image_urls;
@@ -2193,13 +2196,18 @@ function $26db6925469636a4$export$67152d26d4f56ee8(_ref) {
     var _listing_3;
     return (_listing_3 = listing_()) === null || _listing_3 === void 0 ? void 0 : _listing_3.ancestors;
   });
-  return $b8hua$ssr($26db6925469636a4$var$_tmpl$2, $b8hua$ssrHydrationKey(), "listing-card ".concat(isSelected() ? "selected" : ""), $b8hua$ssrStyle("--image-count: ".concat((_image_urls$length = (_image_urls = image_urls()) === null || _image_urls === void 0 ? void 0 : _image_urls.length) !== null && _image_urls$length !== void 0 ? _image_urls$length : 0)), $b8hua$escape($b8hua$createComponent(LinkToListing, {
-    tabIndex_: -1,
+  return $b8hua$ssr($26db6925469636a4$var$_tmpl$2, $b8hua$ssrHydrationKey(), "listing-card ".concat(isSelected() ? "selected" : ""), $b8hua$escape($b8hua$createComponent(LinkToListing, {
+    "class": "image-part",
+    get style() {
+      var _image_urls$length, _image_urls;
+      return "--image-count: ".concat((_image_urls$length = (_image_urls = image_urls()) === null || _image_urls === void 0 ? void 0 : _image_urls.length) !== null && _image_urls$length !== void 0 ? _image_urls$length : 0);
+    },
+    tabIndex: -1,
     get children() {
-      return $b8hua$createComponent($26db6925469636a4$export$ea41102db9bd68c3, {
+      return $b8hua$ssr($26db6925469636a4$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$escape($b8hua$createComponent($26db6925469636a4$export$ea41102db9bd68c3, {
         image_urls_: image_urls,
         merchant_: merchant_
-      });
+      })));
     }
   })), $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
     get when() {

package/server/latest/index.cjs

@@ -89,7 +89,7 @@ $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad99
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 $parcel$export(module.exports, "SearchField", () => $c0a0659cf97e8eb2$export$316f6f283ae64765);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.0.20";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.0.22";
 
 /**
  * Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
@@ -1297,7 +1297,7 @@ let $0b6e2070a98de347$export$44dad306455dddf;
   DEPICT_ID["PLP_CATEGORY"] = "depict-plp-category";
 })($0b6e2070a98de347$export$44dad306455dddf || ($0b6e2070a98de347$export$44dad306455dddf = {}));
 var $66b8b9a9613c141d$var$_tmpl$ = ["<button", ' class="back" type="button"', ">", "</button>"],
-  $66b8b9a9613c141d$var$_tmpl$2 = ["<div", ' class="search-field"><!--$-->', '<!--/--><div class="field"><input class="', '" tabindex="0"', '><button type="button" class="clear"', ' style="', '">', "</button></div>", "</div>"];
+  $66b8b9a9613c141d$var$_tmpl$2 = ["<div", ' class="search-field" role="search"><!--$-->', '<!--/--><div class="field"><input class="', '" tabindex="0"', '><button type="button" class="clear"', ' style="', '">', "</button></div>", "</div>"];
 function $66b8b9a9613c141d$export$b94867ecbd698f21({
   search_field_value_: search_field_value_,
   input_field_ref_: input_field_ref_,
@@ -1868,9 +1868,9 @@ function $e53b2e7e632ac4cb$export$5646050d516e06bc({
     }
   });
 }
-var $93304d59a9747aa6$var$_tmpl$ = ["<div", ' class="', '" style="', '">', "</div>"];
+var $93304d59a9747aa6$var$_tmpl$ = ["<div", ' style="', '"', ">", "</div>"];
 function $93304d59a9747aa6$export$94026ee33dbabc26(props) {
-  return $5vyXB$solidjsweb.ssr($93304d59a9747aa6$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), `${$5vyXB$solidjsweb.escape($5vyXB$solidjsweb.escape("s-image-container", true), true)} ${$5vyXB$solidjsweb.escape(props.class, true) || ""}`, $5vyXB$solidjsweb.ssrStyle(`padding-bottom:calc(calc(1 / ${props.aspectRatio}) * 100%)`), $5vyXB$solidjsweb.escape(props.children));
+  return $5vyXB$solidjsweb.ssr($93304d59a9747aa6$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrStyle(`padding-bottom:calc(calc(1 / ${props.aspectRatio}) * 100%)`), $5vyXB$solidjsweb.ssrAttribute("class", "s-image-container" + (props.class ? " " + $5vyXB$solidjsweb.escape(props.class, true) : ""), false), $5vyXB$solidjsweb.escape(props.children));
 }
 let $3ea8e0af95b5b7d2$var$browserIsBugged = false;
 function $3ea8e0af95b5b7d2$export$2972b890694ced75(callback, {
@@ -2143,8 +2143,8 @@ var $3a1c4fee88fb8672$var$_tmpl$ = ["<svg", ' xmlns="http://www.w3.org/2000/svg"
 function $3a1c4fee88fb8672$export$9ca09caa9c849d9c() {
   return $5vyXB$solidjsweb.ssr($3a1c4fee88fb8672$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey());
 }
-var $1f3b5fa875714dea$var$_tmpl$ = ["<a", ">", "</a>"],
-  $1f3b5fa875714dea$var$_tmpl$2 = ["<div", ' class="', '"><div class="image-part" style="', '">', "</div><!--$-->", '<!--/--><h3 class="title">', "</h3></div>"],
+var $1f3b5fa875714dea$var$_tmpl$ = ["<div", ' class="images-wrapper">', "</div>"],
+  $1f3b5fa875714dea$var$_tmpl$2 = ["<div", ' class="', '"><!--$-->', "<!--/--><!--$-->", '<!--/--><h3 class="title">', "</h3></div>"],
   $1f3b5fa875714dea$var$_tmpl$3 = ["<div", ' class="empty-image" style="', '">', "</div>"];
 const $1f3b5fa875714dea$var$aspectRatioWidthComponent = 400;
 const $1f3b5fa875714dea$var$aspectRatioHeightComponent = 200;
@@ -2161,17 +2161,25 @@ function $1f3b5fa875714dea$export$67152d26d4f56ee8({
   selected_index_: [read_selected_index_, write_selected_index_]
 }) {
   const href = $5vyXB$solidjs.createMemo(() => listing_()?.page_url); // <- could be made reactive getter created in displayTransformers, read it in memo here since it might create computations (for example in the preview-brower), and there's no owner in the onClick handler
-  const LinkToListing = props => $5vyXB$solidjsweb.ssr($1f3b5fa875714dea$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey() + $5vyXB$solidjsweb.ssrAttribute("tabindex", $5vyXB$solidjsweb.escape(props.tabIndex_, true), false) + $5vyXB$solidjsweb.ssrAttribute("href", $5vyXB$solidjsweb.escape(href(), true), false), $5vyXB$solidjsweb.escape(props.children));
+  const LinkToListing = props => $5vyXB$solidjsweb.ssrElement("a", $5vyXB$solidjsweb.mergeProps(props, {
+    get href() {
+      return href();
+    }
+  }), undefined, true);
   const image_urls = $5vyXB$solidjs.createMemo(() => listing_()?.image_urls);
   const [isSelected, selectedDueToKeyboardNavigation] = $f144ea315d9e4caa$export$fb40a80c530e5f2b(read_selected_index_, keyboardNavigationGroupIndex_, index_);
   const crumbData = $5vyXB$solidjs.createMemo(() => listing_()?.ancestors);
-  return $5vyXB$solidjsweb.ssr($1f3b5fa875714dea$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), `listing-card ${isSelected() ? "selected" : ""}`, $5vyXB$solidjsweb.ssrStyle(`--image-count: ${image_urls()?.length ?? 0}`), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(LinkToListing, {
-    tabIndex_: -1,
+  return $5vyXB$solidjsweb.ssr($1f3b5fa875714dea$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), `listing-card ${isSelected() ? "selected" : ""}`, $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(LinkToListing, {
+    "class": "image-part",
+    get style() {
+      return `--image-count: ${image_urls()?.length ?? 0}`;
+    },
+    tabIndex: -1,
     get children() {
-      return $5vyXB$solidjsweb.createComponent($1f3b5fa875714dea$export$ea41102db9bd68c3, {
+      return $5vyXB$solidjsweb.ssr($1f3b5fa875714dea$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent($1f3b5fa875714dea$export$ea41102db9bd68c3, {
         image_urls_: image_urls,
         merchant_: merchant_
-      });
+      })));
     }
   })), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
     get when() {

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 _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.0.20";
+export const version = "4.0.22";
 /**
  * Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
  */
@@ -1211,7 +1211,7 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   on_listing_query_change?: (new_listing_query?: ListingQuery | undefined, old_listing_query?: ListingQuery | undefined) => void;
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
-}): import("@depict-ai/utilishared/latest").Node_Array;
+}): import("@depict-ai/utilishared").Node_Array;
 export function BreadCrumbs<T extends Display>({
   depict_category
 }: {
@@ -1351,7 +1351,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;

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.0.20";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.0.22";
 
 /**
  * Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
@@ -1215,7 +1215,7 @@ let $f86ba724282f6690$export$44dad306455dddf;
   DEPICT_ID["PLP_CATEGORY"] = "depict-plp-category";
 })($f86ba724282f6690$export$44dad306455dddf || ($f86ba724282f6690$export$44dad306455dddf = {}));
 var $5285d2814d0fac0c$var$_tmpl$ = ["<button", ' class="back" type="button"', ">", "</button>"],
-  $5285d2814d0fac0c$var$_tmpl$2 = ["<div", ' class="search-field"><!--$-->', '<!--/--><div class="field"><input class="', '" tabindex="0"', '><button type="button" class="clear"', ' style="', '">', "</button></div>", "</div>"];
+  $5285d2814d0fac0c$var$_tmpl$2 = ["<div", ' class="search-field" role="search"><!--$-->', '<!--/--><div class="field"><input class="', '" tabindex="0"', '><button type="button" class="clear"', ' style="', '">', "</button></div>", "</div>"];
 function $5285d2814d0fac0c$export$b94867ecbd698f21({
   search_field_value_: search_field_value_,
   input_field_ref_: input_field_ref_,
@@ -1786,9 +1786,9 @@ function $dfa5b6f7c5e421df$export$5646050d516e06bc({
     }
   });
 }
-var $f18d425032111270$var$_tmpl$ = ["<div", ' class="', '" style="', '">', "</div>"];
+var $f18d425032111270$var$_tmpl$ = ["<div", ' style="', '"', ">", "</div>"];
 function $f18d425032111270$export$94026ee33dbabc26(props) {
-  return $i7OB2$ssr($f18d425032111270$var$_tmpl$, $i7OB2$ssrHydrationKey(), `${$i7OB2$escape($i7OB2$escape("s-image-container", true), true)} ${$i7OB2$escape(props.class, true) || ""}`, $i7OB2$ssrStyle(`padding-bottom:calc(calc(1 / ${props.aspectRatio}) * 100%)`), $i7OB2$escape(props.children));
+  return $i7OB2$ssr($f18d425032111270$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$ssrStyle(`padding-bottom:calc(calc(1 / ${props.aspectRatio}) * 100%)`), $i7OB2$ssrAttribute("class", "s-image-container" + (props.class ? " " + $i7OB2$escape(props.class, true) : ""), false), $i7OB2$escape(props.children));
 }
 let $4ea56971d92eb0cd$var$browserIsBugged = false;
 function $4ea56971d92eb0cd$export$2972b890694ced75(callback, {
@@ -2061,8 +2061,8 @@ var $0eb1f9e7ee46f1c2$var$_tmpl$ = ["<svg", ' xmlns="http://www.w3.org/2000/svg"
 function $0eb1f9e7ee46f1c2$export$9ca09caa9c849d9c() {
   return $i7OB2$ssr($0eb1f9e7ee46f1c2$var$_tmpl$, $i7OB2$ssrHydrationKey());
 }
-var $4ce5b8892775b62d$var$_tmpl$ = ["<a", ">", "</a>"],
-  $4ce5b8892775b62d$var$_tmpl$2 = ["<div", ' class="', '"><div class="image-part" style="', '">', "</div><!--$-->", '<!--/--><h3 class="title">', "</h3></div>"],
+var $4ce5b8892775b62d$var$_tmpl$ = ["<div", ' class="images-wrapper">', "</div>"],
+  $4ce5b8892775b62d$var$_tmpl$2 = ["<div", ' class="', '"><!--$-->', "<!--/--><!--$-->", '<!--/--><h3 class="title">', "</h3></div>"],
   $4ce5b8892775b62d$var$_tmpl$3 = ["<div", ' class="empty-image" style="', '">', "</div>"];
 const $4ce5b8892775b62d$var$aspectRatioWidthComponent = 400;
 const $4ce5b8892775b62d$var$aspectRatioHeightComponent = 200;
@@ -2079,17 +2079,25 @@ function $4ce5b8892775b62d$export$67152d26d4f56ee8({
   selected_index_: [read_selected_index_, write_selected_index_]
 }) {
   const href = $i7OB2$createMemo(() => listing_()?.page_url); // <- could be made reactive getter created in displayTransformers, read it in memo here since it might create computations (for example in the preview-brower), and there's no owner in the onClick handler
-  const LinkToListing = props => $i7OB2$ssr($4ce5b8892775b62d$var$_tmpl$, $i7OB2$ssrHydrationKey() + $i7OB2$ssrAttribute("tabindex", $i7OB2$escape(props.tabIndex_, true), false) + $i7OB2$ssrAttribute("href", $i7OB2$escape(href(), true), false), $i7OB2$escape(props.children));
+  const LinkToListing = props => $i7OB2$ssrElement("a", $i7OB2$mergeProps(props, {
+    get href() {
+      return href();
+    }
+  }), undefined, true);
   const image_urls = $i7OB2$createMemo(() => listing_()?.image_urls);
   const [isSelected, selectedDueToKeyboardNavigation] = $f4125ce4984deee6$export$fb40a80c530e5f2b(read_selected_index_, keyboardNavigationGroupIndex_, index_);
   const crumbData = $i7OB2$createMemo(() => listing_()?.ancestors);
-  return $i7OB2$ssr($4ce5b8892775b62d$var$_tmpl$2, $i7OB2$ssrHydrationKey(), `listing-card ${isSelected() ? "selected" : ""}`, $i7OB2$ssrStyle(`--image-count: ${image_urls()?.length ?? 0}`), $i7OB2$escape($i7OB2$createComponent(LinkToListing, {
-    tabIndex_: -1,
+  return $i7OB2$ssr($4ce5b8892775b62d$var$_tmpl$2, $i7OB2$ssrHydrationKey(), `listing-card ${isSelected() ? "selected" : ""}`, $i7OB2$escape($i7OB2$createComponent(LinkToListing, {
+    "class": "image-part",
+    get style() {
+      return `--image-count: ${image_urls()?.length ?? 0}`;
+    },
+    tabIndex: -1,
     get children() {
-      return $i7OB2$createComponent($4ce5b8892775b62d$export$ea41102db9bd68c3, {
+      return $i7OB2$ssr($4ce5b8892775b62d$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape($i7OB2$createComponent($4ce5b8892775b62d$export$ea41102db9bd68c3, {
         image_urls_: image_urls,
         merchant_: merchant_
-      });
+      })));
     }
   })), $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
     get when() {