@uniformdev/mesh-sdk-react 18.29.0 → 18.30.1-alpha.16

package/dist/index.mjs

@@ -955,12 +955,12 @@ import { Callout as Callout2 } from "@uniformdev/design-system";
 import React6, { useContext as useContext2, useMemo as useMemo2, useRef as useRef5 } from "react";
 import { useAsync, useAsyncFn as useAsyncFn2 } from "react-use";
 
-// src/components/EntrySearch/DefaultSearchRow.tsx
+// src/components/legacy/EntrySearch/DefaultSearchRow.tsx
 import { css as css7 } from "@emotion/react";
 import { useOutsideClick } from "@uniformdev/design-system";
 import { useRef, useState } from "react";
 
-// src/components/EntrySearch/styles/DefaultSearchRow.styles.ts
+// src/components/legacy/EntrySearch/styles/DefaultSearchRow.styles.ts
 import { css as css6 } from "@emotion/react";
 var searchRowContainer = css6`
   cursor: pointer;
@@ -1001,7 +1001,7 @@ var searchRowBtn = css6`
   inset: 0 var(--spacing-sm) 0 auto;
 `;
 
-// src/components/EntrySearch/DefaultSearchRow.tsx
+// src/components/legacy/EntrySearch/DefaultSearchRow.tsx
 import { jsx as jsx19, jsxs as jsxs8 } from "@emotion/react/jsx-runtime";
 var DefaultSearchRow = ({ result, isSelected, triggerSelection }) => {
   const popoverRef = useRef(null);
@@ -1075,7 +1075,7 @@ var DefaultSearchRow = ({ result, isSelected, triggerSelection }) => {
   );
 };
 
-// src/components/EntrySearch/DefaultSelectedItem.tsx
+// src/components/legacy/EntrySearch/DefaultSelectedItem.tsx
 import { css as css9 } from "@emotion/react";
 import { Icon as Icon2, useOutsideClick as useOutsideClick2 } from "@uniformdev/design-system";
 import { useEffect, useRef as useRef2, useState as useState2 } from "react";
@@ -1093,7 +1093,7 @@ function openWindowWithCloseCallback(href, callback) {
   }, 500);
 }
 
-// src/components/EntrySearch/styles/DefaultSelectedItem.styles.ts
+// src/components/legacy/EntrySearch/styles/DefaultSelectedItem.styles.ts
 import { css as css8 } from "@emotion/react";
 import { mq as mq2 } from "@uniformdev/design-system";
 var selectedItemContainer = css8`
@@ -1177,7 +1177,7 @@ var selectItemLinkBtn = css8`
   }
 `;
 
-// src/components/EntrySearch/DefaultSelectedItem.tsx
+// src/components/legacy/EntrySearch/DefaultSelectedItem.tsx
 import { jsx as jsx20, jsxs as jsxs9 } from "@emotion/react/jsx-runtime";
 var DefaultSelectedItem = ({
   selectedItem,
@@ -1360,7 +1360,7 @@ var DefaultSelectedItem = ({
   ] }) }, selectedItem.id);
 };
 
