@depict-ai/react-ui 1.5.2 → 1.5.4

package/server/ES10/index.d.ts

@@ -0,0 +1,529 @@
+import { BaseProductListingConfig, BaseProviderConfig, BaseSearchProviderConfig, 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 { Locale } from "@depict-ai/ui/locales/ES10";
+export const version = "1.5.4";
+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 UsePerformanceClientReturn {
+  dpc: DPC;
+}
+/**
+ * Hook used to access the Depict Performance Client.
+ * Calls on the returned DPC instance can not be done server side.
+ * @example
+ * Send an add-to-cart event
+ * ```tsx
+ * import { useEffect } from "react";
+ * import { usePerformanceClient } from "@depict-ai/react-ui";
+ *
+ * const ProductPage = ({ productId }) => {
+ *   const { dpc } = usePerformanceClient();
+ *
+ *   useEffect(() => {
+ *     dpc.setProductId(productId);
+ *   }, [dpc, productId]);
+ *
+ *   return <div>Showing product {productId}</div>;
+ * }
+ * ```
+ * @returns {UsePerformanceClientReturn}
+}
+ */
+export const usePerformanceClient: () => UsePerformanceClientReturn;
+/**
+ * relativeUrl: The relative url to navigate to.
+ * replace: Whether to replace the current url or push a new one.
+ */
+type NavigateFunction = (relativeUrl: string, options: {
+  replace: boolean;
+  scroll: boolean;
+}) => void;
+/**
+ * The config for the DepictProvider.
+ */
+type ProviderConfig<OriginalDisplay extends Display, OutputDisplay extends ModernDisplay | never> = BaseProviderConfig<OriginalDisplay, OutputDisplay> & {
+  /**
+   * The function to use for navigating to a new page.
+   * This function will be used internally by our components to navigate.
+   *
+   * You don't need to provide any in a Next.js context.
+   *
+   * @param relativeUrl - The relative url to navigate to.
+   *
+   * @example
+   * Here is how you would use it with react-router, @reach/router, Gatsby or similar.
+   * ```tsx
+   * import { DepictProvider, Navigation } from "@depict-ai/react-ui";
+   * import { useNavigate } from "react-router-dom";
+   * // import { navigate } from "gatsby";
+   *
+   * function Router() {
+   *   const navigate = useNavigate();
+   *   return (
+   *     <DepictProvider
+   *       merchant="houdini"
+   *       market="en-de"
+   *       navigateFunction={navigate}
+   *       search={{
+   *         searchPagePath: "/search",
+   *       }}
+   *     >
+   *       <Routes>[...]</Routes>
+   *     </DepictProvider>
+   *   );
+   * }
+   * ```
+   * @example
+   * If you're using another library, you can define your own navigate function, that's compatible with the `NavigateFunction` type.
+   * ```tsx
+   * const navigateFunction = (relativeUrl: string, { replace }) => {
+   *  router.push(relativeUrl, { replace });
+   * };
+   * ```
+   */
+  navigateFunction?: NavigateFunction;
+  /**
+   * The locale to use for the Depict components.
+   * @default en
+   */
+  locale?: Locale;
+  /**
+   * Unique ID of the currently logged in user, if applicable.
+   */
+  userId?: string;
+  /**
+   * Options that are required for search functionality.
+   */
+  search?: BaseSearchProviderConfig;
+};
+/**
+ * The DepictProvider is a wrapper component that should be used to wrap any component that uses Depict components.
+ *
+ * Make sure it's mounted on every page where the search modal should be available.
+ *
+ * @param props -  The props for the DepictProvider.
+ *
+ * @example
+ * ```tsx
+ *  const App = () => { *
+ *    return (
+ *      <DepictProvider
+ *        merchant="YOUR_MERCHANT"
+ *        market="YOUR_MARKET"
+ *        search={{
+ *          searchPagePath: "/search",
+ *        }}
+ *      >
+ *        <App />
+ *      </DepictProvider>
+ *    );
+ * };
+ * ```
+ * @returns {JSX.Element} The DepictProvider.
+ */
+export function DepictProvider<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never = InputDisplay extends ModernDisplay ? ModernDisplayWithPageUrl<InputDisplay> : never>(props: PropsWithChildren<ProviderConfig<InputDisplay, OutputDisplay>>): import("react").FunctionComponentElement<{
+  children?: import("react").ReactNode;
+}>;
+/**
+ * A component used to align other Depict components to.
+ * @example
+ * Align the search modal
+ * ```tsx
+ * import React from "react";
+ * import { ComponentAligner, useSearchModal } from "@depict-ai/react-ui";
+ *
+ * const App = () => {
+ *   const ref = React.createRef();
+ *
+ *   const { open } = useSearchModal({
+ *     location: "aligned",
+ *     alignerRef: ref,
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       <ComponentAligner ref={ref} />
+ *       <button onClick={open}>Open</button>
+ *     </div>
+ *   );
+ * };
+ * ```
+ * @returns {JSX.Element}
+ */
+export const ComponentAligner: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
+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;
+}
+/**
+ * SearchPage is a component that renders a Depict search results page.
+ * @param props - The props for the search page. Go to definition for more info.
+ *
+ * @example
+ * ```tsx
+ * import { DepictProductCard, ImagePlaceholder, Display, SearchPage } from '@depict-ai/react-ui'
+ *
+ * function Search() {
+ *    return <SearchPage productCard={MyCustomSearchProductCard} />
+ * }
+ *
+ * interface MyCustomDisplay extends Display {}
+ *
+ * export const MyCustomSearchProductCard: DepictProductCard<MyCustomDisplay> = ({
+ *   display,
+ * }) => {
+ *   if (!display) {
+ *     return <ImagePlaceholder aspectRatio={3 / 4} />
+ *   }
+ *
+ *   return (
+ *     <>
+ *       <MyCustomProductCard
+ *         product={{
+ *           id: display.product_id,
+ *           name: display.title,
+ *           description: display.title,
+ *           images: [{ url: display.image_url }],
+ *           price: {
+ *             value: display.sale_price,
+ *           },
+ *         }}
+ *       />
+ *     </>
+ *   )
+ * }
+ *
+ * ```
+ */
+export function SearchPage<OriginalDisplay extends Display, OutputDisplay extends ModernDisplay | never>(props: SearchPageConfig<[OutputDisplay] extends [never] ? OriginalDisplay : ModernDisplayWithPageUrl<OutputDisplay>>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface CategoryPageConfig<T extends Display> extends BaseCategoryPageConfig, PLPConfig<T> {
+  /**
+   * The category id to show.
+   */
+  categoryId: string;
+  /**
+   * categoryTitlePlugin is an optional plugin that can be used to customize the title of the category page.
+   * @default CategoryTitle
+   *
+   * @example
+   * ```tsx
+   * <CategoryPage categoryId="jeans" productCard={MyCustomCategoryProductCard}  categoryTitlePlugin={EmbeddedNumProducts} />
+   * ```
+   */
+  categoryTitlePlugin?: typeof CategoryTitle | typeof embedded_num_products;
+  /**
+   * Whether this page is a collection or a category. If not specified it will be inferred as described in the docs https://docs.depict.ai/reference/category-sdk/specifying-listing-type-in-the-category-page-sdk
+   */
+  listingType?: "collection" | "category";
+  /**
+   * 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;
+}
+/**
+ * CategoryPage is a component that renders a Depict category page. Go to definition on the props for more info.
+ * @param props the props for the category page.
+ *
+ * @example
+ * ```tsx
+ * import { DepictProductCard, ImagePlaceholder, Display, CategoryPage } from '@depict-ai/react-ui'
+ *
+ * function Category() {
+ *  return <CategoryPage categoryId="jeans" productCard={MyCustomCategoryProductCard} />
+ * }
+ *
+ * interface MyCustomDisplay extends Display {}
+ *
+ * export const MyCustomCategoryProductCard: DepictProductCard<MyCustomDisplay> = ({
+ *   display,
+ * }) => {
+ *   if (!display) {
+ *     return <ImagePlaceholder aspectRatio={3 / 4} />
+ *   }
+ *
+ *   return (
+ *     <>
+ *       <MyCustomProductCard
+ *         product={{
+ *           id: display.product_id,
+ *           name: display.title,
+ *           description: display.title,
+ *           images: [{ url: display.image_url }],
+ *           price: {
+ *             value: display.sale_price,
+ *           },
+ *         }}
+ *       />
+ *     </>
+ *   )
+ * }
+ * ```
+ */
+export function CategoryPage<OriginalDisplay extends Display, OutputDisplay extends ModernDisplay | never>(props: CategoryPageConfig<[OutputDisplay] extends [never] ? OriginalDisplay : ModernDisplayWithPageUrl<OutputDisplay>>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+/**
+ * BreadCrumbs is the "trail" in the header of a category page.
+ * @property stateKey - When using multiple CategoryPage components on the same page, you need to set a unique stateKey for each one. To associate a certain BreadCrumbs component with a certain CategoryPage component, set the same stateKey on both.
+ */
+export function BreadCrumbs(react_props: {
+  stateKey?: string | undefined;
+}): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+/**
+ * QuickLinks is a component enabling the user to go sideways and downwards in the category tree.
+ * @property stateKey - When using multiple CategoryPage components on the same page, you need to set a unique stateKey for each one. To associate a certain QuickLinks component with a certain CategoryPage component, set the same stateKey on both.
+ */
+export function QuickLinks(react_props?: {
+  stateKey?: string | undefined;
+}): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+/**
+ * A placeholder that can be used instead of an image or other block of content while it's loading.
+ * The placeholder has `display:block`, meaning it will create a new "row" in the layout for itself. Can be used either for images with a defined aspect ratio (ContainedImage) or blocks.
+ * @property aspectRatio if aspectRatio is defined the placeholder will be in "image mode" and fill out the available width and then adjust the height according to the aspectRatio
+ * @property width If width and height is set, the defined width and height will be used.
+ * @property height If width and height is set, the defined width and height will be used.
+ * @property class extra classes to add to the placeholder
+ * @property style extra styles to add to the placeholder
+ */
+export const ImagePlaceholder: React.FC<Parameters<typeof _ImagePlaceholder1>[0] & {
+  className?: string;
+}>;
+/**
+ * A Placeholder to use instead of some text, while it's loading. This is the inline version, meant to be embedded into sentences (or exist instead of them), etc.
+ * If you want a block version, use `ImagePlaceholder` with `width`and `height` set instead.
+ * @property height height of the placeholder. Set to `1em` by default.
+ * @property width width of the placeholder. For specific number of characters use `ch`, ex: `width="7ch"`
+ * @property className extra classes to add to the placeholder
+ * @property style extra styles to add to the placeholder
+ */
+export const TextPlaceholder: React.FC<Parameters<typeof _TextPlaceholder1>[0] & {
+  className?: string;
+}>;
+/**
+ * Parameters to configure the search modal.
+ */
+interface UseSearchModalParams {
+  /**
+   * How the modal should be opened.
+   * Will default to "centered" if nothing else is specified.
+   * - "centered" - The modal will be opened in the center of the screen.
+   * - "aligned" - The modal will be opened aligned to the alignerRef element.
+   */
+  location?: ModalLocation;
+  /**
+   * The ref to the element that the modal should be aligned to.
+   * This is only used when location is "aligned".
+   * @default undefined
+   * @example
+   * ```tsx
+      import React from "react";
+      import { ComponentAligner, useSearchModal } from "@depict-ai/react-ui";
+         const App = () => {
+        const ref = React.createRef();
+           const { open } = useSearchModal({
+          location: "aligned",
+          alignerRef: ref,
+        });
+           return (
+          <div>
+            <ComponentAligner ref={ref} />
+            <button onClick={open}>Open</button>
+          </div>
+        );
+      };
+   * ```
+   */
+  alignerRef?: React.RefObject<HTMLElement>;
+  /**
+   * 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;
+}
+type OpenModal = () => void;
+/**
+ * How the modal should be opened.
+ */
+type ModalLocation = "centered" | "aligned";
+interface UseSearchModalReturn {
+  open: OpenModal;
+}
+/**
+ * Hook used to open the search modal.
+ * @example
+ * Open a centered modal:
+ * ```tsx
+ * import React from "react";
+ * import { useSearchModal } from "@depict-ai/react-ui";
+ *
+ * const App = () => {
+ *   const { open } = useSearchModal({
+ *     location: "centered",
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={open}>Open</button>
+ *     </div>
+ *   );
+ * };
+ * ```
+ * @returns {UseSearchModalReturn}
+ */
+export function useSearchModal(params?: UseSearchModalParams): UseSearchModalReturn;
+interface SearchFieldProps {
+  /**
+   * A reference to the DOM element that the modal should be aligned to.
+   *
+   * The top of the modal will be aligned to the top of the element.
+   *
+   * The height of the search field in the modal will be the same as the height of the element.
+   * If not provided, the modal will be aligned to the search field itself.
+   */
+  alignerRef?: React.RefObject<HTMLElement>;
+  /**
+   * 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;
+}
+interface UseSearchFieldReturn {
+  /**
+   * A React component that renders the search field.
+   */
+  SearchField: () => ReactElement;
+}
+/**
+ * Hook used to configure the Depict search field.
+ * @example
+ * Render a search field that opens a modal aligned to the search field itself:
+ * ```tsx
+ * import React from "react";
+ * import { useSearchField } from "@depict-ai/react-ui";
+ *
+ * const App = () => {
+ *   const { SearchField } = useSearchField();
+ *
+ *   return (
+ *     <div>
+ *       <SearchField />
+ *     </div>
+ *   );
+ * };
+ * ```
+ * @example
+ * Render a search field that opens a modal aligned another DOM element:
+ * ```tsx
+ * import React from "react";
+ * import { ComponentAligner, useSearchField } from "@depict-ai/react-ui";
+ *
+ * const App = () => {
+ *   const ref = useRef(null);
+ *   const { SearchField } = useSearchField({
+ *     alignerRef: ref
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       <ComponentAligner ref={ref} />
+ *       <SearchField />
+ *     </div>
+ *   );
+ * };
+ * ```
+ * @returns {UseSearchFieldReturn}
+ */
+export const useSearchField: (props?: SearchFieldProps) => UseSearchFieldReturn;
+type FetchRecsOptions = Omit<Parameters<typeof fetchDepictRecommendations>[0], "merchant" | "market" | "userId" | "sessionId"> & ExclusiveId;
+interface UseFetchRecommendationsReturn<T extends Display> {
+  /**
+   * Fetch recommendations from the Depict API.
+   * @example
+   * General recommendations for a landing page:
+   * ```tsx
+   * fetchRecommendations({ type: "landing_page" });
+   * ```
+   * @example
+   * Fetch targeted recommendations for a product details page (PDP):
+   * ```tsx
+   * fetchRecommendations({ type: "related", productId: "t-shirt-white" })
+   * ```
+   * @returns {Promise<T[]>}
+   */
+  fetchRecommendations: (opts: FetchRecsOptions) => Promise<T[]>;
+}
+/**
+ * Hook used to fetch Depict recommendations.
+ * @example
+ * Fetch general recommendations for a landing page:
+ * ```tsx
+ * import React from "react";
+ * import { useFetchRecommendations } from "@depict-ai/react-ui";
+ *
+ * export const LandingPage = () => {
+ *   const [recs, setRecs] = React.useState();
+ *   const { fetchRecommendations } = useFetchRecommendations();
+ *
+ *   React.useEffect(() => {
+ *     fetchRecommendations({ type: "landing_page" }).then(setRecs);
+ *   }, [fetchRecommendations]);
+ *
+ *   return (
+ *     <div>
+ *      {recs?.map((display) => (
+ *        <ProductCard display={display} />
+ *      ))}
+ *     </div>
+ *   );
+ * };
+ * ```
+ * @example
+ * Fetch targeted recommendations for a product details page (PDP):
+ * ```tsx
+ * import React from "react";
+ * import { useFetchRecommendations } from "@depict-ai/react-ui";
+ *
+ * export const ProductPage = ({ productId }) => {
+ *   const [recs, setRecs] = React.useState();
+ *   const { fetchRecommendations } = useFetchRecommendations();
+ *
+ *   React.useEffect(() => {
+ *     fetchRecommendations({ type: "related", productId }).then(setRecs);
+ *   }, [fetchRecommendations, productId]);
+ *
+ *   return (
+ *     <div>
+ *      {recs?.map((display) => (
+ *        <ProductCard display={display} />
+ *      ))}
+ *     </div>
+ *   );
+ * };
+ * ```
+ * @returns {UseFetchRecommendationsReturn}
+ */
+export function useFetchRecommendations<T extends Display>(): UseFetchRecommendationsReturn<T>;
+/**
+ * Helper function to navigate to a new page depending on the navigation library used.
+ */
+export const Navigation: {
+  nextRouterNavigation: (router: import("next/router").NextRouter) => import("ui/components/DepictProvider").NavigateFunction;
+};
+export { CategoryTitle, embedded_num_products as EmbeddedNumProducts } from "@depict-ai/ui";
+export type { PageURLCreator } from "@depict-ai/ui";
+export type { Locale } from "@depict-ai/ui/locales";

package/server/ES10/index.js

@@ -0,0 +1,115 @@
+import { createElement as $7h5e1$createElement, useRef as $7h5e1$useRef, Fragment as $7h5e1$Fragment } from "react";
+import { jsx as $7h5e1$jsx } from "react/jsx-runtime";
+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 { register_es_version } from "../../multi_import_deduplicator.mjs";
+register_es_version("react-ui", "ES10");
+function $e8e755ef02e716bf$export$4b564d7f5a1b1d43(_ref) {
+  let {
+    solid_component: solid_component,
+    props: props,
+    wrapper_type = "div",
+    wrapper_style = {}
+  } = _ref;
+  const wrapper_element_ref = (0, $7h5e1$useRef)();
+  // The worst thing that can happen by multiple generateHydrationScript's is that events dispatched before the hydration are duplicated in solid's shared context which leads to them being deduplicated again here https://github.com/ryansolid/dom-expressions/blob/21fdba5bcab25986a2b93003aaace100b2231cdc/packages/dom-expressions/src/client.js#L280
+  const rendered_html = (0, $7h5e1$renderToString)(() => solid_component(props, () => {})) + (0, $7h5e1$generateHydrationScript)();
+  return (0, $7h5e1$createElement)((0, $7h5e1$Fragment), null, (0, $7h5e1$createElement)(wrapper_type, {
+    ref: wrapper_element_ref,
+    style: wrapper_style,
+    dangerouslySetInnerHTML: {
+      __html: rendered_html
+    }
+  }));
+}
+const $9bd9bb8700ab2ada$export$83d89fbfd8236492 = "1.5.4";
+function $5c4add0a8fe94894$export$9fac37a9c21c2f3b(props) {
+  return props.children;
+}
+function $5c4add0a8fe94894$export$a54ec244c8863715() {
+  return (0, $7h5e1$jsx)("div", {
+    children: []
+  });
+}
+function $5c4add0a8fe94894$export$f7d2f673fc2f091d() {
+  return (0, $7h5e1$jsx)("div", {
+    children: []
+  });
+}
+function $5c4add0a8fe94894$export$5646050d516e06bc() {
+  return (0, $7h5e1$jsx)("div", {
+    children: []
+  });
+}
+function $5c4add0a8fe94894$export$466cdc317043f6cb() {
+  return (0, $7h5e1$jsx)("div", {
+    children: []
+  });
+}
+function $5c4add0a8fe94894$export$80e99ee6b29cadd2() {
+  return (0, $7h5e1$createElement)("div", {
+    className: "depict aligner",
+    style: {
+      height: "100%"
+    }
+  });
+}
+function $5c4add0a8fe94894$export$3f37af283f8fb843(raw_react_props) {
+  const react_props = {
+    class: raw_react_props.className,
+    ...raw_react_props
+  };
+  return (0, $e8e755ef02e716bf$export$4b564d7f5a1b1d43)({
+    solid_component: props_store => (0, $7h5e1$ImagePlaceholder)(props_store),
+    props: react_props,
+    wrapper_type: "span"
+  });
+}
+function $5c4add0a8fe94894$export$89c6019e4baa40b1(raw_react_props) {
+  const react_props = {
+    ...raw_react_props,
+    class: raw_react_props.className
+  };
+  return (0, $e8e755ef02e716bf$export$4b564d7f5a1b1d43)({
+    solid_component: props_store => (0, $7h5e1$TextPlaceholder)(props_store),
+    props: react_props,
+    wrapper_type: "span",
+    wrapper_style: {
+      "height": "100%"
+    }
+  });
+}
+function $5c4add0a8fe94894$export$9bb30bbe003b82e0() {
+  return {
+    SearchField: () => (0, $7h5e1$jsx)("div", {
+      children: []
+    })
+  };
+}
+function $5c4add0a8fe94894$export$a7f6cffb6b8ba11c() {}
+function $5c4add0a8fe94894$export$912994940e660d32() {
+  return {
+    open: () => {}
+  };
+}
+function $5c4add0a8fe94894$export$38b98fae14bd1f64() {
+  const mock = {
+    get: function (target, property) {
+      if (typeof target[property] === "undefined") return () => {
+        throw new Error("Depict Performance Client is currently not available on the server. Please wrap your call in a useEffect hook or user event handler.");
+      };
+      return target[property];
+    }
+  };
+  return {
+    dpc: new Proxy({}, mock)
+  };
+}
+function $5c4add0a8fe94894$export$6501da23a2770fc() {
+  return {
+    fetchRecommendations: () => {
+      throw new Error("fetchRecommendations is currently not available on the server due to personalisation/user_id related issues. Please only call it on the client.");
+    }
+  };
+}
+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 };