@depict-ai/ui 1.0.9 → 1.0.10

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.0.9";
+/*! Depict.ai search and product listing SDK */ const $b757f75811f3261f$export$83d89fbfd8236492 = "1.0.10";
 
 
 
@@ -821,8 +824,8 @@ function $0caf87eaa19079da$export$f33414a4df0afd3f({ product_card_template_: pro
     });
     return get_elements; // https://github.com/solidjs/solid/releases/tag/v1.7.0
 }
-/**
- * Get one placeholder element. It will be cloned for each placeholder for ultimate performance even when solid-js isn't rendering the placeholders.
+/**
+ * Get one placeholder element. It will be cloned for each placeholder for ultimate performance even when solid-js isn't rendering the placeholders.
  */ function $0caf87eaa19079da$var$Placeholder({ product_card_template_: product_card_template_  }) {
     const get_cloned_placeholders = (element_to_clone = $0caf87eaa19079da$var$cached_placeholder_element)=>Array.isArray(element_to_clone) ? element_to_clone.map((el)=>el instanceof Node ? el.cloneNode(true) : el) : element_to_clone;
     if ($0caf87eaa19079da$var$cached_placeholder_element) return get_cloned_placeholders();
@@ -867,8 +870,8 @@ function $0caf87eaa19079da$export$f33414a4df0afd3f({ product_card_template_: pro
 }
 
 
-/*
- * Usually product templates are somewhat height-elastic depending on the content, i.e. if the title is longer we might up to two extra rows for this. That means that the placeholders almost never will reflect the size of the actual content when we do scroll restoration. This magic number specifies how many extra placeholders we should render everytime to compensate for this, since if the placeholders are in total shorter than the old scroll location the scroll restoration won't work.
+/*
+ * Usually product templates are somewhat height-elastic depending on the content, i.e. if the title is longer we might up to two extra rows for this. That means that the placeholders almost never will reflect the size of the actual content when we do scroll restoration. This magic number specifies how many extra placeholders we should render everytime to compensate for this, since if the placeholders are in total shorter than the old scroll location the scroll restoration won't work.
  */ const $aec24316ed262dc0$export$6c9030e511152266 = 30;
 
 
@@ -960,8 +963,8 @@ function $4117463e2939f5f4$export$63dd0350f8559dda({ displays_by_key_: displays_
 
 
 
-/**
- * Gets product_id (the thing we key the rendering on) from a display
+/**
+ * Gets product_id (the thing we key the rendering on) from a display
  */ function $a5871dacf261adf8$export$548d053aba053d79(display) {
     if ("variant_index" in display) {
         const actual_display = display.variant_displays[display.variant_index];
@@ -1262,9 +1265,9 @@ function $fe76fb463cc60b89$export$3925f87b1545cfc6({ plp_results_: plp_results_
         return _el$;
     })();
 }
-/**
- * Sets styling to styling generated by "Layout" (n_col_styling_with_dist) depending on if filters are open or not
- * This function is special to the actual PLPResults.
+/**
+ * Sets styling to styling generated by "Layout" (n_col_styling_with_dist) depending on if filters are open or not
+ * This function is special to the actual PLPResults.
  */ function $fe76fb463cc60b89$var$results_grid_styling_generator({ layout_options_: layout_options_ , sort_or_filter_open_: sort_or_filter_open_ , set_styling_: set_styling_ , selector_beginning_: selector_beginning_  }) {
     (0, $iBTHO$solidjs.createRenderEffect)(()=>{
         // Add grid styling that changes when filters get opened/closed
@@ -3187,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
@@ -3199,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"
                     }));
@@ -3429,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)();
@@ -3445,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);
@@ -3954,9 +4004,9 @@ function $70482f04605572e2$export$b288c38ae3fddb56({ available_filters_: availab
         last_remote_state = available_filters_();
     });
 }
-/**
- * When a filter is only available locally due to being selected in a previous navigation, we want to make that clear and prevent further "invalid" choices.
- * This sets the counts to 0 (if applicable) and removes non-selected options (if applicable)
+/**
+ * When a filter is only available locally due to being selected in a previous navigation, we want to make that clear and prevent further "invalid" choices.
+ * This sets the counts to 0 (if applicable) and removes non-selected options (if applicable)
  */ function $70482f04605572e2$var$modify_only_local_filter(local_filter_object, selected_filter) {
     const old_meta = local_filter_object.meta;
     const selected_filter_data = selected_filter.data;
@@ -4396,10 +4446,10 @@ const $1ab22f2cd39b3061$var$range_delimiter = "-";
 const $1ab22f2cd39b3061$var$string_item_delimiter = "‚"; // This is not a comma but a comma-like character that browsers will render in the URL bar.
 const $1ab22f2cd39b3061$var$array_item_delimiter = "‣"; // FIXME: decide on a character. Could theoretically be a double string delimiter.
 const $1ab22f2cd39b3061$var$empty_item_replacement = "0️⃣";
-/**
- * Checks if a given array of filter data can be neatly serialized into an URL query parameter, or if it should fall back to JSON+base64.
- * The requirements are either an array of strings, containing no reserved characters, or an array of arrays of strings, containing no reserved characters.
- * No deep or mixed nesting levels are supported.
+/**
+ * Checks if a given array of filter data can be neatly serialized into an URL query parameter, or if it should fall back to JSON+base64.
+ * The requirements are either an array of strings, containing no reserved characters, or an array of arrays of strings, containing no reserved characters.
+ * No deep or mixed nesting levels are supported.
  */ function $1ab22f2cd39b3061$var$array_is_serializable(array, is_root = true) {
     if (array.every((item)=>Array.isArray(item))) {
         if (!is_root) // Deeply nested arrays are not supported, but also don't exist as filters (yet)
@@ -4411,10 +4461,10 @@ const $1ab22f2cd39b3061$var$empty_item_replacement = "0️⃣";
     // Encoding reserved characters is not supported
     return !array.some((item)=>item.includes($1ab22f2cd39b3061$var$array_item_delimiter) || item.includes($1ab22f2cd39b3061$var$string_item_delimiter) || item === $1ab22f2cd39b3061$var$empty_item_replacement);
 }
-/**
- * Human readable string[] or string[][] serialization for URLs.
- * @param array
- * @returns
+/**
+ * Human readable string[] or string[][] serialization for URLs.
+ * @param array
+ * @returns
  */ function $1ab22f2cd39b3061$var$encode_array(array) {
     const is_nested = array.every((item)=>Array.isArray(item));
     if (is_nested) return array.map($1ab22f2cd39b3061$var$encode_array).join($1ab22f2cd39b3061$var$array_item_delimiter) + $1ab22f2cd39b3061$var$array_item_delimiter; // Nested arrays require a suffix to close nesting levels
@@ -4526,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 = [
@@ -4551,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"
                                 });
@@ -4604,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;
@@ -4756,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"
                                     }));
@@ -4976,14 +5028,14 @@ function $cc7c480116d2eba0$var$clear_if_opened_new_tab_with_sideways_url_params_
 
 
 
-const $cafad5eca9f09cb5$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$iBTHO$solidjsweb.template)(`<div class="statement">No category ID specified, this is probably unintentional. Make sure to first create (and insert) the SearchPage once you have told the SDK about a category ID.</div>`, 2), $cafad5eca9f09cb5$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$iBTHO$solidjsweb.template)(`<div class="buttons"><button class="ok major"></button></div>`, 4);
+const $cafad5eca9f09cb5$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$iBTHO$solidjsweb.template)(`<div class="statement">No category ID specified, this is probably unintentional. Make sure to create (and insert) the CategoryPage *after* you have specified a category ID in your Depict Provider.</div>`, 2), $cafad5eca9f09cb5$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$iBTHO$solidjsweb.template)(`<div class="buttons"><button class="ok major"></button></div>`, 4);
 function $cafad5eca9f09cb5$export$d4fc5c0e68a52116(el, query_id_, i18n_) {
     if (!(0, $iBTHO$depictaiutilishared.is_debug)) return; // Just to make sure we don't show this in production
     const owner = (0, $iBTHO$solidjs.getOwner)();
     const disconnect = (0, $iBTHO$depictaiutilishared.observer).onexists(el, ({ element: element  })=>(0, $iBTHO$solidjs.runWithOwner)(owner, ()=>(0, $iBTHO$solidjs.createEffect)(()=>{
                 if (!document.documentElement.contains(element)) return;
                 if (!query_id_()) {
-                    const warning = "No category ID specified, this is probably unintentional. Make sure to first create (and insert) the SearchPage once you have told the SDK about a category ID.";
+                    const warning = "No category ID specified, this is probably unintentional. Make sure to create (and insert) the CategoryPage *after* you have specified a category ID in your Depict Provider.";
                     (0, $iBTHO$depictaiutilishared.dwarn)(warning);
                     const { close_toast_: close_toast_  } = (0, $ee498ec5e7dc2bba$export$5196e4c01fa56fcb)({
                         class: "warning",
@@ -5010,6 +5062,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_  }) {
     let results_for;
@@ -5086,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"
                         })
@@ -5509,8 +5562,8 @@ function $c79fd10a3ab7d6e0$export$477caf01aecaeb2a(options) {
         }
     };
 }
-/**
- * Writes the sorting and filters to the URL query parameters when they change.
+/**
+ * Writes the sorting and filters to the URL query parameters when they change.
  */ function $c79fd10a3ab7d6e0$var$start_href_writer({ get_sorting_: get_sorting_ , get_selected_filters_: get_selected_filters_ , router_: router_ , get_has_sideways_filter_clearing_flag_: get_has_sideways_filter_clearing_flag_  }) {
     (0, $iBTHO$solidjs.createEffect)((0, $iBTHO$solidjs.on)([
         get_sorting_,
@@ -5550,8 +5603,8 @@ function $c79fd10a3ab7d6e0$var$delete_sideways_param_flag(searchParams) {
 
 
 class $e96dd13889871fc0$export$7e1297a3a19f10d8 {
-    /**
-   * Function that will be called when we want to navigate, or a string saying it's not an SPA. You can change this OTG
+    /**
+   * Function that will be called when we want to navigate, or a string saying it's not an SPA. You can change this OTG
    */ #throwing_on_navigation(...args) {
         const { on_navigation_: on_navigation_  } = this;
         if (typeof on_navigation_ !== "function") throw new Error("on_navigation_ is not a function");
@@ -5564,14 +5617,14 @@ class $e96dd13889871fc0$export$7e1297a3a19f10d8 {
             });
         }
     }
-    /**
-   * Checks if this tab shouldn't navigate because user wants to open in new tab
+    /**
+   * Checks if this tab shouldn't navigate because user wants to open in new tab
    */ #dont_attempt_navigation(ev) {
         return ev?.button || ev?.metaKey || ev?.ctrlKey;
     }
-    /**
-   * Vue has async router that needs to be awaited (it navigates after a microtask)
-   * This standardises waiting for all kinds of routers
+    /**
+   * Vue has async router that needs to be awaited (it navigates after a microtask)
+   * This standardises waiting for all kinds of routers
    */ #get_navigation_happened_promise(is_replace) {
         return new Promise((resolve)=>{
             const handler = (what_happened)=>{
@@ -5584,19 +5637,19 @@ class $e96dd13889871fc0$export$7e1297a3a19f10d8 {
         });
     }
     navigate_ = {
-        /**
-     * Call this if you *just* want to replace the state object in history.state
+        /**
+     * Call this if you *just* want to replace the state object in history.state
      */ replace_state_: (new_state)=>{
             // This doesn't break any router, so we just do this directly for now, since many don't expose an interface for changing the state
             history.replaceState(new_state, "");
         },
-        /**
-     * Call this to change the URL
-     * @param new_url_ new URL to go to
-     * @param event_ event if you have this in a click handler, will not do anything on cmd/ctrl or non-left click then
-     * @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
+        /**
+     * Call this to change the URL
+     * @param new_url_ new URL to go to
+     * @param event_ event if you have this in a click handler, will not do anything on cmd/ctrl or non-left click then
+     * @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_  })=>{
             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";
@@ -5804,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"
                 }));
@@ -5982,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"
         }));
@@ -6404,8 +6488,8 @@ async function $f328bd45f8ede33c$export$e16630ecb9644a1c({ on_submit_with_unchan
 
 
 
-/**
- * Expand an object where every value in the top-level is an accessor into a normal object. Used for converting solid_i18n objects into external i18n typed objects.
+/**
+ * Expand an object where every value in the top-level is an accessor into a normal object. Used for converting solid_i18n objects into external i18n typed objects.
  */ const $639c124c22b6cbaa$export$27b710c08412a7ad = (obj)=>{
     return Object.fromEntries(Object.keys(obj).map((key)=>[
             key,
@@ -7572,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"
                                 }));
@@ -7946,8 +8030,8 @@ 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.
+/**
+ * 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.
  */ const $2c61e4cd8229c49a$var$privately_shared_properties = /*@__PURE__*/ new WeakMap();
 const $2c61e4cd8229c49a$var$min_products_to_fetch_ = 20;
 const $2c61e4cd8229c49a$export$bde3eb976dfded9 = (depict_search)=>$2c61e4cd8229c49a$var$privately_shared_properties.get(depict_search)?.search_query_updating_blocked_;
@@ -8148,7 +8232,7 @@ class $2c61e4cd8229c49a$export$ac6237957a15b3f0 {
     set market(market) {
         this.#market_signal[1](market);
     }
-    async fetchSearchResults(query, filters, maxResults = 50) {
+    async fetchSearchResults(query, filters, maxResults = 48) {
         const { depict_api_: depict_api_  } = $2c61e4cd8229c49a$var$privately_shared_properties.get(this);
         const result = await depict_api_.query({
             tenant: this.merchant,
@@ -8344,8 +8428,8 @@ const $9c143d25df1fc2a2$export$d86a33413558014e = (openModalParams)=>{
     }
     const { cleanup: cleanup  } = (0, $d8e94ea381ab57fa$export$828dcdd425fd3231)(openModalParams.element);
     let dispose_aligner;
-    /**
-   * Setting position to fixed is important to make the modal work with align_field.
+    /**
+   * Setting position to fixed is important to make the modal work with align_field.
    */ const style_props_ = (0, $iBTHO$solidjs.createSignal)({
         position: "fixed"
     });
@@ -8425,6 +8509,9 @@ function $08e7f10b1831645f$export$689e204eadb33baf(pr) {
 
 
 
+
+
+
 class $0a6acf31d1eae57c$export$3ccaa27d81dd8556 extends EventTarget {
     #stop_listening;
     #disconnect_observer;
@@ -8441,8 +8528,8 @@ class $0a6acf31d1eae57c$export$3ccaa27d81dd8556 extends EventTarget {
         })();
         return new Set();
     })();
-    /**
-   * Returns if the "replacement page" is currently open
+    /**
+   * Returns if the "replacement page" is currently open
    */ get open_() {
         // make this "readonly" from the outside, the only way to open is by making the url change so that is_page_ returns true
         return this.#is_open;
@@ -8527,26 +8614,26 @@ class $0a6acf31d1eae57c$export$3ccaa27d81dd8556 extends EventTarget {
             if (what_happened !== "popstate") return;
             const cleaned_current_url = $0a6acf31d1eae57c$var$clean_url(location.href);
             if (!$0a6acf31d1eae57c$export$3ccaa27d81dd8556.#visited_urls.has(cleaned_current_url)) {
-                /*
-        What does this check do? Well, there's a bug without it where people end up on a page that they shouldn't see (i.e. a somewhat blank page).
-        The culprit of that bug is: the browser remembers where to make "hard"-navigations (i.e. a full document rebuild with a new `document` and `window` object) when going back and forwards in the history and where to just change the url. What it doesn't always correctly remember (observed in at least chrome and firefox), is *what document to hard-navigate to*. Therefore, we have to jump in and take care of that.
-        The reproduction is this:
-          Spendrups has set up a search page for us under /start/search. We don't want to hard-reload the page though to get there.
-          1. Go to a product page like https://ehandel.spendrups.se/Product/1104201
-          2. Make a search
-          We use PageReplacer to just replace the current page (and the url in the address bar) with the search page. The thing is though, that when going back now the URL just updates but the browser doesn't actually navigate - that's fine, PageReplacer will just restore the old page contents
-          3. Try going back just for fun
-          Everything works as expected
-          4. Go forwards again (just for fun, skip this if you skipped 3)
-          Now the trouble comes when we introduce "hard" navigation.
-          5. Click on a search result. The browser will now "hard" navigate to a new page.
-          6. Click "back"
-          What happens now, is that the browser hard-navigates to /start/search.
-          7. Click "back" again
-          What happens now, is that the browser "soft-navigates" (just changes the URL) to https://ehandel.spendrups.se/Product/1104201
-          PageReplacer unload itself and reveals the original document - it is expected to be the one under https://ehandel.spendrups.se/Product/1104201, but actually it is the one under /start/search - a white page.
-            The fix: is to remember all pages that we have visited since the creation of `window` (we do that by having a static property on PageReplacer since we assume the PageReplacer source code will only exist once on the page and will be loaded at page load, the latter assumption might be wrong, but I hope not). If we get a "popstate" event (meaning back or forwards button, not new page being pushed) to an unknown page we reload.
-             */ (0, $iBTHO$depictaiutilishared.dlog)("PageReplacer: ", cleaned_current_url, " hasn't been visited since document was created, reloading since we won't be able to show this page otherwise");
+                /*
+        What does this check do? Well, there's a bug without it where people end up on a page that they shouldn't see (i.e. a somewhat blank page).
+        The culprit of that bug is: the browser remembers where to make "hard"-navigations (i.e. a full document rebuild with a new `document` and `window` object) when going back and forwards in the history and where to just change the url. What it doesn't always correctly remember (observed in at least chrome and firefox), is *what document to hard-navigate to*. Therefore, we have to jump in and take care of that.
+        The reproduction is this:
+          Spendrups has set up a search page for us under /start/search. We don't want to hard-reload the page though to get there.
+          1. Go to a product page like https://ehandel.spendrups.se/Product/1104201
+          2. Make a search
+          We use PageReplacer to just replace the current page (and the url in the address bar) with the search page. The thing is though, that when going back now the URL just updates but the browser doesn't actually navigate - that's fine, PageReplacer will just restore the old page contents
+          3. Try going back just for fun
+          Everything works as expected
+          4. Go forwards again (just for fun, skip this if you skipped 3)
+          Now the trouble comes when we introduce "hard" navigation.
+          5. Click on a search result. The browser will now "hard" navigate to a new page.
+          6. Click "back"
+          What happens now, is that the browser hard-navigates to /start/search.
+          7. Click "back" again
+          What happens now, is that the browser "soft-navigates" (just changes the URL) to https://ehandel.spendrups.se/Product/1104201
+          PageReplacer unload itself and reveals the original document - it is expected to be the one under https://ehandel.spendrups.se/Product/1104201, but actually it is the one under /start/search - a white page.
+           The fix: is to remember all pages that we have visited since the creation of `window` (we do that by having a static property on PageReplacer since we assume the PageReplacer source code will only exist once on the page and will be loaded at page load, the latter assumption might be wrong, but I hope not). If we get a "popstate" event (meaning back or forwards button, not new page being pushed) to an unknown page we reload.
+            */ (0, $iBTHO$depictaiutilishared.dlog)("PageReplacer: ", cleaned_current_url, " hasn't been visited since document was created, reloading since we won't be able to show this page otherwise");
                 location.reload();
                 $0a6acf31d1eae57c$export$3ccaa27d81dd8556.#reverting_permitted = false; // Disallow any reverting since we can't - it would flash a white page until the reload has finished.
                 this.#unload(); // Call unload to "kill" the solid-js stuff quicker so that it stops updating - the user is expecting the next thing that happens to be a navigation to the actual page the URL says they're on.
@@ -8555,8 +8642,8 @@ class $0a6acf31d1eae57c$export$3ccaa27d81dd8556 extends EventTarget {
         (0, $iBTHO$depictaiutilishared.instant_exec_on_suspect_history_change).add(on_maybe_popstate);
         this.#revert_fns.push(()=>(0, $iBTHO$depictaiutilishared.instant_exec_on_suspect_history_change).delete(on_maybe_popstate)); // Don't run the bugfixer if there isn't a PageReplacer page open since I assume the bug only happens when going back from a PageReplace'd page
     }
-    /**
-   * Stops listening to URL changes and closes the page (if it is currently open)
+    /**
+   * Stops listening to URL changes and closes the page (if it is currently open)
    */ destroy_() {
         this.#unload();
         this.#stop_listening?.();
@@ -8571,8 +8658,8 @@ class $0a6acf31d1eae57c$export$3ccaa27d81dd8556 extends EventTarget {
         if (!is_spa_) (0, $08e7f10b1831645f$export$689e204eadb33baf)(this); // Make so that clicking on links to the previous page work instantly
     }
 }
-/**
- * Remove hash from URL
+/**
+ * Remove hash from URL
  */ function $0a6acf31d1eae57c$var$clean_url(url) {
     // Would want to have this a static private function on PageReplacer, but that's not supported in MobileSafari yet
     // remove hash, all other params *could* trigger a re-request