@depict-ai/ui 4.3.1 → 4.3.2

package/ES10/index.cjs

@@ -1,8 +1,8 @@
 var $52FdA$depictaiutilishared = require("@depict-ai/utilishared/ES10");
 var $52FdA$solidjsweb = require("solid-js/web");
 var $52FdA$solidjs = require("solid-js");
-var $52FdA$depictaiutilisharedlatest = require("@depict-ai/utilishared/ES10");
 var $52FdA$babelruntimehelpersdefineProperty = require("@babel/runtime/helpers/defineProperty");
+var $52FdA$depictaiutilisharedlatest = require("@depict-ai/utilishared/ES10");
 var $52FdA$babelruntimehelpersclassPrivateFieldSet = require("@babel/runtime/helpers/classPrivateFieldSet");
 var $52FdA$babelruntimehelpersclassPrivateFieldGet = require("@babel/runtime/helpers/classPrivateFieldGet");
 var $52FdA$solidjsstore = require("solid-js/store");
@@ -100,7 +100,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $335c02c1241a9ca8$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $335c02c1241a9ca8$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $c10e33c4681f8c9b$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.3.1";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.3.2";
 const $5401a6698b0c0658$var$transform_elements = sorted_cols_at_size => {
   const cols_at_size = [];
   for (let i = 0; i < sorted_cols_at_size.length; i++) {
@@ -1121,7 +1121,7 @@ function $858fdcf73148519f$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] = $52FdA$solidjs.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] = $52FdA$solidjs.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] = $52FdA$solidjs.createSignal(false);
@@ -1177,13 +1177,18 @@ function $858fdcf73148519f$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[$858fdcf73148519f$export$f8945274f08a3105] || (listingContext[$858fdcf73148519f$export$f8945274f08a3105] = new Set());
     const [, setMostPrevalentAspectRatio] = listingContext[$858fdcf73148519f$export$6066eb417ed2e9f7] || (listingContext[$858fdcf73148519f$export$6066eb417ed2e9f7] = $52FdA$solidjs.createSignal());
     img.addEventListener("load", $52FdA$depictaiutilishared.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_) ? {
@@ -1205,6 +1210,10 @@ function $858fdcf73148519f$export$6e5611bc7e57e477(props) {
   }
   $52FdA$solidjs.onCleanup(() => gotCleanedUp = true);
   $52FdA$solidjsweb.spread(img, $52FdA$solidjs.mergeProps(modifiedOtherAttributes), false, true);
+  $52FdA$solidjs.createRenderEffect(() => {
+    props.src;
+    srcJustChanged = true;
+  });
   $52FdA$solidjs.createEffect(() => {
     if (!props.size()) return; // wait until we have a size, run every time the size changes
     if (timeoutSet) return;
@@ -1272,48 +1281,22 @@ function $28535bb7671c63d1$export$e4b984597b71e989(props) {
     context[$28535bb7671c63d1$export$d7b7ab832c20e2f4] = $52FdA$solidjs.createSignal();
   const [currentImageSize, setCurrentImageSize] = (context === null || context === void 0 ? void 0 : context[$28535bb7671c63d1$export$d7b7ab832c20e2f4]) || $28535bb7671c63d1$var$backupSizeSignal; // use global fallback signal (might lead to blurry images) if no context is available
   const [mostPrevalentAspectRatio] = context ? context[(0, $858fdcf73148519f$export$6066eb417ed2e9f7)] || (context[(0, $858fdcf73148519f$export$6066eb417ed2e9f7)] = $52FdA$solidjs.createSignal()) : [];
-  const [aspectRatio, setAspectRatio] = $52FdA$solidjs.createSignal($52FdA$solidjs.untrack(() => props.aspectRatio));
   const container = $ce467edb5343cfcd$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, $c0cf6af094336798$export$8a2234b5b1a5ebd4), ", ").concat(targetRatio, ")");
+      }
+      return props.aspectRatio;
     }
   });
   const owner = $52FdA$solidjs.getOwner();
   let createdSizeAccessor = false;
   let wasCleanedUp = false;
