@depict-ai/ui 2.0.11 → 2.0.13

package/ES10/index.cjs

@@ -67,7 +67,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 = "2.0.11";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "2.0.13";
 
 /** @jsxImportSource solid-js */
 
@@ -81,11 +81,12 @@ function $13671aa5e984acd9$export$9f191182275e9ef(what_to_watch) {
     }
   }));
   // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
+  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
   const disconnect = (0, $52FdA$depictaiutilishared.observer).onexists(what_to_watch, _ref => {
     let {
       element: element
     } = _ref;
-    return resizeObserver.observe(element);
+    return requestAnimationFrame($52FdA$depictaiutilishared.catchify(() => resizeObserver.observe(element)));
   });
   $52FdA$solidjs.onCleanup(() => {
     resizeObserver.disconnect();
@@ -133,7 +134,7 @@ const $5401a6698b0c0658$export$6daf8749b65a1b77 = cols_at_size => {
   return $5401a6698b0c0658$var$transform_elements(sorted_cols_at_size);
 };
 function $8edd3cf30d1fd8b4$export$a2cc176055f8f08() {
-  const text = "Please try setting `columnsAtSize` on the `SearchPage`/`CategoryPage` components to change the grid before setting it with CSS. If you do with CSS, set `ColsAtSize` to an empty array to ensure no declarations created by the SDK leak through.";
+  const text = "Please try setting `columnsAtSize` on the `SearchPage`/`CategoryPage` components to change the grid before setting it with CSS. If you do with CSS, set `columnsAtSize` to an empty array to ensure no declarations created by the SDK leak through.";
   return (0, $52FdA$solidjsweb.isServer) ? {
     t: "<!-- ".concat(text, " -->")
   } : document.createComment(text);
@@ -854,17 +855,27 @@ function $858fdcf73148519f$export$e6fffe67d4cdd848(whatToWatch) {
       setSize(Math.round(new_size));
     }
   }));
-  resizeObserver.observe(whatToWatch);
-  $52FdA$solidjs.onCleanup(() => resizeObserver.disconnect());
+  // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
+  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
+  const disconnect = (0, $52FdA$depictaiutilishared.observer).onexists(whatToWatch, _ref => {
+    let {
+      element: element
+    } = _ref;
+    return requestAnimationFrame($52FdA$depictaiutilishared.catchify(() => resizeObserver.observe(element)));
+  });
+  $52FdA$solidjs.onCleanup(() => {
+    resizeObserver.disconnect();
+    disconnect();
+  });
   return size;
 }
-function $858fdcf73148519f$export$6e5611bc7e57e477(_ref) {
+function $858fdcf73148519f$export$6e5611bc7e57e477(_ref2) {
   let {
     src: raw_src,
     size: size,
     resolutions = [64, 128, 256, 300, 400, 512, 768, 1024, 1280, 1536, 2048, 4096],
     ...otherOptions
-  } = _ref;
+  } = _ref2;
   const src = new URL(raw_src, location.origin);
   const fallbackSrc = $858fdcf73148519f$var$generateImageUrl(src, 400);
   const srcset = $858fdcf73148519f$var$make_srcset(src, resolutions);

package/ES10/index.d.ts

@@ -7,7 +7,7 @@ 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 = "2.0.11";
+export const version = "2.0.13";
 /**
  * Returns accessor with the size of the provided element, including padding and border (I think)
  */

package/ES10/index.js

@@ -8,7 +8,7 @@ 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 = "2.0.11";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "2.0.13";
 
 /** @jsxImportSource solid-js */
 
@@ -22,11 +22,12 @@ function $0dc044cffe1e825b$export$9f191182275e9ef(what_to_watch) {
     }
   }));
   // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
