@depict-ai/react-ui 1.5.19 → 2.0.0

package/server/ES10/index.d.ts

@@ -1,26 +1,9 @@
-import { BaseProductListingConfig, BaseProviderConfig, BaseSearchProviderConfig, BaseCategoryProviderConfig, ModernDisplayWithPageUrl, BaseSearchPageConfig, BaseCategoryPageConfig, CategoryTitle, embedded_num_products, ImagePlaceholder as _ImagePlaceholder1, TextPlaceholder as _TextPlaceholder1, ExclusiveId, fetchDepictRecommendations } from "@depict-ai/ui/ES10";
-import { Display, ModernDisplay } from "@depict-ai/utilishared/ES10";
-import React, { ReactNode, PropsWithChildren, ReactElement } from "react";
 import { DPC } from "@depict-ai/dpc/ES10";
+import React, { PropsWithChildren, ReactNode, 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";
-export const version = "1.5.19";
-interface PLPConfig<T extends Display> extends BaseProductListingConfig {
-  /**
-   * The product card to use for rendering products.
-   */
-  productCard: DepictProductCard<T>;
-}
-/**
- * The Depict product card props.
- */
-export interface DepictProductCardProps<T extends Display> {
-  /** The display data to render. */
-  display: T | null;
-}
-/**
- * Depict product card to use for rendering products.
- */
-export type DepictProductCard<T extends Display> = (props: DepictProductCardProps<T>) => ReactNode;
+import { Display, ModernDisplay } from "@depict-ai/utilishared/ES10";
+export const version = "2.0.0";
 interface UsePerformanceClientReturn {
   dpc: DPC;
 }
@@ -172,6 +155,23 @@ export function DepictProvider<InputDisplay extends Display, OutputDisplay exten
  * @returns {JSX.Element}
  */
 export const ComponentAligner: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
+interface PLPConfig<T extends Display> extends BaseProductListingConfig {
+  /**
+   * The product card to use for rendering products.
+   */
+  productCard: DepictProductCard<T>;
+}
+/**
+ * The Depict product card props.
+ */
+export interface DepictProductCardProps<T extends Display> {
+  /** The display data to render. */
+  display: T | null;
+}
+/**
+ * Depict product card to use for rendering products.
+ */
+export type DepictProductCard<T extends Display> = (props: DepictProductCardProps<T>) => ReactNode;
 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.
@@ -320,6 +320,49 @@ export const ImagePlaceholder: React.FC<Parameters<typeof _ImagePlaceholder1>[0]
 export const TextPlaceholder: React.FC<Parameters<typeof _TextPlaceholder1>[0] & {
   className?: string;
 }>;
+interface RecommendationConfig<T extends Display> extends BaseProductListingConfig {
+  /**
+   * A promise containing the recommendations to render, see https://docs.depict.ai/api-guide/recommendations/api-client/fetching
+   */
+  recommendations: Promise<T[]>;
+  /**
+   * The product card function to use for rendering products.
+   */
+  productCard: DepictProductCard<T>;
+}
+interface RecommendationGridConfig<T extends Display> extends RecommendationConfig<T> {
+  viewMoreButton?: {
+    text: string;
+    startRows?: number;
+    rowsPerClick?: number;
+  };
+}
+declare function SolidRecommendationWrapper<T extends Display>(props: RecommendationGridConfig<T>, set_portals: (portals: ReactPortal[]) => void): HTMLDivElement;
+interface RecommendationSliderConfig<T extends Display> extends RecommendationConfig<T> {
+  viewMoreButton?: {
+    text: string;
+    startRows?: number;
+    rowsPerClick?: number;
+  };
+}
+/**
+ * Renders a slider of the provided products
+ * @param recommendations a promise resolving to an array of displays to render
+ * @param productCard a function that renders a product card or a placeholder for one
+ * @param columnsAtSize the number of columns to show at each media breakpoint
+ * @param gridSpacing the spacing between the product cards
+ */
+export function RecommendationSlider<T extends Display>(props: Parameters<typeof SolidRecommendationSliderWrapper<T>>[0]): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare function SolidRecommendationSliderWrapper<T extends Display>(props: RecommendationSliderConfig<T>, set_portals: (portals: ReactPortal[]) => void): HTMLDivElement;
+/**
+ * Renders a product grid of the provided products
+ * @param recommendations a promise resolving to an array of displays to render
+ * @param productCard a function that renders a product card or a placeholder for one
+ * @param columnsAtSize the number of columns to show at each media breakpoint
+ * @param gridSpacing the spacing between the product cards
+ * @param viewMoreButton optional configuration for the view more button. If unset, all products will be shown by default. Otherwise, a view more button with the given text will be shown. With the properties startRows and rowsPerClick, you can configure how many rows should be shown initially and how many rows should be added on each click.
+ */
+export function RecommendationGrid<T extends Display>(props: Parameters<typeof SolidRecommendationWrapper<T>>[0]): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 /**
  * Parameters to configure the search modal.
  */

package/server/ES10/index.js

@@ -1,6 +1,10 @@
-import { createElement as $7h5e1$createElement, useRef as $7h5e1$useRef, Fragment as $7h5e1$Fragment } from "react";
-import { ImagePlaceholder as $7h5e1$ImagePlaceholder, TextPlaceholder as $7h5e1$TextPlaceholder } from "@depict-ai/ui/ES10";
-import { renderToString as $7h5e1$renderToString, generateHydrationScript as $7h5e1$generateHydrationScript } from "solid-js/web";
+import { createElement as $7h5e1$createElement, useRef as $7h5e1$useRef, Fragment as $7h5e1$Fragment, useEffect as $7h5e1$useEffect, Component as $7h5e1$Component } from "react";
+import { ImagePlaceholder as $7h5e1$ImagePlaceholder, TextPlaceholder as $7h5e1$TextPlaceholder, RecommendationGrid as $7h5e1$RecommendationGrid, defaultColsAtSize as $7h5e1$defaultColsAtSize, defaultGridSpacing as $7h5e1$defaultGridSpacing, ProductCardError as $7h5e1$ProductCardError } from "@depict-ai/ui/ES10";
+import { renderToString as $7h5e1$renderToString, generateHydrationScript as $7h5e1$generateHydrationScript, isServer as $7h5e1$isServer } from "solid-js/web";
+import { untrack as $7h5e1$untrack, getOwner as $7h5e1$getOwner, runWithOwner as $7h5e1$runWithOwner, onCleanup as $7h5e1$onCleanup } from "solid-js";
+import { renderToString as $7h5e1$renderToString1 } from "react-dom/server";
+import { jsx as $7h5e1$jsx } from "react/jsx-runtime";
+import { createPortal as $7h5e1$createPortal } from "react-dom";
 import { register_es_version } from "../../multi_import_deduplicator.mjs";
 register_es_version("react-ui", "ES10");
 function $e8e755ef02e716bf$export$4b564d7f5a1b1d43(_ref) {
@@ -21,7 +25,113 @@ function $e8e755ef02e716bf$export$4b564d7f5a1b1d43(_ref) {
     }
   }));
 }
