@depict-ai/ui 2.0.12 → 2.0.14

package/latest/index.d.ts

@@ -1,5 +1,5 @@
 import { JSX, Signal, Accessor, Setter } from "solid-js";
-import { Display, ColsAtSize, report, Elem, ModernDisplay, Node_Array } from "@depict-ai/utilishared/latest";
+import { Amazing_Slider, Display, ColsAtSize, report, Elem, 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";
 import { BaseCategoryDisplay, ProductListingResponse } from "@depict-ai/types/api/ProductListingResponse";
@@ -7,7 +7,29 @@ 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.12";
+export const version = "2.0.14";
+/** @jsxImportSource solid-js */
+export function GenericSliderArrowButton(props?: {
+  width_?: number;
+  height_?: number;
+}): SVGElement;
+export function SlidableItems({
+  children,
+  slider_ref_,
+  faded_opacity_,
+  mutation_plugins_,
+  disable_fading_,
+  arrow_width_,
+  arrow_height_
+}: {
+  children?: JSX.Element;
+  slider_ref_?: (slider: Amazing_Slider) => any;
+  faded_opacity_?: number;
+  disable_fading_?: boolean;
+  mutation_plugins_?: ((this: Amazing_Slider, mutations: IntersectionObserverEntry[], intersecting_items: Record<number, IntersectionObserverEntry>) => unknown)[];
+  arrow_width_?: number;
+  arrow_height_?: number;
+}): HTMLDivElement;
 /**
  * Returns accessor with the size of the provided element, including padding and border (I think)
  */
@@ -88,11 +110,6 @@ export type SolidLayoutOptions = {
  * @return An accessor containing a CSS string
  */
 export function SolidLayout(props: SolidLayoutOptions): JSX.Element;
-/** @jsxImportSource solid-js */
-export function GenericSliderArrowButton(props?: {
-  width_?: number;
-  height_?: number;
-}): SVGElement;
 type RecommendationSliderBaseProps<T extends Display> = {
   grid_spacing: SDKGridSpacing;
   cols_at_size: SDKColsAtSize;

package/latest/index.js

@@ -1,11 +1,68 @@
-import { add_to_version_info as $9HbP8$add_to_version_info, catchify as $9HbP8$catchify, observer as $9HbP8$observer, slider_fractional_factory as $9HbP8$slider_fractional_factory, camelCasifyObject as $9HbP8$camelCasifyObject, make_random_classname as $9HbP8$make_random_classname, 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, report as $9HbP8$report, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, slider_fading_factory as $9HbP8$slider_fading_factory, is_safari as $9HbP8$is_safari, useExpandingContainer as $9HbP8$useExpandingContainer, standard_price_format as $9HbP8$standard_price_format, 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, 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, ListenableSet as $9HbP8$ListenableSet, insert_surfaces as $9HbP8$insert_surfaces } from "@depict-ai/utilishared/latest";
-import { createSignal as $9HbP8$createSignal, onCleanup as $9HbP8$onCleanup, createMemo as $9HbP8$createMemo, createResource as $9HbP8$createResource, Suspense as $9HbP8$Suspense, Show as $9HbP8$Show, createRenderEffect as $9HbP8$createRenderEffect, createRoot as $9HbP8$createRoot, For as $9HbP8$For, getOwner as $9HbP8$getOwner, runWithOwner as $9HbP8$runWithOwner, createEffect as $9HbP8$createEffect, createUniqueId as $9HbP8$createUniqueId, untrack as $9HbP8$untrack, createComputed as $9HbP8$createComputed, ErrorBoundary as $9HbP8$ErrorBoundary, Index as $9HbP8$Index, on as $9HbP8$on, batch as $9HbP8$batch, createReaction as $9HbP8$createReaction } from "solid-js";
-import { template as $9HbP8$template, getNextElement as $9HbP8$getNextElement, insert as $9HbP8$insert, createComponent as $9HbP8$createComponent, mergeProps as $9HbP8$mergeProps, isServer as $9HbP8$isServer, spread as $9HbP8$spread, runHydrationEvents as $9HbP8$runHydrationEvents, addEventListener as $9HbP8$addEventListener, className as $9HbP8$className, memo as $9HbP8$memo, delegateEvents as $9HbP8$delegateEvents, effect as $9HbP8$effect, classList as $9HbP8$classList, setAttribute as $9HbP8$setAttribute, getNextMarker as $9HbP8$getNextMarker, style as $9HbP8$style, Dynamic as $9HbP8$Dynamic, use as $9HbP8$use } from "solid-js/web";
+import { add_to_version_info as $9HbP8$add_to_version_info, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, slider_fading_factory as $9HbP8$slider_fading_factory, catchify as $9HbP8$catchify, observer as $9HbP8$observer, slider_fractional_factory as $9HbP8$slider_fractional_factory, camelCasifyObject as $9HbP8$camelCasifyObject, make_random_classname as $9HbP8$make_random_classname, 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, report as $9HbP8$report, is_safari as $9HbP8$is_safari, useExpandingContainer as $9HbP8$useExpandingContainer, standard_price_format as $9HbP8$standard_price_format, 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, 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, ListenableSet as $9HbP8$ListenableSet, insert_surfaces as $9HbP8$insert_surfaces } from "@depict-ai/utilishared/latest";
+import { template as $9HbP8$template, getNextElement as $9HbP8$getNextElement, insert as $9HbP8$insert, createComponent as $9HbP8$createComponent, effect as $9HbP8$effect, setAttribute as $9HbP8$setAttribute, mergeProps as $9HbP8$mergeProps, isServer as $9HbP8$isServer, spread as $9HbP8$spread, runHydrationEvents as $9HbP8$runHydrationEvents, addEventListener as $9HbP8$addEventListener, className as $9HbP8$className, memo as $9HbP8$memo, delegateEvents as $9HbP8$delegateEvents, classList as $9HbP8$classList, getNextMarker as $9HbP8$getNextMarker, style as $9HbP8$style, Dynamic as $9HbP8$Dynamic, use as $9HbP8$use } from "solid-js/web";
+import { onCleanup as $9HbP8$onCleanup, createSignal as $9HbP8$createSignal, createMemo as $9HbP8$createMemo, createResource as $9HbP8$createResource, Suspense as $9HbP8$Suspense, Show as $9HbP8$Show, createRenderEffect as $9HbP8$createRenderEffect, createRoot as $9HbP8$createRoot, For as $9HbP8$For, getOwner as $9HbP8$getOwner, runWithOwner as $9HbP8$runWithOwner, createEffect as $9HbP8$createEffect, createUniqueId as $9HbP8$createUniqueId, untrack as $9HbP8$untrack, createComputed as $9HbP8$createComputed, ErrorBoundary as $9HbP8$ErrorBoundary, Index as $9HbP8$Index, on as $9HbP8$on, batch as $9HbP8$batch, createReaction as $9HbP8$createReaction } 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 = "2.0.12";
+const $ec291e0010116877$export$83d89fbfd8236492 = "2.0.14";
+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"></path></svg>`, 4);
+function $fbbadcb080ad1d4a$export$8be2714ec7f169ee(props = {}) {
+  return (() => {
+    const _el$ = $9HbP8$getNextElement($fbbadcb080ad1d4a$var$_tmpl$);
+    $9HbP8$effect(_p$ => {
+      const _v$ = props.width_ ?? 14,
+        _v$2 = props.height_ ?? 26;
+      _v$ !== _p$._v$ && $9HbP8$setAttribute(_el$, "width", _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && $9HbP8$setAttribute(_el$, "height", _p$._v$2 = _v$2);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined
+    });
+    return _el$;
+  })();
+}
+const $f32e14878e75af51$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div></div>`, 2);
+function $f32e14878e75af51$export$6649caad96ef8870({
+  children: children,
+  slider_ref_: slider_ref_,
+  faded_opacity_ = 0.7,
+  mutation_plugins_ = [],
+  disable_fading_: disable_fading_,
+  arrow_width_: arrow_width_,
+  arrow_height_: arrow_height_
+}) {
+  const slider = new (0, $9HbP8$Amazing_Slider)({
+    button_contents: {
+      left: [(() => {
+        const _el$ = $9HbP8$getNextElement($f32e14878e75af51$var$_tmpl$);
+        $9HbP8$insert(_el$, $9HbP8$createComponent((0, $fbbadcb080ad1d4a$export$8be2714ec7f169ee), {
+          height_: arrow_height_,
+          width_: arrow_width_
+        }));
+        return _el$;
+      })()],
+      right: [(() => {
+        const _el$2 = $9HbP8$getNextElement($f32e14878e75af51$var$_tmpl$);
+        $9HbP8$insert(_el$2, $9HbP8$createComponent((0, $fbbadcb080ad1d4a$export$8be2714ec7f169ee), {
+          height_: arrow_height_,
+          width_: arrow_width_
+        }));
+        return _el$2;
+      })()]
+    },
+    constructor_plugins: [$9HbP8$slider_snap_css().constructor_plugin],
+    mutation_plugins: [...(disable_fading_ ? [] : [$9HbP8$slider_fading_factory({
+      threshold_: 0.96,
+      faded_opacity_: faded_opacity_
+    }).mutation_plugin_]), ...mutation_plugins_]
+  });
+  $9HbP8$insert(slider.insert_here, children);
+  $9HbP8$onCleanup(() => slider.observer.disconnect());
+  slider_ref_?.(slider);
+  return slider.container;
+}
 
 /** @jsxImportSource solid-js */
 
@@ -18,9 +75,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 +121,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);
@@ -436,63 +494,6 @@ function $c8d5ff4524619fcd$export$445d8d3f5f706a40(props, container_element, ins
   return [container_element, $9HbP8$memo(view_more_button_container), $9HbP8$memo(view_less_button_container), style_element];
 }
 $9HbP8$delegateEvents(["click"]);
-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"></path></svg>`, 4);
-function $fbbadcb080ad1d4a$export$8be2714ec7f169ee(props = {}) {
-  return (() => {
-    const _el$ = $9HbP8$getNextElement($fbbadcb080ad1d4a$var$_tmpl$);
-    $9HbP8$effect(_p$ => {
-      const _v$ = props.width_ ?? 14,
-        _v$2 = props.height_ ?? 26;
-      _v$ !== _p$._v$ && $9HbP8$setAttribute(_el$, "width", _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && $9HbP8$setAttribute(_el$, "height", _p$._v$2 = _v$2);
-      return _p$;
-    }, {
-      _v$: undefined,
-      _v$2: undefined
-    });
-    return _el$;
-  })();
-}
-const $f32e14878e75af51$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div></div>`, 2);
-function $f32e14878e75af51$export$6649caad96ef8870({
-  children: children,
-  slider_ref_: slider_ref_,
-  faded_opacity_ = 0.7,
-  mutation_plugins_ = [],
-  disable_fading_: disable_fading_,
-  arrow_width_: arrow_width_,
-  arrow_height_: arrow_height_
-}) {
-  const slider = new (0, $9HbP8$Amazing_Slider)({
-    button_contents: {
-      left: [(() => {
-        const _el$ = $9HbP8$getNextElement($f32e14878e75af51$var$_tmpl$);
-        $9HbP8$insert(_el$, $9HbP8$createComponent((0, $fbbadcb080ad1d4a$export$8be2714ec7f169ee), {
-          height_: arrow_height_,
-          width_: arrow_width_
-        }));
-        return _el$;
-      })()],
-      right: [(() => {
-        const _el$2 = $9HbP8$getNextElement($f32e14878e75af51$var$_tmpl$);
-        $9HbP8$insert(_el$2, $9HbP8$createComponent((0, $fbbadcb080ad1d4a$export$8be2714ec7f169ee), {
-          height_: arrow_height_,
-          width_: arrow_width_
-        }));
-        return _el$2;
-      })()]
-    },
-    constructor_plugins: [$9HbP8$slider_snap_css().constructor_plugin],
-    mutation_plugins: [...(disable_fading_ ? [] : [$9HbP8$slider_fading_factory({
-      threshold_: 0.96,
-      faded_opacity_: faded_opacity_
-    }).mutation_plugin_]), ...mutation_plugins_]
-  });
-  $9HbP8$insert(slider.insert_here, children);
-  $9HbP8$onCleanup(() => slider.observer.disconnect());
-  slider_ref_?.(slider);
-  return slider.container;
-}
 function $c4492d24952ed731$export$d41d19e89346fa2({
   recommendations_resource_: recommendations_resource_,
   product_card_template_: product_card_template_,
@@ -745,9 +746,10 @@ function $e8ffe11ed01df0fe$export$e6fffe67d4cdd848(whatToWatch) {
     }
   }));
   // 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
-  }) => resizeObserver.observe(element));
+  }) => requestAnimationFrame($9HbP8$catchify(() => resizeObserver.observe(element))));
   $9HbP8$onCleanup(() => {
     resizeObserver.disconnect();
     disconnect();
@@ -10781,4 +10783,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 { $0fdb37d8ddabef25$export$9f191182275e9ef as make_accurate_size_accessor, $ee116da074deb002$export$9574e176201e5e8d as RecommendationSlider, $9ea5383493360761$export$9756467d34d91cdb as RecommendationGrid, $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 };
+export { $f32e14878e75af51$export$6649caad96ef8870 as SlidableItems, $0fdb37d8ddabef25$export$9f191182275e9ef as make_accurate_size_accessor, $ee116da074deb002$export$9574e176201e5e8d as RecommendationSlider, $9ea5383493360761$export$9756467d34d91cdb as RecommendationGrid, $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": "2.0.12",
+  "version": "2.0.14",
   "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

@@ -1,6 +1,6 @@
 var $3hooq$depictaiutilishared = require("@depict-ai/utilishared/ES10");
-var $3hooq$solidjs = require("solid-js");
 var $3hooq$solidjsweb = require("solid-js/web");
+var $3hooq$solidjs = require("solid-js");
 var $3hooq$babelruntimehelpersclassPrivateFieldSet = require("@babel/runtime/helpers/classPrivateFieldSet");
 var $3hooq$babelruntimehelpersclassPrivateFieldGet = require("@babel/runtime/helpers/classPrivateFieldGet");
 var $3hooq$babelruntimehelpersdefineProperty = require("@babel/runtime/helpers/defineProperty");
@@ -16,6 +16,7 @@ function $parcel$export(e, n, v, s) {
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
+$parcel$export(module.exports, "SlidableItems", () => $ad8ec7729fffeb9c$export$6649caad96ef8870);
 $parcel$export(module.exports, "make_accurate_size_accessor", () => $13671aa5e984acd9$export$9f191182275e9ef);
 $parcel$export(module.exports, "RecommendationSlider", () => $2badc30d7c6610e1$export$9574e176201e5e8d);
 $parcel$export(module.exports, "RecommendationGrid", () => $41227f10ad680afd$export$9756467d34d91cdb);
@@ -67,7 +68,46 @@ $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.12";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "2.0.14";
+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;
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return $3hooq$solidjsweb.ssr($9d19451330d04c3c$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrAttribute("width", (_$escape2 = $3hooq$solidjsweb.escape(props.width_, true)) !== null && _$escape2 !== void 0 ? _$escape2 : 14, false) + $3hooq$solidjsweb.ssrAttribute("height", (_$escape3 = $3hooq$solidjsweb.escape(props.height_, true)) !== null && _$escape3 !== void 0 ? _$escape3 : 26, false));
+}
+const $ad8ec7729fffeb9c$var$_tmpl$ = ["<div", ">", "</div>"];
+function $ad8ec7729fffeb9c$export$6649caad96ef8870(_ref) {
+  let {
+    children: children,
+    slider_ref_: slider_ref_,
+    faded_opacity_ = 0.7,
+    mutation_plugins_ = [],
+    disable_fading_: disable_fading_,
+    arrow_width_: arrow_width_,
+    arrow_height_: arrow_height_
+  } = _ref;
+  const slider = new (0, $3hooq$depictaiutilishared.Amazing_Slider)({
+    button_contents: {
+      left: [$3hooq$solidjsweb.ssr($ad8ec7729fffeb9c$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $9d19451330d04c3c$export$8be2714ec7f169ee), {
+        height_: arrow_height_,
+        width_: arrow_width_
+      })))],
+      right: [$3hooq$solidjsweb.ssr($ad8ec7729fffeb9c$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $9d19451330d04c3c$export$8be2714ec7f169ee), {
+        height_: arrow_height_,
+        width_: arrow_width_
+      })))]
+    },
+    constructor_plugins: [$3hooq$depictaiutilishared.slider_snap_css().constructor_plugin],
+    mutation_plugins: [...(disable_fading_ ? [] : [$3hooq$depictaiutilishared.slider_fading_factory({
+      threshold_: 0.96,
+      faded_opacity_: faded_opacity_
+    }).mutation_plugin_]), ...mutation_plugins_]
+  });
+  $3hooq$solidjsweb.insert(slider.insert_here, children);
+  $3hooq$solidjs.onCleanup(() => slider.observer.disconnect());
+  slider_ref_ === null || slider_ref_ === void 0 || slider_ref_(slider);
+  return slider.container;
+}
 
 /** @jsxImportSource solid-js */
 
@@ -81,11 +121,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 +174,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);
@@ -491,45 +532,6 @@ function $6c2c739b113a8ddf$export$445d8d3f5f706a40(props, container_element) {
   if (insert_after_container) container_element.after(style_element);
   return [container_element, view_more_button_container(), view_less_button_container(), style_element];
 }
-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;
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return $3hooq$solidjsweb.ssr($9d19451330d04c3c$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.ssrAttribute("width", (_$escape2 = $3hooq$solidjsweb.escape(props.width_, true)) !== null && _$escape2 !== void 0 ? _$escape2 : 14, false) + $3hooq$solidjsweb.ssrAttribute("height", (_$escape3 = $3hooq$solidjsweb.escape(props.height_, true)) !== null && _$escape3 !== void 0 ? _$escape3 : 26, false));
-}
-const $ad8ec7729fffeb9c$var$_tmpl$ = ["<div", ">", "</div>"];
-function $ad8ec7729fffeb9c$export$6649caad96ef8870(_ref) {
-  let {
-    children: children,
-    slider_ref_: slider_ref_,
-    faded_opacity_ = 0.7,
-    mutation_plugins_ = [],
-    disable_fading_: disable_fading_,
-    arrow_width_: arrow_width_,
-    arrow_height_: arrow_height_
-  } = _ref;
-  const slider = new (0, $3hooq$depictaiutilishared.Amazing_Slider)({
-    button_contents: {
-      left: [$3hooq$solidjsweb.ssr($ad8ec7729fffeb9c$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $9d19451330d04c3c$export$8be2714ec7f169ee), {
-        height_: arrow_height_,
-        width_: arrow_width_
-      })))],
-      right: [$3hooq$solidjsweb.ssr($ad8ec7729fffeb9c$var$_tmpl$, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent((0, $9d19451330d04c3c$export$8be2714ec7f169ee), {
-        height_: arrow_height_,
-        width_: arrow_width_
-      })))]
-    },
-    constructor_plugins: [$3hooq$depictaiutilishared.slider_snap_css().constructor_plugin],
-    mutation_plugins: [...(disable_fading_ ? [] : [$3hooq$depictaiutilishared.slider_fading_factory({
-      threshold_: 0.96,
-      faded_opacity_: faded_opacity_
-    }).mutation_plugin_]), ...mutation_plugins_]
-  });
-  $3hooq$solidjsweb.insert(slider.insert_here, children);
-  $3hooq$solidjs.onCleanup(() => slider.observer.disconnect());
-  slider_ref_ === null || slider_ref_ === void 0 || slider_ref_(slider);
-  return slider.container;
-}
 function $236a257ee52e5414$export$d41d19e89346fa2(_ref) {
   let {
     recommendations_resource_: recommendations_resource_,
@@ -774,11 +776,12 @@ function $858fdcf73148519f$export$e6fffe67d4cdd848(whatToWatch) {
     }
   }));
   // 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 resizeObserver.observe(element);
+    return requestAnimationFrame($3hooq$depictaiutilishared.catchify(() => resizeObserver.observe(element)));
   });
   $3hooq$solidjs.onCleanup(() => {
     resizeObserver.disconnect();

package/server/ES10/index.d.ts

@@ -1,5 +1,5 @@
 import { JSX, Signal, Accessor, Setter } from "solid-js";
-import { Display, ColsAtSize, report, Elem, ModernDisplay, Node_Array } from "@depict-ai/utilishared/ES10";
+import { Amazing_Slider, Display, ColsAtSize, report, Elem, 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";
 import { BaseCategoryDisplay, ProductListingResponse } from "@depict-ai/types/api/ProductListingResponse";
@@ -7,7 +7,29 @@ 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.12";
+export const version = "2.0.14";
+/** @jsxImportSource solid-js */
+export function GenericSliderArrowButton(props?: {
+  width_?: number;
+  height_?: number;
+}): SVGElement;
+export function SlidableItems({
+  children,
+  slider_ref_,
+  faded_opacity_,
+  mutation_plugins_,
+  disable_fading_,
+  arrow_width_,
+  arrow_height_
+}: {
+  children?: JSX.Element;
+  slider_ref_?: (slider: Amazing_Slider) => any;
+  faded_opacity_?: number;
+  disable_fading_?: boolean;
+  mutation_plugins_?: ((this: Amazing_Slider, mutations: IntersectionObserverEntry[], intersecting_items: Record<number, IntersectionObserverEntry>) => unknown)[];
+  arrow_width_?: number;
+  arrow_height_?: number;
+}): HTMLDivElement;
 /**
  * Returns accessor with the size of the provided element, including padding and border (I think)
  */
@@ -88,11 +110,6 @@ export type SolidLayoutOptions = {
  * @return An accessor containing a CSS string
  */
 export function SolidLayout(props: SolidLayoutOptions): JSX.Element;
-/** @jsxImportSource solid-js */
-export function GenericSliderArrowButton(props?: {
-  width_?: number;
-  height_?: number;
-}): SVGElement;
 type RecommendationSliderBaseProps<T extends Display> = {
   grid_spacing: SDKGridSpacing;
   cols_at_size: SDKColsAtSize;

package/server/ES10/index.js

@@ -1,6 +1,6 @@
-import { add_to_version_info as $b8hua$add_to_version_info, catchify as $b8hua$catchify, observer as $b8hua$observer, slider_fractional_factory as $b8hua$slider_fractional_factory, camelCasifyObject as $b8hua$camelCasifyObject, make_random_classname as $b8hua$make_random_classname, 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, report as $b8hua$report, Amazing_Slider as $b8hua$Amazing_Slider, slider_snap_css as $b8hua$slider_snap_css, slider_fading_factory as $b8hua$slider_fading_factory, is_safari as $b8hua$is_safari, useExpandingContainer as $b8hua$useExpandingContainer, standard_price_format as $b8hua$standard_price_format, 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, 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, ListenableSet as $b8hua$ListenableSet, insert_surfaces as $b8hua$insert_surfaces } from "@depict-ai/utilishared/ES10";
-import { createSignal as $b8hua$createSignal, onCleanup as $b8hua$onCleanup, createMemo as $b8hua$createMemo, createResource as $b8hua$createResource, Suspense as $b8hua$Suspense, Show as $b8hua$Show, createRenderEffect as $b8hua$createRenderEffect, createRoot as $b8hua$createRoot, For as $b8hua$For, getOwner as $b8hua$getOwner, runWithOwner as $b8hua$runWithOwner, createEffect as $b8hua$createEffect, createUniqueId as $b8hua$createUniqueId, untrack as $b8hua$untrack, createComputed as $b8hua$createComputed, ErrorBoundary as $b8hua$ErrorBoundary, Index as $b8hua$Index, on as $b8hua$on, batch as $b8hua$batch, createReaction as $b8hua$createReaction } from "solid-js";
-import { ssr as $b8hua$ssr, ssrHydrationKey as $b8hua$ssrHydrationKey, escape as $b8hua$escape, createComponent as $b8hua$createComponent, mergeProps as $b8hua$mergeProps, isServer as $b8hua$isServer, ssrElement as $b8hua$ssrElement, ssrClassList as $b8hua$ssrClassList, insert as $b8hua$insert, ssrAttribute as $b8hua$ssrAttribute, ssrStyle as $b8hua$ssrStyle, Dynamic as $b8hua$Dynamic } from "solid-js/web";
+import { add_to_version_info as $b8hua$add_to_version_info, Amazing_Slider as $b8hua$Amazing_Slider, slider_snap_css as $b8hua$slider_snap_css, slider_fading_factory as $b8hua$slider_fading_factory, catchify as $b8hua$catchify, observer as $b8hua$observer, slider_fractional_factory as $b8hua$slider_fractional_factory, camelCasifyObject as $b8hua$camelCasifyObject, make_random_classname as $b8hua$make_random_classname, 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, report as $b8hua$report, is_safari as $b8hua$is_safari, useExpandingContainer as $b8hua$useExpandingContainer, standard_price_format as $b8hua$standard_price_format, 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, 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, ListenableSet as $b8hua$ListenableSet, insert_surfaces as $b8hua$insert_surfaces } from "@depict-ai/utilishared/ES10";
+import { ssr as $b8hua$ssr, ssrHydrationKey as $b8hua$ssrHydrationKey, escape as $b8hua$escape, createComponent as $b8hua$createComponent, insert as $b8hua$insert, ssrAttribute as $b8hua$ssrAttribute, mergeProps as $b8hua$mergeProps, isServer as $b8hua$isServer, ssrElement as $b8hua$ssrElement, ssrClassList as $b8hua$ssrClassList, ssrStyle as $b8hua$ssrStyle, Dynamic as $b8hua$Dynamic } from "solid-js/web";
+import { onCleanup as $b8hua$onCleanup, createSignal as $b8hua$createSignal, createMemo as $b8hua$createMemo, createResource as $b8hua$createResource, Suspense as $b8hua$Suspense, Show as $b8hua$Show, createRenderEffect as $b8hua$createRenderEffect, createRoot as $b8hua$createRoot, For as $b8hua$For, getOwner as $b8hua$getOwner, runWithOwner as $b8hua$runWithOwner, createEffect as $b8hua$createEffect, createUniqueId as $b8hua$createUniqueId, untrack as $b8hua$untrack, createComputed as $b8hua$createComputed, ErrorBoundary as $b8hua$ErrorBoundary, Index as $b8hua$Index, on as $b8hua$on, batch as $b8hua$batch, createReaction as $b8hua$createReaction } 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,46 @@ 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.12";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "2.0.14";
+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;
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return $b8hua$ssr($ca6ab5f08bd28bca$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$ssrAttribute("width", (_$escape2 = $b8hua$escape(props.width_, true)) !== null && _$escape2 !== void 0 ? _$escape2 : 14, false) + $b8hua$ssrAttribute("height", (_$escape3 = $b8hua$escape(props.height_, true)) !== null && _$escape3 !== void 0 ? _$escape3 : 26, false));
+}
+const $002f09d00aac50b2$var$_tmpl$ = ["<div", ">", "</div>"];
+function $002f09d00aac50b2$export$6649caad96ef8870(_ref) {
+  let {
+    children: children,
+    slider_ref_: slider_ref_,
+    faded_opacity_ = 0.7,
+    mutation_plugins_ = [],
+    disable_fading_: disable_fading_,
+    arrow_width_: arrow_width_,
+    arrow_height_: arrow_height_
+  } = _ref;
+  const slider = new (0, $b8hua$Amazing_Slider)({
+    button_contents: {
+      left: [$b8hua$ssr($002f09d00aac50b2$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$escape($b8hua$createComponent((0, $ca6ab5f08bd28bca$export$8be2714ec7f169ee), {
+        height_: arrow_height_,
+        width_: arrow_width_
+      })))],
+      right: [$b8hua$ssr($002f09d00aac50b2$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$escape($b8hua$createComponent((0, $ca6ab5f08bd28bca$export$8be2714ec7f169ee), {
+        height_: arrow_height_,
+        width_: arrow_width_
+      })))]
+    },
+    constructor_plugins: [$b8hua$slider_snap_css().constructor_plugin],
+    mutation_plugins: [...(disable_fading_ ? [] : [$b8hua$slider_fading_factory({
+      threshold_: 0.96,
+      faded_opacity_: faded_opacity_
+    }).mutation_plugin_]), ...mutation_plugins_]
+  });
+  $b8hua$insert(slider.insert_here, children);
+  $b8hua$onCleanup(() => slider.observer.disconnect());
+  slider_ref_ === null || slider_ref_ === void 0 || slider_ref_(slider);
+  return slider.container;
+}
 
 /** @jsxImportSource solid-js */
 
@@ -22,11 +61,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 +114,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);
@@ -432,45 +472,6 @@ function $63f1f8dbcd07d3b0$export$445d8d3f5f706a40(props, container_element) {
   if (insert_after_container) container_element.after(style_element);
   return [container_element, view_more_button_container(), view_less_button_container(), style_element];
 }
-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;
-  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return $b8hua$ssr($ca6ab5f08bd28bca$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$ssrAttribute("width", (_$escape2 = $b8hua$escape(props.width_, true)) !== null && _$escape2 !== void 0 ? _$escape2 : 14, false) + $b8hua$ssrAttribute("height", (_$escape3 = $b8hua$escape(props.height_, true)) !== null && _$escape3 !== void 0 ? _$escape3 : 26, false));
-}
-const $002f09d00aac50b2$var$_tmpl$ = ["<div", ">", "</div>"];
-function $002f09d00aac50b2$export$6649caad96ef8870(_ref) {
-  let {
-    children: children,
-    slider_ref_: slider_ref_,
-    faded_opacity_ = 0.7,
-    mutation_plugins_ = [],
-    disable_fading_: disable_fading_,
-    arrow_width_: arrow_width_,
-    arrow_height_: arrow_height_
-  } = _ref;
-  const slider = new (0, $b8hua$Amazing_Slider)({
-    button_contents: {
-      left: [$b8hua$ssr($002f09d00aac50b2$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$escape($b8hua$createComponent((0, $ca6ab5f08bd28bca$export$8be2714ec7f169ee), {
-        height_: arrow_height_,
-        width_: arrow_width_
-      })))],
-      right: [$b8hua$ssr($002f09d00aac50b2$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$escape($b8hua$createComponent((0, $ca6ab5f08bd28bca$export$8be2714ec7f169ee), {
-        height_: arrow_height_,
-        width_: arrow_width_
-      })))]
-    },
-    constructor_plugins: [$b8hua$slider_snap_css().constructor_plugin],
-    mutation_plugins: [...(disable_fading_ ? [] : [$b8hua$slider_fading_factory({
-      threshold_: 0.96,
-      faded_opacity_: faded_opacity_
-    }).mutation_plugin_]), ...mutation_plugins_]
-  });
-  $b8hua$insert(slider.insert_here, children);
-  $b8hua$onCleanup(() => slider.observer.disconnect());
-  slider_ref_ === null || slider_ref_ === void 0 || slider_ref_(slider);
-  return slider.container;
-}
 function $39ddb986053fb759$export$d41d19e89346fa2(_ref) {
   let {
     recommendations_resource_: recommendations_resource_,
@@ -715,11 +716,12 @@ function $56047603f9d212b6$export$e6fffe67d4cdd848(whatToWatch) {
     }
   }));
   // 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 resizeObserver.observe(element);
+    return requestAnimationFrame($b8hua$catchify(() => resizeObserver.observe(element)));
   });
   $b8hua$onCleanup(() => {
     resizeObserver.disconnect();
@@ -9736,4 +9738,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 { $0dc044cffe1e825b$export$9f191182275e9ef as make_accurate_size_accessor, $d5d7e58c5c9d8db0$export$9574e176201e5e8d as RecommendationSlider, $b432b11321ad4c97$export$9756467d34d91cdb as RecommendationGrid, $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 };
+export { $002f09d00aac50b2$export$6649caad96ef8870 as SlidableItems, $0dc044cffe1e825b$export$9f191182275e9ef as make_accurate_size_accessor, $d5d7e58c5c9d8db0$export$9574e176201e5e8d as RecommendationSlider, $b432b11321ad4c97$export$9756467d34d91cdb as RecommendationGrid, $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 };