@depict-ai/ui 4.2.2 → 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.2.2";
+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);
@@ -12366,7 +12342,8 @@ function $f70cc6dfcadf0fd5$export$d7841e452f2e59a8(_ref) {
     selected_filters_: selected_filters_,
     local_filter_cache_: local_filter_cache_,
     get_extra_filters_button_: get_extra_filters_button_,
-    get_extra_sorting_button_: get_extra_sorting_button_
+    get_extra_sorting_button_: get_extra_sorting_button_,
+    filterModalParent_: filterModalParent_
   } = _ref;
   const Self = () => {
     // This could technically be in SearchPage and CategoryPage and would be better suited there since it writes into local_filter_cache_ which i.e. SelectedFilters uses, but it's better suited here IMO due to DRY and being inside the correct error boundary here
@@ -12501,7 +12478,7 @@ function $f70cc6dfcadf0fd5$export$d7841e452f2e59a8(_ref) {
         formatted_number_of_results_: formatted_number_of_results_,
         dismiss_modal_: dismiss_modal_,
         i18n_: i18n_
-      }));
+      }, filterModalParent_));
       const {
         remove: remove
       } = $52FdA$depictaiutilishared.javascript_media_query("(max-width:651px)", _ref3 => {
@@ -13572,7 +13549,6 @@ function $739c927cbecd26b0$export$a54ec244c8863715(_ref) {
     market_: market_,
     showing_recommendation_rows_: showing_recommendation_rows_,
     layout_options_: layout_options_,
-    recommendations_layout_options_: recommendations_layout_options_,
     scroll_restoration_data_: scroll_restoration_data_,
     product_card_template_: product_card_template_,
     modalAlignmentSignalsRef_: modalAlignmentSignalsRef_,
@@ -13582,7 +13558,8 @@ function $739c927cbecd26b0$export$a54ec244c8863715(_ref) {
     content_search_enabled_: content_search_enabled_,
     content_blocks_by_row_: content_blocks_by_row_,
     modalVersionUsed_: modalVersionUsed_,
-    BackIcon_: BackIcon_
+    BackIcon_: BackIcon_,
+    filterModalParent_: filterModalParent_
   } = _ref;
   const [get_sorting] = current_sorting_;
   const all_products_loaded_ = $52FdA$solidjs.createSignal(false);
@@ -13703,7 +13680,8 @@ function $739c927cbecd26b0$export$a54ec244c8863715(_ref) {
     formatted_number_of_results_: formatted_number_of_results_,
     local_filter_cache_: local_filter_cache_,
     expanded_hierarchical_filters_: expanded_hierarchical_filters_,
-    number_of_rendered_selected_filters_items_: number_of_rendered_selected_filters_items_
+    number_of_rendered_selected_filters_items_: number_of_rendered_selected_filters_items_,
+    filterModalParent_: filterModalParent_
   });
   const results_filters = $52FdA$solidjs.createSignal();
   const owner = $52FdA$solidjs.getOwner();
@@ -13962,12 +13940,7 @@ function $739c927cbecd26b0$export$a54ec244c8863715(_ref) {
               depict_api_: depict_api_,
               i18n_: i18n_,
               search_query_base_: search_query_base_,
-              get layout_options_() {
-                return $52FdA$solidjs.createMemo(() => {
-                  var _recommendations_layo;
-                  return (_recommendations_layo = recommendations_layout_options_ === null || recommendations_layout_options_ === void 0 ? void 0 : recommendations_layout_options_()) !== null && _recommendations_layo !== void 0 ? _recommendations_layo : layout_options_();
-                });
-              },
+              layout_options_: layout_options_,
               showing_recommendation_rows_: showing_recommendation_rows_,
               product_card_template_: product_card_template_,
               all_products_loaded_: get_all_products_loaded
@@ -14470,15 +14443,7 @@ function $ddd39c5f36f49703$export$f2dc7e4e4aa11abb(props) {
         cols_at_size: $5401a6698b0c0658$export$6daf8749b65a1b77($b1ea8d47bcf03111$export$ff7109b9b2b206ba(props.cols_at_size)),
         ...grid_spacing_override()
       })),
-      recommendations_layout_options_: $52FdA$solidjs.createMemo(() => {
-        const {
-          extra_depict_options: extra_depict_options
-        } = props;
-        return extra_depict_options !== null && extra_depict_options !== void 0 && extra_depict_options.recommendations_cols_at_size ? {
-          cols_at_size: $5401a6698b0c0658$export$6daf8749b65a1b77(extra_depict_options.recommendations_cols_at_size),
-          ...grid_spacing_override()
-        } : undefined;
-      }),
+      filterModalParent_: $52FdA$solidjs.untrack(() => props.filterModalParent_),
       product_card_template_: product_card_template
     });
   }, "Entire SearchPage failed");
