@depict-ai/react-ui 1.5.20 → 2.0.0

package/ES10/index.js

@@ -1,19 +1,20 @@
 import { add_to_version_info as $jb2Oo$add_to_version_info, catchify as $jb2Oo$catchify, queueMacroTask as $jb2Oo$queueMacroTask, instant_exec_on_suspect_history_change as $jb2Oo$instant_exec_on_suspect_history_change, derror as $jb2Oo$derror } from "@depict-ai/utilishared/ES10";
-import { CategoryTitle as $383b6fd56bf151bd$re_export$CategoryTitle, embedded_num_products as $383b6fd56bf151bd$re_export$EmbeddedNumProducts, DepictAPI as $jb2Oo$DepictAPI, ProductCardError as $jb2Oo$ProductCardError, DepictSearch as $jb2Oo$DepictSearch, DepictCategory as $jb2Oo$DepictCategory, get_search_query_updating_blocked_signal as $jb2Oo$get_search_query_updating_blocked_signal, SearchPage as $jb2Oo$SearchPage, defaultColsAtSize as $jb2Oo$defaultColsAtSize, defaultGridSpacing as $jb2Oo$defaultGridSpacing, CategoryPage as $jb2Oo$CategoryPage, defaultCategoryTitlePlugin as $jb2Oo$defaultCategoryTitlePlugin, BreadCrumbs as $jb2Oo$BreadCrumbs, QuickLinks as $jb2Oo$QuickLinks, ImagePlaceholder as $jb2Oo$ImagePlaceholder, TextPlaceholder as $jb2Oo$TextPlaceholder, open_modal_with_alignment as $jb2Oo$open_modal_with_alignment, SearchField as $jb2Oo$SearchField, fetchDepictRecommendations as $jb2Oo$fetchDepictRecommendations } from "@depict-ai/ui/ES10";
-import { untrack as $jb2Oo$untrack, createRoot as $jb2Oo$createRoot, createEffect as $jb2Oo$createEffect, createMemo as $jb2Oo$createMemo, createComponent as $jb2Oo$createComponent, Show as $jb2Oo$Show, getOwner as $jb2Oo$getOwner, runWithOwner as $jb2Oo$runWithOwner, onCleanup as $jb2Oo$onCleanup, createSignal as $jb2Oo$createSignal, createComputed as $jb2Oo$createComputed } from "solid-js";
-import { createElement as $jb2Oo$createElement, Fragment as $jb2Oo$Fragment, useEffect as $jb2Oo$useEffect, useState as $jb2Oo$useState, useRef as $jb2Oo$useRef, Component as $jb2Oo$Component, forwardRef as $jb2Oo$forwardRef, useCallback as $jb2Oo$useCallback } from "react";
+import { CategoryTitle as $383b6fd56bf151bd$re_export$CategoryTitle, embedded_num_products as $383b6fd56bf151bd$re_export$EmbeddedNumProducts, DepictAPI as $jb2Oo$DepictAPI, DepictSearch as $jb2Oo$DepictSearch, DepictCategory as $jb2Oo$DepictCategory, get_search_query_updating_blocked_signal as $jb2Oo$get_search_query_updating_blocked_signal, SearchPage as $jb2Oo$SearchPage, defaultColsAtSize as $jb2Oo$defaultColsAtSize, defaultGridSpacing as $jb2Oo$defaultGridSpacing, ProductCardError as $jb2Oo$ProductCardError, CategoryPage as $jb2Oo$CategoryPage, defaultCategoryTitlePlugin as $jb2Oo$defaultCategoryTitlePlugin, BreadCrumbs as $jb2Oo$BreadCrumbs, QuickLinks as $jb2Oo$QuickLinks, ImagePlaceholder as $jb2Oo$ImagePlaceholder, TextPlaceholder as $jb2Oo$TextPlaceholder, RecommendationSlider as $jb2Oo$RecommendationSlider, RecommendationGrid as $jb2Oo$RecommendationGrid, open_modal_with_alignment as $jb2Oo$open_modal_with_alignment, SearchField as $jb2Oo$SearchField, fetchDepictRecommendations as $jb2Oo$fetchDepictRecommendations } from "@depict-ai/ui/ES10";
+import { untrack as $jb2Oo$untrack, createRoot as $jb2Oo$createRoot, createEffect as $jb2Oo$createEffect, createMemo as $jb2Oo$createMemo, createComponent as $jb2Oo$createComponent, Show as $jb2Oo$Show, createSignal as $jb2Oo$createSignal, createComputed as $jb2Oo$createComputed, onCleanup as $jb2Oo$onCleanup, getOwner as $jb2Oo$getOwner, runWithOwner as $jb2Oo$runWithOwner } from "solid-js";
+import { createElement as $jb2Oo$createElement, Fragment as $jb2Oo$Fragment, useEffect as $jb2Oo$useEffect, useState as $jb2Oo$useState, useRef as $jb2Oo$useRef, forwardRef as $jb2Oo$forwardRef, Component as $jb2Oo$Component, useCallback as $jb2Oo$useCallback } from "react";
 import { defaultLocale as $jb2Oo$defaultLocale } from "@depict-ai/ui/locales/ES10";
