@depict-ai/ui 1.0.17 → 1.1.0

package/dist/index.d.ts

@@ -7,10 +7,11 @@ 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.17";
+export const version = "1.1.0";
 export type OnNavigation = ((options: {
     is_replace: boolean;
     new_url: URL;
+    scroll: boolean;
 }) => void) | "hard_navigation";
 export type ExclusiveId = {
     categoryId: string;
@@ -251,6 +252,112 @@ export type SDKColsAtSize = [number, number?][];
  * @returns
  */
 export const convert_sdk_cols_at_size_to_layout: (cols_at_size: SDKColsAtSize) => ColsAtSize;
+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>;
+};
+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;
+}
+/**
+ * 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;
+}
+/**
+ * Will be sent to backend to indicate whether the query_id_ is for a collection or category.
+ * Backend defaults to category if not specified.
+ */
+type ListingType = "collection" | "category";
 type DepictCategoryConstructorOptions = {
     market: string;
     merchant: string;
@@ -268,6 +375,8 @@ export class DepictCategory {
     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, ...props_on_class }: DepictCategoryConstructorOptions);
@@ -352,7 +461,7 @@ export class DepictSearch<T extends Display> {
     set market(market: string);
     fetchSearchResults(query: string, filters?: SearchFilter[], maxResults?: number): Promise<T[]>;
 }
