@depict-ai/ui 1.4.19 → 1.4.21

package/ES10/index.cjs

@@ -16,6 +16,9 @@ function $parcel$export(e, n, v, s) {
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
+$parcel$export(module.exports, "ShopifyResponsiveImg", () => $858fdcf73148519f$export$6e5611bc7e57e477);
+$parcel$export(module.exports, "makeSizeAccessor", () => $858fdcf73148519f$export$e6fffe67d4cdd848);
+$parcel$export(module.exports, "ImageContainer", () => $ce467edb5343cfcd$export$94026ee33dbabc26);
 $parcel$export(module.exports, "SentryErrorBoundary", () => $1b3cf201cdd38687$export$b69d0d92862de18b);
 $parcel$export(module.exports, "ExpandingDetails", () => $4cfe8400ed3f92c4$export$6c6d7a51fa9aa15d);
 $parcel$export(module.exports, "accessor_of_object_to_object_with_accessor_values", () => $39cca429fb71d8ff$export$f091cbac892643a4);
@@ -61,7 +64,63 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $33eed84f447aa0c0$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447aa0c0$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "1.4.19";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "1.4.21";
+const $858fdcf73148519f$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<img>`, 1);
+function $858fdcf73148519f$export$e6fffe67d4cdd848(whatToWatch) {
+  const [size, setSize] = $52FdA$solidjs.createSignal(0);
+  const resizeObserver = new ResizeObserver($52FdA$depictaiutilishared.catchify(records => {
+    for (let j = 0; j < records.length; j++) {
+      const {
+        width: width
+      } = records[j].contentRect;
+      if (!width) continue;
+      // add extra 5% just in case. + safari is (in some cases) acting a bit questionable and needs a third extra to fill the set width
+      const new_size = width * 1.05 * ((0, $52FdA$depictaiutilishared.is_safari) ? 4 / 3 : 1);
+      setSize(Math.round(new_size));
+    }
+  }));
+  resizeObserver.observe(whatToWatch);
+  $52FdA$solidjs.onCleanup(() => resizeObserver.disconnect());
+  return size;
+}
+function $858fdcf73148519f$export$6e5611bc7e57e477(_ref) {
+  let {
+    src: raw_src,
+    size: size,
+    resolutions = [64, 128, 256, 300, 400, 512, 768, 1024, 1280, 1536, 2048, 4096],
+    ...otherOptions
+  } = _ref;
+  const src = new URL(raw_src, location.origin);
+  const fallbackSrc = $858fdcf73148519f$var$generateImageUrl(src, 400);
+  const srcset = $858fdcf73148519f$var$make_srcset(src, resolutions);
+  return (() => {
+    const _el$ = $52FdA$solidjsweb.getNextElement($858fdcf73148519f$var$_tmpl$);
+    $52FdA$solidjsweb.spread(_el$, $52FdA$solidjsweb.mergeProps(otherOptions, {
+      "src": fallbackSrc,
+      "srcset": srcset,
+      get sizes() {
+        return size() + "px";
+      }
+    }), false, false);
+    $52FdA$solidjsweb.runHydrationEvents();
+    return _el$;
+  })();
+}
+function $858fdcf73148519f$var$make_srcset(url, resolutions) {
+  return resolutions.map(width => "".concat($858fdcf73148519f$var$generateImageUrl(url, width), " ").concat(width, "w")).join(", ");
+}
+function $858fdcf73148519f$var$generateImageUrl(url, width) {
+  url.searchParams.set("width", width);
+  return url.href;
+}
+const $ce467edb5343cfcd$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div></div>`, 2);
+function $ce467edb5343cfcd$export$94026ee33dbabc26(props) {
+  return (() => {
+    const _el$ = $52FdA$solidjsweb.getNextElement($ce467edb5343cfcd$var$_tmpl$);
+    $52FdA$solidjsweb.effect(_$p => $52FdA$solidjsweb.style(_el$, "position:relative;width:100%;padding-bottom:".concat(1 / props.aspectRatio * 100, "%"), _$p));
+    return _el$;
+  })();
+}
 
 // Errors caused by SDK consuming code interfacing with the SDK, not the SDK itself or other Depict packages
 class $95e4006e1dcb5b72$export$e1d52e4f0c7557a1 extends Error {}

package/ES10/index.d.ts

@@ -1,4 +1,4 @@
-import { JSX, Signal, Accessor, Setter } from "solid-js";
+import { Accessor, JSX, Signal, Setter } from "solid-js";
 import { report, Elem, Display, ColsAtSize, ModernDisplay, Node_Array } from "@depict-ai/utilishared/ES10";
 import { SearchFilter, SearchRequest } from "@depict-ai/types/api/SearchRequest";
 import { SearchFilter as _SearchFilter1, ContentLink, SearchResponse } from "@depict-ai/types/api/SearchResponse";
@@ -7,7 +7,38 @@ import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
 import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
