@depict-ai/react-ui 2.0.12 → 2.1.0

package/latest/index.js

@@ -1,6 +1,6 @@
 import { add_to_version_info as $2GFvs$add_to_version_info, catchify as $2GFvs$catchify, queueMacroTask as $2GFvs$queueMacroTask, instant_exec_on_suspect_history_change as $2GFvs$instant_exec_on_suspect_history_change, derror as $2GFvs$derror } from "@depict-ai/utilishared/latest";
 import { CategoryTitle as $43099132aad1ceb6$re_export$CategoryTitle, embedded_num_products as $43099132aad1ceb6$re_export$EmbeddedNumProducts, DepictAPI as $2GFvs$DepictAPI, DepictSearch as $2GFvs$DepictSearch, DepictCategory as $2GFvs$DepictCategory, get_search_query_updating_blocked_signal as $2GFvs$get_search_query_updating_blocked_signal, SearchPage as $2GFvs$SearchPage, defaultColsAtSize as $2GFvs$defaultColsAtSize, defaultGridSpacing as $2GFvs$defaultGridSpacing, ProductCardError as $2GFvs$ProductCardError, CategoryPage as $2GFvs$CategoryPage, defaultCategoryTitlePlugin as $2GFvs$defaultCategoryTitlePlugin, BreadCrumbs as $2GFvs$BreadCrumbs, QuickLinks as $2GFvs$QuickLinks, ImagePlaceholder as $2GFvs$ImagePlaceholder, TextPlaceholder as $2GFvs$TextPlaceholder, RecommendationSlider as $2GFvs$RecommendationSlider, RecommendationGrid as $2GFvs$RecommendationGrid, open_modal_with_alignment as $2GFvs$open_modal_with_alignment, SearchField as $2GFvs$SearchField, fetchDepictRecommendations as $2GFvs$fetchDepictRecommendations } from "@depict-ai/ui/latest";
-import { untrack as $2GFvs$untrack, createRoot as $2GFvs$createRoot, createEffect as $2GFvs$createEffect, createMemo as $2GFvs$createMemo, createComponent as $2GFvs$createComponent, Show as $2GFvs$Show, createSignal as $2GFvs$createSignal, createComputed as $2GFvs$createComputed, onCleanup as $2GFvs$onCleanup, getOwner as $2GFvs$getOwner, runWithOwner as $2GFvs$runWithOwner, on as $2GFvs$on } from "solid-js";
+import { untrack as $2GFvs$untrack, createRoot as $2GFvs$createRoot, createEffect as $2GFvs$createEffect, createMemo as $2GFvs$createMemo, createComponent as $2GFvs$createComponent, Show as $2GFvs$Show, createSignal as $2GFvs$createSignal, createComputed as $2GFvs$createComputed, onCleanup as $2GFvs$onCleanup, getOwner as $2GFvs$getOwner, runWithOwner as $2GFvs$runWithOwner, on as $2GFvs$on, mapArray as $2GFvs$mapArray } from "solid-js";
 import { createElement as $2GFvs$createElement, Fragment as $2GFvs$Fragment, useEffect as $2GFvs$useEffect, useState as $2GFvs$useState, useRef as $2GFvs$useRef, forwardRef as $2GFvs$forwardRef, Component as $2GFvs$Component, useCallback as $2GFvs$useCallback } from "react";
 import { defaultLocale as $2GFvs$defaultLocale } from "@depict-ai/ui/locales/latest";
 import { render as $2GFvs$render, hydrate as $2GFvs$hydrate, isServer as $2GFvs$isServer } from "solid-js/web";
