@depict-ai/ui 4.0.21 → 4.0.23

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.21";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.0.23";
 
 /**
  * Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
@@ -2816,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;
@@ -2839,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$;
   })();
@@ -2872,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 => {
@@ -2891,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;
@@ -2915,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;
@@ -2925,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;
   })();
@@ -2980,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.21";
+export const version = "4.0.23";
 /**
  * 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.21";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.0.23";
 
 /**
  * Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
@@ -2731,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;
@@ -2754,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$;
   })();
@@ -2787,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 => {
@@ -2806,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;
@@ -2830,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;
@@ -2840,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;
   })();
@@ -2895,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/README.md

@@ -9,4 +9,5 @@ Breaking changes:
 - 1.3.0 moved `depict-filter-sort-mobile-modal-container` from being a class to being an id
 - 1.4.0 Added `brand_` translation string to Locale.
 - 2.0.0 Made `enable_content_search` `true` by default. Redesigned filter counts.
-- 3.0.19 (first `latest` tagged release of version 3): Please see this [migration guide](https://docs.depict.ai/other-guides/sdk-migration-v2-v3)
+- 3.0.19 (first `latest` tagged release of version 3): Please see this [migration guide](https://docs.depict.ai/other-guides/sdk-migration-v2-v3)
+- 4.x.x: See https://docs.depict.ai/other-guides/sdk-migration-v3-v4

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.21";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.0.23";
 
 /**
  * Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
@@ -2700,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;
@@ -2719,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$;
   })();
@@ -2746,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(({
@@ -2764,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;
@@ -2787,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), {
@@ -2796,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;
   })();
@@ -2848,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.21";
+export const version = "4.0.23";
 /**
  * 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.21";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.0.23";
 
 /**
  * Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
@@ -2618,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;
@@ -2637,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$;
   })();
@@ -2664,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(({
@@ -2682,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;
@@ -2705,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), {
@@ -2714,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;
   })();
@@ -2766,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.21",
+  "version": "4.0.23",
   "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.21";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.0.23";
 
 /**
  * Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
@@ -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.21";
+export const version = "4.0.23";
 /**
  * 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.21";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.0.23";
 
 /**
  * Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
@@ -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.21";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.0.23";
 
 /**
  * Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
@@ -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.21";
+export const version = "4.0.23";
 /**
  * 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.21";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.0.23";
 
 /**
  * Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
@@ -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() {