@depict-ai/ui 1.0.8 → 1.0.10

package/dist/index.d.ts

@@ -7,7 +7,7 @@ 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.8";
+export const version = "1.0.10";
 export type OnNavigation = ((options: {
     is_replace: boolean;
     new_url: URL;
@@ -214,6 +214,27 @@ declare class SDKError extends Error {
 export class ProductCardError extends SDKError {
     constructor(templateError: Error);
 }
+/**
+ * Base placeholder component used by ImagePlaceholder and TextPlaceholder
+ */
+export function BasePlaceholder(props: {
+    style: JSX.CSSProperties;
+    class?: string;
+}): JSX.Element;
+/**
+ * A Placeholder to use instead of some text, while it's loading. This is the inline version, meant to be embedded into sentences (or exist instead of them), etc.
+ * If you want a block version, use `ImagePlaceholder` with `width`and `height` set instead.
+ * @property height height of the placeholder. Set to `1em` by default.
+ * @property width width of the placeholder. For specific number of characters use `ch`, ex: `width="7ch"`
+ * @property class extra classes to add to the placeholder
+ * @property style extra styles to add to the placeholder
+ */
+export function TextPlaceholder(props: {
+    style?: JSX.CSSProperties;
+    height: string;
+    width: string;
+    class?: string;
+}): JSX.Element;
 /**
  * Disables scrolling until the solidjs reactive scoped is disposed (onCleanup)
  * @returns A cleanup function to manually re-enable scrolling.
@@ -222,7 +243,7 @@ export function disable_scrolling(): () => void;
 export const CategoryTitle: ({ category_title_, product_count_, }: {
     category_title_: Accessor<string | undefined>;
     product_count_: JSX.Element;
-}) => HTMLElement;
+}) => JSX.Element;
 /**
  * Embeds number of products between sort and filter buttons on mobile if possible, only supported for category pages right now. Pass it as category_title_ to Category.
  * Note: this will add an invisible element as first element in depict-search-page which will confuse the flex-gap SCSS mixin a bit so you'll get some extra spacing at the beginning of the search page
@@ -288,6 +309,27 @@ export function QuickLinks({ depict_category }: {
     depict_category: DepictCategory;
 }): HTMLElement;
 export function get_categories(tenant: string, market: string): Promise<string[]>;
+type ImagePlaceholderBaseOptions = {
+    style?: JSX.CSSProperties;
+    class?: string;
+};
+type ImagePlaceholderBlockOptions = {
+    width: string;
+    height: string;
+};
+type ImagePlaceholderImageOptions = {
+    aspectRatio: number;
+};
+/**
+ * A placeholder that can be used instead of an image or other block of content while it's loading.
+ * The placeholder has `display:block`, meaning it will create a new "row" in the layout for itself. Can be used either for images with a defined aspect ratio (ContainedImage) or blocks.
+ * @property aspectRatio if aspectRatio is defined the placeholder will be in "image mode" and fill out the available width and then adjust the height according to the aspectRatio
+ * @property width If width and height is set, the defined width and height will be used.
+ * @property height If width and height is set, the defined width and height will be used.
+ * @property class extra classes to add to the placeholder
+ * @property style extra styles to add to the placeholder
+ */
+export function ImagePlaceholder(props: ImagePlaceholderBaseOptions & (ImagePlaceholderBlockOptions | ImagePlaceholderImageOptions)): JSX.Element;
 export function DefaultInstantCardPlaceholder(): HTMLDivElement;
 /**
  * Useful for aligning the search modal to an element, like an existing input field
@@ -350,7 +392,7 @@ export class DepictSearch<T extends Display> {
     set merchant(tenant: string);
     get market(): string;
     set market(market: string);
-    fetchSearchResults(query: string, filters?: SearchFilter[], limit?: number): Promise<T[]>;
+    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, }: {
     depict_search: DepictSearch<T>;
@@ -451,28 +493,6 @@ export interface BaseCategoryPageConfig extends BaseProductListingConfig {
      */
     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";
 };
@@ -538,5 +558,5 @@ export const defaultGridSpacing = "2%";
 export const defaultCategoryTitlePlugin: ({ category_title_, product_count_, }: {
     category_title_: import("solid-js").Accessor<string | undefined>;
     product_count_: import("solid-js").JSX.Element;
-}) => HTMLElement;
+}) => import("solid-js").JSX.Element;
 export type { SearchFilter } from "@depict-ai/types/api/SearchRequest";

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.8";
+/*! Depict.ai search and product listing SDK */ const $b757f75811f3261f$export$83d89fbfd8236492 = "1.0.10";
 
 
 
@@ -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);
@@ -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"
                         })
@@ -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"
         }));
@@ -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"
                                 }));
@@ -8148,14 +8232,14 @@ class $2c61e4cd8229c49a$export$ac6237957a15b3f0 {
     set market(market) {
         this.#market_signal[1](market);
     }
-    async fetchSearchResults(query, filters, limit = 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,
             market: this.market,
             query: query,
             filters: filters,
-            limit: limit
+            limit: maxResults
         });
         if (result.failed) throw new Error("Failed to fetch search results");
         return result.displays;
@@ -8425,6 +8509,9 @@ function $08e7f10b1831645f$export$689e204eadb33baf(pr) {
 
 
 
+
+
+
 class $0a6acf31d1eae57c$export$3ccaa27d81dd8556 extends EventTarget {
     #stop_listening;
     #disconnect_observer;