@depict-ai/react-ui 0.0.92 → 0.0.93

package/README.md

@@ -1,3 +1,3 @@
-# React flavour of the Depict UI
-
+# React flavour of the Depict UI
+
 See the [documentation](https://docs.depict.ai/docs/sdk-intro).

package/dist/index.d.ts

@@ -1,388 +1,388 @@
-import { BaseProductListingConfig, BaseProviderConfig, BaseSearchProviderConfig, BaseSearchPageConfig, BaseCategoryPageConfig, CategoryTitle, embedded_num_products, ImagePlaceholderProps, TextPlaceholderProps } from "@depict-ai/ui";
-import { Display } from "@depict-ai/utilishared";
-import React, { ReactNode, PropsWithChildren, ReactElement } from "react";
-import { Locale } from "@depict-ai/ui/locales";
-export const version = "0.0.92";
-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;
-type NavigateFunction = (relativeUrl: string) => void;
-/**
- * The config for the DepictProvider.
- */
-type ProviderConfig = BaseProviderConfig & {
-    /**
-     * 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) => {
-     *  router.push(relativeUrl);
-     * };
-     * ```
-     */
-    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;
-    /**
-     * Custom metadata to be sent with each request to the Depict API. Only necessary if specifically instructed by Depict.
-     */
-    metaData?: Record<string, string>;
-    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(props: PropsWithChildren<ProviderConfig>): 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> {
-}
-/**
- * SearchPage is a component that renders a Depict search results page.
- * @param props - The props for the search page.
- *
- * @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<T extends Display>(props: SearchPageConfig<T>): 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={CategoryTitle} />
-     * ```
-     */
-    categoryTitlePlugin?: typeof CategoryTitle | typeof embedded_num_products;
-}
-/**
- * CategoryPage is a component that renders a Depict category page.
- * @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<T extends Display>(props: CategoryPageConfig<T>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-/**
- * BreadCrumbs is the "trail" in the header of a category page.
- */
-export function BreadCrumbs(): 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.
- */
-export function QuickLinks(): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-/**
- * A placeholder image that can be used in place of an image that is loading.
- * @param props
- * @returns
- */
-export const ImagePlaceholder: React.FC<ImagePlaceholderProps>;
-/** A placeholder text that can be used in place of a text that is loading. */
-export const TextPlaceholder: React.FC<TextPlaceholderProps>;
-/**
- * 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>;
-}
-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 {JSX.Element}
- */
-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>;
-}
-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 {JSX.Element}
- */
-export const useSearchField: (props?: SearchFieldProps) => UseSearchFieldReturn;
-/**
- * Helper function to navigate to a new page depending on the navigation library used.
- */
-export const Navigation: {
-    nextRouterNavigation: (router: import("next/router").NextRouter) => (relativeUrl: string) => void;
-};
-export { CategoryTitle, embedded_num_products as EmbeddedNumProducts } from "@depict-ai/ui";
-export type { Locale } from "@depict-ai/ui/locales";
+import { BaseProductListingConfig, BaseProviderConfig, BaseSearchProviderConfig, BaseSearchPageConfig, BaseCategoryPageConfig, CategoryTitle, embedded_num_products, ImagePlaceholderProps, TextPlaceholderProps } from "@depict-ai/ui";
+import { Display } from "@depict-ai/utilishared";
+import React, { ReactNode, PropsWithChildren, ReactElement } from "react";
+import { Locale } from "@depict-ai/ui/locales";
+export const version = "0.0.93";
+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;
+type NavigateFunction = (relativeUrl: string) => void;
+/**
+ * The config for the DepictProvider.
+ */
+type ProviderConfig = BaseProviderConfig & {
+    /**
+     * 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) => {
+     *  router.push(relativeUrl);
+     * };
+     * ```
+     */
+    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;
+    /**
+     * Custom metadata to be sent with each request to the Depict API. Only necessary if specifically instructed by Depict.
+     */
+    metaData?: Record<string, string>;
+    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(props: PropsWithChildren<ProviderConfig>): 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> {
+}
+/**
+ * SearchPage is a component that renders a Depict search results page.
+ * @param props - The props for the search page.
+ *
+ * @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<T extends Display>(props: SearchPageConfig<T>): 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={CategoryTitle} />
+     * ```
+     */
+    categoryTitlePlugin?: typeof CategoryTitle | typeof embedded_num_products;
+}
+/**
+ * CategoryPage is a component that renders a Depict category page.
+ * @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<T extends Display>(props: CategoryPageConfig<T>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+/**
+ * BreadCrumbs is the "trail" in the header of a category page.
+ */
+export function BreadCrumbs(): 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.
+ */
+export function QuickLinks(): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+/**
+ * A placeholder image that can be used in place of an image that is loading.
+ * @param props
+ * @returns
+ */
+export const ImagePlaceholder: React.FC<ImagePlaceholderProps>;
+/** A placeholder text that can be used in place of a text that is loading. */
+export const TextPlaceholder: React.FC<TextPlaceholderProps>;
+/**
+ * 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>;
+}
+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 {JSX.Element}
+ */
+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>;
+}
+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 {JSX.Element}
+ */
+export const useSearchField: (props?: SearchFieldProps) => UseSearchFieldReturn;
+/**
+ * Helper function to navigate to a new page depending on the navigation library used.
+ */
+export const Navigation: {
+    nextRouterNavigation: (router: import("next/router").NextRouter) => (relativeUrl: string) => void;
+};
+export { CategoryTitle, embedded_num_products as EmbeddedNumProducts } from "@depict-ai/ui";
+export type { Locale } from "@depict-ai/ui/locales";