-export const version = "1.4.19";
+export const version = "1.4.21";
+/**
+ * Returns an accessor that will update when the size of the provided element changes, to be used with ResponsiveImg
+ */
+export function makeSizeAccessor(whatToWatch: HTMLElement): Accessor<number>;
+/**
+ * Automatically generate a srcset from the shopify CDN for an image and set the sizes attribute to the provided accessor.
+ * This is used for our responsive images:
+ * 1. The image must have a container with a fixed size (or aspect ratio) that is independent of the image. When aspectRatio is configured on the depict-cards element as data attribute, we will wrap the image in a ImageContainer for this. If it's false, the user has to provide this container themselves.
+ * 2. We set a ResizeObserver on one of the currently visible images (see makeSizeAccessor)
+ * 3. We set the size attribute of all the visible images to the size of the container we're observing. The point of this is that the sizes attribute is used to determine which image to load, and usually it's set by the user and depends on the relationship between image size and viewport size. By using a ResizeObserver, we can make sure the sizes attribute is always set to the correct value without it having to be configured. This will make so the browser always loads the correct image size for a crisp image but still fast load.
+ */
+export function ShopifyResponsiveImg({
+  src: raw_src,
+  size,
+  resolutions,
+  ...otherOptions
+}: {
+  resolutions?: number[];
+  size: Accessor<number>;
+} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes"> & {
+  src: string;
+}): HTMLImageElement;
+/** @jsxImportSource solid-js */
+/**
+ * ImageContainer for using the padding hack to set the aspect ratio of an image
+ * Put this around an <img> or <ResponsiveImg> to give it a container that always has the same size as the image. This prevents CLS and enables ResponsiveImg to work (the browser to load the correct image size)
+ * (Not using the CSS aspect-ratio property yet here due to browser support)
+ */
+export function ImageContainer(props: {
+  aspectRatio: number;
+}): HTMLDivElement;
 declare class SDKError extends Error {}
 export class ProductCardError extends SDKError {
   constructor(templateError: Error);

package/ES10/index.js

@@ -1,6 +1,6 @@
-import { add_to_version_info as $8tj43$add_to_version_info, report as $8tj43$report, observer as $8tj43$observer, catchify as $8tj43$catchify, useExpandingContainer as $8tj43$useExpandingContainer, standard_price_format as $8tj43$standard_price_format, Amazing_Slider as $8tj43$Amazing_Slider, slider_snap_css as $8tj43$slider_snap_css, slider_fading_factory as $8tj43$slider_fading_factory, make_random_classname as $8tj43$make_random_classname, dlog as $8tj43$dlog, hex_to_rgb as $8tj43$hex_to_rgb, relative_luminance_from_rgb as $8tj43$relative_luminance_from_rgb, javascript_media_query as $8tj43$javascript_media_query, n_col_styling_with_dist as $8tj43$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $8tj43$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $8tj43$layout_get_total_rec_amount_for_row, layout_media_query_header as $8tj43$layout_media_query_header, fetch_recs as $8tj43$fetch_recs, snakeCasifyObject as $8tj43$snakeCasifyObject, instant_exec_on_suspect_history_change as $8tj43$instant_exec_on_suspect_history_change, base_url as $8tj43$base_url, get_depict_id as $8tj43$get_depict_id, get_user_id as $8tj43$get_user_id, get_session_id as $8tj43$get_session_id, make_url_with_query_params as $8tj43$make_url_with_query_params, fetch_retry as $8tj43$fetch_retry, add_version_query_params as $8tj43$add_version_query_params, dwarn as $8tj43$dwarn, sort_obj as $8tj43$sort_obj, edit_current_page_meta_tags as $8tj43$edit_current_page_meta_tags, use_href_accessor as $8tj43$use_href_accessor, base64_encode_unicode as $8tj43$base64_encode_unicode, base64_decode_unicode as $8tj43$base64_decode_unicode, queueMacroTask as $8tj43$queueMacroTask, is_debug as $8tj43$is_debug, make_asyncIterable_exiter as $8tj43$make_asyncIterable_exiter, href_change_ipns as $8tj43$href_change_ipns, ContainedImage as $8tj43$ContainedImage, buildThresholdList as $8tj43$buildThresholdList, deparallelize_no_drop as $8tj43$deparallelize_no_drop, insert_surfaces as $8tj43$insert_surfaces } from "@depict-ai/utilishared/ES10";
-import { template as $8tj43$template, getNextElement as $8tj43$getNextElement, insert as $8tj43$insert, effect as $8tj43$effect, classList as $8tj43$classList, createComponent as $8tj43$createComponent, getNextMarker as $8tj43$getNextMarker, addEventListener as $8tj43$addEventListener, runHydrationEvents as $8tj43$runHydrationEvents, memo as $8tj43$memo, delegateEvents as $8tj43$delegateEvents, setAttribute as $8tj43$setAttribute, spread as $8tj43$spread, mergeProps as $8tj43$mergeProps, Dynamic as $8tj43$Dynamic, use as $8tj43$use, style as $8tj43$style, className as $8tj43$className, isServer as $8tj43$isServer } from "solid-js/web";
-import { ErrorBoundary as $8tj43$ErrorBoundary, createSignal as $8tj43$createSignal, createMemo as $8tj43$createMemo, untrack as $8tj43$untrack, createEffect as $8tj43$createEffect, getOwner as $8tj43$getOwner, Show as $8tj43$Show, runWithOwner as $8tj43$runWithOwner, Index as $8tj43$Index, onCleanup as $8tj43$onCleanup, createRoot as $8tj43$createRoot, on as $8tj43$on, For as $8tj43$For, createRenderEffect as $8tj43$createRenderEffect, createComputed as $8tj43$createComputed, batch as $8tj43$batch, createResource as $8tj43$createResource, createReaction as $8tj43$createReaction, Suspense as $8tj43$Suspense } from "solid-js";
+import { add_to_version_info as $8tj43$add_to_version_info, catchify as $8tj43$catchify, is_safari as $8tj43$is_safari, report as $8tj43$report, observer as $8tj43$observer, useExpandingContainer as $8tj43$useExpandingContainer, standard_price_format as $8tj43$standard_price_format, Amazing_Slider as $8tj43$Amazing_Slider, slider_snap_css as $8tj43$slider_snap_css, slider_fading_factory as $8tj43$slider_fading_factory, make_random_classname as $8tj43$make_random_classname, dlog as $8tj43$dlog, hex_to_rgb as $8tj43$hex_to_rgb, relative_luminance_from_rgb as $8tj43$relative_luminance_from_rgb, javascript_media_query as $8tj43$javascript_media_query, n_col_styling_with_dist as $8tj43$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $8tj43$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $8tj43$layout_get_total_rec_amount_for_row, layout_media_query_header as $8tj43$layout_media_query_header, fetch_recs as $8tj43$fetch_recs, snakeCasifyObject as $8tj43$snakeCasifyObject, instant_exec_on_suspect_history_change as $8tj43$instant_exec_on_suspect_history_change, base_url as $8tj43$base_url, get_depict_id as $8tj43$get_depict_id, get_user_id as $8tj43$get_user_id, get_session_id as $8tj43$get_session_id, make_url_with_query_params as $8tj43$make_url_with_query_params, fetch_retry as $8tj43$fetch_retry, add_version_query_params as $8tj43$add_version_query_params, dwarn as $8tj43$dwarn, sort_obj as $8tj43$sort_obj, edit_current_page_meta_tags as $8tj43$edit_current_page_meta_tags, use_href_accessor as $8tj43$use_href_accessor, base64_encode_unicode as $8tj43$base64_encode_unicode, base64_decode_unicode as $8tj43$base64_decode_unicode, queueMacroTask as $8tj43$queueMacroTask, is_debug as $8tj43$is_debug, make_asyncIterable_exiter as $8tj43$make_asyncIterable_exiter, href_change_ipns as $8tj43$href_change_ipns, ContainedImage as $8tj43$ContainedImage, buildThresholdList as $8tj43$buildThresholdList, deparallelize_no_drop as $8tj43$deparallelize_no_drop, insert_surfaces as $8tj43$insert_surfaces } from "@depict-ai/utilishared/ES10";
+import { template as $8tj43$template, getNextElement as $8tj43$getNextElement, spread as $8tj43$spread, mergeProps as $8tj43$mergeProps, runHydrationEvents as $8tj43$runHydrationEvents, effect as $8tj43$effect, style as $8tj43$style, insert as $8tj43$insert, classList as $8tj43$classList, createComponent as $8tj43$createComponent, getNextMarker as $8tj43$getNextMarker, addEventListener as $8tj43$addEventListener, memo as $8tj43$memo, delegateEvents as $8tj43$delegateEvents, setAttribute as $8tj43$setAttribute, Dynamic as $8tj43$Dynamic, use as $8tj43$use, className as $8tj43$className, isServer as $8tj43$isServer } from "solid-js/web";
+import { createSignal as $8tj43$createSignal, onCleanup as $8tj43$onCleanup, ErrorBoundary as $8tj43$ErrorBoundary, createMemo as $8tj43$createMemo, untrack as $8tj43$untrack, createEffect as $8tj43$createEffect, getOwner as $8tj43$getOwner, Show as $8tj43$Show, runWithOwner as $8tj43$runWithOwner, Index as $8tj43$Index, createRoot as $8tj43$createRoot, on as $8tj43$on, For as $8tj43$For, createRenderEffect as $8tj43$createRenderEffect, createComputed as $8tj43$createComputed, batch as $8tj43$batch, createResource as $8tj43$createResource, createReaction as $8tj43$createReaction, Suspense as $8tj43$Suspense } from "solid-js";
 import $8tj43$babelruntimehelpersclassPrivateFieldSet from "@babel/runtime/helpers/classPrivateFieldSet";
 import $8tj43$babelruntimehelpersclassPrivateFieldGet from "@babel/runtime/helpers/classPrivateFieldGet";
 import $8tj43$babelruntimehelpersdefineProperty from "@babel/runtime/helpers/defineProperty";
@@ -8,7 +8,63 @@ import $8tj43$babelruntimehelpersdefineProperty from "@babel/runtime/helpers/def
 /*! 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 = "1.4.19";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "1.4.21";
+const $56047603f9d212b6$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<img>`, 1);
+function $56047603f9d212b6$export$e6fffe67d4cdd848(whatToWatch) {
+  const [size, setSize] = $8tj43$createSignal(0);
+  const resizeObserver = new ResizeObserver($8tj43$catchify(records => {
+    for (let j = 0; j < records.length; j++) {
+      const {
+        width: width
+      } = records[j].contentRect;
+      if (!width) continue;
+      // add extra 5% just in case. + safari is (in some cases) acting a bit questionable and needs a third extra to fill the set width
+      const new_size = width * 1.05 * ((0, $8tj43$is_safari) ? 4 / 3 : 1);
+      setSize(Math.round(new_size));
+    }
+  }));
+  resizeObserver.observe(whatToWatch);
+  $8tj43$onCleanup(() => resizeObserver.disconnect());
+  return size;
+}
+function $56047603f9d212b6$export$6e5611bc7e57e477(_ref) {
+  let {
+    src: raw_src,
+    size: size,
+    resolutions = [64, 128, 256, 300, 400, 512, 768, 1024, 1280, 1536, 2048, 4096],
+    ...otherOptions
+  } = _ref;
+  const src = new URL(raw_src, location.origin);
+  const fallbackSrc = $56047603f9d212b6$var$generateImageUrl(src, 400);
+  const srcset = $56047603f9d212b6$var$make_srcset(src, resolutions);
+  return (() => {
+    const _el$ = $8tj43$getNextElement($56047603f9d212b6$var$_tmpl$);
+    $8tj43$spread(_el$, $8tj43$mergeProps(otherOptions, {
+      "src": fallbackSrc,
+      "srcset": srcset,
+      get sizes() {
+        return size() + "px";
+      }
+    }), false, false);
+    $8tj43$runHydrationEvents();
+    return _el$;
+  })();
+}
+function $56047603f9d212b6$var$make_srcset(url, resolutions) {
+  return resolutions.map(width => "".concat($56047603f9d212b6$var$generateImageUrl(url, width), " ").concat(width, "w")).join(", ");
+}
+function $56047603f9d212b6$var$generateImageUrl(url, width) {
+  url.searchParams.set("width", width);
+  return url.href;
+}
+const $801e8845d3fa3653$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div></div>`, 2);
+function $801e8845d3fa3653$export$94026ee33dbabc26(props) {
+  return (() => {
+    const _el$ = $8tj43$getNextElement($801e8845d3fa3653$var$_tmpl$);
+    $8tj43$effect(_$p => $8tj43$style(_el$, "position:relative;width:100%;padding-bottom:".concat(1 / props.aspectRatio * 100, "%"), _$p));
+    return _el$;
+  })();
+}
 
 // Errors caused by SDK consuming code interfacing with the SDK, not the SDK itself or other Depict packages
 class $f3b7124b76123e44$export$e1d52e4f0c7557a1 extends Error {}
@@ -11156,4 +11212,4 @@ const $d399250dfa491636$export$c3834fa86c616831 = [[4], [3, 1024], [2, 901]];
 const $d399250dfa491636$export$864d304a0bc46829 = "2%";
 const $d399250dfa491636$export$7bf543b9d9be2c22 = (0, $fa332ea03168857c$export$b91cec6bdc6b32a1);
 $8tj43$add_to_version_info("ui", (0, $8db9a15135765c11$export$83d89fbfd8236492));
-export { $74777e8fe65b3dcb$export$b69d0d92862de18b as SentryErrorBoundary, $ad371564683947ab$export$6c6d7a51fa9aa15d as ExpandingDetails, $e18ab2868df26f40$export$f091cbac892643a4 as accessor_of_object_to_object_with_accessor_values, $4711a82d08d2021b$export$fecbb157621501bd as SelectedFilters, $f6b0500577e1b210$export$3f1a388cc0d8fed7 as FilterBody, $44aa24b1bb793549$export$b288c38ae3fddb56 as create_modified_filters, $63f1f8dbcd07d3b0$export$d21e32dfedac04be as SolidLayout, $d5f1e6a0f9117286$export$79b1565500412d9b as general_modal_abstraction, $9783d437ad61594c$export$3b621d86b1566b2 as CrossIcon, $ca6ab5f08bd28bca$export$8be2714ec7f169ee as GenericSliderArrowButton, $5c5732ef44f05b26$export$58e808b1db15d3bc as fetchDepictRecommendations, $f5f54892fd0c7d9f$export$de035477d6fef996 as QuickLinks, $f5f54892fd0c7d9f$export$5b7c3ce0ebe51f86 as BreadCrumbs, $fa332ea03168857c$export$b91cec6bdc6b32a1 as CategoryTitle, $702d7656a373973e$export$824dde41348efed1 as embedded_num_products, $96fd967c5b358ead$export$643598a327b5833e as get_categories, $f5f54892fd0c7d9f$export$f34314aa9505732e as DepictCategory, $f5f54892fd0c7d9f$export$e2bf8ce7779e827e as CategoryPage, $eb064bc3350276c1$export$ac6237957a15b3f0 as DepictSearch, $eb064bc3350276c1$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $eb064bc3350276c1$export$f2dc7e4e4aa11abb as SearchPage, $eb064bc3350276c1$export$316f6f283ae64765 as SearchField, $f3b7124b76123e44$export$aa14a9f43128f61f as ProductCardError, $169c13c0531d91d2$export$d86a33413558014e as open_modal_with_alignment, $5eaa00b951637e96$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $1308a7816c3d4f2d$export$b3ad617e9036868 as align_field, $a9c7ba6087881ac2$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $cc64aabf2c7a1f1a$export$1233ca167bf71f9a as styles_to_valid_css_string, $e56d241d0f33d459$export$fe334901e8bebd57 as disable_scrolling, $573c007c697a1831$export$d0596b5cae35ad4 as open_search_with_shift_slash, $284849364a6ef73a$export$e015ed2f2950f2e3 as DepictAPI, $00a5b94f0c11efbb$export$d9f36cf74e24d595 as media_query_to_accessor, $e60a76195ac6d408$export$689e204eadb33baf as setup_fast_leave, $a61a2051e15c8d7a$export$5196e4c01fa56fcb as show_toast, $60ec7a29849d81db$export$a71e92cfbb498adc as SolidFormatPrice, $37e8c97bb6876197$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $bc2337c9a05ecd18$export$acb3eaade4b23afd as BasePlaceholder, $ceafb6fb91c6f394$export$89c6019e4baa40b1 as TextPlaceholder, $3ab4aa97880fb88d$export$3f37af283f8fb843 as ImagePlaceholder, $f9fd3017c20b774a$export$3ccaa27d81dd8556 as PageReplacer, $d399250dfa491636$export$864d304a0bc46829 as defaultGridSpacing, $d399250dfa491636$export$c3834fa86c616831 as defaultColsAtSize, $d399250dfa491636$export$7bf543b9d9be2c22 as defaultCategoryTitlePlugin, $8db9a15135765c11$export$83d89fbfd8236492 as version };
+export { $56047603f9d212b6$export$6e5611bc7e57e477 as ShopifyResponsiveImg, $56047603f9d212b6$export$e6fffe67d4cdd848 as makeSizeAccessor, $801e8845d3fa3653$export$94026ee33dbabc26 as ImageContainer, $74777e8fe65b3dcb$export$b69d0d92862de18b as SentryErrorBoundary, $ad371564683947ab$export$6c6d7a51fa9aa15d as ExpandingDetails, $e18ab2868df26f40$export$f091cbac892643a4 as accessor_of_object_to_object_with_accessor_values, $4711a82d08d2021b$export$fecbb157621501bd as SelectedFilters, $f6b0500577e1b210$export$3f1a388cc0d8fed7 as FilterBody, $44aa24b1bb793549$export$b288c38ae3fddb56 as create_modified_filters, $63f1f8dbcd07d3b0$export$d21e32dfedac04be as SolidLayout, $d5f1e6a0f9117286$export$79b1565500412d9b as general_modal_abstraction, $9783d437ad61594c$export$3b621d86b1566b2 as CrossIcon, $ca6ab5f08bd28bca$export$8be2714ec7f169ee as GenericSliderArrowButton, $5c5732ef44f05b26$export$58e808b1db15d3bc as fetchDepictRecommendations, $f5f54892fd0c7d9f$export$de035477d6fef996 as QuickLinks, $f5f54892fd0c7d9f$export$5b7c3ce0ebe51f86 as BreadCrumbs, $fa332ea03168857c$export$b91cec6bdc6b32a1 as CategoryTitle, $702d7656a373973e$export$824dde41348efed1 as embedded_num_products, $96fd967c5b358ead$export$643598a327b5833e as get_categories, $f5f54892fd0c7d9f$export$f34314aa9505732e as DepictCategory, $f5f54892fd0c7d9f$export$e2bf8ce7779e827e as CategoryPage, $eb064bc3350276c1$export$ac6237957a15b3f0 as DepictSearch, $eb064bc3350276c1$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $eb064bc3350276c1$export$f2dc7e4e4aa11abb as SearchPage, $eb064bc3350276c1$export$316f6f283ae64765 as SearchField, $f3b7124b76123e44$export$aa14a9f43128f61f as ProductCardError, $169c13c0531d91d2$export$d86a33413558014e as open_modal_with_alignment, $5eaa00b951637e96$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $1308a7816c3d4f2d$export$b3ad617e9036868 as align_field, $a9c7ba6087881ac2$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $cc64aabf2c7a1f1a$export$1233ca167bf71f9a as styles_to_valid_css_string, $e56d241d0f33d459$export$fe334901e8bebd57 as disable_scrolling, $573c007c697a1831$export$d0596b5cae35ad4 as open_search_with_shift_slash, $284849364a6ef73a$export$e015ed2f2950f2e3 as DepictAPI, $00a5b94f0c11efbb$export$d9f36cf74e24d595 as media_query_to_accessor, $e60a76195ac6d408$export$689e204eadb33baf as setup_fast_leave, $a61a2051e15c8d7a$export$5196e4c01fa56fcb as show_toast, $60ec7a29849d81db$export$a71e92cfbb498adc as SolidFormatPrice, $37e8c97bb6876197$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $bc2337c9a05ecd18$export$acb3eaade4b23afd as BasePlaceholder, $ceafb6fb91c6f394$export$89c6019e4baa40b1 as TextPlaceholder, $3ab4aa97880fb88d$export$3f37af283f8fb843 as ImagePlaceholder, $f9fd3017c20b774a$export$3ccaa27d81dd8556 as PageReplacer, $d399250dfa491636$export$864d304a0bc46829 as defaultGridSpacing, $d399250dfa491636$export$c3834fa86c616831 as defaultColsAtSize, $d399250dfa491636$export$7bf543b9d9be2c22 as defaultCategoryTitlePlugin, $8db9a15135765c11$export$83d89fbfd8236492 as version };

package/latest/index.cjs

@@ -10,6 +10,9 @@ function $parcel$export(e, n, v, s) {
     configurable: true
   });
 }
+$parcel$export(module.exports, "ShopifyResponsiveImg", () => $19950faaac026e09$export$6e5611bc7e57e477);
+$parcel$export(module.exports, "makeSizeAccessor", () => $19950faaac026e09$export$e6fffe67d4cdd848);
+$parcel$export(module.exports, "ImageContainer", () => $93304d59a9747aa6$export$94026ee33dbabc26);
 $parcel$export(module.exports, "SentryErrorBoundary", () => $edafe91daf3091d7$export$b69d0d92862de18b);
 $parcel$export(module.exports, "ExpandingDetails", () => $a69e505a12a77874$export$6c6d7a51fa9aa15d);
 $parcel$export(module.exports, "accessor_of_object_to_object_with_accessor_values", () => $0785f4c9947d9b5f$export$f091cbac892643a4);
@@ -55,7 +58,62 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad997933$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "1.4.19";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "1.4.21";
+const $19950faaac026e09$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<img>`, 1);
+function $19950faaac026e09$export$e6fffe67d4cdd848(whatToWatch) {
+  const [size, setSize] = $gVhhF$solidjs.createSignal(0);
+  const resizeObserver = new ResizeObserver($gVhhF$depictaiutilishared.catchify(records => {
+    for (let j = 0; j < records.length; j++) {
+      const {
+        width: width
+      } = records[j].contentRect;
+      if (!width) continue;
+      // add extra 5% just in case. + safari is (in some cases) acting a bit questionable and needs a third extra to fill the set width
+      const new_size = width * 1.05 * ((0, $gVhhF$depictaiutilishared.is_safari) ? 4 / 3 : 1);
+      setSize(Math.round(new_size));
+    }
+  }));
+  resizeObserver.observe(whatToWatch);
+  $gVhhF$solidjs.onCleanup(() => resizeObserver.disconnect());
+  return size;
+}
+function $19950faaac026e09$export$6e5611bc7e57e477({
+  src: raw_src,
+  size: size,
+  resolutions = [64, 128, 256, 300, 400, 512, 768, 1024, 1280, 1536, 2048, 4096],
+  ...otherOptions
+}) {
+  const src = new URL(raw_src, location.origin);
+  const fallbackSrc = $19950faaac026e09$var$generateImageUrl(src, 400);
+  const srcset = $19950faaac026e09$var$make_srcset(src, resolutions);
+  return (() => {
+    const _el$ = $gVhhF$solidjsweb.getNextElement($19950faaac026e09$var$_tmpl$);
+    $gVhhF$solidjsweb.spread(_el$, $gVhhF$solidjsweb.mergeProps(otherOptions, {
+      "src": fallbackSrc,
+      "srcset": srcset,
+      get sizes() {
+        return size() + "px";
+      }
+    }), false, false);
+    $gVhhF$solidjsweb.runHydrationEvents();
+    return _el$;
+  })();
+}
+function $19950faaac026e09$var$make_srcset(url, resolutions) {
+  return resolutions.map(width => `${$19950faaac026e09$var$generateImageUrl(url, width)} ${width}w`).join(", ");
+}
+function $19950faaac026e09$var$generateImageUrl(url, width) {
+  url.searchParams.set("width", width);
+  return url.href;
+}
+const $93304d59a9747aa6$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div></div>`, 2);
+function $93304d59a9747aa6$export$94026ee33dbabc26(props) {
+  return (() => {
+    const _el$ = $gVhhF$solidjsweb.getNextElement($93304d59a9747aa6$var$_tmpl$);
+    $gVhhF$solidjsweb.effect(_$p => $gVhhF$solidjsweb.style(_el$, `position:relative;width:100%;padding-bottom:${1 / props.aspectRatio * 100}%`, _$p));
+    return _el$;
+  })();
+}
 
 // Errors caused by SDK consuming code interfacing with the SDK, not the SDK itself or other Depict packages
 class $7dd1edb2ee2b43ad$export$e1d52e4f0c7557a1 extends Error {}

package/latest/index.d.ts

@@ -1,4 +1,4 @@
-import { JSX, Signal, Accessor, Setter } from "solid-js";
+import { Accessor, JSX, Signal, Setter } from "solid-js";
 import { report, Elem, Display, ColsAtSize, ModernDisplay, Node_Array } from "@depict-ai/utilishared/latest";
 import { SearchFilter, SearchRequest } from "@depict-ai/types/api/SearchRequest";
 import { SearchFilter as _SearchFilter1, ContentLink, SearchResponse } from "@depict-ai/types/api/SearchResponse";
@@ -7,7 +7,38 @@ import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
 import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
-export const version = "1.4.19";
+export const version = "1.4.21";
+/**
+ * Returns an accessor that will update when the size of the provided element changes, to be used with ResponsiveImg
+ */
+export function makeSizeAccessor(whatToWatch: HTMLElement): Accessor<number>;
+/**
+ * Automatically generate a srcset from the shopify CDN for an image and set the sizes attribute to the provided accessor.
+ * This is used for our responsive images:
+ * 1. The image must have a container with a fixed size (or aspect ratio) that is independent of the image. When aspectRatio is configured on the depict-cards element as data attribute, we will wrap the image in a ImageContainer for this. If it's false, the user has to provide this container themselves.
+ * 2. We set a ResizeObserver on one of the currently visible images (see makeSizeAccessor)
+ * 3. We set the size attribute of all the visible images to the size of the container we're observing. The point of this is that the sizes attribute is used to determine which image to load, and usually it's set by the user and depends on the relationship between image size and viewport size. By using a ResizeObserver, we can make sure the sizes attribute is always set to the correct value without it having to be configured. This will make so the browser always loads the correct image size for a crisp image but still fast load.
+ */
+export function ShopifyResponsiveImg({
+  src: raw_src,
+  size,
+  resolutions,
+  ...otherOptions
+}: {
+  resolutions?: number[];
+  size: Accessor<number>;
+} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes"> & {
+  src: string;
+}): HTMLImageElement;
+/** @jsxImportSource solid-js */
+/**
+ * ImageContainer for using the padding hack to set the aspect ratio of an image
+ * Put this around an <img> or <ResponsiveImg> to give it a container that always has the same size as the image. This prevents CLS and enables ResponsiveImg to work (the browser to load the correct image size)
+ * (Not using the CSS aspect-ratio property yet here due to browser support)
+ */
+export function ImageContainer(props: {
+  aspectRatio: number;
+}): HTMLDivElement;
 declare class SDKError extends Error {}
 export class ProductCardError extends SDKError {
   constructor(templateError: Error);

package/latest/index.js

@@ -1,11 +1,66 @@
-import { add_to_version_info as $9HbP8$add_to_version_info, report as $9HbP8$report, observer as $9HbP8$observer, catchify as $9HbP8$catchify, useExpandingContainer as $9HbP8$useExpandingContainer, standard_price_format as $9HbP8$standard_price_format, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, slider_fading_factory as $9HbP8$slider_fading_factory, make_random_classname as $9HbP8$make_random_classname, dlog as $9HbP8$dlog, hex_to_rgb as $9HbP8$hex_to_rgb, relative_luminance_from_rgb as $9HbP8$relative_luminance_from_rgb, javascript_media_query as $9HbP8$javascript_media_query, n_col_styling_with_dist as $9HbP8$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $9HbP8$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $9HbP8$layout_get_total_rec_amount_for_row, layout_media_query_header as $9HbP8$layout_media_query_header, fetch_recs as $9HbP8$fetch_recs, snakeCasifyObject as $9HbP8$snakeCasifyObject, instant_exec_on_suspect_history_change as $9HbP8$instant_exec_on_suspect_history_change, base_url as $9HbP8$base_url, get_depict_id as $9HbP8$get_depict_id, get_user_id as $9HbP8$get_user_id, get_session_id as $9HbP8$get_session_id, sort_obj as $9HbP8$sort_obj, fetch_retry as $9HbP8$fetch_retry, add_version_query_params as $9HbP8$add_version_query_params, dwarn as $9HbP8$dwarn, make_url_with_query_params as $9HbP8$make_url_with_query_params, edit_current_page_meta_tags as $9HbP8$edit_current_page_meta_tags, use_href_accessor as $9HbP8$use_href_accessor, base64_encode_unicode as $9HbP8$base64_encode_unicode, base64_decode_unicode as $9HbP8$base64_decode_unicode, queueMacroTask as $9HbP8$queueMacroTask, is_debug as $9HbP8$is_debug, make_asyncIterable_exiter as $9HbP8$make_asyncIterable_exiter, href_change_ipns as $9HbP8$href_change_ipns, ContainedImage as $9HbP8$ContainedImage, buildThresholdList as $9HbP8$buildThresholdList, deparallelize_no_drop as $9HbP8$deparallelize_no_drop, insert_surfaces as $9HbP8$insert_surfaces } from "@depict-ai/utilishared/latest";
-import { template as $9HbP8$template, getNextElement as $9HbP8$getNextElement, insert as $9HbP8$insert, effect as $9HbP8$effect, classList as $9HbP8$classList, createComponent as $9HbP8$createComponent, getNextMarker as $9HbP8$getNextMarker, addEventListener as $9HbP8$addEventListener, runHydrationEvents as $9HbP8$runHydrationEvents, memo as $9HbP8$memo, delegateEvents as $9HbP8$delegateEvents, setAttribute as $9HbP8$setAttribute, spread as $9HbP8$spread, mergeProps as $9HbP8$mergeProps, Dynamic as $9HbP8$Dynamic, use as $9HbP8$use, style as $9HbP8$style, className as $9HbP8$className, isServer as $9HbP8$isServer } from "solid-js/web";
-import { ErrorBoundary as $9HbP8$ErrorBoundary, createSignal as $9HbP8$createSignal, createMemo as $9HbP8$createMemo, untrack as $9HbP8$untrack, createEffect as $9HbP8$createEffect, getOwner as $9HbP8$getOwner, Show as $9HbP8$Show, runWithOwner as $9HbP8$runWithOwner, Index as $9HbP8$Index, onCleanup as $9HbP8$onCleanup, createRoot as $9HbP8$createRoot, on as $9HbP8$on, For as $9HbP8$For, createRenderEffect as $9HbP8$createRenderEffect, createComputed as $9HbP8$createComputed, batch as $9HbP8$batch, createResource as $9HbP8$createResource, createReaction as $9HbP8$createReaction, Suspense as $9HbP8$Suspense } from "solid-js";
+import { add_to_version_info as $9HbP8$add_to_version_info, catchify as $9HbP8$catchify, is_safari as $9HbP8$is_safari, report as $9HbP8$report, observer as $9HbP8$observer, useExpandingContainer as $9HbP8$useExpandingContainer, standard_price_format as $9HbP8$standard_price_format, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, slider_fading_factory as $9HbP8$slider_fading_factory, make_random_classname as $9HbP8$make_random_classname, dlog as $9HbP8$dlog, hex_to_rgb as $9HbP8$hex_to_rgb, relative_luminance_from_rgb as $9HbP8$relative_luminance_from_rgb, javascript_media_query as $9HbP8$javascript_media_query, n_col_styling_with_dist as $9HbP8$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $9HbP8$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $9HbP8$layout_get_total_rec_amount_for_row, layout_media_query_header as $9HbP8$layout_media_query_header, fetch_recs as $9HbP8$fetch_recs, snakeCasifyObject as $9HbP8$snakeCasifyObject, instant_exec_on_suspect_history_change as $9HbP8$instant_exec_on_suspect_history_change, base_url as $9HbP8$base_url, get_depict_id as $9HbP8$get_depict_id, get_user_id as $9HbP8$get_user_id, get_session_id as $9HbP8$get_session_id, sort_obj as $9HbP8$sort_obj, fetch_retry as $9HbP8$fetch_retry, add_version_query_params as $9HbP8$add_version_query_params, dwarn as $9HbP8$dwarn, make_url_with_query_params as $9HbP8$make_url_with_query_params, edit_current_page_meta_tags as $9HbP8$edit_current_page_meta_tags, use_href_accessor as $9HbP8$use_href_accessor, base64_encode_unicode as $9HbP8$base64_encode_unicode, base64_decode_unicode as $9HbP8$base64_decode_unicode, queueMacroTask as $9HbP8$queueMacroTask, is_debug as $9HbP8$is_debug, make_asyncIterable_exiter as $9HbP8$make_asyncIterable_exiter, href_change_ipns as $9HbP8$href_change_ipns, ContainedImage as $9HbP8$ContainedImage, buildThresholdList as $9HbP8$buildThresholdList, deparallelize_no_drop as $9HbP8$deparallelize_no_drop, insert_surfaces as $9HbP8$insert_surfaces } from "@depict-ai/utilishared/latest";
+import { template as $9HbP8$template, getNextElement as $9HbP8$getNextElement, spread as $9HbP8$spread, mergeProps as $9HbP8$mergeProps, runHydrationEvents as $9HbP8$runHydrationEvents, effect as $9HbP8$effect, style as $9HbP8$style, insert as $9HbP8$insert, classList as $9HbP8$classList, createComponent as $9HbP8$createComponent, getNextMarker as $9HbP8$getNextMarker, addEventListener as $9HbP8$addEventListener, memo as $9HbP8$memo, delegateEvents as $9HbP8$delegateEvents, setAttribute as $9HbP8$setAttribute, Dynamic as $9HbP8$Dynamic, use as $9HbP8$use, className as $9HbP8$className, isServer as $9HbP8$isServer } from "solid-js/web";
+import { createSignal as $9HbP8$createSignal, onCleanup as $9HbP8$onCleanup, ErrorBoundary as $9HbP8$ErrorBoundary, createMemo as $9HbP8$createMemo, untrack as $9HbP8$untrack, createEffect as $9HbP8$createEffect, getOwner as $9HbP8$getOwner, Show as $9HbP8$Show, runWithOwner as $9HbP8$runWithOwner, Index as $9HbP8$Index, createRoot as $9HbP8$createRoot, on as $9HbP8$on, For as $9HbP8$For, createRenderEffect as $9HbP8$createRenderEffect, createComputed as $9HbP8$createComputed, batch as $9HbP8$batch, createResource as $9HbP8$createResource, createReaction as $9HbP8$createReaction, Suspense as $9HbP8$Suspense } from "solid-js";
 
 /*! 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 = "1.4.19";
+const $ec291e0010116877$export$83d89fbfd8236492 = "1.4.21";
+const $e8ffe11ed01df0fe$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<img>`, 1);
+function $e8ffe11ed01df0fe$export$e6fffe67d4cdd848(whatToWatch) {
+  const [size, setSize] = $9HbP8$createSignal(0);
+  const resizeObserver = new ResizeObserver($9HbP8$catchify(records => {
+    for (let j = 0; j < records.length; j++) {
+      const {
+        width: width
+      } = records[j].contentRect;
+      if (!width) continue;
+      // add extra 5% just in case. + safari is (in some cases) acting a bit questionable and needs a third extra to fill the set width
+      const new_size = width * 1.05 * ((0, $9HbP8$is_safari) ? 4 / 3 : 1);
+      setSize(Math.round(new_size));
+    }
+  }));
+  resizeObserver.observe(whatToWatch);
+  $9HbP8$onCleanup(() => resizeObserver.disconnect());
+  return size;
+}
+function $e8ffe11ed01df0fe$export$6e5611bc7e57e477({
+  src: raw_src,
+  size: size,
+  resolutions = [64, 128, 256, 300, 400, 512, 768, 1024, 1280, 1536, 2048, 4096],
+  ...otherOptions
+}) {
+  const src = new URL(raw_src, location.origin);
+  const fallbackSrc = $e8ffe11ed01df0fe$var$generateImageUrl(src, 400);
+  const srcset = $e8ffe11ed01df0fe$var$make_srcset(src, resolutions);
+  return (() => {
+    const _el$ = $9HbP8$getNextElement($e8ffe11ed01df0fe$var$_tmpl$);
+    $9HbP8$spread(_el$, $9HbP8$mergeProps(otherOptions, {
+      "src": fallbackSrc,
+      "srcset": srcset,
+      get sizes() {
+        return size() + "px";
+      }
+    }), false, false);
+    $9HbP8$runHydrationEvents();
+    return _el$;
+  })();
+}
+function $e8ffe11ed01df0fe$var$make_srcset(url, resolutions) {
+  return resolutions.map(width => `${$e8ffe11ed01df0fe$var$generateImageUrl(url, width)} ${width}w`).join(", ");
+}
+function $e8ffe11ed01df0fe$var$generateImageUrl(url, width) {
+  url.searchParams.set("width", width);
+  return url.href;
+}
+const $f18d425032111270$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div></div>`, 2);
+function $f18d425032111270$export$94026ee33dbabc26(props) {
+  return (() => {
+    const _el$ = $9HbP8$getNextElement($f18d425032111270$var$_tmpl$);
+    $9HbP8$effect(_$p => $9HbP8$style(_el$, `position:relative;width:100%;padding-bottom:${1 / props.aspectRatio * 100}%`, _$p));
+    return _el$;
+  })();
+}
 
 // Errors caused by SDK consuming code interfacing with the SDK, not the SDK itself or other Depict packages
 class $4fd48cb976bf1789$export$e1d52e4f0c7557a1 extends Error {}
@@ -10264,4 +10319,4 @@ const $4690a06c8489dcd0$export$c3834fa86c616831 = [[4], [3, 1024], [2, 901]];
 const $4690a06c8489dcd0$export$864d304a0bc46829 = "2%";
 const $4690a06c8489dcd0$export$7bf543b9d9be2c22 = (0, $e4615ecd1849548f$export$b91cec6bdc6b32a1);
 $9HbP8$add_to_version_info("ui", (0, $ec291e0010116877$export$83d89fbfd8236492));
-export { $b7436a6d1fd64e3b$export$b69d0d92862de18b as SentryErrorBoundary, $6bb0a0c563dff4bb$export$6c6d7a51fa9aa15d as ExpandingDetails, $c16e74cfe125bb05$export$f091cbac892643a4 as accessor_of_object_to_object_with_accessor_values, $1adfe60f3a14a1d7$export$fecbb157621501bd as SelectedFilters, $fab07f52c9861732$export$3f1a388cc0d8fed7 as FilterBody, $5efb5894079b220e$export$b288c38ae3fddb56 as create_modified_filters, $c8d5ff4524619fcd$export$d21e32dfedac04be as SolidLayout, $194bd6b8e4c59830$export$79b1565500412d9b as general_modal_abstraction, $19976a74d273070d$export$3b621d86b1566b2 as CrossIcon, $fbbadcb080ad1d4a$export$8be2714ec7f169ee as GenericSliderArrowButton, $c58717f39bf51647$export$58e808b1db15d3bc as fetchDepictRecommendations, $961b5c64bef4662f$export$de035477d6fef996 as QuickLinks, $961b5c64bef4662f$export$5b7c3ce0ebe51f86 as BreadCrumbs, $e4615ecd1849548f$export$b91cec6bdc6b32a1 as CategoryTitle, $a6e23a834336fc19$export$824dde41348efed1 as embedded_num_products, $c9312089e8983364$export$643598a327b5833e as get_categories, $961b5c64bef4662f$export$f34314aa9505732e as DepictCategory, $961b5c64bef4662f$export$e2bf8ce7779e827e as CategoryPage, $806c97b931758897$export$ac6237957a15b3f0 as DepictSearch, $806c97b931758897$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $806c97b931758897$export$f2dc7e4e4aa11abb as SearchPage, $806c97b931758897$export$316f6f283ae64765 as SearchField, $4fd48cb976bf1789$export$aa14a9f43128f61f as ProductCardError, $6891c018a834cfdd$export$d86a33413558014e as open_modal_with_alignment, $bb15dfb548a7666e$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $b6d5529b253681aa$export$b3ad617e9036868 as align_field, $b5cccc8ee7d24677$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $926b1b5ba2239356$export$1233ca167bf71f9a as styles_to_valid_css_string, $aea1edf92433e81e$export$fe334901e8bebd57 as disable_scrolling, $6e8944558258054f$export$d0596b5cae35ad4 as open_search_with_shift_slash, $7fa23e2a0079eca4$export$e015ed2f2950f2e3 as DepictAPI, $dc9262ef6f786812$export$d9f36cf74e24d595 as media_query_to_accessor, $6936724b9e0b98d5$export$689e204eadb33baf as setup_fast_leave, $bf52d9f9eebd1938$export$5196e4c01fa56fcb as show_toast, $8c0f86cb3e266eeb$export$a71e92cfbb498adc as SolidFormatPrice, $4ca91518c9a35379$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $d20eff0aadc28983$export$acb3eaade4b23afd as BasePlaceholder, $d134eae24341b4a1$export$89c6019e4baa40b1 as TextPlaceholder, $7f60f09116a3fe61$export$3f37af283f8fb843 as ImagePlaceholder, $753e9b2889a47c89$export$3ccaa27d81dd8556 as PageReplacer, $4690a06c8489dcd0$export$864d304a0bc46829 as defaultGridSpacing, $4690a06c8489dcd0$export$c3834fa86c616831 as defaultColsAtSize, $4690a06c8489dcd0$export$7bf543b9d9be2c22 as defaultCategoryTitlePlugin, $ec291e0010116877$export$83d89fbfd8236492 as version };
+export { $e8ffe11ed01df0fe$export$6e5611bc7e57e477 as ShopifyResponsiveImg, $e8ffe11ed01df0fe$export$e6fffe67d4cdd848 as makeSizeAccessor, $f18d425032111270$export$94026ee33dbabc26 as ImageContainer, $b7436a6d1fd64e3b$export$b69d0d92862de18b as SentryErrorBoundary, $6bb0a0c563dff4bb$export$6c6d7a51fa9aa15d as ExpandingDetails, $c16e74cfe125bb05$export$f091cbac892643a4 as accessor_of_object_to_object_with_accessor_values, $1adfe60f3a14a1d7$export$fecbb157621501bd as SelectedFilters, $fab07f52c9861732$export$3f1a388cc0d8fed7 as FilterBody, $5efb5894079b220e$export$b288c38ae3fddb56 as create_modified_filters, $c8d5ff4524619fcd$export$d21e32dfedac04be as SolidLayout, $194bd6b8e4c59830$export$79b1565500412d9b as general_modal_abstraction, $19976a74d273070d$export$3b621d86b1566b2 as CrossIcon, $fbbadcb080ad1d4a$export$8be2714ec7f169ee as GenericSliderArrowButton, $c58717f39bf51647$export$58e808b1db15d3bc as fetchDepictRecommendations, $961b5c64bef4662f$export$de035477d6fef996 as QuickLinks, $961b5c64bef4662f$export$5b7c3ce0ebe51f86 as BreadCrumbs, $e4615ecd1849548f$export$b91cec6bdc6b32a1 as CategoryTitle, $a6e23a834336fc19$export$824dde41348efed1 as embedded_num_products, $c9312089e8983364$export$643598a327b5833e as get_categories, $961b5c64bef4662f$export$f34314aa9505732e as DepictCategory, $961b5c64bef4662f$export$e2bf8ce7779e827e as CategoryPage, $806c97b931758897$export$ac6237957a15b3f0 as DepictSearch, $806c97b931758897$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $806c97b931758897$export$f2dc7e4e4aa11abb as SearchPage, $806c97b931758897$export$316f6f283ae64765 as SearchField, $4fd48cb976bf1789$export$aa14a9f43128f61f as ProductCardError, $6891c018a834cfdd$export$d86a33413558014e as open_modal_with_alignment, $bb15dfb548a7666e$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $b6d5529b253681aa$export$b3ad617e9036868 as align_field, $b5cccc8ee7d24677$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $926b1b5ba2239356$export$1233ca167bf71f9a as styles_to_valid_css_string, $aea1edf92433e81e$export$fe334901e8bebd57 as disable_scrolling, $6e8944558258054f$export$d0596b5cae35ad4 as open_search_with_shift_slash, $7fa23e2a0079eca4$export$e015ed2f2950f2e3 as DepictAPI, $dc9262ef6f786812$export$d9f36cf74e24d595 as media_query_to_accessor, $6936724b9e0b98d5$export$689e204eadb33baf as setup_fast_leave, $bf52d9f9eebd1938$export$5196e4c01fa56fcb as show_toast, $8c0f86cb3e266eeb$export$a71e92cfbb498adc as SolidFormatPrice, $4ca91518c9a35379$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $d20eff0aadc28983$export$acb3eaade4b23afd as BasePlaceholder, $d134eae24341b4a1$export$89c6019e4baa40b1 as TextPlaceholder, $7f60f09116a3fe61$export$3f37af283f8fb843 as ImagePlaceholder, $753e9b2889a47c89$export$3ccaa27d81dd8556 as PageReplacer, $4690a06c8489dcd0$export$864d304a0bc46829 as defaultGridSpacing, $4690a06c8489dcd0$export$c3834fa86c616831 as defaultColsAtSize, $4690a06c8489dcd0$export$7bf543b9d9be2c22 as defaultCategoryTitlePlugin, $ec291e0010116877$export$83d89fbfd8236492 as version };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "1.4.19",
+  "version": "1.4.21",
   "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",

package/server/ES10/index.cjs

@@ -16,6 +16,9 @@ function $parcel$export(e, n, v, s) {
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
+$parcel$export(module.exports, "ShopifyResponsiveImg", () => $858fdcf73148519f$export$6e5611bc7e57e477);
+$parcel$export(module.exports, "makeSizeAccessor", () => $858fdcf73148519f$export$e6fffe67d4cdd848);
+$parcel$export(module.exports, "ImageContainer", () => $ce467edb5343cfcd$export$94026ee33dbabc26);
 $parcel$export(module.exports, "SentryErrorBoundary", () => $1b3cf201cdd38687$export$b69d0d92862de18b);
 $parcel$export(module.exports, "ExpandingDetails", () => $4cfe8400ed3f92c4$export$6c6d7a51fa9aa15d);
 $parcel$export(module.exports, "accessor_of_object_to_object_with_accessor_values", () => $39cca429fb71d8ff$export$f091cbac892643a4);
@@ -61,7 +64,52 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $33eed84f447aa0c0$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447aa0c0$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "1.4.19";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "1.4.21";
+function $858fdcf73148519f$export$e6fffe67d4cdd848(whatToWatch) {
+  const [size, setSize] = $3hooq$solidjs.createSignal(0);
+  const resizeObserver = new ResizeObserver($3hooq$depictaiutilishared.catchify(records => {
+    for (let j = 0; j < records.length; j++) {
+      const {
+        width: width
+      } = records[j].contentRect;
+      if (!width) continue;
+      // add extra 5% just in case. + safari is (in some cases) acting a bit questionable and needs a third extra to fill the set width
+      const new_size = width * 1.05 * ((0, $3hooq$depictaiutilishared.is_safari) ? 4 / 3 : 1);
+      setSize(Math.round(new_size));
+    }
+  }));
+  resizeObserver.observe(whatToWatch);
+  $3hooq$solidjs.onCleanup(() => resizeObserver.disconnect());
+  return size;
+}
+function $858fdcf73148519f$export$6e5611bc7e57e477(_ref) {
+  let {
+    src: raw_src,
+    size: size,
+    resolutions = [64, 128, 256, 300, 400, 512, 768, 1024, 1280, 1536, 2048, 4096],
+    ...otherOptions
+  } = _ref;
+  const src = new URL(raw_src, location.origin);
+  const fallbackSrc = $858fdcf73148519f$var$generateImageUrl(src, 400);
+  const srcset = $858fdcf73148519f$var$make_srcset(src, resolutions);
+  return $3hooq$solidjsweb.ssrElement("img", () => ({
+    ...otherOptions,
+    "src": fallbackSrc,
+    "srcset": srcset,
+    "sizes": size() + "px"
+  }), undefined, true);
+}
+function $858fdcf73148519f$var$make_srcset(url, resolutions) {
+  return resolutions.map(width => "".concat($858fdcf73148519f$var$generateImageUrl(url, width), " ").concat(width, "w")).join(", ");
+}
+function $858fdcf73148519f$var$generateImageUrl(url, width) {
+  url.searchParams.set("width", width);
+  return url.href;
+}
+const $ce467edb5343cfcd$var$_tmpl$ = ["<div", ' style="', '"></div>'];
+function $ce467edb5343cfcd$export$94026ee33dbabc26(props) {
+  return $3hooq$solidjsweb.ssr($ce467edb5343cfcd$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrStyle("position:relative;width:100%;padding-bottom:".concat(1 / props.aspectRatio * 100, "%")));
+}
 
 // Errors caused by SDK consuming code interfacing with the SDK, not the SDK itself or other Depict packages
 class $95e4006e1dcb5b72$export$e1d52e4f0c7557a1 extends Error {}

package/server/ES10/index.d.ts

@@ -1,4 +1,4 @@
-import { JSX, Signal, Accessor, Setter } from "solid-js";
+import { Accessor, JSX, Signal, Setter } from "solid-js";
 import { report, Elem, Display, ColsAtSize, ModernDisplay, Node_Array } from "@depict-ai/utilishared/ES10";
 import { SearchFilter, SearchRequest } from "@depict-ai/types/api/SearchRequest";
 import { SearchFilter as _SearchFilter1, ContentLink, SearchResponse } from "@depict-ai/types/api/SearchResponse";
@@ -7,7 +7,38 @@ import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
 import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
-export const version = "1.4.19";
+export const version = "1.4.21";
+/**
+ * Returns an accessor that will update when the size of the provided element changes, to be used with ResponsiveImg
+ */
+export function makeSizeAccessor(whatToWatch: HTMLElement): Accessor<number>;
+/**
+ * Automatically generate a srcset from the shopify CDN for an image and set the sizes attribute to the provided accessor.
+ * This is used for our responsive images:
+ * 1. The image must have a container with a fixed size (or aspect ratio) that is independent of the image. When aspectRatio is configured on the depict-cards element as data attribute, we will wrap the image in a ImageContainer for this. If it's false, the user has to provide this container themselves.
+ * 2. We set a ResizeObserver on one of the currently visible images (see makeSizeAccessor)
+ * 3. We set the size attribute of all the visible images to the size of the container we're observing. The point of this is that the sizes attribute is used to determine which image to load, and usually it's set by the user and depends on the relationship between image size and viewport size. By using a ResizeObserver, we can make sure the sizes attribute is always set to the correct value without it having to be configured. This will make so the browser always loads the correct image size for a crisp image but still fast load.
+ */
+export function ShopifyResponsiveImg({
+  src: raw_src,
+  size,
+  resolutions,
+  ...otherOptions
+}: {
+  resolutions?: number[];
+  size: Accessor<number>;
+} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes"> & {
+  src: string;
+}): HTMLImageElement;
+/** @jsxImportSource solid-js */
+/**
+ * ImageContainer for using the padding hack to set the aspect ratio of an image
+ * Put this around an <img> or <ResponsiveImg> to give it a container that always has the same size as the image. This prevents CLS and enables ResponsiveImg to work (the browser to load the correct image size)
+ * (Not using the CSS aspect-ratio property yet here due to browser support)
+ */
+export function ImageContainer(props: {
+  aspectRatio: number;
+}): HTMLDivElement;
 declare class SDKError extends Error {}
 export class ProductCardError extends SDKError {
   constructor(templateError: Error);

package/server/ES10/index.js

@@ -1,6 +1,6 @@
-import { add_to_version_info as $b8hua$add_to_version_info, report as $b8hua$report, observer as $b8hua$observer, catchify as $b8hua$catchify, useExpandingContainer as $b8hua$useExpandingContainer, standard_price_format as $b8hua$standard_price_format, Amazing_Slider as $b8hua$Amazing_Slider, slider_snap_css as $b8hua$slider_snap_css, slider_fading_factory as $b8hua$slider_fading_factory, make_random_classname as $b8hua$make_random_classname, dlog as $b8hua$dlog, hex_to_rgb as $b8hua$hex_to_rgb, relative_luminance_from_rgb as $b8hua$relative_luminance_from_rgb, javascript_media_query as $b8hua$javascript_media_query, n_col_styling_with_dist as $b8hua$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $b8hua$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $b8hua$layout_get_total_rec_amount_for_row, layout_media_query_header as $b8hua$layout_media_query_header, fetch_recs as $b8hua$fetch_recs, snakeCasifyObject as $b8hua$snakeCasifyObject, instant_exec_on_suspect_history_change as $b8hua$instant_exec_on_suspect_history_change, base_url as $b8hua$base_url, get_depict_id as $b8hua$get_depict_id, get_user_id as $b8hua$get_user_id, get_session_id as $b8hua$get_session_id, make_url_with_query_params as $b8hua$make_url_with_query_params, fetch_retry as $b8hua$fetch_retry, add_version_query_params as $b8hua$add_version_query_params, dwarn as $b8hua$dwarn, sort_obj as $b8hua$sort_obj, edit_current_page_meta_tags as $b8hua$edit_current_page_meta_tags, use_href_accessor as $b8hua$use_href_accessor, base64_encode_unicode as $b8hua$base64_encode_unicode, base64_decode_unicode as $b8hua$base64_decode_unicode, queueMacroTask as $b8hua$queueMacroTask, make_asyncIterable_exiter as $b8hua$make_asyncIterable_exiter, href_change_ipns as $b8hua$href_change_ipns, ContainedImage as $b8hua$ContainedImage, deparallelize_no_drop as $b8hua$deparallelize_no_drop, insert_surfaces as $b8hua$insert_surfaces } from "@depict-ai/utilishared/ES10";
-import { ssr as $b8hua$ssr, ssrHydrationKey as $b8hua$ssrHydrationKey, ssrClassList as $b8hua$ssrClassList, escape as $b8hua$escape, insert as $b8hua$insert, createComponent as $b8hua$createComponent, ssrAttribute as $b8hua$ssrAttribute, ssrElement as $b8hua$ssrElement, Dynamic as $b8hua$Dynamic, ssrStyle as $b8hua$ssrStyle, isServer as $b8hua$isServer, mergeProps as $b8hua$mergeProps } from "solid-js/web";
-import { ErrorBoundary as $b8hua$ErrorBoundary, createSignal as $b8hua$createSignal, createMemo as $b8hua$createMemo, untrack as $b8hua$untrack, createEffect as $b8hua$createEffect, getOwner as $b8hua$getOwner, Show as $b8hua$Show, Index as $b8hua$Index, onCleanup as $b8hua$onCleanup, For as $b8hua$For, createRenderEffect as $b8hua$createRenderEffect, createComputed as $b8hua$createComputed, on as $b8hua$on, batch as $b8hua$batch, createRoot as $b8hua$createRoot, runWithOwner as $b8hua$runWithOwner, createResource as $b8hua$createResource, createReaction as $b8hua$createReaction, Suspense as $b8hua$Suspense } from "solid-js";
+import { add_to_version_info as $b8hua$add_to_version_info, catchify as $b8hua$catchify, is_safari as $b8hua$is_safari, report as $b8hua$report, observer as $b8hua$observer, useExpandingContainer as $b8hua$useExpandingContainer, standard_price_format as $b8hua$standard_price_format, Amazing_Slider as $b8hua$Amazing_Slider, slider_snap_css as $b8hua$slider_snap_css, slider_fading_factory as $b8hua$slider_fading_factory, make_random_classname as $b8hua$make_random_classname, dlog as $b8hua$dlog, hex_to_rgb as $b8hua$hex_to_rgb, relative_luminance_from_rgb as $b8hua$relative_luminance_from_rgb, javascript_media_query as $b8hua$javascript_media_query, n_col_styling_with_dist as $b8hua$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $b8hua$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $b8hua$layout_get_total_rec_amount_for_row, layout_media_query_header as $b8hua$layout_media_query_header, fetch_recs as $b8hua$fetch_recs, snakeCasifyObject as $b8hua$snakeCasifyObject, instant_exec_on_suspect_history_change as $b8hua$instant_exec_on_suspect_history_change, base_url as $b8hua$base_url, get_depict_id as $b8hua$get_depict_id, get_user_id as $b8hua$get_user_id, get_session_id as $b8hua$get_session_id, make_url_with_query_params as $b8hua$make_url_with_query_params, fetch_retry as $b8hua$fetch_retry, add_version_query_params as $b8hua$add_version_query_params, dwarn as $b8hua$dwarn, sort_obj as $b8hua$sort_obj, edit_current_page_meta_tags as $b8hua$edit_current_page_meta_tags, use_href_accessor as $b8hua$use_href_accessor, base64_encode_unicode as $b8hua$base64_encode_unicode, base64_decode_unicode as $b8hua$base64_decode_unicode, queueMacroTask as $b8hua$queueMacroTask, make_asyncIterable_exiter as $b8hua$make_asyncIterable_exiter, href_change_ipns as $b8hua$href_change_ipns, ContainedImage as $b8hua$ContainedImage, deparallelize_no_drop as $b8hua$deparallelize_no_drop, insert_surfaces as $b8hua$insert_surfaces } from "@depict-ai/utilishared/ES10";
+import { ssrElement as $b8hua$ssrElement, ssr as $b8hua$ssr, ssrHydrationKey as $b8hua$ssrHydrationKey, ssrStyle as $b8hua$ssrStyle, ssrClassList as $b8hua$ssrClassList, escape as $b8hua$escape, insert as $b8hua$insert, createComponent as $b8hua$createComponent, ssrAttribute as $b8hua$ssrAttribute, Dynamic as $b8hua$Dynamic, isServer as $b8hua$isServer, mergeProps as $b8hua$mergeProps } from "solid-js/web";
+import { createSignal as $b8hua$createSignal, onCleanup as $b8hua$onCleanup, ErrorBoundary as $b8hua$ErrorBoundary, createMemo as $b8hua$createMemo, untrack as $b8hua$untrack, createEffect as $b8hua$createEffect, getOwner as $b8hua$getOwner, Show as $b8hua$Show, Index as $b8hua$Index, For as $b8hua$For, createRenderEffect as $b8hua$createRenderEffect, createComputed as $b8hua$createComputed, on as $b8hua$on, batch as $b8hua$batch, createRoot as $b8hua$createRoot, runWithOwner as $b8hua$runWithOwner, createResource as $b8hua$createResource, createReaction as $b8hua$createReaction, Suspense as $b8hua$Suspense } from "solid-js";
 import $b8hua$babelruntimehelpersclassPrivateFieldSet from "@babel/runtime/helpers/classPrivateFieldSet";
 import $b8hua$babelruntimehelpersclassPrivateFieldGet from "@babel/runtime/helpers/classPrivateFieldGet";
 import $b8hua$babelruntimehelpersdefineProperty from "@babel/runtime/helpers/defineProperty";
@@ -8,7 +8,52 @@ import $b8hua$babelruntimehelpersdefineProperty from "@babel/runtime/helpers/def
 /*! 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 = "1.4.19";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "1.4.21";
+function $56047603f9d212b6$export$e6fffe67d4cdd848(whatToWatch) {
+  const [size, setSize] = $b8hua$createSignal(0);
+  const resizeObserver = new ResizeObserver($b8hua$catchify(records => {
+    for (let j = 0; j < records.length; j++) {
+      const {
+        width: width
+      } = records[j].contentRect;
+      if (!width) continue;
+      // add extra 5% just in case. + safari is (in some cases) acting a bit questionable and needs a third extra to fill the set width
+      const new_size = width * 1.05 * ((0, $b8hua$is_safari) ? 4 / 3 : 1);
+      setSize(Math.round(new_size));
+    }
+  }));
+  resizeObserver.observe(whatToWatch);
+  $b8hua$onCleanup(() => resizeObserver.disconnect());
+  return size;
+}
+function $56047603f9d212b6$export$6e5611bc7e57e477(_ref) {
+  let {
+    src: raw_src,
+    size: size,
+    resolutions = [64, 128, 256, 300, 400, 512, 768, 1024, 1280, 1536, 2048, 4096],
+    ...otherOptions
+  } = _ref;
+  const src = new URL(raw_src, location.origin);
+  const fallbackSrc = $56047603f9d212b6$var$generateImageUrl(src, 400);
+  const srcset = $56047603f9d212b6$var$make_srcset(src, resolutions);
+  return $b8hua$ssrElement("img", () => ({
+    ...otherOptions,
+    "src": fallbackSrc,
+    "srcset": srcset,
+    "sizes": size() + "px"
+  }), undefined, true);
+}
+function $56047603f9d212b6$var$make_srcset(url, resolutions) {
+  return resolutions.map(width => "".concat($56047603f9d212b6$var$generateImageUrl(url, width), " ").concat(width, "w")).join(", ");
+}
+function $56047603f9d212b6$var$generateImageUrl(url, width) {
+  url.searchParams.set("width", width);
+  return url.href;
+}
+const $801e8845d3fa3653$var$_tmpl$ = ["<div", ' style="', '"></div>'];
+function $801e8845d3fa3653$export$94026ee33dbabc26(props) {
+  return $b8hua$ssr($801e8845d3fa3653$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$ssrStyle("position:relative;width:100%;padding-bottom:".concat(1 / props.aspectRatio * 100, "%")));
+}
 
 // Errors caused by SDK consuming code interfacing with the SDK, not the SDK itself or other Depict packages
 class $f3b7124b76123e44$export$e1d52e4f0c7557a1 extends Error {}
@@ -9239,4 +9284,4 @@ const $d399250dfa491636$export$c3834fa86c616831 = [[4], [3, 1024], [2, 901]];
 const $d399250dfa491636$export$864d304a0bc46829 = "2%";
 const $d399250dfa491636$export$7bf543b9d9be2c22 = (0, $fa332ea03168857c$export$b91cec6bdc6b32a1);
 $b8hua$add_to_version_info("ui", (0, $8db9a15135765c11$export$83d89fbfd8236492));
-export { $74777e8fe65b3dcb$export$b69d0d92862de18b as SentryErrorBoundary, $ad371564683947ab$export$6c6d7a51fa9aa15d as ExpandingDetails, $e18ab2868df26f40$export$f091cbac892643a4 as accessor_of_object_to_object_with_accessor_values, $4711a82d08d2021b$export$fecbb157621501bd as SelectedFilters, $f6b0500577e1b210$export$3f1a388cc0d8fed7 as FilterBody, $44aa24b1bb793549$export$b288c38ae3fddb56 as create_modified_filters, $63f1f8dbcd07d3b0$export$d21e32dfedac04be as SolidLayout, $d5f1e6a0f9117286$export$79b1565500412d9b as general_modal_abstraction, $9783d437ad61594c$export$3b621d86b1566b2 as CrossIcon, $ca6ab5f08bd28bca$export$8be2714ec7f169ee as GenericSliderArrowButton, $5c5732ef44f05b26$export$58e808b1db15d3bc as fetchDepictRecommendations, $f5f54892fd0c7d9f$export$de035477d6fef996 as QuickLinks, $f5f54892fd0c7d9f$export$5b7c3ce0ebe51f86 as BreadCrumbs, $fa332ea03168857c$export$b91cec6bdc6b32a1 as CategoryTitle, $702d7656a373973e$export$824dde41348efed1 as embedded_num_products, $96fd967c5b358ead$export$643598a327b5833e as get_categories, $f5f54892fd0c7d9f$export$f34314aa9505732e as DepictCategory, $f5f54892fd0c7d9f$export$e2bf8ce7779e827e as CategoryPage, $eb064bc3350276c1$export$ac6237957a15b3f0 as DepictSearch, $eb064bc3350276c1$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $eb064bc3350276c1$export$f2dc7e4e4aa11abb as SearchPage, $eb064bc3350276c1$export$316f6f283ae64765 as SearchField, $f3b7124b76123e44$export$aa14a9f43128f61f as ProductCardError, $169c13c0531d91d2$export$d86a33413558014e as open_modal_with_alignment, $5eaa00b951637e96$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $1308a7816c3d4f2d$export$b3ad617e9036868 as align_field, $a9c7ba6087881ac2$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $cc64aabf2c7a1f1a$export$1233ca167bf71f9a as styles_to_valid_css_string, $e56d241d0f33d459$export$fe334901e8bebd57 as disable_scrolling, $573c007c697a1831$export$d0596b5cae35ad4 as open_search_with_shift_slash, $284849364a6ef73a$export$e015ed2f2950f2e3 as DepictAPI, $00a5b94f0c11efbb$export$d9f36cf74e24d595 as media_query_to_accessor, $e60a76195ac6d408$export$689e204eadb33baf as setup_fast_leave, $a61a2051e15c8d7a$export$5196e4c01fa56fcb as show_toast, $60ec7a29849d81db$export$a71e92cfbb498adc as SolidFormatPrice, $37e8c97bb6876197$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $bc2337c9a05ecd18$export$acb3eaade4b23afd as BasePlaceholder, $ceafb6fb91c6f394$export$89c6019e4baa40b1 as TextPlaceholder, $3ab4aa97880fb88d$export$3f37af283f8fb843 as ImagePlaceholder, $f9fd3017c20b774a$export$3ccaa27d81dd8556 as PageReplacer, $d399250dfa491636$export$864d304a0bc46829 as defaultGridSpacing, $d399250dfa491636$export$c3834fa86c616831 as defaultColsAtSize, $d399250dfa491636$export$7bf543b9d9be2c22 as defaultCategoryTitlePlugin, $8db9a15135765c11$export$83d89fbfd8236492 as version };
+export { $56047603f9d212b6$export$6e5611bc7e57e477 as ShopifyResponsiveImg, $56047603f9d212b6$export$e6fffe67d4cdd848 as makeSizeAccessor, $801e8845d3fa3653$export$94026ee33dbabc26 as ImageContainer, $74777e8fe65b3dcb$export$b69d0d92862de18b as SentryErrorBoundary, $ad371564683947ab$export$6c6d7a51fa9aa15d as ExpandingDetails, $e18ab2868df26f40$export$f091cbac892643a4 as accessor_of_object_to_object_with_accessor_values, $4711a82d08d2021b$export$fecbb157621501bd as SelectedFilters, $f6b0500577e1b210$export$3f1a388cc0d8fed7 as FilterBody, $44aa24b1bb793549$export$b288c38ae3fddb56 as create_modified_filters, $63f1f8dbcd07d3b0$export$d21e32dfedac04be as SolidLayout, $d5f1e6a0f9117286$export$79b1565500412d9b as general_modal_abstraction, $9783d437ad61594c$export$3b621d86b1566b2 as CrossIcon, $ca6ab5f08bd28bca$export$8be2714ec7f169ee as GenericSliderArrowButton, $5c5732ef44f05b26$export$58e808b1db15d3bc as fetchDepictRecommendations, $f5f54892fd0c7d9f$export$de035477d6fef996 as QuickLinks, $f5f54892fd0c7d9f$export$5b7c3ce0ebe51f86 as BreadCrumbs, $fa332ea03168857c$export$b91cec6bdc6b32a1 as CategoryTitle, $702d7656a373973e$export$824dde41348efed1 as embedded_num_products, $96fd967c5b358ead$export$643598a327b5833e as get_categories, $f5f54892fd0c7d9f$export$f34314aa9505732e as DepictCategory, $f5f54892fd0c7d9f$export$e2bf8ce7779e827e as CategoryPage, $eb064bc3350276c1$export$ac6237957a15b3f0 as DepictSearch, $eb064bc3350276c1$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $eb064bc3350276c1$export$f2dc7e4e4aa11abb as SearchPage, $eb064bc3350276c1$export$316f6f283ae64765 as SearchField, $f3b7124b76123e44$export$aa14a9f43128f61f as ProductCardError, $169c13c0531d91d2$export$d86a33413558014e as open_modal_with_alignment, $5eaa00b951637e96$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $1308a7816c3d4f2d$export$b3ad617e9036868 as align_field, $a9c7ba6087881ac2$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $cc64aabf2c7a1f1a$export$1233ca167bf71f9a as styles_to_valid_css_string, $e56d241d0f33d459$export$fe334901e8bebd57 as disable_scrolling, $573c007c697a1831$export$d0596b5cae35ad4 as open_search_with_shift_slash, $284849364a6ef73a$export$e015ed2f2950f2e3 as DepictAPI, $00a5b94f0c11efbb$export$d9f36cf74e24d595 as media_query_to_accessor, $e60a76195ac6d408$export$689e204eadb33baf as setup_fast_leave, $a61a2051e15c8d7a$export$5196e4c01fa56fcb as show_toast, $60ec7a29849d81db$export$a71e92cfbb498adc as SolidFormatPrice, $37e8c97bb6876197$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $bc2337c9a05ecd18$export$acb3eaade4b23afd as BasePlaceholder, $ceafb6fb91c6f394$export$89c6019e4baa40b1 as TextPlaceholder, $3ab4aa97880fb88d$export$3f37af283f8fb843 as ImagePlaceholder, $f9fd3017c20b774a$export$3ccaa27d81dd8556 as PageReplacer, $d399250dfa491636$export$864d304a0bc46829 as defaultGridSpacing, $d399250dfa491636$export$c3834fa86c616831 as defaultColsAtSize, $d399250dfa491636$export$7bf543b9d9be2c22 as defaultCategoryTitlePlugin, $8db9a15135765c11$export$83d89fbfd8236492 as version };

package/server/latest/index.cjs

@@ -10,6 +10,9 @@ function $parcel$export(e, n, v, s) {
     configurable: true
   });
 }
+$parcel$export(module.exports, "ShopifyResponsiveImg", () => $19950faaac026e09$export$6e5611bc7e57e477);
+$parcel$export(module.exports, "makeSizeAccessor", () => $19950faaac026e09$export$e6fffe67d4cdd848);
+$parcel$export(module.exports, "ImageContainer", () => $93304d59a9747aa6$export$94026ee33dbabc26);
 $parcel$export(module.exports, "SentryErrorBoundary", () => $edafe91daf3091d7$export$b69d0d92862de18b);
 $parcel$export(module.exports, "ExpandingDetails", () => $a69e505a12a77874$export$6c6d7a51fa9aa15d);
 $parcel$export(module.exports, "accessor_of_object_to_object_with_accessor_values", () => $0785f4c9947d9b5f$export$f091cbac892643a4);
@@ -55,7 +58,51 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad997933$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "1.4.19";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "1.4.21";
+function $19950faaac026e09$export$e6fffe67d4cdd848(whatToWatch) {
+  const [size, setSize] = $5vyXB$solidjs.createSignal(0);
+  const resizeObserver = new ResizeObserver($5vyXB$depictaiutilishared.catchify(records => {
+    for (let j = 0; j < records.length; j++) {
+      const {
+        width: width
+      } = records[j].contentRect;
+      if (!width) continue;
+      // add extra 5% just in case. + safari is (in some cases) acting a bit questionable and needs a third extra to fill the set width
+      const new_size = width * 1.05 * ((0, $5vyXB$depictaiutilishared.is_safari) ? 4 / 3 : 1);
+      setSize(Math.round(new_size));
+    }
+  }));
+  resizeObserver.observe(whatToWatch);
+  $5vyXB$solidjs.onCleanup(() => resizeObserver.disconnect());
+  return size;
+}
+function $19950faaac026e09$export$6e5611bc7e57e477({
+  src: raw_src,
+  size: size,
+  resolutions = [64, 128, 256, 300, 400, 512, 768, 1024, 1280, 1536, 2048, 4096],
+  ...otherOptions
+}) {
+  const src = new URL(raw_src, location.origin);
+  const fallbackSrc = $19950faaac026e09$var$generateImageUrl(src, 400);
+  const srcset = $19950faaac026e09$var$make_srcset(src, resolutions);
+  return $5vyXB$solidjsweb.ssrElement("img", () => ({
+    ...otherOptions,
+    "src": fallbackSrc,
+    "srcset": srcset,
+    "sizes": size() + "px"
+  }), undefined, true);
+}
+function $19950faaac026e09$var$make_srcset(url, resolutions) {
+  return resolutions.map(width => `${$19950faaac026e09$var$generateImageUrl(url, width)} ${width}w`).join(", ");
+}
+function $19950faaac026e09$var$generateImageUrl(url, width) {
+  url.searchParams.set("width", width);
+  return url.href;
+}
+const $93304d59a9747aa6$var$_tmpl$ = ["<div", ' style="', '"></div>'];
+function $93304d59a9747aa6$export$94026ee33dbabc26(props) {
+  return $5vyXB$solidjsweb.ssr($93304d59a9747aa6$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrStyle(`position:relative;width:100%;padding-bottom:${1 / props.aspectRatio * 100}%`));
+}
 
 // Errors caused by SDK consuming code interfacing with the SDK, not the SDK itself or other Depict packages
 class $7dd1edb2ee2b43ad$export$e1d52e4f0c7557a1 extends Error {}

package/server/latest/index.d.ts

@@ -1,4 +1,4 @@
-import { JSX, Signal, Accessor, Setter } from "solid-js";
+import { Accessor, JSX, Signal, Setter } from "solid-js";
 import { report, Elem, Display, ColsAtSize, ModernDisplay, Node_Array } from "@depict-ai/utilishared/latest";
 import { SearchFilter, SearchRequest } from "@depict-ai/types/api/SearchRequest";
 import { SearchFilter as _SearchFilter1, ContentLink, SearchResponse } from "@depict-ai/types/api/SearchResponse";
@@ -7,7 +7,38 @@ import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/
 import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
 import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
-export const version = "1.4.19";
+export const version = "1.4.21";
+/**
+ * Returns an accessor that will update when the size of the provided element changes, to be used with ResponsiveImg
+ */
+export function makeSizeAccessor(whatToWatch: HTMLElement): Accessor<number>;
+/**
+ * Automatically generate a srcset from the shopify CDN for an image and set the sizes attribute to the provided accessor.
+ * This is used for our responsive images:
+ * 1. The image must have a container with a fixed size (or aspect ratio) that is independent of the image. When aspectRatio is configured on the depict-cards element as data attribute, we will wrap the image in a ImageContainer for this. If it's false, the user has to provide this container themselves.
+ * 2. We set a ResizeObserver on one of the currently visible images (see makeSizeAccessor)
+ * 3. We set the size attribute of all the visible images to the size of the container we're observing. The point of this is that the sizes attribute is used to determine which image to load, and usually it's set by the user and depends on the relationship between image size and viewport size. By using a ResizeObserver, we can make sure the sizes attribute is always set to the correct value without it having to be configured. This will make so the browser always loads the correct image size for a crisp image but still fast load.
+ */
+export function ShopifyResponsiveImg({
+  src: raw_src,
+  size,
+  resolutions,
+  ...otherOptions
+}: {
+  resolutions?: number[];
+  size: Accessor<number>;
+} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes"> & {
+  src: string;
+}): HTMLImageElement;
+/** @jsxImportSource solid-js */
+/**
+ * ImageContainer for using the padding hack to set the aspect ratio of an image
+ * Put this around an <img> or <ResponsiveImg> to give it a container that always has the same size as the image. This prevents CLS and enables ResponsiveImg to work (the browser to load the correct image size)
+ * (Not using the CSS aspect-ratio property yet here due to browser support)
+ */
+export function ImageContainer(props: {
+  aspectRatio: number;
+}): HTMLDivElement;
 declare class SDKError extends Error {}
 export class ProductCardError extends SDKError {
   constructor(templateError: Error);

package/server/latest/index.js

@@ -1,11 +1,55 @@
-import { add_to_version_info as $i7OB2$add_to_version_info, report as $i7OB2$report, observer as $i7OB2$observer, catchify as $i7OB2$catchify, useExpandingContainer as $i7OB2$useExpandingContainer, standard_price_format as $i7OB2$standard_price_format, Amazing_Slider as $i7OB2$Amazing_Slider, slider_snap_css as $i7OB2$slider_snap_css, slider_fading_factory as $i7OB2$slider_fading_factory, make_random_classname as $i7OB2$make_random_classname, dlog as $i7OB2$dlog, hex_to_rgb as $i7OB2$hex_to_rgb, relative_luminance_from_rgb as $i7OB2$relative_luminance_from_rgb, javascript_media_query as $i7OB2$javascript_media_query, n_col_styling_with_dist as $i7OB2$n_col_styling_with_dist, 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, fetch_recs as $i7OB2$fetch_recs, snakeCasifyObject as $i7OB2$snakeCasifyObject, instant_exec_on_suspect_history_change as $i7OB2$instant_exec_on_suspect_history_change, base_url as $i7OB2$base_url, get_depict_id as $i7OB2$get_depict_id, get_user_id as $i7OB2$get_user_id, get_session_id as $i7OB2$get_session_id, sort_obj as $i7OB2$sort_obj, fetch_retry as $i7OB2$fetch_retry, add_version_query_params as $i7OB2$add_version_query_params, dwarn as $i7OB2$dwarn, make_url_with_query_params as $i7OB2$make_url_with_query_params, edit_current_page_meta_tags as $i7OB2$edit_current_page_meta_tags, use_href_accessor as $i7OB2$use_href_accessor, base64_encode_unicode as $i7OB2$base64_encode_unicode, base64_decode_unicode as $i7OB2$base64_decode_unicode, queueMacroTask as $i7OB2$queueMacroTask, make_asyncIterable_exiter as $i7OB2$make_asyncIterable_exiter, href_change_ipns as $i7OB2$href_change_ipns, ContainedImage as $i7OB2$ContainedImage, deparallelize_no_drop as $i7OB2$deparallelize_no_drop, insert_surfaces as $i7OB2$insert_surfaces } from "@depict-ai/utilishared/latest";
-import { ssr as $i7OB2$ssr, ssrHydrationKey as $i7OB2$ssrHydrationKey, ssrClassList as $i7OB2$ssrClassList, escape as $i7OB2$escape, insert as $i7OB2$insert, createComponent as $i7OB2$createComponent, ssrAttribute as $i7OB2$ssrAttribute, ssrElement as $i7OB2$ssrElement, Dynamic as $i7OB2$Dynamic, ssrStyle as $i7OB2$ssrStyle, isServer as $i7OB2$isServer, mergeProps as $i7OB2$mergeProps } from "solid-js/web";
-import { ErrorBoundary as $i7OB2$ErrorBoundary, createSignal as $i7OB2$createSignal, createMemo as $i7OB2$createMemo, untrack as $i7OB2$untrack, createEffect as $i7OB2$createEffect, getOwner as $i7OB2$getOwner, Show as $i7OB2$Show, Index as $i7OB2$Index, onCleanup as $i7OB2$onCleanup, For as $i7OB2$For, createRenderEffect as $i7OB2$createRenderEffect, createComputed as $i7OB2$createComputed, on as $i7OB2$on, batch as $i7OB2$batch, createRoot as $i7OB2$createRoot, runWithOwner as $i7OB2$runWithOwner, createResource as $i7OB2$createResource, createReaction as $i7OB2$createReaction, Suspense as $i7OB2$Suspense } from "solid-js";
+import { add_to_version_info as $i7OB2$add_to_version_info, catchify as $i7OB2$catchify, is_safari as $i7OB2$is_safari, report as $i7OB2$report, observer as $i7OB2$observer, useExpandingContainer as $i7OB2$useExpandingContainer, standard_price_format as $i7OB2$standard_price_format, Amazing_Slider as $i7OB2$Amazing_Slider, slider_snap_css as $i7OB2$slider_snap_css, slider_fading_factory as $i7OB2$slider_fading_factory, make_random_classname as $i7OB2$make_random_classname, dlog as $i7OB2$dlog, hex_to_rgb as $i7OB2$hex_to_rgb, relative_luminance_from_rgb as $i7OB2$relative_luminance_from_rgb, javascript_media_query as $i7OB2$javascript_media_query, n_col_styling_with_dist as $i7OB2$n_col_styling_with_dist, 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, fetch_recs as $i7OB2$fetch_recs, snakeCasifyObject as $i7OB2$snakeCasifyObject, instant_exec_on_suspect_history_change as $i7OB2$instant_exec_on_suspect_history_change, base_url as $i7OB2$base_url, get_depict_id as $i7OB2$get_depict_id, get_user_id as $i7OB2$get_user_id, get_session_id as $i7OB2$get_session_id, sort_obj as $i7OB2$sort_obj, fetch_retry as $i7OB2$fetch_retry, add_version_query_params as $i7OB2$add_version_query_params, dwarn as $i7OB2$dwarn, make_url_with_query_params as $i7OB2$make_url_with_query_params, edit_current_page_meta_tags as $i7OB2$edit_current_page_meta_tags, use_href_accessor as $i7OB2$use_href_accessor, base64_encode_unicode as $i7OB2$base64_encode_unicode, base64_decode_unicode as $i7OB2$base64_decode_unicode, queueMacroTask as $i7OB2$queueMacroTask, make_asyncIterable_exiter as $i7OB2$make_asyncIterable_exiter, href_change_ipns as $i7OB2$href_change_ipns, ContainedImage as $i7OB2$ContainedImage, deparallelize_no_drop as $i7OB2$deparallelize_no_drop, insert_surfaces as $i7OB2$insert_surfaces } from "@depict-ai/utilishared/latest";
+import { ssrElement as $i7OB2$ssrElement, ssr as $i7OB2$ssr, ssrHydrationKey as $i7OB2$ssrHydrationKey, ssrStyle as $i7OB2$ssrStyle, ssrClassList as $i7OB2$ssrClassList, escape as $i7OB2$escape, insert as $i7OB2$insert, createComponent as $i7OB2$createComponent, ssrAttribute as $i7OB2$ssrAttribute, Dynamic as $i7OB2$Dynamic, isServer as $i7OB2$isServer, mergeProps as $i7OB2$mergeProps } from "solid-js/web";
+import { createSignal as $i7OB2$createSignal, onCleanup as $i7OB2$onCleanup, ErrorBoundary as $i7OB2$ErrorBoundary, createMemo as $i7OB2$createMemo, untrack as $i7OB2$untrack, createEffect as $i7OB2$createEffect, getOwner as $i7OB2$getOwner, Show as $i7OB2$Show, Index as $i7OB2$Index, For as $i7OB2$For, createRenderEffect as $i7OB2$createRenderEffect, createComputed as $i7OB2$createComputed, on as $i7OB2$on, batch as $i7OB2$batch, createRoot as $i7OB2$createRoot, runWithOwner as $i7OB2$runWithOwner, createResource as $i7OB2$createResource, createReaction as $i7OB2$createReaction, Suspense as $i7OB2$Suspense } from "solid-js";
 
 /*! 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 = "1.4.19";
+const $ec291e0010116877$export$83d89fbfd8236492 = "1.4.21";
+function $e8ffe11ed01df0fe$export$e6fffe67d4cdd848(whatToWatch) {
+  const [size, setSize] = $i7OB2$createSignal(0);
+  const resizeObserver = new ResizeObserver($i7OB2$catchify(records => {
+    for (let j = 0; j < records.length; j++) {
+      const {
+        width: width
+      } = records[j].contentRect;
+      if (!width) continue;
+      // add extra 5% just in case. + safari is (in some cases) acting a bit questionable and needs a third extra to fill the set width
+      const new_size = width * 1.05 * ((0, $i7OB2$is_safari) ? 4 / 3 : 1);
+      setSize(Math.round(new_size));
+    }
+  }));
+  resizeObserver.observe(whatToWatch);
+  $i7OB2$onCleanup(() => resizeObserver.disconnect());
+  return size;
+}
+function $e8ffe11ed01df0fe$export$6e5611bc7e57e477({
+  src: raw_src,
+  size: size,
+  resolutions = [64, 128, 256, 300, 400, 512, 768, 1024, 1280, 1536, 2048, 4096],
+  ...otherOptions
+}) {
+  const src = new URL(raw_src, location.origin);
+  const fallbackSrc = $e8ffe11ed01df0fe$var$generateImageUrl(src, 400);
+  const srcset = $e8ffe11ed01df0fe$var$make_srcset(src, resolutions);
+  return $i7OB2$ssrElement("img", () => ({
+    ...otherOptions,
+    "src": fallbackSrc,
+    "srcset": srcset,
+    "sizes": size() + "px"
+  }), undefined, true);
+}
+function $e8ffe11ed01df0fe$var$make_srcset(url, resolutions) {
+  return resolutions.map(width => `${$e8ffe11ed01df0fe$var$generateImageUrl(url, width)} ${width}w`).join(", ");
+}
+function $e8ffe11ed01df0fe$var$generateImageUrl(url, width) {
+  url.searchParams.set("width", width);
+  return url.href;
+}
+const $f18d425032111270$var$_tmpl$ = ["<div", ' style="', '"></div>'];
+function $f18d425032111270$export$94026ee33dbabc26(props) {
+  return $i7OB2$ssr($f18d425032111270$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$ssrStyle(`position:relative;width:100%;padding-bottom:${1 / props.aspectRatio * 100}%`));
+}
 
 // Errors caused by SDK consuming code interfacing with the SDK, not the SDK itself or other Depict packages
 class $4fd48cb976bf1789$export$e1d52e4f0c7557a1 extends Error {}
@@ -8407,4 +8451,4 @@ const $4690a06c8489dcd0$export$c3834fa86c616831 = [[4], [3, 1024], [2, 901]];
 const $4690a06c8489dcd0$export$864d304a0bc46829 = "2%";
 const $4690a06c8489dcd0$export$7bf543b9d9be2c22 = (0, $e4615ecd1849548f$export$b91cec6bdc6b32a1);
 $i7OB2$add_to_version_info("ui", (0, $ec291e0010116877$export$83d89fbfd8236492));
-export { $b7436a6d1fd64e3b$export$b69d0d92862de18b as SentryErrorBoundary, $6bb0a0c563dff4bb$export$6c6d7a51fa9aa15d as ExpandingDetails, $c16e74cfe125bb05$export$f091cbac892643a4 as accessor_of_object_to_object_with_accessor_values, $1adfe60f3a14a1d7$export$fecbb157621501bd as SelectedFilters, $fab07f52c9861732$export$3f1a388cc0d8fed7 as FilterBody, $5efb5894079b220e$export$b288c38ae3fddb56 as create_modified_filters, $c8d5ff4524619fcd$export$d21e32dfedac04be as SolidLayout, $194bd6b8e4c59830$export$79b1565500412d9b as general_modal_abstraction, $19976a74d273070d$export$3b621d86b1566b2 as CrossIcon, $fbbadcb080ad1d4a$export$8be2714ec7f169ee as GenericSliderArrowButton, $c58717f39bf51647$export$58e808b1db15d3bc as fetchDepictRecommendations, $961b5c64bef4662f$export$de035477d6fef996 as QuickLinks, $961b5c64bef4662f$export$5b7c3ce0ebe51f86 as BreadCrumbs, $e4615ecd1849548f$export$b91cec6bdc6b32a1 as CategoryTitle, $a6e23a834336fc19$export$824dde41348efed1 as embedded_num_products, $c9312089e8983364$export$643598a327b5833e as get_categories, $961b5c64bef4662f$export$f34314aa9505732e as DepictCategory, $961b5c64bef4662f$export$e2bf8ce7779e827e as CategoryPage, $806c97b931758897$export$ac6237957a15b3f0 as DepictSearch, $806c97b931758897$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $806c97b931758897$export$f2dc7e4e4aa11abb as SearchPage, $806c97b931758897$export$316f6f283ae64765 as SearchField, $4fd48cb976bf1789$export$aa14a9f43128f61f as ProductCardError, $6891c018a834cfdd$export$d86a33413558014e as open_modal_with_alignment, $bb15dfb548a7666e$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $b6d5529b253681aa$export$b3ad617e9036868 as align_field, $b5cccc8ee7d24677$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $926b1b5ba2239356$export$1233ca167bf71f9a as styles_to_valid_css_string, $aea1edf92433e81e$export$fe334901e8bebd57 as disable_scrolling, $6e8944558258054f$export$d0596b5cae35ad4 as open_search_with_shift_slash, $7fa23e2a0079eca4$export$e015ed2f2950f2e3 as DepictAPI, $dc9262ef6f786812$export$d9f36cf74e24d595 as media_query_to_accessor, $6936724b9e0b98d5$export$689e204eadb33baf as setup_fast_leave, $bf52d9f9eebd1938$export$5196e4c01fa56fcb as show_toast, $8c0f86cb3e266eeb$export$a71e92cfbb498adc as SolidFormatPrice, $4ca91518c9a35379$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $d20eff0aadc28983$export$acb3eaade4b23afd as BasePlaceholder, $d134eae24341b4a1$export$89c6019e4baa40b1 as TextPlaceholder, $7f60f09116a3fe61$export$3f37af283f8fb843 as ImagePlaceholder, $753e9b2889a47c89$export$3ccaa27d81dd8556 as PageReplacer, $4690a06c8489dcd0$export$864d304a0bc46829 as defaultGridSpacing, $4690a06c8489dcd0$export$c3834fa86c616831 as defaultColsAtSize, $4690a06c8489dcd0$export$7bf543b9d9be2c22 as defaultCategoryTitlePlugin, $ec291e0010116877$export$83d89fbfd8236492 as version };
+export { $e8ffe11ed01df0fe$export$6e5611bc7e57e477 as ShopifyResponsiveImg, $e8ffe11ed01df0fe$export$e6fffe67d4cdd848 as makeSizeAccessor, $f18d425032111270$export$94026ee33dbabc26 as ImageContainer, $b7436a6d1fd64e3b$export$b69d0d92862de18b as SentryErrorBoundary, $6bb0a0c563dff4bb$export$6c6d7a51fa9aa15d as ExpandingDetails, $c16e74cfe125bb05$export$f091cbac892643a4 as accessor_of_object_to_object_with_accessor_values, $1adfe60f3a14a1d7$export$fecbb157621501bd as SelectedFilters, $fab07f52c9861732$export$3f1a388cc0d8fed7 as FilterBody, $5efb5894079b220e$export$b288c38ae3fddb56 as create_modified_filters, $c8d5ff4524619fcd$export$d21e32dfedac04be as SolidLayout, $194bd6b8e4c59830$export$79b1565500412d9b as general_modal_abstraction, $19976a74d273070d$export$3b621d86b1566b2 as CrossIcon, $fbbadcb080ad1d4a$export$8be2714ec7f169ee as GenericSliderArrowButton, $c58717f39bf51647$export$58e808b1db15d3bc as fetchDepictRecommendations, $961b5c64bef4662f$export$de035477d6fef996 as QuickLinks, $961b5c64bef4662f$export$5b7c3ce0ebe51f86 as BreadCrumbs, $e4615ecd1849548f$export$b91cec6bdc6b32a1 as CategoryTitle, $a6e23a834336fc19$export$824dde41348efed1 as embedded_num_products, $c9312089e8983364$export$643598a327b5833e as get_categories, $961b5c64bef4662f$export$f34314aa9505732e as DepictCategory, $961b5c64bef4662f$export$e2bf8ce7779e827e as CategoryPage, $806c97b931758897$export$ac6237957a15b3f0 as DepictSearch, $806c97b931758897$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $806c97b931758897$export$f2dc7e4e4aa11abb as SearchPage, $806c97b931758897$export$316f6f283ae64765 as SearchField, $4fd48cb976bf1789$export$aa14a9f43128f61f as ProductCardError, $6891c018a834cfdd$export$d86a33413558014e as open_modal_with_alignment, $bb15dfb548a7666e$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $b6d5529b253681aa$export$b3ad617e9036868 as align_field, $b5cccc8ee7d24677$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $926b1b5ba2239356$export$1233ca167bf71f9a as styles_to_valid_css_string, $aea1edf92433e81e$export$fe334901e8bebd57 as disable_scrolling, $6e8944558258054f$export$d0596b5cae35ad4 as open_search_with_shift_slash, $7fa23e2a0079eca4$export$e015ed2f2950f2e3 as DepictAPI, $dc9262ef6f786812$export$d9f36cf74e24d595 as media_query_to_accessor, $6936724b9e0b98d5$export$689e204eadb33baf as setup_fast_leave, $bf52d9f9eebd1938$export$5196e4c01fa56fcb as show_toast, $8c0f86cb3e266eeb$export$a71e92cfbb498adc as SolidFormatPrice, $4ca91518c9a35379$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $d20eff0aadc28983$export$acb3eaade4b23afd as BasePlaceholder, $d134eae24341b4a1$export$89c6019e4baa40b1 as TextPlaceholder, $7f60f09116a3fe61$export$3f37af283f8fb843 as ImagePlaceholder, $753e9b2889a47c89$export$3ccaa27d81dd8556 as PageReplacer, $4690a06c8489dcd0$export$864d304a0bc46829 as defaultGridSpacing, $4690a06c8489dcd0$export$c3834fa86c616831 as defaultColsAtSize, $4690a06c8489dcd0$export$7bf543b9d9be2c22 as defaultCategoryTitlePlugin, $ec291e0010116877$export$83d89fbfd8236492 as version };