@depict-ai/react-ui 0.0.17 → 0.0.18

package/dist/index.d.ts

@@ -1,14 +1,21 @@
 import { PropsWithChildren, ReactNode } from "react";
+import { SDKColsAtSize, SDKGridSpacing } from "@depict-ai/ui";
 import { Display } from "@depict-ai/utilishared";
+export function DepictSearchField(): any;
 interface SearchConfig {
     merchant: string;
     market: string;
     search_page_path: string;
+    url_param_name?: string;
+    enable_category_suggestions?: boolean;
 }
 export function DepictProvider(props: PropsWithChildren<SearchConfig>): PropsWithChildren<SearchConfig>;
 export function DepictSearchHeader(): any;
 export function openModal(): void;
-export interface SearchPageConfig {
-    productCardFactory: (display: Display) => ReactNode;
+interface SearchPageConfig {
+    productCard: (display: Display) => ReactNode;
+    columnsAtSize?: SDKColsAtSize;
+    gridSpacing?: SDKGridSpacing;
+    includeInputField?: boolean;
 }
 export function DepictSearchPage(opts: SearchPageConfig): any;

package/dist/main.js

@@ -1,58 +1,86 @@
-var $1pn1h$reactdom = require("react-dom");
-var $1pn1h$depictaireactsolidbridge = require("@depict-ai/react-solid-bridge");
-var $1pn1h$react = require("react");
-var $1pn1h$depictaiui = require("@depict-ai/ui");
-var $1pn1h$reactjsxruntime = require("react/jsx-runtime");
-var $1pn1h$solidjs = require("solid-js");
-var $1pn1h$depictaiutilishared = require("@depict-ai/utilishared");
+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, "DepictSearchPage", () => $7c7f5a6b750dca70$export$210723f5a54a7028);
+$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 $e589c49931886c97$export$8e769ad4338a911e = {
+const $0b7cd4fb39fc3502$export$8e769ad4338a911e = {
     search: null,
-    header_alignment: null
+    header_alignment: null,
+    search_page_path_: (0, $4GYXz$solidjs.createSignal)(),
+    required_state_set_: (0, $4GYXz$solidjs.createSignal)(false)
 };
 
 
 
 
 
-function $b4d0d98857ed9934$export$5cae361ad82dce8b(value) {
-    const ref = (0, $1pn1h$react.useRef)();
-    (0, $1pn1h$react.useEffect)(()=>{
-        ref.current = value;
-    }, [
-        value
-    ]);
-    return ref.current;
-}
+
 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, $1pn1h$depictaiutilishared.href_change_ipns))$b4d0d98857ed9934$var$run_on_href_change?.(href);