@@ -15432,7 +15397,8 @@ function $ede6c70ecdca46fe$export$f7d2f673fc2f091d(_ref) {
     sideways_filter_clearing_flag_: sideways_filter_clearing_flag_,
     sorting_query_param_: sorting_query_param_,
     filter_query_param_prefix_: filter_query_param_prefix_,
-    content_blocks_by_row_: content_blocks_by_row_
+    content_blocks_by_row_: content_blocks_by_row_,
+    filterModalParent_: filterModalParent_
   } = _ref;
   let results_for;
   let only_show_filters_opener_;
@@ -15635,6 +15601,7 @@ function $ede6c70ecdca46fe$export$f7d2f673fc2f091d(_ref) {
     expanded_hierarchical_filters_: expanded_hierarchical_filters_,
     number_of_rendered_selected_filters_items_: number_of_rendered_selected_filters_items_,
     sort_and_filter_disabled_: sort_and_filter_disabled_,
+    filterModalParent_: filterModalParent_,
     ...extra_sort_and_filter_args_
   });
   $52FdA$depictaiutilisharedlatest.catchify((0, $fef4890f1f8e0544$export$6e49da55e449af7c))({
@@ -15923,6 +15890,7 @@ function $c10e33c4681f8c9b$export$e2bf8ce7779e827e(props) {
       category_sorting_open_: category_sorting_open_,
       expanded_filters_: expanded_filters_,
       expanded_hierarchical_filters_: expanded_hierarchical_filters_,
+      filterModalParent_: $52FdA$solidjs.untrack(() => props.filterModalParent_),
       selected_filters_: selected_filters_,
       sideways_filter_clearing_flag_: sideways_filter_clearing_flag_,
       content_blocks_by_row_: () => props.content_blocks_by_row,

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.2.2";
+export const version = "4.3.1";
 declare const LISTING_ID = "listingId";
 declare const EXTERNAL_ID = "externalId";
 type ScrollRestorationData = {
@@ -1337,9 +1337,7 @@ export function SearchPage<OriginalDisplay extends Display, TransformedDisplay e
   product_card_template: ProductCardTemplate<[TransformedDisplay] extends [never] ? OriginalDisplay : ModernDisplayWithPageUrl<TransformedDisplay>>;
   content_blocks_by_row?: ContentBlocksByRow;
   on_query_change?: (new_query?: string | undefined, old_query?: string | undefined) => void;
-  extra_depict_options?: {
-    recommendations_cols_at_size?: SDKColsAtSize;
-  };
+  filterModalParent_?: HTMLElement | ShadowRoot;
 }): import("@depict-ai/utilishared").Node_Array;
 /**
  * Connects the height of the search field to the height of the aligner.
@@ -1379,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;
@@ -1456,5 +1454,6 @@ 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;
+  filterModalParent_?: HTMLElement | ShadowRoot;
+}): 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.2.2";
+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);
@@ -12276,7 +12252,8 @@ function $7396052a1484264f$export$d7841e452f2e59a8(_ref) {
     selected_filters_: selected_filters_,
     local_filter_cache_: local_filter_cache_,
     get_extra_filters_button_: get_extra_filters_button_,
-    get_extra_sorting_button_: get_extra_sorting_button_
+    get_extra_sorting_button_: get_extra_sorting_button_,
+    filterModalParent_: filterModalParent_
   } = _ref;
   const Self = () => {
     // This could technically be in SearchPage and CategoryPage and would be better suited there since it writes into local_filter_cache_ which i.e. SelectedFilters uses, but it's better suited here IMO due to DRY and being inside the correct error boundary here
@@ -12411,7 +12388,7 @@ function $7396052a1484264f$export$d7841e452f2e59a8(_ref) {
         formatted_number_of_results_: formatted_number_of_results_,
         dismiss_modal_: dismiss_modal_,
         i18n_: i18n_
-      }));
+      }, filterModalParent_));
       const {
         remove: remove
       } = $8tj43$javascript_media_query("(max-width:651px)", _ref3 => {
@@ -13482,7 +13459,6 @@ function $da279c5a540c6846$export$a54ec244c8863715(_ref) {
     market_: market_,
     showing_recommendation_rows_: showing_recommendation_rows_,
     layout_options_: layout_options_,
-    recommendations_layout_options_: recommendations_layout_options_,
     scroll_restoration_data_: scroll_restoration_data_,
     product_card_template_: product_card_template_,
     modalAlignmentSignalsRef_: modalAlignmentSignalsRef_,
@@ -13492,7 +13468,8 @@ function $da279c5a540c6846$export$a54ec244c8863715(_ref) {
     content_search_enabled_: content_search_enabled_,
     content_blocks_by_row_: content_blocks_by_row_,
     modalVersionUsed_: modalVersionUsed_,
-    BackIcon_: BackIcon_
+    BackIcon_: BackIcon_,
+    filterModalParent_: filterModalParent_
   } = _ref;
   const [get_sorting] = current_sorting_;
   const all_products_loaded_ = $8tj43$createSignal(false);
@@ -13613,7 +13590,8 @@ function $da279c5a540c6846$export$a54ec244c8863715(_ref) {
     formatted_number_of_results_: formatted_number_of_results_,
     local_filter_cache_: local_filter_cache_,
     expanded_hierarchical_filters_: expanded_hierarchical_filters_,
-    number_of_rendered_selected_filters_items_: number_of_rendered_selected_filters_items_
+    number_of_rendered_selected_filters_items_: number_of_rendered_selected_filters_items_,
+    filterModalParent_: filterModalParent_
   });
   const results_filters = $8tj43$createSignal();
   const owner = $8tj43$getOwner();
@@ -13872,12 +13850,7 @@ function $da279c5a540c6846$export$a54ec244c8863715(_ref) {
               depict_api_: depict_api_,
               i18n_: i18n_,
               search_query_base_: search_query_base_,
-              get layout_options_() {
-                return $8tj43$createMemo(() => {
-                  var _recommendations_layo;
-                  return (_recommendations_layo = recommendations_layout_options_ === null || recommendations_layout_options_ === void 0 ? void 0 : recommendations_layout_options_()) !== null && _recommendations_layo !== void 0 ? _recommendations_layo : layout_options_();
-                });
-              },
+              layout_options_: layout_options_,
               showing_recommendation_rows_: showing_recommendation_rows_,
               product_card_template_: product_card_template_,
               all_products_loaded_: get_all_products_loaded
@@ -14380,15 +14353,7 @@ function $eb064bc3350276c1$export$f2dc7e4e4aa11abb(props) {
         cols_at_size: $a9c7ba6087881ac2$export$6daf8749b65a1b77($3f7203368ad0d3ca$export$ff7109b9b2b206ba(props.cols_at_size)),
         ...grid_spacing_override()
       })),
-      recommendations_layout_options_: $8tj43$createMemo(() => {
-        const {
-          extra_depict_options: extra_depict_options
-        } = props;
-        return extra_depict_options !== null && extra_depict_options !== void 0 && extra_depict_options.recommendations_cols_at_size ? {
-          cols_at_size: $a9c7ba6087881ac2$export$6daf8749b65a1b77(extra_depict_options.recommendations_cols_at_size),
-          ...grid_spacing_override()
-        } : undefined;
-      }),
+      filterModalParent_: $8tj43$untrack(() => props.filterModalParent_),
       product_card_template_: product_card_template
     });
   }, "Entire SearchPage failed");
@@ -15342,7 +15307,8 @@ function $4b4b262708b516ee$export$f7d2f673fc2f091d(_ref) {
     sideways_filter_clearing_flag_: sideways_filter_clearing_flag_,
     sorting_query_param_: sorting_query_param_,
     filter_query_param_prefix_: filter_query_param_prefix_,
-    content_blocks_by_row_: content_blocks_by_row_
+    content_blocks_by_row_: content_blocks_by_row_,
+    filterModalParent_: filterModalParent_
   } = _ref;
   let results_for;
   let only_show_filters_opener_;
@@ -15545,6 +15511,7 @@ function $4b4b262708b516ee$export$f7d2f673fc2f091d(_ref) {
     expanded_hierarchical_filters_: expanded_hierarchical_filters_,
     number_of_rendered_selected_filters_items_: number_of_rendered_selected_filters_items_,
     sort_and_filter_disabled_: sort_and_filter_disabled_,
+    filterModalParent_: filterModalParent_,
     ...extra_sort_and_filter_args_
   });
   $8tj43$catchify1((0, $5e6abec0dab4e610$export$6e49da55e449af7c))({
@@ -15833,6 +15800,7 @@ function $8821a19349c36651$export$e2bf8ce7779e827e(props) {
       category_sorting_open_: category_sorting_open_,
       expanded_filters_: expanded_filters_,
       expanded_hierarchical_filters_: expanded_hierarchical_filters_,
+      filterModalParent_: $8tj43$untrack(() => props.filterModalParent_),
       selected_filters_: selected_filters_,
       sideways_filter_clearing_flag_: sideways_filter_clearing_flag_,
       content_blocks_by_row_: () => props.content_blocks_by_row,