@depict-ai/ui 4.3.1 → 4.3.3

package/ES10/index.js

@@ -1,8 +1,8 @@
-import { add_to_version_info as $8tj43$add_to_version_info, fetch_retry as $8tj43$fetch_retry, base_url as $8tj43$base_url, 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, dwarn as $8tj43$dwarn, deparallelize_no_drop as $8tj43$deparallelize_no_drop, ContainedImage as $8tj43$ContainedImage, standard_price_format as $8tj43$standard_price_format, 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, instant_exec_on_suspect_history_change as $8tj43$instant_exec_on_suspect_history_change, useExpandingContainer as $8tj43$useExpandingContainer, 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, ListenableSet as $8tj43$ListenableSet1, insert_surfaces as $8tj43$insert_surfaces, is_debug as $8tj43$is_debug } from "@depict-ai/utilishared/ES10";
-import { template as $8tj43$template, getNextElement as $8tj43$getNextElement, insert as $8tj43$insert, createComponent as $8tj43$createComponent, mergeProps as $8tj43$mergeProps, isServer as $8tj43$isServer, spread as $8tj43$spread, runHydrationEvents as $8tj43$runHydrationEvents, addEventListener as $8tj43$addEventListener, className as $8tj43$className, memo as $8tj43$memo, delegateEvents as $8tj43$delegateEvents, getNextMarker as $8tj43$getNextMarker, effect as $8tj43$effect, 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 { createSignal as $8tj43$createSignal, createMemo as $8tj43$createMemo, createResource as $8tj43$createResource, Show as $8tj43$Show, 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, createEffect as $8tj43$createEffect, createContext as $8tj43$createContext, useContext as $8tj43$useContext, createUniqueId as $8tj43$createUniqueId, createComputed as $8tj43$createComputed, ErrorBoundary as $8tj43$ErrorBoundary, splitProps as $8tj43$splitProps, mergeProps as $8tj43$mergeProps1, 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 { ListenableSet as $8tj43$ListenableSet, catchify as $8tj43$catchify1, use_href_accessor as $8tj43$use_href_accessor1, report as $8tj43$report1 } from "@depict-ai/utilishared/ES10";
+import { add_to_version_info as $8tj43$add_to_version_info, 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, useExpandingContainer as $8tj43$useExpandingContainer, 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, ListenableSet as $8tj43$ListenableSet1, insert_surfaces as $8tj43$insert_surfaces, is_debug as $8tj43$is_debug } from "@depict-ai/utilishared/ES10";
+import { template as $8tj43$template, getNextElement as $8tj43$getNextElement, insert as $8tj43$insert, createComponent as $8tj43$createComponent, mergeProps as $8tj43$mergeProps1, isServer as $8tj43$isServer, spread as $8tj43$spread, runHydrationEvents as $8tj43$runHydrationEvents, addEventListener as $8tj43$addEventListener, className as $8tj43$className, memo as $8tj43$memo, delegateEvents as $8tj43$delegateEvents, getNextMarker as $8tj43$getNextMarker, effect as $8tj43$effect, 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 { createSignal as $8tj43$createSignal, createMemo as $8tj43$createMemo, createResource as $8tj43$createResource, createEffect as $8tj43$createEffect, mergeProps as $8tj43$mergeProps, Show as $8tj43$Show, 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, report as $8tj43$report1 } from "@depict-ai/utilishared/ES10";
 import $8tj43$babelruntimehelpersclassPrivateFieldSet from "@babel/runtime/helpers/classPrivateFieldSet";
 import $8tj43$babelruntimehelpersclassPrivateFieldGet from "@babel/runtime/helpers/classPrivateFieldGet";
 import { createStore as $8tj43$createStore, reconcile as $8tj43$reconcile } from "solid-js/store";
@@ -10,7 +10,7 @@ import { createStore as $8tj43$createStore, reconcile as $8tj43$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "4.3.1";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.3.3";
 const $a9c7ba6087881ac2$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -453,7 +453,7 @@ function $63f1f8dbcd07d3b0$export$d21e32dfedac04be(props) {
   const container_class = "x" + $8tj43$createUniqueId();
   const container_element_ = (() => {
     var _el$ = $8tj43$getNextElement($63f1f8dbcd07d3b0$var$_tmpl$);
-    $8tj43$spread(_el$, $8tj43$mergeProps(() => props.element_attributes, {
+    $8tj43$spread(_el$, $8tj43$mergeProps1(() => props.element_attributes, {
       "classList": {
         [container_class]: true
       }
@@ -714,7 +714,7 @@ function $39ddb986053fb759$export$d41d19e89346fa2(_ref) {
       } = slider;
       const Layout = props => $63f1f8dbcd07d3b0$export$445d8d3f5f706a40(props, insert_here, true);
       // Do like this, so we don't have to call mergeProps ourselves
-      $8tj43$createComponent(Layout, $8tj43$mergeProps({
+      $8tj43$createComponent(Layout, $8tj43$mergeProps1({
         rows: "all",
         layout: "slider"
       }, layout_options_));
@@ -1031,7 +1031,7 @@ function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
   });
   // Work around https://github.com/solidjs/solid/issues/1828
   const img = new Image(); // Need to use new Image or browser might not start loading image before it's in the DOM
-  const [, otherAttributes] = $8tj43$splitProps(props, ["resolutions", "size", "src", "srcSet", "loading", "customUrls" // Can't have properties ending on underscore because the property name mangling will get confused by this <-
+  const [, otherAttributes] = $8tj43$splitProps(props, ["resolutions", "size", "src", "srcSet", "loading", "keyRatioUpdating", "customUrls" // Can't have properties ending on underscore because the property name mangling will get confused by this <-
   ]);
 
   const [hasSetSize, setHasSetSize] = $8tj43$createSignal(false);
@@ -1047,7 +1047,7 @@ function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
     if (loading === "force-lazy") return true;
     return loading === "lazy" && !isPrioritisedImage();
   });
-  const modifiedOtherAttributes = $8tj43$mergeProps1(otherAttributes, {
+  const modifiedOtherAttributes = $8tj43$mergeProps(otherAttributes, {
     get loading() {
       return shouldActuallyEnableLazyLoading() ? "lazy" : undefined;
     }
@@ -1087,13 +1087,18 @@ function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
   let hasDecodedFastPath = false;
   let timeoutSet = false;
   let gotCleanedUp = false;
+  let srcJustChanged = true;
   img.classList.add("s-responsive-image");
   if (listingContext) {
     let prevValue;
     const aspectRatios = listingContext[$56047603f9d212b6$export$f8945274f08a3105] || (listingContext[$56047603f9d212b6$export$f8945274f08a3105] = new Set());
     const [, setMostPrevalentAspectRatio] = listingContext[$56047603f9d212b6$export$6066eb417ed2e9f7] || (listingContext[$56047603f9d212b6$export$6066eb417ed2e9f7] = $8tj43$createSignal());
     img.addEventListener("load", $8tj43$catchify(() => {
-      // Save our aspect ratio whenever it changes, so that we can base the containers on the most dominant aspect ratio, used in SearchModalV2
+      if (props.keyRatioUpdating) {
+        if (!srcJustChanged) return;
+        srcJustChanged = false;
+      }
+      // Save our aspect ratio whenever it changes, so that we can base the containers on the most dominant aspect ratio, used in SearchModalV2 and LookItem
       const aspectRatio_ = img.naturalWidth / img.naturalHeight;
       if (prevValue) aspectRatios.delete(prevValue);
       const newValue = !isNaN(aspectRatio_) ? {
@@ -1114,7 +1119,11 @@ function $56047603f9d212b6$export$6e5611bc7e57e477(props) {
     $8tj43$onCleanup(() => prevValue && aspectRatios.delete(prevValue));
   }
   $8tj43$onCleanup(() => gotCleanedUp = true);
-  $8tj43$spread(img, $8tj43$mergeProps1(modifiedOtherAttributes), false, true);
+  $8tj43$spread(img, $8tj43$mergeProps(modifiedOtherAttributes), false, true);
+  $8tj43$createRenderEffect(() => {
+    props.src;
+    srcJustChanged = true;
+  });
   $8tj43$createEffect(() => {
     if (!props.size()) return; // wait until we have a size, run every time the size changes
     if (timeoutSet) return;
@@ -1182,48 +1191,22 @@ function $4df489344a0f97c7$export$e4b984597b71e989(props) {
     context[$4df489344a0f97c7$export$d7b7ab832c20e2f4] = $8tj43$createSignal();
   const [currentImageSize, setCurrentImageSize] = (context === null || context === void 0 ? void 0 : context[$4df489344a0f97c7$export$d7b7ab832c20e2f4]) || $4df489344a0f97c7$var$backupSizeSignal; // use global fallback signal (might lead to blurry images) if no context is available
   const [mostPrevalentAspectRatio] = context ? context[(0, $56047603f9d212b6$export$6066eb417ed2e9f7)] || (context[(0, $56047603f9d212b6$export$6066eb417ed2e9f7)] = $8tj43$createSignal()) : [];
-  const [aspectRatio, setAspectRatio] = $8tj43$createSignal($8tj43$untrack(() => props.aspectRatio));
   const container = $801e8845d3fa3653$export$94026ee33dbabc26({
     // Write getters manually instead of using JSX, so we can do more complex logic in the aspectRatio getter without increasing bundle size
     get class() {
       return props.class;
     },
     get aspectRatio() {
-      return aspectRatio();
+      if (props.autoAdjustAspectRatio) {
+        const targetRatio = mostPrevalentAspectRatio === null || mostPrevalentAspectRatio === void 0 ? void 0 : mostPrevalentAspectRatio();
+        if (targetRatio != undefined) return "var(".concat((0, $5eaa00b951637e96$export$8a2234b5b1a5ebd4), ", ").concat(targetRatio, ")");
+      }
+      return props.aspectRatio;
     }
   });
   const owner = $8tj43$getOwner();
   let createdSizeAccessor = false;
   let wasCleanedUp = false;
-  let timeout;
-  $8tj43$createEffect(() => {
-    const {
-      autoAdjustAspectRatio: autoAdjustAspectRatio
-    } = props;
-    if (autoAdjustAspectRatio) {
-      const targetRatio = mostPrevalentAspectRatio === null || mostPrevalentAspectRatio === void 0 ? void 0 : mostPrevalentAspectRatio();
-      if (targetRatio != undefined) {
-        const targetValue = "var(".concat((0, $5eaa00b951637e96$export$8a2234b5b1a5ebd4), ", ").concat(targetRatio, ")");
-        const updateAspectRatio = $8tj43$catchify(() => setAspectRatio(targetValue));
-        if (autoAdjustAspectRatio === "smoothed") {
-          if (!timeout)
-            // If we don't have a timeout yet, also update instantly. This is so that the aspect ratio does get set at the start of a transition, if it changes (when using smoothing).
-            updateAspectRatio();
-          clearTimeout(timeout);
-          timeout = setTimeout(() => {
-            timeout = undefined;
-            updateAspectRatio();
-          }, 500);
-          return;
-        }
-        return updateAspectRatio();
-      }
-    } else {
-      clearTimeout(timeout);
-      timeout = undefined;
-    }
-    setAspectRatio(props.aspectRatio);
-  });
   $8tj43$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
@@ -1237,7 +1220,7 @@ function $4df489344a0f97c7$export$e4b984597b71e989(props) {
     $8tj43$queueMacroTask(() => setCurrentImageSize()); // 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
   });
 
-  $8tj43$insert(container, $8tj43$createComponent((0, $56047603f9d212b6$export$6e5611bc7e57e477), $8tj43$mergeProps({
+  $8tj43$insert(container, $8tj43$createComponent((0, $56047603f9d212b6$export$6e5611bc7e57e477), $8tj43$mergeProps1({
     get size() {
       return $8tj43$createMemo(() => {
         var _currentImageSize;
@@ -1256,7 +1239,7 @@ function $4df489344a0f97c7$export$e4b984597b71e989(props) {
   return container;
 }
 function $98688279b9059f50$export$9d4a4b669b1929ab(props) {
-  return $8tj43$createComponent((0, $4df489344a0f97c7$export$e4b984597b71e989), $8tj43$mergeProps(props, {
+  return $8tj43$createComponent((0, $4df489344a0f97c7$export$e4b984597b71e989), $8tj43$mergeProps1(props, {
     get imgProps() {
       return {
         ...props.imgProps,
@@ -1273,6 +1256,12 @@ function $98688279b9059f50$export$9d4a4b669b1929ab(props) {
     }
   }));
 }
+function $60ec7a29849d81db$export$a71e92cfbb498adc(props) {
+  return $8tj43$createMemo(() => {
+    const price_formatting = props.price_formatting_;
+    return $8tj43$standard_price_format(props.price_, price_formatting.places_after_comma_, price_formatting.decimal_places_delimiter_, price_formatting.thousands_delimiter_);
+  });
+}
 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><!$><!/>`),
@@ -1281,10 +1270,12 @@ function $0c5b1686f971e5e7$export$b73ed90f0ee50dc3(_ref) {
   let {
     display_: display_,
     FavoriteButton_: FavoriteButton_,
-    isExpanded_: isExpanded_,
+    userWantsExpandedSignal_: [userWantsExpanded, setUserWantsExpanded],
     textFadeInAnimationRunning_: textFadeInAnimationRunning_,
     outerRef_: outerRef_,
-    animationDuration_: animationDuration_
+    animationDuration_: animationDuration_,
+    priceFormatting_: priceFormatting_,
+    pseudoRouter_: pseudoRouter_
   } = _ref;
   const variantToUse = $8tj43$createMemo(() => {
     const display = display_();
@@ -1295,7 +1286,7 @@ function $0c5b1686f971e5e7$export$b73ed90f0ee50dc3(_ref) {
     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_));
+  const [isExpandedThrottledByOurEffectRun, setIsExpandedThrottledByOurEffectRun] = $8tj43$createSignal($8tj43$untrack(userWantsExpanded));
   const [animationEffectExists, setAnimationEffectExists] = $8tj43$createSignal(false);
   const [salePrice] = $8tj43$createResource(() => {
     var _variantToUse2;
@@ -1305,7 +1296,12 @@ function $0c5b1686f971e5e7$export$b73ed90f0ee50dc3(_ref) {
     var _variantToUse3;
     return (_variantToUse3 = variantToUse()) === null || _variantToUse3 === void 0 ? void 0 : _variantToUse3.original_price;
   });
-  const isOnSale = $8tj43$createMemo(() => salePrice.latest !== originalPrice.latest); // .latest doesn't trigger suspense
+  const isOnSale = $8tj43$createMemo(() => !salePrice.loading && !originalPrice.loading && salePrice.latest !== originalPrice.latest); // .latest doesn't trigger suspense after the initial load
+  const enableLink = $8tj43$createMemo(() => userWantsExpanded() && !animationIsRunning());
+  const href = $8tj43$createMemo(() => {
+    var _variantToUse4;
+    return (_variantToUse4 = variantToUse()) === null || _variantToUse4 === void 0 ? void 0 : _variantToUse4.page_url;
+  });
   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),
@@ -1315,11 +1311,23 @@ function $0c5b1686f971e5e7$export$b73ed90f0ee50dc3(_ref) {
       [_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(() => {
-      var _variantToUse4;
-      return isExpanded_() && !animationIsRunning() ? {
-        href: (_variantToUse4 = variantToUse()) === null || _variantToUse4 === void 0 ? void 0 : _variantToUse4.page_url
-      } : {};
+    $8tj43$spread(_el$, $8tj43$mergeProps1(() => enableLink() ? {
+      href: href()
+    } : {}, {
+      get onClick() {
+        return $8tj43$catchify(event_ => {
+          if (enableLink()) {
+            pseudoRouter_.navigate_.go_to_({
+              new_url_: href(),
+              is_replace_: false,
+              event_: event_
+            });
+            if (event_.defaultPrevented)
+              // We single-page-navigated in this tab, close the look
+              setUserWantsExpanded(false);
+          }
+        });
+      }
     }), false, true);
     $8tj43$insert(_el$, $8tj43$createComponent((0, $8tj43$Show), {
       when: imageUrl,
@@ -1345,10 +1353,13 @@ function $0c5b1686f971e5e7$export$b73ed90f0ee50dc3(_ref) {
                 return imageUrl();
               },
               get aspectRatio() {
-                return isExpanded_() ? 0.75 : 1;
+                return userWantsExpanded() ? 0.75 : 1;
               },
               get autoAdjustAspectRatio() {
-                return isExpanded_() ? "smoothed" : false;
+                return userWantsExpanded();
+              },
+              imgProps: {
+                keyRatioUpdating: true
               }
             });
           }
@@ -1358,7 +1369,7 @@ function $0c5b1686f971e5e7$export$b73ed90f0ee50dc3(_ref) {
     }), _el$13, _co$3);
     $8tj43$insert(_el$, $8tj43$createComponent((0, $8tj43$Show), {
       get when() {
-        return (animationEffectExists() ? isExpandedThrottledByOurEffectRun() : isExpanded_()) || animationIsRunning();
+        return (animationEffectExists() ? isExpandedThrottledByOurEffectRun() : userWantsExpanded()) || animationIsRunning();
       },
       get children() {
         var _el$3 = $8tj43$getNextElement($0c5b1686f971e5e7$var$_tmpl$3),
@@ -1386,7 +1397,7 @@ function $0c5b1686f971e5e7$export$b73ed90f0ee50dc3(_ref) {
             setAnimationIsRunning(true);
             $8tj43$runWithOwner(owner, () => {
               $8tj43$createRenderEffect(() => {
-                const expanded = isExpanded_();
+                const expanded = userWantsExpanded();
                 // Still glitches in chrome (probably not fixable) and sometimes the timing is off in Safari but fuck it, I couldn't massage the WAAPI to improve it in any way (without reading computed style) to make the reversing of animations glitch less
                 textContainerAnimation.pause();
                 textContainerAnimation.updatePlaybackRate(expanded ? 1 : -1);
@@ -1409,26 +1420,68 @@ function $0c5b1686f971e5e7$export$b73ed90f0ee50dc3(_ref) {
             width: "20ch"
           });
         });
-        $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$6, $8tj43$createComponent((0, $8tj43$Show), {
+          get when() {
+            return variantToUse() && !salePrice.loading;
+          },
+          get fallback() {
+            return $8tj43$createComponent((0, $ceafb6fb91c6f394$export$89c6019e4baa40b1), {
+              height: "1em",
+              width: "20ch"
+            });
+          },
+          get children() {
+            return $8tj43$createComponent((0, $8tj43$Show), {
+              get when() {
+                return salePrice.latest;
+              },
+              get children() {
+                return [$8tj43$memo(() => priceFormatting_().pre_), $8tj43$createComponent((0, $60ec7a29849d81db$export$a71e92cfbb498adc), {
+                  get price_() {
+                    return salePrice();
+                  },
+                  get price_formatting_() {
+                    return priceFormatting_();
+                  }
+                }), $8tj43$memo(() => priceFormatting_().post_)];
+              }
+            });
+          }
+        }));
         $8tj43$insert(_el$4, $8tj43$createComponent((0, $8tj43$Show), {
           get when() {
             return isOnSale();
           },
           get children() {
             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();
-            })());
+            $8tj43$insert(_el$7, $8tj43$createComponent((0, $8tj43$Show), {
+              get when() {
+                return variantToUse() && !originalPrice.loading;
+              },
+              get fallback() {
+                return $8tj43$createComponent((0, $ceafb6fb91c6f394$export$89c6019e4baa40b1), {
+                  height: "1em",
+                  width: "20ch"
+                });
+              },
+              get children() {
+                return $8tj43$createComponent((0, $8tj43$Show), {
+                  get when() {
+                    return salePrice.latest;
+                  },
+                  get children() {
+                    return [$8tj43$memo(() => priceFormatting_().pre_), $8tj43$createComponent((0, $60ec7a29849d81db$export$a71e92cfbb498adc), {
+                      get price_() {
+                        return originalPrice();
+                      },
+                      get price_formatting_() {
+                        return priceFormatting_();
+                      }
+                    }), $8tj43$memo(() => priceFormatting_().post_)];
+                  }
+                });
+              }
+            }));
             return _el$7;
           }
         }), _el$9, _co$);
@@ -1503,10 +1556,12 @@ function $4089a7972a508539$export$ebf0b1d4f90c09ae(_ref) {
   let {
     displays_: displays_,
     FavoriteButton_: FavoriteButton_,
-    userWantsExpandedSignal_: [userWantsExpanded, setUserWantsExpanded],
+    userWantsExpandedSignal_: userWantsExpandedSignal_,
     containerWidth_: containerWidth_,
     animationDuration_: animationDuration_,
-    supportsHover_: supportsHover_
+    supportsHover_: supportsHover_,
+    priceFormatting_: priceFormatting_,
+    pseudoRouter_: pseudoRouter_
   } = _ref;
   let isAffectedByChromeBug = false;
   // If the user requests the drawer to be expanded or not
@@ -1515,6 +1570,7 @@ 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 = $8tj43$createSignal(false);
   const [getSecondPartAnimationRunning] = textFadeInAnimationRunning;
+  const [userWantsExpanded, setUserWantsExpanded] = userWantsExpandedSignal_;
   $72017ebd8b9df947$export$7b9a0e99f0aeb2f3().then(is => isAffectedByChromeBug = is);
   return $8tj43$createComponent((0, $5441862cd2f5e111$export$e68cff63f76bd15b), {
     get children() {
@@ -1536,7 +1592,7 @@ function $4089a7972a508539$export$ebf0b1d4f90c09ae(_ref) {
               behavior: "smooth"
             });
           }), _el$2);
-          $8tj43$spread(_el$2, $8tj43$mergeProps({
+          $8tj43$spread(_el$2, $8tj43$mergeProps1({
             get classList() {
               return {
                 expanded: userWantsExpanded(),
@@ -1560,11 +1616,13 @@ function $4089a7972a508539$export$ebf0b1d4f90c09ae(_ref) {
             },
             children: (display, index) => {
               return $8tj43$createComponent((0, $0c5b1686f971e5e7$export$b73ed90f0ee50dc3), {
+                pseudoRouter_: pseudoRouter_,
                 animationDuration_: animationDuration_,
                 display_: display,
                 FavoriteButton_: FavoriteButton_,
-                isExpanded_: userWantsExpanded,
+                userWantsExpandedSignal_: userWantsExpandedSignal_,
                 textFadeInAnimationRunning_: textFadeInAnimationRunning,
+                priceFormatting_: priceFormatting_,
                 outerRef_: el => $8tj43$createEffect(() => {
                   if (index !== 0) return;
                   const resizeObserver = new ResizeObserver($8tj43$catchify(records => setLookItemHeight(records.at(-1).contentRect.height)));
@@ -1608,10 +1666,10 @@ function $697d8713dc82b9ab$export$44809a8a3e867e30(_ref) {
     expandedLooksSignal_: [expandedLooks_, setExpandedLooks],
     FavoriteButton_: FavoriteButton_,
     placeholderImageAspectRatio_: placeholderImageAspectRatio_,
-    animationDuration_: animationDuration_
+    animationDuration_: animationDuration_,
+    priceFormatting_: priceFormatting_,
+    pseudoRouter_: pseudoRouter_
   } = _ref;
-  // TODO: shopify, run displayTransformers to get dynamic prices
-  // TODO: format prices
   const [coverImage] = (display_ === null || display_ === void 0 ? void 0 : display_.image_urls) || [];
   const useWantsExpandedSignal_ = $8tj43$createSignal(false);
   const [userWantsExpanded, setUserWantsExpanded] = useWantsExpandedSignal_;
@@ -1657,7 +1715,7 @@ function $697d8713dc82b9ab$export$44809a8a3e867e30(_ref) {
     when: display_,
     get fallback() {
       return $8tj43$createComponent((0, $3ab4aa97880fb88d$export$3f37af283f8fb843), {
-        aspectRatio: placeholderImageAspectRatio_
+        aspectRatio: "var(".concat((0, $5eaa00b951637e96$export$8a2234b5b1a5ebd4), ", ").concat(placeholderImageAspectRatio_, ")")
       });
     },
     get children() {
@@ -1675,11 +1733,137 @@ function $697d8713dc82b9ab$export$44809a8a3e867e30(_ref) {
     containerWidth_: containerWidth_,
     animationDuration_: animationDuration_,
     supportsHover_: supportsHover_,
-    FavoriteButton_: FavoriteButton_
+    FavoriteButton_: FavoriteButton_,
+    priceFormatting_: priceFormatting_,
+    pseudoRouter_: pseudoRouter_
   })]);
   return container;
 }
 $8tj43$delegateEvents(["click"]);
+
+/**
+ * This function is used to determine if the user is trying to open a link in a new tab or window, and we therefore should not single page navigate
+ * @param clickEvent The click event that triggered the navigation
+ */
+function $9b35d1384e31813a$export$29d28dadc2d6b631(clickEvent) {
+  return (clickEvent === null || clickEvent === void 0 ? void 0 : clickEvent.button) || (clickEvent === null || clickEvent === void 0 ? void 0 : clickEvent.metaKey) || (clickEvent === null || clickEvent === void 0 ? void 0 : clickEvent.ctrlKey) || (clickEvent === null || clickEvent === void 0 ? void 0 : clickEvent.shiftKey // if true, shift button on windows, linux or macOS which opens in a new window
+  );
+}
+
+function $ac571292d606f30b$var$_classPrivateMethodInitSpec(obj, privateSet) {
+  $ac571292d606f30b$var$_checkPrivateRedeclaration(obj, privateSet);
+  privateSet.add(obj);
+}
+function $ac571292d606f30b$var$_checkPrivateRedeclaration(obj, privateCollection) {
+  if (privateCollection.has(obj)) throw new TypeError("Cannot initialize the same private elements twice on an object");
+}
+function $ac571292d606f30b$var$_classPrivateMethodGet(receiver, privateSet, fn) {
+  if (!privateSet.has(receiver)) throw new TypeError("attempted to get private field on non-instance");
+  return fn;
+}
+var $ac571292d606f30b$var$_throwing_on_navigation = /*#__PURE__*/new WeakSet();
+var $ac571292d606f30b$var$_get_navigation_happened_promise = /*#__PURE__*/new WeakSet();
+class $ac571292d606f30b$export$7e1297a3a19f10d8 {
+  /**
+  * Function that will be called when we want to navigate, or a string saying it's not an SPA. You can change this OTG
+  */ /**
+     * We store listing_id in history.state and do operate on this both here and in js-ui, this is the key to be used which js-ui provides
+     */ /**
+        * Vue has async router that needs to be awaited (it navigates after a microtask)
+        * This standardises waiting for all kinds of routers
+        */
+  constructor(on_navigation, listing_query_state_key) {
+    $ac571292d606f30b$var$_classPrivateMethodInitSpec(this, $ac571292d606f30b$var$_get_navigation_happened_promise);
+    $ac571292d606f30b$var$_classPrivateMethodInitSpec(this, $ac571292d606f30b$var$_throwing_on_navigation);
+    $8tj43$babelruntimehelpersdefineProperty(this, "on_navigation_", void 0);
+    $8tj43$babelruntimehelpersdefineProperty(this, "listing_query_state_key", void 0);
+    $8tj43$babelruntimehelpersdefineProperty(this, "navigate_", {
+      /**
+      * Call this if you *just* want to replace the state object in history.state
+      */
+      replace_state_: new_state => {
+        var _globalThis$history;
+        // This doesn't break any router, so we just do this directly for now, since many don't expose an interface for changing the state
+        globalThis === null || globalThis === void 0 || (_globalThis$history = globalThis.history) === null || _globalThis$history === void 0 || _globalThis$history.replaceState(new_state, "");
+      },
+      /**
+      * Call this to change the URL
+      * @param new_url_ new URL to go to
+      * @param event_ event if you have this in a click handler, will not do anything on cmd/ctrl or non-left click then
+      * @param force_spa_navigation_ if you want to force SPA navigation even if on_navigation_ is set to "hard_navigation". You should only set this to true for inter-SDK-page navigations
+      * @param is_replace_ if you want to replace the current URL in history instead of pushing a new one
+      * @param listing_id_ If you are navigating to a category and know the listing_id of, please provide it. This is for making a better devEx in js-ui
+      */
+      go_to_: $8tj43$catchify(async _ref => {
+        let {
+          new_url_: raw_new_url,
+          event_: event_,
+          force_spa_navigation_: force_spa_navigation_,
+          is_replace_: is_replace_,
+          listing_query_: listing_query_,
+          scroll = true
+        } = _ref;
+        const new_url_ = raw_new_url instanceof URL ? raw_new_url : new URL(raw_new_url, location.origin);
+        const wants_hard_navigation = this.on_navigation_ === "hard_navigation";
+        if ($9b35d1384e31813a$export$29d28dadc2d6b631(event_)) return;
+        const different_origin = new_url_.origin !== location.origin;
+        if (wants_hard_navigation && (!force_spa_navigation_ || different_origin)) {
+          if (force_spa_navigation_ && different_origin)
+            // If we call history.pushState on a different origin, it will throw an error, so fallback to hard navigations
+            $8tj43$dwarn("Can't single page navigate to", new_url_.href, "due to different origin, this MIGHT mean you should fix the URLs");
+          if (!event_)
+            // If we haven't gotten an event, nothing will happen by not calling prevent default, so we need to change the URL
+            location.assign(new_url_);
+          return;
+        }
+        event_ === null || event_ === void 0 || event_.preventDefault();
+        const promise = $ac571292d606f30b$var$_classPrivateMethodGet(this, $ac571292d606f30b$var$_get_navigation_happened_promise, $ac571292d606f30b$var$_get_navigation_happened_promise2).call(this, true);
+        if (force_spa_navigation_ && wants_hard_navigation) {
+          // Don't allow hard navigation if we're forcing SPA navigation, which we do for things where PageReplacer can be used for performance
+          const new_state = history.state;
+          if (listing_query_) {
+            // In JS-UI we need to know the listing_id of the current category, therefore push it into state
+            if (!this.listing_query_state_key) $8tj43$report(new Error("listing_query_state_key is not set"), "error");
+            new_state[this.listing_query_state_key] = listing_query_;
+          }
+          history[is_replace_ ? "replaceState" : "pushState"](new_state, "", new_url_);
+        } else $ac571292d606f30b$var$_classPrivateMethodGet(this, $ac571292d606f30b$var$_throwing_on_navigation, $ac571292d606f30b$var$_throwing_on_navigation2).call(this, {
+          is_replace: is_replace_,
+          new_url: new_url_ instanceof URL ? new_url_ : new URL(new_url_, location.origin),
+          scroll: scroll
+        });
+        await promise;
+      })
+    });
+    this.listing_query_state_key = listing_query_state_key;
+    this.on_navigation_ = on_navigation;
+  }
+}
+function $ac571292d606f30b$var$_throwing_on_navigation2() {
+  const {
+    on_navigation_: on_navigation_
+  } = this;
+  if (typeof on_navigation_ !== "function") throw new Error("on_navigation_ is not a function");
+  // make sure that we don't accidentally catchify if the SDK consumer has fucked up
+  try {
+    return on_navigation_(...arguments);
+  } catch (e) {
+    queueMicrotask(() => {
+      throw e;
+    });
+  }
+}
+function $ac571292d606f30b$var$_get_navigation_happened_promise2(is_replace) {
+  return new Promise(resolve => {
+    const handler = what_happened => {
+      if (what_happened === (is_replace ? "replaceState" : "pushState")) {
+        resolve();
+        (0, $8tj43$instant_exec_on_suspect_history_change).delete(handler);
+      }
+    };
+    (0, $8tj43$instant_exec_on_suspect_history_change).add(handler);
+  });
+}
 var $cee56a95f722f55f$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div class="depict recommendations looks"style=--animation-duration:240ms>`);
 let $cee56a95f722f55f$var$expandedLooksSignal_;
 function $cee56a95f722f55f$export$1935e6bdfc5ed8ce(props) {
@@ -1688,6 +1872,7 @@ function $cee56a95f722f55f$export$1935e6bdfc5ed8ce(props) {
       equals: false
     }));
     const expandingAnimationDuration = 240;
+    const pseudoRouter = new (0, $ac571292d606f30b$export$7e1297a3a19f10d8)("hard_navigation");
     const grid_spacing_override = $8tj43$createMemo(() => {
       const {
         gridSpacing_: gridSpacing_
@@ -1715,21 +1900,37 @@ function $cee56a95f722f55f$export$1935e6bdfc5ed8ce(props) {
       });
       const decoded = await (response === null || response === void 0 ? void 0 : (_json = (_ref2 = response).json) === null || _json === void 0 ? void 0 : _json.call(_ref2).catch(() => false));
       if (!decoded)
-        // If network fails, make sure to return empty array adn SolidRecommendationSlider will remove its elements
+        // If network fails, make sure to return empty array and SolidRecommendationSlider will remove its elements
         return [];
-      return decoded.listings;
+      const {
+        listings: listings
+      } = decoded;
+      const baseData = {
+        merchant: merchant,
+        market: market,
+        locale: locale
+      };
+      return $cee56a95f722f55f$var$runDisplayTransformersForLooks(baseData, listings, props.displayTransformers_);
+    });
+    $8tj43$createEffect(() => {
+      const {
+        onNavigation_: onNavigation_
+      } = props;
+      if (onNavigation_) pseudoRouter.on_navigation_ = onNavigation_;
     });
     return (() => {
       var _el$ = $8tj43$getNextElement($cee56a95f722f55f$var$_tmpl$);
       $8tj43$insert(_el$, $8tj43$createComponent((0, $5441862cd2f5e111$export$e68cff63f76bd15b), {
         get children() {
           return $39ddb986053fb759$export$d41d19e89346fa2({
-            product_card_template_: (display, info) => $697d8713dc82b9ab$export$44809a8a3e867e30({
+            product_card_template_: display => $697d8713dc82b9ab$export$44809a8a3e867e30({
               display_: display,
               FavoriteButton_: props.FavoriteButton_,
               placeholderImageAspectRatio_: props.imagePlaceholderAspectRatio_,
               animationDuration_: expandingAnimationDuration,
-              expandedLooksSignal_: $cee56a95f722f55f$var$expandedLooksSignal_
+              expandedLooksSignal_: $cee56a95f722f55f$var$expandedLooksSignal_,
+              priceFormatting_: () => props.priceFormatting_,
+              pseudoRouter_: pseudoRouter
             }),
             recommendations_resource_: looksResource,
             title_: () => props.title_,
@@ -1744,6 +1945,58 @@ function $cee56a95f722f55f$export$1935e6bdfc5ed8ce(props) {
     })();
   }, "LookSlider failed");
 }
+async function $cee56a95f722f55f$var$runDisplayTransformersForLooks(baseData, listings, displayTransformers) {
+  try {
+    const {
+      products: productTransformer,
+      categories: providedListingTransformer
+    } = displayTransformers || {};
+    if (!productTransformer && !providedListingTransformer) return listings;
+    const listingTransformer = providedListingTransformer || (_ref3 => {
+      let {
+        data: data
+      } = _ref3;
+      return data;
+    });
+    const displaysToTransform = [];
+    const displayIdsPerListingId = {};
+    const transformedListingsPromise = listingTransformer({
+      ...baseData,
+      data: listings.map(_ref4 => {
+        let {
+          displays: displays,
+          ...listing
+        } = _ref4;
+        // Populate our displays by id and displayIdToListings object in the .map where we add ancestors to the listings, for peak efficiency
+        for (let i = 0; i < displays.length; i++) {
+          var _listing$listing_id;
+          const display = displays[i];
+          const uniqueIdOfDisplay = $6a4c7ed6d005505c$export$548d053aba053d79(display);
+          displaysToTransform.push(display);
+          (displayIdsPerListingId[_listing$listing_id = listing.listing_id] || (displayIdsPerListingId[_listing$listing_id] = [])).push(uniqueIdOfDisplay);
+        }
+        return {
+          ...listing,
+          ancestors: []
+        };
+      })
+    });
+    // This allows the person providing the displayTransformer to re-order and remove displays
+    const transformedProducts = productTransformer ? await productTransformer({
+      ...baseData,
+      displays: displaysToTransform
+    }) : displaysToTransform;
+    const transformedListings = await transformedListingsPromise;
+    const transformedDisplayById = Object.fromEntries(transformedProducts.map(display => [$6a4c7ed6d005505c$export$548d053aba053d79(display), display]));
+    return transformedListings.map(listing => $8tj43$mergeProps(listing, {
+      // use mergeProps because in preview browser we add getters in this object, that would be called too early otherwise
+      displays: (displayIdsPerListingId[listing.listing_id] || []).map(displayId => transformedDisplayById[displayId]).filter(v => v)
+    }));
+  } catch (e) {
+    $8tj43$dwarn("Displaytransformers threw", e);
+    return [];
+  }
+}
 const $68e6625c8d51f847$export$3064e1e8c6513da3 = new Set();
 let $68e6625c8d51f847$var$has_ran = false;
 function $68e6625c8d51f847$export$5162a71f252e6122() {
@@ -1785,15 +2038,6 @@ function $68e6625c8d51f847$var$starts_with_any_prefix(key) {
   }
 }
 
-/**
- * This function is used to determine if the user is trying to open a link in a new tab or window, and we therefore should not single page navigate
- * @param clickEvent The click event that triggered the navigation
- */
-function $9b35d1384e31813a$export$29d28dadc2d6b631(clickEvent) {
-  return (clickEvent === null || clickEvent === void 0 ? void 0 : clickEvent.button) || (clickEvent === null || clickEvent === void 0 ? void 0 : clickEvent.metaKey) || (clickEvent === null || clickEvent === void 0 ? void 0 : clickEvent.ctrlKey) || (clickEvent === null || clickEvent === void 0 ? void 0 : clickEvent.shiftKey // if true, shift button on windows, linux or macOS which opens in a new window
-  );
-}
-
 /**
  * Symbol used to identify the version of a SearchModal function. Values right now: 1 = 1st gen classic modal, 2 = second gen modal
  */
@@ -1834,12 +2078,6 @@ function $01c33966d9ddb108$export$f50b88e2a00918b5(fn) {
     }
   };
 }
-function $60ec7a29849d81db$export$a71e92cfbb498adc(props) {
-  return $8tj43$createMemo(() => {
-    const price_formatting = props.price_formatting_;
-    return $8tj43$standard_price_format(props.price_, price_formatting.places_after_comma_, price_formatting.decimal_places_delimiter_, price_formatting.thousands_delimiter_);
-  });
-}
 function $d0883254246d3eb6$export$fb40a80c530e5f2b(selectedIndex, groupIndex, indexInGroup) {
   const isSelected = $8tj43$createMemo(() => {
     const selectedValue = selectedIndex();
@@ -3277,7 +3515,7 @@ function $584c06c09cf4609d$export$b94867ecbd698f21(_ref) {
     $8tj43$insert(_el$5, $8tj43$createComponent((0, $9783d437ad61594c$export$3b621d86b1566b2), {}));
     var _ref$2 = submit_button_ref_;
     typeof _ref$2 === "function" ? $8tj43$use(_ref$2, _el$6) : submit_button_ref_ = _el$6;
-    $8tj43$spread(_el$6, $8tj43$mergeProps({
+    $8tj43$spread(_el$6, $8tj43$mergeProps1({
       get onClick() {
         return $8tj43$catchify(() => submit_query_());
       }
@@ -3934,7 +4172,7 @@ function $26db6925469636a4$export$67152d26d4f56ee8(_ref) {
   }); // <- could be made reactive getter created in displayTransformers, read it in memo here since it might create computations (for example in the preview-brower), and there's no owner in the onClick handler
   const LinkToListing = props => (() => {
     var _el$ = $8tj43$getNextElement($26db6925469636a4$var$_tmpl$);
-    $8tj43$spread(_el$, $8tj43$mergeProps(props, {
+    $8tj43$spread(_el$, $8tj43$mergeProps1(props, {
       get href() {
         return href();
       },
@@ -4350,7 +4588,7 @@ function $4acc866f8fdfc002$export$af1fb307bbba2417(_ref) {
   $8tj43$createComputed($8tj43$on(search_field_value_[0], () => !suggestions_updating_blocked() && set_selected_index(undefined), {
     defer: true
   })); // reset autocomplete position if query changes
-  return [$8tj43$createComponent((0, $5175a47d13b7c228$export$d4994a86c6235f72), $8tj43$mergeProps(sharedSuggestionProps, {
+  return [$8tj43$createComponent((0, $5175a47d13b7c228$export$d4994a86c6235f72), $8tj43$mergeProps1(sharedSuggestionProps, {
     get title_() {
       return i18n_.popular_;
     },
@@ -4360,7 +4598,7 @@ function $4acc866f8fdfc002$export$af1fb307bbba2417(_ref) {
       return itemIndexes_.suggestionsIndex_;
     },
     showPlaceholders_: () => showPlaceholders() || noResults_() && !noResultsPopularSuggestions.latest
-  })), $8tj43$createComponent((0, $5175a47d13b7c228$export$d4994a86c6235f72), $8tj43$mergeProps(sharedSuggestionProps, {
+  })), $8tj43$createComponent((0, $5175a47d13b7c228$export$d4994a86c6235f72), $8tj43$mergeProps1(sharedSuggestionProps, {
     get title_() {
       return i18n_.previous_;
     },
@@ -4377,7 +4615,7 @@ function $4acc866f8fdfc002$export$af1fb307bbba2417(_ref) {
       return _el$;
     })(),
     showPlaceholders_: () => false
-  })), $8tj43$createComponent((0, $5175a47d13b7c228$export$d4994a86c6235f72), $8tj43$mergeProps(sharedSuggestionProps, {
+  })), $8tj43$createComponent((0, $5175a47d13b7c228$export$d4994a86c6235f72), $8tj43$mergeProps1(sharedSuggestionProps, {
     get title_() {
       return i18n_.content_;
     },
@@ -4913,7 +5151,7 @@ function $6a439680ae7e9ba3$export$b2539bed5023c21c(props) {
   return $8tj43$createComponent($6a439680ae7e9ba3$var$TabsContext.Provider, {
     value: new (0, $8tj43$ListenableSet)(),
     get children() {
-      return $8tj43$createComponent($6a439680ae7e9ba3$var$ActualTabs, $8tj43$mergeProps(props, {
+      return $8tj43$createComponent($6a439680ae7e9ba3$var$ActualTabs, $8tj43$mergeProps1(props, {
         get children() {
           return props.children;
         }
@@ -4943,7 +5181,7 @@ function $6a439680ae7e9ba3$var$ActualTabs(props) {
     },
     children: item => {
       const weSelected = $8tj43$createMemo(() => isSelected(item().id));
-      return $8tj43$createComponent((0, $8tj43$Dynamic), $8tj43$mergeProps({
+      return $8tj43$createComponent((0, $8tj43$Dynamic), $8tj43$mergeProps1({
         get component() {
           return props.AnchorComponent;
         },
@@ -5054,7 +5292,7 @@ function $6a439680ae7e9ba3$export$3e41faf802a29e71(props) {
   if (!currentTabs) throw new Error("Tab must be a child of Tabs");
   const id = $8tj43$createUniqueId();
   const ourSet = currentTabs;
-  const extendedProps = $8tj43$mergeProps1({
+  const extendedProps = $8tj43$mergeProps({
     id: id
   }, props);
   ourSet.add(extendedProps);
@@ -5174,120 +5412,6 @@ function $972f6bce0f9d61be$var$history_state_change(signals, entries, state) {
     }
   });
 }
-function $ac571292d606f30b$var$_classPrivateMethodInitSpec(obj, privateSet) {
-  $ac571292d606f30b$var$_checkPrivateRedeclaration(obj, privateSet);
-  privateSet.add(obj);
-}
-function $ac571292d606f30b$var$_checkPrivateRedeclaration(obj, privateCollection) {
-  if (privateCollection.has(obj)) throw new TypeError("Cannot initialize the same private elements twice on an object");
-}
-function $ac571292d606f30b$var$_classPrivateMethodGet(receiver, privateSet, fn) {
-  if (!privateSet.has(receiver)) throw new TypeError("attempted to get private field on non-instance");
-  return fn;
-}
-var $ac571292d606f30b$var$_throwing_on_navigation = /*#__PURE__*/new WeakSet();
-var $ac571292d606f30b$var$_get_navigation_happened_promise = /*#__PURE__*/new WeakSet();
-class $ac571292d606f30b$export$7e1297a3a19f10d8 {
-  /**
-  * Function that will be called when we want to navigate, or a string saying it's not an SPA. You can change this OTG
-  */ /**
-     * We store listing_id in history.state and do operate on this both here and in js-ui, this is the key to be used which js-ui provides
-     */ /**
-        * Vue has async router that needs to be awaited (it navigates after a microtask)
-        * This standardises waiting for all kinds of routers
-        */
-  constructor(on_navigation, listing_query_state_key) {
-    $ac571292d606f30b$var$_classPrivateMethodInitSpec(this, $ac571292d606f30b$var$_get_navigation_happened_promise);
-    $ac571292d606f30b$var$_classPrivateMethodInitSpec(this, $ac571292d606f30b$var$_throwing_on_navigation);
-    $8tj43$babelruntimehelpersdefineProperty(this, "on_navigation_", void 0);
-    $8tj43$babelruntimehelpersdefineProperty(this, "listing_query_state_key", void 0);
-    $8tj43$babelruntimehelpersdefineProperty(this, "navigate_", {
-      /**
-      * Call this if you *just* want to replace the state object in history.state
-      */
-      replace_state_: new_state => {
-        var _globalThis$history;
-        // This doesn't break any router, so we just do this directly for now, since many don't expose an interface for changing the state
-        globalThis === null || globalThis === void 0 || (_globalThis$history = globalThis.history) === null || _globalThis$history === void 0 || _globalThis$history.replaceState(new_state, "");
-      },
-      /**
-      * Call this to change the URL
-      * @param new_url_ new URL to go to
-      * @param event_ event if you have this in a click handler, will not do anything on cmd/ctrl or non-left click then
-      * @param force_spa_navigation_ if you want to force SPA navigation even if on_navigation_ is set to "hard_navigation". You should only set this to true for inter-SDK-page navigations
-      * @param is_replace_ if you want to replace the current URL in history instead of pushing a new one
-      * @param listing_id_ If you are navigating to a category and know the listing_id of, please provide it. This is for making a better devEx in js-ui
-      */
-      go_to_: $8tj43$catchify(async _ref => {
-        let {
-          new_url_: raw_new_url,
-          event_: event_,
-          force_spa_navigation_: force_spa_navigation_,
-          is_replace_: is_replace_,
-          listing_query_: listing_query_,
-          scroll = true
-        } = _ref;
-        const new_url_ = raw_new_url instanceof URL ? raw_new_url : new URL(raw_new_url, location.origin);
-        const wants_hard_navigation = this.on_navigation_ === "hard_navigation";
-        if ($9b35d1384e31813a$export$29d28dadc2d6b631(event_)) return;
-        const different_origin = new_url_.origin !== location.origin;
-        if (wants_hard_navigation && (!force_spa_navigation_ || different_origin)) {
-          if (force_spa_navigation_ && different_origin)
-            // If we call history.pushState on a different origin, it will throw an error, so fallback to hard navigations
-            $8tj43$dwarn("Can't single page navigate to", new_url_.href, "due to different origin, this MIGHT mean you should fix the URLs");
-          if (!event_)
-            // If we haven't gotten an event, nothing will happen by not calling prevent default, so we need to change the URL
-            location.assign(new_url_);
-          return;
-        }
-        event_ === null || event_ === void 0 || event_.preventDefault();
-        const promise = $ac571292d606f30b$var$_classPrivateMethodGet(this, $ac571292d606f30b$var$_get_navigation_happened_promise, $ac571292d606f30b$var$_get_navigation_happened_promise2).call(this, true);
-        if (force_spa_navigation_ && wants_hard_navigation) {
-          // Don't allow hard navigation if we're forcing SPA navigation, which we do for things where PageReplacer can be used for performance
-          const new_state = history.state;
-          if (listing_query_) {
-            // In JS-UI we need to know the listing_id of the current category, therefore push it into state
-            if (!this.listing_query_state_key) $8tj43$report(new Error("listing_query_state_key is not set"), "error");
-            new_state[this.listing_query_state_key] = listing_query_;
-          }
-          history[is_replace_ ? "replaceState" : "pushState"](new_state, "", new_url_);
-        } else $ac571292d606f30b$var$_classPrivateMethodGet(this, $ac571292d606f30b$var$_throwing_on_navigation, $ac571292d606f30b$var$_throwing_on_navigation2).call(this, {
-          is_replace: is_replace_,
-          new_url: new_url_ instanceof URL ? new_url_ : new URL(new_url_, location.origin),
-          scroll: scroll
-        });
-        await promise;
-      })
-    });
-    this.listing_query_state_key = listing_query_state_key;
-    this.on_navigation_ = on_navigation;
-  }
-}
-function $ac571292d606f30b$var$_throwing_on_navigation2() {
-  const {
-    on_navigation_: on_navigation_
-  } = this;
-  if (typeof on_navigation_ !== "function") throw new Error("on_navigation_ is not a function");
-  // make sure that we don't accidentally catchify if the SDK consumer has fucked up
-  try {
-    return on_navigation_(...arguments);
-  } catch (e) {
-    queueMicrotask(() => {
-      throw e;
-    });
-  }
-}
-function $ac571292d606f30b$var$_get_navigation_happened_promise2(is_replace) {
-  return new Promise(resolve => {
-    const handler = what_happened => {
-      if (what_happened === (is_replace ? "replaceState" : "pushState")) {
-        resolve();
-        (0, $8tj43$instant_exec_on_suspect_history_change).delete(handler);
-      }
-    };
-    (0, $8tj43$instant_exec_on_suspect_history_change).add(handler);
-  });
-}
 var $b652875d5a5139ec$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div class=image-container>`);
 function $b652875d5a5139ec$export$41e1a079d40a0d58(props) {
   const [display] = $8tj43$createResource(() => ({
@@ -5410,7 +5534,7 @@ function $e3efeb558d952696$export$7da560f849543dff(_ref) {
       _el$5 = _el$4.nextSibling,
       [_el$6, _co$2] = $8tj43$getNextMarker(_el$5.nextSibling);
     $8tj43$insert(_el$2, (0, $ca55612a53dbbdd2$export$a2cc176055f8f08), _el$4, _co$);
-    $8tj43$insert(_el$2, $8tj43$createComponent((0, $63f1f8dbcd07d3b0$export$d21e32dfedac04be), $8tj43$mergeProps({
+    $8tj43$insert(_el$2, $8tj43$createComponent((0, $63f1f8dbcd07d3b0$export$d21e32dfedac04be), $8tj43$mergeProps1({
       get rows() {
         return rows_object_();
       },
@@ -5799,7 +5923,7 @@ function $6b0fd8fd20df8ccf$var$ActualShopTheLookButton(props) {
   const displayStyleValue = $8tj43$createMemo(() => hasAnythingToShow() ? "" : "none");
   const button = (() => {
     var _el$2 = $8tj43$getNextElement($6b0fd8fd20df8ccf$var$_tmpl$2);
-    $8tj43$spread(_el$2, $8tj43$mergeProps(() => localProps.buttonAttributes), false, true);
+    $8tj43$spread(_el$2, $8tj43$mergeProps1(() => localProps.buttonAttributes), false, true);
     $8tj43$insert(_el$2, () => {
       var _localProps$buttonAtt;
       return (localProps === null || localProps === void 0 ? void 0 : (_localProps$buttonAtt = localProps.buttonAttributes) === null || _localProps$buttonAtt === void 0 ? void 0 : _localProps$buttonAtt.children) || "Shop the look";
@@ -5809,7 +5933,7 @@ function $6b0fd8fd20df8ccf$var$ActualShopTheLookButton(props) {
   })();
   $8tj43$createEffect(() => button.style.display = displayStyleValue()); // Set our attributes like this, so we allow total control over the button from the outside via buttonAttributes
   $8tj43$createEffect(() => !hasAnythingToShow() && closeModal()); // close modal if we ever get into the state of having it open and not having anything to show
-  $6b0fd8fd20df8ccf$var$modalProps = $8tj43$mergeProps1(partForModal, {
+  $6b0fd8fd20df8ccf$var$modalProps = $8tj43$mergeProps(partForModal, {
     products_to_shop_: products_to_shop_
   });
   button.addEventListener("click", openModal);
@@ -6571,7 +6695,7 @@ var $ff3225aef892a467$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<svg><path d="M
 function $ff3225aef892a467$export$f21ab0717a89c77f(props) {
   return (() => {
     var _el$ = $8tj43$getNextElement($ff3225aef892a467$var$_tmpl$);
-    $8tj43$spread(_el$, $8tj43$mergeProps(props, {
+    $8tj43$spread(_el$, $8tj43$mergeProps1(props, {
       "xmlns": "http://www.w3.org/2000/svg",
       "width": "11",
       "height": "12"
@@ -8156,7 +8280,7 @@ const $830ea8efda59884e$export$414f6a19d38e655c = _ref => {
                 [_el$6, _co$] = $8tj43$getNextMarker(_el$5.nextSibling),
                 _el$7 = _el$6.nextSibling,
                 [_el$8, _co$2] = $8tj43$getNextMarker(_el$7.nextSibling);
-              $8tj43$spread(_el$2, $8tj43$mergeProps(attributes, {
+              $8tj43$spread(_el$2, $8tj43$mergeProps1(attributes, {
                 get disabled() {
                   return $8tj43$memo(() => !!count_zero())() && !is_selected();
                 },
@@ -9793,7 +9917,7 @@ async function $284849364a6ef73a$var$_run_url_creator_for_suggest2(merchant, mar
   // Filter out our transformed ancestors
   const transformedAncestors = Object.fromEntries(transformerResult.filter(item => item.is_suggestion === false).map(item => [item.listing_id, item]));
   // Add the now transformed ancestors into the ancestors of the listing suggestions
-  const transformedSuggestions = transformerResult.filter(item => item.is_suggestion !== false).map(item => $8tj43$mergeProps1(item, {
+  const transformedSuggestions = transformerResult.filter(item => item.is_suggestion !== false).map(item => $8tj43$mergeProps(item, {
     // Use mergeProps instead of spread since page_url and other properties could be a getter that solid components should call
     ancestors: item.ancestors.map(ancestor => {
       const newAncestor = transformedAncestors[ancestor.listing_id];
@@ -10329,7 +10453,7 @@ function $8ef6232475d44150$export$7de92c4c2205ebf3(_ref) {
       [_el$6, _co$2] = $8tj43$getNextMarker(_el$5.nextSibling);
     $8tj43$insert(_el$2, () => i18n_.search_recs_title_());
     $8tj43$insert(_el$, (0, $ca55612a53dbbdd2$export$a2cc176055f8f08), _el$4, _co$);
-    $8tj43$insert(_el$, $8tj43$createComponent((0, $63f1f8dbcd07d3b0$export$d21e32dfedac04be), $8tj43$mergeProps({
+    $8tj43$insert(_el$, $8tj43$createComponent((0, $63f1f8dbcd07d3b0$export$d21e32dfedac04be), $8tj43$mergeProps1({
       rows: rows_object,
       layout: "grid",
       element_attributes: {
@@ -11093,7 +11217,7 @@ function $64d94dcaa058dc7b$export$ab6b147eec64fea5(props) {
   const container_class = "x" + $8tj43$createUniqueId();
   const container_element_ = (() => {
     var _el$ = $8tj43$getNextElement($64d94dcaa058dc7b$var$_tmpl$);
-    $8tj43$spread(_el$, $8tj43$mergeProps(() => props.element_attributes, {
+    $8tj43$spread(_el$, $8tj43$mergeProps1(() => props.element_attributes, {
       "classList": {
         [container_class]: true
       }
@@ -11388,7 +11512,7 @@ function $ff7feae4dddd6073$var$wrap_blocks_in_div(rendered_content_blocks, max_s
         return _el$;
       }
     });
-    return $8tj43$mergeProps1(block, {
+    return $8tj43$mergeProps(block, {
       // Create content divs for the blocks with as much fine-grained diffing as possible?
       content: () => {
         // Sneaky on-demand rendering, so we don't render more blocks than we can show: we have the rendered value here and don't return a function that renders because if our block would be moved around we'd be guaranteed to re-render
@@ -11636,7 +11760,7 @@ function $7faea0096f14b59b$export$3925f87b1545cfc6(_ref) {
                         } = slider;
                         const Layout = props => $63f1f8dbcd07d3b0$export$445d8d3f5f706a40(props, insert_here, true);
                         // Do like this, so we don't have to call mergeProps ourselves
-                        $8tj43$createComponent(Layout, $8tj43$mergeProps(layout_options_, {
+                        $8tj43$createComponent(Layout, $8tj43$mergeProps1(layout_options_, {
                           rows: "all",
                           get cols_at_size() {
                             return modified_cols_at_size();
@@ -12165,7 +12289,7 @@ function $082c4ed3e22f8d71$export$9bf11afa910f536e(_ref) {
           get children() {
             return (() => {
               var _el$34 = $8tj43$getNextElement($082c4ed3e22f8d71$var$_tmpl$5);
-              $8tj43$insert(_el$34, $8tj43$createComponent((0, $f6b0500577e1b210$export$3f1a388cc0d8fed7), $8tj43$mergeProps(args_for_filtering_, {
+              $8tj43$insert(_el$34, $8tj43$createComponent((0, $f6b0500577e1b210$export$3f1a388cc0d8fed7), $8tj43$mergeProps1(args_for_filtering_, {
                 are_in_modal_: true
               })));
               return _el$34;
@@ -12978,7 +13102,7 @@ function $22470de5f42cc35d$export$f631859cab12b342(_ref) {
       [_el$8, _co$] = $8tj43$getNextMarker(_el$7.nextSibling),
       _el$9 = _el$8.nextSibling,
       [_el$10, _co$2] = $8tj43$getNextMarker(_el$9.nextSibling);
-    $8tj43$insert(_el$4, $8tj43$createComponent(LinkIfPossible, $8tj43$mergeProps(make_link_attributes, {
+    $8tj43$insert(_el$4, $8tj43$createComponent(LinkIfPossible, $8tj43$mergeProps1(make_link_attributes, {
       tabIndex: "-1",
       get children() {
         return $8tj43$createComponent((0, $3c5e15c6ee4227a9$export$605674723bcc715c), {
@@ -12987,7 +13111,7 @@ function $22470de5f42cc35d$export$f631859cab12b342(_ref) {
         });
       }
     })));
-    $8tj43$insert(_el$5, $8tj43$createComponent(LinkIfPossible, $8tj43$mergeProps({
+    $8tj43$insert(_el$5, $8tj43$createComponent(LinkIfPossible, $8tj43$mergeProps1({
       "class": "content-title line-clamp"
     }, make_link_attributes, {
       get title() {
@@ -13153,7 +13277,7 @@ function $d53ebed6f63304e4$export$6d0c9c22f6652669(_ref) {
       },
       number_of_results_: num_results
     }), _el$3, _co$);
-    $8tj43$insert(_el$, $8tj43$createComponent((0, $63f1f8dbcd07d3b0$export$d21e32dfedac04be), $8tj43$mergeProps({
+    $8tj43$insert(_el$, $8tj43$createComponent((0, $63f1f8dbcd07d3b0$export$d21e32dfedac04be), $8tj43$mergeProps1({
       layout: "grid",
       element_attributes: {
         class: "cards"
@@ -13564,7 +13688,7 @@ function $da279c5a540c6846$export$a54ec244c8863715(_ref) {
     var _search_results_4, _search_results_4$con;
     return ((_search_results_4 = search_results_()) !== null && _search_results_4 !== void 0 && (_search_results_4$con = _search_results_4.content_search_links) !== null && _search_results_4$con !== void 0 && _search_results_4$con.length ? i18n_.no_products_ : i18n_.no_results_text_)();
   });
-  const results_for = $8tj43$createComponent((0, $69602b3d8fd54c38$export$9dd50d35b9d94fdf), $8tj43$mergeProps({
+  const results_for = $8tj43$createComponent((0, $69602b3d8fd54c38$export$9dd50d35b9d94fdf), $8tj43$mergeProps1({
     get type() {
       return (0, $69602b3d8fd54c38$export$2452208c79fe93ea).products;
     },
@@ -15705,7 +15829,7 @@ function $4b4b262708b516ee$var$add_us_to_crumbs(plp_meta) {
     var _plp_meta3;
     const api_value = (_plp_meta3 = plp_meta()) === null || _plp_meta3 === void 0 ? void 0 : _plp_meta3.breadcrumbs;
     if (!api_value) return api_value;
-    return [...api_value, $8tj43$mergeProps1(plp_meta(), {
+    return [...api_value, $8tj43$mergeProps(plp_meta(), {
       get page_url() {
         return href_accessor();
       }