@depict-ai/ui 4.7.7 → 4.7.9

package/ES10/index.js

@@ -1,5 +1,5 @@
 import { add_to_version_info as $8tj43$add_to_version_info, useExpandingContainer as $8tj43$useExpandingContainer, fetch_retry as $8tj43$fetch_retry, base_url as $8tj43$base_url, dwarn as $8tj43$dwarn, slider_fractional_factory as $8tj43$slider_fractional_factory, dlog as $8tj43$dlog, camelCasifyObject as $8tj43$camelCasifyObject, make_random_classname as $8tj43$make_random_classname, n_col_styling_with_dist as $8tj43$n_col_styling_with_dist, catchify as $8tj43$catchify, layout_get_visible_recs_without_partial_rows as $8tj43$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $8tj43$layout_get_total_rec_amount_for_row, layout_media_query_header as $8tj43$layout_media_query_header, report as $8tj43$report, slider_fading_factory as $8tj43$slider_fading_factory, Amazing_Slider as $8tj43$Amazing_Slider, slider_snap_css as $8tj43$slider_snap_css, observer as $8tj43$observer, javascript_media_query as $8tj43$javascript_media_query, queueMacroTask as $8tj43$queueMacroTask, findMostFrequentItem as $8tj43$findMostFrequentItem, standard_price_format as $8tj43$standard_price_format, instant_exec_on_suspect_history_change as $8tj43$instant_exec_on_suspect_history_change, deparallelize_no_drop as $8tj43$deparallelize_no_drop, ContainedImage as $8tj43$ContainedImage, buildThresholdList as $8tj43$buildThresholdList, make_asyncIterable_exiter as $8tj43$make_asyncIterable_exiter, href_change_ipns as $8tj43$href_change_ipns, base64_encode_unicode as $8tj43$base64_encode_unicode, base64_decode_unicode as $8tj43$base64_decode_unicode, use_href_accessor as $8tj43$use_href_accessor, get_session_id as $8tj43$get_session_id, add_version_query_params as $8tj43$add_version_query_params, hex_to_rgb as $8tj43$hex_to_rgb, relative_luminance_from_rgb as $8tj43$relative_luminance_from_rgb, snakeCasifyObject as $8tj43$snakeCasifyObject, make_url_with_query_params as $8tj43$make_url_with_query_params, sort_obj as $8tj43$sort_obj, insert_surfaces as $8tj43$insert_surfaces, is_debug as $8tj43$is_debug } from "@depict-ai/utilishared/ES10";
