@depict-ai/ui 1.0.5 → 1.0.6

package/ssr/index.d.ts

@@ -7,36 +7,35 @@ import { SearchSuggestionsResponse, CategorySuggestion } from "@depict-ai/types/
 import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
 import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
 import { ProductListingResponse } from "@depict-ai/types/api/ProductListingResponse";
-export const version = "1.0.4";
-export type OnNavigation = ((options: { is_replace: boolean; new_url: URL }) => 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;
-    };
+export const version = "1.0.5";
+export type OnNavigation = ((options: {
+    is_replace: boolean;
+    new_url: URL;
+}) => 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;
+    type: string;
+    merchant: string;
+    market: string;
+    userId?: string;
+    sessionId?: string;
+    headers?: HeadersInit;
 } & ExclusiveId;
 /**
  * Fetches recommendations from Depict's API.
@@ -74,231 +73,176 @@ 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 Display = Display>({
-  merchant,
-  market,
-  headers,
-  ...fetch_recs_options
-}: RecsAPIWrapperOptions): Promise<T[]>;
+export function fetchDepictRecommendations<T extends Display = Display>({ merchant, market, headers, ...fetch_recs_options }: RecsAPIWrapperOptions): Promise<T[]>;
 /**
  * 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";
-  };
+    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";
-  };
+    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;
-  suggestions_: string;
-  search_submit_button_aria_label_: string;
-  search_field_field_aria_label_: string;
-  previous_searches_delete_entry_from_history_: string;
+    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;
+    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;
+    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;
 }
-export type InstantCard<T extends Display> = (
-  display: T,
-  context: {
+export type InstantCard<T extends Display> = (display: T, context: {
     index: number;
     i18n: search_i18n;
     merchant: string;
     market: string;
-  }
-) => JSX.Element;
+}) => JSX.Element;
 interface DepictAPIConstructorOptions {
-  get_metadata?: () => Promise<
-    | {
+    get_metadata?: () => Promise<{
         [k: string]: string;
-      }
-    | undefined
-  >;
-  get_user_id?: () => string | undefined;
-  get_session_id?: () => string | undefined;
+    } | undefined>;
+    get_user_id?: () => string | undefined;
+    get_session_id?: () => string | undefined;
 }
 export class DepictAPI {
-  #private;
-  constructor({ get_metadata, get_user_id, get_session_id }?: DepictAPIConstructorOptions);
-  suggest(input_req: SearchSuggestionsRequest): Promise<
-    SearchSuggestionsResponse & {
-      failed?: true;
-    }
-  >;
-  query(input_req: SearchRequest): Promise<
-    SearchResponse & {
-      failed?: true;
-    }
-  >;
-  list(input_req: ProductListingRequest): Promise<
-    ProductListingResponse & {
-      failed?: true;
-    }
-  >;
-  get_recommended<D extends Display>(
-    input_req: BaseSearchRequest
-  ): Promise<{
-    displays: D[];
-  }>;
+    #private;
+    constructor({ get_metadata, get_user_id, get_session_id }?: DepictAPIConstructorOptions);
+    suggest(input_req: SearchSuggestionsRequest): Promise<SearchSuggestionsResponse & {
+        failed?: true;
+    }>;
+    query(input_req: SearchRequest): Promise<SearchResponse & {
+        failed?: true;
+    }>;
+    list(input_req: ProductListingRequest): Promise<ProductListingResponse & {
+        failed?: true;
+    }>;
+    get_recommended<D extends Display>(input_req: BaseSearchRequest): Promise<{
+        displays: D[];
+    }>;
 }
 /**
  * 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>;
-export type SDKGridSpacing =
-  | string
-  | {
-      horizontal: string;
-      vertical: string;
-    };
+export type SDKGridSpacing = string | {
+    horizontal: string;
+    vertical: string;
+};
 export type WithRequired<T, K extends keyof T> = T & {
-  [P in K]-?: T[P];
+    [P in K]-?: T[P];
 };
 export interface SDKRenderingInfo {
-  set_on_index_change: (fn: (index: number) => void) => void;
-  merchant: string;
-  market: string;
+    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>;
-export function show_toast({
-  children,
-  on_close_,
-  close_after_,
-  ...more_attributes
-}: {
-  children?: JSX.Element;
-  close_after_: number;
-  on_close_?: VoidFunction;
+export type ProductCardTemplate<T extends Display> = (display: T | null, info?: SDKRenderingInfo) => JSX.Element | Promise<JSX.Element>;
+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;
+    close_toast_: VoidFunction;
 };
-declare class SDKError extends Error {}
+declare class SDKError extends Error {
+}
 export class ProductCardError extends SDKError {
-  constructor(templateError: Error);
+    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;
 /**
  * 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;
+export const CategoryTitle: ({ category_title_, product_count_, }: {
+    category_title_: Accessor<string | undefined>;
+    product_count_: JSX.Element;
+}) => HTMLElement;
 /**
  * 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;
-  };
+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;
+    only_show_filters_opener_: Accessor<boolean>;
+    middle_elements_: Accessor<JSX.Element>;
+    on_filters_constructed_: () => void;
 };
 export type SDKColsAtSize = [number, number?][];
 /**
@@ -308,69 +252,42 @@ export type SDKColsAtSize = [number, number?][];
  */
 export const convert_sdk_cols_at_size_to_layout: (cols_at_size: SDKColsAtSize) => ColsAtSize;
 type DepictCategoryConstructorOptions = {
-  market: string;
-  merchant: string;
-  localization: category_i18n;
-  on_navigation?: OnNavigation;
-  api?: DepictAPI;
+    market: string;
+    merchant: string;
+    localization: category_i18n;
+    on_navigation?: OnNavigation;
+    api?: DepictAPI;
 };
 export class DepictCategory {
-  #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 on_navigation(): OnNavigation;
-  set on_navigation(new_function: OnNavigation);
-  constructor({ api, on_navigation, ...props_on_class }: DepictCategoryConstructorOptions);
+    #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 on_navigation(): OnNavigation;
+    set on_navigation(new_function: OnNavigation);
+    constructor({ api, on_navigation, ...props_on_class }: DepictCategoryConstructorOptions);
 }
