@depict-ai/react-ui 4.1.0 → 4.1.1

package/ES10/index.js

@@ -1,10 +1,10 @@
 "use client";
 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, dwarn as $jb2Oo$dwarn } from "@depict-ai/utilishared/ES10";
 import { CategoryTitle as $383b6fd56bf151bd$re_export$CategoryTitle, embedded_num_products as $383b6fd56bf151bd$re_export$EmbeddedNumProducts, SearchModalV2 as $383b6fd56bf151bd$re_export$SearchModalV2, ClassicSearchModal as $383b6fd56bf151bd$re_export$ClassicSearchModal, 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, modalVersionSymbol as $jb2Oo$modalVersionSymbol, 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, createSignal as $jb2Oo$createSignal, createMemo as $jb2Oo$createMemo, createComponent as $jb2Oo$createComponent, Show as $jb2Oo$Show, createComputed as $jb2Oo$createComputed, onCleanup as $jb2Oo$onCleanup, getOwner as $jb2Oo$getOwner, runWithOwner as $jb2Oo$runWithOwner, on as $jb2Oo$on, mapArray as $jb2Oo$mapArray, createRenderEffect as $jb2Oo$createRenderEffect } from "solid-js";
+import { untrack as $jb2Oo$untrack, createRoot as $jb2Oo$createRoot, createEffect as $jb2Oo$createEffect, createSignal as $jb2Oo$createSignal, createComputed as $jb2Oo$createComputed, createMemo as $jb2Oo$createMemo, onCleanup as $jb2Oo$onCleanup, getOwner as $jb2Oo$getOwner, runWithOwner as $jb2Oo$runWithOwner, on as $jb2Oo$on, mapArray as $jb2Oo$mapArray, Show as $jb2Oo$Show, createRenderEffect as $jb2Oo$createRenderEffect } 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, isServer as $jb2Oo$isServer, ssr as $jb2Oo$ssr, ssrHydrationKey as $jb2Oo$ssrHydrationKey } from "solid-js/web";
+import { render as $jb2Oo$render, createComponent as $jb2Oo$createComponent, hydrate as $jb2Oo$hydrate, isServer as $jb2Oo$isServer, ssr as $jb2Oo$ssr, ssrHydrationKey as $jb2Oo$ssrHydrationKey } 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";
@@ -15,7 +15,7 @@ import { renderToString as $jb2Oo$renderToString } from "react-dom/server";
 // 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 = "4.1.0";