package/dist/main.js

@@ -27,7 +27,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 = "0.0.92";
+const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.93";
 
 
 
@@ -67,9 +67,9 @@ function $6319748b4f0426f0$export$6453cbc34515a94d(is_search_page) {
         $6319748b4f0426f0$var$addLotsOfPadding();
     });
 }
-/*
- 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({

package/dist/module.js

@@ -9,7 +9,7 @@ import {createPortal as $TZSbU$createPortal} from "react-dom";
 
 /*! 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 = "0.0.92";
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.93";
 
 
 
@@ -49,9 +49,9 @@ function $8071251ee4e9ffa1$export$6453cbc34515a94d(is_search_page) {
         $8071251ee4e9ffa1$var$addLotsOfPadding();
     });
 }
-/*
- 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({

package/dist-server/dist/index.d.ts

@@ -0,0 +1,28 @@
+import { ReactElement } from "react";
+type OpenModal = () => void;
+interface UseSearchModalReturn {
+    open: OpenModal;
+}
+interface UseSearchFieldReturn {
+    /**
+     * A React component that renders the search field.
+     */
+    SearchField: () => ReactElement;
+}
+export const version = "0.0.93";
+export function DepictProvider(props: any): any;
+export function SearchPage(): any;
+export function CategoryPage(): any;
+export function BreadCrumbs(): any;
+export function QuickLinks(): any;
+export function ComponentAligner(): import("react").DetailedReactHTMLElement<{
+    className: string;
+    style: {
+        height: string;
+    };
+}, HTMLElement>;
+export function ImagePlaceholder(): any;
+export function TextPlaceholder(): any;
+export function useSearchField(): UseSearchFieldReturn;
+export function openModal(): void;
+export function useSearchModal(): UseSearchModalReturn;

package/dist-server/dist/main.js