+  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
   const disconnect = (0, $8tj43$observer).onexists(what_to_watch, _ref => {
     let {
       element: element
     } = _ref;
-    return resizeObserver.observe(element);
+    return requestAnimationFrame($8tj43$catchify(() => resizeObserver.observe(element)));
   });
   $8tj43$onCleanup(() => {
     resizeObserver.disconnect();
@@ -74,7 +75,7 @@ const $a9c7ba6087881ac2$export$6daf8749b65a1b77 = cols_at_size => {
   return $a9c7ba6087881ac2$var$transform_elements(sorted_cols_at_size);
 };
 function $ca55612a53dbbdd2$export$a2cc176055f8f08() {
-  const text = "Please try setting `columnsAtSize` on the `SearchPage`/`CategoryPage` components to change the grid before setting it with CSS. If you do with CSS, set `ColsAtSize` to an empty array to ensure no declarations created by the SDK leak through.";
+  const text = "Please try setting `columnsAtSize` on the `SearchPage`/`CategoryPage` components to change the grid before setting it with CSS. If you do with CSS, set `columnsAtSize` to an empty array to ensure no declarations created by the SDK leak through.";
   return (0, $8tj43$isServer) ? {
     t: "<!-- ".concat(text, " -->")
   } : document.createComment(text);
@@ -795,17 +796,27 @@ function $56047603f9d212b6$export$e6fffe67d4cdd848(whatToWatch) {
       setSize(Math.round(new_size));
     }
   }));
-  resizeObserver.observe(whatToWatch);
-  $8tj43$onCleanup(() => resizeObserver.disconnect());
+  // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
+  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
+  const disconnect = (0, $8tj43$observer).onexists(whatToWatch, _ref => {
+    let {
+      element: element
+    } = _ref;
+    return requestAnimationFrame($8tj43$catchify(() => resizeObserver.observe(element)));
+  });
+  $8tj43$onCleanup(() => {
+    resizeObserver.disconnect();
+    disconnect();
+  });
   return size;
 }
-function $56047603f9d212b6$export$6e5611bc7e57e477(_ref) {
+function $56047603f9d212b6$export$6e5611bc7e57e477(_ref2) {
   let {
     src: raw_src,
     size: size,
     resolutions = [64, 128, 256, 300, 400, 512, 768, 1024, 1280, 1536, 2048, 4096],
     ...otherOptions
-  } = _ref;
+  } = _ref2;
   const src = new URL(raw_src, location.origin);
   const fallbackSrc = $56047603f9d212b6$var$generateImageUrl(src, 400);
   const srcset = $56047603f9d212b6$var$make_srcset(src, resolutions);

package/latest/index.cjs

@@ -61,7 +61,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 = "2.0.11";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "2.0.13";
 
 /** @jsxImportSource solid-js */
 
@@ -74,9 +74,10 @@ function $e5f442fb78c98741$export$9f191182275e9ef(what_to_watch) {
     }
   }));
   // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
+  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
   const disconnect = (0, $gVhhF$depictaiutilishared.observer).onexists(what_to_watch, ({
     element: element
-  }) => resizeObserver.observe(element));
+  }) => requestAnimationFrame($gVhhF$depictaiutilishared.catchify(() => resizeObserver.observe(element))));
   $gVhhF$solidjs.onCleanup(() => {
     resizeObserver.disconnect();
     disconnect();
@@ -119,7 +120,7 @@ const $4e04be41243c3d80$export$6daf8749b65a1b77 = cols_at_size => {
   return $4e04be41243c3d80$var$transform_elements(sorted_cols_at_size);
 };
 function $fc23d7668ae0011d$export$a2cc176055f8f08() {
-  const text = "Please try setting `columnsAtSize` on the `SearchPage`/`CategoryPage` components to change the grid before setting it with CSS. If you do with CSS, set `ColsAtSize` to an empty array to ensure no declarations created by the SDK leak through.";
+  const text = "Please try setting `columnsAtSize` on the `SearchPage`/`CategoryPage` components to change the grid before setting it with CSS. If you do with CSS, set `columnsAtSize` to an empty array to ensure no declarations created by the SDK leak through.";
   return (0, $gVhhF$solidjsweb.isServer) ? {
     t: `<!-- ${text} -->`
   } : document.createComment(text);
@@ -800,8 +801,15 @@ function $19950faaac026e09$export$e6fffe67d4cdd848(whatToWatch) {
       setSize(Math.round(new_size));
     }
   }));
