@depict-ai/ui 3.0.27 → 4.0.0

package/server/ES10/index.d.ts

@@ -1,7 +1,7 @@
-import { ColsAtSize, Display, ModernDisplay, Amazing_Slider, Node_Array, report, Elem } from "@depict-ai/utilishared/ES10";
-import { JSX, Signal, Accessor, Setter } from "solid-js";
-import { SearchFilter, SortModel, SearchRequestV3 } from "@depict-ai/types/api/SearchRequestV3";
-import { ContentLink, SearchFilter as _SearchFilter1, SearchResponse } from "@depict-ai/types/api/SearchResponse";
+import { Accessor, JSX, Signal, Setter } from "solid-js";
+import { Display, ModernDisplay, Elem, ColsAtSize, report, Amazing_Slider, TwoLetterMarket, Node_Array } from "@depict-ai/utilishared/ES10";
+import { SearchFilter, SearchRequestV3, SortModel } from "@depict-ai/types/api/SearchRequestV3";
+import { ContentLink, SearchResponse, SearchFilter as _SearchFilter1 } from "@depict-ai/types/api/SearchResponse";
 import { Ancestors, ListingSuggestion, SearchSuggestionsResponseV3 } from "@depict-ai/types/api/SearchSuggestionsResponseV3";
 import { ProductListing, GetListingResponse } from "@depict-ai/types/api/GetListingResponse";
 import { ProductListingResponseV3 } from "@depict-ai/types/api/ProductListingResponseV3";
@@ -10,14 +10,58 @@ 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.27";
-export type SDKColsAtSize = [number, number?][];
+export const version = "4.0.0";
+export type ModalAlignmentSignals = {
+  body_: Signal<JSX.CSSProperties>;
+  field_: Signal<JSX.CSSProperties>;
+  backdrop_?: Signal<JSX.CSSProperties>;
+};
 /**
- * Transform SDK ColsAtSize into valid Layout ColsAtSize
- * @param cols_at_size [nbCol, maxWidth]
- * @returns
+ * Flag to align by top
  */
