@depict-ai/ui 1.4.3 → 1.4.4

package/server/ES10/index.d.ts

@@ -0,0 +1,844 @@
+import { JSX, Signal, Accessor, Setter } from "solid-js";
+import { Elem, Display, ColsAtSize, ModernDisplay, Node_Array } from "@depict-ai/utilishared/ES10";
+import { SearchFilter, SearchRequest } from "@depict-ai/types/api/SearchRequest";
+import { SearchFilter as _SearchFilter1, SearchResponse } from "@depict-ai/types/api/SearchResponse";
+import { BaseCategoryDisplay, ProductListingResponse } from "@depict-ai/types/api/ProductListingResponse";
+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 { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
+export const version = "1.4.4";
+export function ExpandingDetails(props: {
+  details_: HTMLDetailsElement;
+  summary_: HTMLElement;
+  children: JSX.Element | (() => JSX.Element);
+  is_open_: Signal<boolean>;
+  duration_?: number;
+  delay_?: number;
+  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 = {
+  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;
+  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;
+  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: HTMLElement) => 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;
+}
+/**
+ * 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]> };
+/** @jsxImportSource solid-js */
+export function GenericSliderArrowButton(props?: {
+  width_?: number;
+  height_?: number;
+}): SVGElement;
+export function show_toast({
+  children,
+  on_close_,
+  close_after_,
+  ...more_attributes
+}: {
+  children?: JSX.Element;
+  close_after_: number;
+  on_close_?: VoidFunction;
+} & JSX.HTMLAttributes<HTMLDivElement>): {
+  close_toast_: VoidFunction;
+};
+export type SDKGridSpacing = string | {
+  horizontal: string;
+  vertical: string;
+};
+export type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
+type FilterWithData = WithRequired<SearchFilter, "data">;
+export interface SDKRenderingInfo {
+  set_on_index_change: (fn: (index: number) => void) => void;
+  merchant: string;
+  market: string;
+}
+export type ProductCardTemplate<T extends Display> = (display: T | null, info?: SDKRenderingInfo) => JSX.Element | Promise<JSX.Element>;
+/**
+ * Will be sent to backend to indicate whether the query_id_ is for a collection or category.
+ * Backend defaults to category if not specified.
+ */
+export type ListingType = "collection" | "category";
+type AddActualFieldToArray<T> = T extends Array<infer U> ? (U & {
+  actual_field?: string;
+})[] : never;
+type AddActualFieldToFilters<T extends SearchFilter[] | undefined> = T extends undefined ? undefined : AddActualFieldToArray<T>;
+export function CrossIcon(props?: JSX.SvgSVGAttributes<SVGSVGElement>): SVGElement;
+export function SelectedFilters({
+  number_of_rendered_selected_filters_items_,
+  i18n_,
+  selected_filters_,
+  local_filter_cache_: [read_local_filter_cache],
+  get_search_filters_open_,
+  get_search_sorting_open_,
+  local_filter_cache_,
+  expanded_hierarchical_filters_
+}: {
+  get_search_filters_open_: Accessor<boolean>;
+  get_search_sorting_open_: Accessor<boolean>;
+  expanded_hierarchical_filters_: Signal<{
+    value_: string[];
+    expanded_: boolean;
+  }[]>;
+  number_of_rendered_selected_filters_items_: Signal<number>;
+  i18n_: solid_plp_shared_i18n;
+  selected_filters_: Signal<FilterWithData[]>;
+  local_filter_cache_: Signal<SearchFilter[]>;
+}): HTMLDivElement;
+/**
+ * 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>;
+declare class SDKError extends Error {}
+export class ProductCardError extends SDKError {
+  constructor(templateError: Error);
+}
+/**
+ * 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;
+interface FilterBodyProps {
+  available_filters_: Accessor<_SearchFilter1[] | undefined>;
+  expanded_filters_: Signal<{
+    section_: string;
+    expanded_: boolean;
+  }[]>;
+  selected_filters_: Signal<{
+    field: string;
+    op: _SearchFilter1["op"];
+    data: any;
+  }[]>;
+  local_filter_cache_: Signal<_SearchFilter1[]>;
+  i18n_: solid_plp_shared_i18n;
+  expanded_hierarchical_filters_: Signal<{
+    value_: string[];
+    expanded_: boolean;
+  }[]>;
+  are_in_modal_?: boolean;
+}
+export function FilterBody(props: FilterBodyProps): JSX.Element;
+export function create_modified_filters({
+  available_filters_,
+  local_filter_cache_: [read_local_cache, write_local_cache],
+  selected_filters_: [read_selected_filters]
+}: {
+  available_filters_: Accessor<_SearchFilter1[] | undefined>;
+  selected_filters_: Signal<{
+    field: string;
+    op: _SearchFilter1["op"];
+    data: any;
+  }[]>;
+  local_filter_cache_: Signal<_SearchFilter1[]>;
+}): void;
+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;
+  } | "all";
+  layout: "slider" | "grid";
+  disable_partial_rows?: boolean;
+  override_vertical_spacing?: string;
+  children: JSX.Element;
+  element_attributes: JSX.HTMLAttributes<HTMLDivElement>;
+};
+/**
+ * Grid: Calculates CSS for a grid 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;
+type PageURLCreatorAlwaysThereData = {
+  merchant: string;
+  market: string;
+};
+type PageURLCreatorCategoryData = {
+  type: "categories";
+  data: (BaseCategoryDisplay | CategorySuggestion)[];
+};
+type PageURLCreatorProductData<T extends ModernDisplay> = {
+  displays: T[];
+  type: "products";
+};
+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] };
+type PageURLCreatorOptions<InputDisplay extends ModernDisplay> = PageURLCreatorAlwaysThereData & (PageURLCreatorCategoryData | PageURLCreatorProductData<InputDisplay>);
+/**
+ * PageUrlCreator is, in its most basic form, a function that takes in a list of categories or products and returns a list of page_urls for the provided categories or products.
+ * It's main use case is to allow for the creation of links to the product or category pages on the merchant's site.
+ * It can also be used for the depict customers which already have links to change those links (i.e. for staging sites).
+ * Also, it can be used to enrich the data for each product card in a batched way, which is why it can be an async function and return a whole display in the case of products.
+ */
+export type PageURLCreator<InputDisplay extends ModernDisplay, OutputDisplay extends ModernDisplay | never> = (options: PageURLCreatorOptions<InputDisplay>) => (typeof options)["type"] extends "categories" ? CanBePromiseWrapped<{
+  page_url: string;
+}[]> : CanBePromiseWrapped<{
+  page_url: string;
+}[]> | CanBePromiseWrapped<OutputDisplay extends ModernDisplay ? ModernDisplayWithPageUrl<OutputDisplay>[] : never>;
+export type SomethingTakingAPageURLCreator<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = InputDisplay extends ModernDisplay ? "page_url" extends keyof InputDisplay["variant_displays"][number] ? {
+  page_url_creator?: PageURLCreator<InputDisplay, OutputDisplay>;
+} : {
+  page_url_creator: PageURLCreator<InputDisplay, OutputDisplay>;
+} : {
+  page_url_creator?: never;
+};
+/**
+ * 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
+ @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 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): Promise<{
+  open_modal_: (extra_options_for_modal?: ExtraOptionsProvidedOnOpen, on_dispose?: VoidFunction) => void;
+  close_modal_: () => void;
+}>;
+export type OnNavigation = ((options: {
+  is_replace: boolean;
+  new_url: URL;
+  scroll: boolean;
+}) => void) | "hard_navigation";
+export type ExclusiveId = {
+  categoryId: string;
+  productId?: undefined;
+  productIds?: undefined;
+} | {
+  categoryId?: undefined;
+  productId: string;
+  productIds?: undefined;
+} | {
+  categoryId?: undefined;
+  productId?: undefined;
+  productIds: string[];
+} | {
+  categoryId?: undefined;
+  productId?: undefined;
+  productIds?: undefined;
+};
+type RecsAPIWrapperOptions = {
+  type: string;
+  merchant: string;
+  market: string;
+  userId?: string;
+  sessionId?: string;
+  headers?: HeadersInit;
+} & ExclusiveId;
+/**
+ * Fetches recommendations from Depict's API.
+ * ## It is important that you make the correct choice out of: no id, `categoryId`, `productId` and `productIds` (choose ONE) so read the documentation carefully.
+ *
+ * @param merchant The name of the merchant (e.g. "acme")
+ * @param market The market to fetch recs for. Depict will provide this to you. (Example: "sv" or "sv-se".)
+ * @param type The type of the recommendations, e.g. `front_page`, `after_basket, `related`, etc. Ask Depict for this.
+ * @param categoryId When requesting recommendations for a category page, pass the id of the category page as `categoryId`.
+ * @param productId When requesting recommendations for a single product, e.g. on a product detail page, pass the id of the product as `productId`.
+ * @param productIds When requesting recommendations that should take multiple products into account, i.e. the contents of the basket/cart, pass an array of product ids as `productIds`
+ * @param userId Optional unique identifier of a logged in user. Should be persistent across devices and sessions.
+ * @param sessionId Optional unique identifer of the current session. Only necessary when performing server side requests to Depict.
+ * @param headers Optional headers to send to the Depict API. This could be authentication for example. 99% of integrations can leave this unset.
+ * When no id is provided (none out of `categoryId`, `productId` and `productIds`) general recommendations will be fetched. This is for, for example, the frontpage where generally popular products get returned.
+ *
+ * @note If you only get recommendations when specifying the wrong id type (i.e. you only get basket recommendations if you provide a single product id while the recommendations should be based on everything in the basket) please ask Depict to re-configure the endpoint for you.
+ *
+ *  @example Fetching frontpage recommendations
+ * ```
+ * const front_page_recs = await fetchDepictRecommendations({
+ *     merchant: "oscarjacobson",
+ *     market: "sv-se",
+ *     type: "front_page",
+ *   });
+ * ```
+ * @example Fetching recommendations for a product page
+ * ```
+ *  const product_page_recs = await fetchDepictRecommendations({
+ *     merchant: "stronger",
+ *     market: "se",
+ *     type: "product_normal",
+ *     productId: "hero-sports-bra-luna",
+ *   });
+ * ```
+ * @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 Display = Display>({
+  merchant,
+  market,
+  headers,
+  ...fetch_recs_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 = CategorySuggestion & {
+  page_url: string;
+};
+type ReplaceCategorySuggestion<T> = T extends CategorySuggestion ? CategorySuggestionAfterURLCreator : T extends CategorySuggestion[] ? CategorySuggestionAfterURLCreator[] : T;
+type SearchSuggestionsResponseAfterURLCreator = { [K in keyof SearchSuggestionsResponse]: ReplaceCategorySuggestion<SearchSuggestionsResponse[K]> };
+type AddPageUrlToDisplay<T extends any[]> = (T[number] & {
+  page_url: string;
+})[];
+type SearchResponseAfterURLCreator = { [K in keyof SearchResponse]: K extends "displays" ? AddPageUrlToDisplay<SearchResponse[K]> : K extends "filters" ? AddActualFieldToFilters<SearchResponse[K]> : SearchResponse[K] };
+type BaseCategoryDisplayAfterURLCreator = BaseCategoryDisplay & {
+  page_url: string;
+};
+type ReplaceBaseCategoryDisplay<T> = T extends BaseCategoryDisplay ? BaseCategoryDisplayAfterURLCreator : T extends BaseCategoryDisplay[] ? BaseCategoryDisplayAfterURLCreator[] : T;
+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 DepictAPIConstructorOptions<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = {
+  get_metadata?: () => Promise<{
+    [k: string]: string;
+  } | undefined>;
+  get_user_id?: () => string | undefined;
+  get_session_id?: () => string | undefined;
+} & SomethingTakingAPageURLCreator<InputDisplay, OutputDisplay>;
+/**
+ * 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;
+  page_url_creator: PageURLCreator<ModernDisplay, OutputDisplay> | undefined;
+  constructor(options: DepictAPIConstructorOptions<InputDisplay, OutputDisplay>);
+  suggest(input_req: SearchSuggestionsRequest): Promise<SearchSuggestionsResponseAfterURLCreator & {
+    failed?: true;
+  }>;
+  query(input_req: SearchRequest): Promise<SearchResponseAfterURLCreator & {
+    failed?: true;
+  }>;
+  list(input_req: ProductListingRequest): Promise<ProductListingResponseAfterURLCreator & {
+    failed?: true;
+  }>;
+  get_recommended<T extends Display>(input_req: BaseSearchRequest): Promise<{
+    displays: T[];
+  } & {
+    failed?: true | undefined;
+  }>;
+}
+/**
+ * Disables scrolling until the solidjs reactive scoped is disposed (onCleanup)
+ * @returns A cleanup function to manually re-enable scrolling.
+ */
+export function disable_scrolling(): () => void;
+export const CategoryTitle: ({
+  category_title_,
+  product_count_
+}: {
+  category_title_: Accessor<string | undefined>;
+  product_count_: JSX.Element;
+}) => JSX.Element;
+/**
+ * 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
+ * If you see “ResizeObserver loop limit exceeded”, this is probably doing it. More context here: https://depictaiworkspace.slack.com/archives/C02KVDZ8YHZ/p1667315647758829
+ */
+export const embedded_num_products: ({
+  make_product_count_,
+  set_observed_results_filters_elements_,
+  is_slim_,
+  sort_and_filter_element_,
+  extra_sort_and_filter_args_
+}: {
+  make_product_count_: () => JSX.Element;
+  set_observed_results_filters_elements_: Setter<JSX.Element>;
+  sort_and_filter_element_: Accessor<HTMLDivElement | undefined>;
+  is_slim_: Accessor<boolean>;
+  extra_sort_and_filter_args_: {
+    get_extra_sorting_button_?: ((extra_button: JSX.Element) => unknown) | undefined;
+    get_extra_filters_button_?: ((extra_button: JSX.Element) => unknown) | undefined;
+    sort_button_width_?: Accessor<number | undefined> | undefined;
+    filter_button_width_?: Accessor<number | undefined> | undefined;
+  };
+}) => {
+  only_show_filters_opener_: Accessor<boolean>;
+  middle_elements_: Accessor<JSX.Element>;
+  on_filters_constructed_: () => void;
+};
+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;
+type GeneralCategoryListingOptions = {
+  market: string;
+  merchant: string;
+  localization: category_i18n;
+  unique_instance_key_for_state?: string;
+  on_navigation?: OnNavigation;
+  query_id_state_key?: string;
+};
+type CategoryConstructorOptionsWithApi<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = GeneralCategoryListingOptions & {
+  api: DepictAPI<InputDisplay, OutputDisplay>;
+} & {
+  page_url_creator?: never;
+};
+type CategoryConstructorOptionsWithoutApi<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = GeneralCategoryListingOptions & {
+  api?: never;
+} & (InputDisplay extends ModernDisplay ? "page_url" extends keyof InputDisplay["variant_displays"][number] ? {
+  page_url_creator?: PageURLCreator<InputDisplay, OutputDisplay>;
+} : {
+  page_url_creator: PageURLCreator<InputDisplay, OutputDisplay>;
+} : {
+  page_url_creator?: never;
+});
+type DepictCategoryConstructorOptions<InputDisplay extends Display, OutputDisplay extends ModernDisplay> = CategoryConstructorOptionsWithApi<InputDisplay, OutputDisplay> | CategoryConstructorOptionsWithoutApi<InputDisplay, OutputDisplay>;
+export class DepictCategory<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never = InputDisplay extends ModernDisplay ? ModernDisplayWithPageUrl<InputDisplay> : never> {
+  #private;
+  get localization(): category_i18n;
+  set localization(locale_obj: category_i18n);
+  get category_id(): string;
+  set category_id(id: string);
+  get merchant(): string;
+  set merchant(merchant: string);
+  get market(): string;
+  set market(market: string);
+  get listing_type(): ListingType | undefined;
+  set listing_type(listing_type: ListingType | undefined);
+  get on_navigation(): OnNavigation;
+  set on_navigation(new_function: OnNavigation);
+  constructor({
+    api,
+    on_navigation,
+    page_url_creator,
+    unique_instance_key_for_state,
+    query_id_state_key,
+    ...props_on_class
+  }: DepictCategoryConstructorOptions<InputDisplay, OutputDisplay>);
+}
+export function CategoryPage<OriginalDisplay extends Display, OutputDisplay extends ModernDisplay | never>(props: {
+  depict_category: DepictCategory<OriginalDisplay, OutputDisplay>;
+  grid_spacing: SDKGridSpacing;
+  cols_at_size: SDKColsAtSize;
+  product_card_template: ProductCardTemplate<[OutputDisplay] extends [never] ? OriginalDisplay : ModernDisplayWithPageUrl<OutputDisplay>>;
+  show_quicklinks?: boolean;
+  show_breadcrumbs?: boolean;
+  category_title: typeof CategoryTitle | typeof embedded_num_products;
+}): import("@depict-ai/utilishared").Node_Array;
+export function BreadCrumbs<T extends Display>({
+  depict_category
+}: {
+  depict_category: DepictCategory<T>;
+}): HTMLElement;
+export function QuickLinks<T extends Display>({
+  depict_category
+}: {
+  depict_category: DepictCategory<T>;
+}): HTMLElement;
+/**
+ * Gets available categories/collections (query_ids for the product-listing endpoint) for a merchant
+ * @param tenant
+ * @param market
+ * @param type - optional, currently only setting this to "collection" will return collections instead of categories
+ */
+export function get_categories(tenant: string, market: string, type?: string): Promise<string[]>;
+type ImagePlaceholderBaseOptions = {
+  style?: JSX.CSSProperties;
+  class?: string;
+};
+type ImagePlaceholderBlockOptions = {
+  width: string;
+  height: string;
+};
+type ImagePlaceholderImageOptions = {
+  aspectRatio: number;
+};
+/**
+ * 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;
+/**
+ * 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;
+};
+type GeneralConstructorOptions<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = {
+  search_query_url_param_name?: string;
+  market: string;
+  merchant: string;
+  localization: search_i18n;
+  on_navigation?: OnNavigation;
+  url_transformer?: (url_object: URL) => unknown;
+  enable_category_suggestions?: boolean;
+  unique_instance_key_for_state?: string;
+  disable_scrolling_during_modal?: boolean;
+  bottom_distance_under_modal?: Accessor<number | undefined>;
+  render_instant_card?: InstantCard<OutputDisplay extends ModernDisplay ? OutputDisplay : InputDisplay>;
+};
+type ConstructorOptionsWithApi<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = GeneralConstructorOptions<InputDisplay, OutputDisplay> & {
+  api: DepictAPI<InputDisplay, OutputDisplay>;
+} & {
+  page_url_creator?: never;
+};
+type ConstructorOptionsWithoutAPI<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = GeneralConstructorOptions<InputDisplay, OutputDisplay> & {
+  api?: never;
+} & SomethingTakingAPageURLCreator<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>;
+  closing_animation_?: () => Promise<any>;
+  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;
+}, on_dispose?: VoidFunction];
+export const get_search_query_updating_blocked_signal: (depict_search: DepictSearch<any>) => Signal<boolean> | undefined;
+export class DepictSearch<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never = InputDisplay extends ModernDisplay ? ModernDisplayWithPageUrl<InputDisplay> : never> {
+  #private;
+  constructor({
+    unique_instance_key_for_state,
+    search_query_url_param_name: search_query_url_param_name_,
+    url_transformer,
+    on_navigation,
+    enable_category_suggestions,
+    page_url_creator,
+    disable_scrolling_during_modal,
+    api,
+    bottom_distance_under_modal,
+    render_instant_card,
+    ...props_on_class
+  }: ConstructorOptions<InputDisplay, OutputDisplay>);
+  get on_navigation(): OnNavigation;
+  set on_navigation(new_function: OnNavigation);
+  get localization(): search_i18n;
+  set localization(locale_obj: search_i18n);
+  get modal_open(): OpenModalArguments | boolean;
+  set modal_open(new_state: OpenModalArguments | boolean);
+  get merchant(): string;
+  set merchant(tenant: string);
+  get market(): string;
+  set market(market: string);
+  fetchSearchResults(query: string, filters?: SearchFilter[], maxResults?: number): Promise<([OutputDisplay] extends [never] ? InputDisplay : ModernDisplayWithPageUrl<OutputDisplay>)[]>;
+}
+export function SearchPage<OriginalDisplay extends Display, TransformedDisplay extends never | ModernDisplay>(props: {
+  depict_search: DepictSearch<OriginalDisplay, TransformedDisplay>;
+  include_input_field?: boolean | {
+    on_open_?: VoidFunction;
+    on_close_?: VoidFunction;
+  };
+  grid_spacing: SDKGridSpacing;
+  cols_at_size: SDKColsAtSize;
+  product_card_template: ProductCardTemplate<[TransformedDisplay] extends [never] ? OriginalDisplay : ModernDisplayWithPageUrl<TransformedDisplay>>;
+  extra_depict_options?: {
+    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): import("@depict-ai/utilishared").Node_Array;
+export type BaseProviderConfig<InputDisplay extends Display, PossibleTransformedDisplay extends ModernDisplay | never> = {
+  /**
+   * The merchant to use for the search.
+   * @example "YOUR_MERCHANT", "stronger"
+   */
+  merchant: string;
+  /**
+   * The market to use for the search.
+   * @example "YOUR_MARKET", "no", "en-de"
+   */
+  market: string;
+  /**
+   * Optional unique identifier of a logged in user. Should be persistent across devices and sessions.
+   */
+  userId?: string;
+  /**
+   * Optional unique identifer of the current session. Only necessary when performing server side requests to Depict.
+   */
+  sessionId?: string;
+  /**
+   * Custom metadata to be sent with each request to the Depict API. Only necessary if specifically instructed by Depict.
+   */
+  metaData?: Record<string, string>;
+  /**
+   * You can't have more than one instance of the same provider on the same page, unless you specify a unique instance key for each one.
+   * This is because there's state in the URL and history.state and the state of the different instances would collide.
+   * By setting this property, you can specify a unique key for each instance, so that the state of each instance is kept separate.
+   * We recommend to just use an incrementing number for this, e.g. "1", "2", "3", ...
+   */
+  uniqueInstanceKeyForState?: string;
+} & (InputDisplay extends ModernDisplay ? "page_url" extends keyof InputDisplay["variant_displays"][number] ? {
+  pageURLCreator?: PageURLCreator<InputDisplay, PossibleTransformedDisplay>;
+} : {
+  pageURLCreator: PageURLCreator<InputDisplay, PossibleTransformedDisplay>;
+} : {
+  pageURLCreator?: never;
+});
+export type BaseSearchProviderConfig = {
+  /**
+   * The path to the search page.
+   * @example "/search", "/sok"
+   */
+  searchPagePath: string;
+  /**
+   * The name of the url parameter that will be used for the search query.
+   * @example "q", "search_query", "query"
+   * @default "query"
+   */
+  urlParamName?: string;
+  /**
+   * Whether to enable category suggestions in the search modal and search page.
+   * @default false
+   */
+  enableCategorySuggestions?: boolean;
+};
+export interface BaseProductListingConfig {
+  /**
+   * How many columns to show at each media size.
+   * @default
+   * [[2, 901], [3, 1024], [4]]
+   * @example
+   * [[2, 901], [3, 1024], [4]]
+   * means 2 columns at sizes up to 901px, 3 columns at sizes up to 1024px and after that 4 columns at any viewport size.
+   */
+  columnsAtSize?: SDKColsAtSize;
+  /**
+   * The spacing between products.
+   * @default "2%"
+   * @example
+   * "2%", "10px", "1rem", {horizontal: "1%", vertical: "5px"}
+   */
+  gridSpacing?: SDKGridSpacing;
+}
+export interface BaseSearchPageConfig extends BaseProductListingConfig {
+  /**
+   * Whether to show the search input field in the search page.
+   * @default true
+   */
+  includeInputField?: boolean;
+}
+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;
+}
+type CenteredLocation = {
+  location?: "centered";
+};
+type AlignedLocation = {
+  location: "aligned";
+  element: HTMLElement;
+};
+/**
+ * How the modal should be opened.
+ */
+type ModalLocation = AlignedLocation | CenteredLocation;
+type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends ModernDisplay | never> = ModalLocation & {
+  search: DepictSearch<OriginalDisplay, OutputDisplay>;
+  /**
+   * If true, the search field in the modal opened will be empty and de-coupled from the other SearchFields.
+   */
+  makesNewSearch?: boolean;
+};
+/**
+ * Open the modal with support for alignment.
+ * @returns {void}
+ */
+export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
+export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
+export interface PageReplacer {
+  readonly render_: () => Node_Array;
+  readonly is_page_: (url: URL) => boolean;
+  readonly title_?: string;
+  readonly selector_: string;
+  readonly append_instead_of_replace_?: boolean;
+}
+/**
+ * PageReplacer is a class that can be used to layer an SPA (single page application) on top of a non-SPA, for certain pages.
+ * An example use case is that we want to make it absolutely instant to go to a search page or to go from one search query to the next (so basically one can navigate to pages without reloading the page).
+ * PageReplacer works by, when something has changed the URL (using history.pushState) to the page where it should take effect, replacing a specified element with another element.
+ * The element that is replaced is specified by a CSS selector and usually represents the element containing "main content" of the page. The "replacement" works by setting `display: none` on the original page and then adding the "new page"-element after it in the DOM:
+ * @param render_ A function that returns the elements which replace the "page" when is_page_ returns true.
+ * @param title_ The title that document.title should be changed to when is_page_ returns true (the replacement page is open).
+ * @param is_page_ A function that returns true if the provided URL is the page where the replacement should take effect.
+ * @param selector_ A CSS selector that selects the element that should be replaced.
+ * @param append_instead_of_replace_ If true, the replacement element will be appended to the element that is found by selector_ instead of replacing it. This is useful if one doesn't actually want it to replace the element because one has other logic.
+ */
+export class PageReplacer extends EventTarget {
+  #private;
+  /**
+   * Returns if the "replacement page" is currently open
+   */
+  get open_(): boolean;
+  /**
+   * Stops listening to URL changes and closes the page (if it is currently open)
+   */
+  destroy_(): void;
+  constructor({
+    is_spa_,
+    ...options
+  }: Omit<PageReplacer, "destroy_" | "addEventListener" | "removeEventListener" | "dispatchEvent" | "open_"> & {
+    is_spa_?: boolean;
+  });
+}
+/**
+ * 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;
+export const defaultColsAtSize: SDKColsAtSize;
+export const defaultGridSpacing = "2%";
+export const defaultCategoryTitlePlugin: ({
+  category_title_,
+  product_count_
+}: {
+  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";