@depict-ai/react-ui 2.0.9 → 2.0.11

package/dist/main.js

@@ -1,27 +1,39 @@
-var $4GYXz$depictaiui = require("@depict-ai/ui");
 var $4GYXz$depictaiutilishared = require("@depict-ai/utilishared");
+var $4GYXz$depictaiui = require("@depict-ai/ui");
 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");
+var $4GYXz$depictaiuilocales = require("@depict-ai/ui/locales");
 
 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
+$parcel$export(module.exports, "QuickLinks", () => $f16af0e861aff3d0$export$466cdc317043f6cb);
+$parcel$export(module.exports, "BreadCrumbs", () => $d88e98b11c182b8e$export$5646050d516e06bc);
+$parcel$export(module.exports, "DepictAligner", () => $d96434e62e08087d$export$3f4580d6398c5027);
+$parcel$export(module.exports, "DepictProvider", () => $24b00503eef73528$export$9fac37a9c21c2f3b);
+$parcel$export(module.exports, "DepictCategoryPage", () => $5aa5fcb9f8a2bebc$export$d87c61cecb2edf0d);
+$parcel$export(module.exports, "DepictSearchPage", () => $7ad7a3d0011b7b1b$export$210723f5a54a7028);
+$parcel$export(module.exports, "DepictSearchField", () => $03c714523ff406fc$export$4c0fa313cf50c4ad);
+$parcel$export(module.exports, "ImagePlaceholder", () => $df522c8a81ed5a01$export$3f37af283f8fb843);
+$parcel$export(module.exports, "TextPlaceholder", () => $7c8b440edc188ad5$export$89c6019e4baa40b1);
+$parcel$export(module.exports, "useDepictSearchModal", () => $3647cad61d03b89c$export$cc1e9aaf280afdcb);
+$parcel$export(module.exports, "CategoryTitle", () => $b03e4eee8610ebbe$re_export$CategoryTitle);
+$parcel$export(module.exports, "EmbeddedNumProducts", () => $b03e4eee8610ebbe$re_export$EmbeddedNumProducts);
+$parcel$export(module.exports, "version", () => $db7b67857900028b$export$83d89fbfd8236492);
+$parcel$export(module.exports, "Navigation", () => $b742053c966024b4$export$b8a61e5c71402559);
+/*! Depict.ai search and product listing react SDK wrapper */ // 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,
+    category: null,
+    category_path: null,
     search_page_path_: (0, $4GYXz$solidjs.createSignal)(),
     required_state_set_: (0, $4GYXz$solidjs.createSignal)(false)
 };