@@ -0,0 +1,80 @@
+var $5efvh$react = require("react");
+var $5efvh$reactjsxruntime = require("react/jsx-runtime");
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "DepictProvider", () => $41e7e5d85b5e0d49$export$9fac37a9c21c2f3b);
+$parcel$export(module.exports, "SearchPage", () => $41e7e5d85b5e0d49$export$a54ec244c8863715);
+$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, "ComponentAligner", () => $41e7e5d85b5e0d49$export$80e99ee6b29cadd2);
+$parcel$export(module.exports, "ImagePlaceholder", () => $41e7e5d85b5e0d49$export$3f37af283f8fb843);
+$parcel$export(module.exports, "TextPlaceholder", () => $41e7e5d85b5e0d49$export$89c6019e4baa40b1);
+$parcel$export(module.exports, "useSearchField", () => $41e7e5d85b5e0d49$export$9bb30bbe003b82e0);
+$parcel$export(module.exports, "openModal", () => $41e7e5d85b5e0d49$export$a7f6cffb6b8ba11c);
+$parcel$export(module.exports, "useSearchModal", () => $41e7e5d85b5e0d49$export$912994940e660d32);
+$parcel$export(module.exports, "version", () => $db7b67857900028b$export$83d89fbfd8236492);
+
+
+const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.93";
+
+
+function $41e7e5d85b5e0d49$export$9fac37a9c21c2f3b(props) {
+    return props.children;
+}
+function $41e7e5d85b5e0d49$export$a54ec244c8863715() {
+    return (0, $5efvh$reactjsxruntime.jsx)("div", {
+        children: []
+    });
+}
+function $41e7e5d85b5e0d49$export$f7d2f673fc2f091d() {
+    return (0, $5efvh$reactjsxruntime.jsx)("div", {
+        children: []
+    });
+}
+function $41e7e5d85b5e0d49$export$5646050d516e06bc() {
+    return (0, $5efvh$reactjsxruntime.jsx)("div", {
+        children: []
+    });
+}
+function $41e7e5d85b5e0d49$export$466cdc317043f6cb() {
+    return (0, $5efvh$reactjsxruntime.jsx)("div", {
+        children: []
+    });
+}
+function $41e7e5d85b5e0d49$export$80e99ee6b29cadd2() {
+    return (0, $5efvh$react.createElement)("div", {
+        className: "depict aligner",
+        style: {
+            height: "100%"
+        }
+    });
+}
+function $41e7e5d85b5e0d49$export$3f37af283f8fb843() {
+    return (0, $5efvh$reactjsxruntime.jsx)("div", {
+        children: []
+    });
+}
+function $41e7e5d85b5e0d49$export$89c6019e4baa40b1() {
+    return (0, $5efvh$reactjsxruntime.jsx)("div", {
+        children: []
+    });
+}
+function $41e7e5d85b5e0d49$export$9bb30bbe003b82e0() {
+    return {
+        SearchField: ()=>(0, $5efvh$reactjsxruntime.jsx)("div", {
+                children: []
+            })
+    };
+}
+function $41e7e5d85b5e0d49$export$a7f6cffb6b8ba11c() {}
+function $41e7e5d85b5e0d49$export$912994940e660d32() {
+    return {
+        open: ()=>{}
+    };
+}
+
+

package/dist-server/dist/module.js

@@ -0,0 +1,65 @@
+import {createElement as $1RlIW$createElement} from "react";
+import {jsx as $1RlIW$jsx} from "react/jsx-runtime";
+
+
+
+const $c9c4d066f9a5b51b$export$83d89fbfd8236492 = "0.0.93";
+
+
+function $2b1fdeb83610500f$export$9fac37a9c21c2f3b(props) {
+    return props.children;
+}
+function $2b1fdeb83610500f$export$a54ec244c8863715() {
+    return (0, $1RlIW$jsx)("div", {
+        children: []
+    });
+}
+function $2b1fdeb83610500f$export$f7d2f673fc2f091d() {
+    return (0, $1RlIW$jsx)("div", {
+        children: []
+    });
+}
+function $2b1fdeb83610500f$export$5646050d516e06bc() {
+    return (0, $1RlIW$jsx)("div", {
+        children: []
+    });
+}
+function $2b1fdeb83610500f$export$466cdc317043f6cb() {
+    return (0, $1RlIW$jsx)("div", {
+        children: []
+    });
+}
+function $2b1fdeb83610500f$export$80e99ee6b29cadd2() {
+    return (0, $1RlIW$createElement)("div", {
+        className: "depict aligner",
+        style: {
+            height: "100%"
+        }
+    });
+}
+function $2b1fdeb83610500f$export$3f37af283f8fb843() {
+    return (0, $1RlIW$jsx)("div", {
+        children: []
+    });
+}
+function $2b1fdeb83610500f$export$89c6019e4baa40b1() {
+    return (0, $1RlIW$jsx)("div", {
+        children: []
+    });
+}
+function $2b1fdeb83610500f$export$9bb30bbe003b82e0() {
+    return {
+        SearchField: ()=>(0, $1RlIW$jsx)("div", {
+                children: []
+            })
+    };
+}
+function $2b1fdeb83610500f$export$a7f6cffb6b8ba11c() {}
+function $2b1fdeb83610500f$export$912994940e660d32() {
+    return {
+        open: ()=>{}
+    };
+}
+
+
+export {$2b1fdeb83610500f$export$9fac37a9c21c2f3b as DepictProvider, $2b1fdeb83610500f$export$a54ec244c8863715 as SearchPage, $2b1fdeb83610500f$export$f7d2f673fc2f091d as CategoryPage, $2b1fdeb83610500f$export$5646050d516e06bc as BreadCrumbs, $2b1fdeb83610500f$export$466cdc317043f6cb as QuickLinks, $2b1fdeb83610500f$export$80e99ee6b29cadd2 as ComponentAligner, $2b1fdeb83610500f$export$3f37af283f8fb843 as ImagePlaceholder, $2b1fdeb83610500f$export$89c6019e4baa40b1 as TextPlaceholder, $2b1fdeb83610500f$export$9bb30bbe003b82e0 as useSearchField, $2b1fdeb83610500f$export$a7f6cffb6b8ba11c as openModal, $2b1fdeb83610500f$export$912994940e660d32 as useSearchModal, $c9c4d066f9a5b51b$export$83d89fbfd8236492 as version};

