@depict-ai/ui 4.3.0 → 4.3.1

package/ES10/index.cjs

@@ -100,7 +100,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $335c02c1241a9ca8$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $335c02c1241a9ca8$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $c10e33c4681f8c9b$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.3.0";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.3.1";
 const $5401a6698b0c0658$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -1363,7 +1363,7 @@ function $f3db423dc84bc35d$export$9d4a4b669b1929ab(props) {
     }
   }));
 }
-var $d66c35b5a6d6d926$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=img-wrapper><!$><!/><!$><!/>`),
+var $d66c35b5a6d6d926$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=img-wrapper>`),
   $d66c35b5a6d6d926$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<span class="d-price original">`),
   $d66c35b5a6d6d926$var$_tmpl$3 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=right-part><div class=text-container><span class="d-title line-clamp"></span><span class=d-price></span><!$><!/></div><!$><!/>`),
   $d66c35b5a6d6d926$var$_tmpl$4 = /*#__PURE__*/$52FdA$solidjsweb.template(`<a class=look-item><!$><!/><!$><!/>`);
@@ -1380,17 +1380,9 @@ function $d66c35b5a6d6d926$export$b73ed90f0ee50dc3(_ref) {
     const display = display_();
     return display === null || display === void 0 ? void 0 : display.variant_displays[display === null || display === void 0 ? void 0 : display.variant_index];
   });
-  const imageUrls = () => {
-    var _variantToUse;
-    return (_variantToUse = variantToUse()) === null || _variantToUse === void 0 ? void 0 : _variantToUse.image_urls;
-  };
   const imageUrl = $52FdA$solidjs.createMemo(() => {
-    var _imageUrls;
-    return (_imageUrls = imageUrls()) === null || _imageUrls === void 0 ? void 0 : _imageUrls[0];
-  });
-  const secondaryImageUrl = $52FdA$solidjs.createMemo(() => {
-    var _imageUrls2;
-    return (_imageUrls2 = imageUrls()) === null || _imageUrls2 === void 0 ? void 0 : _imageUrls2[1];
+    var _variantToUse, _variantToUse$image_u;
+    return (_variantToUse = variantToUse()) === null || _variantToUse === void 0 ? void 0 : (_variantToUse$image_u = _variantToUse.image_urls) === null || _variantToUse$image_u === void 0 ? void 0 : _variantToUse$image_u[0];
   });
   const [animationIsRunning, setAnimationIsRunning] = textFadeInAnimationRunning_;
   const [isExpandedThrottledByOurEffectRun, setIsExpandedThrottledByOurEffectRun] = $52FdA$solidjs.createSignal($52FdA$solidjs.untrack(isExpanded_));
@@ -1407,10 +1399,10 @@ function $d66c35b5a6d6d926$export$b73ed90f0ee50dc3(_ref) {
   const FavoriteButton = FavoriteButton_; // Just to get rid of the type error - TS doesn't understand <Show>
   return (() => {
     var _el$ = $52FdA$solidjsweb.getNextElement($d66c35b5a6d6d926$var$_tmpl$4),
-      _el$16 = _el$.firstChild,
-      [_el$17, _co$5] = $52FdA$solidjsweb.getNextMarker(_el$16.nextSibling),
-      _el$18 = _el$17.nextSibling,
-      [_el$19, _co$6] = $52FdA$solidjsweb.getNextMarker(_el$18.nextSibling);
+      _el$12 = _el$.firstChild,
+      [_el$13, _co$3] = $52FdA$solidjsweb.getNextMarker(_el$12.nextSibling),
+      _el$14 = _el$13.nextSibling,
+      [_el$15, _co$4] = $52FdA$solidjsweb.getNextMarker(_el$14.nextSibling);
     var _ref$ = outerRef_;
     typeof _ref$ === "function" ? $52FdA$solidjsweb.use(_ref$, _el$) : outerRef_ = _el$;
     $52FdA$solidjsweb.spread(_el$, $52FdA$solidjsweb.mergeProps(() => {
@@ -1427,11 +1419,7 @@ function $d66c35b5a6d6d926$export$b73ed90f0ee50dc3(_ref) {
         });
       },
       get children() {
-        var _el$2 = $52FdA$solidjsweb.getNextElement($d66c35b5a6d6d926$var$_tmpl$),
-          _el$3 = _el$2.firstChild,
-          [_el$4, _co$] = $52FdA$solidjsweb.getNextMarker(_el$3.nextSibling),
-          _el$5 = _el$4.nextSibling,
-          [_el$6, _co$2] = $52FdA$solidjsweb.getNextMarker(_el$5.nextSibling);
+        var _el$2 = $52FdA$solidjsweb.getNextElement($d66c35b5a6d6d926$var$_tmpl$);
         $52FdA$solidjsweb.insert(_el$2, $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
           get when() {
             return imageUrl();
@@ -1454,42 +1442,23 @@ function $d66c35b5a6d6d926$export$b73ed90f0ee50dc3(_ref) {
               }
             });
           }
-        }), _el$4, _co$);
-        $52FdA$solidjsweb.insert(_el$2, $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
-          get when() {
-            return secondaryImageUrl();
-          },
-          get children() {
-            return $52FdA$solidjsweb.createComponent((0, $f3db423dc84bc35d$export$9d4a4b669b1929ab), {
-              get src() {
-                return secondaryImageUrl();
-              },
-              get aspectRatio() {
-                return isExpanded_() ? 0.75 : 1;
-              },
-              "class": "secondary",
-              get autoAdjustAspectRatio() {
-                return isExpanded_() ? "smoothed" : false;
-              }
-            });
-          }
-        }), _el$6, _co$2);
+        }));
         return _el$2;
       }
