@depict-ai/ui 1.1.0 → 1.1.2

package/dist/client/module.js

@@ -1,13 +1,63 @@
-import {add_to_version_info as $gco9i$add_to_version_info, fetch_recs as $gco9i$fetch_recs, snakeCasifyObject as $gco9i$snakeCasifyObject, catchify as $gco9i$catchify, instant_exec_on_suspect_history_change as $gco9i$instant_exec_on_suspect_history_change, base_url as $gco9i$base_url, dlog as $gco9i$dlog, get_depict_id as $gco9i$get_depict_id, get_user_id as $gco9i$get_user_id, get_session_id as $gco9i$get_session_id, make_url_with_query_params as $gco9i$make_url_with_query_params, fetch_retry as $gco9i$fetch_retry, add_version_query_params as $gco9i$add_version_query_params, sort_obj as $gco9i$sort_obj, report as $gco9i$report, javascript_media_query as $gco9i$javascript_media_query, standard_price_format as $gco9i$standard_price_format, observer as $gco9i$observer, make_random_classname as $gco9i$make_random_classname, n_col_styling_with_dist as $gco9i$n_col_styling_with_dist, useExpandingContainer as $gco9i$useExpandingContainer, Amazing_Slider as $gco9i$Amazing_Slider, slider_snap_css as $gco9i$slider_snap_css, slider_fading_factory as $gco9i$slider_fading_factory, hsl_to_rgb as $gco9i$hsl_to_rgb, relative_luminance_from_rgb as $gco9i$relative_luminance_from_rgb, base64_encode_unicode as $gco9i$base64_encode_unicode, base64_decode_unicode as $gco9i$base64_decode_unicode, queueMacroTask as $gco9i$queueMacroTask, is_debug as $gco9i$is_debug, dwarn as $gco9i$dwarn, Layout as $gco9i$Layout, async_iterable_ipns as $gco9i$async_iterable_ipns, make_asyncIterable_exiter as $gco9i$make_asyncIterable_exiter, href_change_ipns as $gco9i$href_change_ipns, ContainedImage as $gco9i$ContainedImage, buildThresholdList as $gco9i$buildThresholdList, deparallelize_no_drop as $gco9i$deparallelize_no_drop, insert_surfaces as $gco9i$insert_surfaces} from "@depict-ai/utilishared";
+import {add_to_version_info as $gco9i$add_to_version_info, observer as $gco9i$observer, catchify as $gco9i$catchify, fetch_recs as $gco9i$fetch_recs, snakeCasifyObject as $gco9i$snakeCasifyObject, instant_exec_on_suspect_history_change as $gco9i$instant_exec_on_suspect_history_change, base_url as $gco9i$base_url, dlog as $gco9i$dlog, get_depict_id as $gco9i$get_depict_id, get_user_id as $gco9i$get_user_id, get_session_id as $gco9i$get_session_id, make_url_with_query_params as $gco9i$make_url_with_query_params, fetch_retry as $gco9i$fetch_retry, add_version_query_params as $gco9i$add_version_query_params, sort_obj as $gco9i$sort_obj, report as $gco9i$report, javascript_media_query as $gco9i$javascript_media_query, standard_price_format as $gco9i$standard_price_format, make_random_classname as $gco9i$make_random_classname, n_col_styling_with_dist as $gco9i$n_col_styling_with_dist, useExpandingContainer as $gco9i$useExpandingContainer, Amazing_Slider as $gco9i$Amazing_Slider, slider_snap_css as $gco9i$slider_snap_css, slider_fading_factory as $gco9i$slider_fading_factory, hsl_to_rgb as $gco9i$hsl_to_rgb, relative_luminance_from_rgb as $gco9i$relative_luminance_from_rgb, base64_encode_unicode as $gco9i$base64_encode_unicode, base64_decode_unicode as $gco9i$base64_decode_unicode, queueMacroTask as $gco9i$queueMacroTask, is_debug as $gco9i$is_debug, dwarn as $gco9i$dwarn, Layout as $gco9i$Layout, async_iterable_ipns as $gco9i$async_iterable_ipns, make_asyncIterable_exiter as $gco9i$make_asyncIterable_exiter, href_change_ipns as $gco9i$href_change_ipns, ContainedImage as $gco9i$ContainedImage, buildThresholdList as $gco9i$buildThresholdList, deparallelize_no_drop as $gco9i$deparallelize_no_drop, insert_surfaces as $gco9i$insert_surfaces} from "@depict-ai/utilishared";
+import {createRoot as $gco9i$createRoot, createSignal as $gco9i$createSignal, getOwner as $gco9i$getOwner, runWithOwner as $gco9i$runWithOwner, onCleanup as $gco9i$onCleanup, createComputed as $gco9i$createComputed, createRenderEffect as $gco9i$createRenderEffect, createEffect as $gco9i$createEffect, untrack as $gco9i$untrack, batch as $gco9i$batch, createResource as $gco9i$createResource, createMemo as $gco9i$createMemo, Show as $gco9i$Show, createReaction as $gco9i$createReaction, Suspense as $gco9i$Suspense, on as $gco9i$on, ErrorBoundary as $gco9i$ErrorBoundary, For as $gco9i$For, Index as $gco9i$Index} from "solid-js";
 import {template as $gco9i$template, getNextElement as $gco9i$getNextElement, spread as $gco9i$spread, mergeProps as $gco9i$mergeProps, runHydrationEvents as $gco9i$runHydrationEvents, effect as $gco9i$effect, setAttribute as $gco9i$setAttribute, insert as $gco9i$insert, isServer as $gco9i$isServer, createComponent as $gco9i$createComponent, getNextMarker as $gco9i$getNextMarker, use as $gco9i$use, memo as $gco9i$memo, addEventListener as $gco9i$addEventListener, delegateEvents as $gco9i$delegateEvents, classList as $gco9i$classList, style as $gco9i$style, className as $gco9i$className, Dynamic as $gco9i$Dynamic} from "solid-js/web";
