@depict-ai/ui 4.7.2 → 4.7.4

package/ES10/index.cjs

@@ -104,7 +104,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.7.2";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.7.4";
 function $d6d51b09cb2116a6$export$5bad61ecde080b1f() {
   const {
     collapse: collapse,
@@ -1381,7 +1381,8 @@ function $f3db423dc84bc35d$export$9d4a4b669b1929ab(props) {
         ...props.imgProps,
         customUrls: (url, width // Apparently don't have to encode url for CF's service
         ) => {
-          if (url.startsWith("https://cdn.shopify.com"))
+          var _url$startsWith;
+          if (url !== null && url !== void 0 && (_url$startsWith = url.startsWith) !== null && _url$startsWith !== void 0 && _url$startsWith.call(url, "https://cdn.shopify.com"))
             // The shopify image resizing CDN blocks Cloudflare's image resizer. It's possible that we can't detect shopify image URLs sometimes because they go to the merchant's domain,
             // but it seems like the URLs returned by the Depict API always goes to the cdn.shopify.com version of an image, so this simple workaround works.
             return $858fdcf73148519f$export$1d6267828870adda(url, width);
@@ -1720,7 +1721,7 @@ function $e0b3f1f332b6863b$export$ebf0b1d4f90c09ae(_ref) {
     get children() {
       return $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
         get when() {
-          return containerWidth_() || !displays_;
+          return containerWidth_() || !displays_();
         },
         get children() {
           var _el$ = $52FdA$solidjsweb.getNextElement($e0b3f1f332b6863b$var$_tmpl$),
@@ -1749,12 +1750,12 @@ function $e0b3f1f332b6863b$export$ebf0b1d4f90c09ae(_ref) {
             get onMouseLeave() {
               return $52FdA$depictaiutilishared.catchify(() => supportsHover_() && setUserWantsExpanded(false));
             }
-          }, () => displays_ && {
+          }, () => displays_() && {
             style: "--look-card-width:".concat(containerWidth_(), "px;--look-item-height:").concat(lookItemHeight() || 200, "px")
           }), false, true);
           $52FdA$solidjsweb.insert(_el$2, $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Index), {
             get each() {
-              return displays_ || Array.from({
+              return displays_() || Array.from({
                 length: 4
               });
             },
@@ -1814,7 +1815,6 @@ function $47e3c3102c78121b$export$44809a8a3e867e30(_ref) {
     priceFormatting_: priceFormatting_,
     pseudoRouter_: pseudoRouter_
   } = _ref;
-  const [coverImage] = (display_ === null || display_ === void 0 ? void 0 : display_.image_urls) || [];
   const useWantsExpandedSignal_ = $52FdA$solidjs.createSignal(false);
   const [userWantsExpanded, setUserWantsExpanded] = useWantsExpandedSignal_;
   const supportsHover_ = $3e17e871e9d0911d$export$d9f36cf74e24d595("(hover: hover) and (pointer: fine)");
@@ -1827,7 +1827,7 @@ function $47e3c3102c78121b$export$44809a8a3e867e30(_ref) {
       } = _ref2;
       return setUserWantsExpanded(prev => !prev);
     }), true);
-    _el$.classList.toggle("placeholder", !!!display_);
+    $52FdA$solidjsweb.effect(() => _el$.classList.toggle("placeholder", !display_()));
     $52FdA$solidjsweb.runHydrationEvents();
     return _el$;
   })();
@@ -1854,7 +1854,9 @@ function $47e3c3102c78121b$export$44809a8a3e867e30(_ref) {
   // Close us if another look expands
   $52FdA$solidjs.createEffect(() => !expandedLooks_().has(us) && setUserWantsExpanded(false));
   $52FdA$solidjsweb.insert(container, () => [$52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
-    when: display_,
+    get when() {
+      return display_();
+    },
     get fallback() {
       return $52FdA$solidjsweb.createComponent((0, $b8a8d61b3ec5f5ac$export$3f37af283f8fb843), {
         aspectRatio: "var(".concat((0, $c0cf6af094336798$export$8a2234b5b1a5ebd4), ", ").concat(placeholderImageAspectRatio_, ")")
@@ -1862,14 +1864,18 @@ function $47e3c3102c78121b$export$44809a8a3e867e30(_ref) {
     },
     get children() {
       return $52FdA$solidjsweb.createComponent((0, $f3db423dc84bc35d$export$9d4a4b669b1929ab), {
-        src: coverImage,
+        get src() {
+          var _display_, _display_$image_urls;
+          return (_display_ = display_()) === null || _display_ === void 0 ? void 0 : (_display_$image_urls = _display_.image_urls) === null || _display_$image_urls === void 0 ? void 0 : _display_$image_urls[0];
+        },
         aspectRatio: placeholderImageAspectRatio_,
         autoAdjustAspectRatio: true
       });
     }
   }), $52FdA$solidjsweb.createComponent((0, $e0b3f1f332b6863b$export$ebf0b1d4f90c09ae), {
-    get displays_() {
-      return display_ === null || display_ === void 0 ? void 0 : display_.displays;
+    displays_: () => {
+      var _display_2;
+      return (_display_2 = display_()) === null || _display_2 === void 0 ? void 0 : _display_2.displays;
     },
     userWantsExpandedSignal_: useWantsExpandedSignal_,
     containerWidth_: containerWidth_,
@@ -2157,7 +2163,7 @@ function $e57cd46536ad992e$export$2c9f9bf2092486aa(props) {
     });
     const sharedOptions = {
       product_card_template_: display => $47e3c3102c78121b$export$44809a8a3e867e30({
-        display_: display,
+        display_: () => display,
         FavoriteButton_: props.FavoriteButton_,
         placeholderImageAspectRatio_: props.imagePlaceholderAspectRatio_,
         animationDuration_: expandingAnimationDuration,
@@ -2505,7 +2511,7 @@ const $82d079b68975fbf7$export$b05c0ae390cf3e06 = _ref => {
     }), _el$27, _co$9);
     $52FdA$solidjsweb.insert(_el$11, $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
       get when() {
-        return !salePrice.loading && salePrice.latest;
+        return !salePrice.loading && salePrice.latest != undefined;
       },
       get fallback() {
         return [$52FdA$solidjsweb.createComponent((0, $a7f7d416e6f61504$export$89c6019e4baa40b1), {

package/ES10/index.d.ts

@@ -11,7 +11,7 @@ import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { FeaturedInDisplay } from "@depict-ai/types/api/FeaturedInResponseV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.7.2";
+export const version = "4.7.4";
 /**
  * Just like `useExpandingContainer` except that the children can be reactive solid-js signals, basically solid's JSX.Element instead of our JSX.Element
  */
@@ -893,7 +893,7 @@ export function LookCard({
   priceFormatting_,
   pseudoRouter_
 }: {
-  display_: FeaturedInDisplay | null;
+  display_: Accessor<FeaturedInDisplay | null>;
   FavoriteButton_?: (props: {
     display_: Accessor<ModernDisplay | null | undefined>;
   }) => JSX.Element;

package/ES10/index.js

@@ -10,7 +10,7 @@ import { createStore as $8tj43$createStore, reconcile as $8tj43$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "4.7.2";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.7.4";
 function $8e8b179489080711$export$5bad61ecde080b1f() {
   const {
     collapse: collapse,
@@ -1287,7 +1287,8 @@ function $98688279b9059f50$export$9d4a4b669b1929ab(props) {
         ...props.imgProps,
         customUrls: (url, width // Apparently don't have to encode url for CF's service
         ) => {
-          if (url.startsWith("https://cdn.shopify.com"))
+          var _url$startsWith;
+          if (url !== null && url !== void 0 && (_url$startsWith = url.startsWith) !== null && _url$startsWith !== void 0 && _url$startsWith.call(url, "https://cdn.shopify.com"))
             // The shopify image resizing CDN blocks Cloudflare's image resizer. It's possible that we can't detect shopify image URLs sometimes because they go to the merchant's domain,
             // but it seems like the URLs returned by the Depict API always goes to the cdn.shopify.com version of an image, so this simple workaround works.
             return $56047603f9d212b6$export$1d6267828870adda(url, width);
@@ -1626,7 +1627,7 @@ function $4089a7972a508539$export$ebf0b1d4f90c09ae(_ref) {
     get children() {
       return $8tj43$createComponent((0, $8tj43$Show), {
         get when() {
-          return containerWidth_() || !displays_;
+          return containerWidth_() || !displays_();
         },
         get children() {
           var _el$ = $8tj43$getNextElement($4089a7972a508539$var$_tmpl$),
@@ -1655,12 +1656,12 @@ function $4089a7972a508539$export$ebf0b1d4f90c09ae(_ref) {
             get onMouseLeave() {
               return $8tj43$catchify(() => supportsHover_() && setUserWantsExpanded(false));
             }
-          }, () => displays_ && {
+          }, () => displays_() && {
             style: "--look-card-width:".concat(containerWidth_(), "px;--look-item-height:").concat(lookItemHeight() || 200, "px")
           }), false, true);
           $8tj43$insert(_el$2, $8tj43$createComponent((0, $8tj43$Index), {
             get each() {
-              return displays_ || Array.from({
+              return displays_() || Array.from({
                 length: 4
               });
             },
@@ -1720,7 +1721,6 @@ function $697d8713dc82b9ab$export$44809a8a3e867e30(_ref) {
     priceFormatting_: priceFormatting_,
     pseudoRouter_: pseudoRouter_
   } = _ref;
-  const [coverImage] = (display_ === null || display_ === void 0 ? void 0 : display_.image_urls) || [];
   const useWantsExpandedSignal_ = $8tj43$createSignal(false);
   const [userWantsExpanded, setUserWantsExpanded] = useWantsExpandedSignal_;
   const supportsHover_ = $00a5b94f0c11efbb$export$d9f36cf74e24d595("(hover: hover) and (pointer: fine)");
@@ -1733,7 +1733,7 @@ function $697d8713dc82b9ab$export$44809a8a3e867e30(_ref) {
       } = _ref2;
       return setUserWantsExpanded(prev => !prev);
     }), true);
-    _el$.classList.toggle("placeholder", !!!display_);
+    $8tj43$effect(() => _el$.classList.toggle("placeholder", !display_()));
     $8tj43$runHydrationEvents();
     return _el$;
   })();
@@ -1760,7 +1760,9 @@ function $697d8713dc82b9ab$export$44809a8a3e867e30(_ref) {
   // Close us if another look expands
   $8tj43$createEffect(() => !expandedLooks_().has(us) && setUserWantsExpanded(false));
   $8tj43$insert(container, () => [$8tj43$createComponent((0, $8tj43$Show), {
-    when: display_,
+    get when() {
+      return display_();
+    },
     get fallback() {
       return $8tj43$createComponent((0, $3ab4aa97880fb88d$export$3f37af283f8fb843), {
         aspectRatio: "var(".concat((0, $5eaa00b951637e96$export$8a2234b5b1a5ebd4), ", ").concat(placeholderImageAspectRatio_, ")")
@@ -1768,14 +1770,18 @@ function $697d8713dc82b9ab$export$44809a8a3e867e30(_ref) {
     },
     get children() {
       return $8tj43$createComponent((0, $98688279b9059f50$export$9d4a4b669b1929ab), {
-        src: coverImage,
+        get src() {
+          var _display_, _display_$image_urls;
+          return (_display_ = display_()) === null || _display_ === void 0 ? void 0 : (_display_$image_urls = _display_.image_urls) === null || _display_$image_urls === void 0 ? void 0 : _display_$image_urls[0];
+        },
         aspectRatio: placeholderImageAspectRatio_,
         autoAdjustAspectRatio: true
       });
     }
   }), $8tj43$createComponent((0, $4089a7972a508539$export$ebf0b1d4f90c09ae), {
-    get displays_() {
-      return display_ === null || display_ === void 0 ? void 0 : display_.displays;
+    displays_: () => {
+      var _display_2;
+      return (_display_2 = display_()) === null || _display_2 === void 0 ? void 0 : _display_2.displays;
     },
     userWantsExpandedSignal_: useWantsExpandedSignal_,
     containerWidth_: containerWidth_,
@@ -2063,7 +2069,7 @@ function $bb34cd283e904784$export$2c9f9bf2092486aa(props) {
     });
     const sharedOptions = {
       product_card_template_: display => $697d8713dc82b9ab$export$44809a8a3e867e30({
-        display_: display,
+        display_: () => display,
         FavoriteButton_: props.FavoriteButton_,
         placeholderImageAspectRatio_: props.imagePlaceholderAspectRatio_,
         animationDuration_: expandingAnimationDuration,
@@ -2411,7 +2417,7 @@ const $9a693c7e832d3f18$export$b05c0ae390cf3e06 = _ref => {
     }), _el$27, _co$9);
     $8tj43$insert(_el$11, $8tj43$createComponent((0, $8tj43$Show), {
       get when() {
-        return !salePrice.loading && salePrice.latest;
+        return !salePrice.loading && salePrice.latest != undefined;
       },
       get fallback() {
         return [$8tj43$createComponent((0, $ceafb6fb91c6f394$export$89c6019e4baa40b1), {

package/latest/index.cjs

@@ -98,7 +98,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $1f4925833f07df29$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $1f4925833f07df29$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $14f289047713d67a$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.7.2";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.7.4";
 function $4b455f60dadde8b8$export$5bad61ecde080b1f(...params) {
   const {
     collapse: collapse,
@@ -1314,7 +1314,7 @@ function $d212a67662c5cf38$export$9d4a4b669b1929ab(props) {
         ...props.imgProps,
         customUrls: (url, width // Apparently don't have to encode url for CF's service
         ) => {
-          if (url.startsWith("https://cdn.shopify.com"))
+          if (url?.startsWith?.("https://cdn.shopify.com"))
             // The shopify image resizing CDN blocks Cloudflare's image resizer. It's possible that we can't detect shopify image URLs sometimes because they go to the merchant's domain,
             // but it seems like the URLs returned by the Depict API always goes to the cdn.shopify.com version of an image, so this simple workaround works.
             return $19950faaac026e09$export$1d6267828870adda(url, width);
@@ -1632,7 +1632,7 @@ function $905010a06f9aeae5$export$ebf0b1d4f90c09ae({
     get children() {
       return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
         get when() {
-          return containerWidth_() || !displays_;
+          return containerWidth_() || !displays_();
         },
         get children() {
           var _el$ = $gVhhF$solidjsweb.getNextElement($905010a06f9aeae5$var$_tmpl$),
@@ -1661,12 +1661,12 @@ function $905010a06f9aeae5$export$ebf0b1d4f90c09ae({
             get onMouseLeave() {
               return $gVhhF$depictaiutilishared.catchify(() => supportsHover_() && setUserWantsExpanded(false));
             }
-          }, () => displays_ && {
+          }, () => displays_() && {
             style: `--look-card-width:${containerWidth_()}px;--look-item-height:${lookItemHeight() || 200}px`
           }), false, true);
           $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Index), {
             get each() {
-              return displays_ || Array.from({
+              return displays_() || Array.from({
                 length: 4
               });
             },
@@ -1725,7 +1725,6 @@ function $ad882bbe664dbd53$export$44809a8a3e867e30({
   priceFormatting_: priceFormatting_,
   pseudoRouter_: pseudoRouter_
 }) {
-  const [coverImage] = display_?.image_urls || [];
   const useWantsExpandedSignal_ = $gVhhF$solidjs.createSignal(false);
   const [userWantsExpanded, setUserWantsExpanded] = useWantsExpandedSignal_;
   const supportsHover_ = $b54e6192d0caa293$export$d9f36cf74e24d595("(hover: hover) and (pointer: fine)");
@@ -1735,7 +1734,7 @@ function $ad882bbe664dbd53$export$44809a8a3e867e30({
     $gVhhF$solidjsweb.addEventListener(_el$, "click", $gVhhF$depictaiutilishared.catchify(({
       target: target
     }) => setUserWantsExpanded(prev => !prev)), true);
-    _el$.classList.toggle("placeholder", !!!display_);
+    $gVhhF$solidjsweb.effect(() => _el$.classList.toggle("placeholder", !display_()));
     $gVhhF$solidjsweb.runHydrationEvents();
     return _el$;
   })();
@@ -1761,7 +1760,9 @@ function $ad882bbe664dbd53$export$44809a8a3e867e30({
   // Close us if another look expands
   $gVhhF$solidjs.createEffect(() => !expandedLooks_().has(us) && setUserWantsExpanded(false));
   $gVhhF$solidjsweb.insert(container, () => [$gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
-    when: display_,
+    get when() {
+      return display_();
+    },
     get fallback() {
       return $gVhhF$solidjsweb.createComponent((0, $3bc4a89b971a3af5$export$3f37af283f8fb843), {
         aspectRatio: `var(${(0, $6f604560873e4f69$export$8a2234b5b1a5ebd4)}, ${placeholderImageAspectRatio_})`
@@ -1769,15 +1770,15 @@ function $ad882bbe664dbd53$export$44809a8a3e867e30({
     },
     get children() {
       return $gVhhF$solidjsweb.createComponent((0, $d212a67662c5cf38$export$9d4a4b669b1929ab), {
-        src: coverImage,
+        get src() {
+          return display_()?.image_urls?.[0];
+        },
         aspectRatio: placeholderImageAspectRatio_,
         autoAdjustAspectRatio: true
       });
     }
   }), $gVhhF$solidjsweb.createComponent((0, $905010a06f9aeae5$export$ebf0b1d4f90c09ae), {
-    get displays_() {
-      return display_?.displays;
-    },
+    displays_: () => display_()?.displays,
     userWantsExpandedSignal_: useWantsExpandedSignal_,
     containerWidth_: containerWidth_,
     animationDuration_: animationDuration_,
@@ -2045,7 +2046,7 @@ function $a3bbfa5fdaa39f3a$export$2c9f9bf2092486aa(props) {
     });
     const sharedOptions = {
       product_card_template_: display => $ad882bbe664dbd53$export$44809a8a3e867e30({
-        display_: display,
+        display_: () => display,
         FavoriteButton_: props.FavoriteButton_,
         placeholderImageAspectRatio_: props.imagePlaceholderAspectRatio_,
         animationDuration_: expandingAnimationDuration,
@@ -2368,7 +2369,7 @@ const $6ae613870d3380fc$export$b05c0ae390cf3e06 = ({
     }), _el$27, _co$9);
     $gVhhF$solidjsweb.insert(_el$11, $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
       get when() {
-        return !salePrice.loading && salePrice.latest;
+        return !salePrice.loading && salePrice.latest != undefined;
       },
       get fallback() {
         return [$gVhhF$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {

package/latest/index.d.ts

@@ -11,7 +11,7 @@ import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { FeaturedInDisplay } from "@depict-ai/types/api/FeaturedInResponseV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.7.2";
+export const version = "4.7.4";
 /**
  * Just like `useExpandingContainer` except that the children can be reactive solid-js signals, basically solid's JSX.Element instead of our JSX.Element
  */
@@ -893,7 +893,7 @@ export function LookCard({
   priceFormatting_,
   pseudoRouter_
 }: {
-  display_: FeaturedInDisplay | null;
+  display_: Accessor<FeaturedInDisplay | null>;
   FavoriteButton_?: (props: {
     display_: Accessor<ModernDisplay | null | undefined>;
   }) => JSX.Element;

package/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from
 /*! 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.7.2";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.7.4";
 function $24e27fab9c821b86$export$5bad61ecde080b1f(...params) {
   const {
     collapse: collapse,
@@ -1223,7 +1223,7 @@ function $70bb27cc6be01fc7$export$9d4a4b669b1929ab(props) {
         ...props.imgProps,
         customUrls: (url, width // Apparently don't have to encode url for CF's service
         ) => {
-          if (url.startsWith("https://cdn.shopify.com"))
+          if (url?.startsWith?.("https://cdn.shopify.com"))
             // The shopify image resizing CDN blocks Cloudflare's image resizer. It's possible that we can't detect shopify image URLs sometimes because they go to the merchant's domain,
             // but it seems like the URLs returned by the Depict API always goes to the cdn.shopify.com version of an image, so this simple workaround works.
             return $e8ffe11ed01df0fe$export$1d6267828870adda(url, width);
@@ -1541,7 +1541,7 @@ function $7555dcad3b8a4632$export$ebf0b1d4f90c09ae({
     get children() {
       return $9HbP8$createComponent((0, $9HbP8$Show), {
         get when() {
-          return containerWidth_() || !displays_;
+          return containerWidth_() || !displays_();
         },
         get children() {
           var _el$ = $9HbP8$getNextElement($7555dcad3b8a4632$var$_tmpl$),
@@ -1570,12 +1570,12 @@ function $7555dcad3b8a4632$export$ebf0b1d4f90c09ae({
             get onMouseLeave() {
               return $9HbP8$catchify(() => supportsHover_() && setUserWantsExpanded(false));
             }
-          }, () => displays_ && {
+          }, () => displays_() && {
             style: `--look-card-width:${containerWidth_()}px;--look-item-height:${lookItemHeight() || 200}px`
           }), false, true);
           $9HbP8$insert(_el$2, $9HbP8$createComponent((0, $9HbP8$Index), {
             get each() {
-              return displays_ || Array.from({
+              return displays_() || Array.from({
                 length: 4
               });
             },
@@ -1634,7 +1634,6 @@ function $28ee4f7db3cc44b8$export$44809a8a3e867e30({
   priceFormatting_: priceFormatting_,
   pseudoRouter_: pseudoRouter_
 }) {
-  const [coverImage] = display_?.image_urls || [];
   const useWantsExpandedSignal_ = $9HbP8$createSignal(false);
   const [userWantsExpanded, setUserWantsExpanded] = useWantsExpandedSignal_;
   const supportsHover_ = $dc9262ef6f786812$export$d9f36cf74e24d595("(hover: hover) and (pointer: fine)");
@@ -1644,7 +1643,7 @@ function $28ee4f7db3cc44b8$export$44809a8a3e867e30({
     $9HbP8$addEventListener(_el$, "click", $9HbP8$catchify(({
       target: target
     }) => setUserWantsExpanded(prev => !prev)), true);
-    _el$.classList.toggle("placeholder", !!!display_);
+    $9HbP8$effect(() => _el$.classList.toggle("placeholder", !display_()));
     $9HbP8$runHydrationEvents();
     return _el$;
   })();
@@ -1670,7 +1669,9 @@ function $28ee4f7db3cc44b8$export$44809a8a3e867e30({
   // Close us if another look expands
   $9HbP8$createEffect(() => !expandedLooks_().has(us) && setUserWantsExpanded(false));
   $9HbP8$insert(container, () => [$9HbP8$createComponent((0, $9HbP8$Show), {
-    when: display_,
+    get when() {
+      return display_();
+    },
     get fallback() {
       return $9HbP8$createComponent((0, $7f60f09116a3fe61$export$3f37af283f8fb843), {
         aspectRatio: `var(${(0, $bb15dfb548a7666e$export$8a2234b5b1a5ebd4)}, ${placeholderImageAspectRatio_})`
@@ -1678,15 +1679,15 @@ function $28ee4f7db3cc44b8$export$44809a8a3e867e30({
     },
     get children() {
       return $9HbP8$createComponent((0, $70bb27cc6be01fc7$export$9d4a4b669b1929ab), {
-        src: coverImage,
+        get src() {
+          return display_()?.image_urls?.[0];
+        },
         aspectRatio: placeholderImageAspectRatio_,
         autoAdjustAspectRatio: true
       });
     }
   }), $9HbP8$createComponent((0, $7555dcad3b8a4632$export$ebf0b1d4f90c09ae), {
-    get displays_() {
-      return display_?.displays;
-    },
+    displays_: () => display_()?.displays,
     userWantsExpandedSignal_: useWantsExpandedSignal_,
     containerWidth_: containerWidth_,
     animationDuration_: animationDuration_,
@@ -1954,7 +1955,7 @@ function $07ef910e8ef6b783$export$2c9f9bf2092486aa(props) {
     });
     const sharedOptions = {
       product_card_template_: display => $28ee4f7db3cc44b8$export$44809a8a3e867e30({
-        display_: display,
+        display_: () => display,
         FavoriteButton_: props.FavoriteButton_,
         placeholderImageAspectRatio_: props.imagePlaceholderAspectRatio_,
         animationDuration_: expandingAnimationDuration,
@@ -2277,7 +2278,7 @@ const $e003be2a50d9e5bc$export$b05c0ae390cf3e06 = ({
     }), _el$27, _co$9);
     $9HbP8$insert(_el$11, $9HbP8$createComponent((0, $9HbP8$Show), {
       get when() {
-        return !salePrice.loading && salePrice.latest;
+        return !salePrice.loading && salePrice.latest != undefined;
       },
       get fallback() {
         return [$9HbP8$createComponent((0, $d134eae24341b4a1$export$89c6019e4baa40b1), {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "4.7.2",
+  "version": "4.7.4",
   "description": "Base package containing the actual UI of Depict UI along with translations, with a not-simplified API. We recommend using @depict-ai/js-ui or @depict-ai/react-ui instead.",
   "packageManager": "yarn@3.2.2",
   "sass": "styles.scss",
@@ -236,7 +236,7 @@
     "@babel/plugin-transform-typescript": "^7.22.9",
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "^7.22.6",
-    "@depict-ai/plp-styling": "^4.4.0",
+    "@depict-ai/plp-styling": "^4.4.1",
     "@depict-ai/types": "^5.4.0",
     "@depict-ai/utilishared": "^2.4.0",
     "solid-js": "^1.8.12"

package/server/ES10/index.cjs

@@ -104,7 +104,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.7.2";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "4.7.4";
 function $d6d51b09cb2116a6$export$5bad61ecde080b1f() {
   const {
     collapse: collapse,
@@ -1269,7 +1269,8 @@ function $f3db423dc84bc35d$export$9d4a4b669b1929ab(props) {
         ...props.imgProps,
         customUrls: (url, width // Apparently don't have to encode url for CF's service
         ) => {
-          if (url.startsWith("https://cdn.shopify.com"))
+          var _url$startsWith;
+          if (url !== null && url !== void 0 && (_url$startsWith = url.startsWith) !== null && _url$startsWith !== void 0 && _url$startsWith.call(url, "https://cdn.shopify.com"))
             // The shopify image resizing CDN blocks Cloudflare's image resizer. It's possible that we can't detect shopify image URLs sometimes because they go to the merchant's domain,
             // but it seems like the URLs returned by the Depict API always goes to the cdn.shopify.com version of an image, so this simple workaround works.
             return $858fdcf73148519f$export$1d6267828870adda(url, width);
@@ -1531,18 +1532,18 @@ function $e0b3f1f332b6863b$export$ebf0b1d4f90c09ae(_ref) {
     get children() {
       return $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
         get when() {
-          return containerWidth_() || !displays_;
+          return containerWidth_() || !displays_();
         },
         get children() {
           return $3hooq$solidjsweb.ssr($e0b3f1f332b6863b$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrElement("div", $3hooq$solidjsweb.mergeProps({
             get ["class"]() {
               return "look-overlay ".concat(userWantsExpanded() ? "expanded" : "", " ").concat(!getSecondPartAnimationRunning() && userWantsExpanded() ? "resting-fully-expanded" : "");
             }
-          }, () => displays_ && {
+          }, () => displays_() && {
             style: "--look-card-width:".concat(containerWidth_(), "px;--look-item-height:").concat(lookItemHeight() || 200, "px")
           }), () => $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Index), {
             get each() {
-              return displays_ || Array.from({
+              return displays_() || Array.from({
                 length: 4
               });
             },
@@ -1600,12 +1601,11 @@ function $47e3c3102c78121b$export$44809a8a3e867e30(_ref) {
     priceFormatting_: priceFormatting_,
     pseudoRouter_: pseudoRouter_
   } = _ref;
-  const [coverImage] = (display_ === null || display_ === void 0 ? void 0 : display_.image_urls) || [];
   const useWantsExpandedSignal_ = $3hooq$solidjs.createSignal(false);
   const [userWantsExpanded, setUserWantsExpanded] = useWantsExpandedSignal_;
   const supportsHover_ = $3e17e871e9d0911d$export$d9f36cf74e24d595("(hover: hover) and (pointer: fine)");
   const us = Symbol("look");
-  const container = $3hooq$solidjsweb.ssr($47e3c3102c78121b$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), "look-card ".concat(!display_ ? "placeholder" : ""));
+  const container = $3hooq$solidjsweb.ssr($47e3c3102c78121b$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), "look-card ".concat(!display_() ? "placeholder" : ""));
   const containerWidth_ = $c387d7f1d9fb66c0$export$ebdc3711f7e02ccd(container);
   const clickHandler = $3hooq$depictaiutilishared.catchify(_ref2 => {
     let {
@@ -1629,7 +1629,9 @@ function $47e3c3102c78121b$export$44809a8a3e867e30(_ref) {
   // Close us if another look expands
   $3hooq$solidjs.createEffect(() => !expandedLooks_().has(us) && setUserWantsExpanded(false));
   $3hooq$solidjsweb.insert(container, () => [$3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
-    when: display_,
+    get when() {
+      return display_();
+    },
     get fallback() {
       return $3hooq$solidjsweb.createComponent((0, $b8a8d61b3ec5f5ac$export$3f37af283f8fb843), {
         aspectRatio: "var(".concat((0, $c0cf6af094336798$export$8a2234b5b1a5ebd4), ", ").concat(placeholderImageAspectRatio_, ")")
@@ -1637,14 +1639,18 @@ function $47e3c3102c78121b$export$44809a8a3e867e30(_ref) {
     },
     get children() {
       return $3hooq$solidjsweb.createComponent((0, $f3db423dc84bc35d$export$9d4a4b669b1929ab), {
-        src: coverImage,
+        get src() {
+          var _display_, _display_$image_urls;
+          return (_display_ = display_()) === null || _display_ === void 0 ? void 0 : (_display_$image_urls = _display_.image_urls) === null || _display_$image_urls === void 0 ? void 0 : _display_$image_urls[0];
+        },
         aspectRatio: placeholderImageAspectRatio_,
         autoAdjustAspectRatio: true
       });
     }
   }), $3hooq$solidjsweb.createComponent((0, $e0b3f1f332b6863b$export$ebf0b1d4f90c09ae), {
-    get displays_() {
-      return display_ === null || display_ === void 0 ? void 0 : display_.displays;
+    displays_: () => {
+      var _display_2;
+      return (_display_2 = display_()) === null || _display_2 === void 0 ? void 0 : _display_2.displays;
     },
     userWantsExpandedSignal_: useWantsExpandedSignal_,
     containerWidth_: containerWidth_,
@@ -1916,7 +1922,7 @@ function $e57cd46536ad992e$export$2c9f9bf2092486aa(props) {
     });
     const sharedOptions = {
       product_card_template_: display => $47e3c3102c78121b$export$44809a8a3e867e30({
-        display_: display,
+        display_: () => display,
         FavoriteButton_: props.FavoriteButton_,
         placeholderImageAspectRatio_: props.imagePlaceholderAspectRatio_,
         animationDuration_: expandingAnimationDuration,
@@ -2199,7 +2205,7 @@ const $82d079b68975fbf7$export$b05c0ae390cf3e06 = _ref => {
     }
   })), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
     get when() {
-      return !salePrice.loading && salePrice.latest;
+      return !salePrice.loading && salePrice.latest != undefined;
     },
     get fallback() {
       return [$3hooq$solidjsweb.createComponent((0, $a7f7d416e6f61504$export$89c6019e4baa40b1), {

package/server/ES10/index.d.ts

@@ -11,7 +11,7 @@ import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { FeaturedInDisplay } from "@depict-ai/types/api/FeaturedInResponseV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.7.2";
+export const version = "4.7.4";
 /**
  * Just like `useExpandingContainer` except that the children can be reactive solid-js signals, basically solid's JSX.Element instead of our JSX.Element
  */
@@ -893,7 +893,7 @@ export function LookCard({
   priceFormatting_,
   pseudoRouter_
 }: {
-  display_: FeaturedInDisplay | null;
+  display_: Accessor<FeaturedInDisplay | null>;
   FavoriteButton_?: (props: {
     display_: Accessor<ModernDisplay | null | undefined>;
   }) => JSX.Element;

package/server/ES10/index.js

@@ -10,7 +10,7 @@ import { createStore as $b8hua$createStore, reconcile as $b8hua$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "4.7.2";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "4.7.4";
 function $8e8b179489080711$export$5bad61ecde080b1f() {
   const {
     collapse: collapse,
@@ -1175,7 +1175,8 @@ function $98688279b9059f50$export$9d4a4b669b1929ab(props) {
         ...props.imgProps,
         customUrls: (url, width // Apparently don't have to encode url for CF's service
         ) => {
-          if (url.startsWith("https://cdn.shopify.com"))
+          var _url$startsWith;
+          if (url !== null && url !== void 0 && (_url$startsWith = url.startsWith) !== null && _url$startsWith !== void 0 && _url$startsWith.call(url, "https://cdn.shopify.com"))
             // The shopify image resizing CDN blocks Cloudflare's image resizer. It's possible that we can't detect shopify image URLs sometimes because they go to the merchant's domain,
             // but it seems like the URLs returned by the Depict API always goes to the cdn.shopify.com version of an image, so this simple workaround works.
             return $56047603f9d212b6$export$1d6267828870adda(url, width);
@@ -1437,18 +1438,18 @@ function $4089a7972a508539$export$ebf0b1d4f90c09ae(_ref) {
     get children() {
       return $b8hua$createComponent((0, $b8hua$Show), {
         get when() {
-          return containerWidth_() || !displays_;
+          return containerWidth_() || !displays_();
         },
         get children() {
           return $b8hua$ssr($4089a7972a508539$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$ssrElement("div", $b8hua$mergeProps({
             get ["class"]() {
               return "look-overlay ".concat(userWantsExpanded() ? "expanded" : "", " ").concat(!getSecondPartAnimationRunning() && userWantsExpanded() ? "resting-fully-expanded" : "");
             }
-          }, () => displays_ && {
+          }, () => displays_() && {
             style: "--look-card-width:".concat(containerWidth_(), "px;--look-item-height:").concat(lookItemHeight() || 200, "px")
           }), () => $b8hua$escape($b8hua$createComponent((0, $b8hua$Index), {
             get each() {
-              return displays_ || Array.from({
+              return displays_() || Array.from({
                 length: 4
               });
             },
@@ -1506,12 +1507,11 @@ function $697d8713dc82b9ab$export$44809a8a3e867e30(_ref) {
     priceFormatting_: priceFormatting_,
     pseudoRouter_: pseudoRouter_
   } = _ref;
-  const [coverImage] = (display_ === null || display_ === void 0 ? void 0 : display_.image_urls) || [];
   const useWantsExpandedSignal_ = $b8hua$createSignal(false);
   const [userWantsExpanded, setUserWantsExpanded] = useWantsExpandedSignal_;
   const supportsHover_ = $00a5b94f0c11efbb$export$d9f36cf74e24d595("(hover: hover) and (pointer: fine)");
   const us = Symbol("look");
-  const container = $b8hua$ssr($697d8713dc82b9ab$var$_tmpl$, $b8hua$ssrHydrationKey(), "look-card ".concat(!display_ ? "placeholder" : ""));
+  const container = $b8hua$ssr($697d8713dc82b9ab$var$_tmpl$, $b8hua$ssrHydrationKey(), "look-card ".concat(!display_() ? "placeholder" : ""));
   const containerWidth_ = $fc830a7ee59416ef$export$ebdc3711f7e02ccd(container);
   const clickHandler = $b8hua$catchify(_ref2 => {
     let {
@@ -1535,7 +1535,9 @@ function $697d8713dc82b9ab$export$44809a8a3e867e30(_ref) {
   // Close us if another look expands
   $b8hua$createEffect(() => !expandedLooks_().has(us) && setUserWantsExpanded(false));
   $b8hua$insert(container, () => [$b8hua$createComponent((0, $b8hua$Show), {
-    when: display_,
+    get when() {
+      return display_();
+    },
     get fallback() {
       return $b8hua$createComponent((0, $3ab4aa97880fb88d$export$3f37af283f8fb843), {
         aspectRatio: "var(".concat((0, $5eaa00b951637e96$export$8a2234b5b1a5ebd4), ", ").concat(placeholderImageAspectRatio_, ")")
@@ -1543,14 +1545,18 @@ function $697d8713dc82b9ab$export$44809a8a3e867e30(_ref) {
     },
     get children() {
       return $b8hua$createComponent((0, $98688279b9059f50$export$9d4a4b669b1929ab), {
-        src: coverImage,
+        get src() {
+          var _display_, _display_$image_urls;
+          return (_display_ = display_()) === null || _display_ === void 0 ? void 0 : (_display_$image_urls = _display_.image_urls) === null || _display_$image_urls === void 0 ? void 0 : _display_$image_urls[0];
+        },
         aspectRatio: placeholderImageAspectRatio_,
         autoAdjustAspectRatio: true
       });
     }
   }), $b8hua$createComponent((0, $4089a7972a508539$export$ebf0b1d4f90c09ae), {
-    get displays_() {
-      return display_ === null || display_ === void 0 ? void 0 : display_.displays;
+    displays_: () => {
+      var _display_2;
+      return (_display_2 = display_()) === null || _display_2 === void 0 ? void 0 : _display_2.displays;
     },
     userWantsExpandedSignal_: useWantsExpandedSignal_,
     containerWidth_: containerWidth_,
@@ -1822,7 +1828,7 @@ function $bb34cd283e904784$export$2c9f9bf2092486aa(props) {
     });
     const sharedOptions = {
       product_card_template_: display => $697d8713dc82b9ab$export$44809a8a3e867e30({
-        display_: display,
+        display_: () => display,
         FavoriteButton_: props.FavoriteButton_,
         placeholderImageAspectRatio_: props.imagePlaceholderAspectRatio_,
         animationDuration_: expandingAnimationDuration,
@@ -2105,7 +2111,7 @@ const $9a693c7e832d3f18$export$b05c0ae390cf3e06 = _ref => {
     }
   })), $b8hua$escape($b8hua$createComponent((0, $b8hua$Show), {
     get when() {
-      return !salePrice.loading && salePrice.latest;
+      return !salePrice.loading && salePrice.latest != undefined;
     },
     get fallback() {
       return [$b8hua$createComponent((0, $ceafb6fb91c6f394$export$89c6019e4baa40b1), {

package/server/latest/index.cjs

@@ -98,7 +98,7 @@ $parcel$export(module.exports, "BreadCrumbs", () => $1f4925833f07df29$export$5b7
 $parcel$export(module.exports, "QuickLinks", () => $1f4925833f07df29$export$de035477d6fef996);
 $parcel$export(module.exports, "CategoryPage", () => $14f289047713d67a$export$e2bf8ce7779e827e);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "4.7.2";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "4.7.4";
 function $4b455f60dadde8b8$export$5bad61ecde080b1f(...params) {
   const {
     collapse: collapse,
@@ -1213,7 +1213,7 @@ function $d212a67662c5cf38$export$9d4a4b669b1929ab(props) {
         ...props.imgProps,
         customUrls: (url, width // Apparently don't have to encode url for CF's service
         ) => {
-          if (url.startsWith("https://cdn.shopify.com"))
+          if (url?.startsWith?.("https://cdn.shopify.com"))
             // The shopify image resizing CDN blocks Cloudflare's image resizer. It's possible that we can't detect shopify image URLs sometimes because they go to the merchant's domain,
             // but it seems like the URLs returned by the Depict API always goes to the cdn.shopify.com version of an image, so this simple workaround works.
             return $19950faaac026e09$export$1d6267828870adda(url, width);
@@ -1455,18 +1455,18 @@ function $905010a06f9aeae5$export$ebf0b1d4f90c09ae({
     get children() {
       return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
         get when() {
-          return containerWidth_() || !displays_;
+          return containerWidth_() || !displays_();
         },
         get children() {
           return $5vyXB$solidjsweb.ssr($905010a06f9aeae5$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrElement("div", $5vyXB$solidjsweb.mergeProps({
             get ["class"]() {
               return `look-overlay ${userWantsExpanded() ? "expanded" : ""} ${!getSecondPartAnimationRunning() && userWantsExpanded() ? "resting-fully-expanded" : ""}`;
             }
-          }, () => displays_ && {
+          }, () => displays_() && {
             style: `--look-card-width:${containerWidth_()}px;--look-item-height:${lookItemHeight() || 200}px`
           }), () => $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Index), {
             get each() {
-              return displays_ || Array.from({
+              return displays_() || Array.from({
                 length: 4
               });
             },
@@ -1523,12 +1523,11 @@ function $ad882bbe664dbd53$export$44809a8a3e867e30({
   priceFormatting_: priceFormatting_,
   pseudoRouter_: pseudoRouter_
 }) {
-  const [coverImage] = display_?.image_urls || [];
   const useWantsExpandedSignal_ = $5vyXB$solidjs.createSignal(false);
   const [userWantsExpanded, setUserWantsExpanded] = useWantsExpandedSignal_;
   const supportsHover_ = $b54e6192d0caa293$export$d9f36cf74e24d595("(hover: hover) and (pointer: fine)");
   const us = Symbol("look");
-  const container = $5vyXB$solidjsweb.ssr($ad882bbe664dbd53$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), `look-card ${!display_ ? "placeholder" : ""}`);
+  const container = $5vyXB$solidjsweb.ssr($ad882bbe664dbd53$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), `look-card ${!display_() ? "placeholder" : ""}`);
   const containerWidth_ = $f13855d1b951b24a$export$ebdc3711f7e02ccd(container);
   const clickHandler = $5vyXB$depictaiutilishared.catchify(({
     target: target
@@ -1551,7 +1550,9 @@ function $ad882bbe664dbd53$export$44809a8a3e867e30({
   // Close us if another look expands
   $5vyXB$solidjs.createEffect(() => !expandedLooks_().has(us) && setUserWantsExpanded(false));
   $5vyXB$solidjsweb.insert(container, () => [$5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
-    when: display_,
+    get when() {
+      return display_();
+    },
     get fallback() {
       return $5vyXB$solidjsweb.createComponent((0, $3bc4a89b971a3af5$export$3f37af283f8fb843), {
         aspectRatio: `var(${(0, $6f604560873e4f69$export$8a2234b5b1a5ebd4)}, ${placeholderImageAspectRatio_})`
@@ -1559,15 +1560,15 @@ function $ad882bbe664dbd53$export$44809a8a3e867e30({
     },
     get children() {
       return $5vyXB$solidjsweb.createComponent((0, $d212a67662c5cf38$export$9d4a4b669b1929ab), {
-        src: coverImage,
+        get src() {
+          return display_()?.image_urls?.[0];
+        },
         aspectRatio: placeholderImageAspectRatio_,
         autoAdjustAspectRatio: true
       });
     }
   }), $5vyXB$solidjsweb.createComponent((0, $905010a06f9aeae5$export$ebf0b1d4f90c09ae), {
-    get displays_() {
-      return display_?.displays;
-    },
+    displays_: () => display_()?.displays,
     userWantsExpandedSignal_: useWantsExpandedSignal_,
     containerWidth_: containerWidth_,
     animationDuration_: animationDuration_,
@@ -1819,7 +1820,7 @@ function $a3bbfa5fdaa39f3a$export$2c9f9bf2092486aa(props) {
     });
     const sharedOptions = {
       product_card_template_: display => $ad882bbe664dbd53$export$44809a8a3e867e30({
-        display_: display,
+        display_: () => display,
         FavoriteButton_: props.FavoriteButton_,
         placeholderImageAspectRatio_: props.imagePlaceholderAspectRatio_,
         animationDuration_: expandingAnimationDuration,
@@ -2080,7 +2081,7 @@ const $6ae613870d3380fc$export$b05c0ae390cf3e06 = ({
     }
   })), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
     get when() {
-      return !salePrice.loading && salePrice.latest;
+      return !salePrice.loading && salePrice.latest != undefined;
     },
     get fallback() {
       return [$5vyXB$solidjsweb.createComponent((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {

package/server/latest/index.d.ts

@@ -11,7 +11,7 @@ import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { FeaturedInDisplay } from "@depict-ai/types/api/FeaturedInResponseV3";
 import { SearchFilter as _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.7.2";
+export const version = "4.7.4";
 /**
  * Just like `useExpandingContainer` except that the children can be reactive solid-js signals, basically solid's JSX.Element instead of our JSX.Element
  */
@@ -893,7 +893,7 @@ export function LookCard({
   priceFormatting_,
   pseudoRouter_
 }: {
-  display_: FeaturedInDisplay | null;
+  display_: Accessor<FeaturedInDisplay | null>;
   FavoriteButton_?: (props: {
     display_: Accessor<ModernDisplay | null | undefined>;
   }) => JSX.Element;

package/server/latest/index.js

@@ -7,7 +7,7 @@ import { createStore as $i7OB2$createStore, reconcile as $i7OB2$reconcile } from
 /*! 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.7.2";
+const $ec291e0010116877$export$83d89fbfd8236492 = "4.7.4";
 function $24e27fab9c821b86$export$5bad61ecde080b1f(...params) {
   const {
     collapse: collapse,
@@ -1122,7 +1122,7 @@ function $70bb27cc6be01fc7$export$9d4a4b669b1929ab(props) {
         ...props.imgProps,
         customUrls: (url, width // Apparently don't have to encode url for CF's service
         ) => {
-          if (url.startsWith("https://cdn.shopify.com"))
+          if (url?.startsWith?.("https://cdn.shopify.com"))
             // The shopify image resizing CDN blocks Cloudflare's image resizer. It's possible that we can't detect shopify image URLs sometimes because they go to the merchant's domain,
             // but it seems like the URLs returned by the Depict API always goes to the cdn.shopify.com version of an image, so this simple workaround works.
             return $e8ffe11ed01df0fe$export$1d6267828870adda(url, width);
@@ -1364,18 +1364,18 @@ function $7555dcad3b8a4632$export$ebf0b1d4f90c09ae({
     get children() {
       return $i7OB2$createComponent((0, $i7OB2$Show), {
         get when() {
-          return containerWidth_() || !displays_;
+          return containerWidth_() || !displays_();
         },
         get children() {
           return $i7OB2$ssr($7555dcad3b8a4632$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$ssrElement("div", $i7OB2$mergeProps({
             get ["class"]() {
               return `look-overlay ${userWantsExpanded() ? "expanded" : ""} ${!getSecondPartAnimationRunning() && userWantsExpanded() ? "resting-fully-expanded" : ""}`;
             }
-          }, () => displays_ && {
+          }, () => displays_() && {
             style: `--look-card-width:${containerWidth_()}px;--look-item-height:${lookItemHeight() || 200}px`
           }), () => $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Index), {
             get each() {
-              return displays_ || Array.from({
+              return displays_() || Array.from({
                 length: 4
               });
             },
@@ -1432,12 +1432,11 @@ function $28ee4f7db3cc44b8$export$44809a8a3e867e30({
   priceFormatting_: priceFormatting_,
   pseudoRouter_: pseudoRouter_
 }) {
-  const [coverImage] = display_?.image_urls || [];
   const useWantsExpandedSignal_ = $i7OB2$createSignal(false);
   const [userWantsExpanded, setUserWantsExpanded] = useWantsExpandedSignal_;
   const supportsHover_ = $dc9262ef6f786812$export$d9f36cf74e24d595("(hover: hover) and (pointer: fine)");
   const us = Symbol("look");
-  const container = $i7OB2$ssr($28ee4f7db3cc44b8$var$_tmpl$, $i7OB2$ssrHydrationKey(), `look-card ${!display_ ? "placeholder" : ""}`);
+  const container = $i7OB2$ssr($28ee4f7db3cc44b8$var$_tmpl$, $i7OB2$ssrHydrationKey(), `look-card ${!display_() ? "placeholder" : ""}`);
   const containerWidth_ = $2449872a62a75a20$export$ebdc3711f7e02ccd(container);
   const clickHandler = $i7OB2$catchify(({
     target: target
@@ -1460,7 +1459,9 @@ function $28ee4f7db3cc44b8$export$44809a8a3e867e30({
   // Close us if another look expands
   $i7OB2$createEffect(() => !expandedLooks_().has(us) && setUserWantsExpanded(false));
   $i7OB2$insert(container, () => [$i7OB2$createComponent((0, $i7OB2$Show), {
-    when: display_,
+    get when() {
+      return display_();
+    },
     get fallback() {
       return $i7OB2$createComponent((0, $7f60f09116a3fe61$export$3f37af283f8fb843), {
         aspectRatio: `var(${(0, $bb15dfb548a7666e$export$8a2234b5b1a5ebd4)}, ${placeholderImageAspectRatio_})`
@@ -1468,15 +1469,15 @@ function $28ee4f7db3cc44b8$export$44809a8a3e867e30({
     },
     get children() {
       return $i7OB2$createComponent((0, $70bb27cc6be01fc7$export$9d4a4b669b1929ab), {
-        src: coverImage,
+        get src() {
+          return display_()?.image_urls?.[0];
+        },
         aspectRatio: placeholderImageAspectRatio_,
         autoAdjustAspectRatio: true
       });
     }
   }), $i7OB2$createComponent((0, $7555dcad3b8a4632$export$ebf0b1d4f90c09ae), {
-    get displays_() {
-      return display_?.displays;
-    },
+    displays_: () => display_()?.displays,
     userWantsExpandedSignal_: useWantsExpandedSignal_,
     containerWidth_: containerWidth_,
     animationDuration_: animationDuration_,
@@ -1728,7 +1729,7 @@ function $07ef910e8ef6b783$export$2c9f9bf2092486aa(props) {
     });
     const sharedOptions = {
       product_card_template_: display => $28ee4f7db3cc44b8$export$44809a8a3e867e30({
-        display_: display,
+        display_: () => display,
         FavoriteButton_: props.FavoriteButton_,
         placeholderImageAspectRatio_: props.imagePlaceholderAspectRatio_,
         animationDuration_: expandingAnimationDuration,
@@ -1989,7 +1990,7 @@ const $e003be2a50d9e5bc$export$b05c0ae390cf3e06 = ({
     }
   })), $i7OB2$escape($i7OB2$createComponent((0, $i7OB2$Show), {
     get when() {
-      return !salePrice.loading && salePrice.latest;
+      return !salePrice.loading && salePrice.latest != undefined;
     },
     get fallback() {
       return [$i7OB2$createComponent((0, $d134eae24341b4a1$export$89c6019e4baa40b1), {