-  resizeObserver.observe(whatToWatch);
-  $gVhhF$solidjs.onCleanup(() => resizeObserver.disconnect());
+  // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
+  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
+  const disconnect = (0, $gVhhF$depictaiutilishared.observer).onexists(whatToWatch, ({
+    element: element
+  }) => requestAnimationFrame($gVhhF$depictaiutilishared.catchify(() => resizeObserver.observe(element))));
+  $gVhhF$solidjs.onCleanup(() => {
+    resizeObserver.disconnect();
+    disconnect();
+  });
   return size;
 }
 function $19950faaac026e09$export$6e5611bc7e57e477({

package/latest/index.d.ts

@@ -7,7 +7,7 @@ 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 = "2.0.11";
+export const version = "2.0.13";
 /**
  * Returns accessor with the size of the provided element, including padding and border (I think)
  */

package/latest/index.js

@@ -5,7 +5,7 @@ import { template as $9HbP8$template, getNextElement as $9HbP8$getNextElement, i
 /*! 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 = "2.0.11";
+const $ec291e0010116877$export$83d89fbfd8236492 = "2.0.13";
 
 /** @jsxImportSource solid-js */
 
@@ -18,9 +18,10 @@ function $0fdb37d8ddabef25$export$9f191182275e9ef(what_to_watch) {
     }
   }));
   // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
+  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
   const disconnect = (0, $9HbP8$observer).onexists(what_to_watch, ({
     element: element
-  }) => resizeObserver.observe(element));
+  }) => requestAnimationFrame($9HbP8$catchify(() => resizeObserver.observe(element))));
   $9HbP8$onCleanup(() => {
     resizeObserver.disconnect();
     disconnect();
@@ -63,7 +64,7 @@ const $b5cccc8ee7d24677$export$6daf8749b65a1b77 = cols_at_size => {
   return $b5cccc8ee7d24677$var$transform_elements(sorted_cols_at_size);
 };
 function $a458486f22b22f63$export$a2cc176055f8f08() {
-  const text = "Please try setting `columnsAtSize` on the `SearchPage`/`CategoryPage` components to change the grid before setting it with CSS. If you do with CSS, set `ColsAtSize` to an empty array to ensure no declarations created by the SDK leak through.";
+  const text = "Please try setting `columnsAtSize` on the `SearchPage`/`CategoryPage` components to change the grid before setting it with CSS. If you do with CSS, set `columnsAtSize` to an empty array to ensure no declarations created by the SDK leak through.";
   return (0, $9HbP8$isServer) ? {
     t: `<!-- ${text} -->`
   } : document.createComment(text);
@@ -744,8 +745,15 @@ function $e8ffe11ed01df0fe$export$e6fffe67d4cdd848(whatToWatch) {
       setSize(Math.round(new_size));
     }
   }));
-  resizeObserver.observe(whatToWatch);
-  $9HbP8$onCleanup(() => resizeObserver.disconnect());
+  // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
+  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
+  const disconnect = (0, $9HbP8$observer).onexists(whatToWatch, ({
+    element: element
+  }) => requestAnimationFrame($9HbP8$catchify(() => resizeObserver.observe(element))));
+  $9HbP8$onCleanup(() => {
+    resizeObserver.disconnect();
+    disconnect();
+  });
   return size;
 }
 function $e8ffe11ed01df0fe$export$6e5611bc7e57e477({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "2.0.11",
+  "version": "2.0.13",
   "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",
@@ -238,7 +238,7 @@
     "@babel/runtime-corejs3": "^7.22.6",
     "@depict-ai/plp-styling": "^1.2.5",
     "@depict-ai/types": "^1.0.39",
-    "@depict-ai/utilishared": "^1.0.43",
+    "@depict-ai/utilishared": "^1.0.44",
     "solid-js": "^1.7.3"
   },
   "type": "module",

package/server/ES10/index.cjs

@@ -67,7 +67,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 = "2.0.11";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "2.0.13";
 
 /** @jsxImportSource solid-js */
 
@@ -81,11 +81,12 @@ function $13671aa5e984acd9$export$9f191182275e9ef(what_to_watch) {
     }
   }));
   // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
