@depict-ai/ui 3.0.24 → 3.0.26

package/ES10/index.cjs

@@ -83,7 +83,7 @@ $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 = "3.0.24";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "3.0.26";
 const $9d19451330d04c3c$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0"fill=#0f0f0f>`);
 function $9d19451330d04c3c$export$8be2714ec7f169ee() {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -1984,6 +1984,7 @@ const $ce467edb5343cfcd$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<d
 function $ce467edb5343cfcd$export$94026ee33dbabc26(props) {
   return (() => {
     const _el$ = $52FdA$solidjsweb.getNextElement($ce467edb5343cfcd$var$_tmpl$);
+    $52FdA$solidjsweb.insert(_el$, () => props.children);
     $52FdA$solidjsweb.effect(_p$ => {
       const _v$ = "position:relative;width:100%;padding-bottom:".concat(1 / props.aspectRatio * 100, "%"),
         _v$2 = props.class;
@@ -2178,7 +2179,7 @@ function $28535bb7671c63d1$export$e4b984597b71e989(props) {
     $52FdA$depictaiutilishared.queueMacroTask(() => setCurrentImageSize(undefined)); // unset the size accessor next event loop iteration, so that all onCleanup's have time to run, since the effects run more aggressively and can create a size accessor with a cleaned up owner otherwise
   });
 
-  $52FdA$solidjsweb.insert(container, $52FdA$solidjsweb.createComponent((0, $858fdcf73148519f$export$6e5611bc7e57e477), {
+  $52FdA$solidjsweb.insert(container, $52FdA$solidjsweb.createComponent((0, $858fdcf73148519f$export$6e5611bc7e57e477), $52FdA$solidjsweb.mergeProps({
     style: "width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;",
     get size() {
       return $52FdA$solidjs.createMemo(() => {
@@ -2188,11 +2189,8 @@ function $28535bb7671c63d1$export$e4b984597b71e989(props) {
     },
     get src() {
       return props.src;
-    },
-    get alt() {
-      return props.alt;
     }
-  }));
+  }, () => props.imgProps)));
   return container;
 }
 

package/ES10/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "3.0.24";
+export const version = "3.0.26";
 export type SDKColsAtSize = [number, number?][];
 /**
  * Transform SDK ColsAtSize into valid Layout ColsAtSize
@@ -520,7 +520,6 @@ export function decode_sorting(search_params: URLSearchParams, sorting_query_par
  * @param sorting_query_param
  */
 export function strip_encoded_filter_and_sort(search_params: URLSearchParams, filter_query_param_prefix: string, sorting_query_param: string): void;
-/** @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)
@@ -529,6 +528,7 @@ export function strip_encoded_filter_and_sort(search_params: URLSearchParams, fi
 export function ImageContainer(props: {
   aspectRatio: number;
   class?: string;
+  children?: JSX.Element;
 }): HTMLDivElement;
 /**
  * Returns an accessor that will update when the size of the provided element changes, to be used with ResponsiveImg
@@ -559,12 +559,13 @@ export const shopifyContainedImageContextSymbol: unique symbol;
  * @property aspectRatio aspect ratio of the image
  * @property class extra class to add to the container
  * @property alt alt text for the image
+ * @property imgProps props to pass to ShopifyResponsiveImg to add to the <img> element
  */
 export function ShopifyContainedImage(props: {
   src: string;
   aspectRatio: number;
   class?: string;
-  alt?: string;
+  imgProps?: Omit<Parameters<typeof ShopifyResponsiveImg>[0], "size" | "src">;
 }): HTMLDivElement;
 /**
  * Returns accessor with the size of the provided element, including padding and border (I think)

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 = "3.0.24";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "3.0.26";
 const $ca6ab5f08bd28bca$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0"fill=#0f0f0f>`);
 function $ca6ab5f08bd28bca$export$8be2714ec7f169ee() {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -1911,6 +1911,7 @@ const $801e8845d3fa3653$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div>`);
 function $801e8845d3fa3653$export$94026ee33dbabc26(props) {
   return (() => {
     const _el$ = $8tj43$getNextElement($801e8845d3fa3653$var$_tmpl$);
+    $8tj43$insert(_el$, () => props.children);
     $8tj43$effect(_p$ => {
       const _v$ = "position:relative;width:100%;padding-bottom:".concat(1 / props.aspectRatio * 100, "%"),
         _v$2 = props.class;
@@ -2105,7 +2106,7 @@ function $4df489344a0f97c7$export$e4b984597b71e989(props) {
     $8tj43$queueMacroTask(() => setCurrentImageSize(undefined)); // unset the size accessor next event loop iteration, so that all onCleanup's have time to run, since the effects run more aggressively and can create a size accessor with a cleaned up owner otherwise
   });
 
-  $8tj43$insert(container, $8tj43$createComponent((0, $56047603f9d212b6$export$6e5611bc7e57e477), {
+  $8tj43$insert(container, $8tj43$createComponent((0, $56047603f9d212b6$export$6e5611bc7e57e477), $8tj43$mergeProps({
     style: "width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;",
     get size() {
       return $8tj43$createMemo(() => {
@@ -2115,11 +2116,8 @@ function $4df489344a0f97c7$export$e4b984597b71e989(props) {
     },
     get src() {
       return props.src;
-    },
-    get alt() {
-      return props.alt;
     }
-  }));
+  }, () => props.imgProps)));
   return container;
 }
 

package/latest/index.cjs

@@ -77,7 +77,7 @@ $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 = "3.0.24";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "3.0.26";
 const $0f313083912e447a$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0"fill=#0f0f0f>`);
 function $0f313083912e447a$export$8be2714ec7f169ee(props = {}) {
   return (() => {
@@ -1880,6 +1880,7 @@ const $93304d59a9747aa6$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<d
 function $93304d59a9747aa6$export$94026ee33dbabc26(props) {
   return (() => {
     const _el$ = $gVhhF$solidjsweb.getNextElement($93304d59a9747aa6$var$_tmpl$);
+    $gVhhF$solidjsweb.insert(_el$, () => props.children);
     $gVhhF$solidjsweb.effect(_p$ => {
       const _v$ = `position:relative;width:100%;padding-bottom:${1 / props.aspectRatio * 100}%`,
         _v$2 = props.class;
@@ -2071,18 +2072,15 @@ function $a33065cfed827fc0$export$e4b984597b71e989(props) {
     $gVhhF$depictaiutilishared.queueMacroTask(() => setCurrentImageSize(undefined)); // unset the size accessor next event loop iteration, so that all onCleanup's have time to run, since the effects run more aggressively and can create a size accessor with a cleaned up owner otherwise
   });
 
-  $gVhhF$solidjsweb.insert(container, $gVhhF$solidjsweb.createComponent((0, $19950faaac026e09$export$6e5611bc7e57e477), {
+  $gVhhF$solidjsweb.insert(container, $gVhhF$solidjsweb.createComponent((0, $19950faaac026e09$export$6e5611bc7e57e477), $gVhhF$solidjsweb.mergeProps({
     style: "width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;",
     get size() {
       return $gVhhF$solidjs.createMemo(() => currentImageSize()?.() || 0);
     },
     get src() {
       return props.src;
-    },
-    get alt() {
-      return props.alt;
     }
-  }));
+  }, () => props.imgProps)));
   return container;
 }
 

package/latest/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "3.0.24";
+export const version = "3.0.26";
 export type SDKColsAtSize = [number, number?][];
 /**
  * Transform SDK ColsAtSize into valid Layout ColsAtSize
@@ -520,7 +520,6 @@ export function decode_sorting(search_params: URLSearchParams, sorting_query_par
  * @param sorting_query_param
  */
 export function strip_encoded_filter_and_sort(search_params: URLSearchParams, filter_query_param_prefix: string, sorting_query_param: string): void;
-/** @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)
@@ -529,6 +528,7 @@ export function strip_encoded_filter_and_sort(search_params: URLSearchParams, fi
 export function ImageContainer(props: {
   aspectRatio: number;
   class?: string;
+  children?: JSX.Element;
 }): HTMLDivElement;
 /**
  * Returns an accessor that will update when the size of the provided element changes, to be used with ResponsiveImg
@@ -559,12 +559,13 @@ export const shopifyContainedImageContextSymbol: unique symbol;
  * @property aspectRatio aspect ratio of the image
  * @property class extra class to add to the container
  * @property alt alt text for the image
+ * @property imgProps props to pass to ShopifyResponsiveImg to add to the <img> element
  */
 export function ShopifyContainedImage(props: {
   src: string;
   aspectRatio: number;
   class?: string;
-  alt?: string;
+  imgProps?: Omit<Parameters<typeof ShopifyResponsiveImg>[0], "size" | "src">;
 }): HTMLDivElement;
 /**
  * Returns accessor with the size of the provided element, including padding and border (I think)

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 = "3.0.24";
+const $ec291e0010116877$export$83d89fbfd8236492 = "3.0.26";
 const $fbbadcb080ad1d4a$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0"fill=#0f0f0f>`);
 function $fbbadcb080ad1d4a$export$8be2714ec7f169ee(props = {}) {
   return (() => {
@@ -1810,6 +1810,7 @@ const $f18d425032111270$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div>`);
 function $f18d425032111270$export$94026ee33dbabc26(props) {
   return (() => {
     const _el$ = $9HbP8$getNextElement($f18d425032111270$var$_tmpl$);
+    $9HbP8$insert(_el$, () => props.children);
     $9HbP8$effect(_p$ => {
       const _v$ = `position:relative;width:100%;padding-bottom:${1 / props.aspectRatio * 100}%`,
         _v$2 = props.class;
@@ -2001,18 +2002,15 @@ function $660070e2a394b3c3$export$e4b984597b71e989(props) {
     $9HbP8$queueMacroTask(() => setCurrentImageSize(undefined)); // unset the size accessor next event loop iteration, so that all onCleanup's have time to run, since the effects run more aggressively and can create a size accessor with a cleaned up owner otherwise
   });
 
-  $9HbP8$insert(container, $9HbP8$createComponent((0, $e8ffe11ed01df0fe$export$6e5611bc7e57e477), {
+  $9HbP8$insert(container, $9HbP8$createComponent((0, $e8ffe11ed01df0fe$export$6e5611bc7e57e477), $9HbP8$mergeProps({
     style: "width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;",
     get size() {
       return $9HbP8$createMemo(() => currentImageSize()?.() || 0);
     },
     get src() {
       return props.src;
-    },
-    get alt() {
-      return props.alt;
     }
-  }));
+  }, () => props.imgProps)));
   return container;
 }
 

package/package.json

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

@@ -83,7 +83,7 @@ $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 = "3.0.24";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "3.0.26";
 const $9d19451330d04c3c$var$_tmpl$ = ["<svg", ' xmlns="http://www.w3.org/2000/svg"', ' viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0" fill="#0f0f0f"></path></svg>'];
 function $9d19451330d04c3c$export$8be2714ec7f169ee() {
   var _$escape2, _$escape3;
@@ -1741,9 +1741,9 @@ function $a68b73fd7ba0853f$export$43cd1e747fecd42e(_ref2) {
   if (was_url_object) return url_object;
   return url_object.href;
 }
-const $ce467edb5343cfcd$var$_tmpl$ = ["<div", ' style="', '"', "></div>"];
+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, "%")), $3hooq$solidjsweb.ssrAttribute("class", $3hooq$solidjsweb.escape(props.class, true), false));
+  return $3hooq$solidjsweb.ssr($ce467edb5343cfcd$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrStyle("position:relative;width:100%;padding-bottom:".concat(1 / props.aspectRatio * 100, "%")), $3hooq$solidjsweb.ssrAttribute("class", $3hooq$solidjsweb.escape(props.class, true), false), $3hooq$solidjsweb.escape(props.children));
 }
 function $858fdcf73148519f$export$e6fffe67d4cdd848(whatToWatch) {
   const [size, setSize] = $3hooq$solidjs.createSignal(0);
@@ -1926,7 +1926,7 @@ function $28535bb7671c63d1$export$e4b984597b71e989(props) {
     $3hooq$depictaiutilishared.queueMacroTask(() => setCurrentImageSize(undefined)); // unset the size accessor next event loop iteration, so that all onCleanup's have time to run, since the effects run more aggressively and can create a size accessor with a cleaned up owner otherwise
   });
 
-  $3hooq$solidjsweb.insert(container, $3hooq$solidjsweb.createComponent((0, $858fdcf73148519f$export$6e5611bc7e57e477), {
+  $3hooq$solidjsweb.insert(container, $3hooq$solidjsweb.createComponent((0, $858fdcf73148519f$export$6e5611bc7e57e477), $3hooq$solidjsweb.mergeProps({
     style: "width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;",
     get size() {
       return $3hooq$solidjs.createMemo(() => {
@@ -1936,11 +1936,8 @@ function $28535bb7671c63d1$export$e4b984597b71e989(props) {
     },
     get src() {
       return props.src;
-    },
-    get alt() {
-      return props.alt;
     }
-  }));
+  }, () => props.imgProps)));
   return container;
 }
 

package/server/ES10/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "3.0.24";
+export const version = "3.0.26";
 export type SDKColsAtSize = [number, number?][];
 /**
  * Transform SDK ColsAtSize into valid Layout ColsAtSize
@@ -520,7 +520,6 @@ export function decode_sorting(search_params: URLSearchParams, sorting_query_par
  * @param sorting_query_param
  */
 export function strip_encoded_filter_and_sort(search_params: URLSearchParams, filter_query_param_prefix: string, sorting_query_param: string): void;
-/** @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)
@@ -529,6 +528,7 @@ export function strip_encoded_filter_and_sort(search_params: URLSearchParams, fi
 export function ImageContainer(props: {
   aspectRatio: number;
   class?: string;
+  children?: JSX.Element;
 }): HTMLDivElement;
 /**
  * Returns an accessor that will update when the size of the provided element changes, to be used with ResponsiveImg
@@ -559,12 +559,13 @@ export const shopifyContainedImageContextSymbol: unique symbol;
  * @property aspectRatio aspect ratio of the image
  * @property class extra class to add to the container
  * @property alt alt text for the image
+ * @property imgProps props to pass to ShopifyResponsiveImg to add to the <img> element
  */
 export function ShopifyContainedImage(props: {
   src: string;
   aspectRatio: number;
   class?: string;
-  alt?: string;
+  imgProps?: Omit<Parameters<typeof ShopifyResponsiveImg>[0], "size" | "src">;
 }): HTMLDivElement;
 /**
  * Returns accessor with the size of the provided element, including padding and border (I think)

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 = "3.0.24";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "3.0.26";
 const $ca6ab5f08bd28bca$var$_tmpl$ = ["<svg", ' xmlns="http://www.w3.org/2000/svg"', ' viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0" fill="#0f0f0f"></path></svg>'];
 function $ca6ab5f08bd28bca$export$8be2714ec7f169ee() {
   var _$escape2, _$escape3;
@@ -1668,9 +1668,9 @@ function $2855bffe06ef7a03$export$43cd1e747fecd42e(_ref2) {
   if (was_url_object) return url_object;
   return url_object.href;
 }
-const $801e8845d3fa3653$var$_tmpl$ = ["<div", ' style="', '"', "></div>"];
+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, "%")), $b8hua$ssrAttribute("class", $b8hua$escape(props.class, true), false));
+  return $b8hua$ssr($801e8845d3fa3653$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$ssrStyle("position:relative;width:100%;padding-bottom:".concat(1 / props.aspectRatio * 100, "%")), $b8hua$ssrAttribute("class", $b8hua$escape(props.class, true), false), $b8hua$escape(props.children));
 }
 function $56047603f9d212b6$export$e6fffe67d4cdd848(whatToWatch) {
   const [size, setSize] = $b8hua$createSignal(0);
@@ -1853,7 +1853,7 @@ function $4df489344a0f97c7$export$e4b984597b71e989(props) {
     $b8hua$queueMacroTask(() => setCurrentImageSize(undefined)); // unset the size accessor next event loop iteration, so that all onCleanup's have time to run, since the effects run more aggressively and can create a size accessor with a cleaned up owner otherwise
   });
 
-  $b8hua$insert(container, $b8hua$createComponent((0, $56047603f9d212b6$export$6e5611bc7e57e477), {
+  $b8hua$insert(container, $b8hua$createComponent((0, $56047603f9d212b6$export$6e5611bc7e57e477), $b8hua$mergeProps({
     style: "width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;",
     get size() {
       return $b8hua$createMemo(() => {
@@ -1863,11 +1863,8 @@ function $4df489344a0f97c7$export$e4b984597b71e989(props) {
     },
     get src() {
       return props.src;
-    },
-    get alt() {
-      return props.alt;
     }
-  }));
+  }, () => props.imgProps)));
   return container;
 }
 

package/server/latest/index.cjs

@@ -77,7 +77,7 @@ $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 = "3.0.24";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "3.0.26";
 const $0f313083912e447a$var$_tmpl$ = ["<svg", ' xmlns="http://www.w3.org/2000/svg"', ' viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0" fill="#0f0f0f"></path></svg>'];
 function $0f313083912e447a$export$8be2714ec7f169ee(props = {}) {
   return $5vyXB$solidjsweb.ssr($0f313083912e447a$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrAttribute("width", $5vyXB$solidjsweb.escape(props.width_, true) ?? 14, false) + $5vyXB$solidjsweb.ssrAttribute("height", $5vyXB$solidjsweb.escape(props.height_, true) ?? 26, false));
@@ -1652,9 +1652,9 @@ function $1ab22f2cd39b3061$export$43cd1e747fecd42e({
   if (was_url_object) return url_object;
   return url_object.href;
 }
-const $93304d59a9747aa6$var$_tmpl$ = ["<div", ' style="', '"', "></div>"];
+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}%`), $5vyXB$solidjsweb.ssrAttribute("class", $5vyXB$solidjsweb.escape(props.class, true), false));
+  return $5vyXB$solidjsweb.ssr($93304d59a9747aa6$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.ssrStyle(`position:relative;width:100%;padding-bottom:${1 / props.aspectRatio * 100}%`), $5vyXB$solidjsweb.ssrAttribute("class", $5vyXB$solidjsweb.escape(props.class, true), false), $5vyXB$solidjsweb.escape(props.children));
 }
 function $19950faaac026e09$export$e6fffe67d4cdd848(whatToWatch) {
   const [size, setSize] = $5vyXB$solidjs.createSignal(0);
@@ -1834,18 +1834,15 @@ function $a33065cfed827fc0$export$e4b984597b71e989(props) {
     $5vyXB$depictaiutilishared.queueMacroTask(() => setCurrentImageSize(undefined)); // unset the size accessor next event loop iteration, so that all onCleanup's have time to run, since the effects run more aggressively and can create a size accessor with a cleaned up owner otherwise
   });
 
-  $5vyXB$solidjsweb.insert(container, $5vyXB$solidjsweb.createComponent((0, $19950faaac026e09$export$6e5611bc7e57e477), {
+  $5vyXB$solidjsweb.insert(container, $5vyXB$solidjsweb.createComponent((0, $19950faaac026e09$export$6e5611bc7e57e477), $5vyXB$solidjsweb.mergeProps({
     style: "width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;",
     get size() {
       return $5vyXB$solidjs.createMemo(() => currentImageSize()?.() || 0);
     },
     get src() {
       return props.src;
-    },
-    get alt() {
-      return props.alt;
     }
-  }));
+  }, () => props.imgProps)));
   return container;
 }
 

package/server/latest/index.d.ts

@@ -10,7 +10,7 @@ import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequ
 import { GetListingRequest } from "@depict-ai/types/api/GetListingRequest";
 import { BaseSearchRequestV3 } from "@depict-ai/types/api/BaseSearchRequestV3";
 import { SearchFilter as _SearchFilter2 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "3.0.24";
+export const version = "3.0.26";
 export type SDKColsAtSize = [number, number?][];
 /**
  * Transform SDK ColsAtSize into valid Layout ColsAtSize
@@ -520,7 +520,6 @@ export function decode_sorting(search_params: URLSearchParams, sorting_query_par
  * @param sorting_query_param
  */
 export function strip_encoded_filter_and_sort(search_params: URLSearchParams, filter_query_param_prefix: string, sorting_query_param: string): void;
-/** @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)
@@ -529,6 +528,7 @@ export function strip_encoded_filter_and_sort(search_params: URLSearchParams, fi
 export function ImageContainer(props: {
   aspectRatio: number;
   class?: string;
+  children?: JSX.Element;
 }): HTMLDivElement;
 /**
  * Returns an accessor that will update when the size of the provided element changes, to be used with ResponsiveImg
@@ -559,12 +559,13 @@ export const shopifyContainedImageContextSymbol: unique symbol;
  * @property aspectRatio aspect ratio of the image
  * @property class extra class to add to the container
  * @property alt alt text for the image
+ * @property imgProps props to pass to ShopifyResponsiveImg to add to the <img> element
  */
 export function ShopifyContainedImage(props: {
   src: string;
   aspectRatio: number;
   class?: string;
-  alt?: string;
+  imgProps?: Omit<Parameters<typeof ShopifyResponsiveImg>[0], "size" | "src">;
 }): HTMLDivElement;
 /**
  * Returns accessor with the size of the provided element, including padding and border (I think)

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 = "3.0.24";
+const $ec291e0010116877$export$83d89fbfd8236492 = "3.0.26";
 const $fbbadcb080ad1d4a$var$_tmpl$ = ["<svg", ' xmlns="http://www.w3.org/2000/svg"', ' viewBox="0 0 14 26"><path d="M2 24.656c-.078 0-.156-.016-.234-.047s-.133-.066-.187-.129c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422l10.371-10.371L1.578 2.883c-.117-.117-.176-.258-.176-.422s.059-.305.176-.422.258-.176.422-.176.305.059.422.176l10.805 10.793a.59.59 0 0 1 .176.434c0 .172-.059.305-.176.422L2.422 24.48a.42.42 0 0 1-.199.129.54.54 0 0 1-.223.047zm0 0" fill="#0f0f0f"></path></svg>'];
 function $fbbadcb080ad1d4a$export$8be2714ec7f169ee(props = {}) {
   return $i7OB2$ssr($fbbadcb080ad1d4a$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$ssrAttribute("width", $i7OB2$escape(props.width_, true) ?? 14, false) + $i7OB2$ssrAttribute("height", $i7OB2$escape(props.height_, true) ?? 26, false));
@@ -1582,9 +1582,9 @@ function $4147651646da990a$export$43cd1e747fecd42e({
   if (was_url_object) return url_object;
   return url_object.href;
 }
-const $f18d425032111270$var$_tmpl$ = ["<div", ' style="', '"', "></div>"];
+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}%`), $i7OB2$ssrAttribute("class", $i7OB2$escape(props.class, true), false));
+  return $i7OB2$ssr($f18d425032111270$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$ssrStyle(`position:relative;width:100%;padding-bottom:${1 / props.aspectRatio * 100}%`), $i7OB2$ssrAttribute("class", $i7OB2$escape(props.class, true), false), $i7OB2$escape(props.children));
 }
 function $e8ffe11ed01df0fe$export$e6fffe67d4cdd848(whatToWatch) {
   const [size, setSize] = $i7OB2$createSignal(0);
@@ -1764,18 +1764,15 @@ function $660070e2a394b3c3$export$e4b984597b71e989(props) {
     $i7OB2$queueMacroTask(() => setCurrentImageSize(undefined)); // unset the size accessor next event loop iteration, so that all onCleanup's have time to run, since the effects run more aggressively and can create a size accessor with a cleaned up owner otherwise
   });
 
-  $i7OB2$insert(container, $i7OB2$createComponent((0, $e8ffe11ed01df0fe$export$6e5611bc7e57e477), {
+  $i7OB2$insert(container, $i7OB2$createComponent((0, $e8ffe11ed01df0fe$export$6e5611bc7e57e477), $i7OB2$mergeProps({
     style: "width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;",
     get size() {
       return $i7OB2$createMemo(() => currentImageSize()?.() || 0);
     },
     get src() {
       return props.src;
-    },
-    get alt() {
-      return props.alt;
     }
-  }));
+  }, () => props.imgProps)));
   return container;
 }