@depict-ai/ui 4.2.0 → 4.2.1

package/server/ES10/index.js

@@ -1,5 +1,5 @@
 import { add_to_version_info as $b8hua$add_to_version_info, fetch_retry as $b8hua$fetch_retry, base_url as $b8hua$base_url, slider_fractional_factory as $b8hua$slider_fractional_factory, dlog as $b8hua$dlog, camelCasifyObject as $b8hua$camelCasifyObject, make_random_classname as $b8hua$make_random_classname, n_col_styling_with_dist as $b8hua$n_col_styling_with_dist, catchify as $b8hua$catchify, layout_get_visible_recs_without_partial_rows as $b8hua$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $b8hua$layout_get_total_rec_amount_for_row, layout_media_query_header as $b8hua$layout_media_query_header, report as $b8hua$report, slider_fading_factory as $b8hua$slider_fading_factory, Amazing_Slider as $b8hua$Amazing_Slider, slider_snap_css as $b8hua$slider_snap_css, observer as $b8hua$observer, javascript_media_query as $b8hua$javascript_media_query, queueMacroTask as $b8hua$queueMacroTask, findMostFrequentItem as $b8hua$findMostFrequentItem, dwarn as $b8hua$dwarn, deparallelize_no_drop as $b8hua$deparallelize_no_drop, ContainedImage as $b8hua$ContainedImage, standard_price_format as $b8hua$standard_price_format, make_asyncIterable_exiter as $b8hua$make_asyncIterable_exiter, href_change_ipns as $b8hua$href_change_ipns, base64_encode_unicode as $b8hua$base64_encode_unicode, base64_decode_unicode as $b8hua$base64_decode_unicode, use_href_accessor as $b8hua$use_href_accessor, get_session_id as $b8hua$get_session_id, add_version_query_params as $b8hua$add_version_query_params, instant_exec_on_suspect_history_change as $b8hua$instant_exec_on_suspect_history_change, useExpandingContainer as $b8hua$useExpandingContainer, hex_to_rgb as $b8hua$hex_to_rgb, relative_luminance_from_rgb as $b8hua$relative_luminance_from_rgb, snakeCasifyObject as $b8hua$snakeCasifyObject, make_url_with_query_params as $b8hua$make_url_with_query_params, sort_obj as $b8hua$sort_obj, ListenableSet as $b8hua$ListenableSet1, insert_surfaces as $b8hua$insert_surfaces } from "@depict-ai/utilishared/ES10";
-import { ssr as $b8hua$ssr, ssrHydrationKey as $b8hua$ssrHydrationKey, escape as $b8hua$escape, createComponent as $b8hua$createComponent, mergeProps as $b8hua$mergeProps, isServer as $b8hua$isServer, ssrElement as $b8hua$ssrElement, ssrClassList as $b8hua$ssrClassList, insert as $b8hua$insert, ssrAttribute as $b8hua$ssrAttribute, ssrStyle as $b8hua$ssrStyle, spread as $b8hua$spread, Dynamic as $b8hua$Dynamic } from "solid-js/web";
+import { ssr as $b8hua$ssr, ssrHydrationKey as $b8hua$ssrHydrationKey, ssrStyle as $b8hua$ssrStyle, escape as $b8hua$escape, createComponent as $b8hua$createComponent, mergeProps as $b8hua$mergeProps, isServer as $b8hua$isServer, ssrElement as $b8hua$ssrElement, ssrClassList as $b8hua$ssrClassList, insert as $b8hua$insert, ssrAttribute as $b8hua$ssrAttribute, spread as $b8hua$spread, Dynamic as $b8hua$Dynamic } from "solid-js/web";
 import { createSignal as $b8hua$createSignal, createMemo as $b8hua$createMemo, createResource as $b8hua$createResource, Show as $b8hua$Show, Suspense as $b8hua$Suspense, untrack as $b8hua$untrack, createRenderEffect as $b8hua$createRenderEffect, Index as $b8hua$Index, createRoot as $b8hua$createRoot, onCleanup as $b8hua$onCleanup, For as $b8hua$For, getOwner as $b8hua$getOwner, runWithOwner as $b8hua$runWithOwner, createEffect as $b8hua$createEffect, createContext as $b8hua$createContext, useContext as $b8hua$useContext, createUniqueId as $b8hua$createUniqueId, createComputed as $b8hua$createComputed, ErrorBoundary as $b8hua$ErrorBoundary, splitProps as $b8hua$splitProps, mergeProps as $b8hua$mergeProps1, on as $b8hua$on, batch as $b8hua$batch, createSelector as $b8hua$createSelector, children as $b8hua$children, createReaction as $b8hua$createReaction, mapArray as $b8hua$mapArray } from "solid-js";
 import { ListenableSet as $b8hua$ListenableSet, catchify as $b8hua$catchify1, use_href_accessor as $b8hua$use_href_accessor1, report as $b8hua$report1 } from "@depict-ai/utilishared/ES10";
 import $b8hua$babelruntimehelpersdefineProperty from "@babel/runtime/helpers/defineProperty";