-    }), _el$17, _co$5);
+    }), _el$13, _co$3);
     $52FdA$solidjsweb.insert(_el$, $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
       get when() {
         return (animationEffectExists() ? isExpandedThrottledByOurEffectRun() : isExpanded_()) || animationIsRunning();
       },
       get children() {
-        var _el$7 = $52FdA$solidjsweb.getNextElement($d66c35b5a6d6d926$var$_tmpl$3),
-          _el$8 = _el$7.firstChild,
-          _el$9 = _el$8.firstChild,
-          _el$10 = _el$9.nextSibling,
-          _el$12 = _el$10.nextSibling,
-          [_el$13, _co$3] = $52FdA$solidjsweb.getNextMarker(_el$12.nextSibling),
-          _el$14 = _el$8.nextSibling,
-          [_el$15, _co$4] = $52FdA$solidjsweb.getNextMarker(_el$14.nextSibling);
+        var _el$3 = $52FdA$solidjsweb.getNextElement($d66c35b5a6d6d926$var$_tmpl$3),
+          _el$4 = _el$3.firstChild,
+          _el$5 = _el$4.firstChild,
+          _el$6 = _el$5.nextSibling,
+          _el$8 = _el$6.nextSibling,
+          [_el$9, _co$] = $52FdA$solidjsweb.getNextMarker(_el$8.nextSibling),
+          _el$10 = _el$4.nextSibling,
+          [_el$11, _co$2] = $52FdA$solidjsweb.getNextMarker(_el$10.nextSibling);
         $52FdA$solidjsweb.use(element => {
           const owner = $52FdA$solidjs.getOwner();
           $52FdA$solidjs.onCleanup((0, $52FdA$depictaiutilishared.observer).onexists(element, _ref2 => {
@@ -1522,49 +1491,49 @@ function $d66c35b5a6d6d926$export$b73ed90f0ee50dc3(_ref) {
             for (const ev of ["cancel", "finish"]) textContainerAnimation.addEventListener(ev, $52FdA$depictaiutilishared.catchify(() => setAnimationIsRunning(false)));
             disconnector();
           }));
-        }, _el$7);
-        $52FdA$solidjsweb.insert(_el$9, () => {
+        }, _el$3);
+        $52FdA$solidjsweb.insert(_el$5, () => {
           var _variantToUse$title, _variantToUse5;
           return (_variantToUse$title = (_variantToUse5 = variantToUse()) === null || _variantToUse5 === void 0 ? void 0 : _variantToUse5.title) !== null && _variantToUse$title !== void 0 ? _variantToUse$title : $52FdA$solidjsweb.createComponent((0, $a7f7d416e6f61504$export$89c6019e4baa40b1), {
             height: "1em",
             width: "20ch"
           });
         });
-        $52FdA$solidjsweb.insert(_el$10, (() => {
+        $52FdA$solidjsweb.insert(_el$6, (() => {
           var _c$ = $52FdA$solidjsweb.memo(() => !!(!variantToUse() || salePrice.loading));
           return () => _c$() ? $52FdA$solidjsweb.createComponent((0, $a7f7d416e6f61504$export$89c6019e4baa40b1), {
             height: "1em",
             width: "20ch"
           }) : salePrice();
         })());
-        $52FdA$solidjsweb.insert(_el$8, $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
+        $52FdA$solidjsweb.insert(_el$4, $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
           get when() {
             return isOnSale();
           },
           get children() {
-            var _el$11 = $52FdA$solidjsweb.getNextElement($d66c35b5a6d6d926$var$_tmpl$2);
-            $52FdA$solidjsweb.insert(_el$11, (() => {
+            var _el$7 = $52FdA$solidjsweb.getNextElement($d66c35b5a6d6d926$var$_tmpl$2);
+            $52FdA$solidjsweb.insert(_el$7, (() => {
               var _c$2 = $52FdA$solidjsweb.memo(() => !!(!variantToUse() || originalPrice.loading));
               return () => _c$2() ? $52FdA$solidjsweb.createComponent((0, $a7f7d416e6f61504$export$89c6019e4baa40b1), {
                 height: "1em",
                 width: "20ch"
               }) : originalPrice();
             })());
-            return _el$11;
+            return _el$7;
           }
-        }), _el$13, _co$3);
-        $52FdA$solidjsweb.insert(_el$7, $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
+        }), _el$9, _co$);
+        $52FdA$solidjsweb.insert(_el$3, $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
           when: FavoriteButton_,
           get children() {
             return $52FdA$solidjsweb.createComponent(FavoriteButton, {
               display_: display_
             });
           }
-        }), _el$15, _co$4);
-        $52FdA$solidjsweb.effect(() => _el$10.classList.toggle("sale", !!isOnSale()));
-        return _el$7;
+        }), _el$11, _co$2);
+        $52FdA$solidjsweb.effect(() => _el$6.classList.toggle("sale", !!isOnSale()));
+        return _el$3;
       }
-    }), _el$19, _co$6);
+    }), _el$15, _co$4);
     $52FdA$solidjsweb.runHydrationEvents();
     return _el$;
   })();
@@ -1740,16 +1709,23 @@ function $47e3c3102c78121b$export$44809a8a3e867e30(_ref) {
   const us = Symbol("look");
   const container = (() => {
     var _el$ = $52FdA$solidjsweb.getNextElement($47e3c3102c78121b$var$_tmpl$);
-    $52FdA$solidjsweb.addEventListener(_el$, "click", $52FdA$depictaiutilishared.catchify(() => setUserWantsExpanded(prev => !prev)), true);
+    $52FdA$solidjsweb.addEventListener(_el$, "click", $52FdA$depictaiutilishared.catchify(_ref2 => {
+      let {
+        target: target
+      } = _ref2;
+      // Don't toggle when clicking on the links
+      if (target.matches("a") || target.closest("a")) return;
+      setUserWantsExpanded(prev => !prev);
+    }), true);
     _el$.classList.toggle("placeholder", !!!display_);
     $52FdA$solidjsweb.runHydrationEvents();
     return _el$;
   })();
   const containerWidth_ = $c387d7f1d9fb66c0$export$ebdc3711f7e02ccd(container);
-  const clickHandler = $52FdA$depictaiutilishared.catchify(_ref2 => {
+  const clickHandler = $52FdA$depictaiutilishared.catchify(_ref3 => {
     let {
       target: target
-    } = _ref2;
+    } = _ref3;
     if (target !== container && !container.contains(target))
       // When clicking outside the look, close it
       setUserWantsExpanded(false);

package/ES10/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.3.0";
+export const version = "4.3.1";
 declare const LISTING_ID = "listingId";
 declare const EXTERNAL_ID = "externalId";
 type ScrollRestorationData = {
@@ -1377,7 +1377,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;
@@ -1455,5 +1455,5 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
   filterModalParent_?: HTMLElement | ShadowRoot;
-}): import("@depict-ai/utilishared/latest").Node_Array;
+}): import("@depict-ai/utilishared").Node_Array;
 export type { SearchFilter } from "@depict-ai/types/api/SearchRequestV3";

package/ES10/index.js

@@ -10,7 +10,7 @@ import { createStore as $8tj43$createStore, reconcile as $8tj43$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "4.3.0";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.3.1";
 const $a9c7ba6087881ac2$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -1273,7 +1273,7 @@ function $98688279b9059f50$export$9d4a4b669b1929ab(props) {
     }
   }));
 }