-import {createSignal as $gco9i$createSignal, getOwner as $gco9i$getOwner, createRoot as $gco9i$createRoot, runWithOwner as $gco9i$runWithOwner, onCleanup as $gco9i$onCleanup, createComputed as $gco9i$createComputed, createRenderEffect as $gco9i$createRenderEffect, createEffect as $gco9i$createEffect, untrack as $gco9i$untrack, batch as $gco9i$batch, createResource as $gco9i$createResource, createMemo as $gco9i$createMemo, Show as $gco9i$Show, createReaction as $gco9i$createReaction, Suspense as $gco9i$Suspense, on as $gco9i$on, ErrorBoundary as $gco9i$ErrorBoundary, For as $gco9i$For, Index as $gco9i$Index} from "solid-js";
 
-/*! Depict.ai search and product listing SDK */ const $ec291e0010116877$export$83d89fbfd8236492 = "1.0.18";
+/*! Depict.ai search and product listing SDK */ const $ec291e0010116877$export$83d89fbfd8236492 = "1.1.2";
 
 
 
 
 
+async function $194bd6b8e4c59830$export$79b1565500412d9b(search_modal, modal_fn_opts) {
+    const body = await (0, $gco9i$observer).wait_for_element("body");
+    let dispose_and_remove;
+    const open_modal_ = (extra_options_for_modal = {}, on_dispose)=>{
+        if (dispose_and_remove) // modal is already open
+        return;
+        const modal_els = (0, $gco9i$createRoot)((dispose)=>{
+            let closing_animation;
+            let animation_started;
+            dispose_and_remove = ()=>{
+                const actually_close = ()=>{
+                    dispose();
+                    on_dispose?.();
+                    modal_els.forEach((el)=>el.remove());
+                };
+                if (animation_started && +new Date() - animation_started > 1000) // Animation broke, close it this time
+                actually_close();
+                else if (!animation_started && closing_animation) {
+                    animation_started = +new Date();
+                    (0, $gco9i$catchify)(closing_animation)()?.then((0, $gco9i$catchify)(actually_close));
+                } else actually_close();
+            };
+            return search_modal({
+                ...modal_fn_opts,
+                ...extra_options_for_modal,
+                close_modal_: close_modal_,
+                open_modal_: open_modal_,
+                register_closing_animation_: (animation)=>closing_animation = animation
+            });
+        });
+        body.append(...modal_els);
+    };
+    const close_modal_ = ()=>{
+        if (dispose_and_remove) {
+            // modal is open
+            const dispose_fn = dispose_and_remove;
+            // set dispose function to undefined in case that it triggers this dispose function itself. Not doing it leads to a bug like https://github.com/solidjs/solid/discussions/1194
+            dispose_and_remove = undefined;
+            dispose_fn();
+        }
+    };
+    return {
+        open_modal_: open_modal_,
+        close_modal_: close_modal_
+    };
+}
+
+
+
+
 
 
 