@@ -14,7 +14,7 @@ import { renderToString as $2GFvs$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", "latest");
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "2.0.12";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "2.1.0";
 const $42858f023ef23dab$export$8e769ad4338a911e = {
   usedLocale: $2GFvs$createSignal((0, $2GFvs$defaultLocale)),
   search_instances: new Map(),
@@ -467,8 +467,8 @@ class $d5c9e1f3545b4984$export$d0f82e3ef89b1f22 extends (0, $2GFvs$Component) {
     return this.props.children;
   }
 }
-async function $75f1064c8b836348$export$79c79419c1ef0081({
-  display: display,
+async function $bcf84a32dc612a43$export$32024253978abdc7({
+  component_props: component_props,
   component_portals: component_portals,
   set_portals: set_portals,
   get_react_template: get_react_template
@@ -485,9 +485,7 @@ async function $75f1064c8b836348$export$79c79419c1ef0081({
     const [react_template, set_react_template] = $2GFvs$useState(() => $2GFvs$untrack(get_react_template));
     call_when_template_changes = set_react_template;
     return react_template(props);
-  }, {
-    display: display
-  });
+  }, component_props);
   const reactProductCardInErrorBoundary = $2GFvs$jsx((0, $d5c9e1f3545b4984$export$d0f82e3ef89b1f22), {
     children: reactProductCard,
     on_error: error => $2GFvs$runWithOwner(owner, () => {
@@ -515,6 +513,28 @@ async function $75f1064c8b836348$export$79c79419c1ef0081({
   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];
 }
+function $73f59b087b0180d0$export$84006927f874e911(blocks, component_portals, set_portals) {
+  return $2GFvs$mapArray(blocks, block => {
+    if (!block) return block;
+    return {
+      get span_columns() {
+        return block?.spanColumns;
+      },
+      get span_rows() {
+        return block?.spanRows;
+      },
+      get position() {
+        return block?.position;
+      },
+      content: () => $bcf84a32dc612a43$export$32024253978abdc7({
+        get_react_template: () => block.content,
+        component_portals: component_portals,
+        set_portals: set_portals,
+        component_props: {}
+      })
+    };
+  });
+}
 const $4a678f0c87b12e78$var$rendered_components_with_state_key = new Set();
 function $4a678f0c87b12e78$export$a54ec244c8863715(props) {
   return $c83ba9ab79386687$export$f6e64e17bd69eeef({
@@ -562,6 +582,7 @@ function $4a678f0c87b12e78$var$SolidSearchPage(props, set_portals) {
   return $2GFvs$createMemo(() => {
     const stateKey = $2GFvs$untrack(() => props.stateKey);
     if ($4a678f0c87b12e78$var$rendered_components_with_state_key.has(stateKey)) throw new Error(`You have multiple SearchPage components with the same stateKey: ${stateKey}. Each SearchPage component must have a unique stateKey.`);
+    const transformed_content_blocks = $73f59b087b0180d0$export$84006927f874e911(() => props.contentBlocksByRow, component_portals, set_portals);
     $4a678f0c87b12e78$var$rendered_components_with_state_key.add(stateKey);
     $2GFvs$onCleanup(() => $4a678f0c87b12e78$var$rendered_components_with_state_key.delete(stateKey));
     return $2GFvs$SearchPage({
@@ -576,12 +597,17 @@ function $4a678f0c87b12e78$var$SolidSearchPage(props, set_portals) {
         return props.gridSpacing ?? (0, $2GFvs$defaultGridSpacing);
       },
       depict_search: depict_search(),
-      product_card_template: display => $75f1064c8b836348$export$79c79419c1ef0081({
-        display: display,
+      product_card_template: display => $bcf84a32dc612a43$export$32024253978abdc7({
+        component_props: {
+          display: display
+        },
         get_react_template: () => props.productCard,
         component_portals: component_portals,
         set_portals: set_portals
-      })
+      }),
+      get content_blocks_by_row() {
+        return transformed_content_blocks();
+      }
     });
   });
 }
@@ -640,6 +666,7 @@ function $48d7f568740a317d$var$SolidCategoryPage(props, set_portals) {
     if ($48d7f568740a317d$var$rendered_components_with_state_key.has(stateKey)) throw new Error(`You have multiple CategoryPage components with the same stateKey: ${stateKey}. Each CategoryPage component must have a unique stateKey.`);
     $48d7f568740a317d$var$rendered_components_with_state_key.add(stateKey);
     $2GFvs$onCleanup(() => $48d7f568740a317d$var$rendered_components_with_state_key.delete(stateKey));
+    const transformed_content_blocks = $73f59b087b0180d0$export$84006927f874e911(() => props.contentBlocksByRow, component_portals, set_portals);
     return $2GFvs$CategoryPage({
       depict_category: depict_category(),
       get cols_at_size() {
@@ -655,8 +682,13 @@ function $48d7f568740a317d$var$SolidCategoryPage(props, set_portals) {
       get show_quicklinks() {
         return props.showQuicklinks;
       },
-      product_card_template: display => $75f1064c8b836348$export$79c79419c1ef0081({
-        display: display,
+      get content_blocks_by_row() {
+        return transformed_content_blocks();
+      },
+      product_card_template: display => $bcf84a32dc612a43$export$32024253978abdc7({
+        component_props: {
+          display: display
+        },
         get_react_template: () => props.productCard,
         component_portals: component_portals,
         set_portals: set_portals
@@ -734,8 +766,10 @@ function $4fd5dc0e231a60d9$export$5abb40edfde2a843(props, set_portals) {
     get recommendations() {
       return props.recommendations;
     },
-    product_card_template: display => $75f1064c8b836348$export$79c79419c1ef0081({
-      display: display,
+    product_card_template: display => $bcf84a32dc612a43$export$32024253978abdc7({
+      component_props: {
+        display: display
+      },
       get_react_template: () => props.productCard,
       component_portals: component_portals,
       set_portals: set_portals
@@ -763,8 +797,10 @@ function $8bee51f55543fe0c$export$bd8acc07a8bae229(props, set_portals) {
             display: display
           })))
         };
-      return $75f1064c8b836348$export$79c79419c1ef0081({
-        display: display,
+      return $bcf84a32dc612a43$export$32024253978abdc7({
+        component_props: {
+          display: display
+        },
         get_react_template: () => props.productCard,
         component_portals: component_portals,
         set_portals: set_portals

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/react-ui",
-  "version": "2.0.12",
+  "version": "2.1.0",
   "packageManager": "yarn@3.2.2",
   "source": "src/index.ts",
   "types": "ES10/index.d.ts",
@@ -136,10 +136,10 @@
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "latest",
     "@depict-ai/dpc": "^1.0.42",
-    "@depict-ai/plp-styling": "^1.2.5",
-    "@depict-ai/ui": "^2.0.22",
-    "@depict-ai/utilishared": "^1.0.46",
-    "solid-js": "^1.7.3"
+    "@depict-ai/plp-styling": "^1.2.6",
+    "@depict-ai/ui": "^2.1.0",
+    "@depict-ai/utilishared": "^1.0.47",
+    "solid-js": "^1.8.1"
   },
   "peerDependencies": {
     "react": ">= 16.14.0",
@@ -150,7 +150,7 @@
     "@babel/core": "latest",
     "@babel/preset-env": "latest",
     "@babel/preset-typescript": "latest",
-    "@depict-ai/plp-styling": "^1.2.5",
+    "@depict-ai/plp-styling": "^1.2.6",
     "@jest/globals": "^29.3.1",
     "@parcel/babel-preset-env": "^2.9.3",
     "@parcel/transformer-sass": "^2.9.3",

package/server/ES10/index.cjs

@@ -73,9 +73,9 @@ class $e9048b15cf1e8792$export$d0f82e3ef89b1f22 extends (0, $aNCHr$react.Compone
     return this.props.children;
   }
 }
-async function $99405615baa3d774$export$79c79419c1ef0081(_ref) {
+async function $3441d987b5ea85cb$export$32024253978abdc7(_ref) {
   let {
-    display: display,
+    component_props: component_props,
     component_portals: component_portals,
     set_portals: set_portals,
     get_react_template: get_react_template
@@ -92,9 +92,7 @@ async function $99405615baa3d774$export$79c79419c1ef0081(_ref) {
     const [react_template, set_react_template] = $aNCHr$react.useState(() => $aNCHr$solidjs.untrack(get_react_template));
     call_when_template_changes = set_react_template;
     return react_template(props);
-  }, {
-    display: display
-  });
+  }, component_props);
   const reactProductCardInErrorBoundary = $aNCHr$reactjsxruntime.jsx((0, $e9048b15cf1e8792$export$d0f82e3ef89b1f22), {
     children: reactProductCard,
     on_error: error => $aNCHr$solidjs.runWithOwner(owner, () => {
@@ -140,8 +138,10 @@ function $27d583018ba6e604$export$bd8acc07a8bae229(props, set_portals) {
             display: display
           })))
         };
-      return $99405615baa3d774$export$79c79419c1ef0081({
-        display: display,
+      return $3441d987b5ea85cb$export$32024253978abdc7({
+        component_props: {
+          display: display
+        },
         get_react_template: () => props.productCard,
         component_portals: component_portals,
         set_portals: set_portals
@@ -170,7 +170,7 @@ function $27d583018ba6e604$export$bd8acc07a8bae229(props, set_portals) {
     }
   });
 }
-const $efbdd2dab4314170$export$83d89fbfd8236492 = "2.0.12";
+const $efbdd2dab4314170$export$83d89fbfd8236492 = "2.1.0";
 function $202459d454907b31$export$9fac37a9c21c2f3b(props) {
   return props.children;
 }

package/server/ES10/index.d.ts

@@ -1,9 +1,9 @@
 import { DPC } from "@depict-ai/dpc/ES10";
-import React, { PropsWithChildren, ReactNode, ReactPortal, ReactElement } from "react";
+import React, { PropsWithChildren, ReactNode, FC, ReactPortal, ReactElement } from "react";
 import { BaseProviderConfig, BaseSearchProviderConfig, BaseCategoryProviderConfig, ModernDisplayWithPageUrl, BaseProductListingConfig, BaseSearchPageConfig, BaseCategoryPageConfig, CategoryTitle, embedded_num_products, ImagePlaceholder as _ImagePlaceholder1, TextPlaceholder as _TextPlaceholder1, ExclusiveId, fetchDepictRecommendations } from "@depict-ai/ui/ES10";
 import { Locale } from "@depict-ai/ui/locales/ES10";
 import { Display, ModernDisplay } from "@depict-ai/utilishared/ES10";
-export const version = "2.0.12";
+export const version = "2.1.0";
 interface UsePerformanceClientReturn {
   dpc: DPC;
 }
@@ -172,11 +172,43 @@ export interface DepictProductCardProps<T extends Display> {
  * Depict product card to use for rendering products.
  */
 export type DepictProductCard<T extends Display> = (props: DepictProductCardProps<T>) => ReactNode;
+/**
+ * The interface for a content block.
+ * Please make sure that you don't have content blocks overlap as that will cause undefined behavior.
+ * The height of the content block will be the height of the tallest item in a row, so if there are no products in a row the content block needs to "bring its own height".
+ * If you need to load any data in the content block, please make sure to return a placeholder while you're doing so, to avoid layout shifts and ensure scroll restoration works correctly.
+ *
+ * - `spanColumns`: How many columns the block should span. This will be capped to the number of columns available.
+ * - `spanRows`: How many rows the block should span.
+ * - `position`: Where the block should be positioned. Can be `left`, `center` or `right`.
+ * - `content`: The content to render in the block - please provide a React component.
+ */
+type ReactContentBlock = {
+  spanColumns: number;
+  spanRows: number;
+  position: "left" | "center" | "right";
+  content: FC;
+};
+/**
+ * A sparse array containing content blocks to show (or an empty slot or undefined if there's no block at that index). See ReactContentBlock for how a content block looks like. The index is the row where the content block should be shown.
+ * For example, to create a block on row 1 and 3 you'd do `[, block1, , block2]`.
+ * Alternatively:
+ * ```
+ * const blocks = [];
+ * blocks[1] = block1;
+ * blocks[3] = block2;
+ * ```
+ */
+type ReactContentBlocksByRow = (undefined | ReactContentBlock)[];
 interface SearchPageConfig<T extends Display> extends BaseSearchPageConfig, PLPConfig<T> {
   /**
    * When using multiple search instances on the same page, you need to set a unique stateKey for each one. We recommend using an incrementing number, such as "1", "2", "3", etc. To associate a modal with a SearchPage keyed component, set the same stateKey on both. If no stateKey is provided, the "default" instance will be used.
    */
   stateKey?: string;
+  /**
+   * See JSDoc of ReactContentBlocksByRow
+   */
+  contentBlocksByRow?: ReactContentBlocksByRow;
 }
 /**
  * SearchPage is a component that renders a Depict search results page.
@@ -242,6 +274,10 @@ interface CategoryPageConfig<T extends Display> extends BaseCategoryPageConfig,
    * When using multiple CategoryPage components on the same page, you need to set a unique stateKey for each one. We recommend using an incrementing number, such as "1", "2", "3", etc. To associate a certain BreadCrumbs or QuickLinks component with a certain CategoryPage component, set the same stateKey on both.
    */
   stateKey?: string;
+  /**
+   * See JSDoc of ReactContentBlocksByRow
+   */
+  contentBlocksByRow?: ReactContentBlocksByRow;
 }
 /**
  * CategoryPage is a component that renders a Depict category page. Go to definition on the props for more info.

package/server/ES10/index.js

@@ -50,9 +50,9 @@ class $88d93ed7309e90d1$export$d0f82e3ef89b1f22 extends (0, $7h5e1$Component) {
     return this.props.children;
   }
 }
-async function $6593e4e126cb318f$export$79c79419c1ef0081(_ref) {
+async function $cce08f18e2476cbf$export$32024253978abdc7(_ref) {
   let {
-    display: display,
+    component_props: component_props,
     component_portals: component_portals,
     set_portals: set_portals,
     get_react_template: get_react_template
@@ -69,9 +69,7 @@ async function $6593e4e126cb318f$export$79c79419c1ef0081(_ref) {
     const [react_template, set_react_template] = $7h5e1$useState(() => $7h5e1$untrack(get_react_template));
     call_when_template_changes = set_react_template;
     return react_template(props);
-  }, {
-    display: display
-  });
+  }, component_props);
   const reactProductCardInErrorBoundary = $7h5e1$jsx((0, $88d93ed7309e90d1$export$d0f82e3ef89b1f22), {
     children: reactProductCard,
     on_error: error => $7h5e1$runWithOwner(owner, () => {
@@ -117,8 +115,10 @@ function $48b0916cc674770c$export$bd8acc07a8bae229(props, set_portals) {
             display: display
           })))
         };
-      return $6593e4e126cb318f$export$79c79419c1ef0081({
-        display: display,
+      return $cce08f18e2476cbf$export$32024253978abdc7({
+        component_props: {
+          display: display
+        },
         get_react_template: () => props.productCard,
         component_portals: component_portals,
         set_portals: set_portals
@@ -147,7 +147,7 @@ function $48b0916cc674770c$export$bd8acc07a8bae229(props, set_portals) {
     }
   });
 }
-const $9bd9bb8700ab2ada$export$83d89fbfd8236492 = "2.0.12";
+const $9bd9bb8700ab2ada$export$83d89fbfd8236492 = "2.1.0";
 function $5c4add0a8fe94894$export$9fac37a9c21c2f3b(props) {
   return props.children;
 }

package/server/latest/index.cjs

@@ -72,8 +72,8 @@ class $d7a14567b529586f$export$d0f82e3ef89b1f22 extends (0, $7QqFM$react.Compone
     return this.props.children;
   }
 }
-async function $ecaac5ceddb08f39$export$79c79419c1ef0081({
-  display: display,
+async function $6081519c185fcf70$export$32024253978abdc7({
+  component_props: component_props,
   component_portals: component_portals,
   set_portals: set_portals,
   get_react_template: get_react_template
@@ -90,9 +90,7 @@ async function $ecaac5ceddb08f39$export$79c79419c1ef0081({
     const [react_template, set_react_template] = $7QqFM$react.useState(() => $7QqFM$solidjs.untrack(get_react_template));
     call_when_template_changes = set_react_template;
     return react_template(props);
-  }, {
-    display: display
-  });
+  }, component_props);
   const reactProductCardInErrorBoundary = $7QqFM$reactjsxruntime.jsx((0, $d7a14567b529586f$export$d0f82e3ef89b1f22), {
     children: reactProductCard,
     on_error: error => $7QqFM$solidjs.runWithOwner(owner, () => {
@@ -135,8 +133,10 @@ function $0aaa03f81d756b85$export$bd8acc07a8bae229(props, set_portals) {
             display: display
           })))
         };
-      return $ecaac5ceddb08f39$export$79c79419c1ef0081({
-        display: display,
+      return $6081519c185fcf70$export$32024253978abdc7({
+        component_props: {
+          display: display
+        },
         get_react_template: () => props.productCard,
         component_portals: component_portals,
         set_portals: set_portals
@@ -163,7 +163,7 @@ function $0aaa03f81d756b85$export$bd8acc07a8bae229(props, set_portals) {
     }
   });
 }
-const $db7b67857900028b$export$83d89fbfd8236492 = "2.0.12";
+const $db7b67857900028b$export$83d89fbfd8236492 = "2.1.0";
 function $41e7e5d85b5e0d49$export$9fac37a9c21c2f3b(props) {
   return props.children;
 }

package/server/latest/index.d.ts

@@ -1,9 +1,9 @@
 import { DPC } from "@depict-ai/dpc/latest";
-import React, { PropsWithChildren, ReactNode, ReactPortal, ReactElement } from "react";
+import React, { PropsWithChildren, ReactNode, FC, ReactPortal, ReactElement } from "react";
 import { BaseProviderConfig, BaseSearchProviderConfig, BaseCategoryProviderConfig, ModernDisplayWithPageUrl, BaseProductListingConfig, BaseSearchPageConfig, BaseCategoryPageConfig, CategoryTitle, embedded_num_products, ImagePlaceholder as _ImagePlaceholder1, TextPlaceholder as _TextPlaceholder1, ExclusiveId, fetchDepictRecommendations } from "@depict-ai/ui/latest";
 import { Locale } from "@depict-ai/ui/locales/latest";
 import { Display, ModernDisplay } from "@depict-ai/utilishared/latest";
-export const version = "2.0.12";
+export const version = "2.1.0";
 interface UsePerformanceClientReturn {
   dpc: DPC;
 }
@@ -172,11 +172,43 @@ export interface DepictProductCardProps<T extends Display> {
  * Depict product card to use for rendering products.
  */
 export type DepictProductCard<T extends Display> = (props: DepictProductCardProps<T>) => ReactNode;
+/**
+ * The interface for a content block.
+ * Please make sure that you don't have content blocks overlap as that will cause undefined behavior.
+ * The height of the content block will be the height of the tallest item in a row, so if there are no products in a row the content block needs to "bring its own height".
+ * If you need to load any data in the content block, please make sure to return a placeholder while you're doing so, to avoid layout shifts and ensure scroll restoration works correctly.
+ *
+ * - `spanColumns`: How many columns the block should span. This will be capped to the number of columns available.
+ * - `spanRows`: How many rows the block should span.
+ * - `position`: Where the block should be positioned. Can be `left`, `center` or `right`.
+ * - `content`: The content to render in the block - please provide a React component.
+ */
+type ReactContentBlock = {
+  spanColumns: number;
+  spanRows: number;
+  position: "left" | "center" | "right";
+  content: FC;
+};
+/**
+ * A sparse array containing content blocks to show (or an empty slot or undefined if there's no block at that index). See ReactContentBlock for how a content block looks like. The index is the row where the content block should be shown.
+ * For example, to create a block on row 1 and 3 you'd do `[, block1, , block2]`.
+ * Alternatively:
+ * ```
+ * const blocks = [];
+ * blocks[1] = block1;
+ * blocks[3] = block2;
+ * ```
+ */
+type ReactContentBlocksByRow = (undefined | ReactContentBlock)[];
 interface SearchPageConfig<T extends Display> extends BaseSearchPageConfig, PLPConfig<T> {
   /**
    * When using multiple search instances on the same page, you need to set a unique stateKey for each one. We recommend using an incrementing number, such as "1", "2", "3", etc. To associate a modal with a SearchPage keyed component, set the same stateKey on both. If no stateKey is provided, the "default" instance will be used.
    */
   stateKey?: string;
+  /**
+   * See JSDoc of ReactContentBlocksByRow
+   */
+  contentBlocksByRow?: ReactContentBlocksByRow;
 }
 /**
  * SearchPage is a component that renders a Depict search results page.
@@ -242,6 +274,10 @@ interface CategoryPageConfig<T extends Display> extends BaseCategoryPageConfig,
    * When using multiple CategoryPage components on the same page, you need to set a unique stateKey for each one. We recommend using an incrementing number, such as "1", "2", "3", etc. To associate a certain BreadCrumbs or QuickLinks component with a certain CategoryPage component, set the same stateKey on both.
    */
   stateKey?: string;
+  /**
+   * See JSDoc of ReactContentBlocksByRow
+   */
+  contentBlocksByRow?: ReactContentBlocksByRow;
 }
 /**
  * CategoryPage is a component that renders a Depict category page. Go to definition on the props for more info.

package/server/latest/index.js

@@ -49,8 +49,8 @@ class $d5c9e1f3545b4984$export$d0f82e3ef89b1f22 extends (0, $eOXet$Component) {
     return this.props.children;
   }
 }
-async function $75f1064c8b836348$export$79c79419c1ef0081({
-  display: display,
+async function $bcf84a32dc612a43$export$32024253978abdc7({
+  component_props: component_props,
   component_portals: component_portals,
   set_portals: set_portals,
   get_react_template: get_react_template
@@ -67,9 +67,7 @@ async function $75f1064c8b836348$export$79c79419c1ef0081({
     const [react_template, set_react_template] = $eOXet$useState(() => $eOXet$untrack(get_react_template));
     call_when_template_changes = set_react_template;
     return react_template(props);
-  }, {
-    display: display
-  });
+  }, component_props);
   const reactProductCardInErrorBoundary = $eOXet$jsx((0, $d5c9e1f3545b4984$export$d0f82e3ef89b1f22), {
     children: reactProductCard,
     on_error: error => $eOXet$runWithOwner(owner, () => {
@@ -112,8 +110,10 @@ function $8bee51f55543fe0c$export$bd8acc07a8bae229(props, set_portals) {
             display: display
           })))
         };
-      return $75f1064c8b836348$export$79c79419c1ef0081({
-        display: display,
+      return $bcf84a32dc612a43$export$32024253978abdc7({
+        component_props: {
+          display: display
+        },
         get_react_template: () => props.productCard,
         component_portals: component_portals,
         set_portals: set_portals
@@ -140,7 +140,7 @@ function $8bee51f55543fe0c$export$bd8acc07a8bae229(props, set_portals) {
     }
   });
 }
-const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "2.0.12";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "2.1.0";
 function $2b1fdeb83610500f$export$9fac37a9c21c2f3b(props) {
   return props.children;
 }