-var $0c5b1686f971e5e7$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div class=img-wrapper><!$><!/><!$><!/>`),
+var $0c5b1686f971e5e7$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div class=img-wrapper>`),
   $0c5b1686f971e5e7$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<span class="d-price original">`),
   $0c5b1686f971e5e7$var$_tmpl$3 = /*#__PURE__*/$8tj43$template(`<div class=right-part><div class=text-container><span class="d-title line-clamp"></span><span class=d-price></span><!$><!/></div><!$><!/>`),
   $0c5b1686f971e5e7$var$_tmpl$4 = /*#__PURE__*/$8tj43$template(`<a class=look-item><!$><!/><!$><!/>`);
@@ -1290,17 +1290,9 @@ function $0c5b1686f971e5e7$export$b73ed90f0ee50dc3(_ref) {
     const display = display_();
     return display === null || display === void 0 ? void 0 : display.variant_displays[display === null || display === void 0 ? void 0 : display.variant_index];
   });
-  const imageUrls = () => {
-    var _variantToUse;
-    return (_variantToUse = variantToUse()) === null || _variantToUse === void 0 ? void 0 : _variantToUse.image_urls;
-  };
   const imageUrl = $8tj43$createMemo(() => {
-    var _imageUrls;
-    return (_imageUrls = imageUrls()) === null || _imageUrls === void 0 ? void 0 : _imageUrls[0];
-  });
-  const secondaryImageUrl = $8tj43$createMemo(() => {
-    var _imageUrls2;
-    return (_imageUrls2 = imageUrls()) === null || _imageUrls2 === void 0 ? void 0 : _imageUrls2[1];
+    var _variantToUse, _variantToUse$image_u;
+    return (_variantToUse = variantToUse()) === null || _variantToUse === void 0 ? void 0 : (_variantToUse$image_u = _variantToUse.image_urls) === null || _variantToUse$image_u === void 0 ? void 0 : _variantToUse$image_u[0];
   });
   const [animationIsRunning, setAnimationIsRunning] = textFadeInAnimationRunning_;
   const [isExpandedThrottledByOurEffectRun, setIsExpandedThrottledByOurEffectRun] = $8tj43$createSignal($8tj43$untrack(isExpanded_));
@@ -1317,10 +1309,10 @@ function $0c5b1686f971e5e7$export$b73ed90f0ee50dc3(_ref) {
   const FavoriteButton = FavoriteButton_; // Just to get rid of the type error - TS doesn't understand <Show>
   return (() => {
     var _el$ = $8tj43$getNextElement($0c5b1686f971e5e7$var$_tmpl$4),
-      _el$16 = _el$.firstChild,
-      [_el$17, _co$5] = $8tj43$getNextMarker(_el$16.nextSibling),
-      _el$18 = _el$17.nextSibling,
-      [_el$19, _co$6] = $8tj43$getNextMarker(_el$18.nextSibling);
+      _el$12 = _el$.firstChild,
+      [_el$13, _co$3] = $8tj43$getNextMarker(_el$12.nextSibling),
+      _el$14 = _el$13.nextSibling,
+      [_el$15, _co$4] = $8tj43$getNextMarker(_el$14.nextSibling);
     var _ref$ = outerRef_;
     typeof _ref$ === "function" ? $8tj43$use(_ref$, _el$) : outerRef_ = _el$;
     $8tj43$spread(_el$, $8tj43$mergeProps(() => {
@@ -1337,11 +1329,7 @@ function $0c5b1686f971e5e7$export$b73ed90f0ee50dc3(_ref) {
         });
       },
       get children() {
-        var _el$2 = $8tj43$getNextElement($0c5b1686f971e5e7$var$_tmpl$),
-          _el$3 = _el$2.firstChild,
-          [_el$4, _co$] = $8tj43$getNextMarker(_el$3.nextSibling),
-          _el$5 = _el$4.nextSibling,
-          [_el$6, _co$2] = $8tj43$getNextMarker(_el$5.nextSibling);
+        var _el$2 = $8tj43$getNextElement($0c5b1686f971e5e7$var$_tmpl$);
         $8tj43$insert(_el$2, $8tj43$createComponent((0, $8tj43$Show), {
           get when() {
             return imageUrl();
@@ -1364,42 +1352,23 @@ function $0c5b1686f971e5e7$export$b73ed90f0ee50dc3(_ref) {
               }
             });
           }
-        }), _el$4, _co$);
-        $8tj43$insert(_el$2, $8tj43$createComponent((0, $8tj43$Show), {
-          get when() {
-            return secondaryImageUrl();
-          },
-          get children() {
-            return $8tj43$createComponent((0, $98688279b9059f50$export$9d4a4b669b1929ab), {
-              get src() {
-                return secondaryImageUrl();
-              },
-              get aspectRatio() {
-                return isExpanded_() ? 0.75 : 1;
-              },
-              "class": "secondary",
-              get autoAdjustAspectRatio() {
-                return isExpanded_() ? "smoothed" : false;
-              }
-            });
-          }
-        }), _el$6, _co$2);
+        }));
         return _el$2;
       }
-    }), _el$17, _co$5);
+    }), _el$13, _co$3);
     $8tj43$insert(_el$, $8tj43$createComponent((0, $8tj43$Show), {
       get when() {
         return (animationEffectExists() ? isExpandedThrottledByOurEffectRun() : isExpanded_()) || animationIsRunning();
       },
       get children() {
-        var _el$7 = $8tj43$getNextElement($0c5b1686f971e5e7$var$_tmpl$3),
-          _el$8 = _el$7.firstChild,
-          _el$9 = _el$8.firstChild,
-          _el$10 = _el$9.nextSibling,
-          _el$12 = _el$10.nextSibling,
-          [_el$13, _co$3] = $8tj43$getNextMarker(_el$12.nextSibling),
-          _el$14 = _el$8.nextSibling,
-          [_el$15, _co$4] = $8tj43$getNextMarker(_el$14.nextSibling);
+        var _el$3 = $8tj43$getNextElement($0c5b1686f971e5e7$var$_tmpl$3),
+          _el$4 = _el$3.firstChild,
+          _el$5 = _el$4.firstChild,
+          _el$6 = _el$5.nextSibling,
+          _el$8 = _el$6.nextSibling,
+          [_el$9, _co$] = $8tj43$getNextMarker(_el$8.nextSibling),
+          _el$10 = _el$4.nextSibling,
+          [_el$11, _co$2] = $8tj43$getNextMarker(_el$10.nextSibling);
         $8tj43$use(element => {
           const owner = $8tj43$getOwner();
           $8tj43$onCleanup((0, $8tj43$observer).onexists(element, _ref2 => {
@@ -1432,49 +1401,49 @@ function $0c5b1686f971e5e7$export$b73ed90f0ee50dc3(_ref) {
             for (const ev of ["cancel", "finish"]) textContainerAnimation.addEventListener(ev, $8tj43$catchify(() => setAnimationIsRunning(false)));
             disconnector();
           }));
-        }, _el$7);
-        $8tj43$insert(_el$9, () => {
+        }, _el$3);
+        $8tj43$insert(_el$5, () => {
           var _variantToUse$title, _variantToUse5;
           return (_variantToUse$title = (_variantToUse5 = variantToUse()) === null || _variantToUse5 === void 0 ? void 0 : _variantToUse5.title) !== null && _variantToUse$title !== void 0 ? _variantToUse$title : $8tj43$createComponent((0, $ceafb6fb91c6f394$export$89c6019e4baa40b1), {
             height: "1em",
             width: "20ch"
           });
         });
-        $8tj43$insert(_el$10, (() => {
+        $8tj43$insert(_el$6, (() => {
           var _c$ = $8tj43$memo(() => !!(!variantToUse() || salePrice.loading));
           return () => _c$() ? $8tj43$createComponent((0, $ceafb6fb91c6f394$export$89c6019e4baa40b1), {
             height: "1em",
             width: "20ch"
           }) : salePrice();
         })());
-        $8tj43$insert(_el$8, $8tj43$createComponent((0, $8tj43$Show), {
+        $8tj43$insert(_el$4, $8tj43$createComponent((0, $8tj43$Show), {
           get when() {
             return isOnSale();
           },
           get children() {
-            var _el$11 = $8tj43$getNextElement($0c5b1686f971e5e7$var$_tmpl$2);
-            $8tj43$insert(_el$11, (() => {
+            var _el$7 = $8tj43$getNextElement($0c5b1686f971e5e7$var$_tmpl$2);
+            $8tj43$insert(_el$7, (() => {
               var _c$2 = $8tj43$memo(() => !!(!variantToUse() || originalPrice.loading));
               return () => _c$2() ? $8tj43$createComponent((0, $ceafb6fb91c6f394$export$89c6019e4baa40b1), {
                 height: "1em",
                 width: "20ch"
               }) : originalPrice();
             })());
-            return _el$11;
+            return _el$7;
           }
-        }), _el$13, _co$3);
-        $8tj43$insert(_el$7, $8tj43$createComponent((0, $8tj43$Show), {
+        }), _el$9, _co$);
+        $8tj43$insert(_el$3, $8tj43$createComponent((0, $8tj43$Show), {
           when: FavoriteButton_,
           get children() {
             return $8tj43$createComponent(FavoriteButton, {
               display_: display_
             });
           }
-        }), _el$15, _co$4);
-        $8tj43$effect(() => _el$10.classList.toggle("sale", !!isOnSale()));
-        return _el$7;
+        }), _el$11, _co$2);
+        $8tj43$effect(() => _el$6.classList.toggle("sale", !!isOnSale()));
+        return _el$3;
       }
-    }), _el$19, _co$6);
+    }), _el$15, _co$4);
     $8tj43$runHydrationEvents();
     return _el$;
   })();
@@ -1650,16 +1619,23 @@ function $697d8713dc82b9ab$export$44809a8a3e867e30(_ref) {
   const us = Symbol("look");
   const container = (() => {
     var _el$ = $8tj43$getNextElement($697d8713dc82b9ab$var$_tmpl$);
-    $8tj43$addEventListener(_el$, "click", $8tj43$catchify(() => setUserWantsExpanded(prev => !prev)), true);
+    $8tj43$addEventListener(_el$, "click", $8tj43$catchify(_ref2 => {
+      let {
+        target: target
+      } = _ref2;
+      // Don't toggle when clicking on the links
+      if (target.matches("a") || target.closest("a")) return;
+      setUserWantsExpanded(prev => !prev);
+    }), true);
     _el$.classList.toggle("placeholder", !!!display_);
     $8tj43$runHydrationEvents();
     return _el$;
   })();
   const containerWidth_ = $fc830a7ee59416ef$export$ebdc3711f7e02ccd(container);
-  const clickHandler = $8tj43$catchify(_ref2 => {
+  const clickHandler = $8tj43$catchify(_ref3 => {
     let {
       target: target
-    } = _ref2;
+    } = _ref3;
     if (target !== container && !container.contains(target))
       // When clicking outside the look, close it
       setUserWantsExpanded(false);

package/latest/index.cjs

@@ -94,7 +94,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $1f4925833f07df29$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $1f4925833f07df29$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $14f289047713d67a$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.3.0";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.3.1";
 const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -1298,7 +1298,7 @@ function $d212a67662c5cf38$export$9d4a4b669b1929ab(props) {
     }
   }));
 }
-var $1ae437d7d388a66e$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=img-wrapper><!$><!/><!$><!/>`),
+var $1ae437d7d388a66e$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=img-wrapper>`),
   $1ae437d7d388a66e$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<span class="d-price original">`),
   $1ae437d7d388a66e$var$_tmpl$3 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class=right-part><div class=text-container><span class="d-title line-clamp"></span><span class=d-price></span><!$><!/></div><!$><!/>`),
   $1ae437d7d388a66e$var$_tmpl$4 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<a class=look-item><!$><!/><!$><!/>`);
