@depict-ai/ui 4.3.1 → 4.3.3

package/server/latest/index.js

@@ -1,13 +1,13 @@
-import { add_to_version_info as $i7OB2$add_to_version_info, fetch_retry as $i7OB2$fetch_retry, base_url as $i7OB2$base_url, slider_fractional_factory as $i7OB2$slider_fractional_factory, dlog as $i7OB2$dlog, camelCasifyObject as $i7OB2$camelCasifyObject, make_random_classname as $i7OB2$make_random_classname, n_col_styling_with_dist as $i7OB2$n_col_styling_with_dist, catchify as $i7OB2$catchify, layout_get_visible_recs_without_partial_rows as $i7OB2$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $i7OB2$layout_get_total_rec_amount_for_row, layout_media_query_header as $i7OB2$layout_media_query_header, report as $i7OB2$report, slider_fading_factory as $i7OB2$slider_fading_factory, Amazing_Slider as $i7OB2$Amazing_Slider, slider_snap_css as $i7OB2$slider_snap_css, observer as $i7OB2$observer, javascript_media_query as $i7OB2$javascript_media_query, queueMacroTask as $i7OB2$queueMacroTask, findMostFrequentItem as $i7OB2$findMostFrequentItem, dwarn as $i7OB2$dwarn, deparallelize_no_drop as $i7OB2$deparallelize_no_drop, ContainedImage as $i7OB2$ContainedImage, standard_price_format as $i7OB2$standard_price_format, make_asyncIterable_exiter as $i7OB2$make_asyncIterable_exiter, href_change_ipns as $i7OB2$href_change_ipns, base64_encode_unicode as $i7OB2$base64_encode_unicode, base64_decode_unicode as $i7OB2$base64_decode_unicode, use_href_accessor as $i7OB2$use_href_accessor, get_session_id as $i7OB2$get_session_id, add_version_query_params as $i7OB2$add_version_query_params, instant_exec_on_suspect_history_change as $i7OB2$instant_exec_on_suspect_history_change, useExpandingContainer as $i7OB2$useExpandingContainer, hex_to_rgb as $i7OB2$hex_to_rgb, relative_luminance_from_rgb as $i7OB2$relative_luminance_from_rgb, snakeCasifyObject as $i7OB2$snakeCasifyObject, sort_obj as $i7OB2$sort_obj, make_url_with_query_params as $i7OB2$make_url_with_query_params, ListenableSet as $i7OB2$ListenableSet1, insert_surfaces as $i7OB2$insert_surfaces } from "@depict-ai/utilishared/latest";
-import { ssr as $i7OB2$ssr, ssrHydrationKey as $i7OB2$ssrHydrationKey, ssrStyle as $i7OB2$ssrStyle, escape as $i7OB2$escape, createComponent as $i7OB2$createComponent, mergeProps as $i7OB2$mergeProps, isServer as $i7OB2$isServer, ssrElement as $i7OB2$ssrElement, ssrClassList as $i7OB2$ssrClassList, insert as $i7OB2$insert, ssrAttribute as $i7OB2$ssrAttribute, spread as $i7OB2$spread, Dynamic as $i7OB2$Dynamic } from "solid-js/web";
-import { createSignal as $i7OB2$createSignal, createMemo as $i7OB2$createMemo, createResource as $i7OB2$createResource, Show as $i7OB2$Show, Suspense as $i7OB2$Suspense, untrack as $i7OB2$untrack, createRenderEffect as $i7OB2$createRenderEffect, Index as $i7OB2$Index, createRoot as $i7OB2$createRoot, onCleanup as $i7OB2$onCleanup, For as $i7OB2$For, getOwner as $i7OB2$getOwner, runWithOwner as $i7OB2$runWithOwner, createEffect as $i7OB2$createEffect, createContext as $i7OB2$createContext, useContext as $i7OB2$useContext, createUniqueId as $i7OB2$createUniqueId, createComputed as $i7OB2$createComputed, ErrorBoundary as $i7OB2$ErrorBoundary, splitProps as $i7OB2$splitProps, mergeProps as $i7OB2$mergeProps1, on as $i7OB2$on, batch as $i7OB2$batch, createSelector as $i7OB2$createSelector, children as $i7OB2$children, createReaction as $i7OB2$createReaction, mapArray as $i7OB2$mapArray } from "solid-js";
+import { add_to_version_info as $i7OB2$add_to_version_info, fetch_retry as $i7OB2$fetch_retry, base_url as $i7OB2$base_url, dwarn as $i7OB2$dwarn, slider_fractional_factory as $i7OB2$slider_fractional_factory, dlog as $i7OB2$dlog, camelCasifyObject as $i7OB2$camelCasifyObject, make_random_classname as $i7OB2$make_random_classname, n_col_styling_with_dist as $i7OB2$n_col_styling_with_dist, catchify as $i7OB2$catchify, layout_get_visible_recs_without_partial_rows as $i7OB2$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $i7OB2$layout_get_total_rec_amount_for_row, layout_media_query_header as $i7OB2$layout_media_query_header, report as $i7OB2$report, slider_fading_factory as $i7OB2$slider_fading_factory, Amazing_Slider as $i7OB2$Amazing_Slider, slider_snap_css as $i7OB2$slider_snap_css, observer as $i7OB2$observer, javascript_media_query as $i7OB2$javascript_media_query, queueMacroTask as $i7OB2$queueMacroTask, findMostFrequentItem as $i7OB2$findMostFrequentItem, standard_price_format as $i7OB2$standard_price_format, instant_exec_on_suspect_history_change as $i7OB2$instant_exec_on_suspect_history_change, deparallelize_no_drop as $i7OB2$deparallelize_no_drop, ContainedImage as $i7OB2$ContainedImage, make_asyncIterable_exiter as $i7OB2$make_asyncIterable_exiter, href_change_ipns as $i7OB2$href_change_ipns, base64_encode_unicode as $i7OB2$base64_encode_unicode, base64_decode_unicode as $i7OB2$base64_decode_unicode, use_href_accessor as $i7OB2$use_href_accessor, get_session_id as $i7OB2$get_session_id, add_version_query_params as $i7OB2$add_version_query_params, useExpandingContainer as $i7OB2$useExpandingContainer, hex_to_rgb as $i7OB2$hex_to_rgb, relative_luminance_from_rgb as $i7OB2$relative_luminance_from_rgb, snakeCasifyObject as $i7OB2$snakeCasifyObject, sort_obj as $i7OB2$sort_obj, make_url_with_query_params as $i7OB2$make_url_with_query_params, ListenableSet as $i7OB2$ListenableSet1, insert_surfaces as $i7OB2$insert_surfaces } from "@depict-ai/utilishared/latest";
+import { ssr as $i7OB2$ssr, ssrHydrationKey as $i7OB2$ssrHydrationKey, ssrStyle as $i7OB2$ssrStyle, escape as $i7OB2$escape, createComponent as $i7OB2$createComponent, mergeProps as $i7OB2$mergeProps1, isServer as $i7OB2$isServer, ssrElement as $i7OB2$ssrElement, ssrClassList as $i7OB2$ssrClassList, insert as $i7OB2$insert, ssrAttribute as $i7OB2$ssrAttribute, spread as $i7OB2$spread, Dynamic as $i7OB2$Dynamic } from "solid-js/web";
+import { createSignal as $i7OB2$createSignal, createMemo as $i7OB2$createMemo, createResource as $i7OB2$createResource, createEffect as $i7OB2$createEffect, mergeProps as $i7OB2$mergeProps, Show as $i7OB2$Show, Suspense as $i7OB2$Suspense, untrack as $i7OB2$untrack, createRenderEffect as $i7OB2$createRenderEffect, Index as $i7OB2$Index, createRoot as $i7OB2$createRoot, onCleanup as $i7OB2$onCleanup, For as $i7OB2$For, getOwner as $i7OB2$getOwner, runWithOwner as $i7OB2$runWithOwner, createContext as $i7OB2$createContext, useContext as $i7OB2$useContext, createUniqueId as $i7OB2$createUniqueId, createComputed as $i7OB2$createComputed, ErrorBoundary as $i7OB2$ErrorBoundary, splitProps as $i7OB2$splitProps, on as $i7OB2$on, batch as $i7OB2$batch, createSelector as $i7OB2$createSelector, children as $i7OB2$children, createReaction as $i7OB2$createReaction, mapArray as $i7OB2$mapArray } from "solid-js";
 import { ListenableSet as $i7OB2$ListenableSet, catchify as $i7OB2$catchify1, use_href_accessor as $i7OB2$use_href_accessor1, report as $i7OB2$report1 } from "@depict-ai/utilishared/latest";
 import { createStore as $i7OB2$createStore, reconcile as $i7OB2$reconcile } from "solid-js/store";
 
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "4.3.1";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.3.3";
 const $b5cccc8ee7d24677$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -414,7 +414,7 @@ var $c8d5ff4524619fcd$var$_tmpl$ = ["<div", ' class="', '">', "</div>"],
   $c8d5ff4524619fcd$var$_tmpl$2 = ["<style", ' type="text/css">', "</style>"];
 function $c8d5ff4524619fcd$export$d21e32dfedac04be(props) {
   const container_class = "x" + $i7OB2$createUniqueId();
-  const container_element_ = $i7OB2$ssrElement("div", $i7OB2$mergeProps(() => props.element_attributes, {
+  const container_element_ = $i7OB2$ssrElement("div", $i7OB2$mergeProps1(() => props.element_attributes, {
     classList: {
       [container_class]: true
     }
@@ -606,7 +606,7 @@ function $c4492d24952ed731$export$d41d19e89346fa2({
       } = slider;
       const Layout = props => $c8d5ff4524619fcd$export$445d8d3f5f706a40(props, insert_here, true);
       // Do like this, so we don't have to call mergeProps ourselves
-      $i7OB2$createComponent(Layout, $i7OB2$mergeProps({
+      $i7OB2$createComponent(Layout, $i7OB2$mergeProps1({
         rows: "all",
         layout: "slider"
       }, layout_options_));
@@ -873,7 +873,7 @@ function $e8ffe11ed01df0fe$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] = $i7OB2$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] = $i7OB2$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] = $i7OB2$createSignal(false);
@@ -889,7 +889,7 @@ function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
     if (loading === "force-lazy") return true;
     return loading === "lazy" && !isPrioritisedImage();
   });
-  const modifiedOtherAttributes = $i7OB2$mergeProps1(otherAttributes, {
+  const modifiedOtherAttributes = $i7OB2$mergeProps(otherAttributes, {
     get loading() {
       return shouldActuallyEnableLazyLoading() ? "lazy" : undefined;
     }
@@ -929,13 +929,18 @@ function $e8ffe11ed01df0fe$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[$e8ffe11ed01df0fe$export$f8945274f08a3105] ||= new Set();
     const [, setMostPrevalentAspectRatio] = listingContext[$e8ffe11ed01df0fe$export$6066eb417ed2e9f7] ||= $i7OB2$createSignal();
     img.addEventListener("load", $i7OB2$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_) ? {
@@ -953,7 +958,11 @@ function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
     $i7OB2$onCleanup(() => prevValue && aspectRatios.delete(prevValue));
   }
   $i7OB2$onCleanup(() => gotCleanedUp = true);
-  $i7OB2$spread(img, $i7OB2$mergeProps1(modifiedOtherAttributes), false, true);
+  $i7OB2$spread(img, $i7OB2$mergeProps(modifiedOtherAttributes), false, true);
+  $i7OB2$createRenderEffect(() => {
+    props.src;
+    srcJustChanged = true;
+  });
   $i7OB2$createEffect(() => {
     if (!props.size()) return; // wait until we have a size, run every time the size changes
     if (timeoutSet) return;
@@ -1023,48 +1032,22 @@ function $660070e2a394b3c3$export$e4b984597b71e989(props) {
   const [mostPrevalentAspectRatio] = context ?
   // If the context exists we have to create the signal here as getting it here would be too late when it's created by ShopifyResponsiveImg below
   context[(0, $e8ffe11ed01df0fe$export$6066eb417ed2e9f7)] ||= $i7OB2$createSignal() : [];
-  const [aspectRatio, setAspectRatio] = $i7OB2$createSignal($i7OB2$untrack(() => props.aspectRatio));
   const container = $f18d425032111270$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?.();
+        if (targetRatio != undefined) return `var(${(0, $bb15dfb548a7666e$export$8a2234b5b1a5ebd4)}, ${targetRatio})`;
+      }
+      return props.aspectRatio;
     }
   });
   const owner = $i7OB2$getOwner();
   let createdSizeAccessor = false;
   let wasCleanedUp = false;
-  let timeout;
-  $i7OB2$createEffect(() => {
-    const {
-      autoAdjustAspectRatio: autoAdjustAspectRatio
-    } = props;
-    if (autoAdjustAspectRatio) {
-      const targetRatio = mostPrevalentAspectRatio?.();
-      if (targetRatio != undefined) {
-        const targetValue = `var(${(0, $bb15dfb548a7666e$export$8a2234b5b1a5ebd4)}, ${targetRatio})`;
-        const updateAspectRatio = $i7OB2$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);
-  });
   $i7OB2$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
@@ -1078,7 +1061,7 @@ function $660070e2a394b3c3$export$e4b984597b71e989(props) {
     $i7OB2$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
   });
 
-  $i7OB2$insert(container, $i7OB2$createComponent((0, $e8ffe11ed01df0fe$export$6e5611bc7e57e477), $i7OB2$mergeProps({
+  $i7OB2$insert(container, $i7OB2$createComponent((0, $e8ffe11ed01df0fe$export$6e5611bc7e57e477), $i7OB2$mergeProps1({
     get size() {
       return $i7OB2$createMemo(() => currentImageSize()?.() || 0);
     },
@@ -1093,7 +1076,7 @@ function $660070e2a394b3c3$export$e4b984597b71e989(props) {
   return container;
 }
 function $70bb27cc6be01fc7$export$9d4a4b669b1929ab(props) {
-  return $i7OB2$createComponent((0, $660070e2a394b3c3$export$e4b984597b71e989), $i7OB2$mergeProps(props, {
+  return $i7OB2$createComponent((0, $660070e2a394b3c3$export$e4b984597b71e989), $i7OB2$mergeProps1(props, {
     get imgProps() {
       return {
         ...props.imgProps,
@@ -1110,16 +1093,24 @@ function $70bb27cc6be01fc7$export$9d4a4b669b1929ab(props) {
     }
   }));
 }
+function $8c0f86cb3e266eeb$export$a71e92cfbb498adc(props) {
+  return $i7OB2$createMemo(() => {
+    const price_formatting = props.price_formatting_;
+    return $i7OB2$standard_price_format(props.price_, price_formatting.places_after_comma_, price_formatting.decimal_places_delimiter_, price_formatting.thousands_delimiter_);
+  });
+}
 var $5a6c386e1bde5665$var$_tmpl$ = ["<div", ' class="img-wrapper">', "</div>"],
   $5a6c386e1bde5665$var$_tmpl$2 = ["<span", ' class="d-price original">', "</span>"],
   $5a6c386e1bde5665$var$_tmpl$3 = ["<div", ' class="right-part"><div class="text-container"><span class="d-title line-clamp">', '</span><span class="', '">', "</span><!--$-->", "<!--/--></div><!--$-->", "<!--/--></div>"];
 function $5a6c386e1bde5665$export$b73ed90f0ee50dc3({
   display_: display_,
   FavoriteButton_: FavoriteButton_,
-  isExpanded_: isExpanded_,
+  userWantsExpandedSignal_: [userWantsExpanded, setUserWantsExpanded],
   textFadeInAnimationRunning_: textFadeInAnimationRunning_,
   outerRef_: outerRef_,
-  animationDuration_: animationDuration_
+  animationDuration_: animationDuration_,
+  priceFormatting_: priceFormatting_,
+  pseudoRouter_: pseudoRouter_
 }) {
   const variantToUse = $i7OB2$createMemo(() => {
     const display = display_();
@@ -1127,16 +1118,18 @@ function $5a6c386e1bde5665$export$b73ed90f0ee50dc3({
   });
   const imageUrl = $i7OB2$createMemo(() => variantToUse()?.image_urls?.[0]);
   const [animationIsRunning, setAnimationIsRunning] = textFadeInAnimationRunning_;
-  const [isExpandedThrottledByOurEffectRun, setIsExpandedThrottledByOurEffectRun] = $i7OB2$createSignal($i7OB2$untrack(isExpanded_));
+  const [isExpandedThrottledByOurEffectRun, setIsExpandedThrottledByOurEffectRun] = $i7OB2$createSignal($i7OB2$untrack(userWantsExpanded));
   const [animationEffectExists, setAnimationEffectExists] = $i7OB2$createSignal(false);
   const [salePrice] = $i7OB2$createResource(() => variantToUse()?.sale_price);
   const [originalPrice] = $i7OB2$createResource(() => variantToUse()?.original_price);
-  const isOnSale = $i7OB2$createMemo(() => salePrice.latest !== originalPrice.latest); // .latest doesn't trigger suspense
+  const isOnSale = $i7OB2$createMemo(() => !salePrice.loading && !originalPrice.loading && salePrice.latest !== originalPrice.latest); // .latest doesn't trigger suspense after the initial load
+  const enableLink = $i7OB2$createMemo(() => userWantsExpanded() && !animationIsRunning());
+  const href = $i7OB2$createMemo(() => variantToUse()?.page_url);
   const FavoriteButton = FavoriteButton_; // Just to get rid of the type error - TS doesn't understand <Show>
-  return $i7OB2$ssrElement("a", $i7OB2$mergeProps({
+  return $i7OB2$ssrElement("a", $i7OB2$mergeProps1({
     "class": "look-item"
-  }, () => isExpanded_() && !animationIsRunning() ? {
-    href: variantToUse()?.page_url
+  }, () => enableLink() ? {
+    href: href()
   } : {}), () => ["<!--$-->", $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
     when: imageUrl,
     get fallback() {
@@ -1160,10 +1153,13 @@ function $5a6c386e1bde5665$export$b73ed90f0ee50dc3({
               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
             }
           });
         }
@@ -1171,24 +1167,72 @@ function $5a6c386e1bde5665$export$b73ed90f0ee50dc3({
     }
   })), "<!--/-->", "<!--$-->", $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
     get when() {
-      return (animationEffectExists() ? isExpandedThrottledByOurEffectRun() : isExpanded_()) || animationIsRunning();
+      return (animationEffectExists() ? isExpandedThrottledByOurEffectRun() : userWantsExpanded()) || animationIsRunning();
     },
     get children() {
       return $i7OB2$ssr($5a6c386e1bde5665$var$_tmpl$3, $i7OB2$ssrHydrationKey(), $i7OB2$escape(variantToUse()?.title) ?? $i7OB2$escape($i7OB2$createComponent((0, $d134eae24341b4a1$export$89c6019e4baa40b1), {
         height: "1em",
         width: "20ch"
-      })), `d-price ${isOnSale() ? "sale" : ""}`, !variantToUse() || salePrice.loading ? $i7OB2$escape($i7OB2$createComponent((0, $d134eae24341b4a1$export$89c6019e4baa40b1), {
-        height: "1em",
-        width: "20ch"
-      })) : $i7OB2$escape(salePrice()), $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
+      })), `d-price ${isOnSale() ? "sale" : ""}`, $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
         get when() {
-          return isOnSale();
+          return variantToUse() && !salePrice.loading;
         },
-        get children() {
-          return $i7OB2$ssr($5a6c386e1bde5665$var$_tmpl$2, $i7OB2$ssrHydrationKey(), !variantToUse() || originalPrice.loading ? $i7OB2$escape($i7OB2$createComponent((0, $d134eae24341b4a1$export$89c6019e4baa40b1), {
+        get fallback() {
+          return $i7OB2$createComponent((0, $d134eae24341b4a1$export$89c6019e4baa40b1), {
             height: "1em",
             width: "20ch"
-          })) : $i7OB2$escape(originalPrice()));
+          });
+        },
+        get children() {
+          return $i7OB2$createComponent((0, $i7OB2$Show), {
+            get when() {
+              return salePrice.latest;
+            },
+            get children() {
+              return [priceFormatting_().pre_, $i7OB2$createComponent((0, $8c0f86cb3e266eeb$export$a71e92cfbb498adc), {
+                get price_() {
+                  return salePrice();
+                },
+                get price_formatting_() {
+                  return priceFormatting_();
+                }
+              }), priceFormatting_().post_];
+            }
+          });
+        }
+      })), $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
+        get when() {
+          return isOnSale();
+        },
+        get children() {
+          return $i7OB2$ssr($5a6c386e1bde5665$var$_tmpl$2, $i7OB2$ssrHydrationKey(), $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
+            get when() {
+              return variantToUse() && !originalPrice.loading;
+            },
+            get fallback() {
+              return $i7OB2$createComponent((0, $d134eae24341b4a1$export$89c6019e4baa40b1), {
+                height: "1em",
+                width: "20ch"
+              });
+            },
+            get children() {
+              return $i7OB2$createComponent((0, $i7OB2$Show), {
+                get when() {
+                  return salePrice.latest;
+                },
+                get children() {
+                  return [priceFormatting_().pre_, $i7OB2$createComponent((0, $8c0f86cb3e266eeb$export$a71e92cfbb498adc), {
+                    get price_() {
+                      return originalPrice();
+                    },
+                    get price_formatting_() {
+                      return priceFormatting_();
+                    }
+                  }), priceFormatting_().post_];
+                }
+              });
+            }
+          })));
         }
       })), $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
         when: FavoriteButton_,
@@ -1255,10 +1299,12 @@ var $7555dcad3b8a4632$var$_tmpl$ = ["<div", ' class="scroll-padding">', "</div>"
 function $7555dcad3b8a4632$export$ebf0b1d4f90c09ae({
   displays_: displays_,
   FavoriteButton_: FavoriteButton_,
-  userWantsExpandedSignal_: [userWantsExpanded, setUserWantsExpanded],
+  userWantsExpandedSignal_: userWantsExpandedSignal_,
   containerWidth_: containerWidth_,
   animationDuration_: animationDuration_,
-  supportsHover_: supportsHover_
+  supportsHover_: supportsHover_,
+  priceFormatting_: priceFormatting_,
+  pseudoRouter_: pseudoRouter_
 }) {
   let isAffectedByChromeBug = false;
   // If the user requests the drawer to be expanded or not
@@ -1267,6 +1313,7 @@ function $7555dcad3b8a4632$export$ebf0b1d4f90c09ae({
   // 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 = $i7OB2$createSignal(false);
   const [getSecondPartAnimationRunning] = textFadeInAnimationRunning;
+  const [userWantsExpanded, setUserWantsExpanded] = userWantsExpandedSignal_;
   $62a8f670f8464532$export$7b9a0e99f0aeb2f3().then(is => isAffectedByChromeBug = is);
   return $i7OB2$createComponent((0, $011607bdf658f807$export$e68cff63f76bd15b), {
     get children() {
@@ -1275,7 +1322,7 @@ function $7555dcad3b8a4632$export$ebf0b1d4f90c09ae({
           return containerWidth_() || !displays_;
         },
         get children() {
-          return $i7OB2$ssr($7555dcad3b8a4632$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$ssrElement("div", $i7OB2$mergeProps({
+          return $i7OB2$ssr($7555dcad3b8a4632$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$ssrElement("div", $i7OB2$mergeProps1({
             get ["class"]() {
               return `look-overlay ${userWantsExpanded() ? "expanded" : ""} ${!getSecondPartAnimationRunning() && userWantsExpanded() ? "resting-fully-expanded" : ""}`;
             }
@@ -1289,11 +1336,13 @@ function $7555dcad3b8a4632$export$ebf0b1d4f90c09ae({
             },
             children: (display, index) => {
               return $i7OB2$createComponent((0, $5a6c386e1bde5665$export$b73ed90f0ee50dc3), {
+                pseudoRouter_: pseudoRouter_,
                 animationDuration_: animationDuration_,
                 display_: display,
                 FavoriteButton_: FavoriteButton_,
-                isExpanded_: userWantsExpanded,
+                userWantsExpandedSignal_: userWantsExpandedSignal_,
                 textFadeInAnimationRunning_: textFadeInAnimationRunning,
+                priceFormatting_: priceFormatting_,
                 outerRef_: el => $i7OB2$createEffect(() => {
                   if (index !== 0) return;
                   const resizeObserver = new ResizeObserver($i7OB2$catchify(records => setLookItemHeight(records.at(-1).contentRect.height)));
@@ -1334,10 +1383,10 @@ function $28ee4f7db3cc44b8$export$44809a8a3e867e30({
   expandedLooksSignal_: [expandedLooks_, setExpandedLooks],
   FavoriteButton_: FavoriteButton_,
   placeholderImageAspectRatio_: placeholderImageAspectRatio_,
-  animationDuration_: animationDuration_
+  animationDuration_: animationDuration_,
+  priceFormatting_: priceFormatting_,
+  pseudoRouter_: pseudoRouter_
 }) {
-  // TODO: shopify, run displayTransformers to get dynamic prices
-  // TODO: format prices
   const [coverImage] = display_?.image_urls || [];
   const useWantsExpandedSignal_ = $i7OB2$createSignal(false);
   const [userWantsExpanded, setUserWantsExpanded] = useWantsExpandedSignal_;
@@ -1369,7 +1418,7 @@ function $28ee4f7db3cc44b8$export$44809a8a3e867e30({
     when: display_,
     get fallback() {
       return $i7OB2$createComponent((0, $7f60f09116a3fe61$export$3f37af283f8fb843), {
-        aspectRatio: placeholderImageAspectRatio_
+        aspectRatio: `var(${(0, $bb15dfb548a7666e$export$8a2234b5b1a5ebd4)}, ${placeholderImageAspectRatio_})`
       });
     },
     get children() {
@@ -1387,10 +1436,124 @@ function $28ee4f7db3cc44b8$export$44809a8a3e867e30({
     containerWidth_: containerWidth_,
     animationDuration_: animationDuration_,
     supportsHover_: supportsHover_,
-    FavoriteButton_: FavoriteButton_
+    FavoriteButton_: FavoriteButton_,
+    priceFormatting_: priceFormatting_,
+    pseudoRouter_: pseudoRouter_
   })]);
   return container;
 }
+
+/**
+ * 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 $a281666e5c15c2ec$export$29d28dadc2d6b631(clickEvent) {
+  return clickEvent?.button ||
+  // if not zero it's a wheel click which opens in new tab
+  clickEvent?.metaKey ||
+  // if true, cmd button on macOS which opens in new tab
+  clickEvent?.ctrlKey ||
+  // if true, ctrl button on windows or linux which opens in new tab
+  clickEvent?.shiftKey // if true, shift button on windows, linux or macOS which opens in a new window
+  ;
+}
+
+class $4fd2ba03703a7d92$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
+     */
+  #throwing_on_navigation(...args) {
+    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_(...args);
+    } catch (e) {
+      queueMicrotask(() => {
+        throw e;
+      });
+    }
+  }
+  /**
+  * Vue has async router that needs to be awaited (it navigates after a microtask)
+  * This standardises waiting for all kinds of routers
+  */
+  #get_navigation_happened_promise(is_replace) {
+    return new Promise(resolve => {
+      const handler = what_happened => {
+        if (what_happened === (is_replace ? "replaceState" : "pushState")) {
+          resolve();
+          (0, $i7OB2$instant_exec_on_suspect_history_change).delete(handler);
+        }
+      };
+      (0, $i7OB2$instant_exec_on_suspect_history_change).add(handler);
+    });
+  }
+  navigate_ = {
+    /**
+    * Call this if you *just* want to replace the state object in history.state
+    */
+    replace_state_: new_state => {
+      // 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?.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_: $i7OB2$catchify(async ({
+      new_url_: raw_new_url,
+      event_: event_,
+      force_spa_navigation_: force_spa_navigation_,
+      is_replace_: is_replace_,
+      listing_query_: listing_query_,
+      scroll = true
+    }) => {
+      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 ($a281666e5c15c2ec$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
+          $i7OB2$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_?.preventDefault();
+      const promise = this.#get_navigation_happened_promise(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) $i7OB2$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 this.#throwing_on_navigation.call(this, {
+        is_replace: is_replace_,
+        new_url: new_url_ instanceof URL ? new_url_ : new URL(new_url_, location.origin),
+        scroll: scroll
+      });
+      await promise;
+    })
+  };
+  constructor(on_navigation, listing_query_state_key) {
+    this.listing_query_state_key = listing_query_state_key;
+    this.on_navigation_ = on_navigation;
+  }
+}
 var $f577edfe2240eec1$var$_tmpl$ = ["<div", ' class="depict recommendations looks" style="', '">', "</div>"];
 let $f577edfe2240eec1$var$expandedLooksSignal_;
 function $f577edfe2240eec1$export$1935e6bdfc5ed8ce(props) {
@@ -1399,6 +1562,7 @@ function $f577edfe2240eec1$export$1935e6bdfc5ed8ce(props) {
       equals: false
     });
     const expandingAnimationDuration = 240;
+    const pseudoRouter = new (0, $4fd2ba03703a7d92$export$7e1297a3a19f10d8)("hard_navigation");
     const grid_spacing_override = $i7OB2$createMemo(() => {
       const {
         gridSpacing_: gridSpacing_
@@ -1424,19 +1588,35 @@ function $f577edfe2240eec1$export$1935e6bdfc5ed8ce(props) {
       });
       const decoded = await response?.json?.().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 $f577edfe2240eec1$var$runDisplayTransformersForLooks(baseData, listings, props.displayTransformers_);
+    });
+    $i7OB2$createEffect(() => {
+      const {
+        onNavigation_: onNavigation_
+      } = props;
+      if (onNavigation_) pseudoRouter.on_navigation_ = onNavigation_;
     });
     return $i7OB2$ssr($f577edfe2240eec1$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$ssrStyle(`--animation-duration: ${expandingAnimationDuration}ms`), $i7OB2$escape($i7OB2$createComponent((0, $011607bdf658f807$export$e68cff63f76bd15b), {
       get children() {
         return $c4492d24952ed731$export$d41d19e89346fa2({
-          product_card_template_: (display, info) => $28ee4f7db3cc44b8$export$44809a8a3e867e30({
+          product_card_template_: display => $28ee4f7db3cc44b8$export$44809a8a3e867e30({
             display_: display,
             FavoriteButton_: props.FavoriteButton_,
             placeholderImageAspectRatio_: props.imagePlaceholderAspectRatio_,
             animationDuration_: expandingAnimationDuration,
-            expandedLooksSignal_: $f577edfe2240eec1$var$expandedLooksSignal_
+            expandedLooksSignal_: $f577edfe2240eec1$var$expandedLooksSignal_,
+            priceFormatting_: () => props.priceFormatting_,
+            pseudoRouter_: pseudoRouter
           }),
           recommendations_resource_: looksResource,
           title_: () => props.title_,
@@ -1449,6 +1629,53 @@ function $f577edfe2240eec1$export$1935e6bdfc5ed8ce(props) {
     })));
   }, "LookSlider failed");
 }
+async function $f577edfe2240eec1$var$runDisplayTransformersForLooks(baseData, listings, displayTransformers) {
+  try {
+    const {
+      products: productTransformer,
+      categories: providedListingTransformer
+    } = displayTransformers || {};
+    if (!productTransformer && !providedListingTransformer) return listings;
+    const listingTransformer = providedListingTransformer || (({
+      data: data
+    }) => data);
+    const displaysToTransform = [];
+    const displayIdsPerListingId = {};
+    const transformedListingsPromise = listingTransformer({
+      ...baseData,
+      data: listings.map(({
+        displays: displays,
+        ...listing
+      }) => {
+        // 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++) {
+          const display = displays[i];
+          const uniqueIdOfDisplay = $16351e4c87b90b3d$export$548d053aba053d79(display);
+          displaysToTransform.push(display);
+          (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 => [$16351e4c87b90b3d$export$548d053aba053d79(display), display]));
+    return transformedListings.map(listing => $i7OB2$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) {
+    $i7OB2$dwarn("Displaytransformers threw", e);
+    return [];
+  }
+}
 const $90980bd87c9960f9$export$3064e1e8c6513da3 = new Set();
 let $90980bd87c9960f9$var$has_ran = false;
 function $90980bd87c9960f9$export$5162a71f252e6122() {
@@ -1489,21 +1716,6 @@ function $90980bd87c9960f9$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 $a281666e5c15c2ec$export$29d28dadc2d6b631(clickEvent) {
-  return clickEvent?.button ||
-  // if not zero it's a wheel click which opens in new tab
-  clickEvent?.metaKey ||
-  // if true, cmd button on macOS which opens in new tab
-  clickEvent?.ctrlKey ||
-  // if true, ctrl button on windows or linux which opens in new tab
-  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
  */
@@ -1543,12 +1755,6 @@ function $d8dbf52fea1773e2$export$f50b88e2a00918b5(fn) {
     }
   };
 }
-function $8c0f86cb3e266eeb$export$a71e92cfbb498adc(props) {
-  return $i7OB2$createMemo(() => {
-    const price_formatting = props.price_formatting_;
-    return $i7OB2$standard_price_format(props.price_, price_formatting.places_after_comma_, price_formatting.decimal_places_delimiter_, price_formatting.thousands_delimiter_);
-  });
-}
 function $f4125ce4984deee6$export$fb40a80c530e5f2b(selectedIndex, groupIndex, indexInGroup) {
   const isSelected = $i7OB2$createMemo(() => {
     const selectedValue = selectedIndex();
@@ -1855,7 +2061,7 @@ function $694b7f90501fea4c$export$5d2caaa6b530761c() {
 }
 var $19976a74d273070d$var$_tmpl$ = '<path d="M11.669 10.531l9.156-9.156a.78.78 0 0 0 .237-.569c0-.221-.079-.412-.237-.569A.8.8 0 0 0 20.24 0a.77.77 0 0 0-.569.237l-9.14 9.14-9.14-9.14A.79.79 0 0 0 .807 0a.77.77 0 0 0-.569.237A.78.78 0 0 0 0 .807a.77.77 0 0 0 .237.569l9.156 9.156-9.156 9.14c-.159.157-.237.349-.237.569s.079.412.237.569c.085.085.174.148.268.19a1.095 1.095 0 0 0 .316.048.894.894 0 0 0 .285-.048.84.84 0 0 0 .285-.19l9.139-9.14 9.14 9.14a.894.894 0 0 0 .268.19 1.049 1.049 0 0 0 .301.048.941.941 0 0 0 .301-.048.84.84 0 0 0 .285-.19.78.78 0 0 0 .237-.569c0-.221-.079-.412-.237-.569z"></path>';
 function $19976a74d273070d$export$3b621d86b1566b2(props = {}) {
-  return $i7OB2$ssrElement("svg", $i7OB2$mergeProps({
+  return $i7OB2$ssrElement("svg", $i7OB2$mergeProps1({
     xmlns: "http://www.w3.org/2000/svg",
     width: "21.064",
     height: "21.064",
@@ -1955,7 +2161,7 @@ function $f3213c0640246d58$export$ba17c5b7e6dda39f({
 }
 var $16f0ed5ea30d8d9c$var$_tmpl$ = '<path d="M19.811 20.174l-6.234-6.809a7.96 7.96 0 0 0 .923-1.179c.274-.424.502-.865.687-1.323a8.04 8.04 0 0 0 .42-1.436 7.88 7.88 0 0 0 .144-1.507c0-.526-.051-1.042-.154-1.548-.096-.506-.243-.995-.441-1.466s-.441-.919-.728-1.343a8.28 8.28 0 0 0-.984-1.21 7.86 7.86 0 0 0-1.2-.984A7.56 7.56 0 0 0 10.89.651C10.418.453 9.929.302 9.423.2S8.401.046 7.875.046 6.833.097 6.327.2 5.332.453 4.86.651a7.56 7.56 0 0 0-1.354.718c-.431.287-.831.615-1.2.984a8.28 8.28 0 0 0-.984 1.21 7.73 7.73 0 0 0-.728 1.343c-.198.472-.349.96-.451 1.466A8.31 8.31 0 0 0 0 7.921a8.31 8.31 0 0 0 .144 1.548c.103.506.253.995.451 1.466a8.08 8.08 0 0 0 .728 1.354 7.86 7.86 0 0 0 .984 1.2 7.54 7.54 0 0 0 1.2.995c.431.287.882.53 1.354.728.472.191.96.338 1.466.441a8.31 8.31 0 0 0 1.548.144c.451 0 .896-.038 1.333-.113a7.83 7.83 0 0 0 1.282-.328 7.55 7.55 0 0 0 1.2-.533 8.08 8.08 0 0 0 1.107-.749l6.245 6.809a.45.45 0 0 0 .174.123.55.55 0 0 0 .205.041.61.61 0 0 0 .195-.031c.061-.021.116-.055.164-.102.109-.096.164-.219.164-.369.007-.144-.038-.267-.133-.369zM1.046 7.921c0-.937.178-1.818.533-2.646.362-.834.851-1.559 1.466-2.174.622-.615 1.347-1.101 2.174-1.456.827-.362 1.712-.543 2.656-.543s1.829.181 2.656.543c.827.355 1.548.841 2.164 1.456.622.615 1.111 1.34 1.466 2.174a6.52 6.52 0 0 1 .543 2.646c0 .943-.181 1.829-.543 2.656a6.89 6.89 0 0 1-1.466 2.174c-.615.615-1.336 1.104-2.164 1.466-.827.356-1.712.533-2.656.533s-1.829-.178-2.656-.533c-.827-.362-1.552-.851-2.174-1.466-.615-.622-1.104-1.347-1.466-2.174-.355-.827-.533-1.712-.533-2.656z"></path>';
 function $16f0ed5ea30d8d9c$export$82eafebb825fc23f(props = {}) {
-  return $i7OB2$ssrElement("svg", $i7OB2$mergeProps({
+  return $i7OB2$ssrElement("svg", $i7OB2$mergeProps1({
     xmlns: "http://www.w3.org/2000/svg",
     width: "20",
     height: "22",
@@ -1964,7 +2170,7 @@ function $16f0ed5ea30d8d9c$export$82eafebb825fc23f(props = {}) {
 }
 var $190927650b4840eb$var$_tmpl$ = '<path d="M56 26.455a13.71 13.71 0 0 0-9.578 3.967A13.71 13.71 0 0 0 42.455 40v176a13.71 13.71 0 0 0 3.967 9.578A13.71 13.71 0 0 0 56 229.545h144A13.71 13.71 0 0 0 213.545 216V88a2.456 2.456 0 0 1 0-.002c.001-1.452-.597-2.895-1.623-3.922l-55.998-55.998a5.61 5.61 0 0 0-3.922-1.623 2.456 2.456 0 0 1-.002 0zm0 11.09h88A2.456 2.456 0 0 1 146.455 40v48c0 2.903 2.642 5.545 5.545 5.545h48A2.456 2.456 0 0 1 202.455 96v120a2.456 2.456 0 0 1-2.455 2.455H56A2.456 2.456 0 0 1 53.545 216V40A2.456 2.456 0 0 1 56 37.545zm103.061 11.498a2.456 2.456 0 0 1 2.676.531l28.689 28.689a2.456 2.456 0 0 1-1.736 4.191H160A2.456 2.456 0 0 1 157.545 80V51.311a2.456 2.456 0 0 1 1.516-2.268zM96 130.455c-2.903 0-5.545 2.642-5.545 5.545s2.642 5.545 5.545 5.545h64c2.903 0 5.545-2.642 5.545-5.545s-2.642-5.545-5.545-5.545zm0 32c-2.903 0-5.545 2.642-5.545 5.545s2.642 5.545 5.545 5.545h64c2.903 0 5.545-2.642 5.545-5.545s-2.642-5.545-5.545-5.545z"></path>';
 function $190927650b4840eb$export$605674723bcc715c(props = {}) {
-  return $i7OB2$ssrElement("svg", $i7OB2$mergeProps({
+  return $i7OB2$ssrElement("svg", $i7OB2$mergeProps1({
     xmlns: "http://www.w3.org/2000/svg",
     width: "32",
     height: "32",
@@ -2519,7 +2725,7 @@ function $5285d2814d0fac0c$export$b94867ecbd698f21({
     get children() {
       return $i7OB2$ssr($5285d2814d0fac0c$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$ssrAttribute("aria-label", $i7OB2$escape(i18n_.back_(), true), false), $i7OB2$escape($i7OB2$createComponent(BackIcon_, {})));
     }
-  })), `query ${!!on_back_ ? "has-adjacent-back-button" : ""}`, $i7OB2$ssrAttribute("aria-label", $i7OB2$escape(i18n_.search_field_field_aria_label_(), true), false) + $i7OB2$ssrAttribute("value", $i7OB2$escape(search_field_value_[0](), true), false) + $i7OB2$ssrAttribute("placeholder", $i7OB2$escape(i18n_.placeholder_text_(), true), false), $i7OB2$ssrAttribute("title", $i7OB2$escape(i18n_.clear_filters_query_sorting_after_submit_(), true), false), $i7OB2$ssrStyle($i7OB2$createMemo(() => search_field_value_[0]() ? "" : "display: none")()), $i7OB2$escape($i7OB2$createComponent((0, $19976a74d273070d$export$3b621d86b1566b2), {})), $i7OB2$ssrElement("button", $i7OB2$mergeProps({
+  })), `query ${!!on_back_ ? "has-adjacent-back-button" : ""}`, $i7OB2$ssrAttribute("aria-label", $i7OB2$escape(i18n_.search_field_field_aria_label_(), true), false) + $i7OB2$ssrAttribute("value", $i7OB2$escape(search_field_value_[0](), true), false) + $i7OB2$ssrAttribute("placeholder", $i7OB2$escape(i18n_.placeholder_text_(), true), false), $i7OB2$ssrAttribute("title", $i7OB2$escape(i18n_.clear_filters_query_sorting_after_submit_(), true), false), $i7OB2$ssrStyle($i7OB2$createMemo(() => search_field_value_[0]() ? "" : "display: none")()), $i7OB2$escape($i7OB2$createComponent((0, $19976a74d273070d$export$3b621d86b1566b2), {})), $i7OB2$ssrElement("button", $i7OB2$mergeProps1({
     "class": "submit major",
     type: "button"
   }, () => isNewModal ? {
@@ -3038,7 +3244,7 @@ function $4ce5b8892775b62d$export$67152d26d4f56ee8({
   selected_index_: [read_selected_index_, write_selected_index_]
 }) {
   const href = $i7OB2$createMemo(() => listing_()?.page_url); // <- 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 => $i7OB2$ssrElement("a", $i7OB2$mergeProps(props, {
+  const LinkToListing = props => $i7OB2$ssrElement("a", $i7OB2$mergeProps1(props, {
     get href() {
       return href();
     }
@@ -3328,7 +3534,7 @@ function $2f3171b02c8f4a5d$export$af1fb307bbba2417({
   $i7OB2$createComputed($i7OB2$on(search_field_value_[0], () => !suggestions_updating_blocked() && set_selected_index(undefined), {
     defer: true
   })); // reset autocomplete position if query changes
-  return [$i7OB2$createComponent((0, $903297121898e5ff$export$d4994a86c6235f72), $i7OB2$mergeProps(sharedSuggestionProps, {
+  return [$i7OB2$createComponent((0, $903297121898e5ff$export$d4994a86c6235f72), $i7OB2$mergeProps1(sharedSuggestionProps, {
     get title_() {
       return i18n_.popular_;
     },
@@ -3338,7 +3544,7 @@ function $2f3171b02c8f4a5d$export$af1fb307bbba2417({
       return itemIndexes_.suggestionsIndex_;
     },
     showPlaceholders_: () => showPlaceholders() || noResults_() && !noResultsPopularSuggestions.latest
-  })), $i7OB2$createComponent((0, $903297121898e5ff$export$d4994a86c6235f72), $i7OB2$mergeProps(sharedSuggestionProps, {
+  })), $i7OB2$createComponent((0, $903297121898e5ff$export$d4994a86c6235f72), $i7OB2$mergeProps1(sharedSuggestionProps, {
     get title_() {
       return i18n_.previous_;
     },
@@ -3349,7 +3555,7 @@ function $2f3171b02c8f4a5d$export$af1fb307bbba2417({
     },
     extraTitleRowElements_: () => $i7OB2$ssr($2f3171b02c8f4a5d$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape(i18n_.clear_all_from_filter_crumbs_())),
     showPlaceholders_: () => false
-  })), $i7OB2$createComponent((0, $903297121898e5ff$export$d4994a86c6235f72), $i7OB2$mergeProps(sharedSuggestionProps, {
+  })), $i7OB2$createComponent((0, $903297121898e5ff$export$d4994a86c6235f72), $i7OB2$mergeProps1(sharedSuggestionProps, {
     get title_() {
       return i18n_.content_;
     },
@@ -3750,7 +3956,7 @@ function $024fbc0a2d796fad$export$b2539bed5023c21c(props) {
   return $i7OB2$createComponent($024fbc0a2d796fad$var$TabsContext.Provider, {
     value: new (0, $i7OB2$ListenableSet)(),
     get children() {
-      return $i7OB2$createComponent($024fbc0a2d796fad$var$ActualTabs, $i7OB2$mergeProps(props, {
+      return $i7OB2$createComponent($024fbc0a2d796fad$var$ActualTabs, $i7OB2$mergeProps1(props, {
         get children() {
           return props.children;
         }
@@ -3780,7 +3986,7 @@ function $024fbc0a2d796fad$var$ActualTabs(props) {
     },
     children: item => {
       const weSelected = $i7OB2$createMemo(() => isSelected(item().id));
-      return $i7OB2$createComponent((0, $i7OB2$Dynamic), $i7OB2$mergeProps({
+      return $i7OB2$createComponent((0, $i7OB2$Dynamic), $i7OB2$mergeProps1({
         get component() {
           return props.AnchorComponent;
         },
@@ -3859,7 +4065,7 @@ function $024fbc0a2d796fad$export$3e41faf802a29e71(props) {
   if (!currentTabs) throw new Error("Tab must be a child of Tabs");
   const id = $i7OB2$createUniqueId();
   const ourSet = currentTabs;
-  const extendedProps = $i7OB2$mergeProps1({
+  const extendedProps = $i7OB2$mergeProps({
     id: id
   }, props);
   ourSet.add(extendedProps);
@@ -3973,102 +4179,6 @@ function $ca6f574bd8772184$var$history_state_change(signals, entries, state) {
     }
   });
 }
-class $4fd2ba03703a7d92$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
-     */
-  #throwing_on_navigation(...args) {
-    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_(...args);
-    } catch (e) {
-      queueMicrotask(() => {
-        throw e;
-      });
-    }
-  }
-  /**
-  * Vue has async router that needs to be awaited (it navigates after a microtask)
-  * This standardises waiting for all kinds of routers
-  */
-  #get_navigation_happened_promise(is_replace) {
-    return new Promise(resolve => {
-      const handler = what_happened => {
-        if (what_happened === (is_replace ? "replaceState" : "pushState")) {
-          resolve();
-          (0, $i7OB2$instant_exec_on_suspect_history_change).delete(handler);
-        }
-      };
-      (0, $i7OB2$instant_exec_on_suspect_history_change).add(handler);
-    });
-  }
-  navigate_ = {
-    /**
-    * Call this if you *just* want to replace the state object in history.state
-    */
-    replace_state_: new_state => {
-      // 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?.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_: $i7OB2$catchify(async ({
-      new_url_: raw_new_url,
-      event_: event_,
-      force_spa_navigation_: force_spa_navigation_,
-      is_replace_: is_replace_,
-      listing_query_: listing_query_,
-      scroll = true
-    }) => {
-      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 ($a281666e5c15c2ec$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
-          $i7OB2$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_?.preventDefault();
-      const promise = this.#get_navigation_happened_promise(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) $i7OB2$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 this.#throwing_on_navigation.call(this, {
-        is_replace: is_replace_,
-        new_url: new_url_ instanceof URL ? new_url_ : new URL(new_url_, location.origin),
-        scroll: scroll
-      });
-      await promise;
-    })
-  };
-  constructor(on_navigation, listing_query_state_key) {
-    this.listing_query_state_key = listing_query_state_key;
-    this.on_navigation_ = on_navigation;
-  }
-}
 var $2a26c8ff1ef1fe75$var$_tmpl$ = ["<div", ' class="image-container">', "</div>"];
 function $2a26c8ff1ef1fe75$export$41e1a079d40a0d58(props) {
   const [display] = $i7OB2$createResource(() => ({
@@ -4162,7 +4272,7 @@ function $3da8afe3ed57cf34$export$7da560f849543dff({
     get children() {
       return $i7OB2$ssr($3da8afe3ed57cf34$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape(title()));
     }
-  }), $i7OB2$ssr($3da8afe3ed57cf34$var$_tmpl$2, $i7OB2$ssrHydrationKey(), $i7OB2$escape($a458486f22b22f63$export$a2cc176055f8f08()), $i7OB2$escape($i7OB2$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), $i7OB2$mergeProps({
+  }), $i7OB2$ssr($3da8afe3ed57cf34$var$_tmpl$2, $i7OB2$ssrHydrationKey(), $i7OB2$escape($a458486f22b22f63$export$a2cc176055f8f08()), $i7OB2$escape($i7OB2$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), $i7OB2$mergeProps1({
     get rows() {
       return rows_object_();
     },
@@ -4446,7 +4556,7 @@ function $8560c919ff763930$var$ActualShopTheLookButton(props) {
   const button = $i7OB2$ssrElement("button", localProps.buttonAttributes, () => $i7OB2$escape(localProps?.buttonAttributes?.children) || "Shop the look", true);
   $i7OB2$createEffect(() => button.style.display = displayStyleValue()); // Set our attributes like this, so we allow total control over the button from the outside via buttonAttributes
   $i7OB2$createEffect(() => !hasAnythingToShow() && closeModal()); // close modal if we ever get into the state of having it open and not having anything to show
-  $8560c919ff763930$var$modalProps = $i7OB2$mergeProps1(partForModal, {
+  $8560c919ff763930$var$modalProps = $i7OB2$mergeProps(partForModal, {
     products_to_shop_: products_to_shop_
   });
   button.addEventListener("click", openModal);
@@ -4862,7 +4972,7 @@ const $49b79728e7d9e2a1$export$48513f6b9f8ce62d = props => {
 };
 var $f8a56ba74eedd0c6$var$_tmpl$ = '<path d="M10.173 5.548H5.5V.875c0-.075-.027-.14-.081-.193S5.301.601 5.226.601s-.14.027-.193.081-.081.118-.081.193v4.673H.274c-.075 0-.14.027-.193.081A.27.27 0 0 0 0 5.827c0 .075.027.14.081.193s.118.081.193.081h4.678v4.673c0 .075.027.14.081.193s.118.081.193.081.14-.027.193-.081.081-.118.081-.193V6.101h4.673a.27.27 0 0 0 .199-.081c.054-.054.08-.118.08-.193a.27.27 0 0 0-.279-.279z" fill="#000"></path>';
 function $f8a56ba74eedd0c6$export$f21ab0717a89c77f(props) {
-  return $i7OB2$ssrElement("svg", $i7OB2$mergeProps(props, {
+  return $i7OB2$ssrElement("svg", $i7OB2$mergeProps1(props, {
     xmlns: "http://www.w3.org/2000/svg",
     width: "11",
     height: "12"
@@ -6033,7 +6143,7 @@ const $93716a9ad0dea854$export$414f6a19d38e655c = ({
           const MakeButton = attributes => {
             const label = $i7OB2$createMemo(() => value().name_ || value().value_ + "");
             const count_zero = $i7OB2$createMemo(() => value().count_ === 0);
-            return $i7OB2$ssrElement("button", $i7OB2$mergeProps(attributes, {
+            return $i7OB2$ssrElement("button", $i7OB2$mergeProps1(attributes, {
               get disabled() {
                 return count_zero() && !is_selected();
               },
@@ -6333,7 +6443,7 @@ var $12497d09ef87296e$export$2e2bcd8739ae039 = {
 };
 var $9bc34983fc5f7bdb$var$_tmpl$ = '<path d="M4.617 12.738a.48.48 0 0 1-.164-.027c-.051-.023-.094-.055-.129-.098L.125 8.414A.39.39 0 0 1 0 8.117c0-.113.039-.211.125-.293s.18-.125.293-.125.215.043.297.125l3.902 3.902L16.086.262c.082-.082.18-.125.297-.125s.211.043.293.125.125.184.125.301-.043.215-.125.297L4.914 12.613c-.039.043-.086.078-.141.098s-.102.027-.156.027zm0 0"></path>';
 function $9bc34983fc5f7bdb$export$f2ca6fc699ca1fb4(props = {}) {
-  return $i7OB2$ssrElement("svg", $i7OB2$mergeProps({
+  return $i7OB2$ssrElement("svg", $i7OB2$mergeProps1({
     xmlns: "http://www.w3.org/2000/svg",
     width: "16.8",
     height: "14"
@@ -7256,7 +7366,7 @@ class $7fa23e2a0079eca4$export$e015ed2f2950f2e3 {
     // 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 => $i7OB2$mergeProps1(item, {
+    const transformedSuggestions = transformerResult.filter(item => item.is_suggestion !== false).map(item => $i7OB2$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];
@@ -7787,7 +7897,7 @@ function $172e1b898d457050$export$7de92c4c2205ebf3({
     return (0, $7747fe1a8c5652e3$export$6c9030e511152266) + get_showing_recommendation_rows() * Math.max(...possible_num_columns);
   });
   // Don't tear down elements every time one updates the page - don't put them within <Show>
-  const elements = $i7OB2$ssr($172e1b898d457050$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape(i18n_.search_recs_title_()), $i7OB2$escape($a458486f22b22f63$export$a2cc176055f8f08()), $i7OB2$escape($i7OB2$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), $i7OB2$mergeProps({
+  const elements = $i7OB2$ssr($172e1b898d457050$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape(i18n_.search_recs_title_()), $i7OB2$escape($a458486f22b22f63$export$a2cc176055f8f08()), $i7OB2$escape($i7OB2$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), $i7OB2$mergeProps1({
     rows: rows_object,
     layout: "grid",
     element_attributes: {
@@ -8607,7 +8717,7 @@ var $6dee9211e57ac31a$var$_tmpl$ = ["<style", ' type="text/css">', "</style>"];
 const $6dee9211e57ac31a$export$c500183c31c2b22e = "--spans-columns";
 function $6dee9211e57ac31a$export$ab6b147eec64fea5(props) {
   const container_class = "x" + $i7OB2$createUniqueId();
-  const container_element_ = $i7OB2$ssrElement("div", $i7OB2$mergeProps(() => props.element_attributes, {
+  const container_element_ = $i7OB2$ssrElement("div", $i7OB2$mergeProps1(() => props.element_attributes, {
     classList: {
       [container_class]: true
     }
@@ -8857,7 +8967,7 @@ function $e7a7eb102ddc0c79$var$wrap_blocks_in_div(rendered_content_blocks, max_s
         })));
       }
     });
-    return $i7OB2$mergeProps1(block, {
+    return $i7OB2$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
@@ -9092,7 +9202,7 @@ function $2d25e42846eac370$export$3925f87b1545cfc6({
                       } = slider;
                       const Layout = props => $c8d5ff4524619fcd$export$445d8d3f5f706a40(props, insert_here, true);
                       // Do like this, so we don't have to call mergeProps ourselves
-                      $i7OB2$createComponent(Layout, $i7OB2$mergeProps(layout_options_, {
+                      $i7OB2$createComponent(Layout, $i7OB2$mergeProps1(layout_options_, {
                         rows: "all",
                         get cols_at_size() {
                           return modified_cols_at_size();
@@ -9238,7 +9348,7 @@ function $68a258a92b88f02f$export$1f1775a58da589b5({
 var $e1bb71e65e01a3a0$var$_tmpl$ = '<path d="M6.199 10.254a.35.35 0 0 0-.496 0L3.5 12.453V.348a.35.35 0 0 0-.7 0v12.105L.598 10.254c-.137-.137-.359-.137-.492 0a.35.35 0 0 0 0 .492l2.797 2.801a.35.35 0 0 0 .496 0L6.2 10.746c.137-.137.137-.355 0-.492zM9.449 3.5H8.051a.35.35 0 0 1-.352-.352V1.75c0-.191.156-.352.352-.352h1.398c.195 0 .352.16.352.352v1.398a.35.35 0 0 1-.352.352zm-1.051-.699h.703v-.699h-.703zm0 0"></path>',
   $e1bb71e65e01a3a0$var$_tmpl$2 = '<path d="M10.852 6.301H8.051a.35.35 0 0 1-.352-.352V4.551a.35.35 0 0 1 .352-.352h2.801a.35.35 0 0 1 .348.352v1.398a.35.35 0 0 1-.348.352zm-2.453-.699H10.5v-.703H8.398zm3.851 3.5H8.051c-.195 0-.352-.16-.352-.352V7.352A.35.35 0 0 1 8.051 7h4.199c.191 0 .352.156.352.352V8.75c0 .191-.16.352-.352.352zm-3.852-.703h3.5V7.7h-3.5zm5.25 3.499H8.051a.35.35 0 0 1-.352-.348v-1.402a.35.35 0 0 1 .352-.348h5.598a.35.35 0 0 1 .352.348v1.402a.35.35 0 0 1-.352.348zm-5.25-.699H13.3V10.5H8.398zm0 0"></path>';
 function $e1bb71e65e01a3a0$export$da32f7add8a22e86(props = {}) {
-  return $i7OB2$ssrElement("svg", $i7OB2$mergeProps({
+  return $i7OB2$ssrElement("svg", $i7OB2$mergeProps1({
     xmlns: "http://www.w3.org/2000/svg",
     width: "14",
     height: "14",
@@ -9247,7 +9357,7 @@ function $e1bb71e65e01a3a0$export$da32f7add8a22e86(props = {}) {
 }
 var $05fbe84eb34564ec$var$_tmpl$ = '<path d="M6.199 10.254a.35.35 0 0 0-.496 0L3.5 12.453V.348a.35.35 0 0 0-.7 0v12.105L.598 10.254c-.137-.137-.359-.137-.492 0a.35.35 0 0 0 0 .492l2.797 2.801a.35.35 0 0 0 .496 0L6.2 10.746c.137-.137.137-.355 0-.492zm3.25 1.644H8.051a.35.35 0 0 1-.352-.348v-1.402a.35.35 0 0 1 .352-.348h1.398a.35.35 0 0 1 .352.348v1.402a.35.35 0 0 1-.352.348zm-1.051-.699h.703V10.5h-.703zm2.454-2.097H8.051c-.195 0-.352-.16-.352-.352V7.352A.35.35 0 0 1 8.051 7h2.801a.35.35 0 0 1 .348.352V8.75c0 .191-.156.352-.348.352zm-2.453-.703H10.5V7.7H8.398zm3.851-2.098H8.051a.35.35 0 0 1-.352-.352V4.551a.35.35 0 0 1 .352-.352h4.199c.191 0 .352.156.352.352v1.398c0 .195-.16.352-.352.352zm-3.852-.699h3.5v-.703h-3.5zm5.25-2.102H8.051a.35.35 0 0 1-.352-.352V1.75c0-.191.156-.352.352-.352h5.598c.195 0 .352.16.352.352v1.398a.35.35 0 0 1-.352.352zm-5.25-.699H13.3v-.699H8.398zm0 0"></path>';
 function $05fbe84eb34564ec$export$d10e63059ddb9fd4(props = {}) {
-  return $i7OB2$ssrElement("svg", $i7OB2$mergeProps({
+  return $i7OB2$ssrElement("svg", $i7OB2$mergeProps1({
     xmlns: "http://www.w3.org/2000/svg",
     width: "14",
     height: "14",
@@ -9360,7 +9470,7 @@ function $757dac7f7c6c5241$export$9bf11afa910f536e({
           })));
         },
         get children() {
-          return $i7OB2$ssr($757dac7f7c6c5241$var$_tmpl$5, $i7OB2$ssrHydrationKey(), $i7OB2$escape($i7OB2$createComponent((0, $fab07f52c9861732$export$3f1a388cc0d8fed7), $i7OB2$mergeProps(args_for_filtering_, {
+          return $i7OB2$ssr($757dac7f7c6c5241$var$_tmpl$5, $i7OB2$ssrHydrationKey(), $i7OB2$escape($i7OB2$createComponent((0, $fab07f52c9861732$export$3f1a388cc0d8fed7), $i7OB2$mergeProps1(args_for_filtering_, {
             are_in_modal_: true
           }))));
         }
@@ -9916,7 +10026,7 @@ function $b2bf2cdcff8142d8$export$f631859cab12b342({
     if (content_result_) return $i7OB2$ssrElement("a", attributes, () => $i7OB2$escape(children), true);
     return $i7OB2$ssrElement("div", attributes, () => $i7OB2$escape(children), true);
   };
-  return $i7OB2$ssr($b2bf2cdcff8142d8$var$_tmpl$2, $i7OB2$ssrHydrationKey(), $i7OB2$escape($i7OB2$createComponent(LinkIfPossible, $i7OB2$mergeProps(make_link_attributes, {
+  return $i7OB2$ssr($b2bf2cdcff8142d8$var$_tmpl$2, $i7OB2$ssrHydrationKey(), $i7OB2$escape($i7OB2$createComponent(LinkIfPossible, $i7OB2$mergeProps1(make_link_attributes, {
     tabIndex: "-1",
     get children() {
       return $i7OB2$createComponent((0, $190927650b4840eb$export$605674723bcc715c), {
@@ -9924,7 +10034,7 @@ function $b2bf2cdcff8142d8$export$f631859cab12b342({
         height: "28"
       });
     }
-  }))), $i7OB2$escape($i7OB2$createComponent(LinkIfPossible, $i7OB2$mergeProps({
+  }))), $i7OB2$escape($i7OB2$createComponent(LinkIfPossible, $i7OB2$mergeProps1({
     "class": "content-title line-clamp"
   }, make_link_attributes, {
     get title() {
@@ -10059,7 +10169,7 @@ function $49de9d31aeea1b5e$export$6d0c9c22f6652669({
       return (0, $f8c929beb82c512b$export$2452208c79fe93ea).content;
     },
     number_of_results_: num_results
-  })), $i7OB2$escape($i7OB2$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), $i7OB2$mergeProps({
+  })), $i7OB2$escape($i7OB2$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), $i7OB2$mergeProps1({
     layout: "grid",
     element_attributes: {
       class: "cards"
@@ -10431,7 +10541,7 @@ function $7097477c78a89208$export$a54ec244c8863715({
   });
   const [sort_and_filter_element_, set_sort_and_filter_element_] = $i7OB2$createSignal();
   const no_results_text_ = $i7OB2$createMemo(() => (search_results_()?.content_search_links?.length ? i18n_.no_products_ : i18n_.no_results_text_)());
-  const results_for = $i7OB2$createComponent((0, $f8c929beb82c512b$export$9dd50d35b9d94fdf), $i7OB2$mergeProps({
+  const results_for = $i7OB2$createComponent((0, $f8c929beb82c512b$export$9dd50d35b9d94fdf), $i7OB2$mergeProps1({
     get type() {
       return (0, $f8c929beb82c512b$export$2452208c79fe93ea).products;
     },
@@ -12160,7 +12270,7 @@ function $df5d81d0fe61ff21$var$add_us_to_crumbs(plp_meta) {
   return $i7OB2$createMemo(() => {
     const api_value = plp_meta()?.breadcrumbs;
     if (!api_value) return api_value;
-    return [...api_value, $i7OB2$mergeProps1(plp_meta(), {
+    return [...api_value, $i7OB2$mergeProps(plp_meta(), {
       get page_url() {
         return href_accessor();
       }