-import { createComponent as $8tj43$createComponent, insert as $8tj43$insert, template as $8tj43$template, getNextElement as $8tj43$getNextElement, mergeProps as $8tj43$mergeProps, effect as $8tj43$effect, className as $8tj43$className, isServer as $8tj43$isServer, spread as $8tj43$spread, runHydrationEvents as $8tj43$runHydrationEvents, addEventListener as $8tj43$addEventListener, memo as $8tj43$memo, delegateEvents as $8tj43$delegateEvents, getNextMarker as $8tj43$getNextMarker, classList as $8tj43$classList, setAttribute as $8tj43$setAttribute, style as $8tj43$style, use as $8tj43$use, setProperty as $8tj43$setProperty, Dynamic as $8tj43$Dynamic } from "solid-js/web";
+import { createComponent as $8tj43$createComponent, insert as $8tj43$insert, template as $8tj43$template, getNextElement as $8tj43$getNextElement, mergeProps as $8tj43$mergeProps, effect as $8tj43$effect, className as $8tj43$className, isServer as $8tj43$isServer, spread as $8tj43$spread, runHydrationEvents as $8tj43$runHydrationEvents, addEventListener as $8tj43$addEventListener, memo as $8tj43$memo, delegateEvents as $8tj43$delegateEvents, getNextMarker as $8tj43$getNextMarker, classList as $8tj43$classList, setAttribute as $8tj43$setAttribute, use as $8tj43$use, style as $8tj43$style, setProperty as $8tj43$setProperty, Dynamic as $8tj43$Dynamic } from "solid-js/web";
 import { createSignal as $8tj43$createSignal, createMemo as $8tj43$createMemo, createResource as $8tj43$createResource, createEffect as $8tj43$createEffect, Show as $8tj43$Show, mergeProps as $8tj43$mergeProps1, Suspense as $8tj43$Suspense, untrack as $8tj43$untrack, createRenderEffect as $8tj43$createRenderEffect, Index as $8tj43$Index, createRoot as $8tj43$createRoot, onCleanup as $8tj43$onCleanup, For as $8tj43$For, getOwner as $8tj43$getOwner, runWithOwner as $8tj43$runWithOwner, createContext as $8tj43$createContext, useContext as $8tj43$useContext, createUniqueId as $8tj43$createUniqueId, createComputed as $8tj43$createComputed, ErrorBoundary as $8tj43$ErrorBoundary, splitProps as $8tj43$splitProps, on as $8tj43$on, batch as $8tj43$batch, createSelector as $8tj43$createSelector, children as $8tj43$children, createReaction as $8tj43$createReaction, mapArray as $8tj43$mapArray } from "solid-js";
 import $8tj43$babelruntimehelpersdefineProperty from "@babel/runtime/helpers/defineProperty";
 import { ListenableSet as $8tj43$ListenableSet, catchify as $8tj43$catchify1, use_href_accessor as $8tj43$use_href_accessor1, queueMacroTask as $8tj43$queueMacroTask1, report as $8tj43$report1 } from "@depict-ai/utilishared/ES10";
