@depict-ai/ui 2.1.4 → 2.1.5

package/server/latest/index.js

@@ -1,12 +1,12 @@
-import { add_to_version_info as $i7OB2$add_to_version_info, base64_encode_unicode as $i7OB2$base64_encode_unicode, base64_decode_unicode as $i7OB2$base64_decode_unicode, dlog as $i7OB2$dlog, queueMacroTask as $i7OB2$queueMacroTask, catchify as $i7OB2$catchify, is_safari as $i7OB2$is_safari, observer as $i7OB2$observer, Amazing_Slider as $i7OB2$Amazing_Slider, slider_snap_css as $i7OB2$slider_snap_css, slider_fading_factory as $i7OB2$slider_fading_factory, slider_fractional_factory as $i7OB2$slider_fractional_factory, camelCasifyObject as $i7OB2$camelCasifyObject, make_random_classname as $i7OB2$make_random_classname, n_col_styling_with_dist as $i7OB2$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $i7OB2$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $i7OB2$layout_get_total_rec_amount_for_row, layout_media_query_header as $i7OB2$layout_media_query_header, report as $i7OB2$report, useExpandingContainer as $i7OB2$useExpandingContainer, standard_price_format as $i7OB2$standard_price_format, hex_to_rgb as $i7OB2$hex_to_rgb, relative_luminance_from_rgb as $i7OB2$relative_luminance_from_rgb, fetch_recs as $i7OB2$fetch_recs, snakeCasifyObject as $i7OB2$snakeCasifyObject, instant_exec_on_suspect_history_change as $i7OB2$instant_exec_on_suspect_history_change, base_url as $i7OB2$base_url, get_depict_id as $i7OB2$get_depict_id, get_user_id as $i7OB2$get_user_id, get_session_id as $i7OB2$get_session_id, sort_obj as $i7OB2$sort_obj, fetch_retry as $i7OB2$fetch_retry, add_version_query_params as $i7OB2$add_version_query_params, dwarn as $i7OB2$dwarn, make_url_with_query_params as $i7OB2$make_url_with_query_params, edit_current_page_meta_tags as $i7OB2$edit_current_page_meta_tags, javascript_media_query as $i7OB2$javascript_media_query, use_href_accessor as $i7OB2$use_href_accessor, make_asyncIterable_exiter as $i7OB2$make_asyncIterable_exiter, href_change_ipns as $i7OB2$href_change_ipns, ContainedImage as $i7OB2$ContainedImage, deparallelize_no_drop as $i7OB2$deparallelize_no_drop, ListenableSet as $i7OB2$ListenableSet, insert_surfaces as $i7OB2$insert_surfaces } from "@depict-ai/utilishared/latest";
-import { createComponent as $i7OB2$createComponent, ssr as $i7OB2$ssr, ssrHydrationKey as $i7OB2$ssrHydrationKey, ssrStyle as $i7OB2$ssrStyle, ssrElement as $i7OB2$ssrElement, mergeProps as $i7OB2$mergeProps, escape as $i7OB2$escape, insert as $i7OB2$insert, ssrAttribute as $i7OB2$ssrAttribute, isServer as $i7OB2$isServer, ssrClassList as $i7OB2$ssrClassList, Dynamic as $i7OB2$Dynamic } from "solid-js/web";
-import { createSignal as $i7OB2$createSignal, getOwner as $i7OB2$getOwner, createEffect as $i7OB2$createEffect, runWithOwner as $i7OB2$runWithOwner, onCleanup as $i7OB2$onCleanup, createMemo as $i7OB2$createMemo, createContext as $i7OB2$createContext, useContext as $i7OB2$useContext, createResource as $i7OB2$createResource, Suspense as $i7OB2$Suspense, Show as $i7OB2$Show, untrack as $i7OB2$untrack, createRenderEffect as $i7OB2$createRenderEffect, Index as $i7OB2$Index, createRoot as $i7OB2$createRoot, For as $i7OB2$For, createUniqueId as $i7OB2$createUniqueId, createComputed as $i7OB2$createComputed, ErrorBoundary as $i7OB2$ErrorBoundary, on as $i7OB2$on, batch as $i7OB2$batch, createReaction as $i7OB2$createReaction, mapArray as $i7OB2$mapArray, mergeProps as $i7OB2$mergeProps1 } from "solid-js";
+import { add_to_version_info as $i7OB2$add_to_version_info, base64_encode_unicode as $i7OB2$base64_encode_unicode, base64_decode_unicode as $i7OB2$base64_decode_unicode, dlog as $i7OB2$dlog, queueMacroTask as $i7OB2$queueMacroTask, catchify as $i7OB2$catchify, is_safari as $i7OB2$is_safari, observer as $i7OB2$observer, dwarn as $i7OB2$dwarn, Amazing_Slider as $i7OB2$Amazing_Slider, slider_snap_css as $i7OB2$slider_snap_css, slider_fading_factory as $i7OB2$slider_fading_factory, slider_fractional_factory as $i7OB2$slider_fractional_factory, camelCasifyObject as $i7OB2$camelCasifyObject, make_random_classname as $i7OB2$make_random_classname, n_col_styling_with_dist as $i7OB2$n_col_styling_with_dist, layout_get_visible_recs_without_partial_rows as $i7OB2$layout_get_visible_recs_without_partial_rows, layout_get_total_rec_amount_for_row as $i7OB2$layout_get_total_rec_amount_for_row, layout_media_query_header as $i7OB2$layout_media_query_header, report as $i7OB2$report, useExpandingContainer as $i7OB2$useExpandingContainer, standard_price_format as $i7OB2$standard_price_format, hex_to_rgb as $i7OB2$hex_to_rgb, relative_luminance_from_rgb as $i7OB2$relative_luminance_from_rgb, fetch_recs as $i7OB2$fetch_recs, snakeCasifyObject as $i7OB2$snakeCasifyObject, instant_exec_on_suspect_history_change as $i7OB2$instant_exec_on_suspect_history_change, base_url as $i7OB2$base_url, get_depict_id as $i7OB2$get_depict_id, get_user_id as $i7OB2$get_user_id, get_session_id as $i7OB2$get_session_id, sort_obj as $i7OB2$sort_obj, fetch_retry as $i7OB2$fetch_retry, add_version_query_params as $i7OB2$add_version_query_params, make_url_with_query_params as $i7OB2$make_url_with_query_params, edit_current_page_meta_tags as $i7OB2$edit_current_page_meta_tags, javascript_media_query as $i7OB2$javascript_media_query, use_href_accessor as $i7OB2$use_href_accessor, make_asyncIterable_exiter as $i7OB2$make_asyncIterable_exiter, href_change_ipns as $i7OB2$href_change_ipns, ContainedImage as $i7OB2$ContainedImage, deparallelize_no_drop as $i7OB2$deparallelize_no_drop, ListenableSet as $i7OB2$ListenableSet, insert_surfaces as $i7OB2$insert_surfaces } from "@depict-ai/utilishared/latest";
+import { createComponent as $i7OB2$createComponent, insert as $i7OB2$insert, ssr as $i7OB2$ssr, ssrHydrationKey as $i7OB2$ssrHydrationKey, ssrStyle as $i7OB2$ssrStyle, spread as $i7OB2$spread, escape as $i7OB2$escape, ssrAttribute as $i7OB2$ssrAttribute, mergeProps as $i7OB2$mergeProps1, isServer as $i7OB2$isServer, ssrElement as $i7OB2$ssrElement, ssrClassList as $i7OB2$ssrClassList, Dynamic as $i7OB2$Dynamic } from "solid-js/web";
+import { createSignal as $i7OB2$createSignal, getOwner as $i7OB2$getOwner, createEffect as $i7OB2$createEffect, runWithOwner as $i7OB2$runWithOwner, onCleanup as $i7OB2$onCleanup, createMemo as $i7OB2$createMemo, createContext as $i7OB2$createContext, useContext as $i7OB2$useContext, mergeProps as $i7OB2$mergeProps, Show as $i7OB2$Show, createResource as $i7OB2$createResource, Suspense as $i7OB2$Suspense, untrack as $i7OB2$untrack, createRenderEffect as $i7OB2$createRenderEffect, Index as $i7OB2$Index, createRoot as $i7OB2$createRoot, For as $i7OB2$For, createUniqueId as $i7OB2$createUniqueId, createComputed as $i7OB2$createComputed, ErrorBoundary as $i7OB2$ErrorBoundary, on as $i7OB2$on, batch as $i7OB2$batch, createReaction as $i7OB2$createReaction, mapArray as $i7OB2$mapArray } from "solid-js";
 import { createStore as $i7OB2$createStore, reconcile as $i7OB2$reconcile } from "solid-js/store";
 
 /*! Depict.ai search and product listing SDK */
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("ui", "latest");
-const $ec291e0010116877$export$83d89fbfd8236492 = "2.1.4";
+const $ec291e0010116877$export$83d89fbfd8236492 = "2.1.5";
 const $4147651646da990a$var$fallback_operator = "in";
 const $4147651646da990a$var$fallback_token = "";
 const $4147651646da990a$var$legacy_filter_prefix = "filter_";
