@depict-ai/react-ui 1.0.7 → 1.0.8

package/dist/main.js

@@ -8,6 +8,7 @@ var $4GYXz$reactjsxruntime = require("react/jsx-runtime");
 var $4GYXz$reactdom = require("react-dom");
 var $4GYXz$solidjsstore = require("solid-js/store");
 var $4GYXz$depictaidpc = require("@depict-ai/dpc");
+var $4GYXz$depictaiuissr = require("@depict-ai/ui/ssr");
 
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
@@ -31,7 +32,7 @@ $parcel$export(module.exports, "version", () => $db7b67857900028b$export$83d89fb
 $parcel$export(module.exports, "Navigation", () => $b742053c966024b4$export$b8a61e5c71402559);
 /*! Depict.ai search and product listing react SDK wrapper */ // This is where the actual source of your React stuff should live
 // Note, if you add an export here, also add one in src-server/main.ts
-const $db7b67857900028b$export$83d89fbfd8236492 = "1.0.7";
+const $db7b67857900028b$export$83d89fbfd8236492 = "1.0.8";
 
 
 
@@ -106,7 +107,7 @@ function $b4d0d98857ed9934$export$74f3924c5027fe1d(cb) {
 }));
 const $b4d0d98857ed9934$export$775e6b3892b5ad52 = (url = location)=>url.pathname == (0, $4GYXz$solidjs.untrack)((0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search_page_path_[0]); // might have changed therefore get it from globalState
 const $b4d0d98857ed9934$export$30c8a12df09be0e4 = (url = location)=>(0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).known_category_paths.has(url.pathname);
-function $b4d0d98857ed9934$export$f6e64e17bd69eeef(solid_component, props, wrapper_type = "div", wrapper_style = {}) {
+function $b4d0d98857ed9934$export$f6e64e17bd69eeef({ solid_component: solid_component , props: props , wrapper_type: wrapper_type = "div" , wrapper_style: wrapper_style = {} , hydrate_function_when_ssr: hydrate_function_when_ssr  }) {
     const [portals, set_portals] = (0, $4GYXz$react.useState)([]);
     const wrapper_element_ref = (0, $4GYXz$react.useRef)();
     const [[store, write_store]] = (0, $4GYXz$react.useState)(()=>(0, $4GYXz$solidjsstore.createStore)(props));
@@ -114,13 +115,23 @@ function $b4d0d98857ed9934$export$f6e64e17bd69eeef(solid_component, props, wrapp
     write_store((0, $4GYXz$solidjsstore.reconcile)(props));
     (0, $4GYXz$react.useEffect)(()=>{
         const wrapper_element = wrapper_element_ref.current;
-        const dispose = (0, $4GYXz$solidjsweb.render)(()=>solid_component(store, set_portals), wrapper_element);
+        // If someone only rendered a solid component on the client that *could* be hydrated (no childNodes) then we fall back to `render` to avoid solid complaining about not being able to hydrate or crashing because the result of generateHydrationScript hasn't run at all
+        // This can happen for HMR or when SSR capable components are only rendered on the client
+        const render_function = hydrate_function_when_ssr && wrapper_element.childNodes.length ? hydrate_function_when_ssr : (0, $4GYXz$solidjsweb.render);
+        const dispose = render_function(()=>solid_component(store, set_portals), wrapper_element);
         return dispose;
     }, []);
-    return (0, $4GYXz$react.createElement)(wrapper_type, {
+    return (0, $4GYXz$react.createElement)((0, $4GYXz$react.Fragment), null, (0, $4GYXz$react.createElement)(wrapper_type, {
         ref: wrapper_element_ref,
-        style: wrapper_style
-    }, portals);
+        style: wrapper_style,
+        ...hydrate_function_when_ssr ? {
+            // We need this because on the server we put the solid SSR rendered string into html but it won't match on the client, luckily we can just suppress it
+            suppressHydrationWarning: true,
+            dangerouslySetInnerHTML: {
+                __html: ""
+            }
+        } : {}
+    }), ...portals);
 }
 function $b4d0d98857ed9934$export$e5139bbbb9a05035(component, is_set = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).required_state_set_[0]) {
     return (...args)=>{
@@ -235,9 +246,9 @@ function $6319748b4f0426f0$export$6453cbc34515a94d() {
         });
     }));
 }