+    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 $80a9072c96ebf849$var$set = false;
-function $80a9072c96ebf849$export$6453cbc34515a94d(is_search_page) {
-    if ($80a9072c96ebf849$var$set) return; // Just being safe
-    $80a9072c96ebf849$var$set = true;
+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)=>{
@@ -61,75 +89,68 @@ function $80a9072c96ebf849$export$6453cbc34515a94d(is_search_page) {
     };
     addEventListener("popstate", (e)=>{
         if (!is_search_page(location)) {
-            $80a9072c96ebf849$var$removeLotsOfPadding(); // Just making sure
+            $6319748b4f0426f0$var$removeLotsOfPadding(); // Just making sure
             return;
         }
         should_use_old_scroll = false;
-        $80a9072c96ebf849$var$addLotsOfPadding();
-        (0, $1pn1h$depictaiutilishared.observer).wait_for_element(".depict.plp .listing-page").then(()=>{
-            $80a9072c96ebf849$var$removeLotsOfPadding();
+        $6319748b4f0426f0$var$addLotsOfPadding();
+        (0, $4GYXz$depictaiutilishared.observer).wait_for_element(".depict.plp .listing-page").then(()=>{
+            $6319748b4f0426f0$var$removeLotsOfPadding();
         });
     });
-    (0, $1pn1h$depictaiutilishared.history_replacer)(()=>{
-        (0, $1pn1h$depictaiutilishared.queueMacroTask)(()=>{
-            $80a9072c96ebf849$var$removeLotsOfPadding();
+    (0, $4GYXz$depictaiutilishared.history_replacer)(()=>{
+        (0, $4GYXz$depictaiutilishared.queueMacroTask)(()=>{
+            $6319748b4f0426f0$var$removeLotsOfPadding();
         });
     }, false);
     window?.next?.router?.events?.on("routeChangeStart", ()=>{
-        $80a9072c96ebf849$var$addLotsOfPadding();
+        $6319748b4f0426f0$var$addLotsOfPadding();
     });
 }
-function $80a9072c96ebf849$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 $80a9072c96ebf849$var$removeLotsOfPadding() {
+function $6319748b4f0426f0$var$removeLotsOfPadding() {
     document.body.style.paddingBottom = "";
 }
 
 
-const $7b6eabbde6829606$export$99ae278b8f3607a0 = (opts)=>{
-    const path = "/search";
-    const param = "q";
-    const is_page_ = (url)=>url.pathname == path;
-    const search = new (0, $1pn1h$depictaiui.DepictSearch)({
-        search_query_url_param_name: param,
-        merchant: opts.merchant,
-        market: opts.market,
-        enable_category_suggestions: false,
-        localization: {
-            ...(0, $1pn1h$depictaiui.swedish_search_translation),
-            price_formatting_: {
-                pre_: "€ ",
-                post_: "",
-                decimal_places_delimiter_: ",",
-                thousands_delimiter_: " ",
-                places_after_comma_: 2
-            }
-        },
-        on_navigation: (new_href)=>{
-            const shallow = is_page_(location);
-            window.next.router.push(new_href, undefined, {
-                shallow: shallow,
-                scroll: true
-            });
-        },
-        url_transformer: (url)=>{
-            url.pathname = path;
-        }
-    });
-    (0, $80a9072c96ebf849$export$6453cbc34515a94d)(is_page_);
-    return search;
-};
+
 
 
 function $18b830ef84ac138a$export$9fac37a9c21c2f3b(props) {
-    const { children: children , search_page_path: search_page_path , ...assignable_options } = props;
-    const { search: search  } = (0, $e589c49931886c97$export$8e769ad4338a911e);
-    if (!search) // Todo: use search_page_path for navigation
-    (0, $e589c49931886c97$export$8e769ad4338a911e).search = (0, $7b6eabbde6829606$export$99ae278b8f3607a0)({
-        ...assignable_options
-    });
-    else Object.assign(search, assignable_options);
+    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: props.url_param_name,
+            ...assignable_options,
+            enable_category_suggestions: false,
+            localization: {
+                ...(0, $4GYXz$depictaiui.swedish_search_translation),
+                price_formatting_: {
+                    pre_: "€ ",
+                    post_: "",
+                    decimal_places_delimiter_: ",",
+                    thousands_delimiter_: " ",
+                    places_after_comma_: 2
+                }
+            },
+            on_navigation: (new_href)=>{
+                const shallow = (0, $b4d0d98857ed9934$export$6cb4d3a5c1ac9b43)(location);
+                window.next.router.push(new_href, undefined, {
+                    shallow: shallow,
+                    scroll: true
+                });
+            },
+            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);
+    if (props.market && props.merchant) (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).required_state_set_[1](true);
     return children;
 }
 
@@ -141,38 +162,38 @@ function $18b830ef84ac138a$export$9fac37a9c21c2f3b(props) {
 
 
 function $20bf907adee775ba$export$cbcd1ecdb41b1d0a() {
-    return (0, $1pn1h$react.createElement)("div", {
+    return (0, $4GYXz$react.createElement)("div", {
         className: "depict aligner",
-        ref: (e)=>(0, $e589c49931886c97$export$8e769ad4338a911e).header_alignment = e
+        ref: (e)=>(0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).header_alignment = e
     });
 }
 let $20bf907adee775ba$var$sheet;
 function $20bf907adee775ba$export$a7f6cffb6b8ba11c() {
-    if (!(0, $e589c49931886c97$export$8e769ad4338a911e).search) {
+    if (!(0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search) {
         console.error("No active search in the app!");
         return;
     }
-    if (!(0, $e589c49931886c97$export$8e769ad4338a911e).header_alignment) {
+    if (!(0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).header_alignment) {
         console.error("No active search header aligner on the page!");
         return;
     }
-    const style_props_ = (0, $1pn1h$solidjs.createSignal)({
+    const style_props_ = (0, $4GYXz$solidjs.createSignal)({
         position: "fixed",
         top: 0
     });
-    if ((0, $e589c49931886c97$export$8e769ad4338a911e).header_alignment?.clientHeight) {
-        let styles = `.depict.plp.in_header .depict-search-modal .query_input { height: ${(0, $e589c49931886c97$export$8e769ad4338a911e).header_alignment?.clientHeight}px; }`;
-        styles += `.depict.plp.in_header .depict-search-modal-backdrop { top: ${(0, $e589c49931886c97$export$8e769ad4338a911e).header_alignment?.clientHeight}px; }`;
+    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, $1pn1h$solidjs.createMemo)(()=>({
+    const class_list_ = (0, $4GYXz$solidjs.createMemo)(()=>({
             in_header: true
         }));
-    (0, $e589c49931886c97$export$8e769ad4338a911e).search.modal_open = [
+    (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search.modal_open = [
         {
             style_props_: style_props_,
             class_list_: class_list_
@@ -181,13 +202,52 @@ function $20bf907adee775ba$export$a7f6cffb6b8ba11c() {
 }
 
 
-let $7c7f5a6b750dca70$var$active_render_card;
-function $7c7f5a6b750dca70$var$DepictSearchPageContent(opts) {
-    const [bridge, setBridge] = (0, $1pn1h$react.useState)(null);
-    const [portals, set_portals] = (0, $1pn1h$react.useState)([]);
-    (0, $1pn1h$react.useEffect)(()=>{
-        const component_portals = new Set((0, $1pn1h$react.ReactPortal));
-        $7c7f5a6b750dca70$var$active_render_card = async (display)=>{
+
+
+
+
+
+
+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)=>{
             const solid_container = document.createElement("div");
             const react_has_rendered = new Promise((r)=>{
                 const m_o = new MutationObserver(()=>{
@@ -198,15 +258,15 @@ function $7c7f5a6b750dca70$var$DepictSearchPageContent(opts) {
                     childList: true
                 });
             });
-            const reactProductCard = (0, $1pn1h$reactjsxruntime.jsx)(opts.productCardFactory, {
+            const reactProductCard = (0, $4GYXz$reactjsxruntime.jsx)(props.productCard, {
                 display: display
             });
-            const portal = $1pn1h$reactdom.createPortal(reactProductCard, solid_container);
+            const portal = $4GYXz$reactdom.createPortal(reactProductCard, solid_container);
             component_portals.add(portal);
             set_portals([
                 ...component_portals
             ]);
-            (0, $1pn1h$solidjs.onCleanup)(()=>{
+            (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([
@@ -217,58 +277,10 @@ function $7c7f5a6b750dca70$var$DepictSearchPageContent(opts) {
             return [
                 solid_container
             ];
-        };
-        if (!(0, $e589c49931886c97$export$8e769ad4338a911e).search) throw Error("No search when rendering SearchPage??");
-        const solidBridge = (0, $1pn1h$reactjsxruntime.jsx)((0, $1pn1h$depictaireactsolidbridge.ReactToSolidBridge), {
-            solidComponent: ()=>{
-                const [el, dispose] = (0, $1pn1h$solidjs.createRoot)((dispose)=>{
-                    (0, $b4d0d98857ed9934$export$74f3924c5027fe1d)((href)=>{
-                        // TODO: Will be user specified
-                        if (!new URL(href).pathname.startsWith("/search")) dispose();
-                    });
-                    const el = (0, $1pn1h$depictaiui.SearchPage)({
-                        depict_search: (0, $e589c49931886c97$export$8e769ad4338a911e).search,
-                        include_input_field: true,
-                        cols_at_size: [
-                            [
-                                4
-                            ],
-                            [
-                                3,
-                                1024
-                            ],
-                            [
-                                2,
-                                901
-                            ]
-                        ],
-                        grid_spacing: "10px",
-                        product_card_template: (...args)=>$7c7f5a6b750dca70$var$active_render_card(...args),
-                        // function might not exist yet,
-                        get_product_id: ()=>""
-                    });
-                    return [
-                        el,
-                        dispose
-                    ];
-                });
-                (0, $1pn1h$solidjs.onCleanup)(dispose);
-                return el;
-            },
-            key: Math.random()
-        });
-        setBridge(solidBridge);
-    }, []);
-    console.log("Searchpage render", bridge, portals.length);
-    return bridge ? (0, $1pn1h$react.createElement)("div", {}, [
-        bridge,
-        ...portals
-    ]) : "";
-}
-function $7c7f5a6b750dca70$export$210723f5a54a7028(opts) {
-    return (0, $1pn1h$reactjsxruntime.jsx)((0, $1pn1h$depictaireactsolidbridge.ReactToSolidBridgeProvider), {
-        children: (0, $1pn1h$reactjsxruntime.jsx)($7c7f5a6b750dca70$var$DepictSearchPageContent, opts)
+        }
     });
 }
 
 
+
+

package/dist/module.js

@@ -1,50 +1,77 @@
-import {createPortal as $9xHCU$createPortal} from "react-dom";
-import {ReactToSolidBridge as $9xHCU$ReactToSolidBridge, ReactToSolidBridgeProvider as $9xHCU$ReactToSolidBridgeProvider} from "@depict-ai/react-solid-bridge";
-import {useState as $9xHCU$useState, useEffect as $9xHCU$useEffect, ReactPortal as $9xHCU$ReactPortal, createElement as $9xHCU$createElement, useRef as $9xHCU$useRef} from "react";
-import {SearchPage as $9xHCU$SearchPage, DepictSearch as $9xHCU$DepictSearch, swedish_search_translation as $9xHCU$swedish_search_translation} from "@depict-ai/ui";
-import {jsx as $9xHCU$jsx} from "react/jsx-runtime";
-import {onCleanup as $9xHCU$onCleanup, createRoot as $9xHCU$createRoot, createSignal as $9xHCU$createSignal, createMemo as $9xHCU$createMemo} from "solid-js";
-import {href_change_ipns as $9xHCU$href_change_ipns, observer as $9xHCU$observer, history_replacer as $9xHCU$history_replacer, queueMacroTask as $9xHCU$queueMacroTask} from "@depict-ai/utilishared";
+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} 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 $9ce874af9a04465f$export$8e769ad4338a911e = {
+const $42858f023ef23dab$export$8e769ad4338a911e = {
     search: null,
-    header_alignment: null
+    header_alignment: null,
+    search_page_path_: (0, $TZSbU$createSignal)(),
+    required_state_set_: (0, $TZSbU$createSignal)(false)
 };
 
 
 
 
 
-function $c83ba9ab79386687$export$5cae361ad82dce8b(value) {
-    const ref = (0, $9xHCU$useRef)();
-    (0, $9xHCU$useEffect)(()=>{
-        ref.current = value;
-    }, [
-        value
-    ]);
-    return ref.current;
-}
+
 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, $9xHCU$href_change_ipns))$c83ba9ab79386687$var$run_on_href_change?.(href);
+    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 $01e7216f8f859389$var$set = false;
-function $01e7216f8f859389$export$6453cbc34515a94d(is_search_page) {
-    if ($01e7216f8f859389$var$set) return; // Just being safe
-    $01e7216f8f859389$var$set = true;
+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)=>{
@@ -53,75 +80,68 @@ function $01e7216f8f859389$export$6453cbc34515a94d(is_search_page) {
     };
     addEventListener("popstate", (e)=>{
         if (!is_search_page(location)) {
-            $01e7216f8f859389$var$removeLotsOfPadding(); // Just making sure
+            $8071251ee4e9ffa1$var$removeLotsOfPadding(); // Just making sure
             return;
         }
         should_use_old_scroll = false;
-        $01e7216f8f859389$var$addLotsOfPadding();
-        (0, $9xHCU$observer).wait_for_element(".depict.plp .listing-page").then(()=>{
-            $01e7216f8f859389$var$removeLotsOfPadding();
+        $8071251ee4e9ffa1$var$addLotsOfPadding();
+        (0, $TZSbU$observer).wait_for_element(".depict.plp .listing-page").then(()=>{
+            $8071251ee4e9ffa1$var$removeLotsOfPadding();
         });
     });
-    (0, $9xHCU$history_replacer)(()=>{
-        (0, $9xHCU$queueMacroTask)(()=>{
-            $01e7216f8f859389$var$removeLotsOfPadding();
+    (0, $TZSbU$history_replacer)(()=>{
+        (0, $TZSbU$queueMacroTask)(()=>{
+            $8071251ee4e9ffa1$var$removeLotsOfPadding();
         });
     }, false);
     window?.next?.router?.events?.on("routeChangeStart", ()=>{
-        $01e7216f8f859389$var$addLotsOfPadding();
+        $8071251ee4e9ffa1$var$addLotsOfPadding();
     });
 }
-function $01e7216f8f859389$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 $01e7216f8f859389$var$removeLotsOfPadding() {
+function $8071251ee4e9ffa1$var$removeLotsOfPadding() {
     document.body.style.paddingBottom = "";
 }
 
 
-const $cd2077d7481df27e$export$99ae278b8f3607a0 = (opts)=>{
-    const path = "/search";
-    const param = "q";
-    const is_page_ = (url)=>url.pathname == path;
-    const search = new (0, $9xHCU$DepictSearch)({
-        search_query_url_param_name: param,
-        merchant: opts.merchant,
-        market: opts.market,
-        enable_category_suggestions: false,
-        localization: {
-            ...(0, $9xHCU$swedish_search_translation),
-            price_formatting_: {
-                pre_: "€ ",
-                post_: "",
-                decimal_places_delimiter_: ",",
-                thousands_delimiter_: " ",
-                places_after_comma_: 2
-            }
-        },
-        on_navigation: (new_href)=>{
-            const shallow = is_page_(location);
-            window.next.router.push(new_href, undefined, {
-                shallow: shallow,
-                scroll: true
-            });
-        },
-        url_transformer: (url)=>{
-            url.pathname = path;
-        }
-    });
-    (0, $01e7216f8f859389$export$6453cbc34515a94d)(is_page_);
-    return search;
-};
+
 
 
 function $faf794495ff8b304$export$9fac37a9c21c2f3b(props) {
-    const { children: children , search_page_path: search_page_path , ...assignable_options } = props;
-    const { search: search  } = (0, $9ce874af9a04465f$export$8e769ad4338a911e);
-    if (!search) // Todo: use search_page_path for navigation
-    (0, $9ce874af9a04465f$export$8e769ad4338a911e).search = (0, $cd2077d7481df27e$export$99ae278b8f3607a0)({
-        ...assignable_options
-    });
-    else Object.assign(search, assignable_options);
+    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: props.url_param_name,
+            ...assignable_options,
+            enable_category_suggestions: false,
+            localization: {
+                ...(0, $TZSbU$swedish_search_translation),
+                price_formatting_: {
+                    pre_: "€ ",
+                    post_: "",
+                    decimal_places_delimiter_: ",",
+                    thousands_delimiter_: " ",
+                    places_after_comma_: 2
+                }
+            },
+            on_navigation: (new_href)=>{
+                const shallow = (0, $c83ba9ab79386687$export$6cb4d3a5c1ac9b43)(location);
+                window.next.router.push(new_href, undefined, {
+                    shallow: shallow,
+                    scroll: true
+                });
+            },
+            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);
+    if (props.market && props.merchant) (0, $42858f023ef23dab$export$8e769ad4338a911e).required_state_set_[1](true);
     return children;
 }
 
@@ -133,38 +153,38 @@ function $faf794495ff8b304$export$9fac37a9c21c2f3b(props) {
 
 
 function $f41a371216eff80b$export$cbcd1ecdb41b1d0a() {
-    return (0, $9xHCU$createElement)("div", {
+    return (0, $TZSbU$createElement)("div", {
         className: "depict aligner",
-        ref: (e)=>(0, $9ce874af9a04465f$export$8e769ad4338a911e).header_alignment = e
+        ref: (e)=>(0, $42858f023ef23dab$export$8e769ad4338a911e).header_alignment = e
     });
 }
 let $f41a371216eff80b$var$sheet;
 function $f41a371216eff80b$export$a7f6cffb6b8ba11c() {
-    if (!(0, $9ce874af9a04465f$export$8e769ad4338a911e).search) {
+    if (!(0, $42858f023ef23dab$export$8e769ad4338a911e).search) {
         console.error("No active search in the app!");
         return;
     }
-    if (!(0, $9ce874af9a04465f$export$8e769ad4338a911e).header_alignment) {
+    if (!(0, $42858f023ef23dab$export$8e769ad4338a911e).header_alignment) {
         console.error("No active search header aligner on the page!");
         return;
     }
-    const style_props_ = (0, $9xHCU$createSignal)({
+    const style_props_ = (0, $TZSbU$createSignal)({
         position: "fixed",
         top: 0
     });
-    if ((0, $9ce874af9a04465f$export$8e769ad4338a911e).header_alignment?.clientHeight) {
-        let styles = `.depict.plp.in_header .depict-search-modal .query_input { height: ${(0, $9ce874af9a04465f$export$8e769ad4338a911e).header_alignment?.clientHeight}px; }`;
-        styles += `.depict.plp.in_header .depict-search-modal-backdrop { top: ${(0, $9ce874af9a04465f$export$8e769ad4338a911e).header_alignment?.clientHeight}px; }`;
+    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, $9xHCU$createMemo)(()=>({
+    const class_list_ = (0, $TZSbU$createMemo)(()=>({
             in_header: true
         }));
-    (0, $9ce874af9a04465f$export$8e769ad4338a911e).search.modal_open = [
+    (0, $42858f023ef23dab$export$8e769ad4338a911e).search.modal_open = [
         {
             style_props_: style_props_,
             class_list_: class_list_
@@ -173,13 +193,52 @@ function $f41a371216eff80b$export$a7f6cffb6b8ba11c() {
 }
 
 
-let $a854d2a2f2059f57$var$active_render_card;
-function $a854d2a2f2059f57$var$DepictSearchPageContent(opts) {
-    const [bridge, setBridge] = (0, $9xHCU$useState)(null);
-    const [portals, set_portals] = (0, $9xHCU$useState)([]);
-    (0, $9xHCU$useEffect)(()=>{
-        const component_portals = new Set((0, $9xHCU$ReactPortal));
-        $a854d2a2f2059f57$var$active_render_card = async (display)=>{
+
+
+
+
+
+
+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)=>{
             const solid_container = document.createElement("div");
             const react_has_rendered = new Promise((r)=>{
                 const m_o = new MutationObserver(()=>{
@@ -190,15 +249,15 @@ function $a854d2a2f2059f57$var$DepictSearchPageContent(opts) {
                     childList: true
                 });
             });
-            const reactProductCard = (0, $9xHCU$jsx)(opts.productCardFactory, {
+            const reactProductCard = (0, $TZSbU$jsx)(props.productCard, {
                 display: display
             });
-            const portal = $9xHCU$createPortal(reactProductCard, solid_container);
+            const portal = $TZSbU$createPortal(reactProductCard, solid_container);
             component_portals.add(portal);
             set_portals([
                 ...component_portals
             ]);
-            (0, $9xHCU$onCleanup)(()=>{
+            (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([
@@ -209,59 +268,11 @@ function $a854d2a2f2059f57$var$DepictSearchPageContent(opts) {
             return [
                 solid_container
             ];
-        };
-        if (!(0, $9ce874af9a04465f$export$8e769ad4338a911e).search) throw Error("No search when rendering SearchPage??");
-        const solidBridge = (0, $9xHCU$jsx)((0, $9xHCU$ReactToSolidBridge), {
-            solidComponent: ()=>{
-                const [el, dispose] = (0, $9xHCU$createRoot)((dispose)=>{
-                    (0, $c83ba9ab79386687$export$74f3924c5027fe1d)((href)=>{
-                        // TODO: Will be user specified
-                        if (!new URL(href).pathname.startsWith("/search")) dispose();
-                    });
-                    const el = (0, $9xHCU$SearchPage)({
-                        depict_search: (0, $9ce874af9a04465f$export$8e769ad4338a911e).search,
-                        include_input_field: true,
-                        cols_at_size: [
-                            [
-                                4
-                            ],
-                            [
-                                3,
-                                1024
-                            ],
-                            [
-                                2,
-                                901
-                            ]
-                        ],
-                        grid_spacing: "10px",
-                        product_card_template: (...args)=>$a854d2a2f2059f57$var$active_render_card(...args),
-                        // function might not exist yet,
-                        get_product_id: ()=>""
-                    });
-                    return [
-                        el,
-                        dispose
-                    ];
-                });
-                (0, $9xHCU$onCleanup)(dispose);
-                return el;
-            },
-            key: Math.random()
-        });
-        setBridge(solidBridge);
-    }, []);
-    console.log("Searchpage render", bridge, portals.length);
-    return bridge ? (0, $9xHCU$createElement)("div", {}, [
-        bridge,
-        ...portals
-    ]) : "";
-}
-function $a854d2a2f2059f57$export$210723f5a54a7028(opts) {
-    return (0, $9xHCU$jsx)((0, $9xHCU$ReactToSolidBridgeProvider), {
-        children: (0, $9xHCU$jsx)($a854d2a2f2059f57$var$DepictSearchPageContent, opts)
+        }
     });
 }
 
 
-export {$a854d2a2f2059f57$export$210723f5a54a7028 as DepictSearchPage, $faf794495ff8b304$export$9fac37a9c21c2f3b as DepictProvider, $f41a371216eff80b$export$a7f6cffb6b8ba11c as openModal, $f41a371216eff80b$export$cbcd1ecdb41b1d0a as DepictSearchHeader};
+
+
+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};

package/dist-server/index.d.ts

@@ -1,4 +1,5 @@
 export function DepictProvider(props: any): any;
+export function DepictSearchField(): any;
 export function DepictSearchPage(): any;
 export function DepictSearchHeader(): any;
 export function openModal(): void;

package/dist-server/main.js

@@ -1,31 +1,35 @@
-var $hWQ57$depictaireactsolidbridge = require("@depict-ai/react-solid-bridge");
-var $hWQ57$react = require("react");
-var $hWQ57$reactjsxruntime = require("react/jsx-runtime");
+var $5efvh$react = require("react");
+var $5efvh$reactjsxruntime = require("react/jsx-runtime");
 
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
 
-$parcel$export(module.exports, "DepictProvider", () => $4649fffc467a9b4d$export$9fac37a9c21c2f3b);
-$parcel$export(module.exports, "DepictSearchPage", () => $4649fffc467a9b4d$export$210723f5a54a7028);
-$parcel$export(module.exports, "DepictSearchHeader", () => $4649fffc467a9b4d$export$cbcd1ecdb41b1d0a);
-$parcel$export(module.exports, "openModal", () => $4649fffc467a9b4d$export$a7f6cffb6b8ba11c);
+$parcel$export(module.exports, "DepictProvider", () => $41e7e5d85b5e0d49$export$9fac37a9c21c2f3b);
+$parcel$export(module.exports, "DepictSearchField", () => $41e7e5d85b5e0d49$export$4c0fa313cf50c4ad);
+$parcel$export(module.exports, "DepictSearchPage", () => $41e7e5d85b5e0d49$export$210723f5a54a7028);
+$parcel$export(module.exports, "DepictSearchHeader", () => $41e7e5d85b5e0d49$export$cbcd1ecdb41b1d0a);
+$parcel$export(module.exports, "openModal", () => $41e7e5d85b5e0d49$export$a7f6cffb6b8ba11c);
 
 
-
-function $4649fffc467a9b4d$export$9fac37a9c21c2f3b(props) {
+function $41e7e5d85b5e0d49$export$9fac37a9c21c2f3b(props) {
     return props.children;
 }
-function $4649fffc467a9b4d$export$210723f5a54a7028() {
-    return (0, $hWQ57$reactjsxruntime.jsx)((0, $hWQ57$depictaireactsolidbridge.ReactToSolidBridgeProvider), {
-        children: ""
+function $41e7e5d85b5e0d49$export$4c0fa313cf50c4ad() {
+    return (0, $5efvh$reactjsxruntime.jsx)("div", {
+        children: []
+    });
+}
+function $41e7e5d85b5e0d49$export$210723f5a54a7028() {
+    return (0, $5efvh$reactjsxruntime.jsx)("div", {
+        children: []
     });
 }
-function $4649fffc467a9b4d$export$cbcd1ecdb41b1d0a() {
-    return (0, $hWQ57$react.createElement)("div", {
+function $41e7e5d85b5e0d49$export$cbcd1ecdb41b1d0a() {
+    return (0, $5efvh$react.createElement)("div", {
         className: "depict aligner"
     });
 }
-function $4649fffc467a9b4d$export$a7f6cffb6b8ba11c() {}
+function $41e7e5d85b5e0d49$export$a7f6cffb6b8ba11c() {}
 
 

package/dist-server/module.js

@@ -1,24 +1,27 @@
-import {ReactToSolidBridgeProvider as $guob4$ReactToSolidBridgeProvider} from "@depict-ai/react-solid-bridge";
-import {createElement as $guob4$createElement} from "react";
-import {jsx as $guob4$jsx} from "react/jsx-runtime";
+import {createElement as $1RlIW$createElement} from "react";
+import {jsx as $1RlIW$jsx} from "react/jsx-runtime";
 
 
 
-
-function $ca6cbc388a0afba3$export$9fac37a9c21c2f3b(props) {
+function $2b1fdeb83610500f$export$9fac37a9c21c2f3b(props) {
     return props.children;
 }
-function $ca6cbc388a0afba3$export$210723f5a54a7028() {
-    return (0, $guob4$jsx)((0, $guob4$ReactToSolidBridgeProvider), {
-        children: ""
+function $2b1fdeb83610500f$export$4c0fa313cf50c4ad() {
+    return (0, $1RlIW$jsx)("div", {
+        children: []
+    });
+}
+function $2b1fdeb83610500f$export$210723f5a54a7028() {
+    return (0, $1RlIW$jsx)("div", {
+        children: []
     });
 }
-function $ca6cbc388a0afba3$export$cbcd1ecdb41b1d0a() {
-    return (0, $guob4$createElement)("div", {
+function $2b1fdeb83610500f$export$cbcd1ecdb41b1d0a() {
+    return (0, $1RlIW$createElement)("div", {
         className: "depict aligner"
     });
 }
-function $ca6cbc388a0afba3$export$a7f6cffb6b8ba11c() {}
+function $2b1fdeb83610500f$export$a7f6cffb6b8ba11c() {}
 
 
-export {$ca6cbc388a0afba3$export$9fac37a9c21c2f3b as DepictProvider, $ca6cbc388a0afba3$export$210723f5a54a7028 as DepictSearchPage, $ca6cbc388a0afba3$export$cbcd1ecdb41b1d0a as DepictSearchHeader, $ca6cbc388a0afba3$export$a7f6cffb6b8ba11c as openModal};
+export {$2b1fdeb83610500f$export$9fac37a9c21c2f3b as DepictProvider, $2b1fdeb83610500f$export$4c0fa313cf50c4ad as DepictSearchField, $2b1fdeb83610500f$export$210723f5a54a7028 as DepictSearchPage, $2b1fdeb83610500f$export$cbcd1ecdb41b1d0a as DepictSearchHeader, $2b1fdeb83610500f$export$a7f6cffb6b8ba11c as openModal};

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@depict-ai/react-ui",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "packageManager": "yarn@3.2.2",
-  "source": "src/main.ts",
+  "source": "src/index.ts",
   "main": "dist/main.js",
   "module": "dist/module.js",
   "types": "dist/index.d.ts",
@@ -10,7 +10,7 @@
   "scripts": {
     "clear-dist": "rm -r -f ./dist",
     "build": "yarn build-server && parcel build --no-source-maps && cp -a src/styles/plp-styling/. dist/styles/",
-    "build-server": "yarn clear-dist && parcel build --no-source-maps ./src-server/main.ts && cp -r ./dist/ ./dist-server && yarn clear-dist",
+    "build-server": "yarn clear-dist && parcel build --no-source-maps ./src-server/index.ts && cp -r ./dist/ ./dist-server && yarn clear-dist",
     "print-included-package-files": "yarn pack --dry-run",
     "typecheck": "yarn g:tsc --build tsconfig.json"
   },
@@ -78,9 +78,8 @@
     "/dist-server"
   ],
   "dependencies": {
-    "@depict-ai/react-solid-bridge": "^1.0.26",
-    "@depict-ai/ui": "^0.0.3",
-    "@depict-ai/utilishared": "^0.0.3",
+    "@depict-ai/ui": "^0.0.5",
+    "@depict-ai/utilishared": "^0.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "solid-js": "^1.6.2"

package/dist/styles/components/dummy.scss

@@ -1 +0,0 @@
-body {height: 100%;}