-  let timeout;
-  $52FdA$solidjs.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, $c0cf6af094336798$export$8a2234b5b1a5ebd4), ", ").concat(targetRatio, ")");
-        const updateAspectRatio = $52FdA$depictaiutilishared.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);
-  });
   $52FdA$solidjs.createEffect(() => {
     if (currentImageSize() || wasCleanedUp) return; // We get into the effect when onCleanup is called if we don't have wasCleanedUp
     // ensure we always have a size accessor
@@ -1363,6 +1346,12 @@ function $f3db423dc84bc35d$export$9d4a4b669b1929ab(props) {
     }
   }));
 }
+function $f38f2e64ebe2da86$export$a71e92cfbb498adc(props) {
+  return $52FdA$solidjs.createMemo(() => {
+    const price_formatting = props.price_formatting_;
+    return $52FdA$depictaiutilishared.standard_price_format(props.price_, price_formatting.places_after_comma_, price_formatting.decimal_places_delimiter_, price_formatting.thousands_delimiter_);
+  });
+}
 var $d66c35b5a6d6d926$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=img-wrapper>`),
   $d66c35b5a6d6d926$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<span class="d-price original">`),
   $d66c35b5a6d6d926$var$_tmpl$3 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=right-part><div class=text-container><span class="d-title line-clamp"></span><span class=d-price></span><!$><!/></div><!$><!/>`),
@@ -1374,7 +1363,9 @@ function $d66c35b5a6d6d926$export$b73ed90f0ee50dc3(_ref) {
     isExpanded_: isExpanded_,
     textFadeInAnimationRunning_: textFadeInAnimationRunning_,
     outerRef_: outerRef_,
-    animationDuration_: animationDuration_
+    animationDuration_: animationDuration_,
+    priceFormatting_: priceFormatting_,
+    pseudoRouter_: pseudoRouter_
   } = _ref;
   const variantToUse = $52FdA$solidjs.createMemo(() => {
     const display = display_();
@@ -1395,7 +1386,12 @@ function $d66c35b5a6d6d926$export$b73ed90f0ee50dc3(_ref) {
     var _variantToUse3;
     return (_variantToUse3 = variantToUse()) === null || _variantToUse3 === void 0 ? void 0 : _variantToUse3.original_price;
   });
-  const isOnSale = $52FdA$solidjs.createMemo(() => salePrice.latest !== originalPrice.latest); // .latest doesn't trigger suspense
+  const isOnSale = $52FdA$solidjs.createMemo(() => !salePrice.loading && !originalPrice.loading && salePrice.latest !== originalPrice.latest); // .latest doesn't trigger suspense after the initial load
+  const enableLink = $52FdA$solidjs.createMemo(() => isExpanded_() && !animationIsRunning());
+  const href = $52FdA$solidjs.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$ = $52FdA$solidjsweb.getNextElement($d66c35b5a6d6d926$var$_tmpl$4),
@@ -1405,11 +1401,16 @@ function $d66c35b5a6d6d926$export$b73ed90f0ee50dc3(_ref) {
       [_el$15, _co$4] = $52FdA$solidjsweb.getNextMarker(_el$14.nextSibling);
     var _ref$ = outerRef_;
     typeof _ref$ === "function" ? $52FdA$solidjsweb.use(_ref$, _el$) : outerRef_ = _el$;
-    $52FdA$solidjsweb.spread(_el$, $52FdA$solidjsweb.mergeProps(() => {
-      var _variantToUse4;
-      return isExpanded_() && !animationIsRunning() ? {
-        href: (_variantToUse4 = variantToUse()) === null || _variantToUse4 === void 0 ? void 0 : _variantToUse4.page_url
-      } : {};
+    $52FdA$solidjsweb.spread(_el$, $52FdA$solidjsweb.mergeProps(() => enableLink() ? {
+      href: href()
+    } : {}, {
+      get onClick() {
+        return $52FdA$depictaiutilishared.catchify(event_ => enableLink() && pseudoRouter_.navigate_.go_to_({
+          new_url_: href(),
+          is_replace_: false,
+          event_: event_
+        }));
+      }
     }), false, true);
     $52FdA$solidjsweb.insert(_el$, $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
       when: imageUrl,
@@ -1438,7 +1439,10 @@ function $d66c35b5a6d6d926$export$b73ed90f0ee50dc3(_ref) {
                 return isExpanded_() ? 0.75 : 1;
               },
               get autoAdjustAspectRatio() {
-                return isExpanded_() ? "smoothed" : false;
+                return isExpanded_();
+              },
+              imgProps: {
+                keyRatioUpdating: true
               }
             });
           }
@@ -1499,26 +1503,68 @@ function $d66c35b5a6d6d926$export$b73ed90f0ee50dc3(_ref) {
             width: "20ch"
           });
         });
-        $52FdA$solidjsweb.insert(_el$6, (() => {
-          var _c$ = $52FdA$solidjsweb.memo(() => !!(!variantToUse() || salePrice.loading));
-          return () => _c$() ? $52FdA$solidjsweb.createComponent((0, $a7f7d416e6f61504$export$89c6019e4baa40b1), {
-            height: "1em",
-            width: "20ch"
-          }) : salePrice();
-        })());
+        $52FdA$solidjsweb.insert(_el$6, $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
+          get when() {
+            return variantToUse() && !salePrice.loading;
+          },
+          get fallback() {
+            return $52FdA$solidjsweb.createComponent((0, $a7f7d416e6f61504$export$89c6019e4baa40b1), {
+              height: "1em",
+              width: "20ch"
+            });
+          },
+          get children() {
+            return $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
+              get when() {
+                return salePrice.latest;
+              },
+              get children() {
+                return [$52FdA$solidjsweb.memo(() => priceFormatting_().pre_), $52FdA$solidjsweb.createComponent((0, $f38f2e64ebe2da86$export$a71e92cfbb498adc), {
+                  get price_() {
+                    return salePrice();
+                  },
+                  get price_formatting_() {
+                    return priceFormatting_();
+                  }
+                }), $52FdA$solidjsweb.memo(() => priceFormatting_().post_)];
+              }
+            });
+          }
+        }));
         $52FdA$solidjsweb.insert(_el$4, $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
           get when() {
             return isOnSale();
           },
           get children() {
             var _el$7 = $52FdA$solidjsweb.getNextElement($d66c35b5a6d6d926$var$_tmpl$2);
-            $52FdA$solidjsweb.insert(_el$7, (() => {
-              var _c$2 = $52FdA$solidjsweb.memo(() => !!(!variantToUse() || originalPrice.loading));
-              return () => _c$2() ? $52FdA$solidjsweb.createComponent((0, $a7f7d416e6f61504$export$89c6019e4baa40b1), {
-                height: "1em",
-                width: "20ch"
-              }) : originalPrice();
-            })());
+            $52FdA$solidjsweb.insert(_el$7, $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
+              get when() {
+                return variantToUse() && !originalPrice.loading;
+              },
+              get fallback() {
+                return $52FdA$solidjsweb.createComponent((0, $a7f7d416e6f61504$export$89c6019e4baa40b1), {
+                  height: "1em",
+                  width: "20ch"
+                });
+              },
+              get children() {
+                return $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
+                  get when() {
+                    return salePrice.latest;
+                  },
+                  get children() {
+                    return [$52FdA$solidjsweb.memo(() => priceFormatting_().pre_), $52FdA$solidjsweb.createComponent((0, $f38f2e64ebe2da86$export$a71e92cfbb498adc), {
+                      get price_() {
+                        return originalPrice();
+                      },
+                      get price_formatting_() {
+                        return priceFormatting_();
+                      }
+                    }), $52FdA$solidjsweb.memo(() => priceFormatting_().post_)];
+                  }
+                });
+              }
+            }));
             return _el$7;
           }
         }), _el$9, _co$);
@@ -1596,7 +1642,9 @@ function $e0b3f1f332b6863b$export$ebf0b1d4f90c09ae(_ref) {
     userWantsExpandedSignal_: [userWantsExpanded, setUserWantsExpanded],
     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
@@ -1650,11 +1698,13 @@ function $e0b3f1f332b6863b$export$ebf0b1d4f90c09ae(_ref) {
             },
             children: (display, index) => {
               return $52FdA$solidjsweb.createComponent((0, $d66c35b5a6d6d926$export$b73ed90f0ee50dc3), {
+                pseudoRouter_: pseudoRouter_,
                 animationDuration_: animationDuration_,
                 display_: display,
                 FavoriteButton_: FavoriteButton_,
                 isExpanded_: userWantsExpanded,
                 textFadeInAnimationRunning_: textFadeInAnimationRunning,
+                priceFormatting_: priceFormatting_,
                 outerRef_: el => $52FdA$solidjs.createEffect(() => {
                   if (index !== 0) return;
                   const resizeObserver = new ResizeObserver($52FdA$depictaiutilishared.catchify(records => setLookItemHeight(records.at(-1).contentRect.height)));
@@ -1698,10 +1748,10 @@ function $47e3c3102c78121b$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_ = $52FdA$solidjs.createSignal(false);
   const [userWantsExpanded, setUserWantsExpanded] = useWantsExpandedSignal_;
@@ -1747,7 +1797,7 @@ function $47e3c3102c78121b$export$44809a8a3e867e30(_ref) {
     when: display_,
     get fallback() {
       return $52FdA$solidjsweb.createComponent((0, $b8a8d61b3ec5f5ac$export$3f37af283f8fb843), {
-        aspectRatio: placeholderImageAspectRatio_
+        aspectRatio: "var(".concat((0, $c0cf6af094336798$export$8a2234b5b1a5ebd4), ", ").concat(placeholderImageAspectRatio_, ")")
       });
     },
     get children() {
@@ -1765,11 +1815,137 @@ function $47e3c3102c78121b$export$44809a8a3e867e30(_ref) {
     containerWidth_: containerWidth_,
     animationDuration_: animationDuration_,
     supportsHover_: supportsHover_,
-    FavoriteButton_: FavoriteButton_
+    FavoriteButton_: FavoriteButton_,
+    priceFormatting_: priceFormatting_,
+    pseudoRouter_: pseudoRouter_
   })]);
   return container;
 }
 $52FdA$solidjsweb.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 $9ca08bcacbc598ce$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 $73014ff36186a4dd$var$_classPrivateMethodInitSpec(obj, privateSet) {
+  $73014ff36186a4dd$var$_checkPrivateRedeclaration(obj, privateSet);
+  privateSet.add(obj);
+}
+function $73014ff36186a4dd$var$_checkPrivateRedeclaration(obj, privateCollection) {
+  if (privateCollection.has(obj)) throw new TypeError("Cannot initialize the same private elements twice on an object");
+}
+function $73014ff36186a4dd$var$_classPrivateMethodGet(receiver, privateSet, fn) {
+  if (!privateSet.has(receiver)) throw new TypeError("attempted to get private field on non-instance");
+  return fn;
+}
+var $73014ff36186a4dd$var$_throwing_on_navigation = /*#__PURE__*/new WeakSet();
+var $73014ff36186a4dd$var$_get_navigation_happened_promise = /*#__PURE__*/new WeakSet();
+class $73014ff36186a4dd$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) {
+    $73014ff36186a4dd$var$_classPrivateMethodInitSpec(this, $73014ff36186a4dd$var$_get_navigation_happened_promise);
+    $73014ff36186a4dd$var$_classPrivateMethodInitSpec(this, $73014ff36186a4dd$var$_throwing_on_navigation);
+    $parcel$interopDefault($52FdA$babelruntimehelpersdefineProperty)(this, "on_navigation_", void 0);
+    $parcel$interopDefault($52FdA$babelruntimehelpersdefineProperty)(this, "listing_query_state_key", void 0);
+    $parcel$interopDefault($52FdA$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_: $52FdA$depictaiutilishared.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 ($9ca08bcacbc598ce$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
+            $52FdA$depictaiutilishared.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 = $73014ff36186a4dd$var$_classPrivateMethodGet(this, $73014ff36186a4dd$var$_get_navigation_happened_promise, $73014ff36186a4dd$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) $52FdA$depictaiutilishared.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 $73014ff36186a4dd$var$_classPrivateMethodGet(this, $73014ff36186a4dd$var$_throwing_on_navigation, $73014ff36186a4dd$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 $73014ff36186a4dd$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 $73014ff36186a4dd$var$_get_navigation_happened_promise2(is_replace) {
+  return new Promise(resolve => {
+    const handler = what_happened => {
+      if (what_happened === (is_replace ? "replaceState" : "pushState")) {
+        resolve();
+        (0, $52FdA$depictaiutilishared.instant_exec_on_suspect_history_change).delete(handler);
+      }
+    };
+    (0, $52FdA$depictaiutilishared.instant_exec_on_suspect_history_change).add(handler);
+  });
+}
 var $8446f782881fa12e$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class="depict recommendations looks"style=--animation-duration:240ms>`);
 let $8446f782881fa12e$var$expandedLooksSignal_;
 function $8446f782881fa12e$export$1935e6bdfc5ed8ce(props) {
@@ -1778,6 +1954,7 @@ function $8446f782881fa12e$export$1935e6bdfc5ed8ce(props) {
       equals: false
     }));
     const expandingAnimationDuration = 240;