-const $9bd9bb8700ab2ada$export$83d89fbfd8236492 = "1.5.19";
+class $88d93ed7309e90d1$export$d0f82e3ef89b1f22 extends (0, $7h5e1$Component) {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false
+    };
+  }
+  static getDerivedStateFromError() {
+    // Update state so the next render will show the fallback UI.
+    return {
+      hasError: true
+    };
+  }
+  componentDidCatch(error) {
+    this.props.on_error(error);
+  }
+  render() {
+    if (this.state.hasError)
+      // You can render any custom fallback UI
+      return $7h5e1$createElement("div", {
+        children: "Component failed"
+      });
+    return this.props.children;
+  }
+}
+async function $6593e4e126cb318f$export$79c79419c1ef0081(_ref) {
+  let {
+    display: display,
+    component_portals: component_portals,
+    set_portals: set_portals,
+    react_template: react_template
+  } = _ref;
+  let set_react_has_ran_hooks;
+  let was_cleaned_up = false;
+  const react_has_ran_hooks = new Promise(r => set_react_has_ran_hooks = r);
+  const solid_container = document.createElement("div");
+  const owner = $7h5e1$getOwner();
+  const reactProductCard = $7h5e1$jsx(props => {
+    // Sneak in a hook into their product card component to know once react has finished rendering and running hooks
+    $7h5e1$useEffect(set_react_has_ran_hooks, []);
+    return react_template(props);
+  }, {
+    display: display
+  });
+  const reactProductCardInErrorBoundary = $7h5e1$jsx((0, $88d93ed7309e90d1$export$d0f82e3ef89b1f22), {
+    children: reactProductCard,
+    on_error: error => $7h5e1$runWithOwner(owner, () => {
+      if (was_cleaned_up) return; // Would infinite loop if we'd throw after we've already been cleaned up. That is because the `ErrorBoundary` won't be "registered" with the cleaned-up owner anymore so react would hear about the throw and attempt to re-render the error boundary or something which would throw again, etc.
+      throw new (0, $7h5e1$ProductCardError)(error);
+    })
+  });
+  const portal = $7h5e1$createPortal(reactProductCardInErrorBoundary, solid_container);
+  component_portals.add(portal);
+  set_portals([...component_portals]);
+  $7h5e1$onCleanup(() => {
+    was_cleaned_up = true;
+    // this will stop working after any await so be careful to not await before this, or you'll have to carry the owner over with getOwner and runWithOwner
+    component_portals.delete(portal);
+    // Updating i.e. the merchant will cause a setState call while rendering the DepictProvider component which is illegal because it usually infinite loops react apps. In our case it doesn't though, so we just evade detection by doing it a microtask later. See also https://github.com/facebook/react/issues/18178#issuecomment-595846312
+    queueMicrotask(() => set_portals([...component_portals]));
+  });
+  await react_has_ran_hooks; // After React has created elements it still takes some time to actually connect the refs and run the hooks. We don't want to replace placeholders before then.
+  return [solid_container];
+}
+function $48b0916cc674770c$export$bd8acc07a8bae229(props, set_portals) {
+  const component_portals = new Set();
+  return $7h5e1$RecommendationGrid({
+    get recommendations() {
+      return props.recommendations;
+    },
+    product_card_template: display => {
+      if (0, $7h5e1$isServer)
+        // This function can't be async on the server
+        // @ts-ignore
+        return {
+          t: $7h5e1$renderToString1($7h5e1$createElement(() => props.productCard({
+            display: display
+          })))
+        };
+      return $6593e4e126cb318f$export$79c79419c1ef0081({
+        display: display,
+        react_template: $7h5e1$untrack(() => props.productCard),
+        component_portals: component_portals,
+        set_portals: set_portals
+      });
+    },
+    get cols_at_size() {
+      return props.columnsAtSize || (0, $7h5e1$defaultColsAtSize);
+    },
+    get grid_spacing() {
+      var _props$gridSpacing;
+      return (_props$gridSpacing = props.gridSpacing) !== null && _props$gridSpacing !== void 0 ? _props$gridSpacing : (0, $7h5e1$defaultGridSpacing);
+    },
+    get view_more_button() {
+      var _viewMoreButton$start;
+      const {
+        viewMoreButton: viewMoreButton
+      } = props;
+      return viewMoreButton ? {
+        text: viewMoreButton.text,
+        start_rows: (_viewMoreButton$start = viewMoreButton.startRows) !== null && _viewMoreButton$start !== void 0 ? _viewMoreButton$start : 2,
+        rows_per_click: viewMoreButton.rowsPerClick
+      } : undefined;
+    }
+  });
+}
+const $9bd9bb8700ab2ada$export$83d89fbfd8236492 = "2.0.0";
 function $5c4add0a8fe94894$export$9fac37a9c21c2f3b(props) {
   return props.children;
 }