+  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
   const disconnect = (0, $3hooq$depictaiutilishared.observer).onexists(what_to_watch, _ref => {
     let {
       element: element
     } = _ref;
-    return resizeObserver.observe(element);
+    return requestAnimationFrame($3hooq$depictaiutilishared.catchify(() => resizeObserver.observe(element)));
   });
   $3hooq$solidjs.onCleanup(() => {
     resizeObserver.disconnect();
@@ -133,7 +134,7 @@ const $5401a6698b0c0658$export$6daf8749b65a1b77 = cols_at_size => {
   return $5401a6698b0c0658$var$transform_elements(sorted_cols_at_size);
 };
 function $8edd3cf30d1fd8b4$export$a2cc176055f8f08() {
-  const text = "Please try setting `columnsAtSize` on the `SearchPage`/`CategoryPage` components to change the grid before setting it with CSS. If you do with CSS, set `ColsAtSize` to an empty array to ensure no declarations created by the SDK leak through.";
+  const text = "Please try setting `columnsAtSize` on the `SearchPage`/`CategoryPage` components to change the grid before setting it with CSS. If you do with CSS, set `columnsAtSize` to an empty array to ensure no declarations created by the SDK leak through.";
   return (0, $3hooq$solidjsweb.isServer) ? {
     t: "<!-- ".concat(text, " -->")
   } : document.createComment(text);
@@ -773,17 +774,27 @@ function $858fdcf73148519f$export$e6fffe67d4cdd848(whatToWatch) {
       setSize(Math.round(new_size));
     }
   }));
-  resizeObserver.observe(whatToWatch);
-  $3hooq$solidjs.onCleanup(() => resizeObserver.disconnect());
+  // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
+  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
+  const disconnect = (0, $3hooq$depictaiutilishared.observer).onexists(whatToWatch, _ref => {
+    let {
+      element: element
+    } = _ref;
+    return requestAnimationFrame($3hooq$depictaiutilishared.catchify(() => resizeObserver.observe(element)));
+  });
+  $3hooq$solidjs.onCleanup(() => {
+    resizeObserver.disconnect();
+    disconnect();
+  });
   return size;
 }
-function $858fdcf73148519f$export$6e5611bc7e57e477(_ref) {
+function $858fdcf73148519f$export$6e5611bc7e57e477(_ref2) {
   let {
     src: raw_src,
     size: size,
     resolutions = [64, 128, 256, 300, 400, 512, 768, 1024, 1280, 1536, 2048, 4096],
     ...otherOptions
-  } = _ref;
+  } = _ref2;
   const src = new URL(raw_src, location.origin);
   const fallbackSrc = $858fdcf73148519f$var$generateImageUrl(src, 400);
   const srcset = $858fdcf73148519f$var$make_srcset(src, resolutions);

package/server/ES10/index.d.ts

@@ -7,7 +7,7 @@ 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 = "2.0.11";
+export const version = "2.0.13";
 /**
  * Returns accessor with the size of the provided element, including padding and border (I think)
  */

package/server/ES10/index.js

@@ -8,7 +8,7 @@ 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 = "2.0.11";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "2.0.13";
 
 /** @jsxImportSource solid-js */
 
@@ -22,11 +22,12 @@ function $0dc044cffe1e825b$export$9f191182275e9ef(what_to_watch) {
     }
   }));
   // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
