@depict-ai/ui 3.0.23 → 3.0.25

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.23";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "3.0.25";
 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] : {};
@@ -103,7 +103,8 @@ function $9d19451330d04c3c$export$8be2714ec7f169ee() {
     return _el$;
   })();
 }
-const $ad8ec7729fffeb9c$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div>`);
+const $ad8ec7729fffeb9c$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<div>`),
+  $ad8ec7729fffeb9c$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<div class="depict-slider depict"><button aria-label="Scroll left"class="left d-navbutton"type=button></button><button aria-label="Scroll right"class="right d-navbutton"type=button></button><div class=sliding>`);
 function $ad8ec7729fffeb9c$export$6649caad96ef8870(_ref) {
   let {
     children: children,
@@ -114,35 +115,56 @@ function $ad8ec7729fffeb9c$export$6649caad96ef8870(_ref) {
     arrow_width_: arrow_width_,
     arrow_height_: arrow_height_
   } = _ref;
-  const slider = new (0, $52FdA$depictaiutilishared.Amazing_Slider)({
-    button_contents: {
-      left: [(() => {
-        const _el$ = $52FdA$solidjsweb.getNextElement($ad8ec7729fffeb9c$var$_tmpl$);
-        $52FdA$solidjsweb.insert(_el$, $52FdA$solidjsweb.createComponent((0, $9d19451330d04c3c$export$8be2714ec7f169ee), {
-          height_: arrow_height_,
-          width_: arrow_width_
-        }));
-        return _el$;
-      })()],
-      right: [(() => {
-        const _el$2 = $52FdA$solidjsweb.getNextElement($ad8ec7729fffeb9c$var$_tmpl$);
-        $52FdA$solidjsweb.insert(_el$2, $52FdA$solidjsweb.createComponent((0, $9d19451330d04c3c$export$8be2714ec7f169ee), {
-          height_: arrow_height_,
-          width_: arrow_width_
-        }));
+  const [hasHydrated, setHasHydrated] = $52FdA$solidjs.createSignal(false);
+  $52FdA$solidjs.createEffect(() => setHasHydrated(true));
+  const MakeButton = () => (() => {
+    const _el$ = $52FdA$solidjsweb.getNextElement($ad8ec7729fffeb9c$var$_tmpl$);
+    $52FdA$solidjsweb.insert(_el$, $52FdA$solidjsweb.createComponent((0, $9d19451330d04c3c$export$8be2714ec7f169ee), {
+      height_: arrow_height_,
+      width_: arrow_width_
+    }));
+    return _el$;
+  })();
+  // To support SSR it would be very hard to make Amazing_Slider compatible with solid's SSR because it would have to be rewritten in a more JSX way
+  // However, all it would do on the server (when used by SlidableItems) is creating the following 5 div elements
+  // Therefore, we just bail on the server (and first render on the client which is the hydration) and return a static version of the slider
+  // Once we have hydrated, we construct and insert the actual slider
+  return $52FdA$solidjsweb.createComponent((0, $52FdA$solidjs.Show), {
+    get when() {
+      return hasHydrated() && !(0, $52FdA$solidjsweb.isServer);
+    },
+    get fallback() {
+      return (() => {
+        const _el$2 = $52FdA$solidjsweb.getNextElement($ad8ec7729fffeb9c$var$_tmpl$2),
+          _el$3 = _el$2.firstChild,
+          _el$4 = _el$3.nextSibling,
+          _el$5 = _el$4.nextSibling;
+        $52FdA$solidjsweb.insert(_el$3, $52FdA$solidjsweb.createComponent(MakeButton, {}));
+        $52FdA$solidjsweb.insert(_el$4, $52FdA$solidjsweb.createComponent(MakeButton, {}));
+        $52FdA$solidjsweb.insert(_el$5, children);
         return _el$2;
-      })()]
+      })();
     },
-    constructor_plugins: [$52FdA$depictaiutilishared.slider_snap_css().constructor_plugin],
-    mutation_plugins: [...(disable_fading_ ? [] : [$52FdA$depictaiutilishared.slider_fading_factory({
-      threshold_: 0.96,
-      faded_opacity_: faded_opacity_
-    }).mutation_plugin_]), ...mutation_plugins_]
+    get children() {
+      return (() => {
+        const slider = new (0, $52FdA$depictaiutilishared.Amazing_Slider)({
+          button_contents: {
+            left: [MakeButton()],
+            right: [MakeButton()]
+          },
+          constructor_plugins: [$52FdA$depictaiutilishared.slider_snap_css().constructor_plugin],
+          mutation_plugins: [...(disable_fading_ ? [] : [$52FdA$depictaiutilishared.slider_fading_factory({
+            threshold_: 0.96,
+            faded_opacity_: faded_opacity_
+          }).mutation_plugin_]), ...mutation_plugins_]
+        });
+        $52FdA$solidjsweb.insert(slider.insert_here, children);
+        $52FdA$solidjs.onCleanup(() => slider.observer.disconnect());
+        slider_ref_ === null || slider_ref_ === void 0 || slider_ref_(slider);
+        return slider.container;
+      })();
+    }
   });
-  $52FdA$solidjsweb.insert(slider.insert_here, children);
-  $52FdA$solidjs.onCleanup(() => slider.observer.disconnect());
-  slider_ref_ === null || slider_ref_ === void 0 || slider_ref_(slider);
-  return slider.container;
 }
 const $513986fde589b871$var$_tmpl$ = /*#__PURE__*/$52FdA$solidjsweb.template(`<section aria-live=polite role=region class=tabs-body>`),
   $513986fde589b871$var$_tmpl$2 = /*#__PURE__*/$52FdA$solidjsweb.template(`<nav role=tablist class=tabs-bar>`),
@@ -1962,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;

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.23";
+export const version = "3.0.25";
 export type SDKColsAtSize = [number, number?][];
 /**
  * Transform SDK ColsAtSize into valid Layout ColsAtSize
@@ -222,7 +222,7 @@ export function SlidableItems({
   mutation_plugins_?: ((this: Amazing_Slider, mutations: IntersectionObserverEntry[], intersecting_items: Record<number, IntersectionObserverEntry>) => unknown)[];
   arrow_width_?: number;
   arrow_height_?: number;
-}): HTMLDivElement;
+}): JSX.Element;
 /**
  * Renders a set of tabs
  * Will ignore any children that's not a <Tab />
@@ -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

package/ES10/index.js

@@ -1,5 +1,5 @@
 import { add_to_version_info as $8tj43$add_to_version_info, Amazing_Slider as $8tj43$Amazing_Slider, slider_snap_css as $8tj43$slider_snap_css, slider_fading_factory as $8tj43$slider_fading_factory, get_session_id as $8tj43$get_session_id, add_version_query_params as $8tj43$add_version_query_params, base_url as $8tj43$base_url, dwarn as $8tj43$dwarn, catchify as $8tj43$catchify1, observer as $8tj43$observer, instant_exec_on_suspect_history_change as $8tj43$instant_exec_on_suspect_history_change, report as $8tj43$report, dlog as $8tj43$dlog, ContainedImage as $8tj43$ContainedImage, use_href_accessor as $8tj43$use_href_accessor1, camelCasifyObject as $8tj43$camelCasifyObject, make_random_classname as $8tj43$make_random_classname, n_col_styling_with_dist as $8tj43$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $8tj43$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $8tj43$layout_get_total_rec_amount_for_row, layout_media_query_header as $8tj43$layout_media_query_header, base64_encode_unicode as $8tj43$base64_encode_unicode, base64_decode_unicode as $8tj43$base64_decode_unicode, queueMacroTask as $8tj43$queueMacroTask, is_safari as $8tj43$is_safari, slider_fractional_factory as $8tj43$slider_fractional_factory, useExpandingContainer as $8tj43$useExpandingContainer, standard_price_format as $8tj43$standard_price_format, hex_to_rgb as $8tj43$hex_to_rgb, relative_luminance_from_rgb as $8tj43$relative_luminance_from_rgb, snakeCasifyObject as $8tj43$snakeCasifyObject, fetch_retry as $8tj43$fetch_retry, make_url_with_query_params as $8tj43$make_url_with_query_params, sort_obj as $8tj43$sort_obj, javascript_media_query as $8tj43$javascript_media_query, is_debug as $8tj43$is_debug, make_asyncIterable_exiter as $8tj43$make_asyncIterable_exiter, href_change_ipns as $8tj43$href_change_ipns, buildThresholdList as $8tj43$buildThresholdList, deparallelize_no_drop as $8tj43$deparallelize_no_drop, ListenableSet as $8tj43$ListenableSet1, insert_surfaces as $8tj43$insert_surfaces } from "@depict-ai/utilishared/ES10";
-import { template as $8tj43$template, createComponent as $8tj43$createComponent, mergeProps as $8tj43$mergeProps, Dynamic as $8tj43$Dynamic, memo as $8tj43$memo, getNextElement as $8tj43$getNextElement, insert as $8tj43$insert, effect as $8tj43$effect, setAttribute as $8tj43$setAttribute, spread as $8tj43$spread, runHydrationEvents as $8tj43$runHydrationEvents, use as $8tj43$use, addEventListener as $8tj43$addEventListener, getNextMarker as $8tj43$getNextMarker, delegateEvents as $8tj43$delegateEvents, classList as $8tj43$classList, className as $8tj43$className, style as $8tj43$style, isServer as $8tj43$isServer, setProperty as $8tj43$setProperty } from "solid-js/web";
+import { template as $8tj43$template, createComponent as $8tj43$createComponent, mergeProps as $8tj43$mergeProps, Dynamic as $8tj43$Dynamic, memo as $8tj43$memo, getNextElement as $8tj43$getNextElement, insert as $8tj43$insert, effect as $8tj43$effect, setAttribute as $8tj43$setAttribute, isServer as $8tj43$isServer, spread as $8tj43$spread, runHydrationEvents as $8tj43$runHydrationEvents, use as $8tj43$use, addEventListener as $8tj43$addEventListener, getNextMarker as $8tj43$getNextMarker, delegateEvents as $8tj43$delegateEvents, classList as $8tj43$classList, className as $8tj43$className, style as $8tj43$style, setProperty as $8tj43$setProperty } from "solid-js/web";
 import { createContext as $8tj43$createContext, useContext as $8tj43$useContext, createSignal as $8tj43$createSignal, createSelector as $8tj43$createSelector, getOwner as $8tj43$getOwner, runWithOwner as $8tj43$runWithOwner, Index as $8tj43$Index, createMemo as $8tj43$createMemo, children as $8tj43$children, onCleanup as $8tj43$onCleanup, createEffect as $8tj43$createEffect, untrack as $8tj43$untrack, Show as $8tj43$Show, createUniqueId as $8tj43$createUniqueId, mergeProps as $8tj43$mergeProps1, ErrorBoundary as $8tj43$ErrorBoundary, createResource as $8tj43$createResource, splitProps as $8tj43$splitProps, createRoot as $8tj43$createRoot, createRenderEffect as $8tj43$createRenderEffect, batch as $8tj43$batch, Suspense as $8tj43$Suspense, on as $8tj43$on, For as $8tj43$For, createComputed as $8tj43$createComputed, createReaction as $8tj43$createReaction, mapArray as $8tj43$mapArray } from "solid-js";
 import { ListenableSet as $8tj43$ListenableSet, catchify as $8tj43$catchify, use_href_accessor as $8tj43$use_href_accessor, report as $8tj43$report1 } from "@depict-ai/utilishared/ES10";
 import $8tj43$babelruntimehelpersdefineProperty from "@babel/runtime/helpers/defineProperty";
@@ -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.23";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "3.0.25";
 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] : {};
@@ -30,7 +30,8 @@ function $ca6ab5f08bd28bca$export$8be2714ec7f169ee() {
     return _el$;
   })();
 }
-const $002f09d00aac50b2$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div>`);
+const $002f09d00aac50b2$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div>`),
+  $002f09d00aac50b2$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<div class="depict-slider depict"><button aria-label="Scroll left"class="left d-navbutton"type=button></button><button aria-label="Scroll right"class="right d-navbutton"type=button></button><div class=sliding>`);
 function $002f09d00aac50b2$export$6649caad96ef8870(_ref) {
   let {
     children: children,
@@ -41,35 +42,56 @@ function $002f09d00aac50b2$export$6649caad96ef8870(_ref) {
     arrow_width_: arrow_width_,
     arrow_height_: arrow_height_
   } = _ref;
-  const slider = new (0, $8tj43$Amazing_Slider)({
-    button_contents: {
-      left: [(() => {
-        const _el$ = $8tj43$getNextElement($002f09d00aac50b2$var$_tmpl$);
-        $8tj43$insert(_el$, $8tj43$createComponent((0, $ca6ab5f08bd28bca$export$8be2714ec7f169ee), {
-          height_: arrow_height_,
-          width_: arrow_width_
-        }));
-        return _el$;
-      })()],
-      right: [(() => {
-        const _el$2 = $8tj43$getNextElement($002f09d00aac50b2$var$_tmpl$);
-        $8tj43$insert(_el$2, $8tj43$createComponent((0, $ca6ab5f08bd28bca$export$8be2714ec7f169ee), {
-          height_: arrow_height_,
-          width_: arrow_width_
-        }));
+  const [hasHydrated, setHasHydrated] = $8tj43$createSignal(false);
+  $8tj43$createEffect(() => setHasHydrated(true));
+  const MakeButton = () => (() => {
+    const _el$ = $8tj43$getNextElement($002f09d00aac50b2$var$_tmpl$);
+    $8tj43$insert(_el$, $8tj43$createComponent((0, $ca6ab5f08bd28bca$export$8be2714ec7f169ee), {
+      height_: arrow_height_,
+      width_: arrow_width_
+    }));
+    return _el$;
+  })();
+  // To support SSR it would be very hard to make Amazing_Slider compatible with solid's SSR because it would have to be rewritten in a more JSX way
+  // However, all it would do on the server (when used by SlidableItems) is creating the following 5 div elements
+  // Therefore, we just bail on the server (and first render on the client which is the hydration) and return a static version of the slider
+  // Once we have hydrated, we construct and insert the actual slider
+  return $8tj43$createComponent((0, $8tj43$Show), {
+    get when() {
+      return hasHydrated() && !(0, $8tj43$isServer);
+    },
+    get fallback() {
+      return (() => {
+        const _el$2 = $8tj43$getNextElement($002f09d00aac50b2$var$_tmpl$2),
+          _el$3 = _el$2.firstChild,
+          _el$4 = _el$3.nextSibling,
+          _el$5 = _el$4.nextSibling;
+        $8tj43$insert(_el$3, $8tj43$createComponent(MakeButton, {}));
+        $8tj43$insert(_el$4, $8tj43$createComponent(MakeButton, {}));
+        $8tj43$insert(_el$5, children);
         return _el$2;
-      })()]
+      })();
     },
-    constructor_plugins: [$8tj43$slider_snap_css().constructor_plugin],
-    mutation_plugins: [...(disable_fading_ ? [] : [$8tj43$slider_fading_factory({
-      threshold_: 0.96,
-      faded_opacity_: faded_opacity_
-    }).mutation_plugin_]), ...mutation_plugins_]
+    get children() {
+      return (() => {
+        const slider = new (0, $8tj43$Amazing_Slider)({
+          button_contents: {
+            left: [MakeButton()],
+            right: [MakeButton()]
+          },
+          constructor_plugins: [$8tj43$slider_snap_css().constructor_plugin],
+          mutation_plugins: [...(disable_fading_ ? [] : [$8tj43$slider_fading_factory({
+            threshold_: 0.96,
+            faded_opacity_: faded_opacity_
+          }).mutation_plugin_]), ...mutation_plugins_]
+        });
+        $8tj43$insert(slider.insert_here, children);
+        $8tj43$onCleanup(() => slider.observer.disconnect());
+        slider_ref_ === null || slider_ref_ === void 0 || slider_ref_(slider);
+        return slider.container;
+      })();
+    }
   });
-  $8tj43$insert(slider.insert_here, children);
-  $8tj43$onCleanup(() => slider.observer.disconnect());
-  slider_ref_ === null || slider_ref_ === void 0 || slider_ref_(slider);
-  return slider.container;
 }
 const $6a439680ae7e9ba3$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<section aria-live=polite role=region class=tabs-body>`),
   $6a439680ae7e9ba3$var$_tmpl$2 = /*#__PURE__*/$8tj43$template(`<nav role=tablist class=tabs-bar>`),
@@ -1889,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;

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.23";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "3.0.25";
 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 (() => {
@@ -95,7 +95,8 @@ function $0f313083912e447a$export$8be2714ec7f169ee(props = {}) {
     return _el$;
   })();
 }
-const $a0e53f99354809d9$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div>`);
+const $a0e53f99354809d9$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div>`),
+  $a0e53f99354809d9$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<div class="depict-slider depict"><button aria-label="Scroll left"class="left d-navbutton"type=button></button><button aria-label="Scroll right"class="right d-navbutton"type=button></button><div class=sliding>`);
 function $a0e53f99354809d9$export$6649caad96ef8870({
   children: children,
   slider_ref_: slider_ref_,
@@ -105,35 +106,56 @@ function $a0e53f99354809d9$export$6649caad96ef8870({
   arrow_width_: arrow_width_,
   arrow_height_: arrow_height_
 }) {
-  const slider = new (0, $gVhhF$depictaiutilishared.Amazing_Slider)({
-    button_contents: {
-      left: [(() => {
-        const _el$ = $gVhhF$solidjsweb.getNextElement($a0e53f99354809d9$var$_tmpl$);
-        $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $0f313083912e447a$export$8be2714ec7f169ee), {
-          height_: arrow_height_,
-          width_: arrow_width_
-        }));
-        return _el$;
-      })()],
-      right: [(() => {
-        const _el$2 = $gVhhF$solidjsweb.getNextElement($a0e53f99354809d9$var$_tmpl$);
-        $gVhhF$solidjsweb.insert(_el$2, $gVhhF$solidjsweb.createComponent((0, $0f313083912e447a$export$8be2714ec7f169ee), {
-          height_: arrow_height_,
-          width_: arrow_width_
-        }));
+  const [hasHydrated, setHasHydrated] = $gVhhF$solidjs.createSignal(false);
+  $gVhhF$solidjs.createEffect(() => setHasHydrated(true));
+  const MakeButton = () => (() => {
+    const _el$ = $gVhhF$solidjsweb.getNextElement($a0e53f99354809d9$var$_tmpl$);
+    $gVhhF$solidjsweb.insert(_el$, $gVhhF$solidjsweb.createComponent((0, $0f313083912e447a$export$8be2714ec7f169ee), {
+      height_: arrow_height_,
+      width_: arrow_width_
+    }));
+    return _el$;
+  })();
+  // To support SSR it would be very hard to make Amazing_Slider compatible with solid's SSR because it would have to be rewritten in a more JSX way
+  // However, all it would do on the server (when used by SlidableItems) is creating the following 5 div elements
+  // Therefore, we just bail on the server (and first render on the client which is the hydration) and return a static version of the slider
+  // Once we have hydrated, we construct and insert the actual slider
+  return $gVhhF$solidjsweb.createComponent((0, $gVhhF$solidjs.Show), {
+    get when() {
+      return hasHydrated() && !(0, $gVhhF$solidjsweb.isServer);
+    },
+    get fallback() {
+      return (() => {
+        const _el$2 = $gVhhF$solidjsweb.getNextElement($a0e53f99354809d9$var$_tmpl$2),
+          _el$3 = _el$2.firstChild,
+          _el$4 = _el$3.nextSibling,
+          _el$5 = _el$4.nextSibling;
+        $gVhhF$solidjsweb.insert(_el$3, $gVhhF$solidjsweb.createComponent(MakeButton, {}));
+        $gVhhF$solidjsweb.insert(_el$4, $gVhhF$solidjsweb.createComponent(MakeButton, {}));
+        $gVhhF$solidjsweb.insert(_el$5, children);
         return _el$2;
-      })()]
+      })();
     },
-    constructor_plugins: [$gVhhF$depictaiutilishared.slider_snap_css().constructor_plugin],
-    mutation_plugins: [...(disable_fading_ ? [] : [$gVhhF$depictaiutilishared.slider_fading_factory({
-      threshold_: 0.96,
-      faded_opacity_: faded_opacity_
-    }).mutation_plugin_]), ...mutation_plugins_]
+    get children() {
+      return (() => {
+        const slider = new (0, $gVhhF$depictaiutilishared.Amazing_Slider)({
+          button_contents: {
+            left: [MakeButton()],
+            right: [MakeButton()]
+          },
+          constructor_plugins: [$gVhhF$depictaiutilishared.slider_snap_css().constructor_plugin],
+          mutation_plugins: [...(disable_fading_ ? [] : [$gVhhF$depictaiutilishared.slider_fading_factory({
+            threshold_: 0.96,
+            faded_opacity_: faded_opacity_
+          }).mutation_plugin_]), ...mutation_plugins_]
+        });
+        $gVhhF$solidjsweb.insert(slider.insert_here, children);
+        $gVhhF$solidjs.onCleanup(() => slider.observer.disconnect());
+        slider_ref_?.(slider);
+        return slider.container;
+      })();
+    }
   });
-  $gVhhF$solidjsweb.insert(slider.insert_here, children);
-  $gVhhF$solidjs.onCleanup(() => slider.observer.disconnect());
-  slider_ref_?.(slider);
-  return slider.container;
 }
 const $8c38828ae2321937$var$_tmpl$ = /*#__PURE__*/$gVhhF$solidjsweb.template(`<section aria-live=polite role=region class=tabs-body>`),
   $8c38828ae2321937$var$_tmpl$2 = /*#__PURE__*/$gVhhF$solidjsweb.template(`<nav role=tablist class=tabs-bar>`),
@@ -1858,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;

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.23";
+export const version = "3.0.25";
 export type SDKColsAtSize = [number, number?][];
 /**
  * Transform SDK ColsAtSize into valid Layout ColsAtSize
@@ -222,7 +222,7 @@ export function SlidableItems({
   mutation_plugins_?: ((this: Amazing_Slider, mutations: IntersectionObserverEntry[], intersecting_items: Record<number, IntersectionObserverEntry>) => unknown)[];
   arrow_width_?: number;
   arrow_height_?: number;
-}): HTMLDivElement;
+}): JSX.Element;
 /**
  * Renders a set of tabs
  * Will ignore any children that's not a <Tab />
@@ -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

package/latest/index.js

@@ -1,5 +1,5 @@
 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, get_session_id as $9HbP8$get_session_id, add_version_query_params as $9HbP8$add_version_query_params, base_url as $9HbP8$base_url, dwarn as $9HbP8$dwarn, catchify as $9HbP8$catchify1, observer as $9HbP8$observer, instant_exec_on_suspect_history_change as $9HbP8$instant_exec_on_suspect_history_change, report as $9HbP8$report, dlog as $9HbP8$dlog, ContainedImage as $9HbP8$ContainedImage, use_href_accessor as $9HbP8$use_href_accessor1, 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, base64_encode_unicode as $9HbP8$base64_encode_unicode, base64_decode_unicode as $9HbP8$base64_decode_unicode, queueMacroTask as $9HbP8$queueMacroTask, is_safari as $9HbP8$is_safari, slider_fractional_factory as $9HbP8$slider_fractional_factory, useExpandingContainer as $9HbP8$useExpandingContainer, standard_price_format as $9HbP8$standard_price_format, hex_to_rgb as $9HbP8$hex_to_rgb, relative_luminance_from_rgb as $9HbP8$relative_luminance_from_rgb, snakeCasifyObject as $9HbP8$snakeCasifyObject, fetch_retry as $9HbP8$fetch_retry, sort_obj as $9HbP8$sort_obj, make_url_with_query_params as $9HbP8$make_url_with_query_params, javascript_media_query as $9HbP8$javascript_media_query, is_debug as $9HbP8$is_debug, make_asyncIterable_exiter as $9HbP8$make_asyncIterable_exiter, href_change_ipns as $9HbP8$href_change_ipns, buildThresholdList as $9HbP8$buildThresholdList, deparallelize_no_drop as $9HbP8$deparallelize_no_drop, ListenableSet as $9HbP8$ListenableSet1, insert_surfaces as $9HbP8$insert_surfaces } from "@depict-ai/utilishared/latest";
-import { template as $9HbP8$template, createComponent as $9HbP8$createComponent, mergeProps as $9HbP8$mergeProps, Dynamic as $9HbP8$Dynamic, memo as $9HbP8$memo, getNextElement as $9HbP8$getNextElement, insert as $9HbP8$insert, effect as $9HbP8$effect, setAttribute as $9HbP8$setAttribute, spread as $9HbP8$spread, runHydrationEvents as $9HbP8$runHydrationEvents, use as $9HbP8$use, addEventListener as $9HbP8$addEventListener, getNextMarker as $9HbP8$getNextMarker, delegateEvents as $9HbP8$delegateEvents, classList as $9HbP8$classList, className as $9HbP8$className, style as $9HbP8$style, isServer as $9HbP8$isServer, setProperty as $9HbP8$setProperty } from "solid-js/web";
+import { template as $9HbP8$template, createComponent as $9HbP8$createComponent, mergeProps as $9HbP8$mergeProps, Dynamic as $9HbP8$Dynamic, memo as $9HbP8$memo, getNextElement as $9HbP8$getNextElement, insert as $9HbP8$insert, effect as $9HbP8$effect, setAttribute as $9HbP8$setAttribute, isServer as $9HbP8$isServer, spread as $9HbP8$spread, runHydrationEvents as $9HbP8$runHydrationEvents, use as $9HbP8$use, addEventListener as $9HbP8$addEventListener, getNextMarker as $9HbP8$getNextMarker, delegateEvents as $9HbP8$delegateEvents, classList as $9HbP8$classList, className as $9HbP8$className, style as $9HbP8$style, setProperty as $9HbP8$setProperty } from "solid-js/web";
 import { createContext as $9HbP8$createContext, useContext as $9HbP8$useContext, createSignal as $9HbP8$createSignal, createSelector as $9HbP8$createSelector, getOwner as $9HbP8$getOwner, runWithOwner as $9HbP8$runWithOwner, Index as $9HbP8$Index, createMemo as $9HbP8$createMemo, children as $9HbP8$children, onCleanup as $9HbP8$onCleanup, createEffect as $9HbP8$createEffect, untrack as $9HbP8$untrack, Show as $9HbP8$Show, createUniqueId as $9HbP8$createUniqueId, mergeProps as $9HbP8$mergeProps1, ErrorBoundary as $9HbP8$ErrorBoundary, createResource as $9HbP8$createResource, splitProps as $9HbP8$splitProps, createRoot as $9HbP8$createRoot, createRenderEffect as $9HbP8$createRenderEffect, batch as $9HbP8$batch, Suspense as $9HbP8$Suspense, on as $9HbP8$on, For as $9HbP8$For, createComputed as $9HbP8$createComputed, createReaction as $9HbP8$createReaction, mapArray as $9HbP8$mapArray } from "solid-js";
 import { ListenableSet as $9HbP8$ListenableSet, catchify as $9HbP8$catchify, use_href_accessor as $9HbP8$use_href_accessor, report as $9HbP8$report1 } from "@depict-ai/utilishared/latest";
 import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from "solid-js/store";
@@ -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.23";
+const $ec291e0010116877$export$83d89fbfd8236492 = "3.0.25";
 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 (() => {
@@ -25,7 +25,8 @@ function $fbbadcb080ad1d4a$export$8be2714ec7f169ee(props = {}) {
     return _el$;
   })();
 }
-const $f32e14878e75af51$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div>`);
+const $f32e14878e75af51$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div>`),
+  $f32e14878e75af51$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<div class="depict-slider depict"><button aria-label="Scroll left"class="left d-navbutton"type=button></button><button aria-label="Scroll right"class="right d-navbutton"type=button></button><div class=sliding>`);
 function $f32e14878e75af51$export$6649caad96ef8870({
   children: children,
   slider_ref_: slider_ref_,
@@ -35,35 +36,56 @@ function $f32e14878e75af51$export$6649caad96ef8870({
   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_
-        }));
+  const [hasHydrated, setHasHydrated] = $9HbP8$createSignal(false);
+  $9HbP8$createEffect(() => setHasHydrated(true));
+  const MakeButton = () => (() => {
+    const _el$ = $9HbP8$getNextElement($f32e14878e75af51$var$_tmpl$);
+    $9HbP8$insert(_el$, $9HbP8$createComponent((0, $fbbadcb080ad1d4a$export$8be2714ec7f169ee), {
+      height_: arrow_height_,
+      width_: arrow_width_
+    }));
+    return _el$;
+  })();
+  // To support SSR it would be very hard to make Amazing_Slider compatible with solid's SSR because it would have to be rewritten in a more JSX way
+  // However, all it would do on the server (when used by SlidableItems) is creating the following 5 div elements
+  // Therefore, we just bail on the server (and first render on the client which is the hydration) and return a static version of the slider
+  // Once we have hydrated, we construct and insert the actual slider
+  return $9HbP8$createComponent((0, $9HbP8$Show), {
+    get when() {
+      return hasHydrated() && !(0, $9HbP8$isServer);
+    },
+    get fallback() {
+      return (() => {
+        const _el$2 = $9HbP8$getNextElement($f32e14878e75af51$var$_tmpl$2),
+          _el$3 = _el$2.firstChild,
+          _el$4 = _el$3.nextSibling,
+          _el$5 = _el$4.nextSibling;
+        $9HbP8$insert(_el$3, $9HbP8$createComponent(MakeButton, {}));
+        $9HbP8$insert(_el$4, $9HbP8$createComponent(MakeButton, {}));
+        $9HbP8$insert(_el$5, children);
         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_]
+    get children() {
+      return (() => {
+        const slider = new (0, $9HbP8$Amazing_Slider)({
+          button_contents: {
+            left: [MakeButton()],
+            right: [MakeButton()]
+          },
+          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;
+      })();
+    }
   });
-  $9HbP8$insert(slider.insert_here, children);
-  $9HbP8$onCleanup(() => slider.observer.disconnect());
-  slider_ref_?.(slider);
-  return slider.container;
 }
 const $024fbc0a2d796fad$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<section aria-live=polite role=region class=tabs-body>`),
   $024fbc0a2d796fad$var$_tmpl$2 = /*#__PURE__*/$9HbP8$template(`<nav role=tablist class=tabs-bar>`),
@@ -1788,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "3.0.23",
+  "version": "3.0.25",
   "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,14 +83,15 @@ $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.23";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "3.0.25";
 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>"];
+const $ad8ec7729fffeb9c$var$_tmpl$ = ["<div", ">", "</div>"],
+  $ad8ec7729fffeb9c$var$_tmpl$2 = ["<div", ' class="depict-slider depict"><button aria-label="Scroll left" class="left d-navbutton" type="button">', '</button><button aria-label="Scroll right" class="right d-navbutton" type="button">', '</button><div class="sliding">', "</div></div>"];
 function $ad8ec7729fffeb9c$export$6649caad96ef8870(_ref) {
   let {
     children: children,
@@ -101,27 +102,43 @@ function $ad8ec7729fffeb9c$export$6649caad96ef8870(_ref) {
     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_
-      })))]
+  const [hasHydrated, setHasHydrated] = $3hooq$solidjs.createSignal(false);
+  $3hooq$solidjs.createEffect(() => setHasHydrated(true));
+  const MakeButton = () => $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_
+  })));
+  // To support SSR it would be very hard to make Amazing_Slider compatible with solid's SSR because it would have to be rewritten in a more JSX way
+  // However, all it would do on the server (when used by SlidableItems) is creating the following 5 div elements
+  // Therefore, we just bail on the server (and first render on the client which is the hydration) and return a static version of the slider
+  // Once we have hydrated, we construct and insert the actual slider
+  return $3hooq$solidjsweb.createComponent((0, $3hooq$solidjs.Show), {
+    get when() {
+      return hasHydrated() && !(0, $3hooq$solidjsweb.isServer);
     },
-    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_]
+    get fallback() {
+      return $3hooq$solidjsweb.ssr($ad8ec7729fffeb9c$var$_tmpl$2, $3hooq$solidjsweb.ssrHydrationKey(), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(MakeButton, {})), $3hooq$solidjsweb.escape($3hooq$solidjsweb.createComponent(MakeButton, {})), $3hooq$solidjsweb.escape(children));
+    },
+    get children() {
+      return (() => {
+        const slider = new (0, $3hooq$depictaiutilishared.Amazing_Slider)({
+          button_contents: {
+            left: [MakeButton()],
+            right: [MakeButton()]
+          },
+          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;
+      })();
+    }
   });