@@ -10,7 +10,7 @@ import { createStore as $b8hua$createStore, reconcile as $b8hua$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "4.2.0";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.2.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++) {
@@ -1173,22 +1173,43 @@ function $0c5b1686f971e5e7$export$b73ed90f0ee50dc3(_ref) {
     outerRef_: outerRef_,
     animationDuration_: animationDuration_
   } = _ref;
-  const variantToUse = display_ === null || display_ === void 0 ? void 0 : display_.variant_displays[display_ === null || display_ === void 0 ? void 0 : display_.variant_index];
-  const imageUrls = variantToUse === null || variantToUse === void 0 ? void 0 : variantToUse.image_urls;
-  const imageUrl = imageUrls === null || imageUrls === void 0 ? void 0 : imageUrls[0];
-  const secondaryImageUrl = imageUrls === null || imageUrls === void 0 ? void 0 : imageUrls[1];
+  const variantToUse = $b8hua$createMemo(() => {
+    const display = display_();
+    return display === null || display === void 0 ? void 0 : display.variant_displays[display === null || display === void 0 ? void 0 : display.variant_index];
+  });
+  const imageUrls = () => {
+    var _variantToUse;
+    return (_variantToUse = variantToUse()) === null || _variantToUse === void 0 ? void 0 : _variantToUse.image_urls;
+  };
+  const imageUrl = $b8hua$createMemo(() => {
+    var _imageUrls;
+    return (_imageUrls = imageUrls()) === null || _imageUrls === void 0 ? void 0 : _imageUrls[0];
+  });
+  const secondaryImageUrl = $b8hua$createMemo(() => {
+    var _imageUrls2;
+    return (_imageUrls2 = imageUrls()) === null || _imageUrls2 === void 0 ? void 0 : _imageUrls2[1];
+  });
   const [animationIsRunning, setAnimationIsRunning] = textFadeInAnimationRunning_;
   const [isExpandedThrottledByOurEffectRun, setIsExpandedThrottledByOurEffectRun] = $b8hua$createSignal($b8hua$untrack(isExpanded_));
   const [animationEffectExists, setAnimationEffectExists] = $b8hua$createSignal(false);
-  const [salePrice] = $b8hua$createResource(() => variantToUse === null || variantToUse === void 0 ? void 0 : variantToUse.sale_price);
-  const [originalPrice] = $b8hua$createResource(() => variantToUse === null || variantToUse === void 0 ? void 0 : variantToUse.original_price);
+  const [salePrice] = $b8hua$createResource(() => {
+    var _variantToUse2;
+    return (_variantToUse2 = variantToUse()) === null || _variantToUse2 === void 0 ? void 0 : _variantToUse2.sale_price;
+  });
+  const [originalPrice] = $b8hua$createResource(() => {
+    var _variantToUse3;
+    return (_variantToUse3 = variantToUse()) === null || _variantToUse3 === void 0 ? void 0 : _variantToUse3.original_price;
+  });
   const isOnSale = $b8hua$createMemo(() => salePrice.latest !== originalPrice.latest); // .latest doesn't trigger suspense
   const FavoriteButton = FavoriteButton_; // Just to get rid of the type error - TS doesn't understand <Show>
   return $b8hua$ssrElement("a", $b8hua$mergeProps({
     "class": "look-item"
-  }, () => isExpanded_() && !animationIsRunning() ? {
-    href: variantToUse === null || variantToUse === void 0 ? void 0 : variantToUse.page_url
-  } : {}), () => ["<!--$-->", $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
+  }, () => {
+    var _variantToUse4;
+    return isExpanded_() && !animationIsRunning() ? {
+      href: (_variantToUse4 = variantToUse()) === null || _variantToUse4 === void 0 ? void 0 : _variantToUse4.page_url
+    } : {};
+  }), () => ["<!--$-->", $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
     when: imageUrl,
     get fallback() {
       return $b8hua$createComponent((0, $3ab4aa97880fb88d$export$3f37af283f8fb843), {
@@ -1196,19 +1217,37 @@ function $0c5b1686f971e5e7$export$b73ed90f0ee50dc3(_ref) {
       });
     },
     get children() {
-      return $b8hua$ssr($0c5b1686f971e5e7$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$escape($b8hua$createComponent((0, $98688279b9059f50$export$9d4a4b669b1929ab), {
-        src: imageUrl,
-        get aspectRatio() {
-          return isExpanded_() ? 0.75 : 1;
+      return $b8hua$ssr($0c5b1686f971e5e7$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
+        get when() {
+          return imageUrl();
         },
-        get autoAdjustAspectRatio() {
-          return isExpanded_() ? "smoothed" : false;
+        get fallback() {
+          return $b8hua$createComponent((0, $3ab4aa97880fb88d$export$3f37af283f8fb843), {
+            aspectRatio: 1
+          });
+        },
+        get children() {
+          return $b8hua$createComponent((0, $98688279b9059f50$export$9d4a4b669b1929ab), {
+            get src() {
+              return imageUrl();
+            },
+            get aspectRatio() {
+              return isExpanded_() ? 0.75 : 1;
+            },
+            get autoAdjustAspectRatio() {
+              return isExpanded_() ? "smoothed" : false;
+            }
+          });
         }
       })), $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
-        when: secondaryImageUrl,
+        get when() {
+          return secondaryImageUrl();
+        },
         get children() {
           return $b8hua$createComponent((0, $98688279b9059f50$export$9d4a4b669b1929ab), {
-            src: secondaryImageUrl,
+            get src() {
+              return secondaryImageUrl();
+            },
             get aspectRatio() {
               return isExpanded_() ? 0.75 : 1;
             },
@@ -1225,11 +1264,11 @@ function $0c5b1686f971e5e7$export$b73ed90f0ee50dc3(_ref) {
       return (animationEffectExists() ? isExpandedThrottledByOurEffectRun() : isExpanded_()) || animationIsRunning();
     },
     get children() {
-      var _$escape2;
-      return $b8hua$ssr($0c5b1686f971e5e7$var$_tmpl$3, $b8hua$ssrHydrationKey(), (_$escape2 = $b8hua$escape(variantToUse === null || variantToUse === void 0 ? void 0 : variantToUse.title)) !== null && _$escape2 !== void 0 ? _$escape2 : $b8hua$escape($b8hua$createComponent((0, $ceafb6fb91c6f394$export$89c6019e4baa40b1), {
+      var _$escape2, _variantToUse5;
+      return $b8hua$ssr($0c5b1686f971e5e7$var$_tmpl$3, $b8hua$ssrHydrationKey(), (_$escape2 = $b8hua$escape((_variantToUse5 = variantToUse()) === null || _variantToUse5 === void 0 ? void 0 : _variantToUse5.title)) !== null && _$escape2 !== void 0 ? _$escape2 : $b8hua$escape($b8hua$createComponent((0, $ceafb6fb91c6f394$export$89c6019e4baa40b1), {
         height: "1em",
         width: "20ch"
-      })), "d-price ".concat(isOnSale() ? "sale" : ""), !variantToUse || salePrice.loading ? $b8hua$escape($b8hua$createComponent((0, $ceafb6fb91c6f394$export$89c6019e4baa40b1), {
+      })), "d-price ".concat(isOnSale() ? "sale" : ""), !variantToUse() || salePrice.loading ? $b8hua$escape($b8hua$createComponent((0, $ceafb6fb91c6f394$export$89c6019e4baa40b1), {
         height: "1em",
         width: "20ch"
       })) : $b8hua$escape(salePrice()), $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
@@ -1237,7 +1276,7 @@ function $0c5b1686f971e5e7$export$b73ed90f0ee50dc3(_ref) {
           return isOnSale();
         },
         get children() {
-          return $b8hua$ssr($0c5b1686f971e5e7$var$_tmpl$2, $b8hua$ssrHydrationKey(), !variantToUse || originalPrice.loading ? $b8hua$escape($b8hua$createComponent((0, $ceafb6fb91c6f394$export$89c6019e4baa40b1), {
+          return $b8hua$ssr($0c5b1686f971e5e7$var$_tmpl$2, $b8hua$ssrHydrationKey(), !variantToUse() || originalPrice.loading ? $b8hua$escape($b8hua$createComponent((0, $ceafb6fb91c6f394$export$89c6019e4baa40b1), {
             height: "1em",
             width: "20ch"
           })) : $b8hua$escape(originalPrice()));
@@ -1295,7 +1334,7 @@ async function $72017ebd8b9df947$var$checkIfIsAffectedByChromeBug326498383() {
     // Passive to make it more likely to run the callback before our timeout if the browser is under high load during the test
     {
       once: true,
-      passive: true
+      passive: false
     });
     await timeoutPromise;
   } catch (e) {
@@ -1303,7 +1342,7 @@ async function $72017ebd8b9df947$var$checkIfIsAffectedByChromeBug326498383() {
   }
   return isAffected;
 }
-var $4089a7972a508539$var$_tmpl$ = ["<div", ' class="scroll-padding"><div class="', '" style="', '">', "</div></div>"];
+var $4089a7972a508539$var$_tmpl$ = ["<div", ' class="scroll-padding">', "</div>"];
 function $4089a7972a508539$export$ebf0b1d4f90c09ae(_ref) {
   let {
     displays_: displays_,
@@ -1320,31 +1359,42 @@ function $4089a7972a508539$export$ebf0b1d4f90c09ae(_ref) {
   // The following three signals just contain the state if the animations are actually running and should only be set by the respective animation code
   const textFadeInAnimationRunning = $b8hua$createSignal(false);
   const [getSecondPartAnimationRunning] = textFadeInAnimationRunning;
-  // These expanded variables are what's used to trigger the second and first phase animations
   $72017ebd8b9df947$export$7b9a0e99f0aeb2f3().then(is => isAffectedByChromeBug = is);
   return $b8hua$createComponent((0, $5441862cd2f5e111$export$e68cff63f76bd15b), {
     get children() {
       return $b8hua$createComponent((0, $b8hua$Show), {
         get when() {
-          return containerWidth_();
+          return containerWidth_() || !displays_;
         },
         get children() {
-          return $b8hua$ssr($4089a7972a508539$var$_tmpl$, $b8hua$ssrHydrationKey(), "look-overlay ".concat(userWantsExpanded() ? "expanded" : "", " ").concat(!getSecondPartAnimationRunning() && userWantsExpanded() ? "resting-fully-expanded" : ""), $b8hua$ssrStyle("--look-card-width:".concat(containerWidth_(), "px;--look-item-height:").concat(lookItemHeight() || 200, "px")), $b8hua$escape($b8hua$createComponent((0, $b8hua$For), {
-            each: displays_,
-            children: (display, index) => $b8hua$createComponent((0, $0c5b1686f971e5e7$export$b73ed90f0ee50dc3), {
-              animationDuration_: animationDuration_,
-              display_: display,
-              FavoriteButton_: FavoriteButton_,
-              isExpanded_: userWantsExpanded,
-              textFadeInAnimationRunning_: textFadeInAnimationRunning,
-              outerRef_: el => $b8hua$createEffect(() => {
-                if (index() !== 0) return;
-                const resizeObserver = new ResizeObserver($b8hua$catchify(records => setLookItemHeight(records.at(-1).contentRect.height)));
-                resizeObserver.observe(el);
-                $b8hua$onCleanup(() => resizeObserver.disconnect());
-              })
-            })
-          })));
+          return $b8hua$ssr($4089a7972a508539$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$ssrElement("div", $b8hua$mergeProps({
+            get ["class"]() {
+              return "look-overlay ".concat(userWantsExpanded() ? "expanded" : "", " ").concat(!getSecondPartAnimationRunning() && userWantsExpanded() ? "resting-fully-expanded" : "");
+            }
+          }, () => displays_ && {
+            style: "--look-card-width:".concat(containerWidth_(), "px;--look-item-height:").concat(lookItemHeight() || 200, "px")
+          }), () => $b8hua$escape($b8hua$createComponent((0, $b8hua$Index), {
+            get each() {
+              return displays_ || Array.from({
+                length: 4
+              });
+            },
+            children: (display, index) => {
+              return $b8hua$createComponent((0, $0c5b1686f971e5e7$export$b73ed90f0ee50dc3), {
+                animationDuration_: animationDuration_,
+                display_: display,
+                FavoriteButton_: FavoriteButton_,
+                isExpanded_: userWantsExpanded,
+                textFadeInAnimationRunning_: textFadeInAnimationRunning,
+                outerRef_: el => $b8hua$createEffect(() => {
+                  if (index !== 0) return;
+                  const resizeObserver = new ResizeObserver($b8hua$catchify(records => setLookItemHeight(records.at(-1).contentRect.height)));
+                  resizeObserver.observe(el);
+                  $b8hua$onCleanup(() => resizeObserver.disconnect());
+                })
+              });
+            }
+          })), false));
         }
       });
     }
@@ -1370,30 +1420,35 @@ 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$ = ["<div", ' class="look-card" style="', '"></div>'];
-function $697d8713dc82b9ab$export$44809a8a3e867e30(display, info, FavoriteButton_) {
+var $697d8713dc82b9ab$var$_tmpl$ = ["<div", ' class="', '"></div>'];
+function $697d8713dc82b9ab$export$44809a8a3e867e30(_ref) {
+  let {
+    display_: display_,
+    expandedLooksSignal_: [expandedLooks_, setExpandedLooks],
+    FavoriteButton_: FavoriteButton_,
+    placeholderImageAspectRatio_: placeholderImageAspectRatio_,
+    animationDuration_: animationDuration_
+  } = _ref;
   // TODO: shopify, run displayTransformers to get dynamic prices
   // TODO: format prices
-  const animationDuration_ = 300;
-  const [coverImage] = (display === null || display === void 0 ? void 0 : display.image_urls) || [];
+  const [coverImage] = (display_ === null || display_ === void 0 ? void 0 : display_.image_urls) || [];
   const useWantsExpandedSignal_ = $b8hua$createSignal(false);
   const [userWantsExpanded, setUserWantsExpanded] = useWantsExpandedSignal_;
-  const [expandedLooks_, setExpandedLooks] = (info === null || info === void 0 ? void 0 : info.expandedLooksSignal_) || [];
   const supportsHover_ = $00a5b94f0c11efbb$export$d9f36cf74e24d595("(hover: hover) and (pointer: fine)");
   const us = Symbol("look");
-  const container = $b8hua$ssr($697d8713dc82b9ab$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$ssrStyle("--animation-duration: ".concat(animationDuration_, "ms")));
+  const container = $b8hua$ssr($697d8713dc82b9ab$var$_tmpl$, $b8hua$ssrHydrationKey(), "look-card ".concat(!display_ ? "placeholder" : ""));
   const containerWidth_ = $fc830a7ee59416ef$export$ebdc3711f7e02ccd(container);
-  const clickHandler = $b8hua$catchify(_ref => {
+  const clickHandler = $b8hua$catchify(_ref2 => {
     let {
       target: target
-    } = _ref;
+    } = _ref2;
     if (target !== container && !container.contains(target))
       // When clicking outside the look, close it
       setUserWantsExpanded(false);
   });
   addEventListener("click", clickHandler);
   $b8hua$onCleanup(() => removeEventListener("click", clickHandler));
-  $b8hua$createEffect(() => setExpandedLooks === null || setExpandedLooks === void 0 ? void 0 : setExpandedLooks(prev => {
+  $b8hua$createEffect(() => setExpandedLooks(prev => {
     if (userWantsExpanded()) {
       // Close the other expanded looks
       prev.clear();
@@ -1403,41 +1458,41 @@ function $697d8713dc82b9ab$export$44809a8a3e867e30(display, info, FavoriteButton
     return prev;
   }));
   // Close us if another look expands
-  $b8hua$createEffect(() => expandedLooks_ && !expandedLooks_().has(us) && setUserWantsExpanded(false));
-  $b8hua$insert(container, () => $b8hua$createComponent((0, $b8hua$Show), {
-    when: display,
+  $b8hua$createEffect(() => !expandedLooks_().has(us) && setUserWantsExpanded(false));
+  $b8hua$insert(container, () => [$b8hua$createComponent((0, $b8hua$Show), {
+    when: display_,
     get fallback() {
       return $b8hua$createComponent((0, $3ab4aa97880fb88d$export$3f37af283f8fb843), {
-        width: "100%",
-        height: "100%"
+        aspectRatio: placeholderImageAspectRatio_
       });
     },
     get children() {
-      return [$b8hua$createComponent((0, $98688279b9059f50$export$9d4a4b669b1929ab), {
+      return $b8hua$createComponent((0, $98688279b9059f50$export$9d4a4b669b1929ab), {
         src: coverImage,
-        aspectRatio: 0.75,
+        aspectRatio: placeholderImageAspectRatio_,
         autoAdjustAspectRatio: true
-      }), $b8hua$createComponent((0, $4089a7972a508539$export$ebf0b1d4f90c09ae), {
-        get displays_() {
-          return display === null || display === void 0 ? void 0 : display.displays;
-        },
-        userWantsExpandedSignal_: useWantsExpandedSignal_,
-        containerWidth_: containerWidth_,
-        animationDuration_: animationDuration_,
-        supportsHover_: supportsHover_,
-        FavoriteButton_: FavoriteButton_
-      })];
+      });
     }
-  }));
+  }), $b8hua$createComponent((0, $4089a7972a508539$export$ebf0b1d4f90c09ae), {
+    get displays_() {
+      return display_ === null || display_ === void 0 ? void 0 : display_.displays;
+    },
+    userWantsExpandedSignal_: useWantsExpandedSignal_,
+    containerWidth_: containerWidth_,
+    animationDuration_: animationDuration_,
+    supportsHover_: supportsHover_,
+    FavoriteButton_: FavoriteButton_
+  })]);
   return container;
 }
-var $cee56a95f722f55f$var$_tmpl$ = ["<div", ' class="depict recommendations looks">', "</div>"];
+var $cee56a95f722f55f$var$_tmpl$ = ["<div", ' class="depict recommendations looks" style="', '">', "</div>"];
 let $cee56a95f722f55f$var$expandedLooksSignal_;
 function $cee56a95f722f55f$export$1935e6bdfc5ed8ce(props) {
   return $83e8cf2c0b87a58a$export$23fca46f3143581f(() => {
     $cee56a95f722f55f$var$expandedLooksSignal_ || ($cee56a95f722f55f$var$expandedLooksSignal_ = $b8hua$createSignal(new Set(), {
       equals: false
     }));
+    const expandingAnimationDuration = 240;
     const grid_spacing_override = $b8hua$createMemo(() => {
       const {
         gridSpacing_: gridSpacing_
@@ -1469,13 +1524,16 @@ function $cee56a95f722f55f$export$1935e6bdfc5ed8ce(props) {
         return [];
       return decoded.listings;
     });
-    return $b8hua$ssr($cee56a95f722f55f$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$escape($b8hua$createComponent((0, $5441862cd2f5e111$export$e68cff63f76bd15b), {
+    return $b8hua$ssr($cee56a95f722f55f$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$ssrStyle("--animation-duration: ".concat(expandingAnimationDuration, "ms")), $b8hua$escape($b8hua$createComponent((0, $5441862cd2f5e111$export$e68cff63f76bd15b), {
       get children() {
         return $39ddb986053fb759$export$d41d19e89346fa2({
-          product_card_template_: (display, info) => $697d8713dc82b9ab$export$44809a8a3e867e30(display, info ? {
-            ...info,
+          product_card_template_: (display, info) => $697d8713dc82b9ab$export$44809a8a3e867e30({
+            display_: display,
+            FavoriteButton_: props.FavoriteButton_,
+            placeholderImageAspectRatio_: props.imagePlaceholderAspectRatio_,
+            animationDuration_: expandingAnimationDuration,
             expandedLooksSignal_: $cee56a95f722f55f$var$expandedLooksSignal_
-          } : info, props.FavoriteButton_),
+          }),
           recommendations_resource_: looksResource,
           title_: () => props.title_,
           layout_options_: $b8hua$createMemo(() => ({