@@ -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.7.7";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.7.9";
 function $8e8b179489080711$export$5bad61ecde080b1f() {
   const {
     collapse: collapse,
@@ -652,25 +652,27 @@ function $ca6ab5f08bd28bca$export$8be2714ec7f169ee() {
 }
 var $002f09d00aac50b2$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div>`),
   $002f09d00aac50b2$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<div class="depict-slider depict"><button aria-label="Scroll left"class="left d-navbutton"type=button></button><button aria-label="Scroll right"class="right d-navbutton"type=button></button><div class=sliding>`);
-function $002f09d00aac50b2$export$6649caad96ef8870(_ref) {
-  let {
-    children: children,
+const $002f09d00aac50b2$var$SlidableContext = /*@__PURE__*/$8tj43$createContext();
+function $002f09d00aac50b2$export$6649caad96ef8870(props) {
+  const {
     slider_ref_: slider_ref_,
     faded_opacity_ = 0.7,
     mutation_plugins_ = [],
     disable_fading_: disable_fading_,
-    arrow_width_: arrow_width_,
-    arrow_height_: arrow_height_,
     snapAlign_: snapAlign_,
     fadingThreshold_ = 0.96
-  } = _ref;
+  } = props;
   const [hasHydrated, setHasHydrated] = $8tj43$createSignal(false);
   $8tj43$createEffect(() => setHasHydrated(true));
   const MakeButton = () => (() => {
     var _el$ = $8tj43$getNextElement($002f09d00aac50b2$var$_tmpl$);
     $8tj43$insert(_el$, $8tj43$createComponent((0, $ca6ab5f08bd28bca$export$8be2714ec7f169ee), {
-      height_: arrow_height_,
-      width_: arrow_width_
+      get height_() {
+        return props.arrow_height_;
+      },
+      get width_() {
+        return props.arrow_width_;
+      }
     }));
     return _el$;
   })();
@@ -690,12 +692,13 @@ function $002f09d00aac50b2$export$6649caad96ef8870(_ref) {
           _el$5 = _el$4.nextSibling;
         $8tj43$insert(_el$3, $8tj43$createComponent(MakeButton, {}));
         $8tj43$insert(_el$4, $8tj43$createComponent(MakeButton, {}));
-        $8tj43$insert(_el$5, children);
+        $8tj43$insert(_el$5, () => props.children);
         return _el$2;
       })();
     },
     get children() {
       return (() => {
+        const [intersectionEntries_, setIntersectionEntries] = $8tj43$createSignal([]);
         const fading_plugin = disable_fading_ ? undefined : $8tj43$slider_fading_factory({
           threshold_: fadingThreshold_,
           faded_opacity_: faded_opacity_
@@ -708,9 +711,17 @@ function $002f09d00aac50b2$export$6649caad96ef8870(_ref) {
           constructor_plugins: [$8tj43$slider_snap_css(0, {
             align: snapAlign_
           }).constructor_plugin, ...(fading_plugin ? [fading_plugin.constructor_plugin] : [])],
-          mutation_plugins: [...(fading_plugin ? [fading_plugin.mutation_plugin_] : []), ...mutation_plugins_]
+          mutation_plugins: [...(fading_plugin ? [fading_plugin.mutation_plugin_] : []), ...mutation_plugins_, entries => setIntersectionEntries(entries)]
         });
-        $8tj43$insert(slider.insert_here, children);
+        $8tj43$insert(slider.insert_here, () => $8tj43$createComponent($002f09d00aac50b2$var$SlidableContext.Provider, {
+          value: {
+            slider_: slider,
+            intersectionEntries_: intersectionEntries_
+          },
+          get children() {
+            return props.children;
+          }
+        }));
         $8tj43$onCleanup(() => slider.observer.disconnect());
         slider_ref_ === null || slider_ref_ === void 0 || slider_ref_(slider);
         return slider.container;
@@ -718,6 +729,9 @@ function $002f09d00aac50b2$export$6649caad96ef8870(_ref) {
     }
   });
 }
+function $002f09d00aac50b2$export$eaa625fb39439e37() {
+  return $8tj43$useContext($002f09d00aac50b2$var$SlidableContext);
+}
 var $39ddb986053fb759$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<h2 class=recs-title>`);
 function $39ddb986053fb759$export$d41d19e89346fa2(_ref) {
   let {
@@ -901,38 +915,6 @@ function $00a5b94f0c11efbb$export$d9f36cf74e24d595(media_query) {
   }).remove);
   return signal[0];
 }
-
-/** @jsxImportSource solid-js */
-
-function $fc830a7ee59416ef$export$ebdc3711f7e02ccd(what_to_watch) {
-  const [width, setWidth] = $8tj43$createSignal();
-  const resizeObserver = new ResizeObserver($8tj43$catchify(records => {
-    for (let j = 0; j < records.length; j++) {
-      var _records$j$borderBoxS, _records$j$borderBoxS2, _records$j$borderBoxS3;
-      const width = (_records$j$borderBoxS = (_records$j$borderBoxS2 = records[j].borderBoxSize) === null || _records$j$borderBoxS2 === void 0 ? void 0 : (_records$j$borderBoxS3 = _records$j$borderBoxS2[0]) === null || _records$j$borderBoxS3 === void 0 ? void 0 : _records$j$borderBoxS3.inlineSize) !== null && _records$j$borderBoxS !== void 0 ? _records$j$borderBoxS : what_to_watch.getBoundingClientRect().width;
-      setWidth(width);
-    }
-  }));
-  // 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, $8tj43$observer).onexists(what_to_watch, _ref => {
-    let {
-      element: element
-    } = _ref;
-    return requestAnimationFrame($8tj43$catchify(() => {
-      const current_size = what_to_watch.getBoundingClientRect().width;
-      if (current_size)
-        // If element has size, set signal to that. ResizeObserver only triggers when the content is visible in some cases, but it might already have a size. This reduces size filter expanding animation jank in chrome.
-        setWidth(current_size);
-      resizeObserver.observe(element);
-    }));
-  });
-  $8tj43$onCleanup(() => {
-    resizeObserver.disconnect();
-    disconnect();
-  });
-  return width;
-}
 function $ceafb6fb91c6f394$export$89c6019e4baa40b1(props) {
   const style = $8tj43$createMemo(() => {
     const {
@@ -1096,9 +1078,10 @@ function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
   });
   // Batch idle callbacks so that MutationObserver can batch the resulting mutations better, so we don't lose tons of CPU time to MutationObservers doing lots of things for each image
   // Happened on singular, they have some weird observer (+we also have one but ours is at least 3x more efficient)
-  const executeWhenIdleBatched = fn => {
+  const executeWhenIdleBatched = (fn, isSizesUpdate) => {
     if (typeof requestIdleCallback !== "function") return setTimeout(fn); // Old browsers don't get optimisation
-    if ($8tj43$untrack(isPrioritisedImage)) return fn(); // If we're one of the first 8 images, execute the callbacks immediately
+    if ((!isSizesUpdate || !sizeSetFastPath) && $8tj43$untrack(isPrioritisedImage)) return fn(); // If we're one of the first 8 images, execute the callbacks immediately (improves lighthouse metrics)
+    // unless we're just a `sizes` update after the initial sizes setting (this optimisation makes the looks animation a lot smoother on low-cpu devices)
     const existingStack = listingContext === null || listingContext === void 0 ? void 0 : listingContext[$56047603f9d212b6$var$onIdleFunctionsSymbol];
     if (existingStack) return existingStack.add(fn);
     const newStack = new Set([fn]);
@@ -1183,10 +1166,11 @@ function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
     // This greatly improves performance when loading (more) products
     // See https://depictaiworkspace.slack.com/archives/C05NJ0K3WRL/p1698220617663139
     timeoutSet = true; // Important to set timeoutSet before the call to executeWhenIdleBatched since if this is an important image executeWhenIdleBatched will execute fn immediately
-    executeWhenIdleBatched(handler);
+    executeWhenIdleBatched(handler, true);
   });
+  const dontLoadImageYet = $8tj43$createMemo(() => !props.size() || !hasSetSize()); // Moving this condition into a memo saves us from re-setting src and srcset (expensive) if just props.size changes
   $8tj43$createEffect(() => {
-    if (!props.size() || !hasSetSize()) return; // If size isn't known or set, don't assign src yet since it would cause the most low res image to load
+    if (dontLoadImageYet()) return; // If size isn't known or set, don't assign src yet since it would cause the most low res image to load
     Object.assign(img, src_options());
     // Add to DOM once decoded to not require/block any paints before image has completed loading and avoid showing broken image symbol
     // We can do this because there has to be a container around us giving us a size
@@ -1202,7 +1186,7 @@ function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
     img.decode().catch(e => $8tj43$dwarn("Failed to decode image", e, img)) // Display the image also if loading failed so webdev can debug and doesn't get "no image"
     .then(async () => {
       // Also wait with inserting image (i.e. paint) until browser is idle
-      await new Promise(r => executeWhenIdleBatched(r));
+      await new Promise(r => executeWhenIdleBatched(r, false));
       if (gotCleanedUp) return;
       setHasDecoded(true);
       hasDecodedFastPath = true;
@@ -1556,7 +1540,7 @@ var $72017ebd8b9df947$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div style=posi
 let $72017ebd8b9df947$var$cachedValue;
 async function $72017ebd8b9df947$export$7b9a0e99f0aeb2f3() {
   if ($72017ebd8b9df947$var$cachedValue != undefined) return $72017ebd8b9df947$var$cachedValue;
-  return $72017ebd8b9df947$var$cachedValue = await $72017ebd8b9df947$var$checkIfIsAffectedByChromeBug326498383();
+  return $72017ebd8b9df947$var$cachedValue = $72017ebd8b9df947$var$checkIfIsAffectedByChromeBug326498383();
 }
 async function $72017ebd8b9df947$var$checkIfIsAffectedByChromeBug326498383() {
   let isAffected = true;
@@ -1569,7 +1553,7 @@ async function $72017ebd8b9df947$var$checkIfIsAffectedByChromeBug326498383() {
       setTimeout($8tj43$catchify(() => {
         r();
         div.remove();
-      }), 200);
+      }), 500);
     });
     const {
       style: style
@@ -1612,7 +1596,8 @@ function $4089a7972a508539$export$ebf0b1d4f90c09ae(_ref) {
     animationDuration_: animationDuration_,
     supportsHover_: supportsHover_,
     priceFormatting_: priceFormatting_,
-    pseudoRouter_: pseudoRouter_
+    pseudoRouter_: pseudoRouter_,
+    containerHeight_: containerHeight_
   } = _ref;
   let isAffectedByChromeBug = false;
   // If the user requests the drawer to be expanded or not
@@ -1632,6 +1617,8 @@ function $4089a7972a508539$export$ebf0b1d4f90c09ae(_ref) {
         get children() {
           var _el$ = $8tj43$getNextElement($4089a7972a508539$var$_tmpl$),
             _el$2 = _el$.firstChild;
+          $8tj43$addEventListener(_el$2, "mouseleave", $8tj43$catchify(() => supportsHover_() && setUserWantsExpanded(false)));
+          $8tj43$addEventListener(_el$2, "mouseenter", $8tj43$catchify(() => supportsHover_() && setUserWantsExpanded(true)));
           $8tj43$use(el => $8tj43$createEffect(() => {
             if (userWantsExpanded()) return;
             if (isAffectedByChromeBug) {
@@ -1643,22 +1630,6 @@ function $4089a7972a508539$export$ebf0b1d4f90c09ae(_ref) {
               behavior: "smooth"
             });
           }), _el$2);
-          $8tj43$spread(_el$2, $8tj43$mergeProps({
-            get classList() {
-              return {
-                expanded: userWantsExpanded(),
-                "resting-fully-expanded": !getSecondPartAnimationRunning() && userWantsExpanded()
-              };
-            },
-            get onMouseEnter() {
-              return $8tj43$catchify(() => supportsHover_() && setUserWantsExpanded(true));
-            },
-            get onMouseLeave() {
-              return $8tj43$catchify(() => supportsHover_() && setUserWantsExpanded(false));
-            }
-          }, () => displays_() && {
-            style: "--look-card-width:".concat(containerWidth_(), "px;--look-item-height:").concat(lookItemHeight() || 200, "px")
-          }), false, true);
           $8tj43$insert(_el$2, $8tj43$createComponent((0, $8tj43$Index), {
             get each() {
               return displays_() || Array.from({
@@ -1683,7 +1654,21 @@ function $4089a7972a508539$export$ebf0b1d4f90c09ae(_ref) {
               });
             }
           }));
-          $8tj43$runHydrationEvents();
+          $8tj43$effect(_p$ => {
+            var _v$ = !!userWantsExpanded(),
+              _v$2 = !!(!getSecondPartAnimationRunning() && userWantsExpanded()),
+              _v$3 = displays_() &&
+              // The styling is written like this to eke out animation smoothness on low CPU devices, git blame for previous, more readable versions.
+              "--look-card-width:".concat(containerWidth_(), "px;--look-card-height:").concat(containerHeight_(), "px;--look-item-height:").concat(lookItemHeight() || 200, "px");
+            _v$ !== _p$.e && _el$2.classList.toggle("expanded", _p$.e = _v$);
+            _v$2 !== _p$.t && _el$2.classList.toggle("resting-fully-expanded", _p$.t = _v$2);
+            _p$.a = $8tj43$style(_el$2, _v$3, _p$.a);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined,
+            a: undefined
+          });
           return _el$;
         }
       });
@@ -1710,7 +1695,7 @@ function $4089a7972a508539$var$scrollingFunctionForChrome(element, targetScrollY
   // Bootstrap our animation - it will get called right before next frame shall be rendered.
   requestAnimationFrame(step);
 }
-var $697d8713dc82b9ab$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div class=look-card>`);
+var $697d8713dc82b9ab$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div class=look-card><!$><!/><!$><!/>`);
 function $697d8713dc82b9ab$export$44809a8a3e867e30(_ref) {
   let {
     display_: display_,
@@ -1721,31 +1706,23 @@ function $697d8713dc82b9ab$export$44809a8a3e867e30(_ref) {
     priceFormatting_: priceFormatting_,
     pseudoRouter_: pseudoRouter_
   } = _ref;
+  let container;
   const useWantsExpandedSignal_ = $8tj43$createSignal(false);
   const [userWantsExpanded, setUserWantsExpanded] = useWantsExpandedSignal_;
   const supportsHover_ = $00a5b94f0c11efbb$export$d9f36cf74e24d595("(hover: hover) and (pointer: fine)");
   const us = Symbol("look");
-  const container = (() => {
-    var _el$ = $8tj43$getNextElement($697d8713dc82b9ab$var$_tmpl$);
-    $8tj43$addEventListener(_el$, "click", $8tj43$catchify(_ref2 => {
-      let {
-        target: target
-      } = _ref2;
-      return setUserWantsExpanded(prev => !prev);
-    }), true);
-    $8tj43$effect(() => _el$.classList.toggle("placeholder", !display_()));
-    $8tj43$runHydrationEvents();
-    return _el$;
-  })();
-  const containerWidth_ = $fc830a7ee59416ef$export$ebdc3711f7e02ccd(container);
-  const clickHandler = $8tj43$catchify(_ref3 => {
+  const index = $1e69163caedaab4e$export$e3faf4d95300054f();
+  const [containerWidth_, setContainerWidth] = $8tj43$createSignal();
+  const [containerHeight_, setContainerHeight] = $8tj43$createSignal();
+  const clickHandler = $8tj43$catchify(_ref2 => {
     let {
       target: target
-    } = _ref3;
+    } = _ref2;
     if (target !== container && !container.contains(target))
       // When clicking outside the look, close it
       setUserWantsExpanded(false);
   });
+  const slidableInformation = $002f09d00aac50b2$export$eaa625fb39439e37();
   addEventListener("click", clickHandler);
   $8tj43$onCleanup(() => removeEventListener("click", clickHandler));
   $8tj43$createEffect(() => setExpandedLooks(prev => {
@@ -1757,41 +1734,87 @@ function $697d8713dc82b9ab$export$44809a8a3e867e30(_ref) {
     } else prev.delete(us);
     return prev;
   }));
+  if (slidableInformation) {
+    const ourVisiblityInSlider = $8tj43$createMemo(() => {
+      var _slidableInformation$, _slidableInformation$2;
+      const currentCard = index === null || index === void 0 ? void 0 : index();
+      if (isNaN(currentCard)) return;
+      slidableInformation === null || slidableInformation === void 0 || slidableInformation.intersectionEntries_();
+      return slidableInformation === null || slidableInformation === void 0 ? void 0 : (_slidableInformation$ = slidableInformation.slider_.intersecting_items_object) === null || _slidableInformation$ === void 0 ? void 0 : (_slidableInformation$2 = _slidableInformation$[currentCard]) === null || _slidableInformation$2 === void 0 ? void 0 : _slidableInformation$2.intersectionRatio;
+    });
+    $8tj43$createEffect(prevVisibility => {
+      // Have memo -> effect setup for diffing, so we do as little work as possible in unrelated cards
+      // as number is safe because undefined and NaN are both not < 0.5
+      const visibility = ourVisiblityInSlider();
+      if (visibility < 0.5 && (isNaN(prevVisibility) || visibility - prevVisibility < 0))
+        // When sliding this card completely into the background, collapse it
+        // Don't collapse it if we're about to put it more into visibility, to fix what's described at the end of https://www.loom.com/share/8796209c68764b18a0d565010929f594
+        setUserWantsExpanded(false);
+      return visibility;
+    });
+  }
   // Close us if another look expands
   $8tj43$createEffect(() => !expandedLooks_().has(us) && setUserWantsExpanded(false));
-  $8tj43$insert(container, () => [$8tj43$createComponent((0, $8tj43$Show), {
-    get when() {
-      return display_();
-    },
-    get fallback() {
-      return $8tj43$createComponent((0, $3ab4aa97880fb88d$export$3f37af283f8fb843), {
-        aspectRatio: "var(".concat((0, $5eaa00b951637e96$export$8a2234b5b1a5ebd4), ", ").concat(placeholderImageAspectRatio_, ")")
-      });
-    },
-    get children() {
-      return $8tj43$createComponent((0, $98688279b9059f50$export$9d4a4b669b1929ab), {
-        get src() {
-          var _display_, _display_$image_urls;
-          return (_display_ = display_()) === null || _display_ === void 0 ? void 0 : (_display_$image_urls = _display_.image_urls) === null || _display_$image_urls === void 0 ? void 0 : _display_$image_urls[0];
-        },
-        aspectRatio: placeholderImageAspectRatio_,
-        autoAdjustAspectRatio: true
-      });
-    }
-  }), $8tj43$createComponent((0, $4089a7972a508539$export$ebf0b1d4f90c09ae), {
-    displays_: () => {
-      var _display_2;
-      return (_display_2 = display_()) === null || _display_2 === void 0 ? void 0 : _display_2.displays;
-    },
-    userWantsExpandedSignal_: useWantsExpandedSignal_,
-    containerWidth_: containerWidth_,
-    animationDuration_: animationDuration_,
-    supportsHover_: supportsHover_,
-    FavoriteButton_: FavoriteButton_,
-    priceFormatting_: priceFormatting_,
-    pseudoRouter_: pseudoRouter_
-  })]);
-  return container;
+  return (() => {
+    var _el$ = $8tj43$getNextElement($697d8713dc82b9ab$var$_tmpl$),
+      _el$2 = _el$.firstChild,
+      [_el$3, _co$] = $8tj43$getNextMarker(_el$2.nextSibling),
+      _el$4 = _el$3.nextSibling,
+      [_el$5, _co$2] = $8tj43$getNextMarker(_el$4.nextSibling);
+    $8tj43$addEventListener(_el$, "click", $8tj43$catchify(() => setUserWantsExpanded(prev => !prev)), true);
+    $8tj43$use(el => {
+      container = el;
+      const ro = new ResizeObserver($8tj43$catchify(records => {
+        const last = records.at(-1);
+        if (!last) return;
+        const {
+          width: width,
+          height: height
+        } = last.contentRect;
+        setContainerWidth(width);
+        setContainerHeight(height);
+      }));
+      ro.observe(el);
+      $8tj43$onCleanup(() => ro.disconnect());
+    }, _el$);
+    _el$.classList.toggle("placeholder", !!!display_);
+    $8tj43$insert(_el$, $8tj43$createComponent((0, $8tj43$Show), {
+      get when() {
+        return display_();
+      },
+      get fallback() {
+        return $8tj43$createComponent((0, $3ab4aa97880fb88d$export$3f37af283f8fb843), {
+          aspectRatio: "var(".concat((0, $5eaa00b951637e96$export$8a2234b5b1a5ebd4), ", ").concat(placeholderImageAspectRatio_, ")")
+        });
+      },
+      get children() {
+        return $8tj43$createComponent((0, $98688279b9059f50$export$9d4a4b669b1929ab), {
+          get src() {
+            var _display_, _display_$image_urls;
+            return (_display_ = display_()) === null || _display_ === void 0 ? void 0 : (_display_$image_urls = _display_.image_urls) === null || _display_$image_urls === void 0 ? void 0 : _display_$image_urls[0];
+          },
+          aspectRatio: placeholderImageAspectRatio_,
+          autoAdjustAspectRatio: true
+        });
+      }
+    }), _el$3, _co$);
+    $8tj43$insert(_el$, $8tj43$createComponent((0, $4089a7972a508539$export$ebf0b1d4f90c09ae), {
+      displays_: () => {
+        var _display_2;
+        return (_display_2 = display_()) === null || _display_2 === void 0 ? void 0 : _display_2.displays;
+      },
+      userWantsExpandedSignal_: useWantsExpandedSignal_,
+      containerWidth_: containerWidth_,
+      animationDuration_: animationDuration_,
+      supportsHover_: supportsHover_,
+      FavoriteButton_: FavoriteButton_,
+      priceFormatting_: priceFormatting_,
+      pseudoRouter_: pseudoRouter_,
+      containerHeight_: containerHeight_
+    }), _el$5, _co$2);
+    $8tj43$runHydrationEvents();
+    return _el$;
+  })();
 }
 $8tj43$delegateEvents(["click"]);
 
@@ -3554,6 +3577,38 @@ let $c3820807ac1e6fd7$export$44dad306455dddf;
   DEPICT_ID["SEARCH_PAGE"] = "depict-search-page";
   DEPICT_ID["PLP_CATEGORY"] = "depict-plp-category";
 })($c3820807ac1e6fd7$export$44dad306455dddf || ($c3820807ac1e6fd7$export$44dad306455dddf = {}));
+
+/** @jsxImportSource solid-js */
+
+function $fc830a7ee59416ef$export$ebdc3711f7e02ccd(what_to_watch) {
+  const [width, setWidth] = $8tj43$createSignal();
+  const resizeObserver = new ResizeObserver($8tj43$catchify(records => {
+    for (let j = 0; j < records.length; j++) {
+      var _records$j$borderBoxS, _records$j$borderBoxS2, _records$j$borderBoxS3;
+      const width = (_records$j$borderBoxS = (_records$j$borderBoxS2 = records[j].borderBoxSize) === null || _records$j$borderBoxS2 === void 0 ? void 0 : (_records$j$borderBoxS3 = _records$j$borderBoxS2[0]) === null || _records$j$borderBoxS3 === void 0 ? void 0 : _records$j$borderBoxS3.inlineSize) !== null && _records$j$borderBoxS !== void 0 ? _records$j$borderBoxS : what_to_watch.getBoundingClientRect().width;
+      setWidth(width);
+    }
+  }));
+  // 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, $8tj43$observer).onexists(what_to_watch, _ref => {
+    let {
+      element: element
+    } = _ref;
+    return requestAnimationFrame($8tj43$catchify(() => {
+      const current_size = what_to_watch.getBoundingClientRect().width;
+      if (current_size)
+        // If element has size, set signal to that. ResizeObserver only triggers when the content is visible in some cases, but it might already have a size. This reduces size filter expanding animation jank in chrome.
+        setWidth(current_size);
+      resizeObserver.observe(element);
+    }));
+  });
+  $8tj43$onCleanup(() => {
+    resizeObserver.disconnect();
+    disconnect();
+  });
+  return width;
+}
 var $83c36ed4520d0335$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<svg xmlns=http://www.w3.org/2000/svg width=21 height=20 viewBox="0 0 21 20"fill=none><path fill-rule=evenodd d="M9.563 3.438c-3.107 0-5.625 2.518-5.625 5.625s2.518 5.625 5.625 5.625 5.625-2.518 5.625-5.625-2.518-5.625-5.625-5.625zm-7.5 5.625a7.5 7.5 0 1 1 15 0c0 1.733-.588 3.329-1.575 4.599l3.176 3.176a.94.94 0 0 1 0 1.326.94.94 0 0 1-1.326 0l-3.176-3.176a7.47 7.47 0 0 1-4.599 1.575 7.5 7.5 0 0 1-7.5-7.5z"fill=#0f0f0f>`);
 function $83c36ed4520d0335$export$f7658c347b037c3f() {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};