@@ -1314,9 +1314,7 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
     const display = display_();
     return display?.variant_displays[display?.variant_index];
   });
-  const imageUrls = () => variantToUse()?.image_urls;
-  const imageUrl = $gVhhF$solidjs.createMemo(() => imageUrls()?.[0]);
-  const secondaryImageUrl = $gVhhF$solidjs.createMemo(() => imageUrls()?.[1]);
+  const imageUrl = $gVhhF$solidjs.createMemo(() => variantToUse()?.image_urls?.[0]);
   const [animationIsRunning, setAnimationIsRunning] = textFadeInAnimationRunning_;
   const [isExpandedThrottledByOurEffectRun, setIsExpandedThrottledByOurEffectRun] = $gVhhF$solidjs.createSignal($gVhhF$solidjs.untrack(isExpanded_));
   const [animationEffectExists, setAnimationEffectExists] = $gVhhF$solidjs.createSignal(false);
@@ -1326,10 +1324,10 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
   const FavoriteButton = FavoriteButton_; // Just to get rid of the type error - TS doesn't understand <Show>
   return (() => {
     var _el$ = $gVhhF$solidjsweb.getNextElement($1ae437d7d388a66e$var$_tmpl$4),
-      _el$16 = _el$.firstChild,
-      [_el$17, _co$5] = $gVhhF$solidjsweb.getNextMarker(_el$16.nextSibling),
-      _el$18 = _el$17.nextSibling,
-      [_el$19, _co$6] = $gVhhF$solidjsweb.getNextMarker(_el$18.nextSibling);
+      _el$12 = _el$.firstChild,
+      [_el$13, _co$3] = $gVhhF$solidjsweb.getNextMarker(_el$12.nextSibling),
+      _el$14 = _el$13.nextSibling,
+      [_el$15, _co$4] = $gVhhF$solidjsweb.getNextMarker(_el$14.nextSibling);
     var _ref$ = outerRef_;
     typeof _ref$ === "function" ? $gVhhF$solidjsweb.use(_ref$, _el$) : outerRef_ = _el$;
     $gVhhF$solidjsweb.spread(_el$, $gVhhF$solidjsweb.mergeProps(() => isExpanded_() && !animationIsRunning() ? {
@@ -1343,11 +1341,7 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
         });
       },
       get children() {
-        var _el$2 = $gVhhF$solidjsweb.getNextElement($1ae437d7d388a66e$var$_tmpl$),
-          _el$3 = _el$2.firstChild,
-          [_el$4, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$3.nextSibling),
-          _el$5 = _el$4.nextSibling,
-          [_el$6, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$5.nextSibling);
+        var _el$2 = $gVhhF$solidjsweb.getNextElement($1ae437d7d388a66e$var$_tmpl$);
         $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
           get when() {
             return imageUrl();
@@ -1370,42 +1364,23 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
               }
             });
           }
-        }), _el$4, _co$);
-        $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
-          get when() {
-            return secondaryImageUrl();
-          },
-          get children() {
-            return $gVhhF$solidjsweb.createComponent((0, $d212a67662c5cf38$export$9d4a4b669b1929ab), {
-              get src() {
-                return secondaryImageUrl();
-              },
-              get aspectRatio() {
-                return isExpanded_() ? 0.75 : 1;
-              },
-              "class": "secondary",
-              get autoAdjustAspectRatio() {
-                return isExpanded_() ? "smoothed" : false;
-              }
-            });
-          }
-        }), _el$6, _co$2);
+        }));
         return _el$2;
       }
