@depict-ai/ui 2.1.18 → 2.1.20

package/ES10/index.cjs

@@ -76,7 +76,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $33eed84f447aa0c0$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447aa0c0$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "2.1.18";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "2.1.20";
 const $a68b73fd7ba0853f$var$fallback_operator = "in";
 const $a68b73fd7ba0853f$var$fallback_token = "";
 const $a68b73fd7ba0853f$var$legacy_filter_prefix = "filter_";
@@ -272,7 +272,16 @@ 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.effect(_$p => $52FdA$solidjsweb.style(_el$, "position:relative;width:100%;padding-bottom:".concat(1 / props.aspectRatio * 100, "%"), _$p));
+    $52FdA$solidjsweb.effect(_p$ => {
+      const _v$ = "position:relative;width:100%;padding-bottom:".concat(1 / props.aspectRatio * 100, "%"),
+        _v$2 = props.class;
+      _p$._v$ = $52FdA$solidjsweb.style(_el$, _v$, _p$._v$);
+      _v$2 !== _p$._v$2 && $52FdA$solidjsweb.className(_el$, _p$._v$2 = _v$2);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined
+    });
     return _el$;
   })();
 }
@@ -436,6 +445,9 @@ function $28535bb7671c63d1$export$e4b984597b71e989(props) {
   const container = $52FdA$solidjsweb.createComponent((0, $ce467edb5343cfcd$export$94026ee33dbabc26), {
     get aspectRatio() {
       return props.aspectRatio;
+    },
+    get ["class"]() {
+      return props.class;
     }
   });
   const owner = $52FdA$solidjs.getOwner();

package/ES10/index.d.ts

@@ -1,13 +1,13 @@
 import { JSX, Accessor, Signal, Setter } from "solid-js";
 import { report, Display, Amazing_Slider, ColsAtSize, Elem, ModernDisplay, Node_Array } from "@depict-ai/utilishared/ES10";
-import { SearchFilter, SearchRequest } from "@depict-ai/types/api/SearchRequest";
+import { SearchFilter, SearchRequestV2 } from "@depict-ai/types/api/SearchRequestV2";
 import { SearchFilter as _SearchFilter1, ContentLink, SearchResponse } from "@depict-ai/types/api/SearchResponse";
-import { BaseCategoryDisplay, ProductListingResponse } from "@depict-ai/types/api/ProductListingResponse";
+import { BaseCategoryDisplay, ProductListingResponseV2 } from "@depict-ai/types/api/ProductListingResponseV2";
 import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/api/SearchSuggestionsResponse";
-import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
-import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
+import { BaseSearchRequestV2 } from "@depict-ai/types/api/BaseSearchRequestV2";
+import { SearchSuggestionsRequestV2 } from "@depict-ai/types/api/SearchSuggestionsRequestV2";
 import { ProductListingRequestV2 } from "@depict-ai/types/api/ProductListingRequestV2";
-export const version = "2.1.18";
+export const version = "2.1.20";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
@@ -145,6 +145,7 @@ export function useListing(): Record<symbol, any> | undefined;
  */
 export function ImageContainer(props: {
   aspectRatio: number;
+  class?: string;
 }): HTMLDivElement;
 /**
  * Returns an accessor that will update when the size of the provided element changes, to be used with ResponsiveImg
@@ -173,10 +174,12 @@ export const shopifyContainedImageContextSymbol: unique symbol;
  * This works because the listings (recs, search, plp) all are wrapped in `<ListingProvider>`'s. This means all components rendered within can use `useListing` to get an object to write data to that will be the same for all components rendered within that listing. The first instance of this component rendered within a listing puts a ResizeObserver on its div and the other components then just set the sizes attribute of their image to that.
  * @property src image source
  * @property aspectRatio aspect ratio of the image
+ * @property class extra class to add to the container
  */
 export function ShopifyContainedImage(props: {
   src: string;
   aspectRatio: number;
+  class?: string;
 }): HTMLDivElement;
 /** @jsxImportSource solid-js */
 export function GenericSliderArrowButton(props?: {
@@ -652,7 +655,7 @@ type ReplaceBaseCategoryDisplay<T> = T extends BaseCategoryDisplay ? BaseCategor
 type _AddPageUrlToDisplay1<T extends any[]> = (T[number] & {
   page_url: string;
 })[];
-type ProductListingResponseAfterURLCreator = { [K in keyof ProductListingResponse]: K extends "displays" ? _AddPageUrlToDisplay1<ProductListingResponse[K]> : K extends "breadcrumb" | "quick_links" ? ReplaceBaseCategoryDisplay<ProductListingResponse[K]> : K extends "filters" ? AddActualFieldToFilters<ProductListingResponse[K]> : ProductListingResponse[K] };
+type ProductListingResponseAfterURLCreator = { [K in keyof ProductListingResponseV2]: K extends "displays" ? _AddPageUrlToDisplay1<ProductListingResponseV2[K]> : K extends "breadcrumb" | "quick_links" ? ReplaceBaseCategoryDisplay<ProductListingResponseV2[K]> : K extends "filters" ? AddActualFieldToFilters<ProductListingResponseV2[K]> : ProductListingResponseV2[K] };
 type DepictAPIConstructorOptions<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = {
   get_metadata?: () => Promise<{
     [k: string]: string;
@@ -669,16 +672,16 @@ export class DepictAPI<InputDisplay extends Display, OutputDisplay extends Moder
   page_url_creator: PageURLCreator<ModernDisplay, OutputDisplay> | undefined;
   display_transformers: DisplayTransformers<ModernDisplay, OutputDisplay> | undefined;
   constructor(options: DepictAPIConstructorOptions<InputDisplay, OutputDisplay>);
-  suggest(input_req: SearchSuggestionsRequest): Promise<SearchSuggestionsResponseAfterURLCreator & {
+  suggest(input_req: SearchSuggestionsRequestV2): Promise<SearchSuggestionsResponseAfterURLCreator & {
     failed?: true;
   }>;
-  query(input_req: SearchRequest): Promise<SearchResponseAfterURLCreator & {
+  query(input_req: SearchRequestV2): Promise<SearchResponseAfterURLCreator & {
     failed?: true;
   }>;
   list(input_req: ProductListingRequestV2): Promise<ProductListingResponseAfterURLCreator & {
     failed?: true;
   }>;
-  get_recommended<T extends Display>(input_req: BaseSearchRequest): Promise<{
+  get_recommended<T extends Display>(input_req: BaseSearchRequestV2): Promise<{
     displays: T[];
   } & {
     failed?: true | undefined;
@@ -1141,4 +1144,4 @@ export const defaultCategoryTitlePlugin: ({
   category_title_: import("solid-js").Accessor<string | undefined>;
   product_count_: import("solid-js").JSX.Element;
 }) => import("solid-js").JSX.Element;
-export type { SearchFilter } from "@depict-ai/types/api/SearchRequest";
+export type { SearchFilter } from "@depict-ai/types/api/SearchRequestV2";

package/ES10/index.js

@@ -1,5 +1,5 @@
 import { add_to_version_info as $8tj43$add_to_version_info, base64_encode_unicode as $8tj43$base64_encode_unicode, base64_decode_unicode as $8tj43$base64_decode_unicode, dlog as $8tj43$dlog, queueMacroTask as $8tj43$queueMacroTask, catchify as $8tj43$catchify, is_safari as $8tj43$is_safari, observer as $8tj43$observer, dwarn as $8tj43$dwarn, Amazing_Slider as $8tj43$Amazing_Slider, slider_snap_css as $8tj43$slider_snap_css, slider_fading_factory as $8tj43$slider_fading_factory, slider_fractional_factory as $8tj43$slider_fractional_factory, 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, report as $8tj43$report, 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, fetch_recs as $8tj43$fetch_recs, snakeCasifyObject as $8tj43$snakeCasifyObject, instant_exec_on_suspect_history_change as $8tj43$instant_exec_on_suspect_history_change, base_url as $8tj43$base_url, get_depict_id as $8tj43$get_depict_id, get_user_id as $8tj43$get_user_id, get_session_id as $8tj43$get_session_id, make_url_with_query_params as $8tj43$make_url_with_query_params, fetch_retry as $8tj43$fetch_retry, add_version_query_params as $8tj43$add_version_query_params, sort_obj as $8tj43$sort_obj, edit_current_page_meta_tags as $8tj43$edit_current_page_meta_tags, javascript_media_query as $8tj43$javascript_media_query, use_href_accessor as $8tj43$use_href_accessor, is_debug as $8tj43$is_debug, make_asyncIterable_exiter as $8tj43$make_asyncIterable_exiter, href_change_ipns as $8tj43$href_change_ipns, ContainedImage as $8tj43$ContainedImage, buildThresholdList as $8tj43$buildThresholdList, deparallelize_no_drop as $8tj43$deparallelize_no_drop, ListenableSet as $8tj43$ListenableSet, insert_surfaces as $8tj43$insert_surfaces } from "@depict-ai/utilishared/ES10";
-import { createComponent as $8tj43$createComponent, insert as $8tj43$insert, template as $8tj43$template, getNextElement as $8tj43$getNextElement, effect as $8tj43$effect, style as $8tj43$style, spread as $8tj43$spread, setAttribute as $8tj43$setAttribute, mergeProps as $8tj43$mergeProps1, isServer as $8tj43$isServer, runHydrationEvents as $8tj43$runHydrationEvents, addEventListener as $8tj43$addEventListener, className as $8tj43$className, memo as $8tj43$memo, delegateEvents as $8tj43$delegateEvents, getNextMarker as $8tj43$getNextMarker, classList as $8tj43$classList, use as $8tj43$use, Dynamic as $8tj43$Dynamic, setProperty as $8tj43$setProperty } from "solid-js/web";
+import { createComponent as $8tj43$createComponent, insert as $8tj43$insert, template as $8tj43$template, getNextElement as $8tj43$getNextElement, effect as $8tj43$effect, style as $8tj43$style, className as $8tj43$className, spread as $8tj43$spread, setAttribute as $8tj43$setAttribute, mergeProps as $8tj43$mergeProps1, isServer as $8tj43$isServer, runHydrationEvents as $8tj43$runHydrationEvents, addEventListener as $8tj43$addEventListener, memo as $8tj43$memo, delegateEvents as $8tj43$delegateEvents, getNextMarker as $8tj43$getNextMarker, classList as $8tj43$classList, use as $8tj43$use, Dynamic as $8tj43$Dynamic, setProperty as $8tj43$setProperty } from "solid-js/web";
 import { createSignal as $8tj43$createSignal, getOwner as $8tj43$getOwner, createEffect as $8tj43$createEffect, runWithOwner as $8tj43$runWithOwner, onCleanup as $8tj43$onCleanup, createMemo as $8tj43$createMemo, createContext as $8tj43$createContext, useContext as $8tj43$useContext, mergeProps as $8tj43$mergeProps, Show as $8tj43$Show, createResource as $8tj43$createResource, Suspense as $8tj43$Suspense, untrack as $8tj43$untrack, createRenderEffect as $8tj43$createRenderEffect, Index as $8tj43$Index, createRoot as $8tj43$createRoot, For as $8tj43$For, createUniqueId as $8tj43$createUniqueId, createComputed as $8tj43$createComputed, ErrorBoundary as $8tj43$ErrorBoundary, on as $8tj43$on, batch as $8tj43$batch, createReaction as $8tj43$createReaction, mapArray as $8tj43$mapArray } from "solid-js";
 import $8tj43$babelruntimehelpersclassPrivateFieldSet from "@babel/runtime/helpers/classPrivateFieldSet";
 import $8tj43$babelruntimehelpersclassPrivateFieldGet from "@babel/runtime/helpers/classPrivateFieldGet";
@@ -9,7 +9,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 = "2.1.18";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "2.1.20";
 const $2855bffe06ef7a03$var$fallback_operator = "in";
 const $2855bffe06ef7a03$var$fallback_token = "";
 const $2855bffe06ef7a03$var$legacy_filter_prefix = "filter_";
@@ -205,7 +205,16 @@ const $801e8845d3fa3653$var$_tmpl$ = /*#__PURE__*/$8tj43$template(`<div>`);
 function $801e8845d3fa3653$export$94026ee33dbabc26(props) {
   return (() => {
     const _el$ = $8tj43$getNextElement($801e8845d3fa3653$var$_tmpl$);
-    $8tj43$effect(_$p => $8tj43$style(_el$, "position:relative;width:100%;padding-bottom:".concat(1 / props.aspectRatio * 100, "%"), _$p));
+    $8tj43$effect(_p$ => {
+      const _v$ = "position:relative;width:100%;padding-bottom:".concat(1 / props.aspectRatio * 100, "%"),
+        _v$2 = props.class;
+      _p$._v$ = $8tj43$style(_el$, _v$, _p$._v$);
+      _v$2 !== _p$._v$2 && $8tj43$className(_el$, _p$._v$2 = _v$2);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined
+    });
     return _el$;
   })();
 }
@@ -369,6 +378,9 @@ function $4df489344a0f97c7$export$e4b984597b71e989(props) {
   const container = $8tj43$createComponent((0, $801e8845d3fa3653$export$94026ee33dbabc26), {
     get aspectRatio() {
       return props.aspectRatio;
+    },
+    get ["class"]() {
+      return props.class;
     }
   });
   const owner = $8tj43$getOwner();

package/latest/index.cjs

@@ -70,7 +70,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad997933$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "2.1.18";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "2.1.20";
 const $1ab22f2cd39b3061$var$fallback_operator = "in";
 const $1ab22f2cd39b3061$var$fallback_token = "";
 const $1ab22f2cd39b3061$var$legacy_filter_prefix = "filter_";
@@ -261,7 +261,16 @@ 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.effect(_$p => $gVhhF$solidjsweb.style(_el$, `position:relative;width:100%;padding-bottom:${1 / props.aspectRatio * 100}%`, _$p));
+    $gVhhF$solidjsweb.effect(_p$ => {
+      const _v$ = `position:relative;width:100%;padding-bottom:${1 / props.aspectRatio * 100}%`,
+        _v$2 = props.class;
+      _p$._v$ = $gVhhF$solidjsweb.style(_el$, _v$, _p$._v$);
+      _v$2 !== _p$._v$2 && $gVhhF$solidjsweb.className(_el$, _p$._v$2 = _v$2);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined
+    });
     return _el$;
   })();
 }
@@ -422,6 +431,9 @@ function $a33065cfed827fc0$export$e4b984597b71e989(props) {
   const container = $gVhhF$solidjsweb.createComponent((0, $93304d59a9747aa6$export$94026ee33dbabc26), {
     get aspectRatio() {
       return props.aspectRatio;
+    },
+    get ["class"]() {
+      return props.class;
     }
   });
   const owner = $gVhhF$solidjs.getOwner();

package/latest/index.d.ts

@@ -1,13 +1,13 @@
 import { JSX, Accessor, Signal, Setter } from "solid-js";
 import { report, Display, Amazing_Slider, ColsAtSize, Elem, ModernDisplay, Node_Array } from "@depict-ai/utilishared/latest";
-import { SearchFilter, SearchRequest } from "@depict-ai/types/api/SearchRequest";
+import { SearchFilter, SearchRequestV2 } from "@depict-ai/types/api/SearchRequestV2";
 import { SearchFilter as _SearchFilter1, ContentLink, SearchResponse } from "@depict-ai/types/api/SearchResponse";
-import { BaseCategoryDisplay, ProductListingResponse } from "@depict-ai/types/api/ProductListingResponse";
+import { BaseCategoryDisplay, ProductListingResponseV2 } from "@depict-ai/types/api/ProductListingResponseV2";
 import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/api/SearchSuggestionsResponse";
-import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
-import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
+import { BaseSearchRequestV2 } from "@depict-ai/types/api/BaseSearchRequestV2";
+import { SearchSuggestionsRequestV2 } from "@depict-ai/types/api/SearchSuggestionsRequestV2";
 import { ProductListingRequestV2 } from "@depict-ai/types/api/ProductListingRequestV2";
-export const version = "2.1.18";
+export const version = "2.1.20";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
@@ -145,6 +145,7 @@ export function useListing(): Record<symbol, any> | undefined;
  */
 export function ImageContainer(props: {
   aspectRatio: number;
+  class?: string;
 }): HTMLDivElement;
 /**
  * Returns an accessor that will update when the size of the provided element changes, to be used with ResponsiveImg
@@ -173,10 +174,12 @@ export const shopifyContainedImageContextSymbol: unique symbol;
  * This works because the listings (recs, search, plp) all are wrapped in `<ListingProvider>`'s. This means all components rendered within can use `useListing` to get an object to write data to that will be the same for all components rendered within that listing. The first instance of this component rendered within a listing puts a ResizeObserver on its div and the other components then just set the sizes attribute of their image to that.
  * @property src image source
  * @property aspectRatio aspect ratio of the image
+ * @property class extra class to add to the container
  */
 export function ShopifyContainedImage(props: {
   src: string;
   aspectRatio: number;
+  class?: string;
 }): HTMLDivElement;
 /** @jsxImportSource solid-js */
 export function GenericSliderArrowButton(props?: {
@@ -652,7 +655,7 @@ type ReplaceBaseCategoryDisplay<T> = T extends BaseCategoryDisplay ? BaseCategor
 type _AddPageUrlToDisplay1<T extends any[]> = (T[number] & {
   page_url: string;
 })[];
-type ProductListingResponseAfterURLCreator = { [K in keyof ProductListingResponse]: K extends "displays" ? _AddPageUrlToDisplay1<ProductListingResponse[K]> : K extends "breadcrumb" | "quick_links" ? ReplaceBaseCategoryDisplay<ProductListingResponse[K]> : K extends "filters" ? AddActualFieldToFilters<ProductListingResponse[K]> : ProductListingResponse[K] };
+type ProductListingResponseAfterURLCreator = { [K in keyof ProductListingResponseV2]: K extends "displays" ? _AddPageUrlToDisplay1<ProductListingResponseV2[K]> : K extends "breadcrumb" | "quick_links" ? ReplaceBaseCategoryDisplay<ProductListingResponseV2[K]> : K extends "filters" ? AddActualFieldToFilters<ProductListingResponseV2[K]> : ProductListingResponseV2[K] };
 type DepictAPIConstructorOptions<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = {
   get_metadata?: () => Promise<{
     [k: string]: string;
@@ -669,16 +672,16 @@ export class DepictAPI<InputDisplay extends Display, OutputDisplay extends Moder
   page_url_creator: PageURLCreator<ModernDisplay, OutputDisplay> | undefined;
   display_transformers: DisplayTransformers<ModernDisplay, OutputDisplay> | undefined;
   constructor(options: DepictAPIConstructorOptions<InputDisplay, OutputDisplay>);
-  suggest(input_req: SearchSuggestionsRequest): Promise<SearchSuggestionsResponseAfterURLCreator & {
+  suggest(input_req: SearchSuggestionsRequestV2): Promise<SearchSuggestionsResponseAfterURLCreator & {
     failed?: true;
   }>;
-  query(input_req: SearchRequest): Promise<SearchResponseAfterURLCreator & {
+  query(input_req: SearchRequestV2): Promise<SearchResponseAfterURLCreator & {
     failed?: true;
   }>;
   list(input_req: ProductListingRequestV2): Promise<ProductListingResponseAfterURLCreator & {
     failed?: true;
   }>;
-  get_recommended<T extends Display>(input_req: BaseSearchRequest): Promise<{
+  get_recommended<T extends Display>(input_req: BaseSearchRequestV2): Promise<{
     displays: T[];
   } & {
     failed?: true | undefined;
@@ -1141,4 +1144,4 @@ export const defaultCategoryTitlePlugin: ({
   category_title_: import("solid-js").Accessor<string | undefined>;
   product_count_: import("solid-js").JSX.Element;
 }) => import("solid-js").JSX.Element;
-export type { SearchFilter } from "@depict-ai/types/api/SearchRequest";
+export type { SearchFilter } from "@depict-ai/types/api/SearchRequestV2";

package/latest/index.js

@@ -1,12 +1,12 @@
 import { add_to_version_info as $9HbP8$add_to_version_info, base64_encode_unicode as $9HbP8$base64_encode_unicode, base64_decode_unicode as $9HbP8$base64_decode_unicode, dlog as $9HbP8$dlog, queueMacroTask as $9HbP8$queueMacroTask, catchify as $9HbP8$catchify, is_safari as $9HbP8$is_safari, observer as $9HbP8$observer, dwarn as $9HbP8$dwarn, Amazing_Slider as $9HbP8$Amazing_Slider, slider_snap_css as $9HbP8$slider_snap_css, slider_fading_factory as $9HbP8$slider_fading_factory, 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, 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, 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, make_url_with_query_params as $9HbP8$make_url_with_query_params, edit_current_page_meta_tags as $9HbP8$edit_current_page_meta_tags, javascript_media_query as $9HbP8$javascript_media_query, use_href_accessor as $9HbP8$use_href_accessor, 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 { createComponent as $9HbP8$createComponent, insert as $9HbP8$insert, template as $9HbP8$template, getNextElement as $9HbP8$getNextElement, effect as $9HbP8$effect, style as $9HbP8$style, spread as $9HbP8$spread, setAttribute as $9HbP8$setAttribute, mergeProps as $9HbP8$mergeProps1, isServer as $9HbP8$isServer, runHydrationEvents as $9HbP8$runHydrationEvents, addEventListener as $9HbP8$addEventListener, className as $9HbP8$className, memo as $9HbP8$memo, delegateEvents as $9HbP8$delegateEvents, getNextMarker as $9HbP8$getNextMarker, classList as $9HbP8$classList, use as $9HbP8$use, Dynamic as $9HbP8$Dynamic, setProperty as $9HbP8$setProperty } from "solid-js/web";
+import { createComponent as $9HbP8$createComponent, insert as $9HbP8$insert, template as $9HbP8$template, getNextElement as $9HbP8$getNextElement, effect as $9HbP8$effect, style as $9HbP8$style, className as $9HbP8$className, spread as $9HbP8$spread, setAttribute as $9HbP8$setAttribute, mergeProps as $9HbP8$mergeProps1, isServer as $9HbP8$isServer, runHydrationEvents as $9HbP8$runHydrationEvents, addEventListener as $9HbP8$addEventListener, memo as $9HbP8$memo, delegateEvents as $9HbP8$delegateEvents, getNextMarker as $9HbP8$getNextMarker, classList as $9HbP8$classList, use as $9HbP8$use, Dynamic as $9HbP8$Dynamic, setProperty as $9HbP8$setProperty } from "solid-js/web";
 import { createSignal as $9HbP8$createSignal, getOwner as $9HbP8$getOwner, createEffect as $9HbP8$createEffect, runWithOwner as $9HbP8$runWithOwner, onCleanup as $9HbP8$onCleanup, createMemo as $9HbP8$createMemo, createContext as $9HbP8$createContext, useContext as $9HbP8$useContext, mergeProps as $9HbP8$mergeProps, Show as $9HbP8$Show, createResource as $9HbP8$createResource, Suspense as $9HbP8$Suspense, untrack as $9HbP8$untrack, createRenderEffect as $9HbP8$createRenderEffect, Index as $9HbP8$Index, createRoot as $9HbP8$createRoot, For as $9HbP8$For, createUniqueId as $9HbP8$createUniqueId, createComputed as $9HbP8$createComputed, ErrorBoundary as $9HbP8$ErrorBoundary, on as $9HbP8$on, batch as $9HbP8$batch, createReaction as $9HbP8$createReaction, mapArray as $9HbP8$mapArray } from "solid-js";
 import { createStore as $9HbP8$createStore, reconcile as $9HbP8$reconcile } from "solid-js/store";
 
 /*! 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.1.18";
+const $ec291e0010116877$export$83d89fbfd8236492 = "2.1.20";
 const $4147651646da990a$var$fallback_operator = "in";
 const $4147651646da990a$var$fallback_token = "";
 const $4147651646da990a$var$legacy_filter_prefix = "filter_";
@@ -197,7 +197,16 @@ const $f18d425032111270$var$_tmpl$ = /*#__PURE__*/$9HbP8$template(`<div>`);
 function $f18d425032111270$export$94026ee33dbabc26(props) {
   return (() => {
     const _el$ = $9HbP8$getNextElement($f18d425032111270$var$_tmpl$);
-    $9HbP8$effect(_$p => $9HbP8$style(_el$, `position:relative;width:100%;padding-bottom:${1 / props.aspectRatio * 100}%`, _$p));
+    $9HbP8$effect(_p$ => {
+      const _v$ = `position:relative;width:100%;padding-bottom:${1 / props.aspectRatio * 100}%`,
+        _v$2 = props.class;
+      _p$._v$ = $9HbP8$style(_el$, _v$, _p$._v$);
+      _v$2 !== _p$._v$2 && $9HbP8$className(_el$, _p$._v$2 = _v$2);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined
+    });
     return _el$;
   })();
 }
@@ -358,6 +367,9 @@ function $660070e2a394b3c3$export$e4b984597b71e989(props) {
   const container = $9HbP8$createComponent((0, $f18d425032111270$export$94026ee33dbabc26), {
     get aspectRatio() {
       return props.aspectRatio;
+    },
+    get ["class"]() {
+      return props.class;
     }
   });
   const owner = $9HbP8$getOwner();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/ui",
-  "version": "2.1.18",
+  "version": "2.1.20",
   "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",
@@ -237,8 +237,8 @@
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "^7.22.6",
     "@depict-ai/plp-styling": "^1.2.14",
-    "@depict-ai/types": "^1.0.39",
-    "@depict-ai/utilishared": "^1.0.48",
+    "@depict-ai/types": "^2.0.0",
+    "@depict-ai/utilishared": "^1.0.50",
     "solid-js": "^1.8.1"
   },
   "type": "module",

package/server/ES10/index.cjs

@@ -76,7 +76,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $33eed84f447aa0c0$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $33eed84f447aa0c0$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $aa1938dec50d6c12$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $aa1938dec50d6c12$export$83d89fbfd8236492 = "2.1.18";
+const $aa1938dec50d6c12$export$83d89fbfd8236492 = "2.1.20";
 const $a68b73fd7ba0853f$var$fallback_operator = "in";
 const $a68b73fd7ba0853f$var$fallback_token = "";
 const $a68b73fd7ba0853f$var$legacy_filter_prefix = "filter_";
@@ -268,9 +268,9 @@ function $d067f3a30f047b41$export$e68cff63f76bd15b(props) {
 function $d067f3a30f047b41$export$8d0c4fdbb05a2f2e() {
   return $3hooq$solidjs.useContext($d067f3a30f047b41$var$ListingContext);
 }
-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, "%")));
+  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));
 }
 function $858fdcf73148519f$export$e6fffe67d4cdd848(whatToWatch) {
   const [size, setSize] = $3hooq$solidjs.createSignal(0);
@@ -432,6 +432,9 @@ function $28535bb7671c63d1$export$e4b984597b71e989(props) {
   const container = $3hooq$solidjsweb.createComponent((0, $ce467edb5343cfcd$export$94026ee33dbabc26), {
     get aspectRatio() {
       return props.aspectRatio;
+    },
+    get ["class"]() {
+      return props.class;
     }
   });
   const owner = $3hooq$solidjs.getOwner();

package/server/ES10/index.d.ts

@@ -1,13 +1,13 @@
 import { JSX, Accessor, Signal, Setter } from "solid-js";
 import { report, Display, Amazing_Slider, ColsAtSize, Elem, ModernDisplay, Node_Array } from "@depict-ai/utilishared/ES10";
-import { SearchFilter, SearchRequest } from "@depict-ai/types/api/SearchRequest";
+import { SearchFilter, SearchRequestV2 } from "@depict-ai/types/api/SearchRequestV2";
 import { SearchFilter as _SearchFilter1, ContentLink, SearchResponse } from "@depict-ai/types/api/SearchResponse";
-import { BaseCategoryDisplay, ProductListingResponse } from "@depict-ai/types/api/ProductListingResponse";
+import { BaseCategoryDisplay, ProductListingResponseV2 } from "@depict-ai/types/api/ProductListingResponseV2";
 import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/api/SearchSuggestionsResponse";
-import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
-import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
+import { BaseSearchRequestV2 } from "@depict-ai/types/api/BaseSearchRequestV2";
+import { SearchSuggestionsRequestV2 } from "@depict-ai/types/api/SearchSuggestionsRequestV2";
 import { ProductListingRequestV2 } from "@depict-ai/types/api/ProductListingRequestV2";
-export const version = "2.1.18";
+export const version = "2.1.20";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
@@ -145,6 +145,7 @@ export function useListing(): Record<symbol, any> | undefined;
  */
 export function ImageContainer(props: {
   aspectRatio: number;
+  class?: string;
 }): HTMLDivElement;
 /**
  * Returns an accessor that will update when the size of the provided element changes, to be used with ResponsiveImg
@@ -173,10 +174,12 @@ export const shopifyContainedImageContextSymbol: unique symbol;
  * This works because the listings (recs, search, plp) all are wrapped in `<ListingProvider>`'s. This means all components rendered within can use `useListing` to get an object to write data to that will be the same for all components rendered within that listing. The first instance of this component rendered within a listing puts a ResizeObserver on its div and the other components then just set the sizes attribute of their image to that.
  * @property src image source
  * @property aspectRatio aspect ratio of the image
+ * @property class extra class to add to the container
  */
 export function ShopifyContainedImage(props: {
   src: string;
   aspectRatio: number;
+  class?: string;
 }): HTMLDivElement;
 /** @jsxImportSource solid-js */
 export function GenericSliderArrowButton(props?: {
@@ -652,7 +655,7 @@ type ReplaceBaseCategoryDisplay<T> = T extends BaseCategoryDisplay ? BaseCategor
 type _AddPageUrlToDisplay1<T extends any[]> = (T[number] & {
   page_url: string;
 })[];
-type ProductListingResponseAfterURLCreator = { [K in keyof ProductListingResponse]: K extends "displays" ? _AddPageUrlToDisplay1<ProductListingResponse[K]> : K extends "breadcrumb" | "quick_links" ? ReplaceBaseCategoryDisplay<ProductListingResponse[K]> : K extends "filters" ? AddActualFieldToFilters<ProductListingResponse[K]> : ProductListingResponse[K] };
+type ProductListingResponseAfterURLCreator = { [K in keyof ProductListingResponseV2]: K extends "displays" ? _AddPageUrlToDisplay1<ProductListingResponseV2[K]> : K extends "breadcrumb" | "quick_links" ? ReplaceBaseCategoryDisplay<ProductListingResponseV2[K]> : K extends "filters" ? AddActualFieldToFilters<ProductListingResponseV2[K]> : ProductListingResponseV2[K] };
 type DepictAPIConstructorOptions<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = {
   get_metadata?: () => Promise<{
     [k: string]: string;
@@ -669,16 +672,16 @@ export class DepictAPI<InputDisplay extends Display, OutputDisplay extends Moder
   page_url_creator: PageURLCreator<ModernDisplay, OutputDisplay> | undefined;
   display_transformers: DisplayTransformers<ModernDisplay, OutputDisplay> | undefined;
   constructor(options: DepictAPIConstructorOptions<InputDisplay, OutputDisplay>);
-  suggest(input_req: SearchSuggestionsRequest): Promise<SearchSuggestionsResponseAfterURLCreator & {
+  suggest(input_req: SearchSuggestionsRequestV2): Promise<SearchSuggestionsResponseAfterURLCreator & {
     failed?: true;
   }>;
-  query(input_req: SearchRequest): Promise<SearchResponseAfterURLCreator & {
+  query(input_req: SearchRequestV2): Promise<SearchResponseAfterURLCreator & {
     failed?: true;
   }>;
   list(input_req: ProductListingRequestV2): Promise<ProductListingResponseAfterURLCreator & {
     failed?: true;
   }>;
-  get_recommended<T extends Display>(input_req: BaseSearchRequest): Promise<{
+  get_recommended<T extends Display>(input_req: BaseSearchRequestV2): Promise<{
     displays: T[];
   } & {
     failed?: true | undefined;
@@ -1141,4 +1144,4 @@ export const defaultCategoryTitlePlugin: ({
   category_title_: import("solid-js").Accessor<string | undefined>;
   product_count_: import("solid-js").JSX.Element;
 }) => import("solid-js").JSX.Element;
-export type { SearchFilter } from "@depict-ai/types/api/SearchRequest";
+export type { SearchFilter } from "@depict-ai/types/api/SearchRequestV2";

package/server/ES10/index.js

@@ -1,5 +1,5 @@
 import { add_to_version_info as $b8hua$add_to_version_info, base64_encode_unicode as $b8hua$base64_encode_unicode, base64_decode_unicode as $b8hua$base64_decode_unicode, dlog as $b8hua$dlog, queueMacroTask as $b8hua$queueMacroTask, catchify as $b8hua$catchify, is_safari as $b8hua$is_safari, observer as $b8hua$observer, dwarn as $b8hua$dwarn, Amazing_Slider as $b8hua$Amazing_Slider, slider_snap_css as $b8hua$slider_snap_css, slider_fading_factory as $b8hua$slider_fading_factory, 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, 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, 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, sort_obj as $b8hua$sort_obj, edit_current_page_meta_tags as $b8hua$edit_current_page_meta_tags, javascript_media_query as $b8hua$javascript_media_query, use_href_accessor as $b8hua$use_href_accessor, 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 { createComponent as $b8hua$createComponent, insert as $b8hua$insert, ssr as $b8hua$ssr, ssrHydrationKey as $b8hua$ssrHydrationKey, ssrStyle as $b8hua$ssrStyle, spread as $b8hua$spread, escape as $b8hua$escape, ssrAttribute as $b8hua$ssrAttribute, mergeProps as $b8hua$mergeProps1, isServer as $b8hua$isServer, ssrElement as $b8hua$ssrElement, ssrClassList as $b8hua$ssrClassList, Dynamic as $b8hua$Dynamic } from "solid-js/web";
+import { createComponent as $b8hua$createComponent, insert as $b8hua$insert, ssr as $b8hua$ssr, ssrHydrationKey as $b8hua$ssrHydrationKey, ssrStyle as $b8hua$ssrStyle, ssrAttribute as $b8hua$ssrAttribute, escape as $b8hua$escape, spread as $b8hua$spread, mergeProps as $b8hua$mergeProps1, isServer as $b8hua$isServer, ssrElement as $b8hua$ssrElement, ssrClassList as $b8hua$ssrClassList, Dynamic as $b8hua$Dynamic } from "solid-js/web";
 import { createSignal as $b8hua$createSignal, getOwner as $b8hua$getOwner, createEffect as $b8hua$createEffect, runWithOwner as $b8hua$runWithOwner, onCleanup as $b8hua$onCleanup, createMemo as $b8hua$createMemo, createContext as $b8hua$createContext, useContext as $b8hua$useContext, mergeProps as $b8hua$mergeProps, Show as $b8hua$Show, createResource as $b8hua$createResource, Suspense as $b8hua$Suspense, untrack as $b8hua$untrack, createRenderEffect as $b8hua$createRenderEffect, Index as $b8hua$Index, createRoot as $b8hua$createRoot, For as $b8hua$For, createUniqueId as $b8hua$createUniqueId, createComputed as $b8hua$createComputed, ErrorBoundary as $b8hua$ErrorBoundary, batch as $b8hua$batch, on as $b8hua$on, createReaction as $b8hua$createReaction, mapArray as $b8hua$mapArray } from "solid-js";
 import $b8hua$babelruntimehelpersclassPrivateFieldSet from "@babel/runtime/helpers/classPrivateFieldSet";
 import $b8hua$babelruntimehelpersclassPrivateFieldGet from "@babel/runtime/helpers/classPrivateFieldGet";
@@ -9,7 +9,7 @@ import { createStore as $b8hua$createStore, reconcile as $b8hua$reconcile } from
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "ES10");
-const $8db9a15135765c11$export$83d89fbfd8236492 = "2.1.18";
+const $8db9a15135765c11$export$83d89fbfd8236492 = "2.1.20";
 const $2855bffe06ef7a03$var$fallback_operator = "in";
 const $2855bffe06ef7a03$var$fallback_token = "";
 const $2855bffe06ef7a03$var$legacy_filter_prefix = "filter_";
@@ -201,9 +201,9 @@ function $5441862cd2f5e111$export$e68cff63f76bd15b(props) {
 function $5441862cd2f5e111$export$8d0c4fdbb05a2f2e() {
   return $b8hua$useContext($5441862cd2f5e111$var$ListingContext);
 }
-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, "%")));
+  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));
 }
 function $56047603f9d212b6$export$e6fffe67d4cdd848(whatToWatch) {
   const [size, setSize] = $b8hua$createSignal(0);
@@ -365,6 +365,9 @@ function $4df489344a0f97c7$export$e4b984597b71e989(props) {
   const container = $b8hua$createComponent((0, $801e8845d3fa3653$export$94026ee33dbabc26), {
     get aspectRatio() {
       return props.aspectRatio;
+    },
+    get ["class"]() {
+      return props.class;
     }
   });
   const owner = $b8hua$getOwner();

package/server/latest/index.cjs

@@ -70,7 +70,7 @@ $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$expo
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad997933$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
 /*! Depict.ai search and product listing SDK */
-const $b757f75811f3261f$export$83d89fbfd8236492 = "2.1.18";
+const $b757f75811f3261f$export$83d89fbfd8236492 = "2.1.20";
 const $1ab22f2cd39b3061$var$fallback_operator = "in";
 const $1ab22f2cd39b3061$var$fallback_token = "";
 const $1ab22f2cd39b3061$var$legacy_filter_prefix = "filter_";
@@ -257,9 +257,9 @@ function $84798aaa863a4909$export$e68cff63f76bd15b(props) {
 function $84798aaa863a4909$export$8d0c4fdbb05a2f2e() {
   return $5vyXB$solidjs.useContext($84798aaa863a4909$var$ListingContext);
 }
-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}%`));
+  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));
 }
 function $19950faaac026e09$export$e6fffe67d4cdd848(whatToWatch) {
   const [size, setSize] = $5vyXB$solidjs.createSignal(0);
@@ -418,6 +418,9 @@ function $a33065cfed827fc0$export$e4b984597b71e989(props) {
   const container = $5vyXB$solidjsweb.createComponent((0, $93304d59a9747aa6$export$94026ee33dbabc26), {
     get aspectRatio() {
       return props.aspectRatio;
+    },
+    get ["class"]() {
+      return props.class;
     }
   });
   const owner = $5vyXB$solidjs.getOwner();

package/server/latest/index.d.ts

@@ -1,13 +1,13 @@
 import { JSX, Accessor, Signal, Setter } from "solid-js";
 import { report, Display, Amazing_Slider, ColsAtSize, Elem, ModernDisplay, Node_Array } from "@depict-ai/utilishared/latest";
-import { SearchFilter, SearchRequest } from "@depict-ai/types/api/SearchRequest";
+import { SearchFilter, SearchRequestV2 } from "@depict-ai/types/api/SearchRequestV2";
 import { SearchFilter as _SearchFilter1, ContentLink, SearchResponse } from "@depict-ai/types/api/SearchResponse";
-import { BaseCategoryDisplay, ProductListingResponse } from "@depict-ai/types/api/ProductListingResponse";
+import { BaseCategoryDisplay, ProductListingResponseV2 } from "@depict-ai/types/api/ProductListingResponseV2";
 import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/api/SearchSuggestionsResponse";
-import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
-import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
+import { BaseSearchRequestV2 } from "@depict-ai/types/api/BaseSearchRequestV2";
+import { SearchSuggestionsRequestV2 } from "@depict-ai/types/api/SearchSuggestionsRequestV2";
 import { ProductListingRequestV2 } from "@depict-ai/types/api/ProductListingRequestV2";
-export const version = "2.1.18";
+export const version = "2.1.20";
 /**
  * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
@@ -145,6 +145,7 @@ export function useListing(): Record<symbol, any> | undefined;
  */
 export function ImageContainer(props: {
   aspectRatio: number;
+  class?: string;
 }): HTMLDivElement;
 /**
  * Returns an accessor that will update when the size of the provided element changes, to be used with ResponsiveImg
@@ -173,10 +174,12 @@ export const shopifyContainedImageContextSymbol: unique symbol;
  * This works because the listings (recs, search, plp) all are wrapped in `<ListingProvider>`'s. This means all components rendered within can use `useListing` to get an object to write data to that will be the same for all components rendered within that listing. The first instance of this component rendered within a listing puts a ResizeObserver on its div and the other components then just set the sizes attribute of their image to that.
  * @property src image source
  * @property aspectRatio aspect ratio of the image
+ * @property class extra class to add to the container
  */
 export function ShopifyContainedImage(props: {
   src: string;
   aspectRatio: number;
+  class?: string;
 }): HTMLDivElement;
 /** @jsxImportSource solid-js */
 export function GenericSliderArrowButton(props?: {
@@ -652,7 +655,7 @@ type ReplaceBaseCategoryDisplay<T> = T extends BaseCategoryDisplay ? BaseCategor
 type _AddPageUrlToDisplay1<T extends any[]> = (T[number] & {
   page_url: string;
 })[];
-type ProductListingResponseAfterURLCreator = { [K in keyof ProductListingResponse]: K extends "displays" ? _AddPageUrlToDisplay1<ProductListingResponse[K]> : K extends "breadcrumb" | "quick_links" ? ReplaceBaseCategoryDisplay<ProductListingResponse[K]> : K extends "filters" ? AddActualFieldToFilters<ProductListingResponse[K]> : ProductListingResponse[K] };
+type ProductListingResponseAfterURLCreator = { [K in keyof ProductListingResponseV2]: K extends "displays" ? _AddPageUrlToDisplay1<ProductListingResponseV2[K]> : K extends "breadcrumb" | "quick_links" ? ReplaceBaseCategoryDisplay<ProductListingResponseV2[K]> : K extends "filters" ? AddActualFieldToFilters<ProductListingResponseV2[K]> : ProductListingResponseV2[K] };
 type DepictAPIConstructorOptions<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = {
   get_metadata?: () => Promise<{
     [k: string]: string;
@@ -669,16 +672,16 @@ export class DepictAPI<InputDisplay extends Display, OutputDisplay extends Moder
   page_url_creator: PageURLCreator<ModernDisplay, OutputDisplay> | undefined;
   display_transformers: DisplayTransformers<ModernDisplay, OutputDisplay> | undefined;
   constructor(options: DepictAPIConstructorOptions<InputDisplay, OutputDisplay>);
-  suggest(input_req: SearchSuggestionsRequest): Promise<SearchSuggestionsResponseAfterURLCreator & {
+  suggest(input_req: SearchSuggestionsRequestV2): Promise<SearchSuggestionsResponseAfterURLCreator & {
     failed?: true;
   }>;
-  query(input_req: SearchRequest): Promise<SearchResponseAfterURLCreator & {
+  query(input_req: SearchRequestV2): Promise<SearchResponseAfterURLCreator & {
     failed?: true;
   }>;
   list(input_req: ProductListingRequestV2): Promise<ProductListingResponseAfterURLCreator & {
     failed?: true;
   }>;
-  get_recommended<T extends Display>(input_req: BaseSearchRequest): Promise<{
+  get_recommended<T extends Display>(input_req: BaseSearchRequestV2): Promise<{
     displays: T[];
   } & {
     failed?: true | undefined;
@@ -1141,4 +1144,4 @@ export const defaultCategoryTitlePlugin: ({
   category_title_: import("solid-js").Accessor<string | undefined>;
   product_count_: import("solid-js").JSX.Element;
 }) => import("solid-js").JSX.Element;
-export type { SearchFilter } from "@depict-ai/types/api/SearchRequest";
+export type { SearchFilter } from "@depict-ai/types/api/SearchRequestV2";