-export const convert_sdk_cols_at_size_to_layout: (cols_at_size: SDKColsAtSize) => ColsAtSize;
+export const ALIGN_TOP = 1;
+/**
+ * Flag to align by left
+ */
+export const ALIGN_LEFT = 2;
+/**
+ * Flag to also align the width of the modal to the element
+ */
+export const ALIGN_WIDTH_ON_MODAL = 4;
+/**
+ * Whether to align the center of the element to align to, to the center of the modal. If set, `transform: translateX(-50%)` will also be applied to the modal
+ */
+export const SET_CENTERED_LEFT = 16;
+/**
+ * Useful for aligning the search modal to an element, like an existing input field
+ * @param alignmentSignals a signal containing the style properties that will be applied to the modal body and serach field. You provide it to open_modal_ as `alignmentSignals_` when using SearchModal
+ * @param input_field the element to align to.
+ * @param alignment a bitmask of ALIGN_TOP, ALIGN_LEFT, ALIGN_WIDTH to determine how to align. Example: `ALIGN_TOP | ALIGN_LEFT` aligns both top and left
+ * @param includeScroll Should the aligner offset with scrolling? Useful to set to false when using position: fixed
+ * @param pollAlignment a reactive accessor, for the duration that it returns true the alignment will be re-ran every frame. Useful for when you're aligning to a moving element that doesn't change its width.
+ * @returns a function that can be called any time to re-run the alignment routine in case that the elements have gone out of alignment
+ */
+export function align_field({
+  body_: [, setModalBodyStyle],
+  field_: [, setModalFiedlStyle]
+}: ModalAlignmentSignals, input_field: HTMLElement, alignment: number, includeScroll?: boolean, pollAlignment?: Accessor<boolean>): () => void;
+/**
+ * A good way of "debouncing" if one wants to update a value as aggressively as possible without overloading the network or the server. It ensures that as many requests are made as possible without making two requests at once.
+ * This is for when you need a solid resource that has an accurate .loading value.
+ *
+ * Creates a sort of debounced/throttled resource - if the dependency changes while the fetcher is not running, the fetcher will instantly run. If the dependency changes while the fetcher is running, the fetcher will not run but a fetch with the dependency value will be queued. If the fetcher is already queued, the queued fetcher will be replaced with the new one. Once the running fetcher finishes, the queued fetcher will run.
+ *
+ * Caveats: the owner of the fetched might/will be incorrect, the resource will never have an error, instead the resource value will become undefined.
+ *
+ * @param dependency The value that the fetcher receives, when it updates the fetcher will run according to the rules described above
+ * @param fetcher The function that fetches the resource, it receives the dependency value as an argument
+ */
+export function createDeparallelizedNoDropResource<T, X>(dependency: Accessor<T | undefined | null | false>, fetcher: (dependency: T) => Promise<X>): import("solid-js").Resource<X | undefined>;
+/**
+ * Wraps a function in a try/catch block and throws the error globally. If undefined is provided as fn, a no-op is returned.
+ * @param fn the function to wrap
+ */
+export function throw_globally<T extends (...args: any) => any>(fn?: T): (...args: Parameters<T>) => ReturnType<T> | undefined;
 declare const LISTING_ID = "listingId";
 declare const EXTERNAL_ID = "externalId";
 export type SDKGridSpacing = string | {
@@ -46,9 +90,20 @@ type CanBePromiseWrapped<T> = T | Promise<T>;
 export type ModernDisplayWithPageUrl<T extends ModernDisplay> = { [K in keyof T]: K extends "variant_displays" ? (T[K][number] & {
   page_url: string;
 })[] : T[K] };
+/**
+ * A ProductListing with ancestors added in, this is what we pass to the display transformers as the ancestors might be required to construct the URL
+ */
 type ProductListingWithAncestors = ProductListing & {
   ancestors: Ancestors;
 };
+/**
+ * The displayTransformer for categories does not only get a list of ListingSuggestions, when a search query has listing suggestions, but also their ancestors since we show breadcrumbs for the listing suggestions. To let the user differentiate (since the suggestion ones can be added/removed but not the ancestors) we add a boolean is_suggestion to the listing suggestions passed to the displayTransformer.
+ */
+type ListingSuggestionForTransformer = (ListingSuggestion & {
+  is_suggestion: true;
+}) | (Omit<ListingSuggestion, "suggestions_result_id"> & {
+  is_suggestion: false;
+});
 /**
  * DisplayTransformers supersede pageURLCreator
  * DisplayTransformers are functions that take in a list of categories, content search results or products and then can transform or enrich the data for each category, content search result or product card in a batched way.
@@ -57,7 +112,7 @@ export type DisplayTransformers<InputDisplay extends ModernDisplay, OutputDispla
   products?: (options: DisplayTransformerAlwaysThereData & {
     displays: InputDisplay[];
   }) => CanBePromiseWrapped<OutputDisplay extends ModernDisplay ? ModernDisplayWithPageUrl<OutputDisplay>[] : never>;
-  categories?: <T extends ProductListingWithAncestors | ListingSuggestion>(options: DisplayTransformerAlwaysThereData & {
+  categories?: <T extends ProductListingWithAncestors | ListingSuggestionForTransformer>(options: DisplayTransformerAlwaysThereData & {
     data: T[];
   }) => CanBePromiseWrapped<(T & {
     page_url: string;
@@ -74,6 +129,453 @@ export type SomethingTakingADisplayTransformers<InputDisplay extends Display, Ou
   page_url_creator?: never;
   display_transformers?: never;
 };
+type ListingSuggestionAfterURLCreator = { [K in keyof ListingSuggestion]: K extends "ancestors" ? (ListingSuggestion & {
+  page_url: string;
+})[] : ListingSuggestion[K] } & {
+  page_url: string;
+};
+type ReplaceCategorySuggestion<T> = T extends ListingSuggestion ? ListingSuggestionAfterURLCreator : T extends ListingSuggestion[] ? ListingSuggestionAfterURLCreator[] : T;
+type SearchSuggestionsResponseAfterURLCreator = { [K in keyof SearchSuggestionsResponseV3]: ReplaceCategorySuggestion<SearchSuggestionsResponseV3[K]> };
+type SearchResponseAfterDisplayTransformer = { [K in keyof SearchResponse]: K extends "displays" ? ModernDisplayWithPageUrl<any>[] : K extends "filters" ? AddActualFieldToFilters<SearchResponse[K]> : SearchResponse[K] };
+type ProductListingWithPageURL = ProductListing & {
+  page_url: string;
+};
+type ProductListingResponseAfterDisplayTransformer = { [K in keyof ProductListingResponseV3]: K extends "displays" ? ModernDisplayWithPageUrl<any>[] : K extends "filters" ? AddActualFieldToFilters<ProductListingResponseV3[K]> : ProductListingResponseV3[K] };
+type GetListingResponseAfterDisplayTransformer = { [K in keyof GetListingResponseWithQuicklinksAndBreadcrumbs]: K extends "breadcrumbs" ? ProductListingWithPageURL[] : K extends "quick_links" ? ProductListingWithPageURL[] : GetListingResponseWithQuicklinksAndBreadcrumbs[K] };
+type GetListingResponseWithQuicklinksAndBreadcrumbs = Omit<GetListingResponse, "siblings" | "ancestors" | "children"> & {
+  quick_links: ProductListingWithAncestors[];
+  breadcrumbs: ProductListingWithAncestors[];
+};
+type DepictAPIConstructorOptions<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = {
+  get_metadata?: () => Promise<{
+    [k: string]: string;
+  } | undefined>;
+  get_session_id?: () => string | undefined;
+} & SomethingTakingADisplayTransformers<InputDisplay, OutputDisplay>;
+interface GetListingOptions extends Omit<GetListingRequest, "listing_id"> {
+  session_id?: string;
+  id_to_query_for_: string;
+  id_type_: typeof LISTING_ID | typeof EXTERNAL_ID;
+}
+/**
+ * Class that handles all communication done in PLP code with the Depict API. (Notably not for recommendations currently).
+ * It handles caching, retries and errors and is the only place that should be making requests to the Depict API.
+ */
+export class DepictAPI<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never = InputDisplay extends ModernDisplay ? ModernDisplayWithPageUrl<InputDisplay> : never> {
+  #private;
+  display_transformers: DisplayTransformers<ModernDisplay, OutputDisplay> | undefined;
+  constructor(options: DepictAPIConstructorOptions<InputDisplay, OutputDisplay>);
+  suggest(input_req: SearchSuggestionsRequestV3): Promise<SearchSuggestionsResponseAfterURLCreator & {
+    failed?: true;
+  }>;
+  query(input_req: SearchRequestV3): Promise<SearchResponseAfterDisplayTransformer & {
+    failed?: true;
+  }>;
+  get_listing({
+    id_type_,
+    id_to_query_for_,
+    ...input_req
+  }: GetListingOptions): Promise<GetListingResponseAfterDisplayTransformer & {
+    failed?: true;
+  }>;
+  get_listing_products({
+    id_to_query_for_,
+    id_type_,
+    ...input_req_
+  }: ProductListingRequestV3 & {
+    id_to_query_for_: string;
+    id_type_: typeof LISTING_ID | typeof EXTERNAL_ID;
+  }): Promise<ProductListingResponseAfterDisplayTransformer & {
+    failed?: true;
+  }>;
+  get_recommended<T extends Display>(input_req: BaseSearchRequestV3): Promise<{
+    displays: T[];
+  } & {
+    failed?: true | undefined;
+  }>;
+}
+/**
+ * PLP internationalisation shared between search and category listing
+ */
+type plp_shared_i18n = {
+  backend_locale_: string;
+  scroll_to_top_: string;
+  back_: string;
+  open_sorting_: string;
+  close_sorting_: string;
+  open_filters_: string;
+  close_filters_: string;
+  close_: string;
+  ok_: string;
+  filters_cleared_: string;
+  we_cleared_your_filters_: string;
+  restore_: string;
+  sorting_text_: string;
+  filter_text_: string;
+  selected_filters_title_: string;
+  filters_: string;
+  view_less_: string;
+  view_more_: string;
+  /**
+   * Also used for "clear all" in previous searches (TextSuggestions)
+   */
+  clear_all_from_filter_crumbs_: string;
+  clear_individual_filter_: string;
+  of_: string;
+  clear_all_filters_from_big_button_: string;
+  try_without_filters_: string;
+  range_filter_low_point_aria_label_: string;
+  range_filter_high_point_aria_label_: string;
+  morphing_sign_expanded_aria_label_: string;
+  morphing_sign_collapsed_aria_label_: string;
+  search_a_filter_: (filter_section: string) => string;
+  breadcrumbs_aria_label_: string;
+  breadcrumbs_separator_: string;
+  price_formatting_: {
+    pre_: string;
+    post_: string;
+    decimal_places_delimiter_: string;
+    thousands_delimiter_: string;
+    places_after_comma_: number | "auto";
+  };
+};
+/**
+ * Search internationalisation
+ */
+interface search_i18n extends plp_shared_i18n {
+  placeholder_text_: string;
+  show_n_results_: (number_of_results: HTMLElement) => Elem[];
+  no_results_text_: string;
+  no_products_: string;
+  search_recs_title_: string;
+  clear_filters_query_sorting_after_submit_: string;
+  modal_view_all_results_: (number_of_results: HTMLElement) => Elem[];
+  modal_discover_more_: string;
+  get_showing_results_for_: (query: HTMLElement, number_of_results_element: HTMLElement, has_query: boolean, number_of_results: number | undefined) => Elem[];
+  get_showing_pages_for_: (query: HTMLElement, number_of_results_element: HTMLElement, has_query: boolean, number_of_results: number | undefined) => Elem[];
+  previous_searches_text_: string;
+  category_: string;
+  brand_: string;
+  suggestions_: string;
+  search_submit_button_aria_label_: string;
+  search_field_field_aria_label_: string;
+  previous_searches_delete_entry_from_history_: string;
+  listing_suggestions_: string;
+  content_: string;
+  previous_: string;
+  popular_: string;
+  products_: string;
+}
+/**
+ * Category internationalisation
+ */
+interface category_i18n extends plp_shared_i18n {
+  show_n_products_: (number_of_results: HTMLElement) => Elem[];
+  no_products_text_: string;
+  product_: string;
+  products_: string;
+  quicklinks_aria_label_: string;
+}
+/**
+ * For anything that is not exposed and only used internally we can use solid signals to get more performant rendering.
+ * For anything that can be used outside of solid, like Product Cards and InstantCards these types should not be used.
+ *
+ * Any solid_ type below should not be exposed outside of this library, as the accessors can be confusing and unnecessary.
+ */
+/** For internal components using i18n that gets wrapped in solid's Accessors */
+type solid_plp_shared_i18n = { [K in keyof plp_shared_i18n]: Accessor<plp_shared_i18n[K]> };
+/** For internal components using i18n that gets wrapped in solid's Accessors */
+type solid_search_i18n = { [K in keyof search_i18n]: Accessor<search_i18n[K]> };
+/**
+ * Like standard_price_format except that the price and the formatting are reactive accessors
+ */
+export function SolidFormatPrice(props: {
+  price_: number;
+  price_formatting_: {
+    pre_: string;
+    post_: string;
+    decimal_places_delimiter_: string;
+    thousands_delimiter_: string;
+    places_after_comma_: number | "auto";
+  };
+}): JSX.Element;
+export type SDKColsAtSize = [number, number?][];
+/**
+ * Transform SDK ColsAtSize into valid Layout ColsAtSize
+ * @param cols_at_size [nbCol, maxWidth]
+ * @returns
+ */
+export const convert_sdk_cols_at_size_to_layout: (cols_at_size: SDKColsAtSize) => ColsAtSize;
+/**
+ * Disables scrolling until the solidjs reactive scoped is disposed (onCleanup)
+ * @returns A cleanup function to manually re-enable scrolling.
+ */
+export function disable_scrolling(): () => void;
+declare class SDKError extends Error {}
+export class ProductCardError extends SDKError {
+  constructor(templateError: Error);
+}
+export function SentryErrorBoundary(props: {
+  children: JSX.Element;
+  message_: string;
+  severity_: Parameters<typeof report>[1];
+  on_error_?: (retry: VoidFunction) => JSX.Element | void;
+  class_list_?: string[];
+}): JSX.Element;
+/**
+ * Provider to wrap every listing (group of products) in
+ * Used for example for deduplicating ResizeObservers for responsive images
+ */
+export function ListingProvider(props: {
+  children: JSX.Element;
+}): JSX.Element;
+/**
+ * Use this to get the context object if your component is within a ListingProvider
+ */
+export function useListing(): Record<symbol, any> | undefined;
+/**
+ * Function that encodes a filter object into query parameters and sets them on the given URLSearchParams object.
+ */
+export function encode_filters(filters: FilterWithData[], search_params: URLSearchParams, filter_query_param_prefix: string): void;
+/**
+ * Function that decodes the filters from the provided query parameters and returns them as an array of filter objects.
+ */
+export function decode_filters(search_params: URLSearchParams, filter_query_param_prefix: string): FilterWithData[];
+/**
+ * Function that encodes a sort model into a query paremeter and sets them on the given URLSearchParams object.
+ */
+export function encode_sorting(sorting: SortModel | undefined, search_params: URLSearchParams, sorting_query_param: string): void;
+/**
+ * Function that decodes the sort model from the provided query parameters and returns it as a sort model, if present.
+ */
+export function decode_sorting(search_params: URLSearchParams, sorting_query_param_: string): SortModel | undefined;
+/**
+ * Remove all Depict filter/sorting query parameters from the given URLSearchParams object.
+ * Used to reset the URLSearchParams object to a clean state, before adding new filters/sorting.
+ * @param search_params
+ * @param filter_query_param_prefix Prefix of the filter query parameters
+ * @param sorting_query_param
+ */
+export function strip_encoded_filter_and_sort(search_params: URLSearchParams, filter_query_param_prefix: string, sorting_query_param: string): void;
+/**
+ * Base placeholder component used by ImagePlaceholder and TextPlaceholder
+ */
+export function BasePlaceholder(props: {
+  style: JSX.CSSProperties;
+  class?: string;
+}): JSX.Element;
+/**
+ * A Placeholder to use instead of some text, while it's loading. This is the inline version, meant to be embedded into sentences (or exist instead of them), etc.
+ * If you want a block version, use `ImagePlaceholder` with `width`and `height` set instead.
+ * @property height height of the placeholder. Set to `1em` by default.
+ * @property width width of the placeholder. For specific number of characters use `ch`, ex: `width="7ch"`
+ * @property class extra classes to add to the placeholder
+ * @property style extra styles to add to the placeholder
+ */
+export function TextPlaceholder(props: {
+  style?: JSX.CSSProperties;
+  height: string;
+  width: string;
+  class?: string;
+}): JSX.Element;
+/**
+ * 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)
+ * (Not using the CSS aspect-ratio property yet here due to browser support)
+ */
+export function ImageContainer(props: {
+  aspectRatio: number | string;
+  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
+ */
+export function makeSizeAccessor(whatToWatch: HTMLElement): Accessor<number>;
+/**
+ * Automatically generate a srcset from the shopify CDN for an image and set the sizes attribute to the provided accessor.
+ * Will also delay loading and decoding of image until the browser is idle (with 5s timeout) to improve filtering/loading more performance.
+ * This is used for our responsive images:
+ * 1. The image must have a container with a fixed size (or aspect ratio) that is independent of the image. When aspectRatio is configured on the depict-cards element as data attribute, we will wrap the image in a ImageContainer for this. If it's false, the user has to provide this container themselves.
+ * 2. We set a ResizeObserver on one of the currently visible images (see makeSizeAccessor)
+ * 3. We set the size attribute of all the visible images to the size of the container we're observing. The point of this is that the sizes attribute is used to determine which image to load, and usually it's set by the user and depends on the relationship between image size and viewport size. By using a ResizeObserver, we can make sure the sizes attribute is always set to the correct value without it having to be configured. This will make so the browser always loads the correct image size for a crisp image but still fast load.
+ * You need to use insert(domNode, <ShopifyResponsiveImg size={sizeAccessor} src={src} />) if you want to insert the return value of this component into a DOM element manually, where you `import { insert } from "solid-js/web";` because we first want to insert the image once it has loaded.
+ */
+export function ShopifyResponsiveImg(props: {
+  resolutions?: number[];
+  size: Accessor<number>;
+} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes"> & {
+  src: string;
+}): JSX.Element;
+export const shopifyContainedImageContextSymbol: unique symbol;
+/**
+ * Abstraction built on top of ShopifyResponsiveImg. This is your one-stop-shop If you just need a responsive image.
+ * Will return a div of the provided aspect ratio that always has the same size, to avoid content layout shift. Will then put the image inside of the container once it loads.
+ * Also makes a responsive image without you having to do anything: uses shopify's CDN which picks the best image format to resize the image to the size of the first image container in a certain listing.
+ * 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
+ * @property alt alt text for the image
+ * @property imgProps props to pass to ShopifyResponsiveImg to add to the <img> element
+ */
+export function ShopifyContainedImage(props: {
+  src: string;
+  aspectRatio: number | string;
+  class?: string;
+  imgProps?: Omit<Parameters<typeof ShopifyResponsiveImg>[0], "size" | "src">;
+}): HTMLDivElement;
+/**
+ * Hacks ShopifyContainedImage work even for non-shopify image urls by forcing the format to be WebP
+ */
+export function ModernResponsiveContainedImage(props: {
+  merchant_: string;
+} & Parameters<typeof ShopifyContainedImage>[0]): import("solid-js").JSX.Element;
+/** @jsxImportSource solid-js */
+export function GenericSliderArrowButton(props?: {
+  width_?: number;
+  height_?: number;
+}): SVGElement;
+export function SlidableItems({
+  children,
+  slider_ref_,
+  faded_opacity_,
+  mutation_plugins_,
+  disable_fading_,
+  arrow_width_,
+  arrow_height_,
+  snapAlign_,
+  fadingThreshold_
+}: {
+  children?: JSX.Element;
+  slider_ref_?: (slider: Amazing_Slider) => any;
+  faded_opacity_?: number;
+  disable_fading_?: boolean;
+  snapAlign_?: "start" | "end" | "center";
+  fadingThreshold_?: number;
+  mutation_plugins_?: ((this: Amazing_Slider, mutations: IntersectionObserverEntry[], intersecting_items: Record<number, IntersectionObserverEntry>) => unknown)[];
+  arrow_width_?: number;
+  arrow_height_?: number;
+}): JSX.Element;
+export type SolidLayoutOptions = {
+  cols_at_size: ColsAtSize;
+  grid_spacing: string;
+  rows: {
+    start_rows?: number;
+    rows_per_click?: number;
+    currently_visible?: Signal<number>;
+    max_rows?: number;
+    button?: JSX.Element;
+    view_less_button?: JSX.Element;
+  } | "all";
+  layout: "slider" | "grid";
+  disable_partial_rows?: boolean;
+  override_vertical_spacing?: string;
+  children: JSX.Element;
+  element_attributes: Omit<JSX.HTMLAttributes<HTMLDivElement>, "classList">;
+};
+/**
+ * SolidLayout: SolidJS adaption of Layout. Calculates CSS for a grid or slider with a certain spacing and certain number of columns at certain screen sizes, including a view more button. All properties are reactive.
+ * @property       rows                  if set to 'all': Just generate grid styling without any viewing/hiding functionality. If an object: start_rows is the number of rows at the beginning. rows_per_click is the amount of rows to view on each view more button click. button is the view more button to display. currently_visible is a signal that you can use to get and set the number of currently viewed rows
+ * @property       cols_at_size          An array with sub arrays looking like this: `[n_cols, min_width_media_query, max_width_media_query, grid_spacing_for_size]`, everything after `[n_cols, min_width]` is optional. falsey value for `min_width = no min_width`
+ * @property       grid_spacing  spacing to use if none is specified for the specific size in `cols_at_size`
+ * @property       disable_partial_rows  If set to `true`, will not let user press "show more" if next row is a partial row. Example of partial row: `cols_at_size` says we should have 4 recs in the next row, but we only have 2 left, so the row just gets 2 instead of 4, meaning it doesn't "fill out".
+ * @property override_vertical_spacing by default, the grid_spacing is used both horizontally and vertically, with this you can specify a separate spacing
+ * @return An accessor containing a CSS string
+ */
+export function SolidLayout(props: SolidLayoutOptions): JSX.Element;
+export function CrossIcon(props?: JSX.SvgSVGAttributes<SVGSVGElement>): SVGElement;
+interface Styles {
+  [selector: string]: JSX.CSSProperties;
+}
+export const styles_to_valid_css_string: (styles: Styles) => string;
+type ImagePlaceholderBaseOptions = {
+  style?: JSX.CSSProperties;
+  class?: string;
+};
+type ImagePlaceholderBlockOptions = {
+  width: string;
+  height: string;
+};
+type ImagePlaceholderImageOptions = {
+  aspectRatio: number | string;
+};
+/**
+ * A placeholder that can be used instead of an image or other block of content while it's loading.
+ * The placeholder has `display:block`, meaning it will create a new "row" in the layout for itself. Can be used either for images with a defined aspect ratio (ContainedImage) or blocks.
+ * @property aspectRatio if aspectRatio is defined the placeholder will be in "image mode" and fill out the available width and then adjust the height according to the aspectRatio
+ * @property width If width and height is set, the defined width and height will be used.
+ * @property height If width and height is set, the defined width and height will be used.
+ * @property class extra classes to add to the placeholder
+ * @property style extra styles to add to the placeholder
+ */
+export function ImagePlaceholder(props: ImagePlaceholderBaseOptions & (ImagePlaceholderBlockOptions | ImagePlaceholderImageOptions)): JSX.Element;
+export function DefaultInstantCardPlaceholder(): HTMLDivElement;
+/**
+ * Second generation search modal - the solid component that gets added to <body> when the search modal is opened
+ */
+declare function RawSearchModalV2<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never>({
+  search_field_value_: props_search_field_value,
+  get_search_query_,
+  search_query_url_param_name_,
+  previous_searches_,
+  close_modal_,
+  alignmentSignals_,
+  depict_api_,
+  merchant_,
+  market_,
+  submit_query_: props_submit_query,
+  instant_results_options_,
+  register_closing_animation_,
+  url_transformer_,
+  closing_animation_,
+  clear_filters_,
+  i18n_,
+  disable_scrolling_,
+  enable_category_suggestions_,
+  class_list_,
+  bottom_distance_under_modal_,
+  selected_text_range_,
+  dont_sync_search_field_value_except_on_submit_,
+  router_,
+  content_search_enabled_,
+  sorting_query_param_,
+  filter_query_param_prefix_,
+  setSearchFieldOuterWidth_
+}: {
+  search_field_value_: Signal<string>;
+  get_search_query_: Accessor<string>;
+  search_query_url_param_name_: string;
+  previous_searches_: Signal<string[]>;
+  close_modal_: VoidFunction;
+  alignmentSignals_?: ModalAlignmentSignals;
+  depict_api_: DepictAPI<InputDisplay, OutputDisplay>;
+  clear_filters_: (user_triggered: boolean) => void;
+  merchant_: Accessor<string>;
+  market_: Accessor<TwoLetterMarket>;
+  submit_query_: (new_query?: string) => void;
+  class_list_?: Accessor<Record<string, boolean>>;
+  url_transformer_?: (url_object: URL) => unknown;
+  disable_scrolling_?: boolean;
+  closing_animation_?: () => Promise<any>;
+  register_closing_animation_: (animation: () => Promise<any>) => void;
+  bottom_distance_under_modal_?: Accessor<number | undefined>;
+  selected_text_range_?: [number | null, number | null];
+  router_: PseudoRouter;
+  sorting_query_param_: string;
+  filter_query_param_prefix_: string;
+  setSearchFieldOuterWidth_?: Setter<number>;
+  instant_results_options_: {
+    min_products_to_fetch_: number;
+    has_sort_or_filters_: Accessor<boolean>;
+  };
+  i18n_: solid_search_i18n;
+  /** Should we include category suggestions. Defaults to true */
+  enable_category_suggestions_?: boolean;
+  dont_sync_search_field_value_except_on_submit_?: boolean;
+  content_search_enabled_: Accessor<boolean>;
+}): HTMLDivElement[];
+export const SearchModalV2: typeof RawSearchModalV2;
 type PossibleLayout = "grid" | "slider" | "slider-without-filters";
 export type BaseProviderConfig<InputDisplay extends Display, PossibleTransformedDisplay extends ModernDisplay | never> = {
   /**
@@ -117,7 +619,7 @@ export type BaseProviderConfig<InputDisplay extends Display, PossibleTransformed
    */
   displayTransformers?: never;
 });
-export type BaseSearchProviderConfig = {
+export type BaseSearchProviderConfig<InputDisplay extends Display, PossibleTransformedDisplay extends ModernDisplay | never> = {
   /**
    * The path to the search page.
    * @example "/search", "/sok"
@@ -139,6 +641,17 @@ export type BaseSearchProviderConfig = {
    * @default false
    */
   enableContentSearch?: boolean;
+  /**
+   * The search modal component to use. You can switch between the classic and the new search modal. Provide one of the components here that you can import from the same package as the one you're using to see this message.
+   * You also need to reflect the choice in SCSS, example:
+   * ```scss
+   * @use "@depict-ai/js-ui" as plp-styling with (
+   *   $search-modal-layout: "v2" // or "classic"
+   * );
+   * ```
+   * The default is SearchModalV2. That means that ClassicSearchModal can get tree-shaken if you use v2 but not vice-versa. To force SearchModalV2 from being tree-shaken, set process.env.NO_SEARCH_MODAL_DEFAULT to "true".
+   */
+  searchModalComponent?: typeof SearchModalV2<InputDisplay, PossibleTransformedDisplay> | typeof ClassicSearchModal;
 };
 export type BaseCategoryProviderConfig = {
   /**
@@ -177,99 +690,30 @@ export interface BaseCategoryPageConfig extends BaseProductListingConfig {
    * Whether to show the breadcrumbs in the category page.
    * @default true
    */
-  showBreadcrumbs?: boolean;
-  /**
-   * Whether to show the quicklinks in the category page.
-   * @default true
-   */
-  showQuicklinks?: boolean;
-  /**
-   * The layout used for listing the products.
-   *     1. `"grid"` is the default and shows the products in a grid
-   *     2. `"slider"` shows the products in a slider and has default `false` for showBreadcrumbs and showQuicklinks
-   *     3. `"slider-without-filters"` is the same as `"slider"` but does also not render any sorting or filter buttons
-   * @default "grid"
-   */
-  layout?: PossibleLayout;
-}
-/**
- * The listing to query Depict for. `type` can be `"listingId"` or `"externalId"` and `id` is the actual id.
- * If `id` is `"listingId"`, it should be a uuid where Depict is the source of truth, you can get them here: https://api.depict.ai/docs#tag/Listing/operation/Get_Listings_v3_listings_get.
- * If `id` is `"externalId"`, it should be the id of the product listing in your system - whatever was passed to Depict during data ingestion.
- */
-export type ListingQuery = {
-  type: typeof LISTING_ID | typeof EXTERNAL_ID;
-  id: string;
-};
-/** @jsxImportSource solid-js */
-export function GenericSliderArrowButton(props?: {
-  width_?: number;
-  height_?: number;
-}): SVGElement;
-export function SlidableItems({
-  children,
-  slider_ref_,
-  faded_opacity_,
-  mutation_plugins_,
-  disable_fading_,
-  arrow_width_,
-  arrow_height_
-}: {
-  children?: JSX.Element;
-  slider_ref_?: (slider: Amazing_Slider) => any;
-  faded_opacity_?: number;
-  disable_fading_?: boolean;
-  mutation_plugins_?: ((this: Amazing_Slider, mutations: IntersectionObserverEntry[], intersecting_items: Record<number, IntersectionObserverEntry>) => unknown)[];
-  arrow_width_?: number;
-  arrow_height_?: number;
-}): JSX.Element;
-/**
- * Renders a set of tabs
- * Will ignore any children that's not a <Tab />
- * Will cache children after the first visit, so they don't get re-created when closing and re-opening a tab
- */
-export function Tabs(props: Parameters<typeof ActualTabs>[0]): JSX.Element;
-declare function ActualTabs(props: {
-  children: JSX.Element;
-  wrapTabBar?: (navElement: JSX.Element) => JSX.Element;
-  slidable?: boolean;
-  /**
-   * Component to use for creating an anchor (<a> tag) for the tab bar
-   */
-  AnchorComponent: (props: JSX.AnchorHTMLAttributes<HTMLAnchorElement> & {
-    children: JSX.Element;
-  }) => JSX.Element;
-}): JSX.Element;
-/**
- * Renders a tab
- * Provide a custom id if you want to link to it from outside the tabs (i.e. provide "hello" and then linking to "#hello" focuses the tab). The id has to be unique.
- */
-export function Tab(props: {
-  label: JSX.Element;
-  children: JSX.Element;
-  onSelected?: VoidFunction;
-  id?: string;
-}): undefined;
+  showBreadcrumbs?: boolean;
+  /**
+   * Whether to show the quicklinks in the category page.
+   * @default true
+   */
+  showQuicklinks?: boolean;
+  /**
+   * The layout used for listing the products.
+   *     1. `"grid"` is the default and shows the products in a grid
+   *     2. `"slider"` shows the products in a slider and has default `false` for showBreadcrumbs and showQuicklinks
+   *     3. `"slider-without-filters"` is the same as `"slider"` but does also not render any sorting or filter buttons
+   * @default "grid"
+   */
+  layout?: PossibleLayout;
+}
 /**
- * Basically allows you to use SearchModal
- * So the idea is to have a modal. It should either be rendered and exist, in which case it is in the foreground and open, or it's completely gone. This makes things easier.
- * @param search_modal a function which returns an array of nodes that get appended into <body>. This function will run in its own solid-js root which will call onCleanup and cleanup all reactive things inside it when the modal is closed. This function will get the arguments passed to open_modal_ and the modal_fn_opts merged together, along with register_closing_animation_ where an async function that resolves once the animation is finished can be provided to animate the closing of the modal
- * @param modal_fn_opts static options for the modal that won't change on a per-opening basis
- * @param parent override the parent element to append the modal to. Defaults to <body>
- @returns a function to open and close the modal. When calling the open_modal_ function additional parameters can be passed to the modal
+ * The listing to query Depict for. `type` can be `"listingId"` or `"externalId"`..
+ * If `id` is `"listingId"`, it should be a uuid where Depict is the source of truth, you can get them here: https://api.depict.ai/docs#tag/Listing/operation/Get_Listings_v3_listings_get.
+ * If `id` is `"externalId"`, it should be the id of the product listing in your system - whatever was passed to Depict during data ingestion.
  */
-export function general_modal_abstraction<StaticOptions extends {
-  [key: string]: any;
-}, ExtraOptionsProvidedOnOpen extends {
-  [key: string]: any;
-}>(search_modal: (options: StaticOptions & ExtraOptionsProvidedOnOpen & {
-  close_modal_: VoidFunction;
-  open_modal_: (extra_options_for_modal?: ExtraOptionsProvidedOnOpen, on_dispose?: VoidFunction) => void;
-  register_closing_animation_: (animation: () => Promise<any>) => void;
-}) => Node_Array, modal_fn_opts: StaticOptions, parent?: HTMLElement | ShadowRoot): Promise<{
-  open_modal_: (extra_options_for_modal?: any, on_dispose?: VoidFunction | undefined) => Promise<void | undefined>;
-  close_modal_: () => void | undefined;
-}>;
+export type ListingQuery = {
+  type: typeof LISTING_ID | typeof EXTERNAL_ID;
+  id: string;
+};
 export type OnNavigation = ((options: {
   is_replace: boolean;
   new_url: URL;
@@ -315,71 +759,122 @@ declare class PseudoRouter {
   constructor(on_navigation: OnNavigation, listing_query_state_key?: string);
 }
 /**
- * Makes signals out of values in history.state so that you can use history state as an intuitive storage of application state.
- * @param params_to_default_value an object of keys with a serialisable default value.
- * @param router_ router used to replace state
- * @returns An object with the same keys as provided with the value being a Signal containing the default value. When the signal is set, history.replaceState is called and the key/value is put into history.state. If something else pushes a new state or the state is poped the signal value will update to always be in-line with the value of history.state.
+ * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
  */
-export function history_dot_state_to_state<Param extends string, DefaultValue>(params_to_default_value: Record<Param, DefaultValue>, router_: PseudoRouter): Record<Param, Signal<any>>;
+export function media_query_to_accessor(media_query: string): import("solid-js").Accessor<boolean>;
 /**
- * Disables scrolling until the solidjs reactive scoped is disposed (onCleanup)
- * @returns A cleanup function to manually re-enable scrolling.
+ * First generation (classic) search modal - the solid component that gets added to <body> when the search modal is opened
  */
-export function disable_scrolling(): () => void;
-declare class SDKError extends Error {}
-export class ProductCardError extends SDKError {
-  constructor(templateError: Error);
-}
-export function SentryErrorBoundary(props: {
+declare function RawClassicSearchModal({
+  search_field_value_: props_search_field_value,
+  get_search_query_,
+  search_query_url_param_name_,
+  previous_searches_,
+  close_modal_,
+  depict_api_,
+  merchant_,
+  market_,
+  submit_query_: props_submit_query,
+  instant_results_options_,
+  register_closing_animation_,
+  url_transformer_,
+  closing_animation_,
+  clear_filters_,
+  i18n_,
+  disable_scrolling_,
+  enable_category_suggestions_,
+  class_list_,
+  bottom_distance_under_modal_,
+  selected_text_range_,
+  dont_sync_search_field_value_except_on_submit_,
+  router_,
+  content_search_enabled_,
+  alignmentSignals_
+}: {
+  search_field_value_: Signal<string>;
+  get_search_query_: Accessor<string>;
+  search_query_url_param_name_: string;
+  previous_searches_: Signal<string[]>;
+  close_modal_: VoidFunction;
+  depict_api_: DepictAPI<any>;
+  clear_filters_: (user_triggered: boolean) => void;
+  merchant_: Accessor<string>;
+  market_: Accessor<TwoLetterMarket>;
+  submit_query_: (new_query?: string) => void;
+  class_list_?: Accessor<Record<string, boolean>>;
+  url_transformer_?: (url_object: URL) => unknown;
+  disable_scrolling_?: boolean;
+  closing_animation_?: () => Promise<any>;
+  register_closing_animation_: (animation: () => Promise<any>) => void;
+  bottom_distance_under_modal_?: Accessor<number | undefined>;
+  alignmentSignals_?: ModalAlignmentSignals;
+  selected_text_range_?: [number | null, number | null];
+  router_: PseudoRouter;
+  instant_results_options_: {
+    min_products_to_fetch_: number;
+    has_sort_or_filters_: Accessor<boolean>;
+  };
+  i18n_: solid_search_i18n;
+  /** Should we include category suggestions. Defaults to true */
+  enable_category_suggestions_?: boolean;
+  dont_sync_search_field_value_except_on_submit_?: boolean;
+  content_search_enabled_: Accessor<boolean>;
+}): HTMLDivElement[];
+export const ClassicSearchModal: typeof RawClassicSearchModal;
+/**
+ * Renders a set of tabs
+ * Will ignore any children that's not a <Tab />
+ * Will cache children after the first visit, so they don't get re-created when closing and re-opening a tab
+ */
+export function Tabs(props: Parameters<typeof ActualTabs>[0]): JSX.Element;
+declare function ActualTabs(props: {
   children: JSX.Element;
-  message_: string;
-  severity_: Parameters<typeof report>[1];
-  on_error_?: (retry: VoidFunction) => JSX.Element | void;
-  class_list_?: string[];
+  wrapTabBar?: (navElement: JSX.Element) => JSX.Element;
+  slidable?: boolean;
+  /**
+   * Component to use for creating an anchor (<a> tag) for the tab bar
+   */
+  AnchorComponent: (props: JSX.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    children: JSX.Element;
+  }) => JSX.Element;
 }): JSX.Element;
-export function CrossIcon(props?: JSX.SvgSVGAttributes<SVGSVGElement>): SVGElement;
 /**
- * Base placeholder component used by ImagePlaceholder and TextPlaceholder
+ * Renders a tab
+ * Provide a custom id if you want to link to it from outside the tabs (i.e. provide "hello" and then linking to "#hello" focuses the tab). The id has to be unique.
  */
-export function BasePlaceholder(props: {
-  style: JSX.CSSProperties;
-  class?: string;
-}): JSX.Element;
-type ImagePlaceholderBaseOptions = {
-  style?: JSX.CSSProperties;
-  class?: string;
-};
-type ImagePlaceholderBlockOptions = {
-  width: string;
-  height: string;
-};
-type ImagePlaceholderImageOptions = {
-  aspectRatio: number;
-};
+export function Tab(props: {
+  label: JSX.Element;
+  children: JSX.Element;
+  onSelected?: VoidFunction;
+  id?: string;
+}): undefined;
 /**
- * A placeholder that can be used instead of an image or other block of content while it's loading.
- * The placeholder has `display:block`, meaning it will create a new "row" in the layout for itself. Can be used either for images with a defined aspect ratio (ContainedImage) or blocks.
- * @property aspectRatio if aspectRatio is defined the placeholder will be in "image mode" and fill out the available width and then adjust the height according to the aspectRatio
- * @property width If width and height is set, the defined width and height will be used.
- * @property height If width and height is set, the defined width and height will be used.
- * @property class extra classes to add to the placeholder
- * @property style extra styles to add to the placeholder
+ * Basically allows you to use SearchModal
+ * So the idea is to have a modal. It should either be rendered and exist, in which case it is in the foreground and open, or it's completely gone. This makes things easier.
+ * @param search_modal a function which returns an array of nodes that get appended into <body>. This function will run in its own solid-js root which will call onCleanup and cleanup all reactive things inside it when the modal is closed. This function will get the arguments passed to open_modal_ and the modal_fn_opts merged together, along with register_closing_animation_ where an async function that resolves once the animation is finished can be provided to animate the closing of the modal
+ * @param modal_fn_opts static options for the modal that won't change on a per-opening basis
+ * @param parent override the parent element to append the modal to. Defaults to <body>
+ @returns a function to open and close the modal. When calling the open_modal_ function additional parameters can be passed to the modal
  */
-export function ImagePlaceholder(props: ImagePlaceholderBaseOptions & (ImagePlaceholderBlockOptions | ImagePlaceholderImageOptions)): JSX.Element;
+export function general_modal_abstraction<StaticOptions extends {
+  [key: string]: any;
+}, ExtraOptionsProvidedOnOpen extends {
+  [key: string]: any;
+}>(search_modal: (options: StaticOptions & ExtraOptionsProvidedOnOpen & {
+  close_modal_: VoidFunction;
+  open_modal_: (extra_options_for_modal?: ExtraOptionsProvidedOnOpen, on_dispose?: VoidFunction) => void;
+  register_closing_animation_: (animation: () => Promise<any>) => void;
+}) => Node_Array, modal_fn_opts: StaticOptions, parent?: HTMLElement | ShadowRoot): Promise<{
+  open_modal_: (extra_options_for_modal?: any, on_dispose?: VoidFunction | undefined) => Promise<void | undefined>;
+  close_modal_: () => void | undefined;
+}>;
 /**
- * A Placeholder to use instead of some text, while it's loading. This is the inline version, meant to be embedded into sentences (or exist instead of them), etc.
- * If you want a block version, use `ImagePlaceholder` with `width`and `height` set instead.
- * @property height height of the placeholder. Set to `1em` by default.
- * @property width width of the placeholder. For specific number of characters use `ch`, ex: `width="7ch"`
- * @property class extra classes to add to the placeholder
- * @property style extra styles to add to the placeholder
+ * Makes signals out of values in history.state so that you can use history state as an intuitive storage of application state.
+ * @param params_to_default_value an object of keys with a serialisable default value.
+ * @param router_ router used to replace state
+ * @returns An object with the same keys as provided with the value being a Signal containing the default value. When the signal is set, history.replaceState is called and the key/value is put into history.state. If something else pushes a new state or the state is poped the signal value will update to always be in-line with the value of history.state.
  */
-export function TextPlaceholder(props: {
-  style?: JSX.CSSProperties;
-  height: string;
-  width: string;
-  class?: string;
-}): JSX.Element;
+export function history_dot_state_to_state<Param extends string, DefaultValue>(params_to_default_value: Record<Param, DefaultValue>, router_: PseudoRouter): Record<Param, Signal<any>>;
 export const CategoryTitle: ({
   category_title_,
   product_count_
@@ -396,44 +891,6 @@ 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 SolidLayoutOptions = {
-  cols_at_size: ColsAtSize;
-  grid_spacing: string;
-  rows: {
-    start_rows?: number;
-    rows_per_click?: number;
-    currently_visible?: Signal<number>;
-    max_rows?: number;
-    button?: JSX.Element;
-    view_less_button?: JSX.Element;
-  } | "all";
-  layout: "slider" | "grid";
-  disable_partial_rows?: boolean;
-  override_vertical_spacing?: string;
-  children: JSX.Element;
-  element_attributes: Omit<JSX.HTMLAttributes<HTMLDivElement>, "classList">;
-};
-/**
- * SolidLayout: SolidJS adaption of Layout. Calculates CSS for a grid or slider with a certain spacing and certain number of columns at certain screen sizes, including a view more button. All properties are reactive.
- * @property       rows                  if set to 'all': Just generate grid styling without any viewing/hiding functionality. If an object: start_rows is the number of rows at the beginning. rows_per_click is the amount of rows to view on each view more button click. button is the view more button to display. currently_visible is a signal that you can use to get and set the number of currently viewed rows
- * @property       cols_at_size          An array with sub arrays looking like this: `[n_cols, min_width_media_query, max_width_media_query, grid_spacing_for_size]`, everything after `[n_cols, min_width]` is optional. falsey value for `min_width = no min_width`
- * @property       grid_spacing  spacing to use if none is specified for the specific size in `cols_at_size`
- * @property       disable_partial_rows  If set to `true`, will not let user press "show more" if next row is a partial row. Example of partial row: `cols_at_size` says we should have 4 recs in the next row, but we only have 2 left, so the row just gets 2 instead of 4, meaning it doesn't "fill out".
- * @property override_vertical_spacing by default, the grid_spacing is used both horizontally and vertically, with this you can specify a separate spacing
- * @return An accessor containing a CSS string
- */
-export function SolidLayout(props: SolidLayoutOptions): JSX.Element;
-/**
- * Provider to wrap every listing (group of products) in
- * Used for example for deduplicating ResizeObservers for responsive images
- */
-export function ListingProvider(props: {
-  children: JSX.Element;
-}): JSX.Element;
-/**
- * Use this to get the context object if your component is within a ListingProvider
- */
-export function useListing(): Record<symbol, any> | undefined;
 /**
  * Render a grid with provided recommendations. displayTransformers will not be applied for this since you yourself provide the displays. Options are reactive.
  * If no merchant or market is specified, the product cards won't get any merchant and market in their second argument.
@@ -463,110 +920,35 @@ type ShopTheLookOpenModalOptions<T extends Display> = {
 type ShopTheLookButtonProps<T extends Display> = ShopTheLookOpenModalOptions<T> & {
   buttonAttributes?: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
 };
-export function ShopTheLookButton<T extends Display>(props: ShopTheLookButtonProps<T>): JSX.Element;
-/**
- * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
- */
-export function media_query_to_accessor(media_query: string): import("solid-js").Accessor<boolean>;
-/**
- * The interface for a content block.
- * Please make sure that you don't have content blocks overlap as that will cause undefined behavior.
- * The height of the content block will be the height of the tallest item in a row, so if there are no products in a row the content block needs to "bring its own height".
- * If you need to load any data in the content block, please make sure to return a placeholder while you're doing so (see `ImagePlaceholder`), to avoid layout shifts and ensure scroll restoration works correctly.
- *
- * - `span_columns`: How many columns the block should span. This will be capped to the number of columns available.
- * - `span_rows`: How many rows the block should span.
- * - `position`: Where the block should be positioned. Can be `left`, `center` or `right`.
- * - `content`: The content to render in the block - please provide a function returning one or multiple HTML elements.
- */
-export type ContentBlock = {
-  span_columns: number;
-  span_rows: number;
-  position: "left" | "center" | "right";
-  content: () => JSX.Element | Promise<JSX.Element>;
-};
-/**
- * A sparse array containing content blocks to show (or an empty slot or undefined if there's no block at that index). See ContentBlock for how a content block looks like. The index is the row where the content block should be shown.
- * For example, to create a block on row 1 and 3 you'd do `[, block1, , block2]`.
- * Alternatively:
- * ```
- * const blocks = [];
- * blocks[1] = block1;
- * blocks[3] = block2;
- * ```
- */
-export type ContentBlocksByRow = (undefined | ContentBlock)[];
-/**
- * Function that encodes a filter object into query parameters and sets them on the given URLSearchParams object.
- */
-export function encode_filters(filters: FilterWithData[], search_params: URLSearchParams, filter_query_param_prefix: string): void;
-/**
- * Function that decodes the filters from the provided query parameters and returns them as an array of filter objects.
- */
-export function decode_filters(search_params: URLSearchParams, filter_query_param_prefix: string): FilterWithData[];
-/**
- * Function that encodes a sort model into a query paremeter and sets them on the given URLSearchParams object.
- */
-export function encode_sorting(sorting: SortModel | undefined, search_params: URLSearchParams, sorting_query_param: string): void;
-/**
- * Function that decodes the sort model from the provided query parameters and returns it as a sort model, if present.
- */
-export function decode_sorting(search_params: URLSearchParams, sorting_query_param_: string): SortModel | undefined;
-/**
- * Remove all Depict filter/sorting query parameters from the given URLSearchParams object.
- * Used to reset the URLSearchParams object to a clean state, before adding new filters/sorting.
- * @param search_params
- * @param filter_query_param_prefix Prefix of the filter query parameters
- * @param sorting_query_param
- */
-export function strip_encoded_filter_and_sort(search_params: URLSearchParams, filter_query_param_prefix: string, sorting_query_param: string): void;
-/**
- * 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)
- * (Not using the CSS aspect-ratio property yet here due to browser support)
- */
-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
- */
-export function makeSizeAccessor(whatToWatch: HTMLElement): Accessor<number>;
+export function ShopTheLookButton<T extends Display>(props: ShopTheLookButtonProps<T>): JSX.Element;
 /**
- * Automatically generate a srcset from the shopify CDN for an image and set the sizes attribute to the provided accessor.
- * Will also delay loading and decoding of image until the browser is idle (with 5s timeout) to improve filtering/loading more performance.
- * This is used for our responsive images:
- * 1. The image must have a container with a fixed size (or aspect ratio) that is independent of the image. When aspectRatio is configured on the depict-cards element as data attribute, we will wrap the image in a ImageContainer for this. If it's false, the user has to provide this container themselves.
- * 2. We set a ResizeObserver on one of the currently visible images (see makeSizeAccessor)
- * 3. We set the size attribute of all the visible images to the size of the container we're observing. The point of this is that the sizes attribute is used to determine which image to load, and usually it's set by the user and depends on the relationship between image size and viewport size. By using a ResizeObserver, we can make sure the sizes attribute is always set to the correct value without it having to be configured. This will make so the browser always loads the correct image size for a crisp image but still fast load.
- * You need to use insert(domNode, <ShopifyResponsiveImg size={sizeAccessor} src={src} />) if you want to insert the return value of this component into a DOM element manually, where you `import { insert } from "solid-js/web";` because we first want to insert the image once it has loaded.
+ * The interface for a content block.
+ * Please make sure that you don't have content blocks overlap as that will cause undefined behavior.
+ * The height of the content block will be the height of the tallest item in a row, so if there are no products in a row the content block needs to "bring its own height".
+ * If you need to load any data in the content block, please make sure to return a placeholder while you're doing so (see `ImagePlaceholder`), to avoid layout shifts and ensure scroll restoration works correctly.
+ *
+ * - `span_columns`: How many columns the block should span. This will be capped to the number of columns available.
+ * - `span_rows`: How many rows the block should span.
+ * - `position`: Where the block should be positioned. Can be `left`, `center` or `right`.
+ * - `content`: The content to render in the block - please provide a function returning one or multiple HTML elements.
  */
-export function ShopifyResponsiveImg(props: {
-  resolutions?: number[];
-  size: Accessor<number>;
-} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes"> & {
-  src: string;
-}): JSX.Element;
-export const shopifyContainedImageContextSymbol: unique symbol;
+export type ContentBlock = {
+  span_columns: number;
+  span_rows: number;
+  position: "left" | "center" | "right";
+  content: () => JSX.Element | Promise<JSX.Element>;
+};
 /**
- * Abstraction built on top of ShopifyResponsiveImg. This is your one-stop-shop If you just need a responsive image.
- * Will return a div of the provided aspect ratio that always has the same size, to avoid content layout shift. Will then put the image inside of the container once it loads.
- * Also makes a responsive image without you having to do anything: uses shopify's CDN which picks the best image format to resize the image to the size of the first image container in a certain listing.
- * 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
- * @property alt alt text for the image
- * @property imgProps props to pass to ShopifyResponsiveImg to add to the <img> element
+ * A sparse array containing content blocks to show (or an empty slot or undefined if there's no block at that index). See ContentBlock for how a content block looks like. The index is the row where the content block should be shown.
+ * For example, to create a block on row 1 and 3 you'd do `[, block1, , block2]`.
+ * Alternatively:
+ * ```
+ * const blocks = [];
+ * blocks[1] = block1;
+ * blocks[3] = block2;
+ * ```
  */
-export function ShopifyContainedImage(props: {
-  src: string;
-  aspectRatio: number;
-  class?: string;
-  imgProps?: Omit<Parameters<typeof ShopifyResponsiveImg>[0], "size" | "src">;
-}): HTMLDivElement;
+export type ContentBlocksByRow = (undefined | ContentBlock)[];
 /**
  * Returns accessor with the size of the provided element, including padding and border (I think)
  */
@@ -591,102 +973,6 @@ export function ExpandingDetails(props: {
   dont_animate_if_instant_open_?: boolean;
 }): HTMLDetailsElement;
 export function accessor_of_object_to_object_with_accessor_values<O extends Record<string | symbol, any>>(obj: Accessor<O>): { [K in keyof O]: Accessor<O[K]> };
-/**
- * Like standard_price_format except that the price and the formatting are reactive accessors
- */
-export function SolidFormatPrice(props: {
-  price_: number;
-  price_formatting_: {
-    pre_: string;
-    post_: string;
-    decimal_places_delimiter_: string;
-    thousands_delimiter_: string;
-    places_after_comma_: number | "auto";
-  };
-}): JSX.Element;
-/**
- * PLP internationalisation shared between search and category listing
- */
-type plp_shared_i18n = {
-  backend_locale_: string;
-  scroll_to_top_: string;
-  back_: string;
-  open_sorting_: string;
-  close_sorting_: string;
-  open_filters_: string;
-  close_filters_: string;
-  close_: string;
-  ok_: string;
-  filters_cleared_: string;
-  we_cleared_your_filters_: string;
-  restore_: string;
-  sorting_text_: string;
-  filter_text_: string;
-  selected_filters_title_: string;
-  filters_: string;
-  view_less_: string;
-  view_more_: string;
-  clear_all_from_filter_crumbs_: string;
-  clear_individual_filter_: string;
-  of_: string;
-  clear_all_filters_from_big_button_: string;
-  try_without_filters_: string;
-  range_filter_low_point_aria_label_: string;
-  range_filter_high_point_aria_label_: string;
-  morphing_sign_expanded_aria_label_: string;
-  morphing_sign_collapsed_aria_label_: string;
-  search_a_filter_: (filter_section: string) => string;
-  price_formatting_: {
-    pre_: string;
-    post_: string;
-    decimal_places_delimiter_: string;
-    thousands_delimiter_: string;
-    places_after_comma_: number | "auto";
-  };
-};
-/**
- * Search internationalisation
- */
-interface search_i18n extends plp_shared_i18n {
-  placeholder_text_: string;
-  show_n_results_: (number_of_results: HTMLElement) => Elem[];
-  no_results_text_: string;
-  no_products_: string;
-  search_recs_title_: string;
-  clear_filters_query_sorting_after_submit_: string;
-  modal_view_all_results_: (number_of_results: HTMLElement) => Elem[];
-  modal_discover_more_: string;
-  get_showing_results_for_: (query: HTMLElement, number_of_results_element: HTMLElement, has_query: boolean, number_of_results: number | undefined) => Elem[];
-  get_showing_pages_for_: (query: HTMLElement, number_of_results_element: HTMLElement, has_query: boolean, number_of_results: number | undefined) => Elem[];
-  previous_searches_text_: string;
-  category_: string;
-  brand_: string;
-  suggestions_: string;
-  search_submit_button_aria_label_: string;
-  search_field_field_aria_label_: string;
-  previous_searches_delete_entry_from_history_: string;
-  content_: string;
-}
-/**
- * Category internationalisation
- */
-interface category_i18n extends plp_shared_i18n {
-  show_n_products_: (number_of_results: HTMLElement) => Elem[];
-  no_products_text_: string;
-  product_: string;
-  products_: string;
-  breadcrumbs_aria_label_: string;
-  quicklinks_aria_label_: string;
-  breadcrumbs_separator_: string;
-}
-/**
- * For anything that is not exposed and only used internally we can use solid signals to get more performant rendering.
- * For anything that can be used outside of solid, like Product Cards and InstantCards these types should not be used.
- *
- * Any solid_ type below should not be exposed outside of this library, as the accessors can be confusing and unnecessary.
- */
-/** For internal components using i18n that gets wrapped in solid's Accessors */
-type solid_plp_shared_i18n = { [K in keyof plp_shared_i18n]: Accessor<plp_shared_i18n[K]> };
 export function show_toast({
   children,
   on_close_,
@@ -817,81 +1103,6 @@ type RecsAPIWrapperOptions = {
  * @return This function is guaranteed to return an array of Displays. If anything fails, you will get an empty array.
  */
 export function fetchDepictRecommendations<T extends ModernDisplay = ModernDisplay>(options: RecsAPIWrapperOptions): Promise<T[]>;
-export type InstantCard<T extends Display> = (display: T, context: {
-  index: number;
-  i18n: search_i18n;
-  merchant: string;
-  market: string;
-}) => JSX.Element;
-type CategorySuggestionAfterURLCreator = ListingSuggestion & {
-  page_url: string;
-};
-type ReplaceCategorySuggestion<T> = T extends ListingSuggestion ? CategorySuggestionAfterURLCreator : T extends ListingSuggestion[] ? CategorySuggestionAfterURLCreator[] : T;
-type SearchSuggestionsResponseAfterURLCreator = { [K in keyof SearchSuggestionsResponseV3]: ReplaceCategorySuggestion<SearchSuggestionsResponseV3[K]> };
-type AddPageUrlToDisplay<T extends any[]> = (T[number] & {
-  page_url: string;
-})[];
-type SearchResponseAfterDisplayTransformer = { [K in keyof SearchResponse]: K extends "displays" ? AddPageUrlToDisplay<SearchResponse[K]> : K extends "filters" ? AddActualFieldToFilters<SearchResponse[K]> : SearchResponse[K] };
-type ProductListingWithPageURL = ProductListing & {
-  page_url: string;
-};
-type _AddPageUrlToDisplay1<T extends any[]> = (T[number] & {
-  page_url: string;
-})[];
-type ProductListingResponseAfterDisplayTransformer = { [K in keyof ProductListingResponseV3]: K extends "displays" ? _AddPageUrlToDisplay1<ProductListingResponseV3[K]> : K extends "filters" ? AddActualFieldToFilters<ProductListingResponseV3[K]> : ProductListingResponseV3[K] };
-type GetListingResponseAfterDisplayTransformer = { [K in keyof GetListingResponseWithQuicklinksAndBreadcrumbs]: K extends "breadcrumbs" ? ProductListingWithPageURL[] : K extends "quick_links" ? ProductListingWithPageURL[] : GetListingResponseWithQuicklinksAndBreadcrumbs[K] };
-type GetListingResponseWithQuicklinksAndBreadcrumbs = Omit<GetListingResponse, "siblings" | "ancestors" | "children"> & {
-  quick_links: ProductListingWithAncestors[];
-  breadcrumbs: ProductListingWithAncestors[];
-};
-type DepictAPIConstructorOptions<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = {
-  get_metadata?: () => Promise<{
-    [k: string]: string;
-  } | undefined>;
-  get_session_id?: () => string | undefined;
-} & SomethingTakingADisplayTransformers<InputDisplay, OutputDisplay>;
-interface GetListingOptions extends Omit<GetListingRequest, "listing_id"> {
-  session_id?: string;
-  id_to_query_for_: string;
-  id_type_: typeof LISTING_ID | typeof EXTERNAL_ID;
-}
-/**
- * Class that handles all communication done in PLP code with the Depict API. (Notably not for recommendations currently).
- * It handles caching, retries and errors and is the only place that should be making requests to the Depict API.
- */
-export class DepictAPI<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never = InputDisplay extends ModernDisplay ? ModernDisplayWithPageUrl<InputDisplay> : never> {
-  #private;
-  display_transformers: DisplayTransformers<ModernDisplay, OutputDisplay> | undefined;
-  constructor(options: DepictAPIConstructorOptions<InputDisplay, OutputDisplay>);
-  suggest(input_req: SearchSuggestionsRequestV3): Promise<SearchSuggestionsResponseAfterURLCreator & {
-    failed?: true;
-  }>;
-  query(input_req: SearchRequestV3): Promise<SearchResponseAfterDisplayTransformer & {
-    failed?: true;
-  }>;
-  get_listing({
-    id_type_,
-    id_to_query_for_,
-    ...input_req
-  }: GetListingOptions): Promise<GetListingResponseAfterDisplayTransformer & {
-    failed?: true;
-  }>;
-  get_listing_products({
-    id_to_query_for_,
-    id_type_,
-    ...input_req_
-  }: ProductListingRequestV3 & {
-    id_to_query_for_: string;
-    id_type_: typeof LISTING_ID | typeof EXTERNAL_ID;
-  }): Promise<ProductListingResponseAfterDisplayTransformer & {
-    failed?: true;
-  }>;
-  get_recommended<T extends Display>(input_req: BaseSearchRequestV3): Promise<{
-    displays: T[];
-  } & {
-    failed?: true | undefined;
-  }>;
-}
 /**
  * Embeds number of products between sort and filter buttons on mobile if possible, only supported for category pages right now. Pass it as category_title_ to Category.
  * Note: this will add an invisible element as first element in depict-search-page which will confuse the flex-gap SCSS mixin a bit so you'll get some extra spacing at the beginning of the search page
@@ -991,31 +1202,8 @@ export function QuickLinks<T extends Display>({
  * Gets available listings for a given merchant, market and locale
  */
 export function get_listings(merchant: string, market: string, locale: string): Promise<import("@depict-ai/types/api/ListListingsResponseItem").ListListingsResponseItem1[]>;
-export function DefaultInstantCardPlaceholder(): HTMLDivElement;
-/**
- * Useful for aligning the search modal to an element, like an existing input field
- * @param modal_body_style a signal containing the style properties that will be applied to the modal body. You provide it to open_modal_ as  `style_props_` when using SearchModal
- * @param input_field the element to align to.
- * @param width_transformer A function that gets to change the width value before it is being applied
- * @param includeScroll Should the aligner offset with scrolling? Useful to set to false when using position: fixed
- * @param one_axies_only Usually align_field will align on top and left positioning and set the width. With one_axies_only it can be chosen to apart from setting width only align on top/left axis
- * @returns a function that can be called any time to re-run the alignment routine in case that the elements have gone out of alignment
- */
-export function align_field(modal_body_style: Signal<JSX.CSSProperties>, input_field: HTMLElement, width_transformer?: (arg0: number) => number, includeScroll?: boolean, one_axies_only?: "top" | "left"): () => void;
-interface Styles {
-  [selector: string]: JSX.CSSProperties;
-}
-export const styles_to_valid_css_string: (styles: Styles) => string;
 /** A function that renders category suggestion cards. Set to false to disable category suggestions. */
-export type RenderCategorySuggestion = (category_suggestion: Accessor<CategorySuggestionAfterURLCreator>, index: number) => JSX.Element;
-/**
- * Connects the height of the search field to the height of the aligner.
- * @param aligner
- * @returns
- */
-export function connect_search_field_height_to_aligner_height(aligner: HTMLElement): {
-  cleanup: () => void;
-};
+export type RenderCategorySuggestion = (category_suggestion: Accessor<ListingSuggestionAfterURLCreator>, index: number) => JSX.Element;
 type GeneralConstructorOptions<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = {
   search_query_url_param_name?: string;
   market: string;
@@ -1026,9 +1214,9 @@ type GeneralConstructorOptions<InputDisplay extends Display, OutputDisplay exten
   enable_category_suggestions?: boolean;
   enable_content_search?: boolean;
   unique_instance_key_for_state?: string;
+  searchModalComponent: typeof SearchModalV2<InputDisplay, OutputDisplay> | typeof ClassicSearchModal;
   disable_scrolling_during_modal?: boolean;
   bottom_distance_under_modal?: Accessor<number | undefined>;
-  render_instant_card?: InstantCard<OutputDisplay extends ModernDisplay ? OutputDisplay : InputDisplay>;
   override_modal_element?: HTMLElement | ShadowRoot;
 };
 type ConstructorOptionsWithApi<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = GeneralConstructorOptions<InputDisplay, OutputDisplay> & {
@@ -1042,8 +1230,9 @@ type ConstructorOptionsWithoutAPI<InputDisplay extends Display, OutputDisplay ex
 } & SomethingTakingADisplayTransformers<InputDisplay, OutputDisplay>;
 type ConstructorOptions<InputDisplay extends Display, OutputDisplay extends ModernDisplay> = ConstructorOptionsWithApi<InputDisplay, OutputDisplay> | ConstructorOptionsWithoutAPI<InputDisplay, OutputDisplay>;
 export type OpenModalArguments = [options_for_modal?: {
-  style_props_?: Signal<JSX.CSSProperties>;
+  alignmentSignals_?: ModalAlignmentSignals;
   closing_animation_?: () => Promise<any>;
+  setSearchFieldOuterWidth_?: Setter<number>;
   class_list_?: Accessor<Record<string, boolean>>;
   selected_text_range_?: readonly [number | null, number | null] | [number | null, number | null];
   dont_sync_search_field_value_except_on_submit_?: boolean;
@@ -1059,9 +1248,9 @@ export class DepictSearch<InputDisplay extends Display, OutputDisplay extends Mo
     enable_category_suggestions,
     display_transformers,
     api,
+    searchModalComponent,
     disable_scrolling_during_modal,
     bottom_distance_under_modal,
-    render_instant_card,
     override_modal_element,
     ...props_on_class
   }: ConstructorOptions<InputDisplay, OutputDisplay>);
@@ -1099,13 +1288,14 @@ export function SearchPage<OriginalDisplay extends Display, TransformedDisplay e
     recommendations_cols_at_size?: SDKColsAtSize;
   };
 }): import("@depict-ai/utilishared").Node_Array;
-interface SearchFieldParams {
-  depict_search: DepictSearch<any>;
-  modal_dispose_handler?: VoidFunction;
-  click_handler?: (this: HTMLDivElement, ev: MouseEvent) => any;
-  aligner_ref?: HTMLElement | null;
-}
-export function SearchField(props: SearchFieldParams): HTMLDivElement[];
+/**
+ * Connects the height of the search field to the height of the aligner.
+ * @param aligner
+ * @returns
+ */
+export function connect_search_field_height_to_aligner_height(aligner: HTMLElement): {
+  cleanup: () => void;
+};
 type CenteredLocation = {
   location?: "centered";
 };
@@ -1169,4 +1359,14 @@ export class PageReplacer extends EventTarget {
  * makes so that links to the previous page close the search instead of closing the search and reloading the page (to be used with non-spas)
  */
 export function setup_fast_leave(pr: PageReplacer): void;
+interface SearchFieldParams {
+  depict_search: DepictSearch<any>;
+  modal_dispose_handler?: VoidFunction;
+  click_handler?: (this: HTMLDivElement, ev: MouseEvent) => any;
+  aligner_ref?: HTMLElement | null;
+}
+/**
+ * Returns a SearchField that will open a modal aligned to it when clicked.
+ */
+export function SearchField(props: SearchFieldParams): HTMLDivElement[];
 export type { SearchFilter } from "@depict-ai/types/api/SearchRequestV3";