-    }), _el$17, _co$5);
+    }), _el$13, _co$3);
     $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
       get when() {
         return (animationEffectExists() ? isExpandedThrottledByOurEffectRun() : isExpanded_()) || animationIsRunning();
       },
       get children() {
-        var _el$7 = $gVhhF$solidjsweb.getNextElement($1ae437d7d388a66e$var$_tmpl$3),
-          _el$8 = _el$7.firstChild,
-          _el$9 = _el$8.firstChild,
-          _el$10 = _el$9.nextSibling,
-          _el$12 = _el$10.nextSibling,
-          [_el$13, _co$3] = $gVhhF$solidjsweb.getNextMarker(_el$12.nextSibling),
-          _el$14 = _el$8.nextSibling,
-          [_el$15, _co$4] = $gVhhF$solidjsweb.getNextMarker(_el$14.nextSibling);
+        var _el$3 = $gVhhF$solidjsweb.getNextElement($1ae437d7d388a66e$var$_tmpl$3),
+          _el$4 = _el$3.firstChild,
+          _el$5 = _el$4.firstChild,
+          _el$6 = _el$5.nextSibling,
+          _el$8 = _el$6.nextSibling,
+          [_el$9, _co$] = $gVhhF$solidjsweb.getNextMarker(_el$8.nextSibling),
+          _el$10 = _el$4.nextSibling,
+          [_el$11, _co$2] = $gVhhF$solidjsweb.getNextMarker(_el$10.nextSibling);
         $gVhhF$solidjsweb.use(element => {
           const owner = $gVhhF$solidjs.getOwner();
           $gVhhF$solidjs.onCleanup((0, $gVhhF$depictaiutilishared.observer).onexists(element, ({
@@ -1437,46 +1412,46 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
             for (const ev of ["cancel", "finish"]) textContainerAnimation.addEventListener(ev, $gVhhF$depictaiutilishared.catchify(() => setAnimationIsRunning(false)));
             disconnector();
           }));
-        }, _el$7);
-        $gVhhF$solidjsweb.insert(_el$9, () => variantToUse()?.title ?? $gVhhF$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
+        }, _el$3);
+        $gVhhF$solidjsweb.insert(_el$5, () => variantToUse()?.title ?? $gVhhF$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
           height: "1em",
           width: "20ch"
         }));
-        $gVhhF$solidjsweb.insert(_el$10, (() => {
+        $gVhhF$solidjsweb.insert(_el$6, (() => {
           var _c$ = $gVhhF$solidjsweb.memo(() => !!(!variantToUse() || salePrice.loading));
           return () => _c$() ? $gVhhF$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
             height: "1em",
             width: "20ch"
           }) : salePrice();
         })());
-        $gVhhF$solidjsweb.insert(_el$8, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+        $gVhhF$solidjsweb.insert(_el$4, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
           get when() {
             return isOnSale();
           },
           get children() {
-            var _el$11 = $gVhhF$solidjsweb.getNextElement($1ae437d7d388a66e$var$_tmpl$2);
-            $gVhhF$solidjsweb.insert(_el$11, (() => {
+            var _el$7 = $gVhhF$solidjsweb.getNextElement($1ae437d7d388a66e$var$_tmpl$2);
+            $gVhhF$solidjsweb.insert(_el$7, (() => {
               var _c$2 = $gVhhF$solidjsweb.memo(() => !!(!variantToUse() || originalPrice.loading));
               return () => _c$2() ? $gVhhF$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
                 height: "1em",
                 width: "20ch"
               }) : originalPrice();
             })());
-            return _el$11;
+            return _el$7;
           }
-        }), _el$13, _co$3);
-        $gVhhF$solidjsweb.insert(_el$7, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+        }), _el$9, _co$);
+        $gVhhF$solidjsweb.insert(_el$3, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
           when: FavoriteButton_,
           get children() {
             return $gVhhF$solidjsweb.createComponent(FavoriteButton, {
               display_: display_
             });
           }
-        }), _el$15, _co$4);
-        $gVhhF$solidjsweb.effect(() => _el$10.classList.toggle("sale", !!isOnSale()));
-        return _el$7;
+        }), _el$11, _co$2);
+        $gVhhF$solidjsweb.effect(() => _el$6.classList.toggle("sale", !!isOnSale()));
+        return _el$3;
       }
-    }), _el$19, _co$6);
+    }), _el$15, _co$4);
     $gVhhF$solidjsweb.runHydrationEvents();
     return _el$;
   })();
@@ -1650,7 +1625,13 @@ function $ad882bbe664dbd53$export$44809a8a3e867e30({
   const us = Symbol("look");
   const container = (() => {
     var _el$ = $gVhhF$solidjsweb.getNextElement($ad882bbe664dbd53$var$_tmpl$);
-    $gVhhF$solidjsweb.addEventListener(_el$, "click", $gVhhF$depictaiutilishared.catchify(() => setUserWantsExpanded(prev => !prev)), true);
+    $gVhhF$solidjsweb.addEventListener(_el$, "click", $gVhhF$depictaiutilishared.catchify(({
+      target: target
+    }) => {
+      // Don't toggle when clicking on the links
+      if (target.matches("a") || target.closest("a")) return;
+      setUserWantsExpanded(prev => !prev);
+    }), true);
     _el$.classList.toggle("placeholder", !!!display_);
     $gVhhF$solidjsweb.runHydrationEvents();
     return _el$;

package/latest/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.3.0";
+export const version = "4.3.1";
 declare const LISTING_ID = "listingId";
 declare const EXTERNAL_ID = "externalId";
 type ScrollRestorationData = {
@@ -1377,7 +1377,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;
@@ -1455,5 +1455,5 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
   filterModalParent_?: HTMLElement | ShadowRoot;
-}): import("@depict-ai/utilishared/latest").Node_Array;
+}): import("@depict-ai/utilishared").Node_Array;
 export type { SearchFilter } from "@depict-ai/types/api/SearchRequestV3";

package/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.3.0";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.3.1";
 const $b5cccc8ee7d24677$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -1211,7 +1211,7 @@ function $70bb27cc6be01fc7$export$9d4a4b669b1929ab(props) {
     }
   }));
 }