+  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
   const disconnect = (0, $b8hua$observer).onexists(what_to_watch, _ref => {
     let {
       element: element
     } = _ref;
-    return resizeObserver.observe(element);
+    return requestAnimationFrame($b8hua$catchify(() => resizeObserver.observe(element)));
   });
   $b8hua$onCleanup(() => {
     resizeObserver.disconnect();
@@ -74,7 +75,7 @@ const $a9c7ba6087881ac2$export$6daf8749b65a1b77 = cols_at_size => {
   return $a9c7ba6087881ac2$var$transform_elements(sorted_cols_at_size);
 };
 function $ca55612a53dbbdd2$export$a2cc176055f8f08() {
-  const text = "Please try setting `columnsAtSize` on the `SearchPage`/`CategoryPage` components to change the grid before setting it with CSS. If you do with CSS, set `ColsAtSize` to an empty array to ensure no declarations created by the SDK leak through.";
+  const text = "Please try setting `columnsAtSize` on the `SearchPage`/`CategoryPage` components to change the grid before setting it with CSS. If you do with CSS, set `columnsAtSize` to an empty array to ensure no declarations created by the SDK leak through.";
   return (0, $b8hua$isServer) ? {
     t: "<!-- ".concat(text, " -->")
   } : document.createComment(text);
@@ -714,17 +715,27 @@ function $56047603f9d212b6$export$e6fffe67d4cdd848(whatToWatch) {
       setSize(Math.round(new_size));
     }
   }));
-  resizeObserver.observe(whatToWatch);
-  $b8hua$onCleanup(() => resizeObserver.disconnect());
+  // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
+  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
+  const disconnect = (0, $b8hua$observer).onexists(whatToWatch, _ref => {
+    let {
+      element: element
+    } = _ref;
+    return requestAnimationFrame($b8hua$catchify(() => resizeObserver.observe(element)));
+  });
+  $b8hua$onCleanup(() => {
+    resizeObserver.disconnect();
+    disconnect();
+  });
   return size;
 }
-function $56047603f9d212b6$export$6e5611bc7e57e477(_ref) {
+function $56047603f9d212b6$export$6e5611bc7e57e477(_ref2) {
   let {
     src: raw_src,
     size: size,
     resolutions = [64, 128, 256, 300, 400, 512, 768, 1024, 1280, 1536, 2048, 4096],
     ...otherOptions
-  } = _ref;
+  } = _ref2;
   const src = new URL(raw_src, location.origin);
   const fallbackSrc = $56047603f9d212b6$var$generateImageUrl(src, 400);
   const srcset = $56047603f9d212b6$var$make_srcset(src, resolutions);

package/server/latest/index.cjs

@@ -61,7 +61,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 = "2.0.11";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "2.0.13";
 
 /** @jsxImportSource solid-js */
 
@@ -74,9 +74,10 @@ function $e5f442fb78c98741$export$9f191182275e9ef(what_to_watch) {
     }
   }));
   // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
+  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
   const disconnect = (0, $5vyXB$depictaiutilishared.observer).onexists(what_to_watch, ({
     element: element
-  }) => resizeObserver.observe(element));
+  }) => requestAnimationFrame($5vyXB$depictaiutilishared.catchify(() => resizeObserver.observe(element))));
   $5vyXB$solidjs.onCleanup(() => {
     resizeObserver.disconnect();
     disconnect();
@@ -119,7 +120,7 @@ const $4e04be41243c3d80$export$6daf8749b65a1b77 = cols_at_size => {
   return $4e04be41243c3d80$var$transform_elements(sorted_cols_at_size);
 };
 function $fc23d7668ae0011d$export$a2cc176055f8f08() {
-  const text = "Please try setting `columnsAtSize` on the `SearchPage`/`CategoryPage` components to change the grid before setting it with CSS. If you do with CSS, set `ColsAtSize` to an empty array to ensure no declarations created by the SDK leak through.";
+  const text = "Please try setting `columnsAtSize` on the `SearchPage`/`CategoryPage` components to change the grid before setting it with CSS. If you do with CSS, set `columnsAtSize` to an empty array to ensure no declarations created by the SDK leak through.";
   return (0, $5vyXB$solidjsweb.isServer) ? {
     t: `<!-- ${text} -->`
   } : document.createComment(text);
@@ -728,8 +729,15 @@ function $19950faaac026e09$export$e6fffe67d4cdd848(whatToWatch) {
       setSize(Math.round(new_size));
     }
   }));