-  $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;
 }
 const $513986fde589b871$var$_tmpl$ = ["<section", ' aria-live="polite" role="region" class="tabs-body">', "</section>"],
   $513986fde589b871$var$_tmpl$2 = ["<nav", ' role="tablist" class="tabs-bar">', "</nav>"],
@@ -1724,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);

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.23";
+export const version = "3.0.25";
 export type SDKColsAtSize = [number, number?][];
 /**
  * Transform SDK ColsAtSize into valid Layout ColsAtSize
@@ -222,7 +222,7 @@ export function SlidableItems({
   mutation_plugins_?: ((this: Amazing_Slider, mutations: IntersectionObserverEntry[], intersecting_items: Record<number, IntersectionObserverEntry>) => unknown)[];
   arrow_width_?: number;
   arrow_height_?: number;
-}): HTMLDivElement;
+}): JSX.Element;
 /**
  * Renders a set of tabs
  * Will ignore any children that's not a <Tab />
@@ -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

package/server/ES10/index.js

@@ -1,5 +1,5 @@
 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, get_session_id as $b8hua$get_session_id, add_version_query_params as $b8hua$add_version_query_params, base_url as $b8hua$base_url, dwarn as $b8hua$dwarn, catchify as $b8hua$catchify1, observer as $b8hua$observer, instant_exec_on_suspect_history_change as $b8hua$instant_exec_on_suspect_history_change, report as $b8hua$report, dlog as $b8hua$dlog, ContainedImage as $b8hua$ContainedImage, use_href_accessor as $b8hua$use_href_accessor1, 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, base64_encode_unicode as $b8hua$base64_encode_unicode, base64_decode_unicode as $b8hua$base64_decode_unicode, queueMacroTask as $b8hua$queueMacroTask, is_safari as $b8hua$is_safari, slider_fractional_factory as $b8hua$slider_fractional_factory, useExpandingContainer as $b8hua$useExpandingContainer, standard_price_format as $b8hua$standard_price_format, hex_to_rgb as $b8hua$hex_to_rgb, relative_luminance_from_rgb as $b8hua$relative_luminance_from_rgb, snakeCasifyObject as $b8hua$snakeCasifyObject, fetch_retry as $b8hua$fetch_retry, make_url_with_query_params as $b8hua$make_url_with_query_params, sort_obj as $b8hua$sort_obj, javascript_media_query as $b8hua$javascript_media_query, make_asyncIterable_exiter as $b8hua$make_asyncIterable_exiter, href_change_ipns as $b8hua$href_change_ipns, deparallelize_no_drop as $b8hua$deparallelize_no_drop, ListenableSet as $b8hua$ListenableSet1, insert_surfaces as $b8hua$insert_surfaces } from "@depict-ai/utilishared/ES10";
-import { createComponent as $b8hua$createComponent, mergeProps as $b8hua$mergeProps, Dynamic as $b8hua$Dynamic, ssr as $b8hua$ssr, ssrHydrationKey as $b8hua$ssrHydrationKey, escape as $b8hua$escape, ssrAttribute as $b8hua$ssrAttribute, insert as $b8hua$insert, ssrElement as $b8hua$ssrElement, ssrClassList as $b8hua$ssrClassList, ssrStyle as $b8hua$ssrStyle, isServer as $b8hua$isServer, spread as $b8hua$spread } from "solid-js/web";
+import { createComponent as $b8hua$createComponent, mergeProps as $b8hua$mergeProps, Dynamic as $b8hua$Dynamic, ssr as $b8hua$ssr, ssrHydrationKey as $b8hua$ssrHydrationKey, escape as $b8hua$escape, ssrAttribute as $b8hua$ssrAttribute, isServer as $b8hua$isServer, insert as $b8hua$insert, ssrElement as $b8hua$ssrElement, ssrClassList as $b8hua$ssrClassList, ssrStyle as $b8hua$ssrStyle, spread as $b8hua$spread } from "solid-js/web";
 import { createContext as $b8hua$createContext, useContext as $b8hua$useContext, createSignal as $b8hua$createSignal, createSelector as $b8hua$createSelector, getOwner as $b8hua$getOwner, runWithOwner as $b8hua$runWithOwner, Index as $b8hua$Index, createMemo as $b8hua$createMemo, children as $b8hua$children, onCleanup as $b8hua$onCleanup, createEffect as $b8hua$createEffect, untrack as $b8hua$untrack, Show as $b8hua$Show, createUniqueId as $b8hua$createUniqueId, mergeProps as $b8hua$mergeProps1, ErrorBoundary as $b8hua$ErrorBoundary, createResource as $b8hua$createResource, splitProps as $b8hua$splitProps, createRoot as $b8hua$createRoot, createRenderEffect as $b8hua$createRenderEffect, batch as $b8hua$batch, Suspense as $b8hua$Suspense, on as $b8hua$on, For as $b8hua$For, createComputed as $b8hua$createComputed, createReaction as $b8hua$createReaction, mapArray as $b8hua$mapArray } from "solid-js";
 import { ListenableSet as $b8hua$ListenableSet, catchify as $b8hua$catchify, use_href_accessor as $b8hua$use_href_accessor, report as $b8hua$report1 } from "@depict-ai/utilishared/ES10";
 import $b8hua$babelruntimehelpersdefineProperty from "@babel/runtime/helpers/defineProperty";
@@ -10,14 +10,15 @@ 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.23";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "3.0.25";
 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>"];
+const $002f09d00aac50b2$var$_tmpl$ = ["<div", ">", "</div>"],
+  $002f09d00aac50b2$var$_tmpl$2 = ["<div", ' class="depict-slider depict"><button aria-label="Scroll left" class="left d-navbutton" type="button">', '</button><button aria-label="Scroll right" class="right d-navbutton" type="button">', '</button><div class="sliding">', "</div></div>"];
 function $002f09d00aac50b2$export$6649caad96ef8870(_ref) {
   let {
     children: children,
@@ -28,27 +29,43 @@ function $002f09d00aac50b2$export$6649caad96ef8870(_ref) {
     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_
-      })))]
+  const [hasHydrated, setHasHydrated] = $b8hua$createSignal(false);
+  $b8hua$createEffect(() => setHasHydrated(true));
+  const MakeButton = () => $b8hua$ssr($002f09d00aac50b2$var$_tmpl$, $b8hua$ssrHydrationKey(), $b8hua$escape($b8hua$createComponent((0, $ca6ab5f08bd28bca$export$8be2714ec7f169ee), {
+    height_: arrow_height_,
+    width_: arrow_width_
+  })));
+  // To support SSR it would be very hard to make Amazing_Slider compatible with solid's SSR because it would have to be rewritten in a more JSX way
+  // However, all it would do on the server (when used by SlidableItems) is creating the following 5 div elements
+  // Therefore, we just bail on the server (and first render on the client which is the hydration) and return a static version of the slider
+  // Once we have hydrated, we construct and insert the actual slider
+  return $b8hua$createComponent((0, $b8hua$Show), {
+    get when() {
+      return hasHydrated() && !(0, $b8hua$isServer);
     },
-    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_]
+    get fallback() {
+      return $b8hua$ssr($002f09d00aac50b2$var$_tmpl$2, $b8hua$ssrHydrationKey(), $b8hua$escape($b8hua$createComponent(MakeButton, {})), $b8hua$escape($b8hua$createComponent(MakeButton, {})), $b8hua$escape(children));
+    },
+    get children() {
+      return (() => {
+        const slider = new (0, $b8hua$Amazing_Slider)({
+          button_contents: {
+            left: [MakeButton()],
+            right: [MakeButton()]
+          },
+          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;
+      })();
+    }
   });
-  $b8hua$insert(slider.insert_here, children);
-  $b8hua$onCleanup(() => slider.observer.disconnect());
-  slider_ref_ === null || slider_ref_ === void 0 || slider_ref_(slider);
-  return slider.container;
 }
 const $6a439680ae7e9ba3$var$_tmpl$ = ["<section", ' aria-live="polite" role="region" class="tabs-body">', "</section>"],
   $6a439680ae7e9ba3$var$_tmpl$2 = ["<nav", ' role="tablist" class="tabs-bar">', "</nav>"],
@@ -1651,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);

package/server/latest/index.cjs

@@ -77,12 +77,13 @@ $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.23";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "3.0.25";
 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));
 }
-const $a0e53f99354809d9$var$_tmpl$ = ["<div", ">", "</div>"];
+const $a0e53f99354809d9$var$_tmpl$ = ["<div", ">", "</div>"],
+  $a0e53f99354809d9$var$_tmpl$2 = ["<div", ' class="depict-slider depict"><button aria-label="Scroll left" class="left d-navbutton" type="button">', '</button><button aria-label="Scroll right" class="right d-navbutton" type="button">', '</button><div class="sliding">', "</div></div>"];
 function $a0e53f99354809d9$export$6649caad96ef8870({
   children: children,
   slider_ref_: slider_ref_,
@@ -92,27 +93,43 @@ function $a0e53f99354809d9$export$6649caad96ef8870({
   arrow_width_: arrow_width_,
   arrow_height_: arrow_height_
 }) {
-  const slider = new (0, $5vyXB$depictaiutilishared.Amazing_Slider)({
-    button_contents: {
-      left: [$5vyXB$solidjsweb.ssr($a0e53f99354809d9$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $0f313083912e447a$export$8be2714ec7f169ee), {
-        height_: arrow_height_,
-        width_: arrow_width_
-      })))],
-      right: [$5vyXB$solidjsweb.ssr($a0e53f99354809d9$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $0f313083912e447a$export$8be2714ec7f169ee), {
-        height_: arrow_height_,
-        width_: arrow_width_
-      })))]
+  const [hasHydrated, setHasHydrated] = $5vyXB$solidjs.createSignal(false);
+  $5vyXB$solidjs.createEffect(() => setHasHydrated(true));
+  const MakeButton = () => $5vyXB$solidjsweb.ssr($a0e53f99354809d9$var$_tmpl$, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent((0, $0f313083912e447a$export$8be2714ec7f169ee), {
+    height_: arrow_height_,
+    width_: arrow_width_
+  })));
+  // To support SSR it would be very hard to make Amazing_Slider compatible with solid's SSR because it would have to be rewritten in a more JSX way
+  // However, all it would do on the server (when used by SlidableItems) is creating the following 5 div elements
+  // Therefore, we just bail on the server (and first render on the client which is the hydration) and return a static version of the slider
+  // Once we have hydrated, we construct and insert the actual slider
+  return $5vyXB$solidjsweb.createComponent((0, $5vyXB$solidjs.Show), {
+    get when() {
+      return hasHydrated() && !(0, $5vyXB$solidjsweb.isServer);
     },
-    constructor_plugins: [$5vyXB$depictaiutilishared.slider_snap_css().constructor_plugin],
-    mutation_plugins: [...(disable_fading_ ? [] : [$5vyXB$depictaiutilishared.slider_fading_factory({
-      threshold_: 0.96,
-      faded_opacity_: faded_opacity_
-    }).mutation_plugin_]), ...mutation_plugins_]
+    get fallback() {
+      return $5vyXB$solidjsweb.ssr($a0e53f99354809d9$var$_tmpl$2, $5vyXB$solidjsweb.ssrHydrationKey(), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(MakeButton, {})), $5vyXB$solidjsweb.escape($5vyXB$solidjsweb.createComponent(MakeButton, {})), $5vyXB$solidjsweb.escape(children));
+    },
+    get children() {
+      return (() => {
+        const slider = new (0, $5vyXB$depictaiutilishared.Amazing_Slider)({
+          button_contents: {
+            left: [MakeButton()],
+            right: [MakeButton()]
+          },
+          constructor_plugins: [$5vyXB$depictaiutilishared.slider_snap_css().constructor_plugin],
+          mutation_plugins: [...(disable_fading_ ? [] : [$5vyXB$depictaiutilishared.slider_fading_factory({
+            threshold_: 0.96,
+            faded_opacity_: faded_opacity_
+          }).mutation_plugin_]), ...mutation_plugins_]
+        });
+        $5vyXB$solidjsweb.insert(slider.insert_here, children);
+        $5vyXB$solidjs.onCleanup(() => slider.observer.disconnect());
+        slider_ref_?.(slider);
+        return slider.container;
+      })();
+    }
   });
-  $5vyXB$solidjsweb.insert(slider.insert_here, children);
-  $5vyXB$solidjs.onCleanup(() => slider.observer.disconnect());
-  slider_ref_?.(slider);
-  return slider.container;
 }
 const $8c38828ae2321937$var$_tmpl$ = ["<section", ' aria-live="polite" role="region" class="tabs-body">', "</section>"],
   $8c38828ae2321937$var$_tmpl$2 = ["<nav", ' role="tablist" class="tabs-bar">', "</nav>"],
@@ -1635,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);

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.23";
+export const version = "3.0.25";
 export type SDKColsAtSize = [number, number?][];
 /**
  * Transform SDK ColsAtSize into valid Layout ColsAtSize
@@ -222,7 +222,7 @@ export function SlidableItems({
   mutation_plugins_?: ((this: Amazing_Slider, mutations: IntersectionObserverEntry[], intersecting_items: Record<number, IntersectionObserverEntry>) => unknown)[];
   arrow_width_?: number;
   arrow_height_?: number;
-}): HTMLDivElement;
+}): JSX.Element;
 /**
  * Renders a set of tabs
  * Will ignore any children that's not a <Tab />
@@ -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

package/server/latest/index.js

@@ -1,5 +1,5 @@
 import { add_to_version_info as $i7OB2$add_to_version_info, Amazing_Slider as $i7OB2$Amazing_Slider, slider_snap_css as $i7OB2$slider_snap_css, slider_fading_factory as $i7OB2$slider_fading_factory, get_session_id as $i7OB2$get_session_id, add_version_query_params as $i7OB2$add_version_query_params, base_url as $i7OB2$base_url, dwarn as $i7OB2$dwarn, catchify as $i7OB2$catchify1, observer as $i7OB2$observer, instant_exec_on_suspect_history_change as $i7OB2$instant_exec_on_suspect_history_change, report as $i7OB2$report, dlog as $i7OB2$dlog, ContainedImage as $i7OB2$ContainedImage, use_href_accessor as $i7OB2$use_href_accessor1, camelCasifyObject as $i7OB2$camelCasifyObject, make_random_classname as $i7OB2$make_random_classname, n_col_styling_with_dist as $i7OB2$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $i7OB2$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $i7OB2$layout_get_total_rec_amount_for_row, layout_media_query_header as $i7OB2$layout_media_query_header, base64_encode_unicode as $i7OB2$base64_encode_unicode, base64_decode_unicode as $i7OB2$base64_decode_unicode, queueMacroTask as $i7OB2$queueMacroTask, is_safari as $i7OB2$is_safari, slider_fractional_factory as $i7OB2$slider_fractional_factory, useExpandingContainer as $i7OB2$useExpandingContainer, standard_price_format as $i7OB2$standard_price_format, hex_to_rgb as $i7OB2$hex_to_rgb, relative_luminance_from_rgb as $i7OB2$relative_luminance_from_rgb, snakeCasifyObject as $i7OB2$snakeCasifyObject, fetch_retry as $i7OB2$fetch_retry, sort_obj as $i7OB2$sort_obj, make_url_with_query_params as $i7OB2$make_url_with_query_params, javascript_media_query as $i7OB2$javascript_media_query, make_asyncIterable_exiter as $i7OB2$make_asyncIterable_exiter, href_change_ipns as $i7OB2$href_change_ipns, deparallelize_no_drop as $i7OB2$deparallelize_no_drop, ListenableSet as $i7OB2$ListenableSet1, insert_surfaces as $i7OB2$insert_surfaces } from "@depict-ai/utilishared/latest";
-import { createComponent as $i7OB2$createComponent, mergeProps as $i7OB2$mergeProps, Dynamic as $i7OB2$Dynamic, ssr as $i7OB2$ssr, ssrHydrationKey as $i7OB2$ssrHydrationKey, escape as $i7OB2$escape, ssrAttribute as $i7OB2$ssrAttribute, insert as $i7OB2$insert, ssrElement as $i7OB2$ssrElement, ssrClassList as $i7OB2$ssrClassList, ssrStyle as $i7OB2$ssrStyle, isServer as $i7OB2$isServer, spread as $i7OB2$spread } from "solid-js/web";
+import { createComponent as $i7OB2$createComponent, mergeProps as $i7OB2$mergeProps, Dynamic as $i7OB2$Dynamic, ssr as $i7OB2$ssr, ssrHydrationKey as $i7OB2$ssrHydrationKey, escape as $i7OB2$escape, ssrAttribute as $i7OB2$ssrAttribute, isServer as $i7OB2$isServer, insert as $i7OB2$insert, ssrElement as $i7OB2$ssrElement, ssrClassList as $i7OB2$ssrClassList, ssrStyle as $i7OB2$ssrStyle, spread as $i7OB2$spread } from "solid-js/web";
 import { createContext as $i7OB2$createContext, useContext as $i7OB2$useContext, createSignal as $i7OB2$createSignal, createSelector as $i7OB2$createSelector, getOwner as $i7OB2$getOwner, runWithOwner as $i7OB2$runWithOwner, Index as $i7OB2$Index, createMemo as $i7OB2$createMemo, children as $i7OB2$children, onCleanup as $i7OB2$onCleanup, createEffect as $i7OB2$createEffect, untrack as $i7OB2$untrack, Show as $i7OB2$Show, createUniqueId as $i7OB2$createUniqueId, mergeProps as $i7OB2$mergeProps1, ErrorBoundary as $i7OB2$ErrorBoundary, createResource as $i7OB2$createResource, splitProps as $i7OB2$splitProps, createRoot as $i7OB2$createRoot, createRenderEffect as $i7OB2$createRenderEffect, batch as $i7OB2$batch, Suspense as $i7OB2$Suspense, on as $i7OB2$on, For as $i7OB2$For, createComputed as $i7OB2$createComputed, createReaction as $i7OB2$createReaction, mapArray as $i7OB2$mapArray } from "solid-js";
 import { ListenableSet as $i7OB2$ListenableSet, catchify as $i7OB2$catchify, use_href_accessor as $i7OB2$use_href_accessor, report as $i7OB2$report1 } from "@depict-ai/utilishared/latest";
 import { createStore as $i7OB2$createStore, reconcile as $i7OB2$reconcile } from "solid-js/store";
@@ -7,12 +7,13 @@ 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.23";
+const $ec291e0010116877$export$83d89fbfd8236492 = "3.0.25";
 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));
 }
-const $f32e14878e75af51$var$_tmpl$ = ["<div", ">", "</div>"];
+const $f32e14878e75af51$var$_tmpl$ = ["<div", ">", "</div>"],
+  $f32e14878e75af51$var$_tmpl$2 = ["<div", ' class="depict-slider depict"><button aria-label="Scroll left" class="left d-navbutton" type="button">', '</button><button aria-label="Scroll right" class="right d-navbutton" type="button">', '</button><div class="sliding">', "</div></div>"];
 function $f32e14878e75af51$export$6649caad96ef8870({
   children: children,
   slider_ref_: slider_ref_,
@@ -22,27 +23,43 @@ function $f32e14878e75af51$export$6649caad96ef8870({
   arrow_width_: arrow_width_,
   arrow_height_: arrow_height_
 }) {
-  const slider = new (0, $i7OB2$Amazing_Slider)({
-    button_contents: {
-      left: [$i7OB2$ssr($f32e14878e75af51$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape($i7OB2$createComponent((0, $fbbadcb080ad1d4a$export$8be2714ec7f169ee), {
-        height_: arrow_height_,
-        width_: arrow_width_
-      })))],
-      right: [$i7OB2$ssr($f32e14878e75af51$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape($i7OB2$createComponent((0, $fbbadcb080ad1d4a$export$8be2714ec7f169ee), {
-        height_: arrow_height_,
-        width_: arrow_width_
-      })))]
+  const [hasHydrated, setHasHydrated] = $i7OB2$createSignal(false);
+  $i7OB2$createEffect(() => setHasHydrated(true));
+  const MakeButton = () => $i7OB2$ssr($f32e14878e75af51$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape($i7OB2$createComponent((0, $fbbadcb080ad1d4a$export$8be2714ec7f169ee), {
+    height_: arrow_height_,
+    width_: arrow_width_
+  })));
+  // To support SSR it would be very hard to make Amazing_Slider compatible with solid's SSR because it would have to be rewritten in a more JSX way
+  // However, all it would do on the server (when used by SlidableItems) is creating the following 5 div elements
+  // Therefore, we just bail on the server (and first render on the client which is the hydration) and return a static version of the slider
+  // Once we have hydrated, we construct and insert the actual slider
+  return $i7OB2$createComponent((0, $i7OB2$Show), {
+    get when() {
+      return hasHydrated() && !(0, $i7OB2$isServer);
     },
-    constructor_plugins: [$i7OB2$slider_snap_css().constructor_plugin],
-    mutation_plugins: [...(disable_fading_ ? [] : [$i7OB2$slider_fading_factory({
-      threshold_: 0.96,
-      faded_opacity_: faded_opacity_
-    }).mutation_plugin_]), ...mutation_plugins_]
+    get fallback() {
+      return $i7OB2$ssr($f32e14878e75af51$var$_tmpl$2, $i7OB2$ssrHydrationKey(), $i7OB2$escape($i7OB2$createComponent(MakeButton, {})), $i7OB2$escape($i7OB2$createComponent(MakeButton, {})), $i7OB2$escape(children));
+    },
+    get children() {
+      return (() => {
+        const slider = new (0, $i7OB2$Amazing_Slider)({
+          button_contents: {
+            left: [MakeButton()],
+            right: [MakeButton()]
+          },
+          constructor_plugins: [$i7OB2$slider_snap_css().constructor_plugin],
+          mutation_plugins: [...(disable_fading_ ? [] : [$i7OB2$slider_fading_factory({
+            threshold_: 0.96,
+            faded_opacity_: faded_opacity_
+          }).mutation_plugin_]), ...mutation_plugins_]
+        });
+        $i7OB2$insert(slider.insert_here, children);
+        $i7OB2$onCleanup(() => slider.observer.disconnect());
+        slider_ref_?.(slider);
+        return slider.container;
+      })();
+    }
   });
-  $i7OB2$insert(slider.insert_here, children);
-  $i7OB2$onCleanup(() => slider.observer.disconnect());
-  slider_ref_?.(slider);
-  return slider.container;
 }
 const $024fbc0a2d796fad$var$_tmpl$ = ["<section", ' aria-live="polite" role="region" class="tabs-body">', "</section>"],
   $024fbc0a2d796fad$var$_tmpl$2 = ["<nav", ' role="tablist" class="tabs-bar">', "</nav>"],
@@ -1565,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);