@depict-ai/react-ui 0.0.56 → 0.0.59

package/dist/index.d.ts

@@ -2,8 +2,9 @@ import { SDKColsAtSize, SDKGridSpacing } from "@depict-ai/ui/dist";
 import { Display } from "../../../lib/displays/Display";
 import React, { ReactNode, PropsWithChildren } from "react";
 import { Locale } from "@depict-ai/ui/locales";
-import { DisplayWithVariants } from "@depict-ai/utilishared";
-interface PLPPageConfig<T extends Display> {
+import { Display as _Display1 } from "@depict-ai/utilishared";
+import { CategoryPage } from "@depict-ai/ui";
+interface PLPConfig<T extends Display> {
     /**
      * The product card to use for rendering products.
      */
@@ -21,7 +22,7 @@ interface PLPPageConfig<T extends Display> {
      * The spacing between products.
      * @default "2%"
      * @example
-     * "2%", "10px", "1rem"
+     * "2%", "10px", "1rem", {horizontal: "1%", vertical: "5px"}
      */
     gridSpacing?: SDKGridSpacing;
 }
@@ -144,21 +145,33 @@ export function DepictProvider(props: PropsWithChildren<DepictConfig>): import("
     children?: import("react").ReactNode;
 }>;
 /**
- * A search header alignment component,
- * which should be placed in the header of the page and
- * will be used to align the search modal input.
+ * A component used to align other Depict components on.
+ * @example
+ * Align the search modal
+ * ```tsx
+ * import React from "react";
+ * import { DepictAligner, useDepictSearchModal } from "@depict-ai/react-ui";
+ *
+ * const App = () => {
+ *   const ref = React.createRef();
+ *
+ *   const { open } = useDepictSearchModal({
+ *     location: "aligned",
+ *     alignerRef: ref,
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       <DepictAligner ref={ref} />
+ *       <button onClick={open}>Open</button>
+ *     </div>
+ *   );
+ * };
+ * ```
  * @returns {JSX.Element}
  */
-export function DepictSearchHeader(): import("react").DetailedReactHTMLElement<{
-    className: string;
-    ref: (e: HTMLElement | null) => HTMLElement | null;
-}, HTMLElement>;
-/**
- * Opens the search modal.
- * @returns {void}
- */
-export function openModal(): void;
-interface SearchPageConfig<T extends DisplayWithVariants> extends PLPPageConfig<T> {
+export const DepictAligner: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
+interface SearchPageConfig<T extends _Display1> extends PLPConfig<T> {
     /**
      * Whether to show the search input field in the search page.
      * @default true
@@ -205,14 +218,32 @@ interface SearchPageConfig<T extends DisplayWithVariants> extends PLPPageConfig<
  *
  * ```
  */
-export function DepictSearchPage<T extends DisplayWithVariants>(props: SearchPageConfig<T>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-interface CategoryPageConfig<T extends DisplayWithVariants> extends PLPPageConfig<T> {
+export function DepictSearchPage<T extends _Display1>(props: SearchPageConfig<T>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface CategoryPageConfig<T extends _Display1> extends PLPConfig<T> {
     /**
      * The category id to show.
      */
     categoryId: string;
+    /**
+     * Whether to show the breadcrumbs in the category page.
+     * @default true
+     */
     showBreadcrumbs?: boolean;
+    /**
+     * Whether to show the quicklinks in the category page.
+     * @default true
+     */
     showQuicklinks?: boolean;
+    /**
+     * categoryTitlePlugin is an optional plugin that can be used to customize the title of the category page.
+     * @default CategoryTitle
+     *
+     * @example
+     * ```tsx
+     * <DepictCategoryPage categoryId="jeans" productCard={MyCustomCategoryProductCard}  categoryTitlePlugin={CategoryTitle} />
+     * ```
+     */
+    categoryTitlePlugin?: Parameters<typeof CategoryPage>[0]["category_title"];
 }
 /**
  * DepictCategoryPage is a component that renders a category page.
@@ -228,7 +259,7 @@ interface CategoryPageConfig<T extends DisplayWithVariants> extends PLPPageConfi
  *
  * interface MyCustomDisplay extends Display {}
  *
- * export const MyCustomSearchProductCard: DepictProductCard<MyCustomDisplay> = ({
+ * export const MyCustomCategoryProductCard: DepictProductCard<MyCustomDisplay> = ({
  *   display,
  * }) => {
  *   if (!display) {
@@ -253,7 +284,15 @@ interface CategoryPageConfig<T extends DisplayWithVariants> extends PLPPageConfi
  * }
  * ```
  */
-export function DepictCategoryPage<T extends DisplayWithVariants>(props: CategoryPageConfig<T>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export function DepictCategoryPage<T extends _Display1>(props: CategoryPageConfig<T>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+/**
+ * BreadCrumbs is the "trail" in the header of a category page.
+ */
+export function BreadCrumbs(): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+/**
+ * QuickLinks is a component enabling the user to go sideways and downwards in the category tree.
+ */
+export function QuickLinks(): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 /**
  * Props for the ImagePlaceholder component.
  */
@@ -284,7 +323,76 @@ interface TextPlaceholderProps {
 }
 /** A placeholder text that can be used in place of a text that is loading. */
 export const TextPlaceholder: React.FC<TextPlaceholderProps>;
-export const version = "0.0.56";
+/**
+ * Parameters to configure the search modal.
+ */
+interface UseSearchModalParams {
+    /**
+     * How the modal should be opened.
+     * - "centered" - The modal will be opened in the center of the screen.
+     * - "aligned" - The modal will be opened aligned to the alignerRef element.
+     */
+    location: ModalLocation;
+    /**
+     * The ref to the element that the modal should be aligned to.
+     * This is only used when location is "aligned".
+     * @default undefined
+     * @example
+     * ```tsx
+        import React from "react";
+        import { DepictAligner, useDepictSearchModal } from "@depict-ai/react-ui";
+  
+        const App = () => {
+          const ref = React.createRef();
+  
+          const { open } = useDepictSearchModal({
+            location: "aligned",
+            headerAlignerRef: ref,
+          });
+  
+          return (
+            <div>
+              <DepictAligner ref={ref} />
+              <button onClick={open}>Open</button>
+            </div>
+          );
+        };
+     * ```
+     */
+    alignerRef?: React.RefObject<HTMLElement>;
+}
+type OpenModal = () => void;
+/**
+ * How the modal should be opened.
+ */
+type ModalLocation = "centered" | "aligned";
+interface UseSearchModalReturn {
+    open: OpenModal;
+}
+/**
+ * Hook used to open the search modal.
+ * @example
+ * Open a centered modal:
+ * ```tsx
+ * import React from "react";
+ * import { useDepictSearchModal } from "@depict-ai/react-ui";
+ *
+ * const App = () => {
+ *   const { open } = useDepictSearchModal({
+ *     location: "centered",
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={open}>Open</button>
+ *     </div>
+ *   );
+ * };
+ * ```
+ * @returns {JSX.Element}
+ */
+export function useDepictSearchModal(params: UseSearchModalParams): UseSearchModalReturn;
+export const version = "0.0.59";
 /**
  * Helper function to navigate to a new page depending on the navigation library used.
  */
@@ -292,4 +400,5 @@ export const Navigation: {
     nextRouterNavigation: (router: import("next/router").NextRouter) => (href: string) => void;
     reactRouterNavigation: (navigateFunction: import("react-router").NavigateFunction) => (href: string) => void;
 };
+export { CategoryTitle, embedded_num_products as EmbeddedNumProducts } from "@depict-ai/ui";
 export type { Locale } from "@depict-ai/ui";

package/dist/main.js

@@ -11,14 +11,18 @@ 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);
-$parcel$export(module.exports, "DepictCategoryPage", () => $a7b03ed69305c219$export$d87c61cecb2edf0d);
-$parcel$export(module.exports, "ImagePlaceholder", () => $308b2c6db21be2eb$export$3f37af283f8fb843);
-$parcel$export(module.exports, "TextPlaceholder", () => $afce04c26b0c4208$export$89c6019e4baa40b1);
+$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
@@ -29,7 +33,7 @@ $parcel$export(module.exports, "Navigation", () => $b742053c966024b4$export$b8a6
 const $0b7cd4fb39fc3502$export$8e769ad4338a911e = {
     search: null,
     category: null,
-    header_alignment: null,
+    category_path: null,
     search_page_path_: (0, $4GYXz$solidjs.createSignal)(),
     required_state_set_: (0, $4GYXz$solidjs.createSignal)(false)
 };
@@ -47,8 +51,11 @@ 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, wrapper_type = "div", wrapper_style = {}, render_cb) {
+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 wrapper_element_ref = (0, $4GYXz$react.useRef)();
     (0, $4GYXz$react.useEffect)(()=>{
@@ -56,17 +63,17 @@ function $b4d0d98857ed9934$export$f6e64e17bd69eeef(solid_component, props, wrapp
         const dispose = (0, $4GYXz$solidjsweb.render)(()=>solid_component(props, set_portals), wrapper_element);
         return dispose;
     }, []);
-    render_cb?.(props);
+    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);
@@ -110,7 +117,7 @@ async function $b4d0d98857ed9934$export$79c79419c1ef0081({ display: display , in
 
 
 
-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
         })), {});
@@ -174,9 +181,8 @@ function $6319748b4f0426f0$var$removeLotsOfPadding() {
 
 
 
-
 const $bc389476eeb2b615$export$599d4515591ef232 = (href)=>{
-    const shallow = (0, $b4d0d98857ed9934$export$6cb4d3a5c1ac9b43)(location);
+    const shallow = (0, $b4d0d98857ed9934$export$92a8f8b3c630fa0d)(location);
     window.next.router.push(href, undefined, {
         shallow: shallow,
         scroll: true
@@ -184,7 +190,8 @@ const $bc389476eeb2b615$export$599d4515591ef232 = (href)=>{
 };
 
 
-function $18b830ef84ac138a$export$9fac37a9c21c2f3b(props) {
+
+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 ?? {};
@@ -200,8 +207,7 @@ function $18b830ef84ac138a$export$9fac37a9c21c2f3b(props) {
             if (navigateFunction) navigateFunction(new_href);
             else (0, $bc389476eeb2b615$export$599d4515591ef232)(new_href);
         } : undefined;
-        if (!search) {
-            (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search = new (0, $4GYXz$depictaiui.DepictSearch)({
+        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,
@@ -210,24 +216,24 @@ function $18b830ef84ac138a$export$9fac37a9c21c2f3b(props) {
                 localization: usedLocale,
                 url_transformer: (url)=>url.pathname = (0, $4GYXz$solidjs.untrack)(get_search_page_path),
                 on_navigation: on_navigation
-            });
-            (0, $6319748b4f0426f0$export$6453cbc34515a94d)((0, $b4d0d98857ed9934$export$6cb4d3a5c1ac9b43));
-        } else {
+            }));
+        else {
             search.market = market;
             search.merchant = merchant;
             search.localization = usedLocale;
         }
-        if (!category) (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).category = new (0, $4GYXz$depictaiui.DepictCategory)({
-            market: market,
-            merchant: merchant,
-            localization: usedLocale,
-            on_navigation: on_navigation
-        });
+        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
@@ -239,42 +245,33 @@ function $18b830ef84ac138a$export$9fac37a9c21c2f3b(props) {
 }
 
 
-// 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
+        style: {
+            height: "100%"
+        },
+        ref: ref
     });
-}
-let $20bf907adee775ba$var$sheet;
-function $20bf907adee775ba$export$a7f6cffb6b8ba11c() {
-    if (!(0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search) {
-        console.error("No active search in the app!");
-        return;
-    }
-    (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search.modal_open = true;
-}
+});
 
 
 
 
 
 
-function $a6bedbe4b4d6d027$export$210723f5a54a7028(props) {
-    return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)($a6bedbe4b4d6d027$var$SolidSearchPage), props);
+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. 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
@@ -317,51 +314,87 @@ function $a6bedbe4b4d6d027$var$SolidSearchPage(props, set_portals) {
 
 
 
-let $a7b03ed69305c219$var$render_cb;
-function $a7b03ed69305c219$export$d87c61cecb2edf0d(props) {
-    return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)($a7b03ed69305c219$var$SolidCategoryPage), props, "div", {}, (props)=>$a7b03ed69305c219$var$render_cb?.(props));
+
+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 $a7b03ed69305c219$var$SolidCategoryPage(props, set_portals) {
+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?");
-    $a7b03ed69305c219$var$render_cb = (props)=>depict_category.category_id = props.categoryId;
-    $a7b03ed69305c219$var$render_cb(props);
+    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();
-    return (0, $4GYXz$depictaiui.CategoryPage)({
-        depict_category: depict_category,
-        cols_at_size: props.columnsAtSize ?? [
-            [
-                4
+    const category = ()=>(0, $4GYXz$depictaiui.CategoryPage)({
+            depict_category: depict_category,
+            cols_at_size: props.columnsAtSize ?? [
+                [
+                    4
+                ],
+                [
+                    3,
+                    1024
+                ],
+                [
+                    2,
+                    901
+                ]
             ],
-            [
-                3,
-                1024
-            ],
-            [
-                2,
-                901
-            ]
-        ],
-        grid_spacing: props.gridSpacing ?? "2%",
-        // Todo: Do we need this?
-        get_product_id: ()=>"",
-        category_title: (0, $4GYXz$depictaiui.embedded_num_products),
-        show_breadcrumbs: props.showBreadcrumbs || false,
-        show_quicklinks: props.showQuicklinks || false,
-        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
-            })
+            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 $308b2c6db21be2eb$export$3f37af283f8fb843 = ({ aspectRatio: aspectRatio  })=>{
+const $df522c8a81ed5a01$export$3f37af283f8fb843 = ({ aspectRatio: aspectRatio  })=>{
     return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)(()=>(0, $4GYXz$depictaiutilishared.ContainedPlaceholderImage)({
             aspect_ratio: aspectRatio
         }), {}, "div", {
@@ -372,7 +405,7 @@ const $308b2c6db21be2eb$export$3f37af283f8fb843 = ({ aspectRatio: aspectRatio  }
 
 
 
-const $afce04c26b0c4208$export$89c6019e4baa40b1 = ({ width: width , height: height  })=>{
+const $7c8b440edc188ad5$export$89c6019e4baa40b1 = ({ width: width , height: height  })=>{
     return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)(()=>(0, $4GYXz$depictaiutilishared.Placeholder)({
             width: width,
             height: height
@@ -382,13 +415,81 @@ const $afce04c26b0c4208$export$89c6019e4baa40b1 = ({ width: width , height: heig
 };
 
 
-const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.56";
+
+
+
+
+
+
+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$6cb4d3a5c1ac9b43)(location);
+        const shallow = (0, $b4d0d98857ed9934$export$92a8f8b3c630fa0d)(location);
         router.push(href, undefined, {
             shallow: shallow,
             scroll: true