+    const pseudoRouter = new (0, $73014ff36186a4dd$export$7e1297a3a19f10d8)("hard_navigation");
     const grid_spacing_override = $52FdA$solidjs.createMemo(() => {
       const {
         gridSpacing_: gridSpacing_
@@ -1805,21 +1982,37 @@ function $8446f782881fa12e$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 $8446f782881fa12e$var$runDisplayTransformersForLooks(baseData, listings, props.displayTransformers_);
+    });
+    $52FdA$solidjs.createEffect(() => {
+      const {
+        onNavigation_: onNavigation_
+      } = props;
+      if (onNavigation_) pseudoRouter.on_navigation_ = onNavigation_;
     });
     return (() => {
       var _el$ = $52FdA$solidjsweb.getNextElement($8446f782881fa12e$var$_tmpl$);
       $52FdA$solidjsweb.insert(_el$, $52FdA$solidjsweb.createComponent((0, $d067f3a30f047b41$export$e68cff63f76bd15b), {
         get children() {
           return $236a257ee52e5414$export$d41d19e89346fa2({
-            product_card_template_: (display, info) => $47e3c3102c78121b$export$44809a8a3e867e30({
+            product_card_template_: display => $47e3c3102c78121b$export$44809a8a3e867e30({
               display_: display,
               FavoriteButton_: props.FavoriteButton_,
               placeholderImageAspectRatio_: props.imagePlaceholderAspectRatio_,
               animationDuration_: expandingAnimationDuration,
-              expandedLooksSignal_: $8446f782881fa12e$var$expandedLooksSignal_
+              expandedLooksSignal_: $8446f782881fa12e$var$expandedLooksSignal_,
+              priceFormatting_: () => props.priceFormatting_,
+              pseudoRouter_: pseudoRouter
             }),
             recommendations_resource_: looksResource,
             title_: () => props.title_,
@@ -1834,6 +2027,58 @@ function $8446f782881fa12e$export$1935e6bdfc5ed8ce(props) {
     })();
   }, "LookSlider failed");
 }
+async function $8446f782881fa12e$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 = $b85edfec41cd3989$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 => [$b85edfec41cd3989$export$548d053aba053d79(display), display]));
+    return transformedListings.map(listing => $52FdA$solidjs.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) {
+    $52FdA$depictaiutilishared.dwarn("Displaytransformers threw", e);
+    return [];
+  }
+}
 const $cfcd56242923775d$export$3064e1e8c6513da3 = new Set();
 let $cfcd56242923775d$var$has_ran = false;
 function $cfcd56242923775d$export$5162a71f252e6122() {
@@ -1875,15 +2120,6 @@ function $cfcd56242923775d$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 $9ca08bcacbc598ce$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
  */
@@ -1924,12 +2160,6 @@ function $bdea39a75c454f4f$export$f50b88e2a00918b5(fn) {
     }
   };
 }
-function $f38f2e64ebe2da86$export$a71e92cfbb498adc(props) {
-  return $52FdA$solidjs.createMemo(() => {
-    const price_formatting = props.price_formatting_;
-    return $52FdA$depictaiutilishared.standard_price_format(props.price_, price_formatting.places_after_comma_, price_formatting.decimal_places_delimiter_, price_formatting.thousands_delimiter_);
-  });
-}
 function $b0f8d9f49e018db9$export$fb40a80c530e5f2b(selectedIndex, groupIndex, indexInGroup) {
   const isSelected = $52FdA$solidjs.createMemo(() => {
     const selectedValue = selectedIndex();
@@ -5264,120 +5494,6 @@ function $367b536a2a94d24e$var$history_state_change(signals, entries, state) {
     }
   });
 }
-function $73014ff36186a4dd$var$_classPrivateMethodInitSpec(obj, privateSet) {
-  $73014ff36186a4dd$var$_checkPrivateRedeclaration(obj, privateSet);
-  privateSet.add(obj);
-}
-function $73014ff36186a4dd$var$_checkPrivateRedeclaration(obj, privateCollection) {
-  if (privateCollection.has(obj)) throw new TypeError("Cannot initialize the same private elements twice on an object");
-}
-function $73014ff36186a4dd$var$_classPrivateMethodGet(receiver, privateSet, fn) {
-  if (!privateSet.has(receiver)) throw new TypeError("attempted to get private field on non-instance");
-  return fn;
-}
-var $73014ff36186a4dd$var$_throwing_on_navigation = /*#__PURE__*/new WeakSet();
-var $73014ff36186a4dd$var$_get_navigation_happened_promise = /*#__PURE__*/new WeakSet();
-class $73014ff36186a4dd$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) {
-    $73014ff36186a4dd$var$_classPrivateMethodInitSpec(this, $73014ff36186a4dd$var$_get_navigation_happened_promise);
-    $73014ff36186a4dd$var$_classPrivateMethodInitSpec(this, $73014ff36186a4dd$var$_throwing_on_navigation);
-    $parcel$interopDefault($52FdA$babelruntimehelpersdefineProperty)(this, "on_navigation_", void 0);
-    $parcel$interopDefault($52FdA$babelruntimehelpersdefineProperty)(this, "listing_query_state_key", void 0);
-    $parcel$interopDefault($52FdA$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_: $52FdA$depictaiutilishared.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 ($9ca08bcacbc598ce$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
-            $52FdA$depictaiutilishared.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 = $73014ff36186a4dd$var$_classPrivateMethodGet(this, $73014ff36186a4dd$var$_get_navigation_happened_promise, $73014ff36186a4dd$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) $52FdA$depictaiutilishared.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 $73014ff36186a4dd$var$_classPrivateMethodGet(this, $73014ff36186a4dd$var$_throwing_on_navigation, $73014ff36186a4dd$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 $73014ff36186a4dd$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 $73014ff36186a4dd$var$_get_navigation_happened_promise2(is_replace) {
-  return new Promise(resolve => {
-    const handler = what_happened => {
-      if (what_happened === (is_replace ? "replaceState" : "pushState")) {
-        resolve();
-        (0, $52FdA$depictaiutilishared.instant_exec_on_suspect_history_change).delete(handler);
-      }
-    };
-    (0, $52FdA$depictaiutilishared.instant_exec_on_suspect_history_change).add(handler);
-  });
-}
 var $c8e3c11062d8380b$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class=image-container>`);
 function $c8e3c11062d8380b$export$41e1a079d40a0d58(props) {
   const [display] = $52FdA$solidjs.createResource(() => ({