@depict-ai/react-ui 0.0.74 → 0.0.76

package/dist/index.d.ts

@@ -1,29 +1,13 @@
-import { SDKColsAtSize, SDKGridSpacing, CategoryTitle, EmbeddedNumProducts } from "@depict-ai/js-ui";
+import { BasePLPConfig, BaseProviderConfig, BaseSearchProviderConfig, BaseSearchPageConfig, BaseCategoryPageConfig, CategoryTitle, embedded_num_products } from "@depict-ai/ui";
 import { Display } from "@depict-ai/utilishared";
 import React, { ReactNode, PropsWithChildren, ReactElement } from "react";
-import { Locale } from "@depict-ai/js-ui/locales";
-export const version = "0.0.74";
-interface PLPConfig<T extends Display> {
+import { Locale } from "@depict-ai/ui/locales";
+export const version = "0.0.76";
+interface PLPConfig<T extends Display> extends BasePLPConfig {
     /**
      * The product card to use for rendering products.
      */
     productCard: DepictProductCard<T>;
-    /**
-     * How many columns to show at each media size.
-     * @default
-     * [[2, 901], [3, 1024], [4]]
-     * @example
-     * [[2, 901], [3, 1024], [4]]
-     * means 2 columns at sizes up to 901px, 3 columns at sizes up to 1024px and after that 4 columns at any size.
-     */
-    columnsAtSize?: SDKColsAtSize;
-    /**
-     * The spacing between products.
-     * @default "2%"
-     * @example
-     * "2%", "10px", "1rem", {horizontal: "1%", vertical: "5px"}
-     */
-    gridSpacing?: SDKGridSpacing;
 }
 /**
  * The Depict product card props.
@@ -37,35 +21,10 @@ export interface DepictProductCardProps<T extends Display> {
  */
 export type DepictProductCard<T extends Display> = (props: DepictProductCardProps<T>) => ReactNode;
 type NavigateFunction = (relativeUrl: string) => void;
-type DepictSearchConfig = {
-    /**
-     * The path to the search page.
-     * @example "/search", "/sok"
-     */
-    searchPagePath: string;
-    /**
-     * The name of the url parameter that will be used for the search query.
-     * @example "q", "search_query"
-     * @default "search_query"
-     */
-    urlParamName?: string;
-    /**
-     * Whether to enable category suggestions in the search modal and search page.
-     * @default false
-     */
-    enableCategorySuggestions?: boolean;
-};
-type DepictBaseConfig = {
-    /**
-     * The merchant to use for the search.
-     * @example "YOUR_MERCHANT", "stronger"
-     */
-    merchant: string;
-    /**
-     * The market to use for the search.
-     * @example "YOUR_MARKET", "no", "en-de"
-     */
-    market: string;
+/**
+ * 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.
@@ -111,12 +70,7 @@ type DepictBaseConfig = {
      * @default en
      */
     locale?: Locale;
-};
-/**
- * The config for the DepictProvider.
- */
-type DepictConfig = DepictBaseConfig & {
-    search: DepictSearchConfig;
+    search: BaseSearchProviderConfig;
 };
 /**
  * The DepictProvider is a wrapper component that should be used to wrap any component that uses Depict components.
@@ -143,28 +97,28 @@ type DepictConfig = DepictBaseConfig & {
  * ```
  * @returns {JSX.Element} The DepictProvider.
  */
-export function DepictProvider(props: PropsWithChildren<DepictConfig>): import("react").FunctionComponentElement<{
+export function DepictProvider(props: PropsWithChildren<ProviderConfig>): import("react").FunctionComponentElement<{
     children?: import("react").ReactNode;
 }>;
 /**
- * A component used to align other Depict components on.
+ * A component used to align other Depict components to.
  * @example
  * Align the search modal
  * ```tsx
  * import React from "react";
- * import { DepictAligner, useDepictSearchModal } from "@depict-ai/react-ui";
+ * import { ComponentAligner, useSearchModal } from "@depict-ai/react-ui";
  *
  * const App = () => {
  *   const ref = React.createRef();
  *
- *   const { open } = useDepictSearchModal({
+ *   const { open } = useSearchModal({
  *     location: "aligned",
  *     alignerRef: ref,
  *   });
  *
  *   return (
  *     <div>
- *       <DepictAligner ref={ref} />
+ *       <ComponentAligner ref={ref} />
  *       <button onClick={open}>Open</button>
  *     </div>
  *   );
@@ -172,24 +126,19 @@ export function DepictProvider(props: PropsWithChildren<DepictConfig>): import("
  * ```
  * @returns {JSX.Element}
  */
-export const DepictAligner: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
-interface SearchPageConfig<T extends Display> extends PLPConfig<T> {
-    /**
-     * Whether to show the search input field in the search page.
-     * @default true
-     */
-    includeInputField?: boolean;
+export const ComponentAligner: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
+interface SearchPageConfig<T extends Display> extends BaseSearchPageConfig, PLPConfig<T> {
 }
 /**
- * DepictSearchPage is a component that renders a search page.
+ * 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, DepictSearchPage } from '@depict-ai/react-ui'
+ * import { DepictProductCard, ImagePlaceholder, Display, SearchPage } from '@depict-ai/react-ui'
  *
  * function Search() {
- *    return <DepictSearchPage productCard={MyCustomSearchProductCard} />
+ *    return <SearchPage productCard={MyCustomSearchProductCard} />
  * }
  *
  * interface MyCustomDisplay extends Display {}
@@ -220,43 +169,33 @@ interface SearchPageConfig<T extends Display> extends PLPConfig<T> {
  *
  * ```
  */
-export function DepictSearchPage<T extends Display>(props: SearchPageConfig<T>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-interface CategoryPageConfig<T extends Display> extends PLPConfig<T> {
+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;
-    /**
-     * Whether to show the breadcrumbs in the category page.
-     * @default true
-     */
-    showBreadcrumbs?: boolean;
-    /**
-     * Whether to show the quicklinks in the category page.
-     * @default true
-     */
-    showQuicklinks?: boolean;
     /**
      * categoryTitlePlugin is an optional plugin that can be used to customize the title of the category page.
      * @default CategoryTitle
      *
      * @example
      * ```tsx
-     * <DepictCategoryPage categoryId="jeans" productCard={MyCustomCategoryProductCard}  categoryTitlePlugin={CategoryTitle} />
+     * <CategoryPage categoryId="jeans" productCard={MyCustomCategoryProductCard}  categoryTitlePlugin={CategoryTitle} />
      * ```
      */
-    categoryTitlePlugin?: typeof CategoryTitle | typeof EmbeddedNumProducts;
+    categoryTitlePlugin?: typeof CategoryTitle | typeof embedded_num_products;
 }
 /**
- * DepictCategoryPage is a component that renders a category page.
+ * CategoryPage is a component that renders a Depict category page.
  * @param props the props for the category page.
  *
  * @example
  * ```tsx
- * import { DepictProductCard, ImagePlaceholder, Display, DepictCategoryPage } from '@depict-ai/react-ui'
+ * import { DepictProductCard, ImagePlaceholder, Display, CategoryPage } from '@depict-ai/react-ui'
  *
  * function Category() {
- *  return <DepictCategoryPage categoryId="jeans" productCard={MyCustomCategoryProductCard} />
+ *  return <CategoryPage categoryId="jeans" productCard={MyCustomCategoryProductCard} />
  * }
  *
  * interface MyCustomDisplay extends Display {}
@@ -286,7 +225,7 @@ interface CategoryPageConfig<T extends Display> extends PLPConfig<T> {
  * }
  * ```
  */
-export function DepictCategoryPage<T extends Display>(props: CategoryPageConfig<T>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+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.
  */
@@ -343,19 +282,19 @@ interface UseSearchModalParams {
      * @example
      * ```tsx
         import React from "react";
-        import { DepictAligner, useDepictSearchModal } from "@depict-ai/react-ui";
+        import { ComponentAligner, useSearchModal } from "@depict-ai/react-ui";
   
         const App = () => {
           const ref = React.createRef();
   
-          const { open } = useDepictSearchModal({
+          const { open } = useSearchModal({
             location: "aligned",
             alignerRef: ref,
           });
   
           return (
             <div>
-              <DepictAligner ref={ref} />
+              <ComponentAligner ref={ref} />
               <button onClick={open}>Open</button>
             </div>
           );
@@ -378,10 +317,10 @@ interface UseSearchModalReturn {
  * Open a centered modal:
  * ```tsx
  * import React from "react";
- * import { useDepictSearchModal } from "@depict-ai/react-ui";
+ * import { useSearchModal } from "@depict-ai/react-ui";
  *
  * const App = () => {
- *   const { open } = useDepictSearchModal({
+ *   const { open } = useSearchModal({
  *     location: "centered",
  *   });
  *
@@ -394,23 +333,23 @@ interface UseSearchModalReturn {
  * ```
  * @returns {JSX.Element}
  */
-export function useDepictSearchModal(params?: UseSearchModalParams): 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 hight of the search field in the modal will be the same as the height 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 UseDepictSearchFieldReturn {
+interface UseSearchFieldReturn {
     /**
      * A React component that renders the search field.
      */
-    DepictSearchField: () => ReactElement;
+    SearchField: () => ReactElement;
 }
 /**
  * Hook used to configure the Depict search field.
@@ -418,14 +357,14 @@ interface UseDepictSearchFieldReturn {
  * Render a search field that opens a modal aligned to the search field itself:
  * ```tsx
  * import React from "react";
- * import { useDepictSearchField } from "@depict-ai/react-ui";
+ * import { useSearchField } from "@depict-ai/react-ui";
  *
  * const App = () => {
- *   const { DepictSearchField } = useDepictSearchField();
+ *   const { SearchField } = useSearchField();
  *
  *   return (
  *     <div>
- *       <DepictSearchField />
+ *       <SearchField />
  *     </div>
  *   );
  * };
@@ -434,30 +373,30 @@ interface UseDepictSearchFieldReturn {
  * Render a search field that opens a modal aligned another DOM element:
  * ```tsx
  * import React from "react";
- * import { DepictAligner, useDepictSearchField } from "@depict-ai/react-ui";
+ * import { ComponentAligner, useSearchField } from "@depict-ai/react-ui";
  *
  * const App = () => {
  *   const ref = useRef(null);
- *   const { DepictSearchField } = useDepictSearchField({
+ *   const { SearchField } = useSearchField({
  *     alignerRef: ref
  *   });
  *
  *   return (
  *     <div>
- *       <DepictAligner ref={ref} />
- *       <DepictSearchField />
+ *       <ComponentAligner ref={ref} />
+ *       <SearchField />
  *     </div>
  *   );
  * };
  * ```
  * @returns {JSX.Element}
  */
-export const useDepictSearchField: (props?: SearchFieldProps) => UseDepictSearchFieldReturn;
+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, EmbeddedNumProducts } from "@depict-ai/js-ui";
-export type { Locale } from "@depict-ai/js-ui/locales";
+export { CategoryTitle, embedded_num_products as EmbeddedNumProducts } from "@depict-ai/ui";
+export type { Locale } from "@depict-ai/ui/locales";

package/dist/main.js

@@ -1,12 +1,11 @@
 var $4GYXz$depictaiutilishared = require("@depict-ai/utilishared");
-var $4GYXz$depictaijsui = require("@depict-ai/js-ui");
+var $4GYXz$depictaiui = require("@depict-ai/ui");
 var $4GYXz$solidjs = require("solid-js");
 var $4GYXz$react = require("react");
-var $4GYXz$depictaijsuilocales = require("@depict-ai/js-ui/locales");
+var $4GYXz$depictaiuilocales = require("@depict-ai/ui/locales");
 var $4GYXz$solidjsweb = require("solid-js/web");
 var $4GYXz$reactjsxruntime = require("react/jsx-runtime");
 var $4GYXz$reactdom = require("react-dom");
-var $4GYXz$depictaiui = require("@depict-ai/ui");
 
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
@@ -14,21 +13,21 @@ function $parcel$export(e, n, v, s) {
 
 $parcel$export(module.exports, "QuickLinks", () => $f16af0e861aff3d0$export$466cdc317043f6cb);
 $parcel$export(module.exports, "BreadCrumbs", () => $d88e98b11c182b8e$export$5646050d516e06bc);
-$parcel$export(module.exports, "DepictAligner", () => $d96434e62e08087d$export$3f4580d6398c5027);
+$parcel$export(module.exports, "ComponentAligner", () => $883a881f7926405d$export$80e99ee6b29cadd2);
 $parcel$export(module.exports, "DepictProvider", () => $24b00503eef73528$export$9fac37a9c21c2f3b);
-$parcel$export(module.exports, "DepictCategoryPage", () => $5aa5fcb9f8a2bebc$export$d87c61cecb2edf0d);
-$parcel$export(module.exports, "DepictSearchPage", () => $7ad7a3d0011b7b1b$export$210723f5a54a7028);
+$parcel$export(module.exports, "CategoryPage", () => $5aa5fcb9f8a2bebc$export$f7d2f673fc2f091d);
+$parcel$export(module.exports, "SearchPage", () => $7ad7a3d0011b7b1b$export$a54ec244c8863715);
 $parcel$export(module.exports, "ImagePlaceholder", () => $df522c8a81ed5a01$export$3f37af283f8fb843);
 $parcel$export(module.exports, "TextPlaceholder", () => $7c8b440edc188ad5$export$89c6019e4baa40b1);
-$parcel$export(module.exports, "useDepictSearchModal", () => $3647cad61d03b89c$export$cc1e9aaf280afdcb);
-$parcel$export(module.exports, "useDepictSearchField", () => $ca5840628781f899$export$45080d603eda647c);
+$parcel$export(module.exports, "useSearchModal", () => $ae73b15c325f1b21$export$912994940e660d32);
+$parcel$export(module.exports, "useSearchField", () => $913da7f4d0bc77f2$export$9bb30bbe003b82e0);
 $parcel$export(module.exports, "CategoryTitle", () => $b03e4eee8610ebbe$re_export$CategoryTitle);
 $parcel$export(module.exports, "EmbeddedNumProducts", () => $b03e4eee8610ebbe$re_export$EmbeddedNumProducts);
 $parcel$export(module.exports, "version", () => $db7b67857900028b$export$83d89fbfd8236492);
 $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.74";
+const $db7b67857900028b$export$83d89fbfd8236492 = "0.0.76";
 
 
 
@@ -186,7 +185,7 @@ const $bc389476eeb2b615$export$599d4515591ef232 = (relativeUrl)=>{
 
 function $24b00503eef73528$export$9fac37a9c21c2f3b(props) {
     const { children: children , navigateFunction: navigateFunction , market: market , merchant: merchant , locale: locale  } = props;
-    const usedLocale = locale ?? (0, $4GYXz$depictaijsuilocales.en);
+    const usedLocale = locale ?? (0, $4GYXz$depictaiuilocales.en);
     const { searchPagePath: searchPagePath , urlParamName: urlParamName , enableCategorySuggestions: enableCategorySuggestions  } = props.search ?? {};
     if (!market || !merchant) {
         (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).required_state_set_[1](false);
@@ -196,11 +195,12 @@ function $24b00503eef73528$export$9fac37a9c21c2f3b(props) {
         const { search: search , category: category  } = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e);
         const [get_search_page_path, set_search_page_path] = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search_page_path_;
         set_search_page_path($24b00503eef73528$var$ensure_correct_formatting(searchPagePath));
-        const on_navigation = typeof window?.next?.router !== "undefined" || navigateFunction ? (new_relative_url)=>{
+        if (typeof window?.next?.router === "undefined" && !navigateFunction) throw new Error("You must provide a navigateFunction when not using Next.js.");
+        const on_navigation = (new_relative_url)=>{
             if (navigateFunction) navigateFunction(new_relative_url);
             else (0, $bc389476eeb2b615$export$599d4515591ef232)(new_relative_url);
-        } : undefined;
-        if (!search) (0, $4GYXz$solidjs.createRoot)(()=>(0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search = new (0, $4GYXz$depictaijsui.DepictSearch)({
+        };
+        if (!search) (0, $4GYXz$solidjs.createRoot)(()=>(0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search = new (0, $4GYXz$depictaiui.DepictSearch)({
                 search_query_url_param_name: urlParamName,
                 market: market,
                 merchant: merchant,
@@ -215,7 +215,7 @@ function $24b00503eef73528$export$9fac37a9c21c2f3b(props) {
             search.merchant = merchant;
             search.localization = usedLocale;
         }
-        if (!category) (0, $4GYXz$solidjs.createRoot)(()=>(0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).category = new (0, $4GYXz$depictaijsui.DepictCategory)({
+        if (!category) (0, $4GYXz$solidjs.createRoot)(()=>(0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).category = new (0, $4GYXz$depictaiui.DepictCategory)({
                 market: market,
                 merchant: merchant,
                 localization: usedLocale,
@@ -244,7 +244,7 @@ function $24b00503eef73528$var$ensure_correct_formatting(path) {
 
 
 
-const $d96434e62e08087d$export$3f4580d6398c5027 = /*#__PURE__*/ (0, $4GYXz$react.forwardRef)((_, ref)=>{
+const $883a881f7926405d$export$80e99ee6b29cadd2 = /*#__PURE__*/ (0, $4GYXz$react.forwardRef)((_, ref)=>{
     return /*#__PURE__*/ (0, $4GYXz$react.createElement)("div", {
         className: "depict aligner",
         style: {
@@ -260,7 +260,7 @@ const $d96434e62e08087d$export$3f4580d6398c5027 = /*#__PURE__*/ (0, $4GYXz$react
 
 
 
-function $7ad7a3d0011b7b1b$export$210723f5a54a7028(props) {
+function $7ad7a3d0011b7b1b$export$a54ec244c8863715(props) {
     return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)($7ad7a3d0011b7b1b$var$SolidSearchPage), props);
 }
 function $7ad7a3d0011b7b1b$var$SolidSearchPage(props, set_portals) {
@@ -279,7 +279,7 @@ function $7ad7a3d0011b7b1b$var$SolidSearchPage(props, set_portals) {
         update_updating_blocked_signal();
     });
     const component_portals = new Set();
-    return (0, $4GYXz$depictaijsui.DepictSearchPage)({
+    return (0, $4GYXz$depictaiui.SearchPage)({
         // Default config goes here
         include_input_field: props.includeInputField ?? true,
         cols_at_size: props.columnsAtSize ?? [
@@ -314,7 +314,7 @@ function $7ad7a3d0011b7b1b$var$SolidSearchPage(props, set_portals) {
 
 
 let $5aa5fcb9f8a2bebc$var$render_cb;
-function $5aa5fcb9f8a2bebc$export$d87c61cecb2edf0d(props) {
+function $5aa5fcb9f8a2bebc$export$f7d2f673fc2f091d(props) {
     return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)($5aa5fcb9f8a2bebc$var$SolidCategoryPage), props, "div", {}, (props)=>$5aa5fcb9f8a2bebc$var$render_cb?.(props));
 }
 function $5aa5fcb9f8a2bebc$var$SolidCategoryPage(props, set_portals) {
@@ -328,7 +328,7 @@ function $5aa5fcb9f8a2bebc$var$SolidCategoryPage(props, set_portals) {
     };
     $5aa5fcb9f8a2bebc$var$render_cb(props);
     const component_portals = new Set();
-    const category = ()=>(0, $4GYXz$depictaijsui.DepictCategoryPage)({
+    const category = ()=>(0, $4GYXz$depictaiui.CategoryPage)({
             depict_category: depict_category,
             cols_at_size: props.columnsAtSize ?? [
                 [
@@ -345,7 +345,7 @@ function $5aa5fcb9f8a2bebc$var$SolidCategoryPage(props, set_portals) {
             ],
             grid_spacing: props.gridSpacing ?? "2%",
             get_product_id: ()=>"",
-            category_title: props.categoryTitlePlugin || (0, $4GYXz$depictaijsui.CategoryTitle),
+            category_title: props.categoryTitlePlugin || (0, $4GYXz$depictaiui.CategoryTitle),
             show_breadcrumbs: props.showBreadcrumbs === undefined ? true : props.showBreadcrumbs,
             show_quicklinks: props.showQuicklinks === undefined ? true : props.showQuicklinks,
             product_card_template: (display)=>(0, $b4d0d98857ed9934$export$79c79419c1ef0081)({
@@ -368,7 +368,7 @@ function $d88e98b11c182b8e$export$5646050d516e06bc() {
 function $d88e98b11c182b8e$var$vanilla_breadcrumbs() {
     const depict_category = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).category;
     if (!depict_category) throw Error("No depict_category instance when rendering BreadCrumbs. Did you forget to wrap your app in DepictProvider?");
-    return (0, $4GYXz$depictaijsui.BreadCrumbs)({
+    return (0, $4GYXz$depictaiui.BreadCrumbs)({
         depict_category: depict_category
     });
 }
@@ -383,7 +383,7 @@ function $f16af0e861aff3d0$export$466cdc317043f6cb() {
 function $f16af0e861aff3d0$var$vanilla_quick_links() {
     const depict_category = (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).category;
     if (!depict_category) throw Error("No depict_category instance when rendering QuickLinks. Did you forget to wrap your app in DepictProvider?");
-    return (0, $4GYXz$depictaijsui.QuickLinks)({
+    return (0, $4GYXz$depictaiui.QuickLinks)({
         depict_category: depict_category
     });
 }
@@ -416,16 +416,16 @@ const $7c8b440edc188ad5$export$89c6019e4baa40b1 = ({ width: width , height: heig
 
 
 
-const $ef7db890e488d4f4$export$d69d8daa20eae175 = (createOpenModalParams)=>{
+const $177ac8f5258066ba$export$d69d8daa20eae175 = (createOpenModalParams)=>{
     const { globalState: globalState , location: location = "centered" , alignerRef: alignerRef  } = createOpenModalParams;
     const openModal = ()=>{
         if (globalState.search) {
-            if (location === "aligned" && alignerRef?.current) (0, $4GYXz$depictaijsui.OpenModalWithAlignment)({
+            if (location === "aligned" && alignerRef?.current) (0, $4GYXz$depictaiui.open_modal_with_alignment)({
                 "element": alignerRef.current,
                 "location": location,
                 "search": globalState.search
             });
-            else (0, $4GYXz$depictaijsui.OpenModalWithAlignment)({
+            else (0, $4GYXz$depictaiui.open_modal_with_alignment)({
                 "location": "centered",
                 "search": globalState.search
             });
@@ -435,8 +435,8 @@ const $ef7db890e488d4f4$export$d69d8daa20eae175 = (createOpenModalParams)=>{
 };
 
 
-function $3647cad61d03b89c$export$cc1e9aaf280afdcb(params = {}) {
-    const open = (0, $ef7db890e488d4f4$export$d69d8daa20eae175)({
+function $ae73b15c325f1b21$export$912994940e660d32(params = {}) {
+    const open = (0, $177ac8f5258066ba$export$d69d8daa20eae175)({
         globalState: $0b7cd4fb39fc3502$export$8e769ad4338a911e,
         ...params
     });
@@ -449,9 +449,9 @@ function $3647cad61d03b89c$export$cc1e9aaf280afdcb(params = {}) {
 
 
 
-const $5e06ce09dcfaf030$export$bde46b5bb6287cea = (props)=>{
+const $cd591d0e4ce29df7$export$bde46b5bb6287cea = (props)=>{
     const ReactSearchField = ()=>{
-        return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)(()=>(0, $4GYXz$depictaijsui.SearchField)({
+        return (0, $b4d0d98857ed9934$export$f6e64e17bd69eeef)((0, $b4d0d98857ed9934$export$e5139bbbb9a05035)(()=>(0, $4GYXz$depictaiui.SearchField)({
                 depict_search: (0, $0b7cd4fb39fc3502$export$8e769ad4338a911e).search,
                 aligner_ref: props?.alignerRef?.current
             })), {});
@@ -460,12 +460,12 @@ const $5e06ce09dcfaf030$export$bde46b5bb6287cea = (props)=>{
 };
 
 
-const $ca5840628781f899$export$45080d603eda647c = (props)=>{
-    const SearchField = (0, $5e06ce09dcfaf030$export$bde46b5bb6287cea)({
+const $913da7f4d0bc77f2$export$9bb30bbe003b82e0 = (props)=>{
+    const SearchField = (0, $cd591d0e4ce29df7$export$bde46b5bb6287cea)({
         alignerRef: props?.alignerRef
     });
     return {
-        DepictSearchField: SearchField
+        SearchField: SearchField
     };
 };