-// src/components/EntrySearch/EntrySearch.tsx
+// src/components/legacy/EntrySearch/EntrySearch.tsx
 import { css as css11 } from "@emotion/react";
 import {
   Button,
@@ -1411,7 +1411,7 @@ function useLoadingDelay(loading, { delay = 500, minDuration = 200 } = {
   return state === "DISPLAY" || state === "EXPIRE";
 }
 
-// src/components/EntrySearch/styles/EntrySearch.styles.ts
+// src/components/legacy/EntrySearch/styles/EntrySearch.styles.ts
 import { css as css10 } from "@emotion/react";
 var entrySearchWrapper = css10`
   background: var(--white);
@@ -1522,7 +1522,7 @@ var badgeIcon = css10`
   height: calc(var(--spacing-lg) + var(--spacing-xs));
 `;
 
-// src/components/EntrySearch/EntrySearch.tsx
+// src/components/legacy/EntrySearch/EntrySearch.tsx
 import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
 var DefaultNoResults = ({ searchText, selectedContentType }) => {
   let message = "No content found";
@@ -3895,17 +3895,738 @@ function convertRequestDataToDataType(dataType, requestData) {
   };
 }
 
+// src/components/EntrySearch/DataRefreshButton.tsx
+import { css as css25 } from "@emotion/react";
+import { Button as Button3, LoadingIndicator as LoadingIndicator2 } from "@uniformdev/design-system";
+import { jsx as jsx44, jsxs as jsxs25 } from "@emotion/react/jsx-runtime";
+var DataRefreshButton = ({
+  buttonText,
+  isLoading,
+  onRefreshData,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs25(Button3, { buttonType: "primaryInvert", onClick: onRefreshData, disabled: isLoading, ...props, children: [
+    !isLoading ? null : /* @__PURE__ */ jsx44(
+      LoadingIndicator2,
+      {
+        css: css25`
+            ${isLoading ? "opacity: 0.2;" : void 0}
+          `
+      }
+    ),
+    buttonText
+  ] });
+};
+
+// src/components/EntrySearch/EntrySearchContainer.tsx
+import { Button as Button4, Container, IconsProvider, ScrollableList, VerticalRhythm } from "@uniformdev/design-system";
+
+// src/components/EntrySearch/styles/EntrySearchContainer.styles.ts
+import { css as css26 } from "@emotion/react";
+var EntrySearchBtnGroup = css26`
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-sm);
+`;
+
+// src/components/EntrySearch/EntrySearchContainer.tsx
+import { jsx as jsx45, jsxs as jsxs26 } from "@emotion/react/jsx-runtime";
+var EntrySearchContainer = ({
+  searchFilters,
+  resultList,
+  onSave,
+  onCancel,
+  children
+}) => {
+  return /* @__PURE__ */ jsx45(IconsProvider, { children: /* @__PURE__ */ jsxs26(VerticalRhythm, { children: [
+    /* @__PURE__ */ jsx45(Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: /* @__PURE__ */ jsxs26(VerticalRhythm, { children: [
+      searchFilters,
+      !resultList ? null : /* @__PURE__ */ jsx45(ScrollableList, { role: "list", children: resultList })
+    ] }) }),
+    children,
+    !onSave && !onCancel ? null : /* @__PURE__ */ jsxs26("div", { css: EntrySearchBtnGroup, children: [
+      !onSave ? null : /* @__PURE__ */ jsx45(Button4, { buttonType: "primary", onClick: onSave, children: "Save" }),
+      !onCancel ? null : /* @__PURE__ */ jsx45(Button4, { buttonType: "ghostDestructive", onClick: onCancel, children: "Cancel" })
+    ] })
+  ] }) });
+};
+
+// src/components/EntrySearch/EntrySearchFilter.tsx
+import { InputKeywordSearch as InputKeywordSearch2, InputSelect as InputSelect6 } from "@uniformdev/design-system";
+import { useState as useState10 } from "react";
+
+// src/components/EntrySearch/hooks/EntrySearchContext.tsx
+import { createContext as createContext5, useCallback, useContext as useContext7, useDeferredValue, useState as useState9 } from "react";
+import { jsx as jsx46 } from "@emotion/react/jsx-runtime";
+var EntrySearchContext = createContext5({
+  onSetQuery: () => {
+  },
+  onSelectItem: () => {
+  },
+  query: {
+    contentType: "",
+    keyword: ""
+  },
+  list: {},
+  onSetList: () => {
+  },
+  selectedListItems: [],
+  onRemoveAllSelectedItems: () => {
+  }
+});
+var EntrySearchProvider = ({ currentlySelectedItems, children }) => {
+  const [query, setQuery] = useState9({
+    contentType: "",
+    keyword: ""
+  });
+  const querySearchDeferred = useDeferredValue(query);
+  const [selectedItems, setSelectedItems] = useState9(currentlySelectedItems != null ? currentlySelectedItems : []);
+  const [list, setList] = useState9({});
+  const onSetQuery = useCallback(
+    (value) => {
+      setQuery(value);
+    },
+    [setQuery]
+  );
+  const onSelectItem = useCallback(
+    (selectedResult) => {
+      if (Array.isArray(selectedResult)) {
+        setSelectedItems(selectedResult);
+      } else {
+        if (selectedItems.some((item) => item.id === selectedResult.id)) {
+          setSelectedItems((prev) => prev.filter((item) => item.id !== selectedResult.id));
+        } else {
+          setSelectedItems((prev) => [...prev, selectedResult]);
+        }
+      }
+    },
+    [setSelectedItems, selectedItems]
+  );
+  const onRemoveAllSelectedItems = useCallback(() => {
+    setSelectedItems([]);
+  }, [setSelectedItems]);
+  const onSetList = useCallback(
+    (value) => {
+      setList(value);
+    },
+    [setList]
+  );
+  return /* @__PURE__ */ jsx46(
+    EntrySearchContext.Provider,
+    {
+      value: {
+        onSetQuery,
+        query: querySearchDeferred,
+        onSelectItem,
+        selectedListItems: selectedItems,
+        onRemoveAllSelectedItems,
+        list,
+        onSetList
+      },
+      children
+    }
+  );
+};
+var useEntrySearchContext = () => {
+  const contextValues = useContext7(EntrySearchContext);
+  return { ...contextValues };
+};
+
+// src/components/EntrySearch/styles/EntrySearchFilterContainer.styles.ts
+import { css as css27 } from "@emotion/react";
+var EntrySearchFilterContainerLabel = css27`
+  align-items: center;
+  display: flex;
+  font-size: var(--fs-sm);
+  font-weight: var(--fw-bold);
+  line-height: 1rem;
+  margin-bottom: var(--spacing-sm);
+`;
+var EntrySearchFilterContainer = css27`
+  display: grid;
+  gap: var(--spacing-base);
+`;
+var EntrySearchFilterDropdownAndTextSearch = css27`
+  grid-template-columns: 0.5fr 1fr;
+`;
+var EntrySearchFilterGrid = (gridColumns) => css27`
+  display: grid;
+  grid-template-columns: ${gridColumns};
+  gap: var(--spacing-base);
+`;
+
+// src/components/EntrySearch/EntrySearchFilter.tsx
+import { jsx as jsx47, jsxs as jsxs27 } from "@emotion/react/jsx-runtime";
+var EntrySearchFilter = ({
+  requireContentType,
+  typeSelectorAllTypesOptionText = "All content types",
+  searchInputName = "searchText",
+  searchInputPlaceholderText = "Enter keyword to narrow your results",
+  selectLabel = "Content Type Select",
+  selectOptions
+}) => {
+  const { query, onSetQuery } = useEntrySearchContext();
+  const [searchState, setSearchState] = useState10({
+    contentType: "any",
+    keyword: ""
+  });
+  const handleFilterChange = (value) => {
+    setSearchState((prev) => {
+      return { ...prev, ...value };
+    });
+    onSetQuery({ ...query, ...value });
+  };
+  return /* @__PURE__ */ jsxs27("fieldset", { css: [EntrySearchFilterContainer, EntrySearchFilterDropdownAndTextSearch], children: [
+    /* @__PURE__ */ jsx47(
+      InputSelect6,
+      {
+        label: selectLabel,
+        showLabel: false,
+        onChange: (e) => handleFilterChange({ contentType: e.target.value }),
+        options: [
+          ...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
+          ...selectOptions ? selectOptions.map((option) => {
+            var _a;
+            return { name: option == null ? void 0 : option.name, label: (_a = option.label) != null ? _a : option == null ? void 0 : option.name, id: option.id };
+          }) : []
+        ],
+        value: searchState.contentType
+      }
+    ),
+    /* @__PURE__ */ jsx47(
+      InputKeywordSearch2,
+      {
+        inputFieldName: searchInputName,
+        placeholder: searchInputPlaceholderText,
+        onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
+        disabledFieldSubmission: true,
+        onClear: () => handleFilterChange({ keyword: "" }),
+        value: searchState.keyword
+      }
+    )
+  ] });
+};
+
+// src/components/EntrySearch/EntrySearchFilterContainer.tsx
+import { jsx as jsx48, jsxs as jsxs28 } from "@emotion/react/jsx-runtime";
+var EntrySearchFilterContainer2 = ({ label, children }) => {
+  return /* @__PURE__ */ jsxs28("div", { children: [
+    /* @__PURE__ */ jsx48("span", { css: EntrySearchFilterContainerLabel, children: label }),
+    /* @__PURE__ */ jsx48("div", { css: EntrySearchFilterContainer, children })
+  ] });
+};
+
+// src/components/EntrySearch/EntrySearchListItem.tsx
+import { Popover } from "@uniformdev/design-system";
+
+// src/components/EntrySearch/styles/EntrySearchListItem.styles.ts
+import { css as css28 } from "@emotion/react";
+import { skeletonLoading } from "@uniformdev/design-system";
+var EntryListItemContainer = css28`
+  align-items: center;
+  border: 1px solid var(--gray-300);
+  border-radius: var(--rounded-base);
+  background: var(--white);
+  display: grid;
+  grid-template-columns: 1fr 32px;
+  padding: var(--spacing-sm);
+
+  &[hidden] {
+    display: none;
+  }
+`;
+var EntryListItemLoading = css28`
+  animation: ${skeletonLoading} 1s linear infinite alternate;
+  border-color: transparent;
+  min-height: 42px;
+  position: relative;
+
+  &:before,
+  &:after {
+    background: var(--gray-200);
+    content: '';
+    display: block;
+    height: 1rem;
+  }
+
+  &:before {
+    border-radius: var(--rounded-base);
+    width: 10rem;
+  }
+
+  &:after {
+    border-radius: var(--rounded-full);
+    width: 1rem;
+  }
+`;
+var EntryListItemHeadingGroup = css28`
+  align-items: center;
+  display: grid;
+`;
+var EntryListItemTitle = css28`
+  color: var(--brand-secondary-1);
+  display: block;
+  font-size: var(--fs-sm);
+`;
+var EntryListItemSubtitle = css28`
+  color: var(--gray-500);
+  display: block;
+  font-size: var(--fs-xs);
+  line-height: 1;
+`;
+var EntryListItemInfoContainer = css28`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+`;
+var EntryListItemControlledContent = css28`
+  display: flex;
+  gap: var(--spacing-sm);
+`;
+var EntryListItemUnControlledContent = css28`
+  margin-top: var(--spacing-sm);
+  grid-column: 1 / -1;
+`;
+
+// src/components/EntrySearch/EntrySearchListItem.tsx
+import { jsx as jsx49, jsxs as jsxs29 } from "@emotion/react/jsx-runtime";
+var EntrySearchListItem = ({
+  id,
+  title,
+  contentType,
+  image,
+  popoverData,
+  onSelect,
+  isMulti = false,
+  children,
+  ...props
+}) => {
+  const { onSelectItem, selectedListItems } = useEntrySearchContext();
+  const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
+  const handleSelectItem = () => {
+    var _a;
+    const extraData = (_a = onSelect == null ? void 0 : onSelect()) != null ? _a : {};
+    const selectedItem = { id, title, contentType, image, popoverData, ...extraData };
+    if (isMulti) {
+      return onSelectItem(selectedItem);
+    }
+    return onSelectItem([selectedItem]);
+  };
+  const hideWhenInSelectedList = selectedListItems.some((item) => item.id === id);
+  return /* @__PURE__ */ jsxs29("div", { role: "listitem", hidden: hideWhenInSelectedList, css: EntryListItemContainer, ...props, children: [
+    /* @__PURE__ */ jsxs29("div", { role: "button", onClick: handleSelectItem, css: EntryListItemControlledContent, children: [
+      !image ? null : /* @__PURE__ */ jsx49("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
+      /* @__PURE__ */ jsxs29("div", { role: "heading", css: EntryListItemHeadingGroup, children: [
+        !contentType ? null : /* @__PURE__ */ jsx49("span", { css: EntryListItemSubtitle, children: formatedContentType }),
+        /* @__PURE__ */ jsx49("span", { css: EntryListItemTitle, children: title })
+      ] })
+    ] }),
+    !popoverData ? null : /* @__PURE__ */ jsx49("div", { css: EntryListItemInfoContainer, children: /* @__PURE__ */ jsx49(Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData }) }),
+    !children ? null : /* @__PURE__ */ jsx49("div", { css: EntryListItemUnControlledContent, children })
+  ] });
+};
+var EntrySearchListItemLoadingSkeleton = () => {
+  return /* @__PURE__ */ jsx49("div", { role: "presentation", css: [EntryListItemContainer, EntryListItemLoading] });
+};
+
+// src/components/EntrySearch/EntrySearchResultItem.tsx
+import { Badge, Button as Button5, Popover as Popover2 } from "@uniformdev/design-system";
+import { format as timeagoFormat } from "timeago.js";
+
+// src/components/EntrySearch/styles/EntrySearchResultItem.styles.ts
+import { css as css29 } from "@emotion/react";
+var EntrySearchResultItemContainer = css29`
+  align-items: center;
+  border: 1px solid var(--gray-300);
+  border-radius: var(--rounded-base);
+  background: var(--gray-50);
+  display: grid;
+  grid-template-columns: 1fr auto;
+  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
+`;
+var EntrySearchResultItemSubtitle = css29`
+  color: var(--gray-500);
+  display: block;
+  font-size: var(--fs-xs);
+  line-height: 1;
+`;
+var EntrySearchResultItemTitle = css29`
+  align-items: center;
+  color: var(--brand-secondary-1);
+  display: flex;
+  gap: var(--spacing-xs);
+`;
+var EntrySearchResultItemTimeStamp = css29`
+  color: var(--gray-500);
+  font-size: var(--fs-xs);
+`;
+var EntrySearchAuthorStateGroup = css29`
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-sm);
+`;
+var EntrySearchUpdateGroup = css29`
+  display: grid;
+`;
+var EntrySearchContentContainer = css29`
+  display: flex;
+  gap: var(--spacing-base);
+`;
+var EntrySearchImage = css29`
+  width: 56px;
+  object-fit: contain;
+`;
+
+// src/components/EntrySearch/EntrySearchResultItem.tsx
+import { jsx as jsx50, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
+var EntrySearchResultItem = ({
+  id,
+  title,
+  name,
+  contentType,
+  popoverData,
+  publishStatus,
+  editLinkIcon,
+  editLink,
+  imageUrl,
+  onRemove,
+  createdAt,
+  publishedAt,
+  hideRemoveButton = false,
+  children
+}) => {
+  const { onSelectItem } = useEntrySearchContext();
+  const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
+  const onRemoveItem = () => {
+    onSelectItem({ id });
+    onRemove == null ? void 0 : onRemove();
+  };
+  return /* @__PURE__ */ jsxs30("div", { css: EntrySearchResultItemContainer, children: [
+    /* @__PURE__ */ jsx50("div", { children: /* @__PURE__ */ jsxs30("div", { css: EntrySearchContentContainer, children: [
+      !imageUrl ? null : /* @__PURE__ */ jsx50("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: EntrySearchImage }),
+      /* @__PURE__ */ jsxs30("div", { children: [
+        /* @__PURE__ */ jsx50("span", { css: EntrySearchResultItemSubtitle, children: formatedContentType }),
+        /* @__PURE__ */ jsxs30("span", { role: "heading", css: EntrySearchResultItemTitle, children: [
+          title != null ? title : name,
+          !popoverData ? null : /* @__PURE__ */ jsx50(Popover2, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
+        ] }),
+        !createdAt && !publishStatus ? null : /* @__PURE__ */ jsxs30("div", { css: EntrySearchAuthorStateGroup, children: [
+          !(publishStatus == null ? void 0 : publishStatus.text) ? null : /* @__PURE__ */ jsx50(Badge, { ...publishStatus, size: "sm", uppercaseText: true }),
+          !createdAt && !publishedAt ? null : /* @__PURE__ */ jsxs30("div", { css: EntrySearchUpdateGroup, children: [
+            !createdAt ? null : /* @__PURE__ */ jsxs30("small", { css: EntrySearchResultItemTimeStamp, children: [
+              /* @__PURE__ */ jsx50("strong", { children: "Last updated: " }),
+              timeagoFormat(createdAt)
+            ] }),
+            !publishedAt ? null : /* @__PURE__ */ jsxs30("small", { css: EntrySearchResultItemTimeStamp, children: [
+              /* @__PURE__ */ jsx50("strong", { children: "Last published: " }),
+              timeagoFormat(publishedAt)
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx50("div", { children })
+      ] })
+    ] }) }),
+    !editLink && hideRemoveButton ? null : /* @__PURE__ */ jsxs30("div", { css: EntrySearchAuthorStateGroup, children: [
+      !editLink ? null : /* @__PURE__ */ jsx50(LinkButton, { text: "Edit", href: editLink, icon: editLinkIcon }),
+      hideRemoveButton ? null : /* @__PURE__ */ jsx50(Button5, { buttonType: "ghostDestructive", onClick: onRemoveItem, children: "Remove" })
+    ] })
+  ] });
+};
+
+// src/components/EntrySearch/styles/EntrySearchResultItemButton.styles.ts
+import { css as css30 } from "@emotion/react";
+import { button as button2 } from "@uniformdev/design-system";
+var ButtonStyles = css30`
+  ${button2}
+  background: transparent;
+  border: 1px solid var(--brand-secondary-1);
+  color: var(--brand-secondary-1);
+  padding: var(--spacing-sm);
+  font-size: var(--fs-sm);
+  line-height: 1;
+  gap: var(--spacing-xs);
+  transition: border-color var(--duration-fast) var(--timing-ease-out),
+    background-color var(--duration-fast) var(--timing-ease-out);
+
+  &:hover {
+    background: var(--gray-100);
+    border-color: var(--gray-300);
+  }
+
+  &:disabled {
+    background: var(--gray-300);
+    border-color: var(--gray-200);
+    color: var(--gray-500);
+  }
+
+  &:link {
+    text-decoration: none;
+  }
+`;
+var ButtonIcon = css30`
+  width: 1rem;
+  height: 1rem;
+`;
+
+// src/components/EntrySearch/EntrySearchResultItemButton.tsx
+import { jsx as jsx51, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
+var EntrySearchResultItemButton = ({
+  text,
+  icon,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs31("button", { type: "button", css: ButtonStyles, ...props, children: [
+    !icon ? null : /* @__PURE__ */ jsx51(Image, { src: icon, css: ButtonIcon }),
+    text
+  ] });
+};
+var LinkButton = ({
+  text,
+  icon,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs31("a", { ...props, css: ButtonStyles, target: "_blank", rel: "noopener noreferrer", children: [
+    !icon ? null : /* @__PURE__ */ jsx51(Image, { src: icon, css: ButtonIcon }),
+    text
+  ] });
+};
+
+// src/components/EntrySearch/EntrySearchResultList.tsx
+import { Button as Button6, Counter, VerticalRhythm as VerticalRhythm2 } from "@uniformdev/design-system";
+import { DragDropContext as DragDropContext3, Draggable as Draggable3, Droppable as Droppable3 } from "react-beautiful-dnd";
+
+// src/components/EntrySearch/styles/EntrySearchResultList.styles.ts
+import { css as css31 } from "@emotion/react";
+var EntrySearchResultListContainer = css31`
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-sm);
+  justify-content: space-between;
+`;
+var EntrySearchResultListCounterContainer = css31`
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-sm);
+`;
+var EntrySearchResultListTitle = css31`
+  font-weight: var(--fw-bold);
+  line-height: 1;
+`;
+
+// src/components/EntrySearch/EntrySearchResultList.tsx
+import { Fragment as Fragment7, jsx as jsx52, jsxs as jsxs32 } from "@emotion/react/jsx-runtime";
+var EntrySearchResultList = ({
+  resultLabelText = "Selected",
+  removeButtonText = "Remove all",
+  onRemoveAllSelected,
+  hideRemoveButton = false,
+  additionalButtons,
+  renderResultComponent = (value) => /* @__PURE__ */ jsx52(EntrySearchResultItem, { ...value }),
+  disableDnD = false
+}) => {
+  const { selectedListItems, onRemoveAllSelectedItems, onSelectItem } = useEntrySearchContext();
+  const handleRemoveAllSelectedItems = () => {
+    onRemoveAllSelectedItems();
+    onRemoveAllSelected == null ? void 0 : onRemoveAllSelected();
+  };
+  const onDragEnd = (res) => {
+    var _a, _b;
+    if (res.destination && res.source.droppableId === ((_a = res.destination) == null ? void 0 : _a.droppableId)) {
+      const result = [...selectedListItems || []];
+      const [removed] = (_b = result == null ? void 0 : result.splice(res.source.index, 1)) != null ? _b : [];
+      result == null ? void 0 : result.splice(res.destination.index, 0, removed);
+      onSelectItem(result);
+      return result;
+    }
+  };
+  return /* @__PURE__ */ jsxs32(Fragment7, { children: [
+    /* @__PURE__ */ jsxs32("div", { role: "group", css: EntrySearchResultListContainer, children: [
+      /* @__PURE__ */ jsxs32("div", { role: "note", css: EntrySearchResultListCounterContainer, children: [
+        /* @__PURE__ */ jsx52("span", { css: EntrySearchResultListTitle, children: resultLabelText }),
+        " ",
+        !selectedListItems.length ? null : /* @__PURE__ */ jsx52(Counter, { count: selectedListItems.length })
+      ] }),
+      /* @__PURE__ */ jsxs32("div", { css: EntrySearchResultListCounterContainer, children: [
+        additionalButtons,
+        hideRemoveButton ? null : /* @__PURE__ */ jsx52(
+          Button6,
+          {
+            buttonType: "ghostDestructive",
+            size: "xs",
+            disabled: selectedListItems.length === 0,
+            onClick: handleRemoveAllSelectedItems,
+            children: removeButtonText
+          }
+        )
+      ] })
+    ] }),
+    !selectedListItems.length ? null : /* @__PURE__ */ jsx52(DragDropContext3, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx52(Droppable3, { droppableId: "canvas-multi-select", children: (provided) => /* @__PURE__ */ jsxs32("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
+      /* @__PURE__ */ jsx52(VerticalRhythm2, { gap: "sm", children: selectedListItems.map((item, i) => {
+        const renderListItem = renderResultComponent(item);
+        return /* @__PURE__ */ jsx52(
+          Draggable3,
+          {
+            draggableId: item.title,
+            index: i,
+            isDragDisabled: disableDnD,
+            children: (provided2, snapshot) => /* @__PURE__ */ jsx52(
+              "div",
+              {
+                ref: provided2.innerRef,
+                "data-dragging": snapshot.isDragging,
+                ...provided2.draggableProps,
+                ...provided2.dragHandleProps,
+                children: renderListItem
+              }
+            )
+          },
+          item.title
+        );
+      }) }),
+      provided.placeholder
+    ] }) }) })
+  ] });
+};
+
+// src/components/EntrySearch/QueryFilter.tsx
+import { Input as Input7, InputKeywordSearch as InputKeywordSearch3, InputSelect as InputSelect7 } from "@uniformdev/design-system";
+import { useEffect as useEffect7, useState as useState11 } from "react";
+import { jsx as jsx53, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
+var QueryFilter = ({
+  requireContentType,
+  queryFilterTitle = "Configure Query",
+  contentTypeLabel = "Filter by content type",
+  typeSelectorAllTypesOptionText = "All content types",
+  contentTypeOptions,
+  searchInputName = "searchText",
+  searchInputPlaceholderText = "Enter keyword to narrow your results",
+  countLabel = "Count",
+  countValue = 5,
+  sortLabel = "Sort",
+  sortOptions,
+  sortOrderLabel = "Sort Order",
+  sortOrderOptions = [
+    {
+      name: "Ascending",
+      id: "asc",
+      label: "Ascending"
+    },
+    {
+      name: "Descending",
+      id: "desc",
+      label: "Descending"
+    }
+  ],
+  children
+}) => {
+  var _a, _b;
+  const { query, onSetQuery } = useEntrySearchContext();
+  const [queryState, setQueryState] = useState11({
+    contentType: "",
+    keyword: "",
+    count: countValue != null ? countValue : 5,
+    sortBy: (_a = sortOptions[0].id) != null ? _a : "",
+    sortOrder: (_b = sortOrderOptions[0].id) != null ? _b : ""
+  });
+  const handleFilterChange = (value) => {
+    setQueryState((prev) => ({ ...prev, ...value }));
+    onSetQuery({ ...query, ...value });
+  };
+  useEffect7(() => {
+    onSetQuery(queryState);
+  }, [onSetQuery, queryState]);
+  return /* @__PURE__ */ jsxs33("fieldset", { children: [
+    /* @__PURE__ */ jsx53("span", { css: EntrySearchFilterContainerLabel, children: queryFilterTitle }),
+    /* @__PURE__ */ jsxs33("div", { css: EntrySearchFilterContainer, children: [
+      /* @__PURE__ */ jsxs33("div", { css: EntrySearchFilterGrid("0.5fr 1fr"), children: [
+        /* @__PURE__ */ jsx53(
+          InputSelect7,
+          {
+            label: contentTypeLabel,
+            showLabel: false,
+            options: [
+              ...!requireContentType ? [{ id: "", label: typeSelectorAllTypesOptionText }] : [],
+              ...contentTypeOptions ? contentTypeOptions.map((option) => {
+                var _a2;
+                return { id: option.id, label: (_a2 = option.label) != null ? _a2 : option.name, name: option.name };
+              }) : []
+            ],
+            onChange: (e) => handleFilterChange({ contentType: e.target.value }),
+            value: queryState.contentType
+          }
+        ),
+        /* @__PURE__ */ jsx53(
+          InputKeywordSearch3,
+          {
+            inputFieldName: searchInputName,
+            placeholder: searchInputPlaceholderText,
+            onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
+            disabledFieldSubmission: true,
+            onClear: () => handleFilterChange({ keyword: "" }),
+            value: queryState.keyword
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs33("div", { css: EntrySearchFilterGrid("repeat(2, 1fr) 0.5fr"), children: [
+        /* @__PURE__ */ jsx53(
+          InputSelect7,
+          {
+            label: sortLabel,
+            options: [
+              {
+                label: "Select a sort",
+                id: ""
+              },
+              ...sortOptions ? sortOptions.map((option) => {
+                var _a2;
+                return { id: option.id, name: option.name, label: (_a2 = option.label) != null ? _a2 : option.name };
+              }) : []
+            ],
+            onChange: (e) => handleFilterChange({ sortBy: e.target.value }),
+            value: queryState.sortBy
+          }
+        ),
+        /* @__PURE__ */ jsx53(
+          InputSelect7,
+          {
+            label: sortOrderLabel,
+            options: [
+              ...sortOrderOptions ? sortOrderOptions.map((option) => {
+                var _a2;
+                return { value: option.id, label: (_a2 = option.label) != null ? _a2 : option.name, name: option.name };
+              }) : []
+            ],
+            onChange: (e) => handleFilterChange({ sortOrder: e.target.value }),
+            value: queryState.sortOrder
+          }
+        ),
+        /* @__PURE__ */ jsx53(
+          Input7,
+          {
+            label: countLabel,
+            type: "number",
+            onChange: (e) => handleFilterChange({ count: e.target.value }),
+            defaultValue: countValue,
+            value: queryState.count
+          }
+        )
+      ] }),
+      children
+    ] })
+  ] });
+};
+
 // src/components/MeshApp.tsx
-import { LoadingIndicator as LoadingIndicator2, Theme as Theme2 } from "@uniformdev/design-system";
+import { LoadingIndicator as LoadingIndicator3, Theme as Theme2 } from "@uniformdev/design-system";
 
 // src/hooks/useInitializeUniformMeshSdk.ts
 import { initializeUniformMeshSDK } from "@uniformdev/mesh-sdk";
-import { useEffect as useEffect7, useRef as useRef10, useState as useState9 } from "react";
+import { useEffect as useEffect8, useRef as useRef10, useState as useState12 } from "react";
 var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
-  const [error, setError] = useState9();
-  const [sdk, setSdk] = useState9();
+  const [error, setError] = useState12();
+  const [sdk, setSdk] = useState12();
   const initializationInProgress = useRef10(false);
-  useEffect7(
+  useEffect8(
     () => {
       if (typeof window === "undefined" || sdk) {
         return;
@@ -3938,7 +4659,7 @@ var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
 };
 
 // src/components/MeshApp.tsx
-import { jsx as jsx44, jsxs as jsxs25 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
 var MeshApp = ({
   children,
   loadingComponent,
@@ -3947,18 +4668,18 @@ var MeshApp = ({
   const { initializing, error, sdk } = useInitializeUniformMeshSdk();
   if (initializing || !sdk) {
     const LoadingComponent = loadingComponent;
-    return LoadingComponent ? /* @__PURE__ */ jsx44(LoadingComponent, {}) : /* @__PURE__ */ jsx44(LoadingIndicator2, {});
+    return LoadingComponent ? /* @__PURE__ */ jsx54(LoadingComponent, {}) : /* @__PURE__ */ jsx54(LoadingIndicator3, {});
   }
   if (error) {
     const ErrorComponent = errorComponent;
     if (ErrorComponent) {
-      return /* @__PURE__ */ jsx44(ErrorComponent, { error });
+      return /* @__PURE__ */ jsx54(ErrorComponent, { error });
     }
     throw error;
   }
-  return /* @__PURE__ */ jsxs25(UniformMeshSdkContext.Provider, { value: { sdk }, children: [
-    /* @__PURE__ */ jsx44(Theme2, {}),
-    /* @__PURE__ */ jsx44(UniformMeshLocationContextProvider, { children })
+  return /* @__PURE__ */ jsxs34(UniformMeshSdkContext.Provider, { value: { sdk }, children: [
+    /* @__PURE__ */ jsx54(Theme2, {}),
+    /* @__PURE__ */ jsx54(UniformMeshLocationContextProvider, { children })
   ] });
 };
 
@@ -3982,17 +4703,17 @@ function createLocationValidator(setValue, validate) {
 // src/index.ts
 import {
   AddListButton as AddListButton2,
-  Button as Button3,
+  Button as Button7,
   Callout as Callout4,
   Heading,
-  Input as Input7,
+  Input as Input8,
   InputComboBox,
-  InputKeywordSearch as InputKeywordSearch2,
-  InputSelect as InputSelect6,
+  InputKeywordSearch as InputKeywordSearch4,
+  InputSelect as InputSelect8,
   InputToggle,
-  InputKeywordSearch as InputKeywordSearch3,
+  InputKeywordSearch as InputKeywordSearch5,
   Label,
-  LoadingIndicator as LoadingIndicator3,
+  LoadingIndicator as LoadingIndicator4,
   LoadingOverlay as LoadingOverlay2,
   Menu as Menu3,
   MenuItem as MenuItem3,
@@ -4010,7 +4731,7 @@ import {
   ParameterTextareaInner,
   ParameterToggle,
   ParameterToggleInner,
-  ScrollableList,
+  ScrollableList as ScrollableList2,
   ScrollableListItem,
   Switch,
   Textarea,
@@ -4019,26 +4740,38 @@ import {
 export * from "@uniformdev/mesh-sdk";
 export {
   AddListButton2 as AddListButton,
-  Button3 as Button,
+  Button7 as Button,
   Callout4 as Callout,
   DamSelectedItem,
+  DataRefreshButton,
   DataResourceVariablesList,
   DataSourceEditor,
   DataTypeEditor,
   DefaultSearchRow,
   DefaultSelectedItem,
   EntrySearch,
+  EntrySearchContainer,
+  EntrySearchContext,
+  EntrySearchFilter,
+  EntrySearchFilterContainer2 as EntrySearchFilterContainer,
+  EntrySearchListItem,
+  EntrySearchListItemLoadingSkeleton,
+  EntrySearchProvider,
+  EntrySearchResultItem,
+  EntrySearchResultItemButton,
+  EntrySearchResultList,
   Heading,
   icons_exports as Icons,
-  Input7 as Input,
+  Input8 as Input,
   InputComboBox,
-  InputKeywordSearch2 as InputKeywordSearch,
-  InputSelect6 as InputSelect,
+  InputKeywordSearch4 as InputKeywordSearch,
+  InputSelect8 as InputSelect,
   InputToggle,
   InputVariables,
-  InputKeywordSearch3 as KeywordSearchInput,
+  InputKeywordSearch5 as KeywordSearchInput,
   Label,
-  LoadingIndicator3 as LoadingIndicator,
+  LinkButton,
+  LoadingIndicator4 as LoadingIndicator,
   LoadingOverlay2 as LoadingOverlay,
   Menu3 as Menu,
   MenuItem3 as MenuItem,
@@ -4065,6 +4798,7 @@ export {
   ProductSearchContext,
   ProductSearchRow,
   ProductSelectedItem,
+  QueryFilter,
   RequestBody,
   RequestHeaders,
   RequestMethodSelect,
@@ -4074,7 +4808,7 @@ export {
   RequestUrl,
   RequestUrlInput,
   ResolvableLoadingValue,
-  ScrollableList,
+  ScrollableList2 as ScrollableList,
   ScrollableListItem,
   SelectionField,
   Switch,
@@ -4153,6 +4887,7 @@ export {
   selectedItemTitle,
   urlEncodeRequestParameter,
   urlEncodeRequestUrl,
+  useEntrySearchContext,
   useInitializeUniformMeshSdk,
   useMeshLocation,
   useParameterShell,