@@ -1785,55 +1835,6 @@ function $1adfe60f3a14a1d7$export$fecbb157621501bd({ number_of_rendered_selected
 
 
 
-async function $194bd6b8e4c59830$export$79b1565500412d9b(search_modal, modal_fn_opts) {
-    const body = await (0, $gco9i$observer).wait_for_element("body");
-    let dispose_and_remove;
-    const open_modal_ = (extra_options_for_modal = {}, on_dispose)=>{
-        if (dispose_and_remove) // modal is already open
-        return;
-        const modal_els = (0, $gco9i$createRoot)((dispose)=>{
-            let closing_animation;
-            let animation_started;
-            dispose_and_remove = ()=>{
-                const actually_close = ()=>{
-                    dispose();
-                    on_dispose?.();
-                    modal_els.forEach((el)=>el.remove());
-                };
-                if (animation_started && +new Date() - animation_started > 1000) // Animation broke, close it this time
-                actually_close();
-                else if (!animation_started && closing_animation) {
-                    animation_started = +new Date();
-                    (0, $gco9i$catchify)(closing_animation)()?.then((0, $gco9i$catchify)(actually_close));
-                } else actually_close();
-            };
-            return search_modal({
-                ...modal_fn_opts,
-                ...extra_options_for_modal,
-                close_modal_: close_modal_,
-                open_modal_: open_modal_,
-                register_closing_animation_: (animation)=>closing_animation = animation
-            });
-        });
-        body.append(...modal_els);
-    };
-    const close_modal_ = ()=>{
-        if (dispose_and_remove) {
-            // modal is open
-            const dispose_fn = dispose_and_remove;
-            // set dispose function to undefined in case that it triggers this dispose function itself. Not doing it leads to a bug like https://github.com/solidjs/solid/discussions/1194
-            dispose_and_remove = undefined;
-            dispose_fn();
-        }
-    };
-    return {
-        open_modal_: open_modal_,
-        close_modal_: close_modal_
-    };
-}
-
-
-
 
 
 
@@ -4636,7 +4637,6 @@ function $0b0380f75d729d63$var$ActualFloatingButtons({ search_filters_open_: [ge
 
 
 
-
 const $4147651646da990a$var$operator_map = {
     "eq": "≡",
     "neq": "≠",
@@ -5809,7 +5809,8 @@ function $ccd5db07a3a069c5$export$477caf01aecaeb2a(options) {
         router_.navigate_.go_to_({
             is_replace_: true,
             new_url_: url_object.href,
-            force_spa_navigation_: true
+            force_spa_navigation_: true,
+            scroll: false
         });
     }, {
         defer: true
@@ -5869,7 +5870,7 @@ class $4fd2ba03703a7d92$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, $gco9i$catchify)(async ({ new_url_: raw_new_url , event_: event_ , force_spa_navigation_: force_spa_navigation_ , is_replace_: is_replace_ , category_query_id_: category_query_id_  })=>{
+     */ go_to_: (0, $gco9i$catchify)(async ({ new_url_: raw_new_url , event_: event_ , force_spa_navigation_: force_spa_navigation_ , is_replace_: is_replace_ , category_query_id_: category_query_id_ , scroll: scroll = true  })=>{
             const new_url_ = raw_new_url instanceof URL ? raw_new_url : new URL(raw_new_url, location.origin);
             const wants_hard_navigation = this.on_navigation_ === "hard_navigation";
             if (this.#dont_attempt_navigation(event_)) return;
@@ -5891,7 +5892,8 @@ class $4fd2ba03703a7d92$export$7e1297a3a19f10d8 {
                 history[is_replace_ ? "replaceState" : "pushState"](new_state, "", new_url_);
             } else this.#throwing_on_navigation.call(this, {
                 is_replace: is_replace_,
-                new_url: new_url_ instanceof URL ? new_url_ : new URL(new_url_, location.origin)
+                new_url: new_url_ instanceof URL ? new_url_ : new URL(new_url_, location.origin),
+                scroll: scroll
             });
             await promise;
         })
@@ -8025,9 +8027,28 @@ function $f8c929beb82c512b$export$9dd50d35b9d94fdf({ get_search_query_: get_sear
 
 
 
+
+function $1801dbce7adb3f19$export$41b4894022a3580f({ style_props_: style_props_ = (0, $gco9i$createSignal)({})  } = {}) {
+    const [, set_style_props] = style_props_;
+    const supports_hover = (0, $dc9262ef6f786812$export$d9f36cf74e24d595)("(hover: hover) and (pointer: fine)");
+    const desktop_short = (0, $dc9262ef6f786812$export$d9f36cf74e24d595)("(max-height: 790px)");
+    const mobile_short = (0, $dc9262ef6f786812$export$d9f36cf74e24d595)("(max-height: 1000px)");
+    const transform_y = (0, $gco9i$createMemo)(()=>supports_hover() ? !desktop_short() : !mobile_short());
+    set_style_props({
+        position: "fixed",
+        top: "50%"
+    });
+    (0, $gco9i$createComputed)(()=>set_style_props((old_value)=>({
+                ...old_value,
+                transform: transform_y() ? "translateY(-50%)" : "unset"
+            })));
+    return style_props_;
+}
+
+
+
 const $7097477c78a89208$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$gco9i$template)(`<div class="filter-results-for-one-row"><!#><!/><!#><!/></div>`, 6), $7097477c78a89208$var$_tmpl$2 = /*@__PURE__*/ (0, /*@__PURE__*/$gco9i$template)(`<div class="depict plp search"><div class="listing-page"><!#><!/><!#><!/><!#><!/><!#><!/><!#><!/><!#><!/></div><!#><!/><!#><!/></div>`, 20);
-function $7097477c78a89208$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_ , make_category_suggestion_card_: make_category_suggestion_card_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , clear_filters_on_next_submit_: clear_filters_on_next_submit_ , local_filter_cache_: local_filter_cache_ , include_input_field_: include_input_field_ , tenant_: tenant_ , market_: market_ , showing_recommendation_rows_: showing_recommendation_rows_ , search_recs_view_more_: search_recs_view_more_ , disable_search_recommendations_: disable_search_recommendations_ , layout_options_: layout_options_ , recommendations_layout_options_: recommendations_layout_options_ = layout_options_ , scroll_restoration_data_: scroll_restoration_data_ , product_card_template_: product_card_template_  } = opts;
+function $7097477c78a89208$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_ , make_category_suggestion_card_: make_category_suggestion_card_ , expanded_hierarchical_filters_: expanded_hierarchical_filters_ , clear_filters_on_next_submit_: clear_filters_on_next_submit_ , local_filter_cache_: local_filter_cache_ , include_input_field_: include_input_field_ , tenant_: tenant_ , market_: market_ , showing_recommendation_rows_: showing_recommendation_rows_ , search_recs_view_more_: search_recs_view_more_ , disable_search_recommendations_: disable_search_recommendations_ , layout_options_: layout_options_ , recommendations_layout_options_: recommendations_layout_options_ = layout_options_ , scroll_restoration_data_: scroll_restoration_data_ , product_card_template_: product_card_template_ , modal_body_style_ref_: modal_body_style_ref_  }) {
     const [get_sorting] = current_sorting_;
     const all_products_loaded_ = (0, $gco9i$createSignal)(false);
     const [get_all_products_loaded, set_all_products_loaded] = all_products_loaded_;
@@ -8080,42 +8101,8 @@ function $7097477c78a89208$export$a54ec244c8863715(opts) {
             })));
     const available_filters_ = (0, $gco9i$createMemo)(()=>search_results_()?.filters);
     const modal_body_style = (0, $gco9i$createSignal)({});
-    let search_field;
-    if (include_input_field_) {
-        const SafeSearchField = (0, $gco9i$catchify)((0, $5285d2814d0fac0c$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, $gco9i$catchify)((0, $b6d5529b253681aa$export$b3ad617e9036868))(modal_body_style, search_field, undefined, true);
-            div_with_field_class.addEventListener("click", (0, $gco9i$catchify)((e)=>{
-                const target = e.target;
-                const sel = ".submit";
-                if (target?.matches?.(sel) || target?.closest?.(sel)) // the search button is just decor, don't do anything when clicked
-                return;
-                // When selecting text in the SearchField that's in the page we want the same selection to persist. It doesn't by itself, since the SearchModal has an entirely different SearchField. Therefore, we manually copy the selection over.
-                const selected_text_range_ = [
-                    input_element.selectionStart,
-                    input_element.selectionEnd
-                ];
-                align_position?.();
-                open_modal_({
-                    style_props_: modal_body_style,
-                    selected_text_range_: selected_text_range_
-                }, ()=>include_input_field_?.on_close_?.());
-                include_input_field_?.on_open_?.();
-            }));
-        }
-    }
+    const [get_search_field_elements, set_search_field_elements] = (0, $gco9i$createSignal)();
+    const SafeSearchField = (0, $gco9i$catchify)((0, $5285d2814d0fac0c$export$b94867ecbd698f21));
     const [sort_or_filter_open_, set_sort_or_filter_open_] = (0, $gco9i$createSignal)(false);
     const [desktop_filter_elements_, set_desktop_filter_elements] = (0, $gco9i$createSignal)();
     const formatted_number_of_results_ = (0, $511cc0abd9a64ce8$export$92f2da32c6e7e7ee)({
@@ -8180,11 +8167,60 @@ function $7097477c78a89208$export$a54ec244c8863715(opts) {
         get_search_query_();
         (0, $d78eea1e8707dc2d$export$c7e181728ad525f)(location);
     });
+    (0, $gco9i$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, $gco9i$catchify)((0, $b6d5529b253681aa$export$b3ad617e9036868))(modal_body_style, search_field, undefined, true);
+            div_with_field_class.addEventListener("click", (0, $gco9i$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, $1801dbce7adb3f19$export$41b4894022a3580f)({
+            style_props_: modal_body_style
+        });
+    });
     return [
         (0, $gco9i$isServer) ? "<!-- Search page based on Depict SDK -->" : document.createComment("Search page based on Depict SDK"),
         (()=>{
             const _el$6 = (0, $gco9i$getNextElement)($7097477c78a89208$var$_tmpl$2), _el$7 = _el$6.firstChild, _el$8 = _el$7.firstChild, [_el$9, _co$3] = (0, $gco9i$getNextMarker)(_el$8.nextSibling), _el$10 = _el$9.nextSibling, [_el$11, _co$4] = (0, $gco9i$getNextMarker)(_el$10.nextSibling), _el$12 = _el$11.nextSibling, [_el$13, _co$5] = (0, $gco9i$getNextMarker)(_el$12.nextSibling), _el$14 = _el$13.nextSibling, [_el$15, _co$6] = (0, $gco9i$getNextMarker)(_el$14.nextSibling), _el$16 = _el$15.nextSibling, [_el$17, _co$7] = (0, $gco9i$getNextMarker)(_el$16.nextSibling), _el$18 = _el$17.nextSibling, [_el$19, _co$8] = (0, $gco9i$getNextMarker)(_el$18.nextSibling), _el$20 = _el$7.nextSibling, [_el$21, _co$9] = (0, $gco9i$getNextMarker)(_el$20.nextSibling), _el$22 = _el$21.nextSibling, [_el$23, _co$10] = (0, $gco9i$getNextMarker)(_el$22.nextSibling);
-            (0, $gco9i$insert)(_el$7, search_field, _el$9, _co$3);
+            (0, $gco9i$insert)(_el$7, get_search_field_elements, _el$9, _co$3);
             (0, $gco9i$insert)(_el$7, make_category_suggestion_card_ ? (0, $gco9i$createComponent)((0, $b7436a6d1fd64e3b$export$b69d0d92862de18b), {
                 severity_: "error",
                 message_: "Category suggestions failed",
@@ -8310,7 +8346,6 @@ function $7097477c78a89208$export$a54ec244c8863715(opts) {
 
 
 
-
 function $4ca91518c9a35379$export$828dcdd425fd3231(aligner) {
     const style_element = document.createElement("style");
     document.head.append(style_element);
@@ -8336,6 +8371,7 @@ function $4ca91518c9a35379$export$828dcdd425fd3231(aligner) {
 
 
 
+
 const $806c97b931758897$var$_tmpl$ = /*@__PURE__*/ (0, /*@__PURE__*/$gco9i$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.
@@ -8479,18 +8515,7 @@ class $806c97b931758897$export$ac6237957a15b3f0 {
                         return;
                     }
                     // Open centered modal
-                    const supports_hover = (0, $dc9262ef6f786812$export$d9f36cf74e24d595)("(hover: hover) and (pointer: fine)");
-                    const desktop_short = (0, $dc9262ef6f786812$export$d9f36cf74e24d595)("(max-height: 790px)");
-                    const mobile_short = (0, $dc9262ef6f786812$export$d9f36cf74e24d595)("(max-height: 1000px)");
-                    const transform_y = (0, $gco9i$createMemo)(()=>supports_hover() ? !desktop_short() : !mobile_short());
-                    const style_props_ = (0, $gco9i$createSignal)({
-                        position: "fixed",
-                        top: "50%"
-                    });
-                    (0, $gco9i$createComputed)(()=>style_props_[1]((old_value)=>({
-                                ...old_value,
-                                transform: transform_y() ? "translateY(-50%)" : "unset"
-                            })));
+                    const style_props_ = (0, $1801dbce7adb3f19$export$41b4894022a3580f)();
                     if (signal_value_is_options) {
                         const [options_arg, ...rest] = open_signal_value;
                         open_modal_({
@@ -8558,7 +8583,8 @@ function $806c97b931758897$var$get_shared_properties(depict_search) {
     if (!shared_properties) throw new Error("Can't connect to provided DepictSearch instance");
     return shared_properties;
 }
-function $806c97b931758897$export$f2dc7e4e4aa11abb({ depict_search: depict_search , include_input_field: include_input_field , grid_spacing: grid_spacing , cols_at_size: cols_at_size , product_card_template: product_card_template , extra_depict_options: extra_depict_options  }) {
+function $806c97b931758897$export$f2dc7e4e4aa11abb(props) {
+    const { depict_search: depict_search , grid_spacing: grid_spacing , cols_at_size: cols_at_size , product_card_template: product_card_template , extra_depict_options: extra_depict_options  } = props;
     const shared_properties = $806c97b931758897$var$get_shared_properties(depict_search);
     const grid_spacing_override = typeof grid_spacing === "string" ? {
         grid_spacing: grid_spacing
@@ -8612,7 +8638,7 @@ function $806c97b931758897$export$f2dc7e4e4aa11abb({ depict_search: depict_searc
             selected_filters_: shared_properties.selected_filters_,
             showing_recommendation_rows_: state_.search_showing_recommendation_rows,
             scroll_restoration_data_: state_.search_scroll_restoration_data,
-            include_input_field_: include_input_field,
+            include_input_field_: ()=>props.include_input_field,
             layout_options_: {
                 cols_at_size: (0, $b5cccc8ee7d24677$export$6daf8749b65a1b77)(cols_at_size),
                 ...grid_spacing_override
@@ -8994,4 +9020,4 @@ const $4690a06c8489dcd0$export$7bf543b9d9be2c22 = (0, $e4615ecd1849548f$export$b
 (0, $gco9i$add_to_version_info)("ui", (0, $ec291e0010116877$export$83d89fbfd8236492));
 
 
-export {$19976a74d273070d$export$3b621d86b1566b2 as CrossIcon, $fbbadcb080ad1d4a$export$8be2714ec7f169ee as GenericSliderArrowButton, $c58717f39bf51647$export$58e808b1db15d3bc as fetchDepictRecommendations, $961b5c64bef4662f$export$de035477d6fef996 as QuickLinks, $961b5c64bef4662f$export$5b7c3ce0ebe51f86 as BreadCrumbs, $e4615ecd1849548f$export$b91cec6bdc6b32a1 as CategoryTitle, $a79d86d64fb64e8e$export$824dde41348efed1 as embedded_num_products, $5c5f95951393e5d1$export$643598a327b5833e as get_categories, $961b5c64bef4662f$export$f34314aa9505732e as DepictCategory, $961b5c64bef4662f$export$e2bf8ce7779e827e as CategoryPage, $806c97b931758897$export$ac6237957a15b3f0 as DepictSearch, $806c97b931758897$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $806c97b931758897$export$f2dc7e4e4aa11abb as SearchPage, $806c97b931758897$export$316f6f283ae64765 as SearchField, $4fd48cb976bf1789$export$aa14a9f43128f61f as ProductCardError, $6891c018a834cfdd$export$d86a33413558014e as open_modal_with_alignment, $bb15dfb548a7666e$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $b6d5529b253681aa$export$b3ad617e9036868 as align_field, $b5cccc8ee7d24677$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $926b1b5ba2239356$export$1233ca167bf71f9a as styles_to_valid_css_string, $aea1edf92433e81e$export$fe334901e8bebd57 as disable_scrolling, $6e8944558258054f$export$d0596b5cae35ad4 as open_search_with_shift_slash, $7fa23e2a0079eca4$export$e015ed2f2950f2e3 as DepictAPI, $dc9262ef6f786812$export$d9f36cf74e24d595 as media_query_to_accessor, $6936724b9e0b98d5$export$689e204eadb33baf as setup_fast_leave, $bf52d9f9eebd1938$export$5196e4c01fa56fcb as show_toast, $8c0f86cb3e266eeb$export$a71e92cfbb498adc as SolidFormatPrice, $4ca91518c9a35379$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $d20eff0aadc28983$export$acb3eaade4b23afd as BasePlaceholder, $d134eae24341b4a1$export$89c6019e4baa40b1 as TextPlaceholder, $7f60f09116a3fe61$export$3f37af283f8fb843 as ImagePlaceholder, $753e9b2889a47c89$export$3ccaa27d81dd8556 as PageReplacer, $4690a06c8489dcd0$export$864d304a0bc46829 as defaultGridSpacing, $4690a06c8489dcd0$export$c3834fa86c616831 as defaultColsAtSize, $4690a06c8489dcd0$export$7bf543b9d9be2c22 as defaultCategoryTitlePlugin, $ec291e0010116877$export$83d89fbfd8236492 as version};
+export {$194bd6b8e4c59830$export$79b1565500412d9b as general_modal_abstraction, $19976a74d273070d$export$3b621d86b1566b2 as CrossIcon, $fbbadcb080ad1d4a$export$8be2714ec7f169ee as GenericSliderArrowButton, $c58717f39bf51647$export$58e808b1db15d3bc as fetchDepictRecommendations, $961b5c64bef4662f$export$de035477d6fef996 as QuickLinks, $961b5c64bef4662f$export$5b7c3ce0ebe51f86 as BreadCrumbs, $e4615ecd1849548f$export$b91cec6bdc6b32a1 as CategoryTitle, $a79d86d64fb64e8e$export$824dde41348efed1 as embedded_num_products, $5c5f95951393e5d1$export$643598a327b5833e as get_categories, $961b5c64bef4662f$export$f34314aa9505732e as DepictCategory, $961b5c64bef4662f$export$e2bf8ce7779e827e as CategoryPage, $806c97b931758897$export$ac6237957a15b3f0 as DepictSearch, $806c97b931758897$export$bde3eb976dfded9 as get_search_query_updating_blocked_signal, $806c97b931758897$export$f2dc7e4e4aa11abb as SearchPage, $806c97b931758897$export$316f6f283ae64765 as SearchField, $4fd48cb976bf1789$export$aa14a9f43128f61f as ProductCardError, $6891c018a834cfdd$export$d86a33413558014e as open_modal_with_alignment, $bb15dfb548a7666e$export$ee1733d9a8495996 as DefaultInstantCardPlaceholder, $b6d5529b253681aa$export$b3ad617e9036868 as align_field, $b5cccc8ee7d24677$export$6daf8749b65a1b77 as convert_sdk_cols_at_size_to_layout, $926b1b5ba2239356$export$1233ca167bf71f9a as styles_to_valid_css_string, $aea1edf92433e81e$export$fe334901e8bebd57 as disable_scrolling, $6e8944558258054f$export$d0596b5cae35ad4 as open_search_with_shift_slash, $7fa23e2a0079eca4$export$e015ed2f2950f2e3 as DepictAPI, $dc9262ef6f786812$export$d9f36cf74e24d595 as media_query_to_accessor, $6936724b9e0b98d5$export$689e204eadb33baf as setup_fast_leave, $bf52d9f9eebd1938$export$5196e4c01fa56fcb as show_toast, $8c0f86cb3e266eeb$export$a71e92cfbb498adc as SolidFormatPrice, $4ca91518c9a35379$export$828dcdd425fd3231 as connect_search_field_height_to_aligner_height, $d20eff0aadc28983$export$acb3eaade4b23afd as BasePlaceholder, $d134eae24341b4a1$export$89c6019e4baa40b1 as TextPlaceholder, $7f60f09116a3fe61$export$3f37af283f8fb843 as ImagePlaceholder, $753e9b2889a47c89$export$3ccaa27d81dd8556 as PageReplacer, $4690a06c8489dcd0$export$864d304a0bc46829 as defaultGridSpacing, $4690a06c8489dcd0$export$c3834fa86c616831 as defaultColsAtSize, $4690a06c8489dcd0$export$7bf543b9d9be2c22 as defaultCategoryTitlePlugin, $ec291e0010116877$export$83d89fbfd8236492 as version};

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Display, Elem, ColsAtSize, Node_Array } from "@depict-ai/utilishared";
+import { Node_Array, Display, Elem, ColsAtSize } from "@depict-ai/utilishared";
 import { JSX, Accessor, Setter, Signal } from "solid-js";
 import { SearchResponse } from "@depict-ai/types/api/SearchResponse";
 import { SearchRequest, SearchFilter } from "@depict-ai/types/api/SearchRequest";
@@ -7,7 +7,32 @@ 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.1.0";
+export const version = "1.1.2";
+/**
+ * Basically allows you to use SearchModal
+ * So the idea is to have a modal. It should either be rendered and exist, in which case it is in the foreground and open, or it's completely gone. This makes things easier.
+ * @param search_modal a function which returns an array of nodes that get appended into <body>. This function will run in its own solid-js root which will call onCleanup and cleanup all reactive things inside it when the modal is closed. This function will get the arguments passed to open_modal_ and the modal_fn_opts merged together, along with register_closing_animation_ where an async function that resolves once the animation is finished can be provided to animate the closing of the modal
+ * @param modal_fn_opts static options for the modal that won't change on a per-opening basis
+ @returns a function to open and close the modal. When calling the open_modal_ function additional parameters can be passed to the modal
+ */
+export function general_modal_abstraction<StaticOptions extends {
+    [key: string]: any;
+}, ExtraOptionsProvidedOnOpen extends {
+    [key: string]: any;
+}>(search_modal: (options: StaticOptions & ExtraOptionsProvidedOnOpen & {
+    close_modal_: VoidFunction;
+    open_modal_: (extra_options_for_modal?: ExtraOptionsProvidedOnOpen, on_dispose?: VoidFunction) => void;
+    register_closing_animation_: (animation: () => Promise<any>) => void;
+}) => Node_Array, modal_fn_opts: StaticOptions): Promise<{
+    open_modal_: (extra_options_for_modal?: ExtraOptionsProvidedOnOpen, on_dispose?: VoidFunction) => void;
+    close_modal_: () => void;
+}>;
+export function CrossIcon(props?: JSX.SvgSVGAttributes<SVGSVGElement>): SVGElement;
+/** @jsxImportSource solid-js */
+export function GenericSliderArrowButton(props?: {
+    width_?: number;
+    height_?: number;
+}): SVGElement;
 export type OnNavigation = ((options: {
     is_replace: boolean;
     new_url: URL;
@@ -215,6 +240,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.
@@ -223,7 +269,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
@@ -331,28 +377,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;
-}
 /**
  * Will be sent to backend to indicate whether the query_id_ is for a collection or category.
  * Backend defaults to category if not specified.
@@ -396,7 +420,34 @@ export function BreadCrumbs({ depict_category }: {
 export function QuickLinks({ depict_category }: {
     depict_category: DepictCategory;
 }): HTMLElement;
-export function get_categories(tenant: string, market: string): Promise<string[]>;
+/**
+ * Gets available categories/collections (query_ids for the product-listing endpoint) for a merchant
+ * @param tenant
+ * @param market
+ * @param type - optional, currently only setting this to "collection" will return collections instead of categories
+ */
+export function get_categories(tenant: string, market: string, type?: 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
@@ -546,5 +597,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";