@depict-ai/ui 1.1.0 → 1.1.2

package/dist/main.js

@@ -32,12 +32,15 @@ $parcel$export(module.exports, "setup_fast_leave", () => $08e7f10b1831645f$expor
 $parcel$export(module.exports, "show_toast", () => $ee498ec5e7dc2bba$export$5196e4c01fa56fcb);
 $parcel$export(module.exports, "SolidFormatPrice", () => $d659702496cb72ea$export$a71e92cfbb498adc);
 $parcel$export(module.exports, "connect_search_field_height_to_aligner_height", () => $d8e94ea381ab57fa$export$828dcdd425fd3231);
+$parcel$export(module.exports, "BasePlaceholder", () => $9fe9883b1d8ecccc$export$acb3eaade4b23afd);
+$parcel$export(module.exports, "TextPlaceholder", () => $061ff5b4c3d36171$export$89c6019e4baa40b1);
+$parcel$export(module.exports, "ImagePlaceholder", () => $3bc4a89b971a3af5$export$3f37af283f8fb843);
 $parcel$export(module.exports, "PageReplacer", () => $0a6acf31d1eae57c$export$3ccaa27d81dd8556);
 $parcel$export(module.exports, "defaultGridSpacing", () => $a3280f0aad997933$export$864d304a0bc46829);
 $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.1.0";
+/*! Depict.ai search and product listing SDK */ const $b757f75811f3261f$export$83d89fbfd8236492 = "1.0.14";
 
 
 
@@ -179,23 +182,10 @@ class $e1d6c0f3d89d531c$export$e015ed2f2950f2e3 {
         let resolve_in_progress;
         cache_obj.in_progress_[body] = new Promise((r)=>resolve_in_progress = r);
         try {
-            let search_results = await (0, $iBTHO$depictaiutilishared.fetch_retry)((0, $iBTHO$depictaiutilishared.add_version_query_params)(endpoint1), {
+            const 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);
@@ -1008,17 +998,22 @@ function $a73063cc642f3e5f$export$43f0fb951fcb0c54({ displays_by_key_: displays_
             ];
         },
         children: (product_id, index)=>{
+            // We're using `untrack` here since we don't want to react in here to displays_by_key changing
+            // As long as our key stays the same we assume that the display hasn't changed, so we don't want to rerender
+            // If the key gets removed, <For> will remove us
             const owner = (0, $iBTHO$solidjs.getOwner)();
             const display_accessor = (0, $iBTHO$solidjs.createMemo)(()=>displays_by_key_().get(product_id));
-            const [product_card_resource] = (0, $iBTHO$solidjs.createResource)(display_accessor, // re-render when the reference to the display object changes
-            // this should only be the case when the merchant or market changes and the new request has completed
-            (display)=>{
+            const [product_card_resource] = (0, $iBTHO$solidjs.createResource)((0, $iBTHO$solidjs.createMemo)(()=>[
+                    merchant_(),
+                    market_()
+                ]), // re-render when merchant or market changes
+            ([merchant, market])=>{
                 // get display in the function that re-runs when merchant or market have changed, since the display may have changed but product_id not
+                const display = (0, $iBTHO$solidjs.untrack)(display_accessor);
                 return product_card_template_(display, {
                     set_on_index_change: (fn)=>(0, $iBTHO$solidjs.runWithOwner)(owner, ()=>(0, $iBTHO$solidjs.createEffect)(()=>fn(index()))),
-                    merchant: (0, $iBTHO$solidjs.untrack)(merchant_),
-                    // this means that the merchant and market provided to the template is wrong while we do another fetch, but I don't see how anyone would need to know the correct market there
-                    market: (0, $iBTHO$solidjs.untrack)(market_)
+                    merchant: merchant,
+                    market: market
                 });
             });
             const node_accessor = (0, $5f7d55c710fd1bc2$export$2f0cbfbb4354bb52)(product_card_resource);
@@ -3195,6 +3190,52 @@ function $8c939a05b87fbbbc$export$ab34afce88557c0e(props) {
 
 
 
+
+
+
+
+
+const $9fe9883b1d8ecccc$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$iBTHO$solidjsweb.template)(`<span></span>`, 2);
+function $9fe9883b1d8ecccc$export$acb3eaade4b23afd(props) {
+    return (()=>{
+        const _el$ = $9fe9883b1d8ecccc$var$_tmpl$.cloneNode(true);
+        (0, $iBTHO$solidjsweb.effect)((_p$)=>{
+            const _v$ = `depict-placeholder ${props.class || ""}`, _v$2 = props.style;
+            _v$ !== _p$._v$ && (0, $iBTHO$solidjsweb.className)(_el$, _p$._v$ = _v$);
+            _p$._v$2 = (0, $iBTHO$solidjsweb.style)(_el$, _v$2, _p$._v$2);
+            return _p$;
+        }, {
+            _v$: undefined,
+            _v$2: undefined
+        });
+        return _el$;
+    })();
+}
+
+
+
+function $061ff5b4c3d36171$export$89c6019e4baa40b1(props) {
+    const style = (0, $iBTHO$solidjs.createMemo)(()=>{
+        const { style: style , height: height , width: width  } = props;
+        return {
+            ...style || {},
+            height: height ?? "1em",
+            ...width && {
+                width: width
+            }
+        };
+    });
+    return (0, $iBTHO$solidjsweb.createComponent)((0, $9fe9883b1d8ecccc$export$acb3eaade4b23afd), {
+        get style () {
+            return style();
+        },
+        get ["class"] () {
+            return props.class;
+        }
+    });
+}
+
+
 const $aff9a96d30ed3563$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$iBTHO$solidjsweb.template)(`<div class="filter-collapsible"></div>`, 2), $aff9a96d30ed3563$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$iBTHO$solidjsweb.template)(`<button class="clear-group"><span></span></button>`, 4), $aff9a96d30ed3563$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$iBTHO$solidjsweb.template)(`<div class="view-more-clear"></div>`, 2), $aff9a96d30ed3563$var$_tmpl$4 = /*@__PURE__*/ (0, /*@__PURE__*/$iBTHO$solidjsweb.template)(`<div class="filter-collapsible-body"><div class="filter-part"></div></div>`, 4), $aff9a96d30ed3563$var$_tmpl$5 = /*@__PURE__*/ (0, /*@__PURE__*/$iBTHO$solidjsweb.template)(`<details class="filter-collapsible"></details>`, 2), $aff9a96d30ed3563$var$_tmpl$6 = /*@__PURE__*/ (0, /*@__PURE__*/$iBTHO$solidjsweb.template)(`<summary class="filter-group-summary"><div class="summary"><span></span><div class="selected-w-sign"></div></div></summary>`, 8), $aff9a96d30ed3563$var$_tmpl$7 = /*@__PURE__*/ (0, /*@__PURE__*/$iBTHO$solidjsweb.template)(`<div class="ungrouped"></div>`, 2), $aff9a96d30ed3563$var$_tmpl$8 = /*@__PURE__*/ (0, /*@__PURE__*/$iBTHO$solidjsweb.template)(`<button class="clear-all-filters major"></button>`, 2);
 function $aff9a96d30ed3563$export$3f1a388cc0d8fed7(props) {
     // Split like this to make placeholder wrapping more visible & this component is exported and used in MobileModal
@@ -3207,7 +3248,7 @@ function $aff9a96d30ed3563$export$3f1a388cc0d8fed7(props) {
                 length: 5
             }).map(()=>(()=>{
                     const _el$ = $aff9a96d30ed3563$var$_tmpl$.cloneNode(true);
-                    (0, $iBTHO$solidjsweb.insert)(_el$, (0, $iBTHO$solidjsweb.createComponent)((0, $iBTHO$depictaiutilishared.Placeholder), {
+                    (0, $iBTHO$solidjsweb.insert)(_el$, (0, $iBTHO$solidjsweb.createComponent)((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
                         width: "100%",
                         height: "50px"
                     }));
@@ -3437,6 +3478,7 @@ function $aff9a96d30ed3563$var$ActualFilterBody(props) {
 
 
 
+
 const $be89be42ce9ea60f$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$iBTHO$solidjsweb.template)(`<div class="sorting-attributes"></div>`, 2), $be89be42ce9ea60f$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$iBTHO$solidjsweb.template)(`<div class="sorting-direction"></div>`, 2), $be89be42ce9ea60f$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$iBTHO$solidjsweb.template)(`<div><div class="input-row"><input type="radio"><span class="custom-indicator"></span></div></div>`, 7), $be89be42ce9ea60f$var$_tmpl$4 = /*@__PURE__*/ (0, /*@__PURE__*/$iBTHO$solidjsweb.template)(`<div><label class="input-row"><input type="radio"><span class="custom-indicator"></span></label></div>`, 7);
 function $be89be42ce9ea60f$export$1f1775a58da589b5({ available_sortings_: available_sortings_ , current_sorting_: [get_current_sorting, set_current_sorting] , meta_of_currently_selected_sorting_: meta_of_currently_selected_sorting_  }) {
     const title_radio_name = (0, $iBTHO$depictaiutilishared.make_random_classname)();
@@ -3453,7 +3495,7 @@ function $be89be42ce9ea60f$export$1f1775a58da589b5({ available_sortings_: availa
                     }).map(()=>(()=>{
                             const _el$4 = $be89be42ce9ea60f$var$_tmpl$3.cloneNode(true), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
                             _el$6.disabled = true;
-                            (0, $iBTHO$solidjsweb.insert)(_el$5, (0, $iBTHO$solidjsweb.createComponent)((0, $iBTHO$depictaiutilishared.Placeholder), {
+                            (0, $iBTHO$solidjsweb.insert)(_el$5, (0, $iBTHO$solidjsweb.createComponent)((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
                                 height: "1.2em",
                                 width: "100%"
                             }), null);
@@ -4534,6 +4576,7 @@ function $1ab22f2cd39b3061$export$43cd1e747fecd42e(to_url, set_clearing_flag, fr
 }
 
 
+
 const $e53b2e7e632ac4cb$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$iBTHO$solidjsweb.template)(`<nav class="crumbs"></nav>`, 2), $e53b2e7e632ac4cb$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$iBTHO$solidjsweb.template)(`<a class="crumb"></a>`, 2), $e53b2e7e632ac4cb$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$iBTHO$solidjsweb.template)(`<span class="separator"></span>`, 2);
 function $e53b2e7e632ac4cb$export$5646050d516e06bc({ crumb_data_: get_api_crumb_data , router_: router_ , i18n_: i18n_  }) {
     const placeholder_crumb_data = [
@@ -4559,7 +4602,7 @@ function $e53b2e7e632ac4cb$export$5646050d516e06bc({ crumb_data_: get_api_crumb_
                                 return display_accessor();
                             },
                             get fallback () {
-                                return (0, $iBTHO$solidjsweb.createComponent)((0, $iBTHO$depictaiutilishared.Placeholder), {
+                                return (0, $iBTHO$solidjsweb.createComponent)((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
                                     height: "calc(1em + 1px)",
                                     width: "10ch"
                                 });
@@ -4612,6 +4655,7 @@ function $e53b2e7e632ac4cb$export$5646050d516e06bc({ crumb_data_: get_api_crumb_
 
 
 
+
 const $8cceb1d3a967f369$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$iBTHO$solidjsweb.template)(`<nav class="quicklinks"></nav>`, 2), $8cceb1d3a967f369$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$iBTHO$solidjsweb.template)(`<div>QuickLinks failed</div>`, 2), $8cceb1d3a967f369$var$_tmpl$3 = /*@__PURE__*/ (0, /*@__PURE__*/$iBTHO$solidjsweb.template)(`<a class="quicklink"></a>`, 2);
 function $8cceb1d3a967f369$export$466cdc317043f6cb({ quicklinks_data_: quicklinks_data_ , router_: router_ , current_query_id_: current_query_id_ , slider_arrow_button_: slider_arrow_button_ , breadcrumb_data_: breadcrumb_data_ , i18n_: i18n_  }) {
     let scrolling_logic_ran_for_query_id = false;
@@ -4764,7 +4808,7 @@ function $8cceb1d3a967f369$export$466cdc317043f6cb({ quicklinks_data_: quicklink
                                         category_query_id_: display_accessor()?.query_id
                                     });
                                 }), true);
-                                (0, $iBTHO$solidjsweb.insert)(_el$3, ()=>display_accessor()?.title || (0, $iBTHO$solidjsweb.createComponent)((0, $iBTHO$depictaiutilishared.Placeholder), {
+                                (0, $iBTHO$solidjsweb.insert)(_el$3, ()=>display_accessor()?.title || (0, $iBTHO$solidjsweb.createComponent)((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
                                         height: "1em",
                                         width: "10ch"
                                     }));
@@ -5018,8 +5062,9 @@ 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_ , 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_  }) {
+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_  }) {
     let results_for;
     let only_show_filters_opener_;
     let middle_elements_;
@@ -5044,7 +5089,6 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({ depict_api_: depict_api_ ,
             tenant: tenant_(),
             market: market_(),
             query_id: query_id_(),
-            type: listing_type_(),
             ...f.length ? {
                 filters: f
             } : {},
@@ -5095,7 +5139,7 @@ function $840d88a04b2d22a7$export$f7d2f673fc2f091d({ depict_api_: depict_api_ ,
                 get children () {
                     return [
                         " ",
-                        (0, $iBTHO$solidjsweb.createComponent)((0, $iBTHO$depictaiutilishared.Placeholder), {
+                        (0, $iBTHO$solidjsweb.createComponent)((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
                             height: "1em",
                             width: "3ch"
                         })
@@ -5546,8 +5590,7 @@ function $c79fd10a3ab7d6e0$export$477caf01aecaeb2a(options) {
         router_.navigate_.go_to_({
             is_replace_: true,
             new_url_: url_object.href,
-            force_spa_navigation_: true,
-            scroll: false
+            force_spa_navigation_: true
         });
     }, {
         defer: true
@@ -5607,7 +5650,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_ , scroll: scroll = true  })=>{
+     */ 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_  })=>{
             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;
@@ -5629,8 +5672,7 @@ 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),
-                scroll: scroll
+                new_url: new_url_ instanceof URL ? new_url_ : new URL(new_url_, location.origin)
             });
             await promise;
         })
@@ -5656,7 +5698,6 @@ 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
@@ -5683,12 +5724,6 @@ 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_;
@@ -5754,7 +5789,6 @@ 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,
@@ -5823,7 +5857,7 @@ const $0b23bfd073d9a4e8$export$b91cec6bdc6b32a1 = /*@__PURE__*/ (()=>{
     const actual_function = ({ category_title_: category_title_ , product_count_: product_count_  })=>{
         return (()=>{
             const _el$ = $0b23bfd073d9a4e8$var$_tmpl$.cloneNode(true), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
-            (0, $iBTHO$solidjsweb.insert)(_el$2, ()=>category_title_() || (0, $iBTHO$solidjsweb.createComponent)((0, $iBTHO$depictaiutilishared.Placeholder), {
+            (0, $iBTHO$solidjsweb.insert)(_el$2, ()=>category_title_() || (0, $iBTHO$solidjsweb.createComponent)((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
                     height: "1em",
                     width: "10ch"
                 }));
@@ -6001,14 +6035,45 @@ async function $7b4bc889571cc67b$var$download_categories(tenant, market) {
 
 
 
+
+
+function $3bc4a89b971a3af5$export$3f37af283f8fb843(props) {
+    const style = (0, $iBTHO$solidjs.createMemo)(()=>{
+        const { style: style , height: height , width: width , aspectRatio: aspectRatio  } = props;
+        const is_image = aspectRatio != undefined;
+        const size_data = is_image ? {
+            width: "100%",
+            "padding-bottom": 1 / aspectRatio * 100 + "%"
+        } : {
+            width: width,
+            height: height
+        };
+        return {
+            display: "block",
+            ...style || {},
+            ...size_data
+        };
+    });
+    return (0, $iBTHO$solidjsweb.createComponent)((0, $9fe9883b1d8ecccc$export$acb3eaade4b23afd), {
+        get style () {
+            return style();
+        },
+        get ["class"] () {
+            return props.class;
+        }
+    });
+}
+
+
+
 const $6f604560873e4f69$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$iBTHO$solidjsweb.template)(`<div class="instant-card"><div class="img-part"></div><div class="right-part"><div class="title-brand-tagline"><span class="title"></span></div></div></div>`, 10);
 function $6f604560873e4f69$export$ee1733d9a8495996() {
     return (()=>{
         const _el$ = $6f604560873e4f69$var$_tmpl$.cloneNode(true), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild;
-        (0, $iBTHO$solidjsweb.insert)(_el$2, (0, $iBTHO$solidjsweb.createComponent)((0, $iBTHO$depictaiutilishared.ContainedPlaceholderImage), {
-            aspect_ratio: 1
+        (0, $iBTHO$solidjsweb.insert)(_el$2, (0, $iBTHO$solidjsweb.createComponent)((0, $3bc4a89b971a3af5$export$3f37af283f8fb843), {
+            aspectRatio: 1
         }));
-        (0, $iBTHO$solidjsweb.insert)(_el$5, (0, $iBTHO$solidjsweb.createComponent)((0, $iBTHO$depictaiutilishared.Placeholder), {
+        (0, $iBTHO$solidjsweb.insert)(_el$5, (0, $iBTHO$solidjsweb.createComponent)((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
             width: "20ch",
             height: "1em"
         }));
@@ -6476,8 +6541,7 @@ const $6ae613870d3380fc$export$b05c0ae390cf3e06 = (display_or_variant_container,
             sizes: "0px"
         }));
     const is_sale = (0, $iBTHO$solidjs.createMemo)(()=>display().sale_price !== display().original_price);
-    // localized_page_url currently only used by MayaDelorez, but potentially more. Convenience to avoid requireing full frontend URL transformation.
-    const href = (0, $iBTHO$solidjs.createMemo)(()=>display().localized_page_url || display().page_url);
+    const href = (0, $iBTHO$solidjs.createMemo)(()=>display().page_url);
     return (()=>{
         const _el$ = $6ae613870d3380fc$var$_tmpl$2.cloneNode(true), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$7 = _el$4.nextSibling, _el$9 = _el$7.firstChild;
         (0, $iBTHO$solidjsweb.addEventListener)(_el$, "click", (0, $iBTHO$depictaiutilishared.catchify)((event_)=>router_.navigate_.go_to_({
@@ -7592,7 +7656,7 @@ function $04048c1bef16c249$export$c05a196222ba1302({ suggestions_: suggestions_
                         get fallback () {
                             return (()=>{
                                 const _el$2 = $04048c1bef16c249$var$_tmpl$2.cloneNode(true);
-                                (0, $iBTHO$solidjsweb.insert)(_el$2, (0, $iBTHO$solidjsweb.createComponent)((0, $iBTHO$depictaiutilishared.Placeholder), {
+                                (0, $iBTHO$solidjsweb.insert)(_el$2, (0, $iBTHO$solidjsweb.createComponent)((0, $061ff5b4c3d36171$export$89c6019e4baa40b1), {
                                     height: "19px",
                                     width: "133px"
                                 }));
@@ -7654,28 +7718,9 @@ 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({ 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_  }) {
+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;
     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_;
@@ -7728,8 +7773,42 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({ depict_api_: depict_api_ ,
             })));
     const available_filters_ = (0, $iBTHO$solidjs.createMemo)(()=>search_results_()?.filters);
     const modal_body_style = (0, $iBTHO$solidjs.createSignal)({});
-    const [get_search_field_elements, set_search_field_elements] = (0, $iBTHO$solidjs.createSignal)();
-    const SafeSearchField = (0, $iBTHO$depictaiutilishared.catchify)((0, $66b8b9a9613c141d$export$b94867ecbd698f21));
+    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 [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)({
@@ -7793,60 +7872,11 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({ depict_api_: depict_api_ ,
         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, get_search_field_elements, null);
+            (0, $iBTHO$solidjsweb.insert)(_el$3, search_field, 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",
@@ -7974,6 +8004,7 @@ function $f1d7cb69f839a526$export$a54ec244c8863715({ depict_api_: depict_api_ ,
 
 
 
+
 function $d8e94ea381ab57fa$export$828dcdd425fd3231(aligner) {
     const style_element = document.createElement("style");
     document.head.append(style_element);
@@ -7998,7 +8029,6 @@ 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.
@@ -8141,7 +8171,18 @@ class $2c61e4cd8229c49a$export$ac6237957a15b3f0 {
                         return;
                     }
                     // Open centered modal
-                    const style_props_ = (0, $2005eec80e40088f$export$41b4894022a3580f)();
+                    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"
+                            })));
                     if (signal_value_is_options) {
                         const [options_arg, ...rest] = open_signal_value;
                         open_modal_({
@@ -8209,8 +8250,7 @@ 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(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;
+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  }) {
     const shared_properties = $2c61e4cd8229c49a$var$get_shared_properties(depict_search);
     const grid_spacing_override = typeof grid_spacing === "string" ? {
         grid_spacing: grid_spacing
@@ -8264,7 +8304,7 @@ function $2c61e4cd8229c49a$export$f2dc7e4e4aa11abb(props) {
             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_: ()=>props.include_input_field,
+            include_input_field_: include_input_field,
             layout_options_: {
                 cols_at_size: (0, $4e04be41243c3d80$export$6daf8749b65a1b77)(cols_at_size),
                 ...grid_spacing_override
@@ -8469,6 +8509,9 @@ function $08e7f10b1831645f$export$689e204eadb33baf(pr) {
 
 
 
+
+
+
 class $0a6acf31d1eae57c$export$3ccaa27d81dd8556 extends EventTarget {
     #stop_listening;
     #disconnect_observer;