@@ -221,6 +221,7 @@ function $e8ffe11ed01df0fe$export$e6fffe67d4cdd848(whatToWatch) {
   });
   return size;
 }
+const $e8ffe11ed01df0fe$var$onIdleFunctionsSymbol = /*@__PURE__*/Symbol("onIdleFunctions");
 function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
   // Enable reactive props
   const otherOptions = $i7OB2$createMemo(() => {
@@ -243,11 +244,91 @@ function $e8ffe11ed01df0fe$export$6e5611bc7e57e477(props) {
       srcset: srcset
     };
   });
-  return $i7OB2$ssrElement("img", $i7OB2$mergeProps(otherOptions, src_options, {
-    get sizes() {
-      return props.size() + "px";
-    }
-  }), undefined, true);
+  // Work around https://github.com/solidjs/solid/issues/1828
+  const img = new Image(); // Need to use new Image or browser might not start loading image before it's in the DOM
+  const [hasSetSize, setHasSetSize] = $i7OB2$createSignal(false);
+  const [hasDecoded, setHasDecoded] = $i7OB2$createSignal(false);
+  const sizePX = $i7OB2$createMemo(() => `${props.size()}px`); // props.size could be a getter that expects a cleanup so get it in this memo instead of where we set img.sizes
+  const listingContext = $011607bdf658f807$export$8d0c4fdbb05a2f2e();
+  // Batch idle callbacks so that MutationObserver can batch the resulting mutations better, so we don't lose tons of CPU time to MutationObservers doing lots of things for each image
+  // Happened on singular, they have some weird observer (+we also have one but ours is at least 3x more efficient)
+  const executeWhenIdleBatched = fn => {
+    if (typeof requestIdleCallback !== "function") setTimeout(fn); // Old browsers don't get optimisation
+    const existingStack = listingContext?.[$e8ffe11ed01df0fe$var$onIdleFunctionsSymbol];
+    if (existingStack) return existingStack.add(fn);
+    const newStack = new Set([fn]);
+    if (listingContext) listingContext[$e8ffe11ed01df0fe$var$onIdleFunctionsSymbol] = newStack;
+    const processStackWhenIdle = () => requestIdleCallback(deadline => {
+      const start = performance.now();
+      const thirdDeadlineTime = deadline.timeRemaining() / 3; // observers coming after this take up 2-3x the time so don't use all of it
+      for (const fn of newStack) {
+        newStack.delete(fn);
+        fn();
+        const timeTaken = performance.now() - start;
+        if ((!deadline.timeRemaining() || timeTaken > thirdDeadlineTime) && newStack.size) {
+          // There's still work to be done but no time, so schedule another idle callback
+          processStackWhenIdle();
+          return;
+        }
+      }
+      // Stack is empty
+      if (listingContext) delete listingContext[$e8ffe11ed01df0fe$var$onIdleFunctionsSymbol];
+    }, {
+      timeout: 15000
+    } // long timeout, better to not have images than to freeze the browser. But also we don't want to confuse user why no iamges are loading
+    );
+
+    processStackWhenIdle();
+  };
+  let sizeSetFastPath = false;
+  let hasDecodedFastPath = false;
+  let timeoutSet = false;
+  $i7OB2$spread(img, $i7OB2$mergeProps(otherOptions), false, true);
+  $i7OB2$createEffect(() => {
+    if (!props.size()) return; // wait until we have a size
+    if (timeoutSet) return;
+    const handler = $i7OB2$catchify(() => {
+      img.sizes = sizePX(); // use latest available value of props.size
+      if (!sizeSetFastPath) {
+        setHasSetSize(true);
+        sizeSetFastPath = true;
+      }
+      timeoutSet = false;
+    });
+    // Throttle the updating of sizes to avoid unnecessary image re-fetches during resize
+    // And also because we first set src after sizes has been set, wait with loading and decoding images until browser is idle
+    // This greatly improves performance when loading (more) products
+    // See https://depictaiworkspace.slack.com/archives/C05NJ0K3WRL/p1698220617663139
+    executeWhenIdleBatched(handler);
+    timeoutSet = true;
+  });
+  $i7OB2$createEffect(() => {
+    if (!props.size() || !hasSetSize()) return; // If size isn't known or set, don't assign src yet since it would cause the most low res image to load
+    Object.assign(img, src_options());
+    // Add to DOM once decoded to not require/block any paints before image has completed loading and avoid showing broken image symbol
+    // We can do this because there has to be a container around us giving us a size
+    // No need to listen if we're already in the DOM
+    if (hasDecodedFastPath) return;
+    if (props.loading === "lazy") {
+      // For lazy loading there's no decoding to wait for as it only occurs when the image is visible
+      // Make sure src is set before we put the image into the DOM though so no broken image symbol is shown
+      setHasDecoded(true);
+      hasDecodedFastPath = true;
+    }
+    img.decode().catch(e => $i7OB2$dwarn("Failed to decode image", e, img)) // Display the image also if loading failed so webdev can debug and doesn't get "no image"
+    .then(async () => {
+      // Also wait with inserting image (i.e. paint) until browser is idle
+      await new Promise(r => executeWhenIdleBatched(r));
+      setHasDecoded(true);
+      hasDecodedFastPath = true;
+    });
+  });
+  return $i7OB2$createComponent((0, $i7OB2$Show), {
+    get when() {
+      return hasDecoded();
+    },
+    children: img
+  });
 }
 function $e8ffe11ed01df0fe$var$make_srcset(url, resolutions) {
   return resolutions.map(width => `${$e8ffe11ed01df0fe$var$generateImageUrl(url, width)} ${width}w`).join(", ");
@@ -285,7 +366,7 @@ function $660070e2a394b3c3$export$e4b984597b71e989(props) {
     $i7OB2$queueMacroTask(() => setCurrentImageSize(undefined)); // unset the size accessor next event loop iteration, so that all onCleanup's have time to run, since the effects run more aggressively and can create a size accessor with a cleaned up owner otherwise
   });
 