@@ -45,6 +155,11 @@ function $5c4add0a8fe94894$export$466cdc317043f6cb() {
     children: []
   });
 }
+function $5c4add0a8fe94894$export$82cfdc85a4d15688() {
+  return $7h5e1$createElement("div", {
+    children: []
+  });
+}
 function $5c4add0a8fe94894$export$80e99ee6b29cadd2() {
   return $7h5e1$createElement("div", {
     className: "depict aligner",
@@ -64,6 +179,13 @@ function $5c4add0a8fe94894$export$3f37af283f8fb843(raw_react_props) {
     wrapper_type: "span"
   });
 }
+function $5c4add0a8fe94894$export$b0a773486c1c2312(props) {
+  return $e8e755ef02e716bf$export$4b564d7f5a1b1d43({
+    solid_component: (0, $48b0916cc674770c$export$bd8acc07a8bae229),
+    props: props,
+    wrapper_type: "section"
+  });
+}
 function $5c4add0a8fe94894$export$89c6019e4baa40b1(raw_react_props) {
   const react_props = {
     ...raw_react_props,
@@ -111,4 +233,4 @@ function $5c4add0a8fe94894$export$6501da23a2770fc() {
     }
   };
 }
-export { $5c4add0a8fe94894$export$9fac37a9c21c2f3b as DepictProvider, $5c4add0a8fe94894$export$a54ec244c8863715 as SearchPage, $5c4add0a8fe94894$export$f7d2f673fc2f091d as CategoryPage, $5c4add0a8fe94894$export$5646050d516e06bc as BreadCrumbs, $5c4add0a8fe94894$export$466cdc317043f6cb as QuickLinks, $5c4add0a8fe94894$export$80e99ee6b29cadd2 as ComponentAligner, $5c4add0a8fe94894$export$3f37af283f8fb843 as ImagePlaceholder, $5c4add0a8fe94894$export$89c6019e4baa40b1 as TextPlaceholder, $5c4add0a8fe94894$export$9bb30bbe003b82e0 as useSearchField, $5c4add0a8fe94894$export$a7f6cffb6b8ba11c as openModal, $5c4add0a8fe94894$export$912994940e660d32 as useSearchModal, $5c4add0a8fe94894$export$38b98fae14bd1f64 as usePerformanceClient, $5c4add0a8fe94894$export$6501da23a2770fc as useFetchRecommendations, $9bd9bb8700ab2ada$export$83d89fbfd8236492 as version };
+export { $5c4add0a8fe94894$export$9fac37a9c21c2f3b as DepictProvider, $5c4add0a8fe94894$export$a54ec244c8863715 as SearchPage, $5c4add0a8fe94894$export$f7d2f673fc2f091d as CategoryPage, $5c4add0a8fe94894$export$5646050d516e06bc as BreadCrumbs, $5c4add0a8fe94894$export$466cdc317043f6cb as QuickLinks, $5c4add0a8fe94894$export$82cfdc85a4d15688 as RecommendationSlider, $5c4add0a8fe94894$export$80e99ee6b29cadd2 as ComponentAligner, $5c4add0a8fe94894$export$3f37af283f8fb843 as ImagePlaceholder, $5c4add0a8fe94894$export$b0a773486c1c2312 as RecommendationGrid, $5c4add0a8fe94894$export$89c6019e4baa40b1 as TextPlaceholder, $5c4add0a8fe94894$export$9bb30bbe003b82e0 as useSearchField, $5c4add0a8fe94894$export$a7f6cffb6b8ba11c as openModal, $5c4add0a8fe94894$export$912994940e660d32 as useSearchModal, $5c4add0a8fe94894$export$38b98fae14bd1f64 as usePerformanceClient, $5c4add0a8fe94894$export$6501da23a2770fc as useFetchRecommendations, $9bd9bb8700ab2ada$export$83d89fbfd8236492 as version };

package/server/latest/index.cjs

@@ -1,6 +1,10 @@
 var $7QqFM$react = require("react");
 var $7QqFM$depictaiui = require("@depict-ai/ui/latest");
 var $7QqFM$solidjsweb = require("solid-js/web");
+var $7QqFM$solidjs = require("solid-js");
+var $7QqFM$reactdomserver = require("react-dom/server");
+var $7QqFM$reactjsxruntime = require("react/jsx-runtime");
+var $7QqFM$reactdom = require("react-dom");
 require("../../multi_import_deduplicator.cjs").register_es_version("react-ui", "latest");
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {
@@ -15,8 +19,10 @@ $parcel$export(module.exports, "SearchPage", () => $41e7e5d85b5e0d49$export$a54e
 $parcel$export(module.exports, "CategoryPage", () => $41e7e5d85b5e0d49$export$f7d2f673fc2f091d);
 $parcel$export(module.exports, "BreadCrumbs", () => $41e7e5d85b5e0d49$export$5646050d516e06bc);
 $parcel$export(module.exports, "QuickLinks", () => $41e7e5d85b5e0d49$export$466cdc317043f6cb);
+$parcel$export(module.exports, "RecommendationSlider", () => $41e7e5d85b5e0d49$export$82cfdc85a4d15688);
 $parcel$export(module.exports, "ComponentAligner", () => $41e7e5d85b5e0d49$export$80e99ee6b29cadd2);
 $parcel$export(module.exports, "ImagePlaceholder", () => $41e7e5d85b5e0d49$export$3f37af283f8fb843);
+$parcel$export(module.exports, "RecommendationGrid", () => $41e7e5d85b5e0d49$export$b0a773486c1c2312);
 $parcel$export(module.exports, "TextPlaceholder", () => $41e7e5d85b5e0d49$export$89c6019e4baa40b1);
 $parcel$export(module.exports, "useSearchField", () => $41e7e5d85b5e0d49$export$9bb30bbe003b82e0);
 $parcel$export(module.exports, "openModal", () => $41e7e5d85b5e0d49$export$a7f6cffb6b8ba11c);
@@ -41,7 +47,110 @@ function $35dfe83eec81954c$export$4b564d7f5a1b1d43({
     }
   }));
 }