+const $9bd9bb8700ab2ada$export$83d89fbfd8236492 = "4.1.1";
 const $8c691d7f86317052$export$8e769ad4338a911e = {
   usedLocale: $jb2Oo$createSignal((0, $jb2Oo$defaultLocale)),
   search_instances: new Map(),
@@ -33,27 +33,27 @@ const $8c691d7f86317052$export$8e769ad4338a911e = {
   enable_content_search: $jb2Oo$createSignal(),
   disable_override_listing_id: $jb2Oo$createSignal()
 };
-let $0dd9d9a9c7da4c1d$var$run_on_href_change;
-let $0dd9d9a9c7da4c1d$var$old_href = location.href;
-function $0dd9d9a9c7da4c1d$export$74f3924c5027fe1d(cb) {
-  $0dd9d9a9c7da4c1d$var$run_on_href_change = cb;
+let $ac53b4e3251b31d0$var$run_on_href_change;
+let $ac53b4e3251b31d0$var$old_href = location.href;
+function $ac53b4e3251b31d0$export$74f3924c5027fe1d(cb) {
+  $ac53b4e3251b31d0$var$run_on_href_change = cb;
 }
 (0, $jb2Oo$instant_exec_on_suspect_history_change).add($jb2Oo$catchify(() => {
   const {
     href: href
   } = location;
-  if ($0dd9d9a9c7da4c1d$var$run_on_href_change && $0dd9d9a9c7da4c1d$var$old_href !== href) $0dd9d9a9c7da4c1d$var$run_on_href_change(href);
-  $0dd9d9a9c7da4c1d$var$old_href = href;
+  if ($ac53b4e3251b31d0$var$run_on_href_change && $ac53b4e3251b31d0$var$old_href !== href) $ac53b4e3251b31d0$var$run_on_href_change(href);
+  $ac53b4e3251b31d0$var$old_href = href;
 }));
-const $0dd9d9a9c7da4c1d$export$775e6b3892b5ad52 = function () {
+const $ac53b4e3251b31d0$export$775e6b3892b5ad52 = function () {
   let url = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : location;
   return url.pathname == $jb2Oo$untrack((0, $8c691d7f86317052$export$8e769ad4338a911e).search_page_path_[0]);
 }; // might have changed therefore get it from globalState
-const $0dd9d9a9c7da4c1d$export$30c8a12df09be0e4 = function () {
+const $ac53b4e3251b31d0$export$30c8a12df09be0e4 = function () {
   let url = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : location;
   return (0, $8c691d7f86317052$export$8e769ad4338a911e).known_category_paths.has(url.pathname);
 };
-function $0dd9d9a9c7da4c1d$export$f6e64e17bd69eeef(_ref) {
+function $ac53b4e3251b31d0$export$f6e64e17bd69eeef(_ref) {
   let {
     solid_component: solid_component,
     props: props,
@@ -88,7 +88,7 @@ function $0dd9d9a9c7da4c1d$export$f6e64e17bd69eeef(_ref) {
     const dispose = render_function(() => solid_component(store, set_portals), wrapper_element);
     return dispose;
   }, []);
-  return $jb2Oo$createElement((0, $jb2Oo$Fragment), null, $jb2Oo$createElement(wrapper_type, {
+  return /*#__PURE__*/$jb2Oo$createElement((0, $jb2Oo$Fragment), null, /*#__PURE__*/$jb2Oo$createElement(wrapper_type, {
     ref: wrapper_element_ref,
     style: wrapper_style,
     ...(hydrate_function_when_ssr ? {
@@ -100,40 +100,6 @@ function $0dd9d9a9c7da4c1d$export$f6e64e17bd69eeef(_ref) {
     } : {})
   }), ...portals);
 }
-function $0dd9d9a9c7da4c1d$export$e5139bbbb9a05035(component, is_set) {
-  const unset = Symbol();
-  const [args, setArgs] = $jb2Oo$createSignal(unset);
-  const default_is_set = $jb2Oo$createMemo(() => {
-    var _globalState$usedLoca;
-    return !!((0, $8c691d7f86317052$export$8e769ad4338a911e).merchant[0]() && (0, $8c691d7f86317052$export$8e769ad4338a911e).market[0]() && (_globalState$usedLoca = (0, $8c691d7f86317052$export$8e769ad4338a911e).usedLocale[0]()) !== null && _globalState$usedLoca !== void 0 && _globalState$usedLoca.backend_locale_);
-  });
-  const should_show = $jb2Oo$createMemo(prev => {
-    if (!prev && (0, $8c691d7f86317052$export$8e769ad4338a911e).provider_is_updating[0]())
-      // Why `!prev`? See https://gitlab.com/depict-ai/depict.ai/-/merge_requests/7854#note_1495776987
-      // If we weren't showing the component and the DepictProvider is currently updating, wait for it to have finished updating before showing the component
-      // Otherwise as soon as tenant and market is set we render the CategoryPage, but we might not have a DepictCategory yet, see https://depictaiworkspace.slack.com/archives/C04UZ2Z0RNE/p1690895918347289?thread_ts=1688391305.529449&cid=C04UZ2Z0RNE
-      return false;
-    return (is_set || default_is_set)();
-  });
-  // @ts-ignore
-  const renderedShow = $jb2Oo$createComponent((0, $jb2Oo$Show), {
-    get when() {
-      // Need to wait with rendering component until we've actually received the args
-      return should_show() && args() !== unset;
-    },
-    get children() {
-      return component(...$jb2Oo$untrack(args));
-    }
-  });
-  // Previously we did above logic in the function that we return here, but we can't do that since in solid-js insertExpression it says `while (typeof v === "function") v = v();`, that means that if a component returns a function containing a signal value, that signal value changing would lead to the entire component re-rendering.
-  // Instead, we have to create our show logic and everything that actually needs an owner above and only return a signal getter that isn't created with the same owner as it's called
-  // Relevant debugging playground links: https://playground.solidjs.com/anonymous/9b9bdca1-1fe6-4865-a6e7-850026d07a74, https://playground.solidjs.com/anonymous/cfd5e6cd-6931-43dd-aa9e-c73c855010c6, https://playground.solidjs.com/anonymous/c8b019a6-0cda-4863-8345-f42e1616d714
-  return function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
-    setArgs(args);
-    return renderedShow;
-  };
-}
 let $64144f6d578fd8ac$var$set = false;
 let $64144f6d578fd8ac$var$padding_animation;
 function $64144f6d578fd8ac$export$6453cbc34515a94d() {
@@ -141,7 +107,7 @@ function $64144f6d578fd8ac$export$6453cbc34515a94d() {
   /// WARNING WARNING WARNING
   // If you are debugging scroll restoration, make sure you're not in strict mode!!!!! Scroll restoration in nextjs won't work in strict mode because react will nuke all our elements from the DOM and render them again during going back
   // Next 13.x+ has strict mode by default, opt out by setting reactStrictMode: false in next.config.js
-  const are_on_search_or_category_page = () => $0dd9d9a9c7da4c1d$export$775e6b3892b5ad52() || $0dd9d9a9c7da4c1d$export$30c8a12df09be0e4();
+  const are_on_search_or_category_page = () => $ac53b4e3251b31d0$export$775e6b3892b5ad52() || $ac53b4e3251b31d0$export$30c8a12df09be0e4();
   if ($64144f6d578fd8ac$var$set) return; // Just being safe
   $64144f6d578fd8ac$var$set = true;
   // We used to initialise this variable with false which in some cases (scroll to top button in FloatingButtons) would cause the scroll to be blocked when it shouldn't (see https://depictaiworkspace.slack.com/archives/C058KQ3MU8Z/p1686141321127089?thread_ts=1686134246.109689&cid=C058KQ3MU8Z)
@@ -167,8 +133,8 @@ function $64144f6d578fd8ac$export$6453cbc34515a94d() {
     const [get_category_page_in_dom] = (0, $8c691d7f86317052$export$8e769ad4338a911e).category_page_in_dom;
     const search_page_in_dom = $jb2Oo$untrack(get_search_page_in_dom);
     const category_page_in_dom = $jb2Oo$untrack(get_category_page_in_dom);
-    const new_is_search = $0dd9d9a9c7da4c1d$export$775e6b3892b5ad52();
-    const new_is_category = $0dd9d9a9c7da4c1d$export$30c8a12df09be0e4();
+    const new_is_search = $ac53b4e3251b31d0$export$775e6b3892b5ad52();
+    const new_is_category = $ac53b4e3251b31d0$export$30c8a12df09be0e4();
     let accessor_to_wait_for;
     if (search_page_in_dom && new_is_search || category_page_in_dom && new_is_category) {
       // Already on the page we're going to
@@ -234,9 +200,9 @@ const $7abe9e29758fa0eb$export$599d4515591ef232 = (relativeUrl, isReplace, scrol
     Page[Page["SEARCH"] = 1] = "SEARCH";
     Page[Page["CATEGORY"] = 2] = "CATEGORY";
   })(Page || (Page = {}));
-  const current_page = $0dd9d9a9c7da4c1d$export$775e6b3892b5ad52() ? Page.SEARCH : $0dd9d9a9c7da4c1d$export$30c8a12df09be0e4() ? Page.CATEGORY : Page.OTHER;
+  const current_page = $ac53b4e3251b31d0$export$775e6b3892b5ad52() ? Page.SEARCH : $ac53b4e3251b31d0$export$30c8a12df09be0e4() ? Page.CATEGORY : Page.OTHER;
   const target_u_o = new URL(relativeUrl, location.origin);
-  const target_page = $0dd9d9a9c7da4c1d$export$775e6b3892b5ad52(target_u_o) ? Page.SEARCH : $0dd9d9a9c7da4c1d$export$30c8a12df09be0e4(target_u_o) ? Page.CATEGORY : Page.OTHER;
+  const target_page = $ac53b4e3251b31d0$export$775e6b3892b5ad52(target_u_o) ? Page.SEARCH : $ac53b4e3251b31d0$export$30c8a12df09be0e4(target_u_o) ? Page.CATEGORY : Page.OTHER;
   window.next.router[isReplace ? "replace" : "push"](relativeUrl, undefined, {
     shallow: current_page === target_page && target_page !== Page.OTHER,
     scroll:
@@ -587,14 +553,45 @@ function $0565aab3357d32e9$export$84601d922bd37be1(blocks, component_portals, se
     };
   });
 }
-const $d059770e7af9e2dc$var$rendered_components_with_state_key = new Set();
-function $d059770e7af9e2dc$export$a54ec244c8863715(props) {
-  return $0dd9d9a9c7da4c1d$export$f6e64e17bd69eeef({
-    solid_component: $0dd9d9a9c7da4c1d$export$e5139bbbb9a05035($d059770e7af9e2dc$var$SolidSearchPage),
+function $7d10b4c67928d97f$export$eb5844afe948564b(props) {
+  const default_is_set = $jb2Oo$createMemo(() => {
+    var _globalState$usedLoca;
+    return !!((0, $8c691d7f86317052$export$8e769ad4338a911e).merchant[0]() && (0, $8c691d7f86317052$export$8e769ad4338a911e).market[0]() && (_globalState$usedLoca = (0, $8c691d7f86317052$export$8e769ad4338a911e).usedLocale[0]()) !== null && _globalState$usedLoca !== void 0 && _globalState$usedLoca.backend_locale_);
+  });
+  const should_show = $jb2Oo$createMemo(prev => {
+    if (!prev && (0, $8c691d7f86317052$export$8e769ad4338a911e).provider_is_updating[0]())
+      // Why `!prev`? See https://gitlab.com/depict-ai/depict.ai/-/merge_requests/7854#note_1495776987
+      // If we weren't showing the component and the DepictProvider is currently updating, wait for it to have finished updating before showing the component
+      // Otherwise as soon as tenant and market is set we render the CategoryPage, but we might not have a DepictCategory yet, see https://depictaiworkspace.slack.com/archives/C04UZ2Z0RNE/p1690895918347289?thread_ts=1688391305.529449&cid=C04UZ2Z0RNE
+      return false;
+    return (props.isSet || default_is_set)();
+  });
+  return $jb2Oo$createComponent((0, $jb2Oo$Show), {
+    get when() {
+      return should_show();
+    },
+    get children() {
+      return props.children;
+    }
+  });
+}
+const $f33e2dee70c97da3$var$rendered_components_with_state_key = new Set();
+function $f33e2dee70c97da3$export$a54ec244c8863715(props) {
+  return $ac53b4e3251b31d0$export$f6e64e17bd69eeef({
+    solid_component: function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
+      // Work around some kind of babel bug where an optimisation turns ...args into `arguments` in the ES10 build which becomes the wrong arguments when read from teh getter
+      const ourArguments = args;
+      return $jb2Oo$createComponent((0, $7d10b4c67928d97f$export$eb5844afe948564b), {
+        get children() {
+          return $f33e2dee70c97da3$var$SolidSearchPage(...ourArguments);
+        }
+      });
+    },
     props: props
   });
 }
-function $d059770e7af9e2dc$var$SolidSearchPage(props, set_portals) {
+function $f33e2dee70c97da3$var$SolidSearchPage(props, set_portals) {
   const depict_search = $jb2Oo$createMemo(() => {
     const instance = $fda7a7820477f957$export$f4d89133c6985668("search", props.stateKey, "SearchPage");
     $jb2Oo$onCleanup(() => {
@@ -618,7 +615,7 @@ function $d059770e7af9e2dc$var$SolidSearchPage(props, set_portals) {
     // This is because on the front page the search_query updating is blocked because it's not the search page, and that means that `filtered_previous_searches` in Autocomplete.tsx doesn't filter out the current search query
     // Because it's so minor and would be quite hard to fix (one would need a second "actual search query" signal just for this purpose) it's wontfix for now
     // EDIT: now that we're resetting this in the onCleanup of the memo above this might no longer be the case
-    write_signal(!$0dd9d9a9c7da4c1d$export$775e6b3892b5ad52(location));
+    write_signal(!$ac53b4e3251b31d0$export$775e6b3892b5ad52(location));
   };
   const [, set_search_page_in_dom] = (0, $8c691d7f86317052$export$8e769ad4338a911e).search_page_in_dom;
   const component_portals = new Set();
@@ -626,18 +623,18 @@ function $d059770e7af9e2dc$var$SolidSearchPage(props, set_portals) {
   set_search_page_in_dom(true);
   $jb2Oo$onCleanup(() => set_search_page_in_dom(false));
   // 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
-  $0dd9d9a9c7da4c1d$export$74f3924c5027fe1d(update_updating_blocked_signal); // if we navigate, re-check
+  $ac53b4e3251b31d0$export$74f3924c5027fe1d(update_updating_blocked_signal); // if we navigate, re-check
   $jb2Oo$createComputed(() => {
     (0, $8c691d7f86317052$export$8e769ad4338a911e).search_page_path_[0](); // if react defined path changes, re-check
     update_updating_blocked_signal();
   });
-  $d059770e7af9e2dc$var$search_page_path_checker();
+  $f33e2dee70c97da3$var$search_page_path_checker();
   return $jb2Oo$createMemo(() => {
     const stateKey = $jb2Oo$untrack(() => props.stateKey);
-    if ($d059770e7af9e2dc$var$rendered_components_with_state_key.has(stateKey)) throw new Error("You have multiple SearchPage components with the same stateKey: ".concat(stateKey, ". Each SearchPage component must have a unique stateKey."));
+    if ($f33e2dee70c97da3$var$rendered_components_with_state_key.has(stateKey)) throw new Error("You have multiple SearchPage components with the same stateKey: ".concat(stateKey, ". Each SearchPage component must have a unique stateKey."));
     const transformed_content_blocks = $0565aab3357d32e9$export$84601d922bd37be1(() => props.contentBlocksByRow, component_portals, set_portals);
-    $d059770e7af9e2dc$var$rendered_components_with_state_key.add(stateKey);
-    $jb2Oo$onCleanup(() => $d059770e7af9e2dc$var$rendered_components_with_state_key.delete(stateKey));
+    $f33e2dee70c97da3$var$rendered_components_with_state_key.add(stateKey);
+    $jb2Oo$onCleanup(() => $f33e2dee70c97da3$var$rendered_components_with_state_key.delete(stateKey));
     return $jb2Oo$SearchPage({
       // Default config goes here
       get include_input_field() {
@@ -669,7 +666,7 @@ function $d059770e7af9e2dc$var$SolidSearchPage(props, set_portals) {
 /**
  * Users often set the searchPagePath to something without the market which breaks everything using the searchPagePath internally, notably refining the search query. Add a warning for them.
  */
-function $d059770e7af9e2dc$var$search_page_path_checker() {
+function $f33e2dee70c97da3$var$search_page_path_checker() {
   let has_warned = false;
   $jb2Oo$createEffect(() => {
     if (has_warned) return;
@@ -685,19 +682,26 @@ function $d059770e7af9e2dc$var$search_page_path_checker() {
     }
   });
 }
-const $e86a296a07b17ad5$var$rendered_components_with_state_key = new Set();
-function $e86a296a07b17ad5$export$f7d2f673fc2f091d(props) {
-  return $0dd9d9a9c7da4c1d$export$f6e64e17bd69eeef({
+const $710dda89475e8c05$var$rendered_components_with_state_key = new Set();
+function $710dda89475e8c05$export$f7d2f673fc2f091d(props) {
+  return $ac53b4e3251b31d0$export$f6e64e17bd69eeef({
     // @ts-ignore
     solid_component: function () {
-      return $0dd9d9a9c7da4c1d$export$e5139bbbb9a05035($e86a296a07b17ad5$var$SolidCategoryPage)(...arguments);
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
+      // Work around some kind of babel bug where an optimisation turns ...args into `arguments` in the ES10 build which becomes the wrong arguments when read from teh getter
+      const ourArguments = args;
+      return $jb2Oo$createComponent((0, $7d10b4c67928d97f$export$eb5844afe948564b), {
+        get children() {
+          return $710dda89475e8c05$var$SolidCategoryPage(...ourArguments);
+        }
+      });
     },
     props: props,
     wrapper_type: "div",
     wrapper_style: {}
   });
 }
-function $e86a296a07b17ad5$var$SolidCategoryPage(props, set_portals) {
+function $710dda89475e8c05$var$SolidCategoryPage(props, set_portals) {
   const depict_category = $jb2Oo$createMemo(() => $fda7a7820477f957$export$f4d89133c6985668("category", props.stateKey, "CategoryPage") // stateKey can change
   );
 
@@ -717,11 +721,11 @@ function $e86a296a07b17ad5$var$SolidCategoryPage(props, set_portals) {
       (0, $8c691d7f86317052$export$8e769ad4338a911e).known_category_paths.add(location.pathname);
     }
   });
-  const category = () => $jb2Oo$createMemo(() => {
+  const Category = () => $jb2Oo$createMemo(() => {
     const stateKey = $jb2Oo$untrack(() => props.stateKey);
-    if ($e86a296a07b17ad5$var$rendered_components_with_state_key.has(stateKey)) throw new Error("You have multiple CategoryPage components with the same stateKey: ".concat(stateKey, ". Each CategoryPage component must have a unique stateKey."));
-    $e86a296a07b17ad5$var$rendered_components_with_state_key.add(stateKey);
-    $jb2Oo$onCleanup(() => $e86a296a07b17ad5$var$rendered_components_with_state_key.delete(stateKey));
+    if ($710dda89475e8c05$var$rendered_components_with_state_key.has(stateKey)) throw new Error("You have multiple CategoryPage components with the same stateKey: ".concat(stateKey, ". Each CategoryPage component must have a unique stateKey."));
+    $710dda89475e8c05$var$rendered_components_with_state_key.add(stateKey);
+    $jb2Oo$onCleanup(() => $710dda89475e8c05$var$rendered_components_with_state_key.delete(stateKey));
     const transformed_content_blocks = $0565aab3357d32e9$export$84601d922bd37be1(() => props.contentBlocksByRow, component_portals, set_portals);
     return $jb2Oo$CategoryPage({
       depict_category: depict_category(),
@@ -758,15 +762,24 @@ function $e86a296a07b17ad5$var$SolidCategoryPage(props, set_portals) {
       })
     });
   });
-  return $0dd9d9a9c7da4c1d$export$e5139bbbb9a05035(category, category_state_set);
+  return $jb2Oo$createComponent((0, $7d10b4c67928d97f$export$eb5844afe948564b), {
+    isSet: category_state_set,
+    get children() {
+      return $jb2Oo$createComponent(Category, {});
+    }
+  });
 }
 function $ec632214ac078e79$export$5646050d516e06bc(react_props) {
-  return $0dd9d9a9c7da4c1d$export$f6e64e17bd69eeef({
-    solid_component: $0dd9d9a9c7da4c1d$export$e5139bbbb9a05035($ec632214ac078e79$var$vanilla_breadcrumbs),
+  return $ac53b4e3251b31d0$export$f6e64e17bd69eeef({
+    solid_component: solidProps => $jb2Oo$createComponent((0, $7d10b4c67928d97f$export$eb5844afe948564b), {
+      get children() {
+        return $jb2Oo$createComponent($ec632214ac078e79$var$VanillaBreadcrumbs, solidProps);
+      }
+    }),
     props: react_props
   });
 }
-function $ec632214ac078e79$var$vanilla_breadcrumbs(props) {
+function $ec632214ac078e79$var$VanillaBreadcrumbs(props) {
   // memo so stateKey can be dynamically changed
   return $jb2Oo$createMemo(() => {
     const depict_category = $fda7a7820477f957$export$f4d89133c6985668("category", props.stateKey, "BreadCrumbs");
@@ -777,12 +790,16 @@ function $ec632214ac078e79$var$vanilla_breadcrumbs(props) {
 }
 function $c61814cfb91ead09$export$466cdc317043f6cb() {
   let react_props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return $0dd9d9a9c7da4c1d$export$f6e64e17bd69eeef({
-    solid_component: $0dd9d9a9c7da4c1d$export$e5139bbbb9a05035($c61814cfb91ead09$var$vanilla_quick_links),
+  return $ac53b4e3251b31d0$export$f6e64e17bd69eeef({
+    solid_component: solidProps => $jb2Oo$createComponent((0, $7d10b4c67928d97f$export$eb5844afe948564b), {
+      get children() {
+        return $jb2Oo$createComponent($c61814cfb91ead09$var$VanillaQuickLinks, solidProps);
+      }
+    }),
     props: react_props
   });
 }
-function $c61814cfb91ead09$var$vanilla_quick_links(props) {
+function $c61814cfb91ead09$var$VanillaQuickLinks(props) {
   // memo so stateKey can be dynamically changed
   return $jb2Oo$createMemo(() => {
     const depict_category = $fda7a7820477f957$export$f4d89133c6985668("category", props.stateKey, "QuickLinks");
@@ -796,7 +813,7 @@ const $6406849926c3f794$export$3f37af283f8fb843 = raw_react_props => {
     class: raw_react_props.className,
     ...raw_react_props
   };
-  return $0dd9d9a9c7da4c1d$export$f6e64e17bd69eeef({
+  return $ac53b4e3251b31d0$export$f6e64e17bd69eeef({
     solid_component: props_store => $jb2Oo$ImagePlaceholder(props_store),
     props: react_props,
     wrapper_type: "span",
@@ -808,7 +825,7 @@ const $2c7738b65cbcac1c$export$89c6019e4baa40b1 = raw_react_props => {
     class: raw_react_props.className,
     ...raw_react_props
   };
-  return $0dd9d9a9c7da4c1d$export$f6e64e17bd69eeef({
+  return $ac53b4e3251b31d0$export$f6e64e17bd69eeef({
     solid_component: props_store => $jb2Oo$TextPlaceholder(props_store),
     props: react_props,
     wrapper_type: "span",
@@ -831,7 +848,7 @@ function $758339150fbfe9d5$export$4daadad26e48a2c7(props) {
 }
 function $c02e9fd51f31a1bd$export$82cfdc85a4d15688(props) {
   $758339150fbfe9d5$export$4daadad26e48a2c7(props);
-  return $0dd9d9a9c7da4c1d$export$f6e64e17bd69eeef({
+  return $ac53b4e3251b31d0$export$f6e64e17bd69eeef({
     solid_component: $c02e9fd51f31a1bd$export$5abb40edfde2a843,
     props: props
   });
@@ -914,7 +931,7 @@ function $cd68097a7ee08669$export$e46079a2793e9ec7(props, set_portals) {
 }
 function $31abef71c0a2d3fc$export$b0a773486c1c2312(props) {
   $758339150fbfe9d5$export$4daadad26e48a2c7(props);
-  return $0dd9d9a9c7da4c1d$export$f6e64e17bd69eeef({
+  return $ac53b4e3251b31d0$export$f6e64e17bd69eeef({
     solid_component: (0, $cd68097a7ee08669$export$e46079a2793e9ec7),
     props: props,
     hydrate_function_when_ssr: (0, $jb2Oo$hydrate),
@@ -966,7 +983,7 @@ function $356d18d3ed66814e$export$912994940e660d32() {
     open: open
   };
 }
-const $4c71282d292aac6d$export$9bb30bbe003b82e0 = function () {
+const $ab2d430c2034aa17$export$9bb30bbe003b82e0 = function () {
   let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   // We should just export a plain SearchField component here, not a weird hook thing, but I don't want to make a breaking change. Just fixing the re-rendering issue for now.
   // Create signal that persists across renders
@@ -974,19 +991,21 @@ const $4c71282d292aac6d$export$9bb30bbe003b82e0 = function () {
   // Update signal value when alignerRef changes
   set_aligner_signal_value(props === null || props === void 0 ? void 0 : props.alignerRef);
   // Make sure react never re-renders the actual SearchField component
-  const componentFunction = $jb2Oo$useCallback(() => $0dd9d9a9c7da4c1d$export$f6e64e17bd69eeef({
-    solid_component: $0dd9d9a9c7da4c1d$export$e5139bbbb9a05035(() => {
-      return $jb2Oo$createMemo(() => {
-        const depict_search = $fda7a7820477f957$export$f4d89133c6985668("search", props.stateKey, "useSearchField");
-        return $jb2Oo$SearchField({
-          depict_search: depict_search,
-          get aligner_ref() {
-            var _get_aligner_signal_v;
-            // React mutates the object at some random time so only get the current value once it actually is requested
-            return (_get_aligner_signal_v = get_aligner_signal_value()) === null || _get_aligner_signal_v === void 0 ? void 0 : _get_aligner_signal_v.current;
-          }
+  const componentFunction = $jb2Oo$useCallback(() => $ac53b4e3251b31d0$export$f6e64e17bd69eeef({
+    solid_component: () => $jb2Oo$createComponent((0, $7d10b4c67928d97f$export$eb5844afe948564b), {
+      get children() {
+        return $jb2Oo$createMemo(() => {
+          const depict_search = $fda7a7820477f957$export$f4d89133c6985668("search", props.stateKey, "useSearchField");
+          return $jb2Oo$SearchField({
+            depict_search: depict_search,
+            get aligner_ref() {
+              var _get_aligner_signal_v;
+              // React mutates the object at some random time so only get the current value once it actually is requested
+              return (_get_aligner_signal_v = get_aligner_signal_value()) === null || _get_aligner_signal_v === void 0 ? void 0 : _get_aligner_signal_v.current;
+            }
+          });
         });
-      });
+      }
     }),
     props: {}
   }), []);
@@ -1123,9 +1142,9 @@ const $05726fa9c7eda0a1$export$804fac5697cfbe35 = router => (relativeUrl, _ref)
     Page[Page["SEARCH"] = 1] = "SEARCH";
     Page[Page["CATEGORY"] = 2] = "CATEGORY";
   })(Page || (Page = {}));
-  const current_page = $0dd9d9a9c7da4c1d$export$775e6b3892b5ad52() ? Page.SEARCH : $0dd9d9a9c7da4c1d$export$30c8a12df09be0e4() ? Page.CATEGORY : Page.OTHER;
+  const current_page = $ac53b4e3251b31d0$export$775e6b3892b5ad52() ? Page.SEARCH : $ac53b4e3251b31d0$export$30c8a12df09be0e4() ? Page.CATEGORY : Page.OTHER;
   const target_u_o = new URL(relativeUrl, location.origin);
-  const target_page = $0dd9d9a9c7da4c1d$export$775e6b3892b5ad52(target_u_o) ? Page.SEARCH : $0dd9d9a9c7da4c1d$export$30c8a12df09be0e4(target_u_o) ? Page.CATEGORY : Page.OTHER;
+  const target_page = $ac53b4e3251b31d0$export$775e6b3892b5ad52(target_u_o) ? Page.SEARCH : $ac53b4e3251b31d0$export$30c8a12df09be0e4(target_u_o) ? Page.CATEGORY : Page.OTHER;
   router[replace ? "replace" : "push"](relativeUrl, undefined, {
     shallow: current_page === target_page && target_page !== Page.OTHER,
     scroll:
@@ -1137,4 +1156,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, $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, $39af3ccd78996343$export$72616730c1fad2f4 as useCategoryFilterHelpers, $383b6fd56bf151bd$re_export$CategoryTitle as CategoryTitle, $383b6fd56bf151bd$re_export$EmbeddedNumProducts as EmbeddedNumProducts, $383b6fd56bf151bd$re_export$SearchModalV2 as SearchModalV2, $383b6fd56bf151bd$re_export$ClassicSearchModal as ClassicSearchModal, $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, $710dda89475e8c05$export$f7d2f673fc2f091d as CategoryPage, $f33e2dee70c97da3$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, $ab2d430c2034aa17$export$9bb30bbe003b82e0 as useSearchField, $1895644749ca8d8a$export$6501da23a2770fc as useFetchRecommendations, $b34796f5ebe3470e$export$38b98fae14bd1f64 as usePerformanceClient, $39af3ccd78996343$export$72616730c1fad2f4 as useCategoryFilterHelpers, $383b6fd56bf151bd$re_export$CategoryTitle as CategoryTitle, $383b6fd56bf151bd$re_export$EmbeddedNumProducts as EmbeddedNumProducts, $383b6fd56bf151bd$re_export$SearchModalV2 as SearchModalV2, $383b6fd56bf151bd$re_export$ClassicSearchModal as ClassicSearchModal, $9bd9bb8700ab2ada$export$83d89fbfd8236492 as version, $a7dfdd84298ae791$export$b8a61e5c71402559 as Navigation };