-  container.append($i7OB2$createComponent((0, $e8ffe11ed01df0fe$export$6e5611bc7e57e477), {
+  $i7OB2$insert(container, $i7OB2$createComponent((0, $e8ffe11ed01df0fe$export$6e5611bc7e57e477), {
     style: "width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;",
     get size() {
       return $i7OB2$createMemo(() => currentImageSize()?.() || 0);
@@ -660,7 +741,7 @@ const $c8d5ff4524619fcd$var$_tmpl$ = ["<div", ' class="', '">', "</div>"],
   $c8d5ff4524619fcd$var$_tmpl$2 = ["<style", ' type="text/css">', "</style>"];
 function $c8d5ff4524619fcd$export$d21e32dfedac04be(props) {
   const container_class = "x" + $i7OB2$createUniqueId();
-  const container_element_ = $i7OB2$ssrElement("div", $i7OB2$mergeProps(() => props.element_attributes, {
+  const container_element_ = $i7OB2$ssrElement("div", $i7OB2$mergeProps1(() => props.element_attributes, {
     classList: {
       [container_class]: true
     }
@@ -785,7 +866,7 @@ function $c4492d24952ed731$export$d41d19e89346fa2({
       } = slider;
       const Layout = props => $c8d5ff4524619fcd$export$445d8d3f5f706a40(props, insert_here, true);
       // Do like this, so we don't have to call mergeProps ourselves
-      $i7OB2$createComponent(Layout, $i7OB2$mergeProps({
+      $i7OB2$createComponent(Layout, $i7OB2$mergeProps1({
         rows: "all",
         layout: "slider"
       }, layout_options_));
@@ -900,7 +981,7 @@ function $3da8afe3ed57cf34$export$7da560f849543dff({
 }) {
   const is_showing_something = $i7OB2$createMemo(() => recommendations_resource_.loading || recommendations_resource_()?.length);
   const num_placeholders_ = () => 20;
-  const elements = $i7OB2$ssr($3da8afe3ed57cf34$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape($a458486f22b22f63$export$a2cc176055f8f08()), $i7OB2$escape($i7OB2$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), $i7OB2$mergeProps({
+  const elements = $i7OB2$ssr($3da8afe3ed57cf34$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape($a458486f22b22f63$export$a2cc176055f8f08()), $i7OB2$escape($i7OB2$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), $i7OB2$mergeProps1({
     get rows() {
       return rows_object_();
     },
@@ -1110,7 +1191,7 @@ function $8c0f86cb3e266eeb$export$a71e92cfbb498adc(props) {
 }
 const $19976a74d273070d$var$_tmpl$ = '<path d="M11.669 10.531l9.156-9.156a.78.78 0 0 0 .237-.569c0-.221-.079-.412-.237-.569A.8.8 0 0 0 20.24 0a.77.77 0 0 0-.569.237l-9.14 9.14-9.14-9.14A.79.79 0 0 0 .807 0a.77.77 0 0 0-.569.237A.78.78 0 0 0 0 .807a.77.77 0 0 0 .237.569l9.156 9.156-9.156 9.14c-.159.157-.237.349-.237.569s.079.412.237.569c.085.085.174.148.268.19a1.095 1.095 0 0 0 .316.048.894.894 0 0 0 .285-.048.84.84 0 0 0 .285-.19l9.139-9.14 9.14 9.14a.894.894 0 0 0 .268.19 1.049 1.049 0 0 0 .301.048.941.941 0 0 0 .301-.048.84.84 0 0 0 .285-.19.78.78 0 0 0 .237-.569c0-.221-.079-.412-.237-.569z"></path>';
 function $19976a74d273070d$export$3b621d86b1566b2(props = {}) {
-  return $i7OB2$ssrElement("svg", $i7OB2$mergeProps(props, {
+  return $i7OB2$ssrElement("svg", $i7OB2$mergeProps1(props, {
     xmlns: "http://www.w3.org/2000/svg",
     width: "21.064",
     height: "21.047",
@@ -1348,7 +1429,7 @@ const $49b79728e7d9e2a1$export$48513f6b9f8ce62d = props => {
 };
 const $f8a56ba74eedd0c6$var$_tmpl$ = '<path d="M10.173 5.548H5.5V.875c0-.075-.027-.14-.081-.193S5.301.601 5.226.601s-.14.027-.193.081-.081.118-.081.193v4.673H.274c-.075 0-.14.027-.193.081A.27.27 0 0 0 0 5.827c0 .075.027.14.081.193s.118.081.193.081h4.678v4.673c0 .075.027.14.081.193s.118.081.193.081.14-.027.193-.081.081-.118.081-.193V6.101h4.673a.27.27 0 0 0 .199-.081c.054-.054.08-.118.08-.193a.27.27 0 0 0-.279-.279z" fill="#000"></path>';
 function $f8a56ba74eedd0c6$export$f21ab0717a89c77f(props) {
-  return $i7OB2$ssrElement("svg", $i7OB2$mergeProps(props, {
+  return $i7OB2$ssrElement("svg", $i7OB2$mergeProps1(props, {
     xmlns: "http://www.w3.org/2000/svg",
     width: "11",
     height: "12"
@@ -2195,7 +2276,7 @@ const $93716a9ad0dea854$export$414f6a19d38e655c = ({
             const current_value = $91aa8ee9f431800d$export$325f75597868c4f0(value().value_);
             return !!data?.some(item => $91aa8ee9f431800d$export$325f75597868c4f0(item) === current_value);
           });
-          const MakeButton = attributes => $i7OB2$ssrElement("button", $i7OB2$mergeProps(attributes, {
+          const MakeButton = attributes => $i7OB2$ssrElement("button", $i7OB2$mergeProps1(attributes, {
             get disabled() {
               return value().count_ === 0 && !is_selected();
             },
@@ -2445,7 +2526,7 @@ var $12497d09ef87296e$export$2e2bcd8739ae039 = {
 };
 const $9bc34983fc5f7bdb$var$_tmpl$ = '<path d="M4.617 12.738a.48.48 0 0 1-.164-.027c-.051-.023-.094-.055-.129-.098L.125 8.414A.39.39 0 0 1 0 8.117c0-.113.039-.211.125-.293s.18-.125.293-.125.215.043.297.125l3.902 3.902L16.086.262c.082-.082.18-.125.297-.125s.211.043.293.125.125.184.125.301-.043.215-.125.297L4.914 12.613c-.039.043-.086.078-.141.098s-.102.027-.156.027zm0 0"></path>';
 function $9bc34983fc5f7bdb$export$f2ca6fc699ca1fb4(props = {}) {
-  return $i7OB2$ssrElement("svg", $i7OB2$mergeProps({
+  return $i7OB2$ssrElement("svg", $i7OB2$mergeProps1({
     xmlns: "http://www.w3.org/2000/svg",
     width: "16.8",
     height: "14"
@@ -3766,7 +3847,7 @@ const $6dee9211e57ac31a$var$_tmpl$ = ["<style", ' type="text/css">', "</style>"]
 const $6dee9211e57ac31a$export$c500183c31c2b22e = "--spans-columns";
 function $6dee9211e57ac31a$export$ab6b147eec64fea5(props) {
   const container_class = "x" + $i7OB2$createUniqueId();
-  const container_element_ = $i7OB2$ssrElement("div", $i7OB2$mergeProps(() => props.element_attributes, {
+  const container_element_ = $i7OB2$ssrElement("div", $i7OB2$mergeProps1(() => props.element_attributes, {
     classList: {
       [container_class]: true
     }
@@ -4047,7 +4128,7 @@ function $e7a7eb102ddc0c79$var$wrap_blocks_in_div(rendered_content_blocks, max_s
         })));
       }
     });
-    return $i7OB2$mergeProps1(block, {
+    return $i7OB2$mergeProps(block, {
       // Create content divs for the blocks with as much fine-grained diffing as possible?
       content: () => {
         // Sneaky on-demand rendering, so we don't render more blocks than we can show: we have the rendered value here and don't return a function that renders because if our block would be moved around we'd be guaranteed to re-render
@@ -4384,7 +4465,7 @@ function $aea1edf92433e81e$export$fe334901e8bebd57() {
 const $e1bb71e65e01a3a0$var$_tmpl$ = '<path d="M6.199 10.254a.35.35 0 0 0-.496 0L3.5 12.453V.348a.35.35 0 0 0-.7 0v12.105L.598 10.254c-.137-.137-.359-.137-.492 0a.35.35 0 0 0 0 .492l2.797 2.801a.35.35 0 0 0 .496 0L6.2 10.746c.137-.137.137-.355 0-.492zM9.449 3.5H8.051a.35.35 0 0 1-.352-.352V1.75c0-.191.156-.352.352-.352h1.398c.195 0 .352.16.352.352v1.398a.35.35 0 0 1-.352.352zm-1.051-.699h.703v-.699h-.703zm0 0"></path>',
   $e1bb71e65e01a3a0$var$_tmpl$2 = '<path d="M10.852 6.301H8.051a.35.35 0 0 1-.352-.352V4.551a.35.35 0 0 1 .352-.352h2.801a.35.35 0 0 1 .348.352v1.398a.35.35 0 0 1-.348.352zm-2.453-.699H10.5v-.703H8.398zm3.851 3.5H8.051c-.195 0-.352-.16-.352-.352V7.352A.35.35 0 0 1 8.051 7h4.199c.191 0 .352.156.352.352V8.75c0 .191-.16.352-.352.352zm-3.852-.703h3.5V7.7h-3.5zm5.25 3.499H8.051a.35.35 0 0 1-.352-.348v-1.402a.35.35 0 0 1 .352-.348h5.598a.35.35 0 0 1 .352.348v1.402a.35.35 0 0 1-.352.348zm-5.25-.699H13.3V10.5H8.398zm0 0"></path>';
 function $e1bb71e65e01a3a0$export$da32f7add8a22e86(props = {}) {
-  return $i7OB2$ssrElement("svg", $i7OB2$mergeProps({
+  return $i7OB2$ssrElement("svg", $i7OB2$mergeProps1({
     xmlns: "http://www.w3.org/2000/svg",
     width: "14",
     height: "14",
@@ -4393,7 +4474,7 @@ function $e1bb71e65e01a3a0$export$da32f7add8a22e86(props = {}) {
 }
 const $05fbe84eb34564ec$var$_tmpl$ = '<path d="M6.199 10.254a.35.35 0 0 0-.496 0L3.5 12.453V.348a.35.35 0 0 0-.7 0v12.105L.598 10.254c-.137-.137-.359-.137-.492 0a.35.35 0 0 0 0 .492l2.797 2.801a.35.35 0 0 0 .496 0L6.2 10.746c.137-.137.137-.355 0-.492zm3.25 1.644H8.051a.35.35 0 0 1-.352-.348v-1.402a.35.35 0 0 1 .352-.348h1.398a.35.35 0 0 1 .352.348v1.402a.35.35 0 0 1-.352.348zm-1.051-.699h.703V10.5h-.703zm2.454-2.097H8.051c-.195 0-.352-.16-.352-.352V7.352A.35.35 0 0 1 8.051 7h2.801a.35.35 0 0 1 .348.352V8.75c0 .191-.156.352-.348.352zm-2.453-.703H10.5V7.7H8.398zm3.851-2.098H8.051a.35.35 0 0 1-.352-.352V4.551a.35.35 0 0 1 .352-.352h4.199c.191 0 .352.156.352.352v1.398c0 .195-.16.352-.352.352zm-3.852-.699h3.5v-.703h-3.5zm5.25-2.102H8.051a.35.35 0 0 1-.352-.352V1.75c0-.191.156-.352.352-.352h5.598c.195 0 .352.16.352.352v1.398a.35.35 0 0 1-.352.352zm-5.25-.699H13.3v-.699H8.398zm0 0"></path>';
 function $05fbe84eb34564ec$export$d10e63059ddb9fd4(props = {}) {
-  return $i7OB2$ssrElement("svg", $i7OB2$mergeProps({
+  return $i7OB2$ssrElement("svg", $i7OB2$mergeProps1({
     xmlns: "http://www.w3.org/2000/svg",
     width: "14",
     height: "14",
@@ -4506,7 +4587,7 @@ function $757dac7f7c6c5241$export$9bf11afa910f536e({
           })));
         },
         get children() {
-          return $i7OB2$ssr($757dac7f7c6c5241$var$_tmpl$5, $i7OB2$ssrHydrationKey(), $i7OB2$escape($i7OB2$createComponent((0, $fab07f52c9861732$export$3f1a388cc0d8fed7), $i7OB2$mergeProps(args_for_filtering_, {
+          return $i7OB2$ssr($757dac7f7c6c5241$var$_tmpl$5, $i7OB2$ssrHydrationKey(), $i7OB2$escape($i7OB2$createComponent((0, $fab07f52c9861732$export$3f1a388cc0d8fed7), $i7OB2$mergeProps1(args_for_filtering_, {
             are_in_modal_: true
           }))));
         }
@@ -6478,7 +6559,7 @@ function $22e59517c2ec94d3$export$1c641004b5485fed() {
 }
 const $16f0ed5ea30d8d9c$var$_tmpl$ = '<path d="M19.811 20.174l-6.234-6.809a7.96 7.96 0 0 0 .923-1.179c.274-.424.502-.865.687-1.323a8.04 8.04 0 0 0 .42-1.436 7.88 7.88 0 0 0 .144-1.507c0-.526-.051-1.042-.154-1.548-.096-.506-.243-.995-.441-1.466s-.441-.919-.728-1.343a8.28 8.28 0 0 0-.984-1.21 7.86 7.86 0 0 0-1.2-.984A7.56 7.56 0 0 0 10.89.651C10.418.453 9.929.302 9.423.2S8.401.046 7.875.046 6.833.097 6.327.2 5.332.453 4.86.651a7.56 7.56 0 0 0-1.354.718c-.431.287-.831.615-1.2.984a8.28 8.28 0 0 0-.984 1.21 7.73 7.73 0 0 0-.728 1.343c-.198.472-.349.96-.451 1.466A8.31 8.31 0 0 0 0 7.921a8.31 8.31 0 0 0 .144 1.548c.103.506.253.995.451 1.466a8.08 8.08 0 0 0 .728 1.354 7.86 7.86 0 0 0 .984 1.2 7.54 7.54 0 0 0 1.2.995c.431.287.882.53 1.354.728.472.191.96.338 1.466.441a8.31 8.31 0 0 0 1.548.144c.451 0 .896-.038 1.333-.113a7.83 7.83 0 0 0 1.282-.328 7.55 7.55 0 0 0 1.2-.533 8.08 8.08 0 0 0 1.107-.749l6.245 6.809a.45.45 0 0 0 .174.123.55.55 0 0 0 .205.041.61.61 0 0 0 .195-.031c.061-.021.116-.055.164-.102.109-.096.164-.219.164-.369.007-.144-.038-.267-.133-.369zM1.046 7.921c0-.937.178-1.818.533-2.646.362-.834.851-1.559 1.466-2.174.622-.615 1.347-1.101 2.174-1.456.827-.362 1.712-.543 2.656-.543s1.829.181 2.656.543c.827.355 1.548.841 2.164 1.456.622.615 1.111 1.34 1.466 2.174a6.52 6.52 0 0 1 .543 2.646c0 .943-.181 1.829-.543 2.656a6.89 6.89 0 0 1-1.466 2.174c-.615.615-1.336 1.104-2.164 1.466-.827.356-1.712.533-2.656.533s-1.829-.178-2.656-.533c-.827-.362-1.552-.851-2.174-1.466-.615-.622-1.104-1.347-1.466-2.174-.355-.827-.533-1.712-.533-2.656z"></path>';
 function $16f0ed5ea30d8d9c$export$82eafebb825fc23f(props = {}) {
-  return $i7OB2$ssrElement("svg", $i7OB2$mergeProps(props, {
+  return $i7OB2$ssrElement("svg", $i7OB2$mergeProps1(props, {
     xmlns: "http://www.w3.org/2000/svg",
     width: "20",
     height: "22"
@@ -6537,7 +6618,7 @@ function $172e1b898d457050$export$7de92c4c2205ebf3({
   const should_show = $i7OB2$createMemo(() => !!((recommendations_resource.loading || recommendations_resource()?.length) && all_products_loaded_()));
   const num_placeholders_ = $i7OB2$createMemo(() => (0, $7747fe1a8c5652e3$export$6c9030e511152266) + get_showing_recommendation_rows() * Math.max(...layout_options_().cols_at_size.map(([per_column]) => per_column)));
   // Don't tear down elements every time one updates the page - don't put them within <Show>
-  const elements = $i7OB2$ssr($172e1b898d457050$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape(i18n_.search_recs_title_()), $i7OB2$escape($a458486f22b22f63$export$a2cc176055f8f08()), $i7OB2$escape($i7OB2$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), $i7OB2$mergeProps({
+  const elements = $i7OB2$ssr($172e1b898d457050$var$_tmpl$, $i7OB2$ssrHydrationKey(), $i7OB2$escape(i18n_.search_recs_title_()), $i7OB2$escape($a458486f22b22f63$export$a2cc176055f8f08()), $i7OB2$escape($i7OB2$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), $i7OB2$mergeProps1({
     rows: rows_object,
     layout: "grid",
     element_attributes: {
@@ -7018,7 +7099,7 @@ function $f3213c0640246d58$export$ba17c5b7e6dda39f({
 }
 const $190927650b4840eb$var$_tmpl$ = '<path d="M56 26.455a13.71 13.71 0 0 0-9.578 3.967A13.71 13.71 0 0 0 42.455 40v176a13.71 13.71 0 0 0 3.967 9.578A13.71 13.71 0 0 0 56 229.545h144A13.71 13.71 0 0 0 213.545 216V88a2.456 2.456 0 0 1 0-.002c.001-1.452-.597-2.895-1.623-3.922l-55.998-55.998a5.61 5.61 0 0 0-3.922-1.623 2.456 2.456 0 0 1-.002 0zm0 11.09h88A2.456 2.456 0 0 1 146.455 40v48c0 2.903 2.642 5.545 5.545 5.545h48A2.456 2.456 0 0 1 202.455 96v120a2.456 2.456 0 0 1-2.455 2.455H56A2.456 2.456 0 0 1 53.545 216V40A2.456 2.456 0 0 1 56 37.545zm103.061 11.498a2.456 2.456 0 0 1 2.676.531l28.689 28.689a2.456 2.456 0 0 1-1.736 4.191H160A2.456 2.456 0 0 1 157.545 80V51.311a2.456 2.456 0 0 1 1.516-2.268zM96 130.455c-2.903 0-5.545 2.642-5.545 5.545s2.642 5.545 5.545 5.545h64c2.903 0 5.545-2.642 5.545-5.545s-2.642-5.545-5.545-5.545zm0 32c-2.903 0-5.545 2.642-5.545 5.545s2.642 5.545 5.545 5.545h64c2.903 0 5.545-2.642 5.545-5.545s-2.642-5.545-5.545-5.545z"></path>';
 function $190927650b4840eb$export$605674723bcc715c(props = {}) {
-  return $i7OB2$ssrElement("svg", $i7OB2$mergeProps({
+  return $i7OB2$ssrElement("svg", $i7OB2$mergeProps1({
     xmlns: "http://www.w3.org/2000/svg",
     width: "32",
     height: "32",
@@ -8092,7 +8173,7 @@ function $b2bf2cdcff8142d8$export$f631859cab12b342({
     if (content_result_) return $i7OB2$ssrElement("a", attributes, () => $i7OB2$escape(children), true);
     return $i7OB2$ssrElement("div", attributes, () => $i7OB2$escape(children), true);
   };
-  return $i7OB2$ssr($b2bf2cdcff8142d8$var$_tmpl$2, $i7OB2$ssrHydrationKey(), $i7OB2$escape($i7OB2$createComponent(LinkIfPossible, $i7OB2$mergeProps(make_link_attributes, {
+  return $i7OB2$ssr($b2bf2cdcff8142d8$var$_tmpl$2, $i7OB2$ssrHydrationKey(), $i7OB2$escape($i7OB2$createComponent(LinkIfPossible, $i7OB2$mergeProps1(make_link_attributes, {
     tabIndex: "-1",
     get children() {
       return $i7OB2$createComponent((0, $190927650b4840eb$export$605674723bcc715c), {
@@ -8100,7 +8181,7 @@ function $b2bf2cdcff8142d8$export$f631859cab12b342({
         height: "28"
       });
     }
-  }))), $i7OB2$escape($i7OB2$createComponent(LinkIfPossible, $i7OB2$mergeProps({
+  }))), $i7OB2$escape($i7OB2$createComponent(LinkIfPossible, $i7OB2$mergeProps1({
     "class": "content-title line-clamp"
   }, make_link_attributes, {
     get title() {
@@ -8232,7 +8313,7 @@ function $49de9d31aeea1b5e$export$6d0c9c22f6652669({
       return (0, $f8c929beb82c512b$export$2452208c79fe93ea).content;
     },
     number_of_results_: num_results
-  })), $i7OB2$escape($i7OB2$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), $i7OB2$mergeProps({
+  })), $i7OB2$escape($i7OB2$createComponent((0, $c8d5ff4524619fcd$export$d21e32dfedac04be), $i7OB2$mergeProps1({
     layout: "grid",
     element_attributes: {
       class: "cards"
@@ -8381,7 +8462,7 @@ function $7097477c78a89208$export$a54ec244c8863715({
   });
   const [sort_and_filter_element_, set_sort_and_filter_element_] = $i7OB2$createSignal();
   const no_results_text_ = $i7OB2$createMemo(() => (search_results_()?.content_search_links?.length ? i18n_.no_products_ : i18n_.no_results_text_)());
-  const results_for = $i7OB2$createComponent((0, $f8c929beb82c512b$export$9dd50d35b9d94fdf), $i7OB2$mergeProps({
+  const results_for = $i7OB2$createComponent((0, $f8c929beb82c512b$export$9dd50d35b9d94fdf), $i7OB2$mergeProps1({
     get type() {
       return (0, $f8c929beb82c512b$export$2452208c79fe93ea).products;
     },