-const $db7b67857900028b$export$83d89fbfd8236492 = "1.5.19";
+class $d7a14567b529586f$export$d0f82e3ef89b1f22 extends (0, $7QqFM$react.Component) {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false
+    };
+  }
+  static getDerivedStateFromError() {
+    // Update state so the next render will show the fallback UI.
+    return {
+      hasError: true
+    };
+  }
+  componentDidCatch(error) {
+    this.props.on_error(error);
+  }
+  render() {
+    if (this.state.hasError)
+      // You can render any custom fallback UI
+      return $7QqFM$react.createElement("div", {
+        children: "Component failed"
+      });
+    return this.props.children;
+  }
+}
+async function $ecaac5ceddb08f39$export$79c79419c1ef0081({
+  display: display,
+  component_portals: component_portals,
+  set_portals: set_portals,
+  react_template: react_template
+}) {
+  let set_react_has_ran_hooks;
+  let was_cleaned_up = false;
+  const react_has_ran_hooks = new Promise(r => set_react_has_ran_hooks = r);
+  const solid_container = document.createElement("div");
+  const owner = $7QqFM$solidjs.getOwner();
+  const reactProductCard = $7QqFM$reactjsxruntime.jsx(props => {
+    // Sneak in a hook into their product card component to know once react has finished rendering and running hooks
+    $7QqFM$react.useEffect(set_react_has_ran_hooks, []);
+    return react_template(props);
+  }, {
+    display: display
+  });
+  const reactProductCardInErrorBoundary = $7QqFM$reactjsxruntime.jsx((0, $d7a14567b529586f$export$d0f82e3ef89b1f22), {
+    children: reactProductCard,
+    on_error: error => $7QqFM$solidjs.runWithOwner(owner, () => {
+      if (was_cleaned_up) return; // Would infinite loop if we'd throw after we've already been cleaned up. That is because the `ErrorBoundary` won't be "registered" with the cleaned-up owner anymore so react would hear about the throw and attempt to re-render the error boundary or something which would throw again, etc.
+      throw new (0, $7QqFM$depictaiui.ProductCardError)(error);
+    })
+  });
+  const portal = $7QqFM$reactdom.createPortal(reactProductCardInErrorBoundary, solid_container);
+  component_portals.add(portal);
+  set_portals([...component_portals]);
+  $7QqFM$solidjs.onCleanup(() => {
+    was_cleaned_up = true;
+    // this will stop working after any await so be careful to not await before this, or you'll have to carry the owner over with getOwner and runWithOwner
+    component_portals.delete(portal);
+    // Updating i.e. the merchant will cause a setState call while rendering the DepictProvider component which is illegal because it usually infinite loops react apps. In our case it doesn't though, so we just evade detection by doing it a microtask later. See also https://github.com/facebook/react/issues/18178#issuecomment-595846312
+    queueMicrotask(() => set_portals([...component_portals]));
+  });
+  await react_has_ran_hooks; // After React has created elements it still takes some time to actually connect the refs and run the hooks. We don't want to replace placeholders before then.
+  return [solid_container];
+}
+function $0aaa03f81d756b85$export$bd8acc07a8bae229(props, set_portals) {
+  const component_portals = new Set();
+  return $7QqFM$depictaiui.RecommendationGrid({
+    get recommendations() {
+      return props.recommendations;
+    },
+    product_card_template: display => {
+      if (0, $7QqFM$solidjsweb.isServer)
+        // This function can't be async on the server
+        // @ts-ignore
+        return {
+          t: $7QqFM$reactdomserver.renderToString($7QqFM$react.createElement(() => props.productCard({
+            display: display
+          })))
+        };
+      return $ecaac5ceddb08f39$export$79c79419c1ef0081({
+        display: display,
+        react_template: $7QqFM$solidjs.untrack(() => props.productCard),
+        component_portals: component_portals,
+        set_portals: set_portals
+      });
+    },
+    get cols_at_size() {
+      return props.columnsAtSize || (0, $7QqFM$depictaiui.defaultColsAtSize);
+    },
+    get grid_spacing() {
+      return props.gridSpacing ?? (0, $7QqFM$depictaiui.defaultGridSpacing);
+    },
+    get view_more_button() {
+      const {
+        viewMoreButton: viewMoreButton
+      } = props;
+      return viewMoreButton ? {
+        text: viewMoreButton.text,
+        start_rows: viewMoreButton.startRows ?? 2,
+        rows_per_click: viewMoreButton.rowsPerClick
+      } : undefined;
+    }
+  });
+}
+const $db7b67857900028b$export$83d89fbfd8236492 = "2.0.0";
 function $41e7e5d85b5e0d49$export$9fac37a9c21c2f3b(props) {
   return props.children;
 }