-export function CategoryPage<T extends Display>({
-  depict_category,
-  grid_spacing,
-  cols_at_size,
-  product_card_template,
-  show_breadcrumbs,
-  show_quicklinks,
-  category_title,
-}: {
-  depict_category: DepictCategory;
-  grid_spacing: SDKGridSpacing;
-  cols_at_size: SDKColsAtSize;
-  product_card_template: ProductCardTemplate<T>;
-  show_quicklinks?: boolean;
-  show_breadcrumbs?: boolean;
-  category_title: typeof CategoryTitle | typeof embedded_num_products;
+export function CategoryPage<T extends Display>({ depict_category, grid_spacing, cols_at_size, product_card_template, show_breadcrumbs, show_quicklinks, category_title, }: {
+    depict_category: DepictCategory;
+    grid_spacing: SDKGridSpacing;
+    cols_at_size: SDKColsAtSize;
+    product_card_template: ProductCardTemplate<T>;
+    show_quicklinks?: boolean;
+    show_breadcrumbs?: boolean;
+    category_title: typeof CategoryTitle | typeof embedded_num_products;
 }): import("@depict-ai/utilishared").Node_Array;
-export function BreadCrumbs({ depict_category }: { depict_category: DepictCategory }): HTMLElement;
-export function QuickLinks({ depict_category }: { depict_category: DepictCategory }): HTMLElement;
+export function BreadCrumbs({ depict_category }: {
+    depict_category: DepictCategory;
+}): HTMLElement;
+export function QuickLinks({ depict_category }: {
+    depict_category: DepictCategory;
+}): HTMLElement;
 export function get_categories(tenant: string, market: 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
@@ -381,211 +298,198 @@ export function DefaultInstantCardPlaceholder(): HTMLDivElement;
  * @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;
+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;
+    [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<CategorySuggestion>,
-  index: number
-) => JSX.Element;
+export type RenderCategorySuggestion = (category_suggestion: Accessor<CategorySuggestion>, 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;
+    cleanup: () => void;
 };
 type ConstructorOptions<T extends Display> = {
-  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;
-  disable_scrolling_during_modal?: boolean;
-  api?: DepictAPI;
-  bottom_distance_under_modal?: Accessor<number | undefined>;
-  render_instant_card?: InstantCard<T>;
+    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;
+    disable_scrolling_during_modal?: boolean;
+    api?: DepictAPI;
+    bottom_distance_under_modal?: Accessor<number | undefined>;
+    render_instant_card?: InstantCard<T>;
 };
 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
+    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 const get_search_query_updating_blocked_signal: (depict_search: DepictSearch<any>) => Signal<boolean> | undefined;
 export class DepictSearch<T extends Display> {
-  #private;
-  constructor({
-    search_query_url_param_name: search_query_url_param_name_,
-    url_transformer,
-    on_navigation,
-    enable_category_suggestions,
-    disable_scrolling_during_modal,
-    api,
-    bottom_distance_under_modal,
-    render_instant_card,
-    ...props_on_class
-  }: ConstructorOptions<T>);
-  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[]): Promise<T[]>;
+    #private;
+    constructor({ search_query_url_param_name: search_query_url_param_name_, url_transformer, on_navigation, enable_category_suggestions, disable_scrolling_during_modal, api, bottom_distance_under_modal, render_instant_card, ...props_on_class }: ConstructorOptions<T>);
+    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[]): Promise<T[]>;
 }
-export function SearchPage<T extends Display>({
-  depict_search,
-  include_input_field,
-  grid_spacing,
-  cols_at_size,
-  product_card_template,
-  extra_depict_options,
-}: {
-  depict_search: DepictSearch<T>;
-  include_input_field?:
-    | boolean
-    | {
+export function SearchPage<T extends Display>({ depict_search, include_input_field, grid_spacing, cols_at_size, product_card_template, extra_depict_options, }: {
+    depict_search: DepictSearch<T>;
+    include_input_field?: boolean | {
         on_open_?: VoidFunction;
         on_close_?: VoidFunction;
-      };
-  grid_spacing: SDKGridSpacing;
-  cols_at_size: SDKColsAtSize;
-  product_card_template: ProductCardTemplate<T>;
-  extra_depict_options?: {
-    recommendations_cols_at_size?: SDKColsAtSize;
-  };
+    };
+    grid_spacing: SDKGridSpacing;
+    cols_at_size: SDKColsAtSize;
+    product_card_template: ProductCardTemplate<T>;
+    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;
+    depict_search: DepictSearch<any>;
+    modal_dispose_handler?: VoidFunction;
+    click_handler?: (this: HTMLDivElement, ev: MouseEvent) => any;
+    aligner_ref?: HTMLElement | null;
 }
-export function SearchField({
-  depict_search,
-  modal_dispose_handler,
-  click_handler,
-  aligner_ref,
-}: SearchFieldParams): import("@depict-ai/utilishared").Node_Array;
+export function SearchField({ depict_search, modal_dispose_handler, click_handler, aligner_ref, }: SearchFieldParams): import("@depict-ai/utilishared").Node_Array;
 export type BaseProviderConfig = {
-  /**
-   * 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>;
+    /**
+     * 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>;
 };
 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;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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;
+}
+/**
+ * Props for the TextPlaceholder component.
+ */
+export interface TextPlaceholderProps {
+    /**
+     * The height of the text, including a unit.
+     * @example "1em"
+     */
+    height: string;
+    /**
+     * The width of the text.
+     * @example "60px", "10em"
+     */
+    width: string;
+}
+/**
+ * Props for the ImagePlaceholder component.
+ */
+export interface ImagePlaceholderProps {
+    /** The aspect ratio of the image that will be displayed. */
+    aspectRatio: number;
 }
 type CenteredLocation = {
-  location?: "centered";
+    location?: "centered";
 };
 type AlignedLocation = {
-  location: "aligned";
-  element: HTMLElement;
+    location: "aligned";
+    element: HTMLElement;
 };
 /**
  * How the modal should be opened.
  */
 type ModalLocation = AlignedLocation | CenteredLocation;
 type OpenModalParams<T extends Display> = ModalLocation & {
-  search: DepictSearch<T>;
-  /**
-   * If true, the search field in the modal opened will be empty and de-coupled from the other SearchFields.
-   */
-  makesNewSearch?: boolean;
+    search: DepictSearch<T>;
+    /**
+     * 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.
@@ -594,11 +498,11 @@ type OpenModalParams<T extends Display> = ModalLocation & {
 export const open_modal_with_alignment: <T extends Display>(openModalParams: OpenModalParams<T>) => 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;
+    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.
@@ -612,21 +516,18 @@ export interface PageReplacer {
  * @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;
-  });
+    #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)