package/dist-server/index.d.ts

@@ -1,28 +1,28 @@
-import { ReactElement } from "react";
-type OpenModal = () => void;
-interface UseSearchModalReturn {
-    open: OpenModal;
-}
-interface UseSearchFieldReturn {
-    /**
-     * A React component that renders the search field.
-     */
-    SearchField: () => ReactElement;
-}
-export const version = "0.0.92";
-export function DepictProvider(props: any): any;
-export function SearchPage(): any;
-export function CategoryPage(): any;
-export function BreadCrumbs(): any;
-export function QuickLinks(): any;
-export function ComponentAligner(): import("react").DetailedReactHTMLElement<{
-    className: string;
-    style: {
-        height: string;
-    };
-}, HTMLElement>;
-export function ImagePlaceholder(): any;
-export function TextPlaceholder(): any;
-export function useSearchField(): UseSearchFieldReturn;
-export function openModal(): void;
-export function useSearchModal(): UseSearchModalReturn;
+import { ReactElement } from "react";
+type OpenModal = () => void;
+interface UseSearchModalReturn {
+    open: OpenModal;
+}
+interface UseSearchFieldReturn {
+    /**
+     * A React component that renders the search field.
+     */
+    SearchField: () => ReactElement;
+}
+export const version = "0.0.92";
+export function DepictProvider(props: any): any;
+export function SearchPage(): any;
+export function CategoryPage(): any;
+export function BreadCrumbs(): any;
+export function QuickLinks(): any;
+export function ComponentAligner(): import("react").DetailedReactHTMLElement<{
+    className: string;
+    style: {
+        height: string;
+    };
+}, HTMLElement>;
+export function ImagePlaceholder(): any;
+export function TextPlaceholder(): any;
+export function useSearchField(): UseSearchFieldReturn;
+export function openModal(): void;
+export function useSearchModal(): UseSearchModalReturn;

package/locales/index.d.ts

@@ -1,2 +1,2 @@
-export type { plp_shared_i18n, search_i18n, category_i18n, Locale } from "@depict-ai/ui/locales";
-export { cz, de, en, da, fi, pl, fr, sv, pt, no, nl, es, it } from "@depict-ai/ui/locales";
+export type { plp_shared_i18n, search_i18n, category_i18n, Locale } from "@depict-ai/ui/locales";
+export { cz, de, en, da, fi, pl, fr, sv, pt, no, nl, es, it } from "@depict-ai/ui/locales";

package/locales/index.js

@@ -1 +1 @@
-export * from "@depict-ai/ui/locales";
+export * from "@depict-ai/ui/locales";

package/locales/require.js

@@ -1 +1 @@
-module.exports = require("@depict-ai/ui/locales");
+module.exports = require("@depict-ai/ui/locales");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depict-ai/react-ui",
-  "version": "0.0.92",
+  "version": "0.0.93",
   "packageManager": "yarn@3.2.2",
   "source": "src/index.ts",
   "main": "dist/main.js",
@@ -96,9 +96,9 @@
     "/locales"
   ],
   "dependencies": {
-    "@depict-ai/plp-styling": "^0.0.32",
-    "@depict-ai/ui": "^0.0.71",
-    "@depict-ai/utilishared": "^0.0.75",
+    "@depict-ai/plp-styling": "^0.0.33",
+    "@depict-ai/ui": "^0.0.72",
+    "@depict-ai/utilishared": "^0.0.76",
     "solid-js": "^1.6.2"
   },
   "peerDependencies": {
@@ -111,7 +111,7 @@
     "@babel/preset-typescript": "latest",
     "@babel/runtime": "latest",
     "@babel/runtime-corejs3": "latest",
-    "@depict-ai/plp-styling": "^0.0.32",
+    "@depict-ai/plp-styling": "^0.0.33",
     "@jest/globals": "^29.3.1",
     "@parcel/babel-preset-env": "latest",
     "@parcel/resolver-default": "^2.8.0",