@@ -65,6 +174,11 @@ function $41e7e5d85b5e0d49$export$466cdc317043f6cb() {
     children: []
   });
 }
+function $41e7e5d85b5e0d49$export$82cfdc85a4d15688() {
+  return $7QqFM$react.createElement("div", {
+    children: []
+  });
+}
 function $41e7e5d85b5e0d49$export$80e99ee6b29cadd2() {
   return $7QqFM$react.createElement("div", {
     className: "depict aligner",
@@ -84,6 +198,13 @@ function $41e7e5d85b5e0d49$export$3f37af283f8fb843(raw_react_props) {
     wrapper_type: "span"
   });
 }
+function $41e7e5d85b5e0d49$export$b0a773486c1c2312(props) {
+  return $35dfe83eec81954c$export$4b564d7f5a1b1d43({
+    solid_component: (0, $0aaa03f81d756b85$export$bd8acc07a8bae229),
+    props: props,
+    wrapper_type: "section"
+  });
+}
 function $41e7e5d85b5e0d49$export$89c6019e4baa40b1(raw_react_props) {
   const react_props = {
     ...raw_react_props,

package/server/latest/index.d.ts

@@ -1,26 +1,9 @@
-import { BaseProductListingConfig, BaseProviderConfig, BaseSearchProviderConfig, BaseCategoryProviderConfig, ModernDisplayWithPageUrl, BaseSearchPageConfig, BaseCategoryPageConfig, CategoryTitle, embedded_num_products, ImagePlaceholder as _ImagePlaceholder1, TextPlaceholder as _TextPlaceholder1, ExclusiveId, fetchDepictRecommendations } from "@depict-ai/ui/latest";
-import { Display, ModernDisplay } from "@depict-ai/utilishared/latest";
-import React, { ReactNode, PropsWithChildren, ReactElement } from "react";
 import { DPC } from "@depict-ai/dpc/latest";
+import React, { PropsWithChildren, ReactNode, 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";
-export const version = "1.5.19";
-interface PLPConfig<T extends Display> extends BaseProductListingConfig {
-  /**
-   * The product card to use for rendering products.
-   */
-  productCard: DepictProductCard<T>;
-}
-/**
- * The Depict product card props.
- */
-export interface DepictProductCardProps<T extends Display> {
-  /** The display data to render. */
-  display: T | null;
-}
-/**
- * Depict product card to use for rendering products.
- */
-export type DepictProductCard<T extends Display> = (props: DepictProductCardProps<T>) => ReactNode;
+import { Display, ModernDisplay } from "@depict-ai/utilishared/latest";
+export const version = "2.0.0";
 interface UsePerformanceClientReturn {
   dpc: DPC;
 }
@@ -172,6 +155,23 @@ export function DepictProvider<InputDisplay extends Display, OutputDisplay exten
  * @returns {JSX.Element}
  */
 export const ComponentAligner: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
+interface PLPConfig<T extends Display> extends BaseProductListingConfig {
+  /**
+   * The product card to use for rendering products.
+   */
+  productCard: DepictProductCard<T>;
+}
+/**
+ * The Depict product card props.
+ */
+export interface DepictProductCardProps<T extends Display> {
+  /** The display data to render. */
+  display: T | null;
+}
+/**
+ * Depict product card to use for rendering products.
+ */
+export type DepictProductCard<T extends Display> = (props: DepictProductCardProps<T>) => ReactNode;
 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.
@@ -320,6 +320,49 @@ export const ImagePlaceholder: React.FC<Parameters<typeof _ImagePlaceholder1>[0]
 export const TextPlaceholder: React.FC<Parameters<typeof _TextPlaceholder1>[0] & {
   className?: string;
 }>;
+interface RecommendationConfig<T extends Display> extends BaseProductListingConfig {
+  /**
+   * A promise containing the recommendations to render, see https://docs.depict.ai/api-guide/recommendations/api-client/fetching
+   */
+  recommendations: Promise<T[]>;
+  /**
+   * The product card function to use for rendering products.
+   */
+  productCard: DepictProductCard<T>;
+}
+interface RecommendationGridConfig<T extends Display> extends RecommendationConfig<T> {
+  viewMoreButton?: {
+    text: string;
+    startRows?: number;
+    rowsPerClick?: number;
+  };
+}
+declare function SolidRecommendationWrapper<T extends Display>(props: RecommendationGridConfig<T>, set_portals: (portals: ReactPortal[]) => void): HTMLDivElement;
+interface RecommendationSliderConfig<T extends Display> extends RecommendationConfig<T> {
+  viewMoreButton?: {
+    text: string;
+    startRows?: number;
+    rowsPerClick?: number;
+  };
+}
+/**
+ * Renders a slider of the provided products
+ * @param recommendations a promise resolving to an array of displays to render
+ * @param productCard a function that renders a product card or a placeholder for one
+ * @param columnsAtSize the number of columns to show at each media breakpoint
+ * @param gridSpacing the spacing between the product cards
+ */
+export function RecommendationSlider<T extends Display>(props: Parameters<typeof SolidRecommendationSliderWrapper<T>>[0]): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare function SolidRecommendationSliderWrapper<T extends Display>(props: RecommendationSliderConfig<T>, set_portals: (portals: ReactPortal[]) => void): HTMLDivElement;
+/**
+ * Renders a product grid of the provided products
+ * @param recommendations a promise resolving to an array of displays to render
+ * @param productCard a function that renders a product card or a placeholder for one
+ * @param columnsAtSize the number of columns to show at each media breakpoint
+ * @param gridSpacing the spacing between the product cards
+ * @param viewMoreButton optional configuration for the view more button. If unset, all products will be shown by default. Otherwise, a view more button with the given text will be shown. With the properties startRows and rowsPerClick, you can configure how many rows should be shown initially and how many rows should be added on each click.
+ */
+export function RecommendationGrid<T extends Display>(props: Parameters<typeof SolidRecommendationWrapper<T>>[0]): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 /**
  * Parameters to configure the search modal.
  */