-export function SearchPage<T extends Display>({ depict_search, include_input_field, grid_spacing, cols_at_size, product_card_template, extra_depict_options, }: {
+export function SearchPage<T extends Display>(props: {
     depict_search: DepictSearch<T>;
     include_input_field?: boolean | {
         on_open_?: VoidFunction;
@@ -372,107 +481,6 @@ interface SearchFieldParams {
     aligner_ref?: HTMLElement | null;
 }
 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>;
-};
-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;
-}
-/**
- * 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";
 };

package/dist/main.js

@@ -37,7 +37,7 @@ $parcel$export(module.exports, "defaultGridSpacing", () => $a3280f0aad997933$exp
 $parcel$export(module.exports, "defaultColsAtSize", () => $a3280f0aad997933$export$c3834fa86c616831);
 $parcel$export(module.exports, "defaultCategoryTitlePlugin", () => $a3280f0aad997933$export$7bf543b9d9be2c22);
 $parcel$export(module.exports, "version", () => $b757f75811f3261f$export$83d89fbfd8236492);
-/*! Depict.ai search and product listing SDK */ const $b757f75811f3261f$export$83d89fbfd8236492 = "1.0.17";
+/*! Depict.ai search and product listing SDK */ const $b757f75811f3261f$export$83d89fbfd8236492 = "1.1.0";
 
 
 
@@ -179,10 +179,23 @@ class $e1d6c0f3d89d531c$export$e015ed2f2950f2e3 {
         let resolve_in_progress;
         cache_obj.in_progress_[body] = new Promise((r)=>resolve_in_progress = r);
         try {
-            const search_results = await (0, $iBTHO$depictaiutilishared.fetch_retry)((0, $iBTHO$depictaiutilishared.add_version_query_params)(endpoint1), {
+            let search_results = await (0, $iBTHO$depictaiutilishared.fetch_retry)((0, $iBTHO$depictaiutilishared.add_version_query_params)(endpoint1), {
                 method: "POST",
                 body: body
             });
+            if ("query_id" in request && request.type === "collection") // FIXME: Remove. Backwards compatibility layer
+            // This will retry the request without the collection type if the first request fails
+            {
+                if (!search_results || search_results?.status === 404) {
+                    (0, $iBTHO$depictaiutilishared.dlog)("Fallback request for collections due to failure");
+                    const fallback_body = JSON.parse(body);
+                    delete fallback_body.type;
+                    search_results = await (0, $iBTHO$depictaiutilishared.fetch_retry)((0, $iBTHO$depictaiutilishared.add_version_query_params)(endpoint1), {
+                        method: "POST",
+                        body: JSON.stringify(fallback_body)
+                    });
+                }
+            }
             if (!search_results || search_results.status !== 200) {
                 const retval = fallback_response(input_req);
                 resolve_in_progress(retval);
@@ -5006,7 +5019,7 @@ function $cafad5eca9f09cb5$export$d4fc5c0e68a52116(el, query_id_, i18n_) {
 
 
 const $840d88a04b2d22a7$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$iBTHO$solidjsweb.template)(`<div class="product-count"> </div>`, 2), $840d88a04b2d22a7$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$iBTHO$solidjsweb.template)(`<div></div>`, 2), $840d88a04b2d22a7$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$iBTHO$solidjsweb.template)(`<div class="filter-results-for-one-row"></div>`, 2), $840d88a04b2d22a7$var$_tmpl$4 = /*@__PURE__*/ (0, /*@__PURE__*/$iBTHO$solidjsweb.template)(`<div class="depict plp category"><div class="listing-page"></div></div>`, 4);
-function $840d88a04b2d22a7$export$f7d2f673fc2f091d({ depict_api_: depict_api_ , query_id_: query_id_ , current_sorting_: current_sorting_ , min_products_to_fetch_: min_products_to_fetch_ , category_filters_open_: category_filters_open_ , category_sorting_open_: category_sorting_open_ , expanded_filters_: expanded_filters_ , selected_filters_: selected_filters_ , get_quicklinks_accessor_: get_quicklinks_accessor_ , i18n_: incoming_i18n , get_breadcrumb_accessor_: get_breadcrumb_accessor_ , slider_arrow_button_: slider_arrow_button_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , local_filter_cache_: local_filter_cache_ , tenant_: tenant_ , market_: market_ , router_: router_ , show_quicklinks_: show_quicklinks_ , category_title_: category_title_ , show_breadcrumbs_: show_breadcrumbs_ , layout_options_: layout_options_ , scroll_restoration_data_: scroll_restoration_data_ , product_card_template_: product_card_template_ , sideways_filter_clearing_flag_: sideways_filter_clearing_flag_  }) {
+function $840d88a04b2d22a7$export$f7d2f673fc2f091d({ depict_api_: depict_api_ , query_id_: query_id_ , listing_type_: listing_type_ , current_sorting_: current_sorting_ , min_products_to_fetch_: min_products_to_fetch_ , category_filters_open_: category_filters_open_ , category_sorting_open_: category_sorting_open_ , expanded_filters_: expanded_filters_ , selected_filters_: selected_filters_ , get_quicklinks_accessor_: get_quicklinks_accessor_ , i18n_: incoming_i18n , get_breadcrumb_accessor_: get_breadcrumb_accessor_ , slider_arrow_button_: slider_arrow_button_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , local_filter_cache_: local_filter_cache_ , tenant_: tenant_ , market_: market_ , router_: router_ , show_quicklinks_: show_quicklinks_ , category_title_: category_title_ , show_breadcrumbs_: show_breadcrumbs_ , layout_options_: layout_options_ , scroll_restoration_data_: scroll_restoration_data_ , product_card_template_: product_card_template_ , sideways_filter_clearing_flag_: sideways_filter_clearing_flag_  }) {
     let results_for;
     let only_show_filters_opener_;
     let middle_elements_;
@@ -5031,6 +5044,7 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({ depict_api_: depict_api_ ,
             tenant: tenant_(),
             market: market_(),
             query_id: query_id_(),
+            type: listing_type_(),
             ...f.length ? {
                 filters: f
             } : {},
@@ -5532,7 +5546,8 @@ function $c79fd10a3ab7d6e0$export$477caf01aecaeb2a(options) {
         router_.navigate_.go_to_({
             is_replace_: true,
             new_url_: url_object.href,
-            force_spa_navigation_: true
+            force_spa_navigation_: true,
+            scroll: false
         });
     }, {
         defer: true
@@ -5592,7 +5607,7 @@ class $e96dd13889871fc0$export$7e1297a3a19f10d8 {
      * @param force_spa_navigation_ if you want to force SPA navigation even if on_navigation_ is set to "hard_navigation". You should only set this to true for inter-SDK-page navigations
      * @param is_replace_ if you want to replace the current URL in history instead of pushing a new one
      * @param category_query_id_ If you are navigating to a category and know the query_id of, please provide it. This is for making a better devEx in js-ui
-     */ go_to_: (0, $iBTHO$depictaiutilishared.catchify)(async ({ new_url_: raw_new_url , event_: event_ , force_spa_navigation_: force_spa_navigation_ , is_replace_: is_replace_ , category_query_id_: category_query_id_  })=>{
+     */ go_to_: (0, $iBTHO$depictaiutilishared.catchify)(async ({ new_url_: raw_new_url , event_: event_ , force_spa_navigation_: force_spa_navigation_ , is_replace_: is_replace_ , category_query_id_: category_query_id_ , scroll: scroll = true  })=>{
             const new_url_ = raw_new_url instanceof URL ? raw_new_url : new URL(raw_new_url, location.origin);
             const wants_hard_navigation = this.on_navigation_ === "hard_navigation";
             if (this.#dont_attempt_navigation(event_)) return;
@@ -5614,7 +5629,8 @@ class $e96dd13889871fc0$export$7e1297a3a19f10d8 {
                 history[is_replace_ ? "replaceState" : "pushState"](new_state, "", new_url_);
             } else this.#throwing_on_navigation.call(this, {
                 is_replace: is_replace_,
-                new_url: new_url_ instanceof URL ? new_url_ : new URL(new_url_, location.origin)
+                new_url: new_url_ instanceof URL ? new_url_ : new URL(new_url_, location.origin),
+                scroll: scroll
             });
             await promise;
         })
@@ -5640,6 +5656,7 @@ class $48567ac5b39bac56$export$f34314aa9505732e {
     #merchant_signal = (0, $iBTHO$solidjs.createSignal)();
     #market_signal = (0, $iBTHO$solidjs.createSignal)();
     #query_id_signal = (0, $iBTHO$solidjs.createSignal)("");
+    #listing_type_signal = (0, $iBTHO$solidjs.createSignal)();
     static #has_been_constructed = false;
     get localization() {
         // allow reactive access
@@ -5666,6 +5683,12 @@ class $48567ac5b39bac56$export$f34314aa9505732e {
     set market(market) {
         this.#market_signal[1](market);
     }
+    get listing_type() {
+        return this.#listing_type_signal[0]();
+    }
+    set listing_type(listing_type) {
+        this.#listing_type_signal[1](listing_type);
+    }
     get on_navigation() {
         // The only non-reactive public property on the class (I don't see it making sense to have it reactive)
         return this.#router.on_navigation_;
@@ -5731,6 +5754,7 @@ function $48567ac5b39bac56$export$e2bf8ce7779e827e({ depict_category: depict_cat
             min_products_to_fetch_: $48567ac5b39bac56$var$min_products_to_fetch_,
             local_filter_cache_: local_filter_cache_,
             query_id_: ()=>depict_category.category_id,
+            listing_type_: ()=>depict_category.listing_type,
             i18n_: i18n_,
             show_quicklinks_: show_quicklinks,
             category_title_: category_title,
@@ -7630,9 +7654,28 @@ function $65a0c4b1c2eb5d0b$export$9dd50d35b9d94fdf({ get_search_query_: get_sear
 
 
 
+
+
+function $2005eec80e40088f$export$41b4894022a3580f({ style_props_: style_props_ = (0, $iBTHO$solidjs.createSignal)({})  } = {}) {
+    const [, set_style_props] = style_props_;
+    const supports_hover = (0, $b54e6192d0caa293$export$d9f36cf74e24d595)("(hover: hover) and (pointer: fine)");
+    const desktop_short = (0, $b54e6192d0caa293$export$d9f36cf74e24d595)("(max-height: 790px)");
+    const mobile_short = (0, $b54e6192d0caa293$export$d9f36cf74e24d595)("(max-height: 1000px)");
+    const transform_y = (0, $iBTHO$solidjs.createMemo)(()=>supports_hover() ? !desktop_short() : !mobile_short());
+    set_style_props({
+        position: "fixed",
+        top: "50%"
+    });
+    (0, $iBTHO$solidjs.createComputed)(()=>set_style_props((old_value)=>({
+                ...old_value,
+                transform: transform_y() ? "translateY(-50%)" : "unset"
+            })));
+    return style_props_;
+}
+
+
 const $f1d7cb69f839a526$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$iBTHO$solidjsweb.template)(`<div class="filter-results-for-one-row"></div>`, 2), $f1d7cb69f839a526$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$iBTHO$solidjsweb.template)(`<div class="depict plp search"><div class="listing-page"></div></div>`, 4);
-function $f1d7cb69f839a526$export$a54ec244c8863715(opts) {
-    const { depict_api_: depict_api_ , search_field_value_: search_field_value_ , get_search_query_: get_search_query_ , open_modal_: open_modal_ , submit_query_: submit_query_ , current_sorting_: current_sorting_ , min_products_to_fetch_: min_products_to_fetch_ , search_filters_open_: search_filters_open_ , search_sorting_open_: search_sorting_open_ , expanded_filters_: expanded_filters_ , input_modal_open_: input_modal_open_ , selected_filters_: selected_filters_ , i18n_: i18n_ , slider_arrow_button_: slider_arrow_button_ , make_category_suggestion_card_: make_category_suggestion_card_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , clear_filters_on_next_submit_: clear_filters_on_next_submit_ , local_filter_cache_: local_filter_cache_ , include_input_field_: include_input_field_ , tenant_: tenant_ , market_: market_ , showing_recommendation_rows_: showing_recommendation_rows_ , search_recs_view_more_: search_recs_view_more_ , disable_search_recommendations_: disable_search_recommendations_ , layout_options_: layout_options_ , recommendations_layout_options_: recommendations_layout_options_ = layout_options_ , scroll_restoration_data_: scroll_restoration_data_ , product_card_template_: product_card_template_  } = opts;
+function $f1d7cb69f839a526$export$a54ec244c8863715({ depict_api_: depict_api_ , search_field_value_: search_field_value_ , get_search_query_: get_search_query_ , open_modal_: open_modal_ , submit_query_: submit_query_ , current_sorting_: current_sorting_ , min_products_to_fetch_: min_products_to_fetch_ , search_filters_open_: search_filters_open_ , search_sorting_open_: search_sorting_open_ , expanded_filters_: expanded_filters_ , input_modal_open_: input_modal_open_ , selected_filters_: selected_filters_ , i18n_: i18n_ , slider_arrow_button_: slider_arrow_button_ , make_category_suggestion_card_: make_category_suggestion_card_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , clear_filters_on_next_submit_: clear_filters_on_next_submit_ , local_filter_cache_: local_filter_cache_ , include_input_field_: include_input_field_ , tenant_: tenant_ , market_: market_ , showing_recommendation_rows_: showing_recommendation_rows_ , search_recs_view_more_: search_recs_view_more_ , disable_search_recommendations_: disable_search_recommendations_ , layout_options_: layout_options_ , recommendations_layout_options_: recommendations_layout_options_ = layout_options_ , scroll_restoration_data_: scroll_restoration_data_ , product_card_template_: product_card_template_ , modal_body_style_ref_: modal_body_style_ref_  }) {
     const [get_sorting] = current_sorting_;
     const all_products_loaded_ = (0, $iBTHO$solidjs.createSignal)(false);
     const [get_all_products_loaded, set_all_products_loaded] = all_products_loaded_;
@@ -7685,42 +7728,8 @@ function $f1d7cb69f839a526$export$a54ec244c8863715(opts) {
             })));
     const available_filters_ = (0, $iBTHO$solidjs.createMemo)(()=>search_results_()?.filters);
     const modal_body_style = (0, $iBTHO$solidjs.createSignal)({});
-    let search_field;
-    if (include_input_field_) {
-        const SafeSearchField = (0, $iBTHO$depictaiutilishared.catchify)((0, $66b8b9a9613c141d$export$b94867ecbd698f21));
-        let input_element;
-        let div_with_field_class;
-        search_field = SafeSearchField({
-            i18n_: i18n_,
-            search_field_value_: search_field_value_,
-            submit_query_: submit_query_,
-            clear_filters_: clear_filters_on_next_submit_,
-            input_field_ref_: (el)=>input_element = el,
-            field_element_ref_: (el)=>div_with_field_class = el,
-            disabled_: true
-        });
-        if (search_field) {
-            opts?.modal_body_style_ref_?.(modal_body_style);
-            const align_position = (0, $iBTHO$depictaiutilishared.catchify)((0, $fd463ff0edb29915$export$b3ad617e9036868))(modal_body_style, search_field, undefined, true);
-            div_with_field_class.addEventListener("click", (0, $iBTHO$depictaiutilishared.catchify)((e)=>{
-                const target = e.target;
-                const sel = ".submit";
-                if (target?.matches?.(sel) || target?.closest?.(sel)) // the search button is just decor, don't do anything when clicked
-                return;
-                // When selecting text in the SearchField that's in the page we want the same selection to persist. It doesn't by itself, since the SearchModal has an entirely different SearchField. Therefore, we manually copy the selection over.
-                const selected_text_range_ = [
-                    input_element.selectionStart,
-                    input_element.selectionEnd
-                ];
-                align_position?.();
-                open_modal_({
-                    style_props_: modal_body_style,
-                    selected_text_range_: selected_text_range_
-                }, ()=>include_input_field_?.on_close_?.());
-                include_input_field_?.on_open_?.();
-            }));
-        }
-    }
+    const [get_search_field_elements, set_search_field_elements] = (0, $iBTHO$solidjs.createSignal)();
+    const SafeSearchField = (0, $iBTHO$depictaiutilishared.catchify)((0, $66b8b9a9613c141d$export$b94867ecbd698f21));
     const [sort_or_filter_open_, set_sort_or_filter_open_] = (0, $iBTHO$solidjs.createSignal)(false);
     const [desktop_filter_elements_, set_desktop_filter_elements] = (0, $iBTHO$solidjs.createSignal)();
     const formatted_number_of_results_ = (0, $0f400c3f7248d5f1$export$92f2da32c6e7e7ee)({
@@ -7784,11 +7793,60 @@ function $f1d7cb69f839a526$export$a54ec244c8863715(opts) {
         get_search_query_();
         (0, $341a019928b8b91e$export$c7e181728ad525f)(location);
     });
+    (0, $iBTHO$solidjs.createEffect)(()=>{
+        // reactive include_input_field
+        // this uses ~7 variables from outer scope which is why I didn't refactor it into a function
+        add_input_field: {
+            const input_field_accessor_value = include_input_field_?.() ?? true; // default to showing input field
+            if (!input_field_accessor_value) break add_input_field;
+            let input_element;
+            let div_with_field_class;
+            const search_field = SafeSearchField({
+                i18n_: i18n_,
+                search_field_value_: search_field_value_,
+                submit_query_: submit_query_,
+                clear_filters_: clear_filters_on_next_submit_,
+                input_field_ref_: (el)=>input_element = el,
+                field_element_ref_: (el)=>div_with_field_class = el,
+                disabled_: true
+            });
+            if (!search_field) break add_input_field;
+            modal_body_style[1]({});
+            modal_body_style_ref_?.(modal_body_style);
+            const align_position = (0, $iBTHO$depictaiutilishared.catchify)((0, $fd463ff0edb29915$export$b3ad617e9036868))(modal_body_style, search_field, undefined, true);
+            div_with_field_class.addEventListener("click", (0, $iBTHO$depictaiutilishared.catchify)((e)=>{
+                const target = e.target;
+                const sel = ".submit";
+                if (target?.matches?.(sel) || target?.closest?.(sel)) // the search button is just decor, don't do anything when clicked
+                return;
+                // When selecting text in the SearchField that's in the page we want the same selection to persist. It doesn't by itself, since the SearchModal has an entirely different SearchField. Therefore, we manually copy the selection over.
+                const selected_text_range_ = [
+                    input_element.selectionStart,
+                    input_element.selectionEnd
+                ];
+                align_position?.();
+                open_modal_({
+                    style_props_: modal_body_style,
+                    selected_text_range_: selected_text_range_
+                }, ()=>input_field_accessor_value?.on_close_?.());
+                input_field_accessor_value?.on_open_?.();
+            }));
+            set_search_field_elements(search_field);
+            return;
+        }
+        // We bailed out of adding the input field
+        set_search_field_elements();
+        // There *might* still be a modal open, either from depict_search.modal_open = true or clicking the SearchField which existed here. Said modal now doesn't have anything to align to anymore - it will still try to align to the style_props_ which it got through the modal_body_style_ref_ which are now no longer updated.
+        // In that case, we write what's needed to center the modal to the modal_body_style for the lifetime of this effect function call to make sure the modal is centered and the UI doesn't look "botched".
+        (0, $2005eec80e40088f$export$41b4894022a3580f)({
+            style_props_: modal_body_style
+        });
+    });
     return [
         document.createComment("Search page based on Depict SDK"),
         (()=>{
             const _el$2 = $f1d7cb69f839a526$var$_tmpl$2.cloneNode(true), _el$3 = _el$2.firstChild;
-            (0, $iBTHO$solidjsweb.insert)(_el$3, search_field, null);
+            (0, $iBTHO$solidjsweb.insert)(_el$3, get_search_field_elements, null);
             (0, $iBTHO$solidjsweb.insert)(_el$3, make_category_suggestion_card_ ? (0, $iBTHO$solidjsweb.createComponent)((0, $edafe91daf3091d7$export$b69d0d92862de18b), {
                 severity_: "error",
                 message_: "Category suggestions failed",
@@ -7916,7 +7974,6 @@ function $f1d7cb69f839a526$export$a54ec244c8863715(opts) {
 
 
 
-
 function $d8e94ea381ab57fa$export$828dcdd425fd3231(aligner) {
     const style_element = document.createElement("style");
     document.head.append(style_element);
@@ -7941,6 +7998,7 @@ function $d8e94ea381ab57fa$export$828dcdd425fd3231(aligner) {
 
 
 
+
 const $2c61e4cd8229c49a$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$iBTHO$solidjsweb.template)(`<div class="depict plp search"></div>`, 2);
 /**
  * Type for the private properties that are shared between the different exported search SDK wrapper functions. SDK users are not allowed to change/access these, they're an internal implementation detail.
@@ -8083,18 +8141,7 @@ class $2c61e4cd8229c49a$export$ac6237957a15b3f0 {
                         return;
                     }
                     // Open centered modal
-                    const supports_hover = (0, $b54e6192d0caa293$export$d9f36cf74e24d595)("(hover: hover) and (pointer: fine)");
-                    const desktop_short = (0, $b54e6192d0caa293$export$d9f36cf74e24d595)("(max-height: 790px)");
-                    const mobile_short = (0, $b54e6192d0caa293$export$d9f36cf74e24d595)("(max-height: 1000px)");
-                    const transform_y = (0, $iBTHO$solidjs.createMemo)(()=>supports_hover() ? !desktop_short() : !mobile_short());
-                    const style_props_ = (0, $iBTHO$solidjs.createSignal)({
-                        position: "fixed",
-                        top: "50%"
-                    });
-                    (0, $iBTHO$solidjs.createComputed)(()=>style_props_[1]((old_value)=>({
-                                ...old_value,
-                                transform: transform_y() ? "translateY(-50%)" : "unset"
-                            })));
+                    const style_props_ = (0, $2005eec80e40088f$export$41b4894022a3580f)();
                     if (signal_value_is_options) {
                         const [options_arg, ...rest] = open_signal_value;
                         open_modal_({
@@ -8162,7 +8209,8 @@ function $2c61e4cd8229c49a$var$get_shared_properties(depict_search) {
     if (!shared_properties) throw new Error("Can't connect to provided DepictSearch instance");
     return shared_properties;
 }
-function $2c61e4cd8229c49a$export$f2dc7e4e4aa11abb({ depict_search: depict_search , include_input_field: include_input_field , grid_spacing: grid_spacing , cols_at_size: cols_at_size , product_card_template: product_card_template , extra_depict_options: extra_depict_options  }) {
+function $2c61e4cd8229c49a$export$f2dc7e4e4aa11abb(props) {
+    const { depict_search: depict_search , grid_spacing: grid_spacing , cols_at_size: cols_at_size , product_card_template: product_card_template , extra_depict_options: extra_depict_options  } = props;
     const shared_properties = $2c61e4cd8229c49a$var$get_shared_properties(depict_search);
     const grid_spacing_override = typeof grid_spacing === "string" ? {
         grid_spacing: grid_spacing
@@ -8216,7 +8264,7 @@ function $2c61e4cd8229c49a$export$f2dc7e4e4aa11abb({ depict_search: depict_searc
             selected_filters_: shared_properties.selected_filters_,
             showing_recommendation_rows_: state_.search_showing_recommendation_rows,
             scroll_restoration_data_: state_.search_scroll_restoration_data,
-            include_input_field_: include_input_field,
+            include_input_field_: ()=>props.include_input_field,
             layout_options_: {
                 cols_at_size: (0, $4e04be41243c3d80$export$6daf8749b65a1b77)(cols_at_size),
                 ...grid_spacing_override