-  resizeObserver.observe(whatToWatch);
-  $5vyXB$solidjs.onCleanup(() => resizeObserver.disconnect());
+  // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
+  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
+  const disconnect = (0, $5vyXB$depictaiutilishared.observer).onexists(whatToWatch, ({
+    element: element
+  }) => requestAnimationFrame($5vyXB$depictaiutilishared.catchify(() => resizeObserver.observe(element))));
+  $5vyXB$solidjs.onCleanup(() => {
+    resizeObserver.disconnect();
+    disconnect();
+  });
   return size;
 }
 function $19950faaac026e09$export$6e5611bc7e57e477({

package/server/latest/index.d.ts

@@ -7,7 +7,7 @@ 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 = "2.0.11";
+export const version = "2.0.13";
 /**
  * Returns accessor with the size of the provided element, including padding and border (I think)
  */

package/server/latest/index.js

@@ -5,7 +5,7 @@ import { ssr as $i7OB2$ssr, ssrHydrationKey as $i7OB2$ssrHydrationKey, escape as
 /*! 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 = "2.0.11";
+const $ec291e0010116877$export$83d89fbfd8236492 = "2.0.13";
 
 /** @jsxImportSource solid-js */
 
@@ -18,9 +18,10 @@ function $0fdb37d8ddabef25$export$9f191182275e9ef(what_to_watch) {
     }
   }));
   // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
+  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
   const disconnect = (0, $i7OB2$observer).onexists(what_to_watch, ({
     element: element
-  }) => resizeObserver.observe(element));
+  }) => requestAnimationFrame($i7OB2$catchify(() => resizeObserver.observe(element))));
   $i7OB2$onCleanup(() => {
     resizeObserver.disconnect();
     disconnect();
@@ -63,7 +64,7 @@ const $b5cccc8ee7d24677$export$6daf8749b65a1b77 = cols_at_size => {
   return $b5cccc8ee7d24677$var$transform_elements(sorted_cols_at_size);
 };
 function $a458486f22b22f63$export$a2cc176055f8f08() {
-  const text = "Please try setting `columnsAtSize` on the `SearchPage`/`CategoryPage` components to change the grid before setting it with CSS. If you do with CSS, set `ColsAtSize` to an empty array to ensure no declarations created by the SDK leak through.";
+  const text = "Please try setting `columnsAtSize` on the `SearchPage`/`CategoryPage` components to change the grid before setting it with CSS. If you do with CSS, set `columnsAtSize` to an empty array to ensure no declarations created by the SDK leak through.";
   return (0, $i7OB2$isServer) ? {
     t: `<!-- ${text} -->`
   } : document.createComment(text);
@@ -672,8 +673,15 @@ function $e8ffe11ed01df0fe$export$e6fffe67d4cdd848(whatToWatch) {
       setSize(Math.round(new_size));
     }
   }));
-  resizeObserver.observe(whatToWatch);
-  $i7OB2$onCleanup(() => resizeObserver.disconnect());
+  // If we start observing elements before they're in the DOM Chrome (Version 117.0.5938.92 (Official Build) (arm64)) sometimes gives us a resize event with a width of 0 and then doesn't dispatch one with the actual width once it's in the DOM. So we wait until the element is in the DOM before we start observing it.
+  // It doesn't seem to work even when waiting for it to be in the DOM, also wait an animation frame
+  const disconnect = (0, $i7OB2$observer).onexists(whatToWatch, ({
+    element: element
+  }) => requestAnimationFrame($i7OB2$catchify(() => resizeObserver.observe(element))));
+  $i7OB2$onCleanup(() => {
+    resizeObserver.disconnect();
+    disconnect();
+  });
   return size;
 }
 function $e8ffe11ed01df0fe$export$6e5611bc7e57e477({