@@ -31,6 +43,7 @@ const $0b7cd4fb39fc3502$export$8e769ad4338a911e = {
 
 
 
+
 let $b4d0d98857ed9934$var$run_on_href_change;
 function $b4d0d98857ed9934$export$74f3924c5027fe1d(cb) {
     $b4d0d98857ed9934$var$run_on_href_change = cb;
@@ -38,25 +51,29 @@ function $b4d0d98857ed9934$export$74f3924c5027fe1d(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 $b4d0d98857ed9934$export$775e6b3892b5ad52 = (url)=>url.pathname == (0, $4GYXz$solidjs.untrack)((0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search_page_path_[0]); // might have changed therefore get it from globalState
+const $b4d0d98857ed9934$export$92a8f8b3c630fa0d = (url)=>{
+    return $b4d0d98857ed9934$export$775e6b3892b5ad52(url) || url.pathname === (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).category_path;
+};
+function $b4d0d98857ed9934$export$f6e64e17bd69eeef(solid_component, props, wrapper_type = "div", wrapper_style = {}, react_render_handler) {
     const [portals, set_portals] = (0, $4GYXz$react.useState)([]);
-    const element_ref = (0, $4GYXz$react.useRef)();
+    const wrapper_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);
+        const wrapper_element = wrapper_element_ref.current;
+        const dispose = (0, $4GYXz$solidjsweb.render)(()=>solid_component(props, set_portals), wrapper_element);
         return dispose;
     }, []);
-    return (0, $4GYXz$reactjsxruntime.jsx)("div", {
-        ref: element_ref,
-        children: portals
-    });
+    react_render_handler?.(props);
+    return (0, $4GYXz$react.createElement)(wrapper_type, {
+        ref: wrapper_element_ref,
+        style: wrapper_style
+    }, portals);
 }
-function $b4d0d98857ed9934$export$e5139bbbb9a05035(component) {
+function $b4d0d98857ed9934$export$e5139bbbb9a05035(component, is_set = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).required_state_set_[0]) {
     return (...args)=>{
         return (0, $4GYXz$solidjs.createComponent)((0, $4GYXz$solidjs.Show), {
             get when () {
-                return (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).required_state_set_[0]();
+                return is_set();
             },
             get children () {
                 return component(...args);
@@ -64,11 +81,43 @@ function $b4d0d98857ed9934$export$e5139bbbb9a05035(component) {
         });
     };
 }
+async function $b4d0d98857ed9934$export$79c79419c1ef0081({ display: display , info: info , component_portals: component_portals , set_portals: set_portals , react_template: react_template  }) {
+    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)(react_template, {
+        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
+    ];
+}
 
 
 
 
-function $a48f3b1a4abf2e0c$export$d2c02478244f91f7() {
+function $03c714523ff406fc$export$4c0fa313cf50c4ad() {
     return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)(()=>(0, $4GYXz$depictaiui.SearchField)({
             depict_search: (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search
         })), {});
@@ -78,7 +127,10 @@ function $a48f3b1a4abf2e0c$export$d2c02478244f91f7() {
 
 
 
+
+
 let $6319748b4f0426f0$var$set = false;
+let $6319748b4f0426f0$var$padding_animation;
 function $6319748b4f0426f0$export$6453cbc34515a94d(is_search_page) {
     if ($6319748b4f0426f0$var$set) return; // Just being safe
     $6319748b4f0426f0$var$set = true;
@@ -88,7 +140,7 @@ function $6319748b4f0426f0$export$6453cbc34515a94d(is_search_page) {
         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)=>{
+    addEventListener("popstate", (0, $4GYXz$depictaiutilishared.catchify)(()=>{
         if (!is_search_page(location)) {
             $6319748b4f0426f0$var$removeLotsOfPadding(); // Just making sure
             return;
@@ -98,7 +150,7 @@ function $6319748b4f0426f0$export$6453cbc34515a94d(is_search_page) {
         (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();
@@ -108,123 +160,118 @@ function $6319748b4f0426f0$export$6453cbc34515a94d(is_search_page) {
         $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";
+/*
+ Here we want to be able to add padding that *definitely* gets applied and then be able to revert precisely to what was before.
+ The best way to achieve this is using an animation that with the fill set to none. This is because animations have the absolute highest precedence in CSS, even higher than !important. Then, to revert to the old padding, we just play the animation which is 1ms long so, it immediately finishes and whatever was defined before takes precedence again.
+ */ function $6319748b4f0426f0$var$addLotsOfPadding() {
+    if ($6319748b4f0426f0$var$padding_animation) return; // We're already showing a bunch of padding
+    $6319748b4f0426f0$var$padding_animation = document.body.animate({
+        paddingBottom: (history.state?.search_scroll_restoration_data?.[0]?.min_results_loaded || 150) * 500 + "px",
+        offset: 0
+    }, 1);
+    $6319748b4f0426f0$var$padding_animation.pause();
 }
 function $6319748b4f0426f0$var$removeLotsOfPadding() {
-    document.body.style.paddingBottom = "";
+    if ($6319748b4f0426f0$var$padding_animation) {
+        $6319748b4f0426f0$var$padding_animation.play();
+        $6319748b4f0426f0$var$padding_animation = undefined;
+    }
 }
 
 
 
 
+const $bc389476eeb2b615$export$599d4515591ef232 = (href)=>{
+    const shallow = (0, $b4d0d98857ed9934$export$92a8f8b3c630fa0d)(location);
+    window.next.router.push(href, undefined, {
+        shallow: shallow,
+        scroll: true
+    });
+};
+
+
 
-function $18b830ef84ac138a$export$9fac37a9c21c2f3b(props) {
-    if (!props.market || !props.merchant) {
+function $24b00503eef73528$export$9fac37a9c21c2f3b(props) {
+    const { children: children , navigateFunction: navigateFunction , market: market , merchant: merchant , locale: locale  } = props;
+    const usedLocale = locale ?? (0, $4GYXz$depictaiuilocales.en);
+    const { searchPagePath: searchPagePath , urlParamName: urlParamName , enableCategorySuggestions: enableCategorySuggestions  } = props.search ?? {};
+    if (!market || !merchant) {
         (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).required_state_set_[1](false);
-        return (0, $4GYXz$react.createElement)((0, $4GYXz$react.Fragment), null, props.children);
+        return (0, $4GYXz$react.createElement)((0, $4GYXz$react.Fragment), null, 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)
+    try {
+        const { search: search , category: category  } = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e);
+        const [get_search_page_path, set_search_page_path] = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search_page_path_;
+        set_search_page_path(searchPagePath);
+        const on_navigation = typeof window?.next?.router !== "undefined" || navigateFunction ? (new_href)=>{
+            if (navigateFunction) navigateFunction(new_href);
+            else (0, $bc389476eeb2b615$export$599d4515591ef232)(new_href);
+        } : undefined;
+        if (!search) (0, $4GYXz$solidjs.createRoot)(()=>(0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search = new (0, $4GYXz$depictaiui.DepictSearch)({
+                search_query_url_param_name: urlParamName,
+                market: market,
+                merchant: merchant,
+                enable_category_suggestions: enableCategorySuggestions ?? false,
+                // default category suggestions to false for @depict-ai/react-ui (https://linear.app/depictai/issue/FRO-401/default-enablecategorysuggestions-to-false)
+                localization: usedLocale,
+                url_transformer: (url)=>url.pathname = (0, $4GYXz$solidjs.untrack)(get_search_page_path),
+                on_navigation: on_navigation
+            }));
+        else {
+            search.market = market;
+            search.merchant = merchant;
+            search.localization = usedLocale;
+        }
+        if (!category) (0, $4GYXz$solidjs.createRoot)(()=>(0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).category = new (0, $4GYXz$depictaiui.DepictCategory)({
+                market: market,
+                merchant: merchant,
+                localization: usedLocale,
+                on_navigation: on_navigation
+            }));
+        else {
+            category.market = market;
+            category.merchant = merchant;
+            category.localization = usedLocale;
+        }
+        (0, $6319748b4f0426f0$export$6453cbc34515a94d)((0, $b4d0d98857ed9934$export$92a8f8b3c630fa0d));
+        (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).required_state_set_[1](true);
+    } catch (e) {
+        // Make sure to not break the users app if we throw
+        queueMicrotask(()=>{
+            throw e;
         });
-        (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", {
+const $d96434e62e08087d$export$3f4580d6398c5027 = /*#__PURE__*/ (0, $4GYXz$react.forwardRef)((_, ref)=>{
+    return /*#__PURE__*/ (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
+        style: {
+            height: "100%"
+        },
+        ref: ref
     });
-    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 $7ad7a3d0011b7b1b$export$210723f5a54a7028(props) {
+    return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)($7ad7a3d0011b7b1b$var$SolidSearchPage), props);
 }
-function $a6bedbe4b4d6d027$var$SolidSearchPage(props, set_portals) {
+function $7ad7a3d0011b7b1b$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.");
+    if (!depict_search) throw Error("No depict_search instance when rendering SearchPage. Did you forget to wrap your app in DepictProvider?");
     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));
+        set_search_query_updating_blocked_signal(!(0, $b4d0d98857ed9934$export$775e6b3892b5ad52)(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
@@ -253,41 +300,228 @@ function $a6bedbe4b4d6d027$var$SolidSearchPage(props, set_portals) {
         // 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
-            ];
+        product_card_template: (display, info)=>(0, $b4d0d98857ed9934$export$79c79419c1ef0081)({
+                display: display,
+                info: info,
+                react_template: props.productCard,
+                component_portals: component_portals,
+                set_portals: set_portals
+            })
+    });
+}
+
+
+
+
+
+
+let $5aa5fcb9f8a2bebc$var$render_cb;
+function $5aa5fcb9f8a2bebc$export$d87c61cecb2edf0d(props) {
+    return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)($5aa5fcb9f8a2bebc$var$SolidCategoryPage), props, "div", {}, (props)=>$5aa5fcb9f8a2bebc$var$render_cb?.(props));
+}
+function $5aa5fcb9f8a2bebc$var$SolidCategoryPage(props, set_portals) {
+    const depict_category = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).category;
+    if (!depict_category) throw Error("No depict_category instance when rendering SearchPage. Did you forget to wrap your app in DepictProvider?");
+    const [category_state_set, set_category_state_set] = (0, $4GYXz$solidjs.createSignal)(false);
+    $5aa5fcb9f8a2bebc$var$render_cb = (props)=>{
+        depict_category.category_id = props.categoryId;
+        (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).category_path = location.pathname;
+        if (props.categoryId) set_category_state_set(true);
+    };
+    $5aa5fcb9f8a2bebc$var$render_cb(props);
+    const component_portals = new Set();
+    const category = ()=>(0, $4GYXz$depictaiui.CategoryPage)({
+            depict_category: depict_category,
+            cols_at_size: props.columnsAtSize ?? [
+                [
+                    4
+                ],
+                [
+                    3,
+                    1024
+                ],
+                [
+                    2,
+                    901
+                ]
+            ],
+            grid_spacing: props.gridSpacing ?? "2%",
+            get_product_id: ()=>"",
+            category_title: props.categoryTitlePlugin || (0, $4GYXz$depictaiui.CategoryTitle),
+            show_breadcrumbs: props.showBreadcrumbs === undefined ? true : props.showBreadcrumbs,
+            show_quicklinks: props.showQuicklinks === undefined ? true : props.showQuicklinks,
+            product_card_template: (display, info)=>(0, $b4d0d98857ed9934$export$79c79419c1ef0081)({
+                    display: display,
+                    info: info,
+                    react_template: props.productCard,
+                    component_portals: component_portals,
+                    set_portals: set_portals
+                })
+        });
+    return (0, $b4d0d98857ed9934$export$e5139bbbb9a05035)(category, category_state_set);
+}
+
+
+
+
+
+function $d88e98b11c182b8e$export$5646050d516e06bc() {
+    return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)($d88e98b11c182b8e$var$vanilla_breadcrumbs), {});
+}
+function $d88e98b11c182b8e$var$vanilla_breadcrumbs() {
+    const depict_category = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).category;
+    if (!depict_category) throw Error("No depict_category instance when rendering BreadCrumbs. Did you forget to wrap your app in DepictProvider?");
+    return (0, $4GYXz$depictaiui.BreadCrumbs)({
+        depict_category: depict_category
+    });
+}
+
+
+
+
+
+function $f16af0e861aff3d0$export$466cdc317043f6cb() {
+    return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)($f16af0e861aff3d0$var$vanilla_quick_links), {});
+}
+function $f16af0e861aff3d0$var$vanilla_quick_links() {
+    const depict_category = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).category;
+    if (!depict_category) throw Error("No depict_category instance when rendering QuickLinks. Did you forget to wrap your app in DepictProvider?");
+    return (0, $4GYXz$depictaiui.QuickLinks)({
+        depict_category: depict_category
+    });
+}
+
+
+
+
+const $df522c8a81ed5a01$export$3f37af283f8fb843 = ({ aspectRatio: aspectRatio  })=>{
+    return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)(()=>(0, $4GYXz$depictaiutilishared.ContainedPlaceholderImage)({
+            aspect_ratio: aspectRatio
+        }), {}, "div", {
+        "height": "100%"
+    });
+};
+
+
+
+
+const $7c8b440edc188ad5$export$89c6019e4baa40b1 = ({ width: width , height: height  })=>{
+    return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)(()=>(0, $4GYXz$depictaiutilishared.Placeholder)({
+            width: width,
+            height: height
+        }), {}, "div", {
+        "height": "100%"
+    });
+};
+
+
+
+
+
+
+
+
+const $ef7db890e488d4f4$export$d69d8daa20eae175 = (createOpenModalParams)=>{
+    const { globalState: globalState , location: location , alignerRef: alignerRef  } = createOpenModalParams;
+    const openModal = ()=>{
+        const headerAligner = alignerRef?.current;
+        if (!globalState.search) throw new Error("No active search in the app!");
+        if (!headerAligner && location === "aligned") throw new Error("No active search header aligner on the page!");
+        const alignment_height = headerAligner?.clientHeight;
+        if (location !== "aligned" || isNaN(alignment_height)) {
+            // Open centered modal
+            globalState.search.modal_open = true;
+            return;
         }
+        const style_element = document.createElement("style");
+        document.head.append(style_element);
+        const resize_observer = new ResizeObserver((0, $4GYXz$depictaiutilishared.catchify)(()=>{
+            const styles = (0, $4GYXz$depictaiui.styles_to_valid_css_string)({
+                ".depict.plp .depict-search-modal .query-input": {
+                    "height": `${headerAligner?.clientHeight}px`
+                }
+            });
+            style_element.replaceChildren(styles);
+        }));
+        resize_observer.observe(headerAligner);
+        let dispose_aligner;
+        /**
+     * Setting position to fixed is important to make the modal work with align_field.
+     */ const style_props_ = (0, $4GYXz$solidjs.createSignal)({
+            position: "fixed"
+        });
+        (0, $4GYXz$solidjs.createRoot)((dispose)=>{
+            dispose_aligner = ()=>{
+                resize_observer.disconnect();
+                style_element.remove();
+                dispose();
+            };
+            (0, $4GYXz$depictaiui.align_field)(style_props_, headerAligner, undefined, false, "top");
+        });
+        globalState.search.modal_open = [
+            {
+                style_props_: style_props_
+            },
+            dispose_aligner
+        ];
+    };
+    return openModal;
+};
+
+
+function $3647cad61d03b89c$export$cc1e9aaf280afdcb(params) {
+    const open = (0, $ef7db890e488d4f4$export$d69d8daa20eae175)({
+        globalState: $0b7cd4fb39fc3502$export$8e769ad4338a911e,
+        ...params
     });
+    return {
+        open: open
+    };
 }
 
 
 
 
+
+const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.59";
+
+
+
+
+const $e387bd534de10acd$export$804fac5697cfbe35 = (router)=>(href)=>{
+        const shallow = (0, $b4d0d98857ed9934$export$92a8f8b3c630fa0d)(location);
+        router.push(href, undefined, {
+            shallow: shallow,
+            scroll: true
+        });
+    };
+
+
+/**
+ * Helper function that creates a function that can be used as the
+ * navigateFunction callback for DepictProvider when using react-router.
+ *
+ * React-router expect relative URLs, so this function will strip the
+ * protocol, hostname and port from the URL.
+ *
+ * @param navigateFunction what useNavigate() returns
+ * @returns a function that can be used as the navigateFunction callback for DepictProvider
+ */ const $201a023b63de7d2f$export$d53481656a62aebe = (navigateFunction)=>(href)=>{
+        const url_object = new URL(href);
+        return navigateFunction(url_object.pathname + url_object.search + url_object.hash);
+    };
+
+
+const $b742053c966024b4$export$b8a61e5c71402559 = {
+    nextRouterNavigation: $e387bd534de10acd$export$804fac5697cfbe35,
+    reactRouterNavigation: $201a023b63de7d2f$export$d53481656a62aebe
+};
+
+
+const $b03e4eee8610ebbe$var$package_name = "@depict-ai/react-ui";
+(0, $4GYXz$depictaiutilishared.dlog)($b03e4eee8610ebbe$var$package_name + " version", (0, $db7b67857900028b$export$83d89fbfd8236492));
+(0, $4GYXz$depictaiui.add_to_version_info)({
+    [$b03e4eee8610ebbe$var$package_name]: (0, $db7b67857900028b$export$83d89fbfd8236492)
+});
+
+