-/*
- Here we want to be able to add padding that *definitely* gets applied and then be able to revert precisely to what was before.
- The best way to achieve this is using an animation that with the fill set to none. This is because animations have the absolute highest precedence in CSS, even higher than !important. Then, to revert to the old padding, we just play the animation which is 1ms long so, it immediately finishes and whatever was defined before takes precedence again.
+/*
+ Here we want to be able to add padding that *definitely* gets applied and then be able to revert precisely to what was before.
+ The best way to achieve this is using an animation that with the fill set to none. This is because animations have the absolute highest precedence in CSS, even higher than !important. Then, to revert to the old padding, we just play the animation which is 1ms long so, it immediately finishes and whatever was defined before takes precedence again.
  */ function $6319748b4f0426f0$var$addLotsOfPadding() {
     if ($6319748b4f0426f0$var$padding_animation) return; // We're already showing a bunch of padding
     $6319748b4f0426f0$var$padding_animation = document.body.animate({
@@ -402,7 +413,10 @@ const $883a881f7926405d$export$80e99ee6b29cadd2 = /*#__PURE__*/ (0, $4GYXz$react
 
 
 function $7ad7a3d0011b7b1b$export$a54ec244c8863715(props) {
-    return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)($7ad7a3d0011b7b1b$var$SolidSearchPage), props);
+    return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)({
+        solid_component: (0, $b4d0d98857ed9934$export$e5139bbbb9a05035)($7ad7a3d0011b7b1b$var$SolidSearchPage),
+        props: props
+    });
 }
 function $7ad7a3d0011b7b1b$var$SolidSearchPage(props, set_portals) {
     const depict_search = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search;
@@ -445,8 +459,13 @@ function $7ad7a3d0011b7b1b$var$SolidSearchPage(props, set_portals) {
 
 
 function $5aa5fcb9f8a2bebc$export$f7d2f673fc2f091d(props) {
-    return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)(// @ts-ignore
-    (0, $b4d0d98857ed9934$export$e5139bbbb9a05035)($5aa5fcb9f8a2bebc$var$SolidCategoryPage), props, "div", {});
+    return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)({
+        // @ts-ignore
+        solid_component: (0, $b4d0d98857ed9934$export$e5139bbbb9a05035)($5aa5fcb9f8a2bebc$var$SolidCategoryPage),
+        props: props,
+        wrapper_type: "div",
+        wrapper_style: {}
+    });
 }
 function $5aa5fcb9f8a2bebc$var$SolidCategoryPage(props, set_portals) {
     const depict_category = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).category;
@@ -487,7 +506,10 @@ function $5aa5fcb9f8a2bebc$var$SolidCategoryPage(props, set_portals) {
 
 
 function $d88e98b11c182b8e$export$5646050d516e06bc() {
-    return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)($d88e98b11c182b8e$var$vanilla_breadcrumbs), undefined);
+    return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)({
+        solid_component: (0, $b4d0d98857ed9934$export$e5139bbbb9a05035)($d88e98b11c182b8e$var$vanilla_breadcrumbs),
+        props: undefined
+    });
 }
 function $d88e98b11c182b8e$var$vanilla_breadcrumbs() {
     const depict_category = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).category;
@@ -502,7 +524,10 @@ function $d88e98b11c182b8e$var$vanilla_breadcrumbs() {
 
 
 function $f16af0e861aff3d0$export$466cdc317043f6cb() {
-    return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)($f16af0e861aff3d0$var$vanilla_quick_links), {});
+    return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)({
+        solid_component: (0, $b4d0d98857ed9934$export$e5139bbbb9a05035)($f16af0e861aff3d0$var$vanilla_quick_links),
+        props: {}
+    });
 }
 function $f16af0e861aff3d0$var$vanilla_quick_links() {
     const depict_category = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).category;
