@depict-ai/react-ui 2.0.4 → 2.0.5

package/dist/main.js

@@ -1,293 +0,0 @@
-var $4GYXz$depictaiui = require("@depict-ai/ui");
-var $4GYXz$depictaiutilishared = require("@depict-ai/utilishared");
-var $4GYXz$solidjs = require("solid-js");
-var $4GYXz$solidjsweb = require("solid-js/web");
-var $4GYXz$react = require("react");
-var $4GYXz$reactjsxruntime = require("react/jsx-runtime");
-var $4GYXz$reactdom = require("react-dom");
-
-function $parcel$export(e, n, v, s) {
-  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
-}
-
-$parcel$export(module.exports, "DepictSearchField", () => $a48f3b1a4abf2e0c$export$d2c02478244f91f7);
-$parcel$export(module.exports, "DepictProvider", () => $18b830ef84ac138a$export$9fac37a9c21c2f3b);
-$parcel$export(module.exports, "openModal", () => $20bf907adee775ba$export$a7f6cffb6b8ba11c);
-$parcel$export(module.exports, "DepictSearchHeader", () => $20bf907adee775ba$export$cbcd1ecdb41b1d0a);
-$parcel$export(module.exports, "DepictSearchPage", () => $a6bedbe4b4d6d027$export$210723f5a54a7028);
-// This is where the actual source of your React stuff should live
-// Note, if you add an export here, also add one in src-server/main.ts
-
-
-const $0b7cd4fb39fc3502$export$8e769ad4338a911e = {
-    search: null,
-    header_alignment: null,
-    search_page_path_: (0, $4GYXz$solidjs.createSignal)(),
-    required_state_set_: (0, $4GYXz$solidjs.createSignal)(false)
-};
-
-
-
-
-
-
-let $b4d0d98857ed9934$var$run_on_href_change;
-function $b4d0d98857ed9934$export$74f3924c5027fe1d(cb) {
-    $b4d0d98857ed9934$var$run_on_href_change = cb;
-}
-(async ()=>{
-    for await (const href of (0, $4GYXz$depictaiutilishared.href_change_ipns))$b4d0d98857ed9934$var$run_on_href_change?.(href);
-})();
-const $b4d0d98857ed9934$export$6cb4d3a5c1ac9b43 = (url)=>url.pathname == (0, $4GYXz$solidjs.untrack)((0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search_page_path_[0]); // might have changed therefore get it from globalState
-function $b4d0d98857ed9934$export$f6e64e17bd69eeef(solid_component, props) {
-    const [portals, set_portals] = (0, $4GYXz$react.useState)([]);
-    const element_ref = (0, $4GYXz$react.useRef)();
-    (0, $4GYXz$react.useEffect)(()=>{
-        const div_element = element_ref.current;
-        const dispose = (0, $4GYXz$solidjsweb.render)(()=>solid_component(props, set_portals), div_element);
-        return dispose;
-    }, []);
-    return (0, $4GYXz$reactjsxruntime.jsx)("div", {
-        ref: element_ref,
-        children: portals
-    });
-}
-function $b4d0d98857ed9934$export$e5139bbbb9a05035(component) {
-    return (...args)=>{
-        return (0, $4GYXz$solidjs.createComponent)((0, $4GYXz$solidjs.Show), {
-            get when () {
-                return (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).required_state_set_[0]();
-            },
-            get children () {
-                return component(...args);
-            }
-        });
-    };
-}
-
-
-
-
-function $a48f3b1a4abf2e0c$export$d2c02478244f91f7() {
-    return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)(()=>(0, $4GYXz$depictaiui.SearchField)({
-            depict_search: (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search
-        })), {});
-}
-
-
-
-
-
-let $6319748b4f0426f0$var$set = false;
-function $6319748b4f0426f0$export$6453cbc34515a94d(is_search_page) {
-    if ($6319748b4f0426f0$var$set) return; // Just being safe
-    $6319748b4f0426f0$var$set = true;
-    let should_use_old_scroll = false;
-    const old_scrollTo = window.scrollTo;
-    window.scrollTo = (...args)=>{
-        if (should_use_old_scroll || process.env.__NEXT_SCROLL_RESTORATION || !is_search_page(location)) return Reflect.apply(old_scrollTo, window, args);
-        else should_use_old_scroll = true;
-    };
-    addEventListener("popstate", (e)=>{
-        if (!is_search_page(location)) {
-            $6319748b4f0426f0$var$removeLotsOfPadding(); // Just making sure
-            return;
-        }
-        should_use_old_scroll = false;
-        $6319748b4f0426f0$var$addLotsOfPadding();
-        (0, $4GYXz$depictaiutilishared.observer).wait_for_element(".depict.plp .listing-page").then(()=>{
-            $6319748b4f0426f0$var$removeLotsOfPadding();
-        });
-    });
-    (0, $4GYXz$depictaiutilishared.history_replacer)(()=>{
-        (0, $4GYXz$depictaiutilishared.queueMacroTask)(()=>{
-            $6319748b4f0426f0$var$removeLotsOfPadding();
-        });
-    }, false);
-    window?.next?.router?.events?.on("routeChangeStart", ()=>{
-        $6319748b4f0426f0$var$addLotsOfPadding();
-    });
-}
-// TODO: Make these animations so they don't collide with whatever padding is already on the body
-function $6319748b4f0426f0$var$addLotsOfPadding() {
-    document.body.style.paddingBottom = (history.state?.search_scroll_restoration_data?.[0]?.min_results_loaded || 150) * 500 + "px";
-}
-function $6319748b4f0426f0$var$removeLotsOfPadding() {
-    document.body.style.paddingBottom = "";
-}
-
-
-
-
-
-function $18b830ef84ac138a$export$9fac37a9c21c2f3b(props) {
-    if (!props.market || !props.merchant) {
-        (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).required_state_set_[1](false);
-        return (0, $4GYXz$react.createElement)((0, $4GYXz$react.Fragment), null, props.children);
-    }
-    const { children: children , search_page_path: search_page_path , url_param_name: url_param_name , ...assignable_options } = props;
-    const { search: search  } = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e);
-    const [get_search_page_path, set_search_page_path] = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search_page_path_;
-    set_search_page_path(search_page_path);
-    if (!search) {
-        (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search = new (0, $4GYXz$depictaiui.DepictSearch)({
-            search_query_url_param_name: url_param_name,
-            ...assignable_options,
-            enable_category_suggestions: false,
-            localization: {
-                ...(0, $4GYXz$depictaiui.swedish_search_translation),
-                price_formatting_: {
-                    pre_: "kr ",
-                    post_: "",
-                    decimal_places_delimiter_: ",",
-                    thousands_delimiter_: " ",
-                    places_after_comma_: 2
-                }
-            },
-            on_navigation: (new_href)=>{
-                const shallow = (0, $b4d0d98857ed9934$export$6cb4d3a5c1ac9b43)(location);
-                if (window.next) window.next.router.push(new_href, undefined, {
-                    shallow: shallow,
-                    scroll: true
-                });
-                else location.href = new_href;
-            },
-            url_transformer: (url)=>url.pathname = (0, $4GYXz$solidjs.untrack)(get_search_page_path)
-        });
-        (0, $6319748b4f0426f0$export$6453cbc34515a94d)((0, $b4d0d98857ed9934$export$6cb4d3a5c1ac9b43));
-    } else Object.assign(search, assignable_options);
-    (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).required_state_set_[1](true);
-    return (0, $4GYXz$react.createElement)((0, $4GYXz$react.Fragment), null, children);
-}
-
-
-// PoC maybe-component
-// Idea is to always give a nice "modal input in header" look with no more config than adding this component to the page header to where it can absolute-size
-// and cover the entire height of the header. Then we know where to put the modal input top and bottom, and the left and right we just center.
-
-
-
-function $20bf907adee775ba$export$cbcd1ecdb41b1d0a() {
-    return (0, $4GYXz$react.createElement)("div", {
-        className: "depict aligner",
-        ref: (e)=>(0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).header_alignment = e
-    });
-}
-let $20bf907adee775ba$var$sheet;
-function $20bf907adee775ba$export$a7f6cffb6b8ba11c() {
-    if (!(0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search) {
-        console.error("No active search in the app!");
-        return;
-    }
-    if (!(0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).header_alignment) {
-        console.error("No active search header aligner on the page!");
-        return;
-    }
-    const style_props_ = (0, $4GYXz$solidjs.createSignal)({
-        position: "fixed",
-        top: 0
-    });
-    if ((0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).header_alignment?.clientHeight) {
-        let styles = `.depict.plp.in-header .depict-search-modal .query-input { height: ${(0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).header_alignment?.clientHeight}px; }`;
-        styles += `.depict.plp.in-header .depict-search-modal-backdrop { top: ${(0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).header_alignment?.clientHeight}px; }`;
-        if (!$20bf907adee775ba$var$sheet) {
-            const style = document.createElement("style");
-            style.append(styles);
-            document.head.appendChild(style);
-        }
-    }
-    const class_list_ = (0, $4GYXz$solidjs.createMemo)(()=>({
-            "in-header": true
-        }));
-    (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search.modal_open = [
-        {
-            style_props_: style_props_,
-            class_list_: class_list_
-        }
-    ];
-}
-
-
-
-
-
-
-
-
-function $a6bedbe4b4d6d027$export$210723f5a54a7028(opts) {
-    return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)($a6bedbe4b4d6d027$var$SolidSearchPage), opts);
-}
-function $a6bedbe4b4d6d027$var$SolidSearchPage(props, set_portals) {
-    const depict_search = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search;
-    if (!depict_search) throw Error("No depict_search instance when rendering SearchPage.");
-    const search_query_updating_blocked_signal = (0, $4GYXz$depictaiui.get_search_query_updating_blocked_signal)(depict_search);
-    if (!search_query_updating_blocked_signal) throw Error("No search_query_updating_blocked_signal when rendering SearchPage");
-    const [, set_search_query_updating_blocked_signal] = search_query_updating_blocked_signal;
-    const update_updating_blocked_signal = ()=>{
-        set_search_query_updating_blocked_signal(!(0, $b4d0d98857ed9934$export$6cb4d3a5c1ac9b43)(location));
-    };
-    // react is really slow with disposing components, we want to avoid a flash of another search query when you click on a product and navigate away
-    (0, $b4d0d98857ed9934$export$74f3924c5027fe1d)(update_updating_blocked_signal); // if we navigate, re-check
-    (0, $4GYXz$solidjs.createComputed)(()=>{
-        (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search_page_path_[0](); // if react defined path changes, re-check
-        update_updating_blocked_signal();
-    });
-    const component_portals = new Set();
-    return (0, $4GYXz$depictaiui.SearchPage)({
-        // Default config goes here
-        include_input_field: props.includeInputField ?? true,
-        cols_at_size: props.columnsAtSize ?? [
-            [
-                4
-            ],
-            [
-                3,
-                1024
-            ],
-            [
-                2,
-                901
-            ]
-        ],
-        grid_spacing: props.gridSpacing ?? "2%",
-        // Todo: Do we need this?
-        get_product_id: ()=>"",
-        depict_search: depict_search,
-        product_card_template: async (display, info)=>{
-            const solid_container = document.createElement("div");
-            const react_has_rendered = new Promise((r)=>{
-                const m_o = new MutationObserver(()=>{
-                    m_o.disconnect();
-                    r();
-                });
-                m_o.observe(solid_container, {
-                    childList: true
-                });
-            });
-            const is_placeholder = info.rendering_options.type === "placeholder";
-            const reactProductCard = (0, $4GYXz$reactjsxruntime.jsx)(props.productCard, {
-                display: is_placeholder ? null : display
-            });
-            const portal = $4GYXz$reactdom.createPortal(reactProductCard, solid_container);
-            component_portals.add(portal);
-            set_portals([
-                ...component_portals
-            ]);
-            (0, $4GYXz$solidjs.onCleanup)(()=>{
-                // this will stop working after any await so be careful to not await before this, or you'll have to carry the owner over with getOwner and runWithOwner
-                component_portals.delete(portal);
-                set_portals([
-                    ...component_portals
-                ]);
-            });
-            await react_has_rendered; // wait for react to have finish portaling the elements so that the placeholders get removed once we have an actual result and so that the PLP code knows it has a placeholder when this is a placeholder rendering
-            return [
-                solid_container
-            ];
-        }
-    });
-}
-
-
-
-

package/dist/module.js

@@ -1,285 +0,0 @@
-import {SearchField as $TZSbU$SearchField, DepictSearch as $TZSbU$DepictSearch, swedish_search_translation as $TZSbU$swedish_search_translation, get_search_query_updating_blocked_signal as $TZSbU$get_search_query_updating_blocked_signal, SearchPage as $TZSbU$SearchPage} from "@depict-ai/ui";
-import {href_change_ipns as $TZSbU$href_change_ipns, observer as $TZSbU$observer, history_replacer as $TZSbU$history_replacer, queueMacroTask as $TZSbU$queueMacroTask} from "@depict-ai/utilishared";
-import {untrack as $TZSbU$untrack, createComponent as $TZSbU$createComponent, Show as $TZSbU$Show, createSignal as $TZSbU$createSignal, createMemo as $TZSbU$createMemo, createComputed as $TZSbU$createComputed, onCleanup as $TZSbU$onCleanup} from "solid-js";
-import {render as $TZSbU$render} from "solid-js/web";
-import {useState as $TZSbU$useState, useRef as $TZSbU$useRef, useEffect as $TZSbU$useEffect, createElement as $TZSbU$createElement, Fragment as $TZSbU$Fragment} from "react";
-import {jsx as $TZSbU$jsx} from "react/jsx-runtime";
-import {createPortal as $TZSbU$createPortal} from "react-dom";
-
-// This is where the actual source of your React stuff should live
-// Note, if you add an export here, also add one in src-server/main.ts
-
-
-const $42858f023ef23dab$export$8e769ad4338a911e = {
-    search: null,
-    header_alignment: null,
-    search_page_path_: (0, $TZSbU$createSignal)(),
-    required_state_set_: (0, $TZSbU$createSignal)(false)
-};
-
-
-
-
-
-
-let $c83ba9ab79386687$var$run_on_href_change;
-function $c83ba9ab79386687$export$74f3924c5027fe1d(cb) {
-    $c83ba9ab79386687$var$run_on_href_change = cb;
-}
-(async ()=>{
-    for await (const href of (0, $TZSbU$href_change_ipns))$c83ba9ab79386687$var$run_on_href_change?.(href);
-})();
-const $c83ba9ab79386687$export$6cb4d3a5c1ac9b43 = (url)=>url.pathname == (0, $TZSbU$untrack)((0, $42858f023ef23dab$export$8e769ad4338a911e).search_page_path_[0]); // might have changed therefore get it from globalState
-function $c83ba9ab79386687$export$f6e64e17bd69eeef(solid_component, props) {
-    const [portals, set_portals] = (0, $TZSbU$useState)([]);
-    const element_ref = (0, $TZSbU$useRef)();
-    (0, $TZSbU$useEffect)(()=>{
-        const div_element = element_ref.current;
-        const dispose = (0, $TZSbU$render)(()=>solid_component(props, set_portals), div_element);
-        return dispose;
-    }, []);
-    return (0, $TZSbU$jsx)("div", {
-        ref: element_ref,
-        children: portals
-    });
-}
-function $c83ba9ab79386687$export$e5139bbbb9a05035(component) {
-    return (...args)=>{
-        return (0, $TZSbU$createComponent)((0, $TZSbU$Show), {
-            get when () {
-                return (0, $42858f023ef23dab$export$8e769ad4338a911e).required_state_set_[0]();
-            },
-            get children () {
-                return component(...args);
-            }
-        });
-    };
-}
-
-
-
-
-function $54b0d21b77e719c4$export$d2c02478244f91f7() {
-    return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((0, $c83ba9ab79386687$export$e5139bbbb9a05035)(()=>(0, $TZSbU$SearchField)({
-            depict_search: (0, $42858f023ef23dab$export$8e769ad4338a911e).search
-        })), {});
-}
-
-
-
-
-
-let $8071251ee4e9ffa1$var$set = false;
-function $8071251ee4e9ffa1$export$6453cbc34515a94d(is_search_page) {
-    if ($8071251ee4e9ffa1$var$set) return; // Just being safe
-    $8071251ee4e9ffa1$var$set = true;
-    let should_use_old_scroll = false;
-    const old_scrollTo = window.scrollTo;
-    window.scrollTo = (...args)=>{
-        if (should_use_old_scroll || process.env.__NEXT_SCROLL_RESTORATION || !is_search_page(location)) return Reflect.apply(old_scrollTo, window, args);
-        else should_use_old_scroll = true;
-    };
-    addEventListener("popstate", (e)=>{
-        if (!is_search_page(location)) {
-            $8071251ee4e9ffa1$var$removeLotsOfPadding(); // Just making sure
-            return;
-        }
-        should_use_old_scroll = false;
-        $8071251ee4e9ffa1$var$addLotsOfPadding();
-        (0, $TZSbU$observer).wait_for_element(".depict.plp .listing-page").then(()=>{
-            $8071251ee4e9ffa1$var$removeLotsOfPadding();
-        });
-    });
-    (0, $TZSbU$history_replacer)(()=>{
-        (0, $TZSbU$queueMacroTask)(()=>{
-            $8071251ee4e9ffa1$var$removeLotsOfPadding();
-        });
-    }, false);
-    window?.next?.router?.events?.on("routeChangeStart", ()=>{
-        $8071251ee4e9ffa1$var$addLotsOfPadding();
-    });
-}
-// TODO: Make these animations so they don't collide with whatever padding is already on the body
-function $8071251ee4e9ffa1$var$addLotsOfPadding() {
-    document.body.style.paddingBottom = (history.state?.search_scroll_restoration_data?.[0]?.min_results_loaded || 150) * 500 + "px";
-}
-function $8071251ee4e9ffa1$var$removeLotsOfPadding() {
-    document.body.style.paddingBottom = "";
-}
-
-
-
-
-
-function $faf794495ff8b304$export$9fac37a9c21c2f3b(props) {
-    if (!props.market || !props.merchant) {
-        (0, $42858f023ef23dab$export$8e769ad4338a911e).required_state_set_[1](false);
-        return (0, $TZSbU$createElement)((0, $TZSbU$Fragment), null, props.children);
-    }
-    const { children: children , search_page_path: search_page_path , url_param_name: url_param_name , ...assignable_options } = props;
-    const { search: search  } = (0, $42858f023ef23dab$export$8e769ad4338a911e);
-    const [get_search_page_path, set_search_page_path] = (0, $42858f023ef23dab$export$8e769ad4338a911e).search_page_path_;
-    set_search_page_path(search_page_path);
-    if (!search) {
-        (0, $42858f023ef23dab$export$8e769ad4338a911e).search = new (0, $TZSbU$DepictSearch)({
-            search_query_url_param_name: url_param_name,
-            ...assignable_options,
-            enable_category_suggestions: false,
-            localization: {
-                ...(0, $TZSbU$swedish_search_translation),
-                price_formatting_: {
-                    pre_: "kr ",
-                    post_: "",
-                    decimal_places_delimiter_: ",",
-                    thousands_delimiter_: " ",
-                    places_after_comma_: 2
-                }
-            },
-            on_navigation: (new_href)=>{
-                const shallow = (0, $c83ba9ab79386687$export$6cb4d3a5c1ac9b43)(location);
-                if (window.next) window.next.router.push(new_href, undefined, {
-                    shallow: shallow,
-                    scroll: true
-                });
-                else location.href = new_href;
-            },
-            url_transformer: (url)=>url.pathname = (0, $TZSbU$untrack)(get_search_page_path)
-        });
-        (0, $8071251ee4e9ffa1$export$6453cbc34515a94d)((0, $c83ba9ab79386687$export$6cb4d3a5c1ac9b43));
-    } else Object.assign(search, assignable_options);
-    (0, $42858f023ef23dab$export$8e769ad4338a911e).required_state_set_[1](true);
-    return (0, $TZSbU$createElement)((0, $TZSbU$Fragment), null, children);
-}
-
-
-// PoC maybe-component
-// Idea is to always give a nice "modal input in header" look with no more config than adding this component to the page header to where it can absolute-size
-// and cover the entire height of the header. Then we know where to put the modal input top and bottom, and the left and right we just center.
-
-
-
-function $f41a371216eff80b$export$cbcd1ecdb41b1d0a() {
-    return (0, $TZSbU$createElement)("div", {
-        className: "depict aligner",
-        ref: (e)=>(0, $42858f023ef23dab$export$8e769ad4338a911e).header_alignment = e
-    });
-}
-let $f41a371216eff80b$var$sheet;
-function $f41a371216eff80b$export$a7f6cffb6b8ba11c() {
-    if (!(0, $42858f023ef23dab$export$8e769ad4338a911e).search) {
-        console.error("No active search in the app!");
-        return;
-    }
-    if (!(0, $42858f023ef23dab$export$8e769ad4338a911e).header_alignment) {
-        console.error("No active search header aligner on the page!");
-        return;
-    }
-    const style_props_ = (0, $TZSbU$createSignal)({
-        position: "fixed",
-        top: 0
-    });
-    if ((0, $42858f023ef23dab$export$8e769ad4338a911e).header_alignment?.clientHeight) {
-        let styles = `.depict.plp.in-header .depict-search-modal .query-input { height: ${(0, $42858f023ef23dab$export$8e769ad4338a911e).header_alignment?.clientHeight}px; }`;
-        styles += `.depict.plp.in-header .depict-search-modal-backdrop { top: ${(0, $42858f023ef23dab$export$8e769ad4338a911e).header_alignment?.clientHeight}px; }`;
-        if (!$f41a371216eff80b$var$sheet) {
-            const style = document.createElement("style");
-            style.append(styles);
-            document.head.appendChild(style);
-        }
-    }
-    const class_list_ = (0, $TZSbU$createMemo)(()=>({
-            "in-header": true
-        }));
-    (0, $42858f023ef23dab$export$8e769ad4338a911e).search.modal_open = [
-        {
-            style_props_: style_props_,
-            class_list_: class_list_
-        }
-    ];
-}
-
-
-
-
-
-
-
-
-function $9f8d5ef3c016c493$export$210723f5a54a7028(opts) {
-    return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((0, $c83ba9ab79386687$export$e5139bbbb9a05035)($9f8d5ef3c016c493$var$SolidSearchPage), opts);
-}
-function $9f8d5ef3c016c493$var$SolidSearchPage(props, set_portals) {
-    const depict_search = (0, $42858f023ef23dab$export$8e769ad4338a911e).search;
-    if (!depict_search) throw Error("No depict_search instance when rendering SearchPage.");
-    const search_query_updating_blocked_signal = (0, $TZSbU$get_search_query_updating_blocked_signal)(depict_search);
-    if (!search_query_updating_blocked_signal) throw Error("No search_query_updating_blocked_signal when rendering SearchPage");
-    const [, set_search_query_updating_blocked_signal] = search_query_updating_blocked_signal;
-    const update_updating_blocked_signal = ()=>{
-        set_search_query_updating_blocked_signal(!(0, $c83ba9ab79386687$export$6cb4d3a5c1ac9b43)(location));
-    };
-    // react is really slow with disposing components, we want to avoid a flash of another search query when you click on a product and navigate away
-    (0, $c83ba9ab79386687$export$74f3924c5027fe1d)(update_updating_blocked_signal); // if we navigate, re-check
-    (0, $TZSbU$createComputed)(()=>{
-        (0, $42858f023ef23dab$export$8e769ad4338a911e).search_page_path_[0](); // if react defined path changes, re-check
-        update_updating_blocked_signal();
-    });
-    const component_portals = new Set();
-    return (0, $TZSbU$SearchPage)({
-        // Default config goes here
-        include_input_field: props.includeInputField ?? true,
-        cols_at_size: props.columnsAtSize ?? [
-            [
-                4
-            ],
-            [
-                3,
-                1024
-            ],
-            [
-                2,
-                901
-            ]
-        ],
-        grid_spacing: props.gridSpacing ?? "2%",
-        // Todo: Do we need this?
-        get_product_id: ()=>"",
-        depict_search: depict_search,
-        product_card_template: async (display, info)=>{
-            const solid_container = document.createElement("div");
-            const react_has_rendered = new Promise((r)=>{
-                const m_o = new MutationObserver(()=>{
-                    m_o.disconnect();
-                    r();
-                });
-                m_o.observe(solid_container, {
-                    childList: true
-                });
-            });
-            const is_placeholder = info.rendering_options.type === "placeholder";
-            const reactProductCard = (0, $TZSbU$jsx)(props.productCard, {
-                display: is_placeholder ? null : display
-            });
-            const portal = $TZSbU$createPortal(reactProductCard, solid_container);
-            component_portals.add(portal);
-            set_portals([
-                ...component_portals
-            ]);
-            (0, $TZSbU$onCleanup)(()=>{
-                // this will stop working after any await so be careful to not await before this, or you'll have to carry the owner over with getOwner and runWithOwner
-                component_portals.delete(portal);
-                set_portals([
-                    ...component_portals
-                ]);
-            });
-            await react_has_rendered; // wait for react to have finish portaling the elements so that the placeholders get removed once we have an actual result and so that the PLP code knows it has a placeholder when this is a placeholder rendering
-            return [
-                solid_container
-            ];
-        }
-    });
-}
-
-
-
-
-export {$54b0d21b77e719c4$export$d2c02478244f91f7 as DepictSearchField, $faf794495ff8b304$export$9fac37a9c21c2f3b as DepictProvider, $f41a371216eff80b$export$a7f6cffb6b8ba11c as openModal, $f41a371216eff80b$export$cbcd1ecdb41b1d0a as DepictSearchHeader, $9f8d5ef3c016c493$export$210723f5a54a7028 as DepictSearchPage};