-import { render as $jb2Oo$render, hydrate as $jb2Oo$hydrate } from "solid-js/web";
-import { jsx as $jb2Oo$jsx } from "react/jsx-runtime";
-import { createPortal as $jb2Oo$createPortal } from "react-dom";
+import { render as $jb2Oo$render, hydrate as $jb2Oo$hydrate, isServer as $jb2Oo$isServer } from "solid-js/web";
 import { createStore as $jb2Oo$createStore, reconcile as $jb2Oo$reconcile } from "solid-js/store";
 import { DPC as $jb2Oo$DPC } from "@depict-ai/dpc/ES10";
+import { jsx as $jb2Oo$jsx } from "react/jsx-runtime";
+import { createPortal as $jb2Oo$createPortal } from "react-dom";
+import { renderToString as $jb2Oo$renderToString } from "react-dom/server";
 
 /*! 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
 import { register_es_version } from "../multi_import_deduplicator.mjs";
 register_es_version("react-ui", "ES10");
-const $9bd9bb8700ab2ada$export$83d89fbfd8236492 = "1.5.20";
+const $9bd9bb8700ab2ada$export$83d89fbfd8236492 = "2.0.0";
 const $8c691d7f86317052$export$8e769ad4338a911e = {
   usedLocale: $jb2Oo$createSignal((0, $jb2Oo$defaultLocale)),
   search_instances: new Map(),
@@ -33,31 +34,6 @@ const $8c691d7f86317052$export$8e769ad4338a911e = {
   category_meta_title_suffix: $jb2Oo$createSignal(),
   disable_override_query_id: $jb2Oo$createSignal()
 };
-class $88d93ed7309e90d1$export$d0f82e3ef89b1f22 extends (0, $jb2Oo$Component) {
-  constructor(props) {
-    super(props);
-    this.state = {
-      hasError: false
-    };
-  }
-  static getDerivedStateFromError() {
-    // Update state so the next render will show the fallback UI.
-    return {
-      hasError: true
-    };
-  }
-  componentDidCatch(error) {
-    this.props.on_error(error);
-  }
-  render() {
-    if (this.state.hasError)
-      // You can render any custom fallback UI
-      return $jb2Oo$createElement("div", {
-        children: "Component failed"
-      });
-    return this.props.children;
-  }
-}
 let $0dd9d9a9c7da4c1d$var$run_on_href_change;
 let $0dd9d9a9c7da4c1d$var$old_href = location.href;
 function $0dd9d9a9c7da4c1d$export$74f3924c5027fe1d(cb) {
@@ -134,45 +110,6 @@ function $0dd9d9a9c7da4c1d$export$e5139bbbb9a05035(component, is_set) {
     });
   };
 }
-async function $0dd9d9a9c7da4c1d$export$79c79419c1ef0081(_ref2) {
-  let {
-    display: display,
-    component_portals: component_portals,
-    set_portals: set_portals,
-    react_template: react_template
-  } = _ref2;
-  let set_react_has_ran_hooks;
-  let was_cleaned_up = false;
-  const react_has_ran_hooks = new Promise(r => set_react_has_ran_hooks = r);
-  const solid_container = document.createElement("div");
-  const owner = $jb2Oo$getOwner();
-  const reactProductCard = $jb2Oo$jsx(props => {
-    // Sneak in a hook into their product card component to know once react has finished rendering and running hooks
-    $jb2Oo$useEffect(set_react_has_ran_hooks, []);
-    return react_template(props);
-  }, {
-    display: display
-  });
-  const reactProductCardInErrorBoundary = $jb2Oo$jsx((0, $88d93ed7309e90d1$export$d0f82e3ef89b1f22), {
-    children: reactProductCard,
-    on_error: error => $jb2Oo$runWithOwner(owner, () => {
-      if (was_cleaned_up) return; // Would infinite loop if we'd throw after we've already been cleaned up. That is because the `ErrorBoundary` won't be "registered" with the cleaned-up owner anymore so react would hear about the throw and attempt to re-render the error boundary or something which would throw again, etc.
-      throw new (0, $jb2Oo$ProductCardError)(error);
-    })
-  });
-  const portal = $jb2Oo$createPortal(reactProductCardInErrorBoundary, solid_container);
-  component_portals.add(portal);
-  set_portals([...component_portals]);
-  $jb2Oo$onCleanup(() => {
-    was_cleaned_up = true;
-    // 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);
-    // Updating i.e. the merchant will cause a setState call while rendering the DepictProvider component which is illegal because it usually infinite loops react apps. In our case it doesn't though, so we just evade detection by doing it a microtask later. See also https://github.com/facebook/react/issues/18178#issuecomment-595846312
-    queueMicrotask(() => set_portals([...component_portals]));
-  });
-  await react_has_ran_hooks; // After react has created elements it still takes some time to actually connect the refs and run the hooks. We don't want to replace placeholders before then.
-  return [solid_container];
-}
 let $64144f6d578fd8ac$var$set = false;
 let $64144f6d578fd8ac$var$padding_animation;
 function $64144f6d578fd8ac$export$6453cbc34515a94d() {
@@ -524,6 +461,70 @@ function $fda7a7820477f957$export$f4d89133c6985668(type, stateKey, componentName
   });
   return instance.instance;
 }
+class $88d93ed7309e90d1$export$d0f82e3ef89b1f22 extends (0, $jb2Oo$Component) {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false
+    };
+  }
+  static getDerivedStateFromError() {
+    // Update state so the next render will show the fallback UI.
+    return {
+      hasError: true
+    };
+  }
+  componentDidCatch(error) {
+    this.props.on_error(error);
+  }
+  render() {
+    if (this.state.hasError)
+      // You can render any custom fallback UI
+      return $jb2Oo$createElement("div", {
+        children: "Component failed"
+      });
+    return this.props.children;
+  }
+}
+async function $6593e4e126cb318f$export$79c79419c1ef0081(_ref) {
+  let {
+    display: display,
+    component_portals: component_portals,
+    set_portals: set_portals,
+    react_template: react_template
+  } = _ref;
+  let set_react_has_ran_hooks;
+  let was_cleaned_up = false;
+  const react_has_ran_hooks = new Promise(r => set_react_has_ran_hooks = r);
+  const solid_container = document.createElement("div");
+  const owner = $jb2Oo$getOwner();
+  const reactProductCard = $jb2Oo$jsx(props => {
+    // Sneak in a hook into their product card component to know once react has finished rendering and running hooks
+    $jb2Oo$useEffect(set_react_has_ran_hooks, []);
+    return react_template(props);
+  }, {
+    display: display
+  });
+  const reactProductCardInErrorBoundary = $jb2Oo$jsx((0, $88d93ed7309e90d1$export$d0f82e3ef89b1f22), {
+    children: reactProductCard,
+    on_error: error => $jb2Oo$runWithOwner(owner, () => {
+      if (was_cleaned_up) return; // Would infinite loop if we'd throw after we've already been cleaned up. That is because the `ErrorBoundary` won't be "registered" with the cleaned-up owner anymore so react would hear about the throw and attempt to re-render the error boundary or something which would throw again, etc.
+      throw new (0, $jb2Oo$ProductCardError)(error);
+    })
+  });
+  const portal = $jb2Oo$createPortal(reactProductCardInErrorBoundary, solid_container);
+  component_portals.add(portal);
+  set_portals([...component_portals]);
+  $jb2Oo$onCleanup(() => {
+    was_cleaned_up = true;
+    // 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);
+    // Updating i.e. the merchant will cause a setState call while rendering the DepictProvider component which is illegal because it usually infinite loops react apps. In our case it doesn't though, so we just evade detection by doing it a microtask later. See also https://github.com/facebook/react/issues/18178#issuecomment-595846312
+    queueMicrotask(() => set_portals([...component_portals]));
+  });
+  await react_has_ran_hooks; // After React has created elements it still takes some time to actually connect the refs and run the hooks. We don't want to replace placeholders before then.
+  return [solid_container];
+}
 const $d059770e7af9e2dc$var$rendered_components_with_state_key = new Set();
 function $d059770e7af9e2dc$export$a54ec244c8863715(props) {
   return $0dd9d9a9c7da4c1d$export$f6e64e17bd69eeef({
@@ -588,7 +589,7 @@ function $d059770e7af9e2dc$var$SolidSearchPage(props, set_portals) {
         return (_props$gridSpacing = props.gridSpacing) !== null && _props$gridSpacing !== void 0 ? _props$gridSpacing : (0, $jb2Oo$defaultGridSpacing);
       },
       depict_search: depict_search(),
-      product_card_template: display => $0dd9d9a9c7da4c1d$export$79c79419c1ef0081({
+      product_card_template: display => $6593e4e126cb318f$export$79c79419c1ef0081({
         display: display,
         react_template: $jb2Oo$untrack(() => props.productCard),
         component_portals: component_portals,
@@ -669,7 +670,7 @@ function $e86a296a07b17ad5$var$SolidCategoryPage(props, set_portals) {
       get show_quicklinks() {
         return props.showQuicklinks;
       },
-      product_card_template: display => $0dd9d9a9c7da4c1d$export$79c79419c1ef0081({
+      product_card_template: display => $6593e4e126cb318f$export$79c79419c1ef0081({
         display: display,
         react_template: $jb2Oo$untrack(() => props.productCard),
         component_portals: component_portals,
@@ -737,6 +738,83 @@ const $2c7738b65cbcac1c$export$89c6019e4baa40b1 = raw_react_props => {
     }
   });
 };
+function $c02e9fd51f31a1bd$export$82cfdc85a4d15688(props) {
+  return $0dd9d9a9c7da4c1d$export$f6e64e17bd69eeef({
+    solid_component: $c02e9fd51f31a1bd$export$5abb40edfde2a843,
+    props: props
+  });
+}
+function $c02e9fd51f31a1bd$export$5abb40edfde2a843(props, set_portals) {
+  const component_portals = new Set();
+  return $jb2Oo$RecommendationSlider({
+    get recommendations() {
+      return props.recommendations;
+    },
+    product_card_template: display => $6593e4e126cb318f$export$79c79419c1ef0081({
+      display: display,
+      react_template: $jb2Oo$untrack(() => props.productCard),
+      component_portals: component_portals,
+      set_portals: set_portals
+    }),
+    get cols_at_size() {
+      return props.columnsAtSize || (0, $jb2Oo$defaultColsAtSize);
+    },
+    get grid_spacing() {
+      var _props$gridSpacing;
+      return (_props$gridSpacing = props.gridSpacing) !== null && _props$gridSpacing !== void 0 ? _props$gridSpacing : (0, $jb2Oo$defaultGridSpacing);
+    }
+  });
+}
+function $48b0916cc674770c$export$bd8acc07a8bae229(props, set_portals) {
+  const component_portals = new Set();
+  return $jb2Oo$RecommendationGrid({
+    get recommendations() {
+      return props.recommendations;
+    },
+    product_card_template: display => {
+      if (0, $jb2Oo$isServer)
+        // This function can't be async on the server
+        // @ts-ignore
+        return {
+          t: $jb2Oo$renderToString($jb2Oo$createElement(() => props.productCard({
+            display: display
+          })))
+        };
+      return $6593e4e126cb318f$export$79c79419c1ef0081({
+        display: display,
+        react_template: $jb2Oo$untrack(() => props.productCard),
+        component_portals: component_portals,
+        set_portals: set_portals
+      });
+    },
+    get cols_at_size() {
+      return props.columnsAtSize || (0, $jb2Oo$defaultColsAtSize);
+    },
+    get grid_spacing() {
+      var _props$gridSpacing;
+      return (_props$gridSpacing = props.gridSpacing) !== null && _props$gridSpacing !== void 0 ? _props$gridSpacing : (0, $jb2Oo$defaultGridSpacing);
+    },
+    get view_more_button() {
+      var _viewMoreButton$start;
+      const {
+        viewMoreButton: viewMoreButton
+      } = props;
+      return viewMoreButton ? {
+        text: viewMoreButton.text,
+        start_rows: (_viewMoreButton$start = viewMoreButton.startRows) !== null && _viewMoreButton$start !== void 0 ? _viewMoreButton$start : 2,
+        rows_per_click: viewMoreButton.rowsPerClick
+      } : undefined;
+    }
+  });
+}
+function $31abef71c0a2d3fc$export$b0a773486c1c2312(props) {
+  return $0dd9d9a9c7da4c1d$export$f6e64e17bd69eeef({
+    solid_component: (0, $48b0916cc674770c$export$bd8acc07a8bae229),
+    props: props,
+    hydrate_function_when_ssr: (0, $jb2Oo$hydrate),
+    wrapper_type: "section"
+  });
+}
 const $1283ca5a3f4a4617$export$d69d8daa20eae175 = createOpenModalParams => {
   const {
     location = "centered",
@@ -854,4 +932,4 @@ const $a7dfdd84298ae791$export$b8a61e5c71402559 = {
   nextRouterNavigation: $05726fa9c7eda0a1$export$804fac5697cfbe35
 };
 $jb2Oo$add_to_version_info("react-ui", (0, $9bd9bb8700ab2ada$export$83d89fbfd8236492));
-export { $c61814cfb91ead09$export$466cdc317043f6cb as QuickLinks, $ec632214ac078e79$export$5646050d516e06bc as BreadCrumbs, $f6a205a95e4fdee3$export$80e99ee6b29cadd2 as ComponentAligner, $18e5b9f66c7ade8e$export$9fac37a9c21c2f3b as DepictProvider, $e86a296a07b17ad5$export$f7d2f673fc2f091d as CategoryPage, $d059770e7af9e2dc$export$a54ec244c8863715 as SearchPage, $6406849926c3f794$export$3f37af283f8fb843 as ImagePlaceholder, $2c7738b65cbcac1c$export$89c6019e4baa40b1 as TextPlaceholder, $356d18d3ed66814e$export$912994940e660d32 as useSearchModal, $4c71282d292aac6d$export$9bb30bbe003b82e0 as useSearchField, $1895644749ca8d8a$export$6501da23a2770fc as useFetchRecommendations, $b34796f5ebe3470e$export$38b98fae14bd1f64 as usePerformanceClient, $383b6fd56bf151bd$re_export$CategoryTitle as CategoryTitle, $383b6fd56bf151bd$re_export$EmbeddedNumProducts as EmbeddedNumProducts, $9bd9bb8700ab2ada$export$83d89fbfd8236492 as version, $a7dfdd84298ae791$export$b8a61e5c71402559 as Navigation };
+export { $c61814cfb91ead09$export$466cdc317043f6cb as QuickLinks, $ec632214ac078e79$export$5646050d516e06bc as BreadCrumbs, $f6a205a95e4fdee3$export$80e99ee6b29cadd2 as ComponentAligner, $18e5b9f66c7ade8e$export$9fac37a9c21c2f3b as DepictProvider, $e86a296a07b17ad5$export$f7d2f673fc2f091d as CategoryPage, $d059770e7af9e2dc$export$a54ec244c8863715 as SearchPage, $6406849926c3f794$export$3f37af283f8fb843 as ImagePlaceholder, $2c7738b65cbcac1c$export$89c6019e4baa40b1 as TextPlaceholder, $31abef71c0a2d3fc$export$b0a773486c1c2312 as RecommendationGrid, $c02e9fd51f31a1bd$export$82cfdc85a4d15688 as RecommendationSlider, $356d18d3ed66814e$export$912994940e660d32 as useSearchModal, $4c71282d292aac6d$export$9bb30bbe003b82e0 as useSearchField, $1895644749ca8d8a$export$6501da23a2770fc as useFetchRecommendations, $b34796f5ebe3470e$export$38b98fae14bd1f64 as usePerformanceClient, $383b6fd56bf151bd$re_export$CategoryTitle as CategoryTitle, $383b6fd56bf151bd$re_export$EmbeddedNumProducts as EmbeddedNumProducts, $9bd9bb8700ab2ada$export$83d89fbfd8236492 as version, $a7dfdd84298ae791$export$b8a61e5c71402559 as Navigation };

package/README.md

@@ -6,4 +6,5 @@ Breaking changes:
 
 - 1.3.0 moved `depict-filter-sort-mobile-modal-container` from being a class to being an id
 - 1.4.0 Added `brand_` translation string to Locale.
-- 1.5.0: Don't allow creating two `DepictProvider` instances. Don't allow two synced SearchPage and CategoryPage's to be created. Add `stateKey` property to all the components which can be used to create two instances of everything with completely different states.
+- 1.5.0: Don't allow creating two `DepictProvider` instances. Don't allow two synced SearchPage and CategoryPage's to be created. Add `stateKey` property to all the components which can be used to create two instances of everything with completely different states.
+- 2.0.0 Made `enableContentSearch` `true` by default. Redesigned filter counts. Added RecommendationGrid and RecommendationSlider.

package/dist/main.js

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