@@ -516,23 +541,36 @@ function $f16af0e861aff3d0$var$vanilla_quick_links() {
 
 
 
-const $df522c8a81ed5a01$export$3f37af283f8fb843 = (props)=>{
-    return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((solid_props_store)=>(0, $4GYXz$solidjs.createMemo)(()=>(0, $4GYXz$depictaiutilishared.ContainedPlaceholderImage)({
-                aspect_ratio: solid_props_store.aspectRatio
-            })), props, "div", {
-        "height": "100%"
+const $df522c8a81ed5a01$export$3f37af283f8fb843 = (raw_react_props)=>{
+    const react_props = {
+        class: raw_react_props.className,
+        ...raw_react_props
+    };
+    return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)({
+        solid_component: (props_store)=>(0, $4GYXz$depictaiuissr.ImagePlaceholder)(props_store),
+        props: react_props,
+        wrapper_type: "span",
+        hydrate_function_when_ssr: (0, $4GYXz$solidjsweb.hydrate)
     });
 };
 
 
 
 
-const $7c8b440edc188ad5$export$89c6019e4baa40b1 = ({ width: width , height: height  })=>{
-    return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)(()=>(0, $4GYXz$depictaiutilishared.Placeholder)({
-            width: width,
-            height: height
-        }), {}, "div", {
-        "height": "100%"
+
+const $7c8b440edc188ad5$export$89c6019e4baa40b1 = (raw_react_props)=>{
+    const react_props = {
+        class: raw_react_props.className,
+        ...raw_react_props
+    };
+    return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)({
+        solid_component: (props_store)=>(0, $4GYXz$depictaiuissr.TextPlaceholder)(props_store),
+        props: react_props,
+        wrapper_type: "span",
+        hydrate_function_when_ssr: (0, $4GYXz$solidjsweb.hydrate),
+        wrapper_style: {
+            "height": "100%"
+        }
     });
 };
 
@@ -576,10 +614,13 @@ function $ae73b15c325f1b21$export$912994940e660d32(params = {}) {
 
 const $cd591d0e4ce29df7$export$bde46b5bb6287cea = (props)=>{
     const ReactSearchField = ()=>{
-        return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)(()=>(0, $4GYXz$depictaiui.SearchField)({
-                depict_search: (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search,
-                aligner_ref: props?.alignerRef?.current
-            })), {});
+        return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)({
+            solid_component: (0, $b4d0d98857ed9934$export$e5139bbbb9a05035)(()=>(0, $4GYXz$depictaiui.SearchField)({
+                    depict_search: (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search,
+                    aligner_ref: props?.alignerRef?.current
+                })),
+            props: {}
+        });
     };
     return ReactSearchField;
 };

package/dist/module.js

@@ -1,17 +1,18 @@
-import {add_to_version_info as $TZSbU$add_to_version_info, catchify as $TZSbU$catchify, queueMacroTask as $TZSbU$queueMacroTask, instant_exec_on_suspect_history_change as $TZSbU$instant_exec_on_suspect_history_change, ContainedPlaceholderImage as $TZSbU$ContainedPlaceholderImage, Placeholder as $TZSbU$Placeholder} from "@depict-ai/utilishared";
+import {add_to_version_info as $TZSbU$add_to_version_info, catchify as $TZSbU$catchify, queueMacroTask as $TZSbU$queueMacroTask, instant_exec_on_suspect_history_change as $TZSbU$instant_exec_on_suspect_history_change} from "@depict-ai/utilishared";
 import {CategoryTitle as $43099132aad1ceb6$re_export$CategoryTitle, embedded_num_products as $43099132aad1ceb6$re_export$EmbeddedNumProducts, DepictAPI as $TZSbU$DepictAPI, DepictSearch as $TZSbU$DepictSearch, DepictCategory as $TZSbU$DepictCategory, ProductCardError as $TZSbU$ProductCardError, get_search_query_updating_blocked_signal as $TZSbU$get_search_query_updating_blocked_signal, SearchPage as $TZSbU$SearchPage, defaultColsAtSize as $TZSbU$defaultColsAtSize, defaultGridSpacing as $TZSbU$defaultGridSpacing, CategoryPage as $TZSbU$CategoryPage, defaultCategoryTitlePlugin as $TZSbU$defaultCategoryTitlePlugin, BreadCrumbs as $TZSbU$BreadCrumbs, QuickLinks as $TZSbU$QuickLinks, open_modal_with_alignment as $TZSbU$open_modal_with_alignment, SearchField as $TZSbU$SearchField, fetchDepictRecommendations as $TZSbU$fetchDepictRecommendations} from "@depict-ai/ui";
-import {createRoot as $TZSbU$createRoot, untrack as $TZSbU$untrack, createEffect as $TZSbU$createEffect, createComponent as $TZSbU$createComponent, Show as $TZSbU$Show, getOwner as $TZSbU$getOwner, runWithOwner as $TZSbU$runWithOwner, onCleanup as $TZSbU$onCleanup, createSignal as $TZSbU$createSignal, createComputed as $TZSbU$createComputed, createMemo as $TZSbU$createMemo} from "solid-js";
+import {createRoot as $TZSbU$createRoot, untrack as $TZSbU$untrack, createEffect as $TZSbU$createEffect, createComponent as $TZSbU$createComponent, Show as $TZSbU$Show, getOwner as $TZSbU$getOwner, runWithOwner as $TZSbU$runWithOwner, onCleanup as $TZSbU$onCleanup, createSignal as $TZSbU$createSignal, createComputed as $TZSbU$createComputed} from "solid-js";
 import {createElement as $TZSbU$createElement, Fragment as $TZSbU$Fragment, useState as $TZSbU$useState, useRef as $TZSbU$useRef, useEffect as $TZSbU$useEffect, Component as $TZSbU$Component, forwardRef as $TZSbU$forwardRef} from "react";
 import {defaultLocale as $TZSbU$defaultLocale} from "@depict-ai/ui/locales";
-import {render as $TZSbU$render} from "solid-js/web";
+import {render as $TZSbU$render, hydrate as $TZSbU$hydrate} from "solid-js/web";
 import {jsx as $TZSbU$jsx} from "react/jsx-runtime";
 import {createPortal as $TZSbU$createPortal} from "react-dom";
 import {createStore as $TZSbU$createStore, reconcile as $TZSbU$reconcile} from "solid-js/store";
 import {DPC as $TZSbU$DPC} from "@depict-ai/dpc";
+import {ImagePlaceholder as $TZSbU$ImagePlaceholder, TextPlaceholder as $TZSbU$TextPlaceholder} from "@depict-ai/ui/ssr";
 
 /*! 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
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "1.0.7";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "1.0.8";
 
 
 
@@ -86,7 +87,7 @@ function $c83ba9ab79386687$export$74f3924c5027fe1d(cb) {
 }));
 const $c83ba9ab79386687$export$775e6b3892b5ad52 = (url = location)=>url.pathname == (0, $TZSbU$untrack)((0, $42858f023ef23dab$export$8e769ad4338a911e).search_page_path_[0]); // might have changed therefore get it from globalState
 const $c83ba9ab79386687$export$30c8a12df09be0e4 = (url = location)=>(0, $42858f023ef23dab$export$8e769ad4338a911e).known_category_paths.has(url.pathname);
-function $c83ba9ab79386687$export$f6e64e17bd69eeef(solid_component, props, wrapper_type = "div", wrapper_style = {}) {
+function $c83ba9ab79386687$export$f6e64e17bd69eeef({ solid_component: solid_component , props: props , wrapper_type: wrapper_type = "div" , wrapper_style: wrapper_style = {} , hydrate_function_when_ssr: hydrate_function_when_ssr  }) {
     const [portals, set_portals] = (0, $TZSbU$useState)([]);
     const wrapper_element_ref = (0, $TZSbU$useRef)();
     const [[store, write_store]] = (0, $TZSbU$useState)(()=>(0, $TZSbU$createStore)(props));
@@ -94,13 +95,23 @@ function $c83ba9ab79386687$export$f6e64e17bd69eeef(solid_component, props, wrapp
     write_store((0, $TZSbU$reconcile)(props));
     (0, $TZSbU$useEffect)(()=>{
         const wrapper_element = wrapper_element_ref.current;
-        const dispose = (0, $TZSbU$render)(()=>solid_component(store, set_portals), wrapper_element);
+        // If someone only rendered a solid component on the client that *could* be hydrated (no childNodes) then we fall back to `render` to avoid solid complaining about not being able to hydrate or crashing because the result of generateHydrationScript hasn't run at all
+        // This can happen for HMR or when SSR capable components are only rendered on the client
+        const render_function = hydrate_function_when_ssr && wrapper_element.childNodes.length ? hydrate_function_when_ssr : (0, $TZSbU$render);
+        const dispose = render_function(()=>solid_component(store, set_portals), wrapper_element);
         return dispose;
     }, []);
-    return (0, $TZSbU$createElement)(wrapper_type, {
+    return (0, $TZSbU$createElement)((0, $TZSbU$Fragment), null, (0, $TZSbU$createElement)(wrapper_type, {
         ref: wrapper_element_ref,
-        style: wrapper_style
-    }, portals);
+        style: wrapper_style,
+        ...hydrate_function_when_ssr ? {
+            // We need this because on the server we put the solid SSR rendered string into html but it won't match on the client, luckily we can just suppress it
+            suppressHydrationWarning: true,
+            dangerouslySetInnerHTML: {
+                __html: ""
+            }
+        } : {}
+    }), ...portals);
 }
 function $c83ba9ab79386687$export$e5139bbbb9a05035(component, is_set = (0, $42858f023ef23dab$export$8e769ad4338a911e).required_state_set_[0]) {
     return (...args)=>{
@@ -215,9 +226,9 @@ function $8071251ee4e9ffa1$export$6453cbc34515a94d() {
         });
     }));
 }
-/*
- Here we want to be able to add padding that *definitely* gets applied and then be able to revert precisely to what was before.
- The best way to achieve this is using an animation that with the fill set to none. This is because animations have the absolute highest precedence in CSS, even higher than !important. Then, to revert to the old padding, we just play the animation which is 1ms long so, it immediately finishes and whatever was defined before takes precedence again.
+/*
+ Here we want to be able to add padding that *definitely* gets applied and then be able to revert precisely to what was before.
+ The best way to achieve this is using an animation that with the fill set to none. This is because animations have the absolute highest precedence in CSS, even higher than !important. Then, to revert to the old padding, we just play the animation which is 1ms long so, it immediately finishes and whatever was defined before takes precedence again.
  */ function $8071251ee4e9ffa1$var$addLotsOfPadding() {
     if ($8071251ee4e9ffa1$var$padding_animation) return; // We're already showing a bunch of padding
     $8071251ee4e9ffa1$var$padding_animation = document.body.animate({
@@ -382,7 +393,10 @@ const $421f32789b6f111f$export$80e99ee6b29cadd2 = /*#__PURE__*/ (0, $TZSbU$forwa
 
 
 function $4a678f0c87b12e78$export$a54ec244c8863715(props) {
-    return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((0, $c83ba9ab79386687$export$e5139bbbb9a05035)($4a678f0c87b12e78$var$SolidSearchPage), props);
+    return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)({
+        solid_component: (0, $c83ba9ab79386687$export$e5139bbbb9a05035)($4a678f0c87b12e78$var$SolidSearchPage),
+        props: props
+    });
 }
 function $4a678f0c87b12e78$var$SolidSearchPage(props, set_portals) {
     const depict_search = (0, $42858f023ef23dab$export$8e769ad4338a911e).search;
@@ -425,8 +439,13 @@ function $4a678f0c87b12e78$var$SolidSearchPage(props, set_portals) {
 
 
 function $48d7f568740a317d$export$f7d2f673fc2f091d(props) {
-    return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)(// @ts-ignore
-    (0, $c83ba9ab79386687$export$e5139bbbb9a05035)($48d7f568740a317d$var$SolidCategoryPage), props, "div", {});
+    return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)({
+        // @ts-ignore
+        solid_component: (0, $c83ba9ab79386687$export$e5139bbbb9a05035)($48d7f568740a317d$var$SolidCategoryPage),
+        props: props,
+        wrapper_type: "div",
+        wrapper_style: {}
+    });
 }
 function $48d7f568740a317d$var$SolidCategoryPage(props, set_portals) {
     const depict_category = (0, $42858f023ef23dab$export$8e769ad4338a911e).category;
@@ -467,7 +486,10 @@ function $48d7f568740a317d$var$SolidCategoryPage(props, set_portals) {
 
 
 function $f866f7ed9f751af4$export$5646050d516e06bc() {
-    return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((0, $c83ba9ab79386687$export$e5139bbbb9a05035)($f866f7ed9f751af4$var$vanilla_breadcrumbs), undefined);
+    return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)({
+        solid_component: (0, $c83ba9ab79386687$export$e5139bbbb9a05035)($f866f7ed9f751af4$var$vanilla_breadcrumbs),
+        props: undefined
+    });
 }
 function $f866f7ed9f751af4$var$vanilla_breadcrumbs() {
     const depict_category = (0, $42858f023ef23dab$export$8e769ad4338a911e).category;
@@ -482,7 +504,10 @@ function $f866f7ed9f751af4$var$vanilla_breadcrumbs() {
 
 
 function $b68a14248b7ef667$export$466cdc317043f6cb() {
-    return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((0, $c83ba9ab79386687$export$e5139bbbb9a05035)($b68a14248b7ef667$var$vanilla_quick_links), {});
+    return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)({
+        solid_component: (0, $c83ba9ab79386687$export$e5139bbbb9a05035)($b68a14248b7ef667$var$vanilla_quick_links),
+        props: {}
+    });
 }
 function $b68a14248b7ef667$var$vanilla_quick_links() {
     const depict_category = (0, $42858f023ef23dab$export$8e769ad4338a911e).category;
@@ -496,23 +521,36 @@ function $b68a14248b7ef667$var$vanilla_quick_links() {
 
 
 
-const $f446a84f85ba06f6$export$3f37af283f8fb843 = (props)=>{
-    return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((solid_props_store)=>(0, $TZSbU$createMemo)(()=>(0, $TZSbU$ContainedPlaceholderImage)({
-                aspect_ratio: solid_props_store.aspectRatio
-            })), props, "div", {
-        "height": "100%"
+const $f446a84f85ba06f6$export$3f37af283f8fb843 = (raw_react_props)=>{
+    const react_props = {
+        class: raw_react_props.className,
+        ...raw_react_props
+    };
+    return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)({
+        solid_component: (props_store)=>(0, $TZSbU$ImagePlaceholder)(props_store),
+        props: react_props,
+        wrapper_type: "span",
+        hydrate_function_when_ssr: (0, $TZSbU$hydrate)
     });
 };
 
 
 
 
-const $cbd250061abf11cb$export$89c6019e4baa40b1 = ({ width: width , height: height  })=>{
-    return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)(()=>(0, $TZSbU$Placeholder)({
-            width: width,
-            height: height
-        }), {}, "div", {
-        "height": "100%"
+
+const $cbd250061abf11cb$export$89c6019e4baa40b1 = (raw_react_props)=>{
+    const react_props = {
+        class: raw_react_props.className,
+        ...raw_react_props
+    };
+    return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)({
+        solid_component: (props_store)=>(0, $TZSbU$TextPlaceholder)(props_store),
+        props: react_props,
+        wrapper_type: "span",
+        hydrate_function_when_ssr: (0, $TZSbU$hydrate),
+        wrapper_style: {
+            "height": "100%"
+        }
     });
 };
 
@@ -556,10 +594,13 @@ function $70344e5e0d0fea06$export$912994940e660d32(params = {}) {
 
 const $cdd7408b22d1586a$export$bde46b5bb6287cea = (props)=>{
     const ReactSearchField = ()=>{
-        return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)((0, $c83ba9ab79386687$export$e5139bbbb9a05035)(()=>(0, $TZSbU$SearchField)({
-                depict_search: (0, $42858f023ef23dab$export$8e769ad4338a911e).search,
-                aligner_ref: props?.alignerRef?.current
-            })), {});
+        return (0, $c83ba9ab79386687$export$f6e64e17bd69eeef)({
+            solid_component: (0, $c83ba9ab79386687$export$e5139bbbb9a05035)(()=>(0, $TZSbU$SearchField)({
+                    depict_search: (0, $42858f023ef23dab$export$8e769ad4338a911e).search,
+                    aligner_ref: props?.alignerRef?.current
+                })),
+            props: {}
+        });
     };
     return ReactSearchField;
 };