-var $5a6c386e1bde5665$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=img-wrapper><!$><!/><!$><!/>`),
+var $5a6c386e1bde5665$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div class=img-wrapper>`),
   $5a6c386e1bde5665$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<span class="d-price original">`),
   $5a6c386e1bde5665$var$_tmpl$3 = /*#__PURE__*/$9HbP8$template(`<div class=right-part><div class=text-container><span class="d-title line-clamp"></span><span class=d-price></span><!$><!/></div><!$><!/>`),
   $5a6c386e1bde5665$var$_tmpl$4 = /*#__PURE__*/$9HbP8$template(`<a class=look-item><!$><!/><!$><!/>`);
@@ -1227,9 +1227,7 @@ function $5a6c386e1bde5665$export$b73ed90f0ee50dc3({
     const display = display_();
     return display?.variant_displays[display?.variant_index];
   });
-  const imageUrls = () => variantToUse()?.image_urls;
-  const imageUrl = $9HbP8$createMemo(() => imageUrls()?.[0]);
-  const secondaryImageUrl = $9HbP8$createMemo(() => imageUrls()?.[1]);
+  const imageUrl = $9HbP8$createMemo(() => variantToUse()?.image_urls?.[0]);
   const [animationIsRunning, setAnimationIsRunning] = textFadeInAnimationRunning_;
   const [isExpandedThrottledByOurEffectRun, setIsExpandedThrottledByOurEffectRun] = $9HbP8$createSignal($9HbP8$untrack(isExpanded_));
   const [animationEffectExists, setAnimationEffectExists] = $9HbP8$createSignal(false);
@@ -1239,10 +1237,10 @@ function $5a6c386e1bde5665$export$b73ed90f0ee50dc3({
   const FavoriteButton = FavoriteButton_; // Just to get rid of the type error - TS doesn't understand <Show>
   return (() => {
     var _el$ = $9HbP8$getNextElement($5a6c386e1bde5665$var$_tmpl$4),
-      _el$16 = _el$.firstChild,
-      [_el$17, _co$5] = $9HbP8$getNextMarker(_el$16.nextSibling),
-      _el$18 = _el$17.nextSibling,
-      [_el$19, _co$6] = $9HbP8$getNextMarker(_el$18.nextSibling);
+      _el$12 = _el$.firstChild,
+      [_el$13, _co$3] = $9HbP8$getNextMarker(_el$12.nextSibling),
+      _el$14 = _el$13.nextSibling,
+      [_el$15, _co$4] = $9HbP8$getNextMarker(_el$14.nextSibling);
     var _ref$ = outerRef_;
     typeof _ref$ === "function" ? $9HbP8$use(_ref$, _el$) : outerRef_ = _el$;
     $9HbP8$spread(_el$, $9HbP8$mergeProps(() => isExpanded_() && !animationIsRunning() ? {
@@ -1256,11 +1254,7 @@ function $5a6c386e1bde5665$export$b73ed90f0ee50dc3({
         });
       },
       get children() {
-        var _el$2 = $9HbP8$getNextElement($5a6c386e1bde5665$var$_tmpl$),
-          _el$3 = _el$2.firstChild,
-          [_el$4, _co$] = $9HbP8$getNextMarker(_el$3.nextSibling),
-          _el$5 = _el$4.nextSibling,
-          [_el$6, _co$2] = $9HbP8$getNextMarker(_el$5.nextSibling);
+        var _el$2 = $9HbP8$getNextElement($5a6c386e1bde5665$var$_tmpl$);
         $9HbP8$insert(_el$2, $9HbP8$createComponent((0, $9HbP8$Show), {
           get when() {
             return imageUrl();
@@ -1283,42 +1277,23 @@ function $5a6c386e1bde5665$export$b73ed90f0ee50dc3({
               }
             });
           }
-        }), _el$4, _co$);
-        $9HbP8$insert(_el$2, $9HbP8$createComponent((0, $9HbP8$Show), {
-          get when() {
-            return secondaryImageUrl();
-          },
-          get children() {
-            return $9HbP8$createComponent((0, $70bb27cc6be01fc7$export$9d4a4b669b1929ab), {
-              get src() {
-                return secondaryImageUrl();
-              },
-              get aspectRatio() {
-                return isExpanded_() ? 0.75 : 1;
-              },
-              "class": "secondary",
-              get autoAdjustAspectRatio() {
-                return isExpanded_() ? "smoothed" : false;
-              }
-            });
-          }
-        }), _el$6, _co$2);
+        }));
         return _el$2;
       }
-    }), _el$17, _co$5);
+    }), _el$13, _co$3);
     $9HbP8$insert(_el$, $9HbP8$createComponent((0, $9HbP8$Show), {
       get when() {
         return (animationEffectExists() ? isExpandedThrottledByOurEffectRun() : isExpanded_()) || animationIsRunning();
       },
       get children() {
-        var _el$7 = $9HbP8$getNextElement($5a6c386e1bde5665$var$_tmpl$3),
-          _el$8 = _el$7.firstChild,
-          _el$9 = _el$8.firstChild,
-          _el$10 = _el$9.nextSibling,
-          _el$12 = _el$10.nextSibling,
-          [_el$13, _co$3] = $9HbP8$getNextMarker(_el$12.nextSibling),
-          _el$14 = _el$8.nextSibling,
-          [_el$15, _co$4] = $9HbP8$getNextMarker(_el$14.nextSibling);
+        var _el$3 = $9HbP8$getNextElement($5a6c386e1bde5665$var$_tmpl$3),
+          _el$4 = _el$3.firstChild,
+          _el$5 = _el$4.firstChild,
+          _el$6 = _el$5.nextSibling,
+          _el$8 = _el$6.nextSibling,
+          [_el$9, _co$] = $9HbP8$getNextMarker(_el$8.nextSibling),
+          _el$10 = _el$4.nextSibling,
+          [_el$11, _co$2] = $9HbP8$getNextMarker(_el$10.nextSibling);
         $9HbP8$use(element => {
           const owner = $9HbP8$getOwner();
           $9HbP8$onCleanup((0, $9HbP8$observer).onexists(element, ({
@@ -1350,46 +1325,46 @@ function $5a6c386e1bde5665$export$b73ed90f0ee50dc3({
             for (const ev of ["cancel", "finish"]) textContainerAnimation.addEventListener(ev, $9HbP8$catchify(() => setAnimationIsRunning(false)));
             disconnector();
           }));
-        }, _el$7);
-        $9HbP8$insert(_el$9, () => variantToUse()?.title ?? $9HbP8$createComponent((0, $d134eae24341b4a1$export$89c6019e4baa40b1), {
+        }, _el$3);
+        $9HbP8$insert(_el$5, () => variantToUse()?.title ?? $9HbP8$createComponent((0, $d134eae24341b4a1$export$89c6019e4baa40b1), {
           height: "1em",
           width: "20ch"
         }));
-        $9HbP8$insert(_el$10, (() => {
+        $9HbP8$insert(_el$6, (() => {
           var _c$ = $9HbP8$memo(() => !!(!variantToUse() || salePrice.loading));
           return () => _c$() ? $9HbP8$createComponent((0, $d134eae24341b4a1$export$89c6019e4baa40b1), {
             height: "1em",
             width: "20ch"
           }) : salePrice();
         })());
-        $9HbP8$insert(_el$8, $9HbP8$createComponent((0, $9HbP8$Show), {
+        $9HbP8$insert(_el$4, $9HbP8$createComponent((0, $9HbP8$Show), {
           get when() {
             return isOnSale();
           },
           get children() {
-            var _el$11 = $9HbP8$getNextElement($5a6c386e1bde5665$var$_tmpl$2);
-            $9HbP8$insert(_el$11, (() => {
+            var _el$7 = $9HbP8$getNextElement($5a6c386e1bde5665$var$_tmpl$2);
+            $9HbP8$insert(_el$7, (() => {
               var _c$2 = $9HbP8$memo(() => !!(!variantToUse() || originalPrice.loading));
               return () => _c$2() ? $9HbP8$createComponent((0, $d134eae24341b4a1$export$89c6019e4baa40b1), {
                 height: "1em",
                 width: "20ch"
               }) : originalPrice();
             })());
-            return _el$11;
+            return _el$7;
           }
-        }), _el$13, _co$3);
-        $9HbP8$insert(_el$7, $9HbP8$createComponent((0, $9HbP8$Show), {
+        }), _el$9, _co$);
+        $9HbP8$insert(_el$3, $9HbP8$createComponent((0, $9HbP8$Show), {
           when: FavoriteButton_,
           get children() {
             return $9HbP8$createComponent(FavoriteButton, {
               display_: display_
             });
           }
-        }), _el$15, _co$4);
-        $9HbP8$effect(() => _el$10.classList.toggle("sale", !!isOnSale()));
-        return _el$7;
+        }), _el$11, _co$2);
+        $9HbP8$effect(() => _el$6.classList.toggle("sale", !!isOnSale()));
+        return _el$3;
       }
-    }), _el$19, _co$6);
+    }), _el$15, _co$4);
     $9HbP8$runHydrationEvents();
     return _el$;
   })();
@@ -1563,7 +1538,13 @@ function $28ee4f7db3cc44b8$export$44809a8a3e867e30({
   const us = Symbol("look");
   const container = (() => {
     var _el$ = $9HbP8$getNextElement($28ee4f7db3cc44b8$var$_tmpl$);
-    $9HbP8$addEventListener(_el$, "click", $9HbP8$catchify(() => setUserWantsExpanded(prev => !prev)), true);
+    $9HbP8$addEventListener(_el$, "click", $9HbP8$catchify(({
+      target: target
+    }) => {
+      // Don't toggle when clicking on the links
+      if (target.matches("a") || target.closest("a")) return;
+      setUserWantsExpanded(prev => !prev);
+    }), true);
     _el$.classList.toggle("placeholder", !!!display_);
     $9HbP8$runHydrationEvents();
     return _el$;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.3.0",
+  "version": "4.3.1",
   "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.1.1",
+    "@depict-ai/plp-styling": "^3.1.3",
     "@depict-ai/types": "^5.1.1",
     "@depict-ai/utilishared": "^2.1.1",
     "solid-js": "^1.8.12"

package/server/ES10/index.cjs

@@ -100,7 +100,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $335c02c1241a9ca8$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $335c02c1241a9ca8$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $c10e33c4681f8c9b$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.3.0";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.3.1";
 const $5401a6698b0c0658$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -1251,7 +1251,7 @@ function $f3db423dc84bc35d$export$9d4a4b669b1929ab(props) {
     }
   }));
 }
-var $d66c35b5a6d6d926$var$_tmpl$ = ["<div", ' class="img-wrapper"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"],
+var $d66c35b5a6d6d926$var$_tmpl$ = ["<div", ' class="img-wrapper">', "</div>"],
   $d66c35b5a6d6d926$var$_tmpl$2 = ["<span", ' class="d-price original">', "</span>"],
   $d66c35b5a6d6d926$var$_tmpl$3 = ["<div", ' class="right-part"><div class="text-container"><span class="d-title line-clamp">', '</span><span class="', '">', "</span><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div>"];
 function $d66c35b5a6d6d926$export$b73ed90f0ee50dc3(_ref) {
@@ -1267,17 +1267,9 @@ function $d66c35b5a6d6d926$export$b73ed90f0ee50dc3(_ref) {
     const display = display_();
     return display === null || display === void 0 ? void 0 : display.variant_displays[display === null || display === void 0 ? void 0 : display.variant_index];
   });
-  const imageUrls = () => {
-    var _variantToUse;
-    return (_variantToUse = variantToUse()) === null || _variantToUse === void 0 ? void 0 : _variantToUse.image_urls;
-  };
   const imageUrl = $3hooq$solidjs.createMemo(() => {
-    var _imageUrls;
-    return (_imageUrls = imageUrls()) === null || _imageUrls === void 0 ? void 0 : _imageUrls[0];
-  });
-  const secondaryImageUrl = $3hooq$solidjs.createMemo(() => {
-    var _imageUrls2;
-    return (_imageUrls2 = imageUrls()) === null || _imageUrls2 === void 0 ? void 0 : _imageUrls2[1];
+    var _variantToUse, _variantToUse$image_u;
+    return (_variantToUse = variantToUse()) === null || _variantToUse === void 0 ? void 0 : (_variantToUse$image_u = _variantToUse.image_urls) === null || _variantToUse$image_u === void 0 ? void 0 : _variantToUse$image_u[0];
   });
   const [animationIsRunning, setAnimationIsRunning] = textFadeInAnimationRunning_;
   const [isExpandedThrottledByOurEffectRun, setIsExpandedThrottledByOurEffectRun] = $3hooq$solidjs.createSignal($3hooq$solidjs.untrack(isExpanded_));
@@ -1329,24 +1321,6 @@ function $d66c35b5a6d6d926$export$b73ed90f0ee50dc3(_ref) {
             }
           });
         }
-      })), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
-        get when() {
-          return secondaryImageUrl();
-        },
-        get children() {
-          return $3hooq$solidjsweb.createComponent((0, $f3db423dc84bc35d$export$9d4a4b669b1929ab), {
-            get src() {
-              return secondaryImageUrl();
-            },
-            get aspectRatio() {
-              return isExpanded_() ? 0.75 : 1;
-            },
-            "class": "secondary",
-            get autoAdjustAspectRatio() {
-              return isExpanded_() ? "smoothed" : false;
-            }
-          });
-        }
       })));
     }
   })), "<!--/-->", "<!--$-->", $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {

package/server/ES10/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.3.0";
+export const version = "4.3.1";
 declare const LISTING_ID = "listingId";
 declare const EXTERNAL_ID = "externalId";
 type ScrollRestorationData = {
@@ -1377,7 +1377,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;
@@ -1455,5 +1455,5 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
   filterModalParent_?: HTMLElement | ShadowRoot;
-}): import("@depict-ai/utilishared/latest").Node_Array;
+}): import("@depict-ai/utilishared").Node_Array;
 export type { SearchFilter } from "@depict-ai/types/api/SearchRequestV3";

package/server/ES10/index.js

@@ -10,7 +10,7 @@ import { createStore as $b8hua$createStore, reconcile as $b8hua$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "4.3.0";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.3.1";
 const $a9c7ba6087881ac2$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -1161,7 +1161,7 @@ function $98688279b9059f50$export$9d4a4b669b1929ab(props) {
     }
   }));
 }
-var $0c5b1686f971e5e7$var$_tmpl$ = ["<div", ' class="img-wrapper"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"],
+var $0c5b1686f971e5e7$var$_tmpl$ = ["<div", ' class="img-wrapper">', "</div>"],
   $0c5b1686f971e5e7$var$_tmpl$2 = ["<span", ' class="d-price original">', "</span>"],
   $0c5b1686f971e5e7$var$_tmpl$3 = ["<div", ' class="right-part"><div class="text-container"><span class="d-title line-clamp">', '</span><span class="', '">', "</span><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div>"];
 function $0c5b1686f971e5e7$export$b73ed90f0ee50dc3(_ref) {
@@ -1177,17 +1177,9 @@ function $0c5b1686f971e5e7$export$b73ed90f0ee50dc3(_ref) {
     const display = display_();
     return display === null || display === void 0 ? void 0 : display.variant_displays[display === null || display === void 0 ? void 0 : display.variant_index];
   });
-  const imageUrls = () => {
-    var _variantToUse;
-    return (_variantToUse = variantToUse()) === null || _variantToUse === void 0 ? void 0 : _variantToUse.image_urls;
-  };
   const imageUrl = $b8hua$createMemo(() => {
-    var _imageUrls;
-    return (_imageUrls = imageUrls()) === null || _imageUrls === void 0 ? void 0 : _imageUrls[0];
-  });
-  const secondaryImageUrl = $b8hua$createMemo(() => {
-    var _imageUrls2;
-    return (_imageUrls2 = imageUrls()) === null || _imageUrls2 === void 0 ? void 0 : _imageUrls2[1];
+    var _variantToUse, _variantToUse$image_u;
+    return (_variantToUse = variantToUse()) === null || _variantToUse === void 0 ? void 0 : (_variantToUse$image_u = _variantToUse.image_urls) === null || _variantToUse$image_u === void 0 ? void 0 : _variantToUse$image_u[0];
   });
   const [animationIsRunning, setAnimationIsRunning] = textFadeInAnimationRunning_;
   const [isExpandedThrottledByOurEffectRun, setIsExpandedThrottledByOurEffectRun] = $b8hua$createSignal($b8hua$untrack(isExpanded_));
@@ -1239,24 +1231,6 @@ function $0c5b1686f971e5e7$export$b73ed90f0ee50dc3(_ref) {
             }
           });
         }
-      })), $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
-        get when() {
-          return secondaryImageUrl();
-        },
-        get children() {
-          return $b8hua$createComponent((0, $98688279b9059f50$export$9d4a4b669b1929ab), {
-            get src() {
-              return secondaryImageUrl();
-            },
-            get aspectRatio() {
-              return isExpanded_() ? 0.75 : 1;
-            },
-            "class": "secondary",
-            get autoAdjustAspectRatio() {
-              return isExpanded_() ? "smoothed" : false;
-            }
-          });
-        }
       })));
     }
   })), "<!--/-->", "<!--$-->", $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {

package/server/latest/index.cjs

@@ -94,7 +94,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $1f4925833f07df29$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $1f4925833f07df29$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $14f289047713d67a$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.3.0";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.3.1";
 const $4e04be41243c3d80$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -1197,7 +1197,7 @@ function $d212a67662c5cf38$export$9d4a4b669b1929ab(props) {
     }
   }));
 }
-var $1ae437d7d388a66e$var$_tmpl$ = ["<div", ' class="img-wrapper"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"],
+var $1ae437d7d388a66e$var$_tmpl$ = ["<div", ' class="img-wrapper">', "</div>"],
   $1ae437d7d388a66e$var$_tmpl$2 = ["<span", ' class="d-price original">', "</span>"],
   $1ae437d7d388a66e$var$_tmpl$3 = ["<div", ' class="right-part"><div class="text-container"><span class="d-title line-clamp">', '</span><span class="', '">', "</span><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div>"];
 function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
@@ -1212,9 +1212,7 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
     const display = display_();
     return display?.variant_displays[display?.variant_index];
   });
-  const imageUrls = () => variantToUse()?.image_urls;
-  const imageUrl = $5vyXB$solidjs.createMemo(() => imageUrls()?.[0]);
-  const secondaryImageUrl = $5vyXB$solidjs.createMemo(() => imageUrls()?.[1]);
+  const imageUrl = $5vyXB$solidjs.createMemo(() => variantToUse()?.image_urls?.[0]);
   const [animationIsRunning, setAnimationIsRunning] = textFadeInAnimationRunning_;
   const [isExpandedThrottledByOurEffectRun, setIsExpandedThrottledByOurEffectRun] = $5vyXB$solidjs.createSignal($5vyXB$solidjs.untrack(isExpanded_));
   const [animationEffectExists, setAnimationEffectExists] = $5vyXB$solidjs.createSignal(false);
@@ -1256,24 +1254,6 @@ function $1ae437d7d388a66e$export$b73ed90f0ee50dc3({
             }
           });
         }
-      })), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
-        get when() {
-          return secondaryImageUrl();
-        },
-        get children() {
-          return $5vyXB$solidjsweb.createComponent((0, $d212a67662c5cf38$export$9d4a4b669b1929ab), {
-            get src() {
-              return secondaryImageUrl();
-            },
-            get aspectRatio() {
-              return isExpanded_() ? 0.75 : 1;
-            },
-            "class": "secondary",
-            get autoAdjustAspectRatio() {
-              return isExpanded_() ? "smoothed" : false;
-            }
-          });
-        }
       })));
     }
   })), "<!--/-->", "<!--$-->", $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {

package/server/latest/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.3.0";
+export const version = "4.3.1";
 declare const LISTING_ID = "listingId";
 declare const EXTERNAL_ID = "externalId";
 type ScrollRestorationData = {
@@ -1377,7 +1377,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;
@@ -1455,5 +1455,5 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   content_blocks_by_row?: ContentBlocksByRow;
   layout?: PossibleLayout;
   filterModalParent_?: HTMLElement | ShadowRoot;
-}): import("@depict-ai/utilishared/latest").Node_Array;
+}): import("@depict-ai/utilishared").Node_Array;
 export type { SearchFilter } from "@depict-ai/types/api/SearchRequestV3";

package/server/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $i7OB2$createStore, reconcile as $i7OB2$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.3.0";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.3.1";
 const $b5cccc8ee7d24677$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -1110,7 +1110,7 @@ function $70bb27cc6be01fc7$export$9d4a4b669b1929ab(props) {
     }
   }));
 }
-var $5a6c386e1bde5665$var$_tmpl$ = ["<div", ' class="img-wrapper"><!--$-->', "<!--/--><!--$-->", "<!--/--></div>"],
+var $5a6c386e1bde5665$var$_tmpl$ = ["<div", ' class="img-wrapper">', "</div>"],
   $5a6c386e1bde5665$var$_tmpl$2 = ["<span", ' class="d-price original">', "</span>"],
   $5a6c386e1bde5665$var$_tmpl$3 = ["<div", ' class="right-part"><div class="text-container"><span class="d-title line-clamp">', '</span><span class="', '">', "</span><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div>"];
 function $5a6c386e1bde5665$export$b73ed90f0ee50dc3({
@@ -1125,9 +1125,7 @@ function $5a6c386e1bde5665$export$b73ed90f0ee50dc3({
     const display = display_();
     return display?.variant_displays[display?.variant_index];
   });
-  const imageUrls = () => variantToUse()?.image_urls;
-  const imageUrl = $i7OB2$createMemo(() => imageUrls()?.[0]);
-  const secondaryImageUrl = $i7OB2$createMemo(() => imageUrls()?.[1]);
+  const imageUrl = $i7OB2$createMemo(() => variantToUse()?.image_urls?.[0]);
   const [animationIsRunning, setAnimationIsRunning] = textFadeInAnimationRunning_;
   const [isExpandedThrottledByOurEffectRun, setIsExpandedThrottledByOurEffectRun] = $i7OB2$createSignal($i7OB2$untrack(isExpanded_));
   const [animationEffectExists, setAnimationEffectExists] = $i7OB2$createSignal(false);
@@ -1169,24 +1167,6 @@ function $5a6c386e1bde5665$export$b73ed90f0ee50dc3({
             }
           });
         }
-      })), $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
-        get when() {
-          return secondaryImageUrl();
-        },
-        get children() {
-          return $i7OB2$createComponent((0, $70bb27cc6be01fc7$export$9d4a4b669b1929ab), {
-            get src() {
-              return secondaryImageUrl();
-            },
-            get aspectRatio() {
-              return isExpanded_() ? 0.75 : 1;
-            },
-            "class": "secondary",
-            get autoAdjustAspectRatio() {
-              return isExpanded_() ? "smoothed" : false;
-            }
-          });
-        }
       })));
     }
   })), "<!--/-->", "<!--$-->", $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {