@depict-ai/ui 2.0.13 → 2.0.15

package/ES10/index.cjs

@@ -1,6 +1,6 @@
 var $52FdA$depictaiutilishared = require("@depict-ai/utilishared/ES10");
-var $52FdA$solidjs = require("solid-js");
 var $52FdA$solidjsweb = require("solid-js/web");
+var $52FdA$solidjs = require("solid-js");
 var $52FdA$babelruntimehelpersclassPrivateFieldSet = require("@babel/runtime/helpers/classPrivateFieldSet");
 var $52FdA$babelruntimehelpersclassPrivateFieldGet = require("@babel/runtime/helpers/classPrivateFieldGet");
 var $52FdA$babelruntimehelpersdefineProperty = require("@babel/runtime/helpers/defineProperty");
@@ -16,6 +16,11 @@ function $parcel$export(e, n, v, s) {
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
+$parcel$export(module.exports, "shopifyContainedImageContextSymbol", () => $28535bb7671c63d1$export$d7b7ab832c20e2f4);
+$parcel$export(module.exports, "ListingProvider", () => $d067f3a30f047b41$export$e68cff63f76bd15b);
+$parcel$export(module.exports, "useListing", () => $d067f3a30f047b41$export$8d0c4fdbb05a2f2e);
+$parcel$export(module.exports, "ShopifyContainedImage", () => $28535bb7671c63d1$export$e4b984597b71e989);
+$parcel$export(module.exports, "SlidableItems", () => $ad8ec7729fffeb9c$export$6649caad96ef8870);
 $parcel$export(module.exports, "make_accurate_size_accessor", () => $13671aa5e984acd9$export$9f191182275e9ef);
 $parcel$export(module.exports, "RecommendationSlider", () => $2badc30d7c6610e1$export$9574e176201e5e8d);
 $parcel$export(module.exports, "RecommendationGrid", () => $41227f10ad680afd$export$9756467d34d91cdb);
@@ -67,7 +72,199 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $33eed84f447aa0c0$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447aa0c0$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "2.0.13";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "2.0.15";
+const $d067f3a30f047b41$var$ListingContext = /*@__PURE__*/$52FdA$solidjs.createContext();
+function $d067f3a30f047b41$export$e68cff63f76bd15b(props) {
+  const our_object = {};
+  return $52FdA$solidjsweb.createComponent($d067f3a30f047b41$var$ListingContext.Provider, {
+    value: our_object,
+    get children() {
+      return props.children;
+    }
+  });
+}
+function $d067f3a30f047b41$export$8d0c4fdbb05a2f2e() {
+  return $52FdA$solidjs.useContext($d067f3a30f047b41$var$ListingContext);
+}
+const $ce467edb5343cfcd$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div></div>`, 2);
+function $ce467edb5343cfcd$export$94026ee33dbabc26(props) {
+  return (() => {
+    const _el$ = $52FdA$solidjsweb.getNextElement($ce467edb5343cfcd$var$_tmpl$);
+    $52FdA$solidjsweb.effect(_$p => $52FdA$solidjsweb.style(_el$, "position:relative;width:100%;padding-bottom:".concat(1 / props.aspectRatio * 100, "%"), _$p));
+    return _el$;
+  })();
+}
+const $858fdcf73148519f$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<img>`, 1);
+function $858fdcf73148519f$export$e6fffe67d4cdd848(whatToWatch) {
+  const [size, setSize] = $52FdA$solidjs.createSignal(0);
+  const resizeObserver = new ResizeObserver($52FdA$depictaiutilishared.catchify(records => {
+    for (let j = 0; j < records.length; j++) {
+      const {
+        width: width
+      } = records[j].contentRect;
+      if (!width) continue;
+      // add extra 5% just in case. + safari is (in some cases) acting a bit questionable and needs a third extra to fill the set width
+      const new_size = width * 1.05 * ((0, $52FdA$depictaiutilishared.is_safari) ? 4 / 3 : 1);
+      setSize(Math.round(new_size));
+    }
+  }));
+  // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
+  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
+  const disconnect = (0, $52FdA$depictaiutilishared.observer).onexists(whatToWatch, _ref => {
+    let {
+      element: element
+    } = _ref;
+    return requestAnimationFrame($52FdA$depictaiutilishared.catchify(() => resizeObserver.observe(element)));
+  });
+  $52FdA$solidjs.onCleanup(() => {
+    resizeObserver.disconnect();
+    disconnect();
+  });
+  return size;
+}
+function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
+  // Enable reactive props
+  const otherOptions = $52FdA$solidjs.createMemo(() => {
+    const cloned_props = {
+      ...props
+    };
+    delete cloned_props.resolutions;
+    // @ts-ignore
+    delete cloned_props.size;
+    // @ts-ignore
+    delete cloned_props.src;
+    return cloned_props;
+  });
+  const src_options = $52FdA$solidjs.createMemo(() => {
+    const src = new URL(props.src, location.origin);
+    const fallback_src = $858fdcf73148519f$var$generateImageUrl(src, 400);
+    const srcset = $858fdcf73148519f$var$make_srcset(src, props.resolutions || [64, 128, 256, 300, 400, 512, 768, 1024, 1280, 1536, 2048, 4096]);
+    return {
+      src: fallback_src,
+      srcset: srcset
+    };
+  });
+  return (() => {
+    const _el$ = $52FdA$solidjsweb.getNextElement($858fdcf73148519f$var$_tmpl$);
+    $52FdA$solidjsweb.spread(_el$, $52FdA$solidjsweb.mergeProps(otherOptions, src_options, {
+      get sizes() {
+        return props.size() + "px";
+      }
+    }), false, false);
+    $52FdA$solidjsweb.runHydrationEvents();
+    return _el$;
+  })();
+}
+function $858fdcf73148519f$var$make_srcset(url, resolutions) {
+  return resolutions.map(width => "".concat($858fdcf73148519f$var$generateImageUrl(url, width), " ").concat(width, "w")).join(", ");
+}
+function $858fdcf73148519f$var$generateImageUrl(url, width) {
+  url.searchParams.set("width", width);
+  return url.href;
+}
+const $28535bb7671c63d1$var$backupSizeSignal = /*@__PURE__*/$52FdA$solidjs.createSignal();
+const $28535bb7671c63d1$export$d7b7ab832c20e2f4 = /*@__PURE__*/Symbol("ShopifyContainedImage");
+function $28535bb7671c63d1$export$e4b984597b71e989(props) {
+  const context = $d067f3a30f047b41$export$8d0c4fdbb05a2f2e();
+  if (context && !context[$28535bb7671c63d1$export$d7b7ab832c20e2f4])
+    // create a signal that's the same for all items in this listing
+    context[$28535bb7671c63d1$export$d7b7ab832c20e2f4] = $52FdA$solidjs.createSignal();
+  $52FdA$depictaiutilishared.dlog("Checking for", $28535bb7671c63d1$export$d7b7ab832c20e2f4, "in", context);
+  const [currentImageSize, setCurrentImageSize] = (context === null || context === void 0 ? void 0 : context[$28535bb7671c63d1$export$d7b7ab832c20e2f4]) || $28535bb7671c63d1$var$backupSizeSignal; // use global fallback signal (might lead to blurry images) if no context is available
+  const container = $52FdA$solidjsweb.createComponent((0, $ce467edb5343cfcd$export$94026ee33dbabc26), {
+    get aspectRatio() {
+      return props.aspectRatio;
+    }
+  });
+  const owner = $52FdA$solidjs.getOwner();
+  let createdSizeAccessor = false;
+  let wasCleanedUp = false;
+  $52FdA$solidjs.createEffect(() => {
+    if (currentImageSize() || wasCleanedUp) return; // We get into the effect when onCleanup is called if we don't have wasCleanedUp
+    // ensure we always have a size accessor
+    // what this whole thing does is set the sizes attribute to the actual size of one of the existing image containers, therefore the value doesn't have to manually be specified
+    setCurrentImageSize(() => $52FdA$solidjs.runWithOwner(owner, () => $858fdcf73148519f$export$e6fffe67d4cdd848(container)));
+  });
+  $52FdA$solidjs.onCleanup(() => {
+    wasCleanedUp = true; // important to set this before the function call below and always, so the dead effects don't create dead size accessors
+    if (!createdSizeAccessor) return;
+    $52FdA$depictaiutilishared.queueMacroTask(() => setCurrentImageSize(undefined)); // unset the size accessor next event loop iteration, so that all onCleanup's have time to run, since the effects run more aggressively and can create a size accessor with a cleaned up owner otherwise
+  });
+
+  container.append($52FdA$solidjsweb.createComponent((0, $858fdcf73148519f$export$6e5611bc7e57e477), {
+    style: "width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;",
+    get size() {
+      return $52FdA$solidjs.createMemo(() => {
+        var _currentImageSize;
+        return ((_currentImageSize = currentImageSize()) === null || _currentImageSize === void 0 ? void 0 : _currentImageSize()) || 0;
+      });
+    },
+    get src() {
+      return props.src;
+    }
+  }));
+  return container;
+}
+const $9d19451330d04c3c$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0" fill="#0f0f0f"></path></svg>`, 4);
+function $9d19451330d04c3c$export$8be2714ec7f169ee() {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (() => {
+    const _el$ = $52FdA$solidjsweb.getNextElement($9d19451330d04c3c$var$_tmpl$);
+    $52FdA$solidjsweb.effect(_p$ => {
+      var _props$width_, _props$height_;
+      const _v$ = (_props$width_ = props.width_) !== null && _props$width_ !== void 0 ? _props$width_ : 14,
+        _v$2 = (_props$height_ = props.height_) !== null && _props$height_ !== void 0 ? _props$height_ : 26;
+      _v$ !== _p$._v$ && $52FdA$solidjsweb.setAttribute(_el$, "width", _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && $52FdA$solidjsweb.setAttribute(_el$, "height", _p$._v$2 = _v$2);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined
+    });
+    return _el$;
+  })();
+}
+const $ad8ec7729fffeb9c$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div></div>`, 2);
+function $ad8ec7729fffeb9c$export$6649caad96ef8870(_ref) {
+  let {
+    children: children,
+    slider_ref_: slider_ref_,
+    faded_opacity_ = 0.7,
+    mutation_plugins_ = [],
+    disable_fading_: disable_fading_,
+    arrow_width_: arrow_width_,
+    arrow_height_: arrow_height_
+  } = _ref;
+  const slider = new (0, $52FdA$depictaiutilishared.Amazing_Slider)({
+    button_contents: {
+      left: [(() => {
+        const _el$ = $52FdA$solidjsweb.getNextElement($ad8ec7729fffeb9c$var$_tmpl$);
+        $52FdA$solidjsweb.insert(_el$, $52FdA$solidjsweb.createComponent((0, $9d19451330d04c3c$export$8be2714ec7f169ee), {
+          height_: arrow_height_,
+          width_: arrow_width_
+        }));
+        return _el$;
+      })()],
+      right: [(() => {
+        const _el$2 = $52FdA$solidjsweb.getNextElement($ad8ec7729fffeb9c$var$_tmpl$);
+        $52FdA$solidjsweb.insert(_el$2, $52FdA$solidjsweb.createComponent((0, $9d19451330d04c3c$export$8be2714ec7f169ee), {
+          height_: arrow_height_,
+          width_: arrow_width_
+        }));
+        return _el$2;
+      })()]
+    },
+    constructor_plugins: [$52FdA$depictaiutilishared.slider_snap_css().constructor_plugin],
+    mutation_plugins: [...(disable_fading_ ? [] : [$52FdA$depictaiutilishared.slider_fading_factory({
+      threshold_: 0.96,
+      faded_opacity_: faded_opacity_
+    }).mutation_plugin_]), ...mutation_plugins_]
+  });
+  $52FdA$solidjsweb.insert(slider.insert_here, children);
+  $52FdA$solidjs.onCleanup(() => slider.observer.disconnect());
+  slider_ref_ === null || slider_ref_ === void 0 || slider_ref_(slider);
+  return slider.container;
+}
 
 /** @jsxImportSource solid-js */
 
@@ -530,66 +727,6 @@ function $6c2c739b113a8ddf$export$445d8d3f5f706a40(props, container_element) {
   return [container_element, $52FdA$solidjsweb.memo(view_more_button_container), $52FdA$solidjsweb.memo(view_less_button_container), style_element];
 }
 $52FdA$solidjsweb.delegateEvents(["click"]);
-const $9d19451330d04c3c$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0" fill="#0f0f0f"></path></svg>`, 4);
-function $9d19451330d04c3c$export$8be2714ec7f169ee() {
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (() => {
-    const _el$ = $52FdA$solidjsweb.getNextElement($9d19451330d04c3c$var$_tmpl$);
-    $52FdA$solidjsweb.effect(_p$ => {
-      var _props$width_, _props$height_;
-      const _v$ = (_props$width_ = props.width_) !== null && _props$width_ !== void 0 ? _props$width_ : 14,
-        _v$2 = (_props$height_ = props.height_) !== null && _props$height_ !== void 0 ? _props$height_ : 26;
-      _v$ !== _p$._v$ && $52FdA$solidjsweb.setAttribute(_el$, "width", _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && $52FdA$solidjsweb.setAttribute(_el$, "height", _p$._v$2 = _v$2);
-      return _p$;
-    }, {
-      _v$: undefined,
-      _v$2: undefined
-    });
-    return _el$;
-  })();
-}
-const $ad8ec7729fffeb9c$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div></div>`, 2);
-function $ad8ec7729fffeb9c$export$6649caad96ef8870(_ref) {
-  let {
-    children: children,
-    slider_ref_: slider_ref_,
-    faded_opacity_ = 0.7,
-    mutation_plugins_ = [],
-    disable_fading_: disable_fading_,
-    arrow_width_: arrow_width_,
-    arrow_height_: arrow_height_
-  } = _ref;
-  const slider = new (0, $52FdA$depictaiutilishared.Amazing_Slider)({
-    button_contents: {
-      left: [(() => {
-        const _el$ = $52FdA$solidjsweb.getNextElement($ad8ec7729fffeb9c$var$_tmpl$);
-        $52FdA$solidjsweb.insert(_el$, $52FdA$solidjsweb.createComponent((0, $9d19451330d04c3c$export$8be2714ec7f169ee), {
-          height_: arrow_height_,
-          width_: arrow_width_
-        }));
-        return _el$;
-      })()],
-      right: [(() => {
-        const _el$2 = $52FdA$solidjsweb.getNextElement($ad8ec7729fffeb9c$var$_tmpl$);
-        $52FdA$solidjsweb.insert(_el$2, $52FdA$solidjsweb.createComponent((0, $9d19451330d04c3c$export$8be2714ec7f169ee), {
-          height_: arrow_height_,
-          width_: arrow_width_
-        }));
-        return _el$2;
-      })()]
-    },
-    constructor_plugins: [$52FdA$depictaiutilishared.slider_snap_css().constructor_plugin],
-    mutation_plugins: [...(disable_fading_ ? [] : [$52FdA$depictaiutilishared.slider_fading_factory({
-      threshold_: 0.96,
-      faded_opacity_: faded_opacity_
-    }).mutation_plugin_]), ...mutation_plugins_]
-  });
-  $52FdA$solidjsweb.insert(slider.insert_here, children);
-  $52FdA$solidjs.onCleanup(() => slider.observer.disconnect());
-  slider_ref_ === null || slider_ref_ === void 0 || slider_ref_(slider);
-  return slider.container;
-}
 function $236a257ee52e5414$export$d41d19e89346fa2(_ref) {
   let {
     recommendations_resource_: recommendations_resource_,
@@ -704,17 +841,21 @@ function $2badc30d7c6610e1$export$9574e176201e5e8d(props) {
     const [recommendations_resource_] = $52FdA$solidjs.createResource(() => props.recommendations, recs => recs);
     return (() => {
       const _el$ = $52FdA$solidjsweb.getNextElement($2badc30d7c6610e1$var$_tmpl$);
-      $52FdA$solidjsweb.insert(_el$, () => $236a257ee52e5414$export$d41d19e89346fa2({
-        product_card_template_: function () {
-          return props.product_card_template(...arguments);
-        },
-        recommendations_resource_: recommendations_resource_,
-        market_: () => props.market,
-        merchant_: () => props.merchant,
-        layout_options_: $52FdA$solidjs.createMemo(() => ({
-          cols_at_size: $5401a6698b0c0658$export$6daf8749b65a1b77(props.cols_at_size),
-          ...grid_spacing_override()
-        }))
+      $52FdA$solidjsweb.insert(_el$, $52FdA$solidjsweb.createComponent((0, $d067f3a30f047b41$export$e68cff63f76bd15b), {
+        get children() {
+          return $236a257ee52e5414$export$d41d19e89346fa2({
+            product_card_template_: function () {
+              return props.product_card_template(...arguments);
+            },
+            recommendations_resource_: recommendations_resource_,
+            market_: () => props.market,
+            merchant_: () => props.merchant,
+            layout_options_: $52FdA$solidjs.createMemo(() => ({
+              cols_at_size: $5401a6698b0c0658$export$6daf8749b65a1b77(props.cols_at_size),
+              ...grid_spacing_override()
+            }))
+          });
+        }
       }));
       return _el$;
     })();
@@ -824,89 +965,27 @@ function $41227f10ad680afd$export$9756467d34d91cdb(props) {
     const [recommendations_resource_] = $52FdA$solidjs.createResource(() => props.recommendations, recs => recs);
     return (() => {
       const _el$2 = $52FdA$solidjsweb.getNextElement($41227f10ad680afd$var$_tmpl$2);
-      $52FdA$solidjsweb.insert(_el$2, () => $2c920813c92d6987$export$7da560f849543dff({
-        rows_object_: rows_object_,
-        product_card_template_: function () {
-          return props.product_card_template(...arguments);
-        },
-        recommendations_resource_: recommendations_resource_,
-        market_: () => props.market,
-        merchant_: () => props.merchant,
-        layout_options_: $52FdA$solidjs.createMemo(() => ({
-          cols_at_size: $5401a6698b0c0658$export$6daf8749b65a1b77(props.cols_at_size),
-          ...grid_spacing_override()
-        }))
+      $52FdA$solidjsweb.insert(_el$2, $52FdA$solidjsweb.createComponent((0, $d067f3a30f047b41$export$e68cff63f76bd15b), {
+        get children() {
+          return $2c920813c92d6987$export$7da560f849543dff({
+            rows_object_: rows_object_,
+            product_card_template_: function () {
+              return props.product_card_template(...arguments);
+            },
+            recommendations_resource_: recommendations_resource_,
+            market_: () => props.market,
+            merchant_: () => props.merchant,
+            layout_options_: $52FdA$solidjs.createMemo(() => ({
+              cols_at_size: $5401a6698b0c0658$export$6daf8749b65a1b77(props.cols_at_size),
+              ...grid_spacing_override()
+            }))
+          });
+        }
       }));
       return _el$2;
     })();
   }, "RecommendationGrid failed");
 }
-const $858fdcf73148519f$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<img>`, 1);
-function $858fdcf73148519f$export$e6fffe67d4cdd848(whatToWatch) {
-  const [size, setSize] = $52FdA$solidjs.createSignal(0);
-  const resizeObserver = new ResizeObserver($52FdA$depictaiutilishared.catchify(records => {
-    for (let j = 0; j < records.length; j++) {
-      const {
-        width: width
-      } = records[j].contentRect;
-      if (!width) continue;
-      // add extra 5% just in case. + safari is (in some cases) acting a bit questionable and needs a third extra to fill the set width
-      const new_size = width * 1.05 * ((0, $52FdA$depictaiutilishared.is_safari) ? 4 / 3 : 1);
-      setSize(Math.round(new_size));
-    }
-  }));
-  // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
-  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
-  const disconnect = (0, $52FdA$depictaiutilishared.observer).onexists(whatToWatch, _ref => {
-    let {
-      element: element
-    } = _ref;
-    return requestAnimationFrame($52FdA$depictaiutilishared.catchify(() => resizeObserver.observe(element)));
-  });
-  $52FdA$solidjs.onCleanup(() => {
-    resizeObserver.disconnect();
-    disconnect();
-  });
-  return size;
-}
-function $858fdcf73148519f$export$6e5611bc7e57e477(_ref2) {
-  let {
-    src: raw_src,
-    size: size,
-    resolutions = [64, 128, 256, 300, 400, 512, 768, 1024, 1280, 1536, 2048, 4096],
-    ...otherOptions
-  } = _ref2;
-  const src = new URL(raw_src, location.origin);
-  const fallbackSrc = $858fdcf73148519f$var$generateImageUrl(src, 400);
-  const srcset = $858fdcf73148519f$var$make_srcset(src, resolutions);
-  return (() => {
-    const _el$ = $52FdA$solidjsweb.getNextElement($858fdcf73148519f$var$_tmpl$);
-    $52FdA$solidjsweb.spread(_el$, $52FdA$solidjsweb.mergeProps(otherOptions, {
-      "src": fallbackSrc,
-      "srcset": srcset,
-      get sizes() {
-        return size() + "px";
-      }
-    }), false, false);
-    $52FdA$solidjsweb.runHydrationEvents();
-    return _el$;
-  })();
-}
-function $858fdcf73148519f$var$make_srcset(url, resolutions) {
-  return resolutions.map(width => "".concat($858fdcf73148519f$var$generateImageUrl(url, width), " ").concat(width, "w")).join(", ");
-}
-function $858fdcf73148519f$var$generateImageUrl(url, width) {
-  url.searchParams.set("width", width);
-  return url.href;
-}
-const $ce467edb5343cfcd$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div></div>`, 2);
-function $ce467edb5343cfcd$export$94026ee33dbabc26(props) {
-  return (() => {
-    const _el$ = $52FdA$solidjsweb.getNextElement($ce467edb5343cfcd$var$_tmpl$);
-    $52FdA$solidjsweb.effect(_$p => $52FdA$solidjsweb.style(_el$, "position:relative;width:100%;padding-bottom:".concat(1 / props.aspectRatio * 100, "%"), _$p));
-    return _el$;
-  })();
-}
 function $d6d51b09cb2116a6$export$5bad61ecde080b1f() {
   const {
     collapse: collapse,
@@ -7024,26 +7103,30 @@ function $ede6c70ecdca46fe$export$f7d2f673fc2f091d(_ref) {
       severity_: "error",
       message_: "Showing results failed",
       get children() {
-        return $484eec37514a982e$export$3925f87b1545cfc6({
-          min_products_to_fetch_:
-          // if you want to get if all products have been loaded you can add an optional signal here, see SearchPage
-          min_products_to_fetch_,
-          query_base_: query_base_,
-          plp_results_: plp_results_,
-          depict_api_: depict_api_,
-          first_result_in_viewport_: first_result_in_viewport_,
-          last_result_in_viewport_: last_result_in_viewport_,
-          scroll_restoration_data_: scroll_restoration_data_,
-          layout_options_: layout_options_,
-          product_card_template_: product_card_template_,
-          sort_or_filter_open_: sort_or_filter_open_,
-          desktop_filter_elements_: desktop_filter_elements_,
-          id_currently_querying_for_: query_id_,
-          no_results_options_: {
-            selected_filters_: selected_filters_,
-            expanded_hierarchical_filters_: expanded_hierarchical_filters_,
-            i18n_: i18n_,
-            local_filter_cache_: local_filter_cache_
+        return $52FdA$solidjsweb.createComponent((0, $d067f3a30f047b41$export$e68cff63f76bd15b), {
+          get children() {
+            return $484eec37514a982e$export$3925f87b1545cfc6({
+              min_products_to_fetch_:
+              // if you want to get if all products have been loaded you can add an optional signal here, see SearchPage
+              min_products_to_fetch_,
+              query_base_: query_base_,
+              plp_results_: plp_results_,
+              depict_api_: depict_api_,
+              first_result_in_viewport_: first_result_in_viewport_,
+              last_result_in_viewport_: last_result_in_viewport_,
+              scroll_restoration_data_: scroll_restoration_data_,
+              layout_options_: layout_options_,
+              product_card_template_: product_card_template_,
+              sort_or_filter_open_: sort_or_filter_open_,
+              desktop_filter_elements_: desktop_filter_elements_,
+              id_currently_querying_for_: query_id_,
+              no_results_options_: {
+                selected_filters_: selected_filters_,
+                expanded_hierarchical_filters_: expanded_hierarchical_filters_,
+                i18n_: i18n_,
+                local_filter_cache_: local_filter_cache_
+              }
+            });
           }
         });
       }
@@ -8164,10 +8247,12 @@ function $c77adcdf5346b187$export$7de92c4c2205ebf3(_ref) {
   } = _ref;
   const [get_showing_recommendation_rows] = showing_recommendation_rows_; // We reset this in after_submit in search.tsx FYI
   const rows_object = view_more_button_ ? $c77adcdf5346b187$var$make_state_saved_rows(showing_recommendation_rows_, i18n_) : "all";
-  const [recommendations_resource] = $52FdA$solidjs.createResource(search_query_base_, query => depict_api_.get_recommended(query).then(r => r.displays));
-  const is_showing_something = $52FdA$solidjs.createMemo(() => {
+  const [recommendations_resource] = $52FdA$solidjs.createResource(() => all_products_loaded_() && search_query_base_(),
+  // only fetch/refetch if all products are loaded
+  query => query && depict_api_.get_recommended(query).then(r => r.displays));
+  const should_show = $52FdA$solidjs.createMemo(() => {
     var _recommendations_reso;
-    return recommendations_resource.loading || ((_recommendations_reso = recommendations_resource()) === null || _recommendations_reso === void 0 ? void 0 : _recommendations_reso.length);
+    return !!((recommendations_resource.loading || (_recommendations_reso = recommendations_resource()) !== null && _recommendations_reso !== void 0 && _recommendations_reso.length) && all_products_loaded_());
   });
   const num_placeholders_ = $52FdA$solidjs.createMemo(() => (0, $da887c42f8e8847a$export$6c9030e511152266) + get_showing_recommendation_rows() * Math.max(...layout_options_().cols_at_size.map(_ref2 => {
     let [per_column] = _ref2;
@@ -8201,7 +8286,10 @@ function $c77adcdf5346b187$export$7de92c4c2205ebf3(_ref) {
           get children() {
             return (() => {
               // IIFE to make sure we access both the recommendations_resource and the resources containing the product card rendering results themselves within the Suspense boundary
-              const displays_by_key_ = $76012c4468a53d1f$export$7f8bd308237ab5a5($52FdA$solidjs.createMemo(() => recommendations_resource() || []));
+              const displays_by_key_ = $76012c4468a53d1f$export$7f8bd308237ab5a5($52FdA$solidjs.createMemo(prev => {
+                if (!should_show() && prev) return prev; // When we're invisible, don't update what we're rendering to be possibly undefined to preserve the same products if possible
+                return recommendations_resource() || [];
+              }));
               return $76012c4468a53d1f$export$43f0fb951fcb0c54({
                 displays_by_key_: displays_by_key_,
                 merchant_: $52FdA$solidjs.createMemo(() => search_query_base_().tenant),
@@ -8217,7 +8305,7 @@ function $c77adcdf5346b187$export$7de92c4c2205ebf3(_ref) {
   })();
   return $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
     get when() {
-      return $52FdA$solidjsweb.memo(() => !!is_showing_something())() && all_products_loaded_();
+      return should_show();
     },
     children: elements
   });
@@ -9746,17 +9834,21 @@ function $24419668d5fcfcd5$export$1c593cbd6f1e10bc(_ref) {
       severity_: "error",
       message_: "Instant results failed",
       get children() {
-        return $6e8d48eea3d0469d$export$62f101a8aa597bf8({
-          search_field_value_: search_field_value_,
-          depict_api_: depict_api_,
-          tenant_: tenant_,
-          i18n_: i18n_,
-          market_: market_,
-          set_total_num_results_accessor_: set_total_num_results_accessor_,
-          router_: router_,
-          set_modal_search_results_: set_modal_search_results_,
-          content_search_enabled_: content_search_enabled_,
-          ...instant_results_options_
+        return $52FdA$solidjsweb.createComponent((0, $d067f3a30f047b41$export$e68cff63f76bd15b), {
+          get children() {
+            return $6e8d48eea3d0469d$export$62f101a8aa597bf8({
+              search_field_value_: search_field_value_,
+              depict_api_: depict_api_,
+              tenant_: tenant_,
+              i18n_: i18n_,
+              market_: market_,
+              set_total_num_results_accessor_: set_total_num_results_accessor_,
+              router_: router_,
+              set_modal_search_results_: set_modal_search_results_,
+              content_search_enabled_: content_search_enabled_,
+              ...instant_results_options_
+            });
+          }
         });
       }
     }), _el$10, _co$2);
@@ -10723,14 +10815,18 @@ function $739c927cbecd26b0$export$a54ec244c8863715(_ref) {
             return content_search_enabled_();
           },
           get children() {
-            return $52FdA$solidjsweb.createComponent((0, $eab939d0b95b75ee$export$6d0c9c22f6652669), {
-              content_results_rows_: content_results_rows_,
-              search_results_: search_results_,
-              i18n_: i18n_,
-              get_search_query_: get_search_query_,
-              layout_options_: content_layout_options_,
-              router_: router_,
-              query_base_: search_query_base_
+            return $52FdA$solidjsweb.createComponent((0, $d067f3a30f047b41$export$e68cff63f76bd15b), {
+              get children() {
+                return $52FdA$solidjsweb.createComponent((0, $eab939d0b95b75ee$export$6d0c9c22f6652669), {
+                  content_results_rows_: content_results_rows_,
+                  search_results_: search_results_,
+                  i18n_: i18n_,
+                  get_search_query_: get_search_query_,
+                  layout_options_: content_layout_options_,
+                  router_: router_,
+                  query_base_: search_query_base_
+                });
+              }
             });
           }
         });
@@ -10765,28 +10861,32 @@ function $739c927cbecd26b0$export$a54ec244c8863715(_ref) {
       severity_: "error",
       message_: "Search results failed",
       get children() {
-        return $484eec37514a982e$export$3925f87b1545cfc6({
-          all_products_loaded_: all_products_loaded_,
-          min_products_to_fetch_: min_products_to_fetch_,
-          query_base_: search_query_base_,
-          plp_results_: search_results_,
-          depict_api_: depict_api_,
-          first_result_in_viewport_: first_result_in_viewport_,
-          last_result_in_viewport_: last_result_in_viewport_,
-          scroll_restoration_data_: scroll_restoration_data_,
-          desktop_filter_elements_: desktop_filter_elements_,
-          product_card_template_: product_card_template_,
-          layout_options_: layout_options_,
-          sort_or_filter_open_: sort_or_filter_open_,
-          id_currently_querying_for_: get_search_query_,
-          no_results_options_: {
-            selected_filters_: selected_filters_,
-            expanded_hierarchical_filters_: expanded_hierarchical_filters_,
-            local_filter_cache_: local_filter_cache_,
-            i18n_: {
-              ...i18n_,
-              no_results_text_: no_results_text_
-            }
+        return $52FdA$solidjsweb.createComponent((0, $d067f3a30f047b41$export$e68cff63f76bd15b), {
+          get children() {
+            return $484eec37514a982e$export$3925f87b1545cfc6({
+              all_products_loaded_: all_products_loaded_,
+              min_products_to_fetch_: min_products_to_fetch_,
+              query_base_: search_query_base_,
+              plp_results_: search_results_,
+              depict_api_: depict_api_,
+              first_result_in_viewport_: first_result_in_viewport_,
+              last_result_in_viewport_: last_result_in_viewport_,
+              scroll_restoration_data_: scroll_restoration_data_,
+              desktop_filter_elements_: desktop_filter_elements_,
+              product_card_template_: product_card_template_,
+              layout_options_: layout_options_,
+              sort_or_filter_open_: sort_or_filter_open_,
+              id_currently_querying_for_: get_search_query_,
+              no_results_options_: {
+                selected_filters_: selected_filters_,
+                expanded_hierarchical_filters_: expanded_hierarchical_filters_,
+                local_filter_cache_: local_filter_cache_,
+                i18n_: {
+                  ...i18n_,
+                  no_results_text_: no_results_text_
+                }
+              }
+            });
           }
         });
       }
@@ -10799,20 +10899,24 @@ function $739c927cbecd26b0$export$a54ec244c8863715(_ref) {
           severity_: "error",
           message_: "Search recommendations failed",
           get children() {
-            return $52FdA$solidjsweb.createComponent((0, $c77adcdf5346b187$export$7de92c4c2205ebf3), {
-              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_();
+            return $52FdA$solidjsweb.createComponent((0, $d067f3a30f047b41$export$e68cff63f76bd15b), {
+              get children() {
+                return $52FdA$solidjsweb.createComponent((0, $c77adcdf5346b187$export$7de92c4c2205ebf3), {
+                  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_();
+                    });
+                  },
+                  showing_recommendation_rows_: showing_recommendation_rows_,
+                  view_more_button_: search_recs_view_more_,
+                  product_card_template_: product_card_template_,
+                  all_products_loaded_: get_all_products_loaded
                 });
-              },
-              showing_recommendation_rows_: showing_recommendation_rows_,
-              view_more_button_: search_recs_view_more_,
-              product_card_template_: product_card_template_,
-              all_products_loaded_: get_all_products_loaded
+              }
             });
           }
         });