@uniformdev/mesh-sdk-react 19.117.0 → 19.117.1-alpha.1

package/dist/index.js

@@ -36,11 +36,13 @@ __export(src_exports, {
   AddListButton: () => import_design_system41.AddListButton,
   Button: () => import_design_system41.Button,
   Callout: () => import_design_system41.Callout,
+  ControlledObjectSearchProvider: () => ControlledObjectSearchProvider,
   ControlledValuePlugin: () => ControlledValuePlugin,
   DISCONNECT_VARIABLE_COMMAND: () => DISCONNECT_VARIABLE_COMMAND,
   DamSelectedItem: () => DamSelectedItem,
   DataRefreshButton: () => DataRefreshButton,
   DataResourceDynamicInputProvider: () => DataResourceDynamicInputProvider,
+  DataResourceInputContext: () => DataResourceInputContext,
   DataResourceVariablesList: () => DataResourceVariablesList,
   DataResourceVariablesListExplicit: () => DataResourceVariablesListExplicit,
   DataSourceEditor: () => DataSourceEditor,
@@ -68,6 +70,7 @@ __export(src_exports, {
   MeshApp: () => MeshApp,
   OPEN_INSERT_VARIABLE_COMMAND: () => OPEN_INSERT_VARIABLE_COMMAND,
   ObjectSearchContainer: () => ObjectSearchContainer,
+  ObjectSearchContext: () => ObjectSearchContext,
   ObjectSearchFilter: () => ObjectSearchFilter,
   ObjectSearchFilterContainer: () => ObjectSearchFilterContainer2,
   ObjectSearchListItem: () => ObjectSearchListItem,
@@ -125,6 +128,7 @@ __export(src_exports, {
   VariablesPlugin: () => VariablesPlugin,
   VariablesProvider: () => VariablesProvider,
   badgeIcon: () => badgeIcon,
+  bindQuery: () => bindQuery,
   convertConnectedDataToVariable: () => convertConnectedDataToVariable,
   createLocationValidator: () => createLocationValidator,
   damSelectItemImage: () => damSelectItemImage,
@@ -196,6 +200,7 @@ __export(src_exports, {
   urlEncodeRequestUrl: () => urlEncodeRequestUrl,
   useConnectedDataAsVariables: () => useConnectedDataAsVariables,
   useContentDataResourceLocaleInfo: () => useContentDataResourceLocaleInfo,
+  useDataResourceDynamicInputs: () => useDataResourceDynamicInputs,
   useDynamicInputsAsVariables: () => useDynamicInputsAsVariables,
   useMeshLocation: () => useMeshLocation,
   useObjectSearchContext: () => useObjectSearchContext,
@@ -2855,6 +2860,9 @@ function DefaultDamItemRenderer({ item }) {
   ] }) : null;
 }
 
+// src/components/DataResourceDynamicInputProvider.tsx
+var import_react58 = require("react");
+
 // src/hooks/useConnectedDataAsVariables.tsx
 var import_react26 = require("react");
 function useConnectedDataAsVariables(connectedData) {
@@ -5447,6 +5455,10 @@ function VariablesList() {
 
 // src/components/DataResourceDynamicInputProvider.tsx
 var import_jsx_runtime45 = require("@emotion/react/jsx-runtime");
+var DataResourceInputContext = (0, import_react58.createContext)(void 0);
+var useDataResourceDynamicInputs = () => {
+  return (0, import_react58.useContext)(DataResourceInputContext);
+};
 function DataResourceDynamicInputProvider(props) {
   const { children, dynamicInputs } = props;
   if (dynamicInputs) {
@@ -5465,7 +5477,7 @@ function DataResourceDynamicInputProviderRenderer({
   dynamicInputs
 }) {
   const variables = useDynamicInputsAsVariables(dynamicInputs);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(VariablesProvider, { value: variables, readOnly: true, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DataResourceInputContext.Provider, { value: dynamicInputs, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(VariablesProvider, { value: variables, readOnly: true, children }) });
 }
 
 // src/components/DataResourceVariablesList.tsx
@@ -5542,9 +5554,9 @@ function TextVariableRenderer({ definition, value, setValue }) {
 }
 
 // src/components/Request/RequestBody.tsx
-var import_react59 = require("@emotion/react");
+var import_react60 = require("@emotion/react");
 var import_design_system27 = require("@uniformdev/design-system");
-var import_react60 = require("react");
+var import_react61 = require("react");
 
 // src/components/Request/RequestProvider.tsx
 var React11 = __toESM(require("react"));
@@ -5628,11 +5640,11 @@ function useRequest() {
 }
 
 // src/components/Request/styles/Request.styles.ts
-var import_react58 = require("@emotion/react");
-var innerContentStyles = import_react58.css`
+var import_react59 = require("@emotion/react");
+var innerContentStyles = import_react59.css`
   background: var(--white);
 `;
-var requestTypeContainer = (bgColor) => import_react58.css`
+var requestTypeContainer = (bgColor) => import_react59.css`
   align-items: start;
   background: ${bgColor};
   display: grid;
@@ -5670,11 +5682,11 @@ var LANGUAGE_TO_CONTENT_TYPE = {
 };
 function RequestBody() {
   const { request, dispatch } = useRequest();
-  const [language, setLanguage] = (0, import_react60.useState)("json");
+  const [language, setLanguage] = (0, import_react61.useState)("json");
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     "div",
     {
-      css: import_react59.css`
+      css: import_react60.css`
         background: var(--white);
       `,
       children: [
@@ -5682,7 +5694,7 @@ function RequestBody() {
           RequestTypeContainer,
           {
             bgColor: "var(--gray-100)",
-            css: import_react59.css`
+            css: import_react60.css`
           padding: var(--spacing-sm) var(--spacing-base);
         `,
             children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
@@ -5953,8 +5965,8 @@ function RequestParameters({
 }
 
 // src/components/Request/RequestUrl.tsx
-var import_react61 = require("@emotion/react");
-var import_react62 = require("react");
+var import_react62 = require("@emotion/react");
+var import_react63 = require("react");
 
 // src/components/Request/urlEncodeRequestParameter.ts
 function urlEncodeRequestUrl(url, varValues) {
@@ -5980,7 +5992,7 @@ function RequestUrl() {
   var _a, _b;
   const { variables } = useVariables();
   const { request } = useRequest();
-  const mergedParameters = (0, import_react62.useMemo)(() => {
+  const mergedParameters = (0, import_react63.useMemo)(() => {
     var _a2;
     if (!((_a2 = request.baseRequest) == null ? void 0 : _a2.parameters)) {
       return request.parameters;
@@ -5990,7 +6002,7 @@ function RequestUrl() {
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     "small",
     {
-      css: import_react61.css`
+      css: import_react62.css`
         display: inline-block;
         margin-bottom: var(--spacing-xs);
         word-break: break-word;
@@ -6228,12 +6240,12 @@ var import_design_system31 = require("@uniformdev/design-system");
 
 // src/hooks/useInitializeUniformMeshSdk.ts
 var import_mesh_sdk = require("@uniformdev/mesh-sdk");
-var import_react63 = require("react");
+var import_react64 = require("react");
 var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
-  const [error, setError] = (0, import_react63.useState)();
-  const [sdk, setSdk] = (0, import_react63.useState)();
-  const initializationInProgress = (0, import_react63.useRef)(false);
-  (0, import_react63.useEffect)(
+  const [error, setError] = (0, import_react64.useState)();
+  const [sdk, setSdk] = (0, import_react64.useState)();
+  const initializationInProgress = (0, import_react64.useRef)(false);
+  (0, import_react64.useEffect)(
     () => {
       if (typeof window === "undefined" || sdk) {
         return;
@@ -6291,7 +6303,7 @@ var MeshApp = ({
 };
 
 // src/components/ObjectSearch/DataRefreshButton.tsx
-var import_react64 = require("@emotion/react");
+var import_react65 = require("@emotion/react");
 var import_design_system32 = require("@uniformdev/design-system");
 var import_jsx_runtime58 = require("@emotion/react/jsx-runtime");
 var DataRefreshButton = ({
@@ -6304,7 +6316,7 @@ var DataRefreshButton = ({
     !isLoading ? null : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       import_design_system32.LoadingIndicator,
       {
-        css: import_react64.css`
+        css: import_react65.css`
             ${isLoading ? "opacity: 0.2;" : void 0}
           `
       }
@@ -6314,15 +6326,16 @@ var DataRefreshButton = ({
 };
 
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
-var import_react67 = require("@emotion/react");
+var import_react71 = require("@emotion/react");
 var import_canvas9 = require("@uniformdev/canvas");
-var import_design_system35 = require("@uniformdev/design-system");
+var import_design_system38 = require("@uniformdev/design-system");
+var import_react72 = __toESM(require("react"));
 
 // src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
 var import_canvas8 = require("@uniformdev/canvas");
-var import_react65 = require("react");
+var import_react66 = require("react");
 var import_jsx_runtime59 = require("@emotion/react/jsx-runtime");
-var ObjectSearchContext = (0, import_react65.createContext)({
+var ObjectSearchContext = (0, import_react66.createContext)({
   onSetQuery: () => {
   },
   onSelectItem: () => {
@@ -6330,8 +6343,6 @@ var ObjectSearchContext = (0, import_react65.createContext)({
   query: {},
   boundQuery: {},
   list: {},
-  onSetList: () => {
-  },
   selectedListItems: [],
   onRemoveAllSelectedItems: () => {
   },
@@ -6343,16 +6354,16 @@ var ObjectSearchProvider = ({
   children,
   defaultQuery
 }) => {
-  const [query, setQuery] = (0, import_react65.useState)({
+  const [query, setQuery] = (0, import_react66.useState)({
     contentType: "",
     keyword: "",
     ...defaultQuery
   });
   const { flatVariables } = useVariables(true);
-  const querySearchDeferred = (0, import_react65.useDeferredValue)(query);
-  const [selectedItems, setSelectedItems] = (0, import_react65.useState)(currentlySelectedItems != null ? currentlySelectedItems : []);
-  const [list, setList] = (0, import_react65.useState)({});
-  const onSetQuery = (0, import_react65.useCallback)(
+  const querySearchDeferred = (0, import_react66.useDeferredValue)(query);
+  const [selectedItems, setSelectedItems] = (0, import_react66.useState)(currentlySelectedItems != null ? currentlySelectedItems : []);
+  const [list, setList] = (0, import_react66.useState)({});
+  const onSetQuery = (0, import_react66.useCallback)(
     (value2) => {
       if (Array.isArray(value2.contentType) && value2.contentType.length > 0) {
         return setQuery({
@@ -6364,7 +6375,7 @@ var ObjectSearchProvider = ({
     },
     [setQuery]
   );
-  const onSelectItem = (0, import_react65.useCallback)(
+  const onSelectItem = (0, import_react66.useCallback)(
     (selectedResult) => {
       if (Array.isArray(selectedResult)) {
         setSelectedItems(selectedResult);
@@ -6378,17 +6389,17 @@ var ObjectSearchProvider = ({
     },
     [setSelectedItems, selectedItems]
   );
-  const onRemoveAllSelectedItems = (0, import_react65.useCallback)(() => {
+  const onRemoveAllSelectedItems = (0, import_react66.useCallback)(() => {
     setSelectedItems([]);
   }, [setSelectedItems]);
-  const onSetList = (0, import_react65.useCallback)(
+  const onSetList = (0, import_react66.useCallback)(
     (value2) => {
       setList(value2);
     },
     [setList]
   );
-  const boundQuery = (0, import_react65.useMemo)(() => bindQuery(query, flatVariables), [query, flatVariables]);
-  const value = (0, import_react65.useMemo)(
+  const boundQuery = (0, import_react66.useMemo)(() => bindQuery(query, flatVariables), [query, flatVariables]);
+  const value = (0, import_react66.useMemo)(
     () => ({
       boundQuery,
       onSetQuery,
@@ -6415,7 +6426,7 @@ var ObjectSearchProvider = ({
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ObjectSearchContext.Provider, { value, children });
 };
 function useObjectSearchContext() {
-  return (0, import_react65.useContext)(ObjectSearchContext);
+  return (0, import_react66.useContext)(ObjectSearchContext);
 }
 function bindQuery(query, inputs) {
   const { result, errors } = (0, import_canvas8.bindVariablesToObject)({
@@ -6433,9 +6444,9 @@ function bindQuery(query, inputs) {
 var import_design_system34 = require("@uniformdev/design-system");
 
 // src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
-var import_react66 = require("@emotion/react");
+var import_react67 = require("@emotion/react");
 var import_design_system33 = require("@uniformdev/design-system");
-var ObjectListItemContainer = import_react66.css`
+var ObjectListItemContainer = import_react67.css`
   align-items: center;
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -6444,11 +6455,11 @@ var ObjectListItemContainer = import_react66.css`
   grid-template-columns: 1fr auto;
   padding: var(--spacing-sm);
 `;
-var ObjectListItemContainerDisabled = import_react66.css`
+var ObjectListItemContainerDisabled = import_react67.css`
   opacity: var(--opacity-50);
   pointer-events: none;
 `;
-var ObjectListItemLoading = import_react66.css`
+var ObjectListItemLoading = import_react67.css`
   animation: ${import_design_system33.skeletonLoading} 1s linear infinite alternate;
   border-color: transparent;
   min-height: 42px;
@@ -6472,36 +6483,36 @@ var ObjectListItemLoading = import_react66.css`
     width: 1rem;
   }
 `;
-var ObjectListItemHeadingGroup = import_react66.css`
+var ObjectListItemHeadingGroup = import_react67.css`
   align-items: center;
   display: grid;
 `;
-var ObjectListItemThumbnail = import_react66.css`
+var ObjectListItemThumbnail = import_react67.css`
   width: 30px;
   object-fit: contain;
 `;
-var ObjectListItemTitle = import_react66.css`
+var ObjectListItemTitle = import_react67.css`
   color: var(--typography-base);
   display: block;
   font-size: var(--fs-sm);
 `;
-var ObjectListItemSubtitle = import_react66.css`
+var ObjectListItemSubtitle = import_react67.css`
   color: var(--gray-500);
   display: block;
   font-size: var(--fs-xs);
   line-height: 1;
 `;
-var ObjectListItemInfoContainer = import_react66.css`
+var ObjectListItemInfoContainer = import_react67.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   justify-content: center;
 `;
-var ObjectListItemControlledContent = import_react66.css`
+var ObjectListItemControlledContent = import_react67.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectListItemUnControlledContent = import_react66.css`
+var ObjectListItemUnControlledContent = import_react67.css`
   margin-top: var(--spacing-sm);
   grid-column: 1 / -1;
 `;
@@ -6569,202 +6580,19 @@ var ObjectSearchListItemLoadingSkeleton = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
 };
 
-// src/components/ObjectSearch/ObjectSearchContainer.tsx
-var import_jsx_runtime61 = require("@emotion/react/jsx-runtime");
-var ObjectSearchContainer = ({
-  label,
-  enableDynamicInputToResultId,
-  searchFilters,
-  resultList,
-  children
-}) => {
-  var _a, _b;
-  const { onSelectItem, selectedListItems, list } = useObjectSearchContext();
-  const { flatVariables } = useVariables(true);
-  const inputValue = (_b = (_a = selectedListItems == null ? void 0 : selectedListItems[0]) == null ? void 0 : _a.id) != null ? _b : "";
-  const listItems = resultList != null ? resultList : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-    import_design_system35.ScrollableList,
-    {
-      role: "list",
-      css: import_react67.css`
-        > div {
-          transition: max-height var(--duration-slow) var(--timing-ease-out);
-          max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
-        }
-      `,
-      children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(DefaultResultList, {})
-    }
-  );
-  const body = /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_design_system35.VerticalRhythm, { children: [
-    searchFilters,
-    listItems
-  ] });
-  const handleSelectedVariableChange = (selectedValue) => {
-    var _a2;
-    if (!selectedValue) {
-      onSelectItem([]);
-      return;
-    }
-    const { result, errors } = (0, import_canvas9.bindVariables)({
-      value: selectedValue,
-      variables: flatVariables,
-      errorPrefix: "Dynamic input"
-    });
-    if (!result) {
-      onSelectItem([]);
-      return;
-    }
-    const item = (_a2 = list.items) == null ? void 0 : _a2.find((i) => i.id === result);
-    onSelectItem([
-      {
-        title: selectedValue,
-        contentType: (errors == null ? void 0 : errors.length) ? errors[0] instanceof Error ? errors[0].message : errors[0] : `Current dynamic value "${result}" is not an ID in the options`,
-        // spread any matched list item, overriding the above default props
-        ...item,
-        // we want to make sure the ID is our dynamic value
-        id: selectedValue
-      }
-    ]);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_design_system35.IconsProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_design_system35.VerticalRhythm, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_design_system35.Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-      InputVariables,
-      {
-        label,
-        value: inputValue,
-        onChange: (value) => {
-          if (value === inputValue) {
-            return;
-          }
-          handleSelectedVariableChange(value);
-        },
-        inputWhenNoVariables: body,
-        disableVariables: !enableDynamicInputToResultId
-      }
-    ) : body }),
-    children
-  ] }) });
-};
-var DefaultResultList = () => {
-  var _a;
-  const { list } = useObjectSearchContext();
-  if (!list.items) {
-    return Array.from(Array(5).keys()).map((i) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ObjectSearchListItemLoadingSkeleton, {}, i));
-  }
-  if (list.items.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_design_system35.Callout, { type: "info", children: "No results were found" });
-  }
-  return (_a = list.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ObjectSearchListItem, { ...item }, item.id));
-};
-
-// src/components/ObjectSearch/ObjectSearchFilter.tsx
-var import_design_system36 = require("@uniformdev/design-system");
-var import_react69 = require("react");
-
-// src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
-var import_react68 = require("@emotion/react");
-var ObjectSearchFilterContainerLabel = import_react68.css`
-  align-items: center;
-  display: flex;
-  font-size: var(--fs-sm);
-  font-weight: var(--fw-bold);
-  line-height: 1rem;
-  margin-bottom: var(--spacing-sm);
-`;
-var ObjectSearchFilterContainer = import_react68.css`
-  display: grid;
-  gap: var(--spacing-base);
-`;
-var ObjectSearchFilterGrid = (gridColumns) => import_react68.css`
-  display: grid;
-  grid-template-columns: ${gridColumns};
-  gap: var(--spacing-base);
-`;
-
-// src/components/ObjectSearch/ObjectSearchFilter.tsx
-var import_jsx_runtime62 = require("@emotion/react/jsx-runtime");
-var ObjectSearchFilter = ({
-  requireContentType,
-  typeSelectorAllTypesOptionText = "All content types",
-  searchInputName = "searchText",
-  searchInputPlaceholderText = "Enter keyword to narrow your results",
-  selectLabel = "Content Type Select",
-  selectOptions
-}) => {
-  var _a, _b;
-  const { query, onSetQuery } = useObjectSearchContext();
-  const [searchState, setSearchState] = (0, import_react69.useState)({
-    contentType: (_a = query.contentType) != null ? _a : "",
-    keyword: (_b = query.keyword) != null ? _b : ""
-  });
-  const handleFilterChange = (value) => {
-    setSearchState((prev) => {
-      return { ...prev, ...value };
-    });
-    onSetQuery({ ...query, ...value });
-  };
-  const memoizedSelectOptions = (0, import_react69.useMemo)(() => {
-    if (!requireContentType && !(selectOptions == null ? void 0 : selectOptions.length)) {
-      return [];
-    }
-    return [
-      ...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
-      ...selectOptions != null ? selectOptions : []
-    ];
-  }, [requireContentType, typeSelectorAllTypesOptionText, selectOptions]);
-  const shouldRenderSelect = memoizedSelectOptions.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
-    "fieldset",
-    {
-      css: [
-        ObjectSearchFilterContainer,
-        ObjectSearchFilterGrid(shouldRenderSelect ? "1fr 2fr" : "1fr")
-      ],
-      children: [
-        memoizedSelectOptions.length ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-          import_design_system36.InputSelect,
-          {
-            label: selectLabel,
-            showLabel: false,
-            onChange: (e) => handleFilterChange({ contentType: e.target.value }),
-            options: memoizedSelectOptions,
-            value: query.contentType
-          }
-        ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-          import_design_system36.DebouncedInputKeywordSearch,
-          {
-            inputFieldName: searchInputName,
-            placeholder: searchInputPlaceholderText,
-            onSearchTextChanged: (keyword) => handleFilterChange({ keyword }),
-            disabledFieldSubmission: true,
-            defaultValue: searchState.keyword,
-            delay: 300
-          }
-        )
-      ]
-    }
-  );
-};
-
-// src/components/ObjectSearch/ObjectSearchFilterContainer.tsx
-var import_jsx_runtime63 = require("@emotion/react/jsx-runtime");
-var ObjectSearchFilterContainer2 = ({ label, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { css: ObjectSearchFilterContainer, children })
-  ] });
-};
+// src/components/ObjectSearch/ObjectSearchResultList.tsx
+var import_design_system37 = require("@uniformdev/design-system");
+var import_react_beautiful_dnd4 = require("react-beautiful-dnd");
 
 // src/components/ObjectSearch/ObjectSearchResultItem.tsx
-var import_design_system38 = require("@uniformdev/design-system");
+var import_design_system36 = require("@uniformdev/design-system");
 var import_timeago3 = require("timeago.js");
 
 // src/components/ObjectSearch/styles/ObjectSearchResultItemButton.styles.ts
-var import_react70 = require("@emotion/react");
-var import_design_system37 = require("@uniformdev/design-system");
-var ButtonStyles = import_react70.css`
-  ${import_design_system37.button}
+var import_react68 = require("@emotion/react");
+var import_design_system35 = require("@uniformdev/design-system");
+var ButtonStyles = import_react68.css`
+  ${import_design_system35.button}
   background: transparent;
   border: 1px solid var(--typography-base);
   color: var(--typography-base);
@@ -6790,20 +6618,20 @@ var ButtonStyles = import_react70.css`
     text-decoration: none;
   }
 `;
-var ButtonIcon = import_react70.css`
+var ButtonIcon = import_react68.css`
   width: 1rem;
   height: 1rem;
 `;
 
 // src/components/ObjectSearch/ObjectSearchResultItemButton.tsx
-var import_jsx_runtime64 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime61 = require("@emotion/react/jsx-runtime");
 var ObjectSearchResultItemButton = ({
   text,
   icon,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("button", { type: "button", css: ButtonStyles, ...props, children: [
-    !icon ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Image, { src: icon, css: ButtonIcon }),
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("button", { type: "button", css: ButtonStyles, ...props, children: [
+    !icon ? null : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Image, { src: icon, css: ButtonIcon }),
     text
   ] });
 };
@@ -6812,15 +6640,15 @@ var LinkButton = ({
   icon,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("a", { ...props, css: ButtonStyles, target: "_blank", rel: "noopener noreferrer", children: [
-    !icon ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Image, { src: icon, css: ButtonIcon }),
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("a", { ...props, css: ButtonStyles, target: "_blank", rel: "noopener noreferrer", children: [
+    !icon ? null : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Image, { src: icon, css: ButtonIcon }),
     text
   ] });
 };
 
 // src/components/ObjectSearch/styles/ObjectSearchResultItem.styles.ts
-var import_react71 = require("@emotion/react");
-var ObjectSearchResultItemContainer = import_react71.css`
+var import_react69 = require("@emotion/react");
+var ObjectSearchResultItemContainer = import_react69.css`
   align-items: center;
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -6836,7 +6664,7 @@ var ObjectSearchResultItemContainer = import_react71.css`
     }
   }
 `;
-var ObjectSearchDragHandle = import_react71.css`
+var ObjectSearchDragHandle = import_react69.css`
   border-left: 2px dotted var(--gray-300);
   border-right: 2px dotted var(--gray-300);
   position: absolute;
@@ -6845,41 +6673,41 @@ var ObjectSearchDragHandle = import_react71.css`
   transition: opacity var(--duration-fast) var(--timing-ease-out);
   opacity: 0;
 `;
-var ObjectSearchResultItemSubtitle = import_react71.css`
+var ObjectSearchResultItemSubtitle = import_react69.css`
   color: var(--gray-500);
   display: block;
   font-size: var(--fs-xs);
   line-height: 1;
 `;
-var ObjectSearchResultItemTitle = import_react71.css`
+var ObjectSearchResultItemTitle = import_react69.css`
   align-items: center;
   color: var(--typography-base);
   display: flex;
   gap: var(--spacing-xs);
 `;
-var ObjectSearchResultItemTimeStamp = import_react71.css`
+var ObjectSearchResultItemTimeStamp = import_react69.css`
   color: var(--gray-500);
   font-size: var(--fs-xs);
 `;
-var ObjectSearchAuthorStateGroup = import_react71.css`
+var ObjectSearchAuthorStateGroup = import_react69.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectSearchUpdateGroup = import_react71.css`
+var ObjectSearchUpdateGroup = import_react69.css`
   display: grid;
 `;
-var ObjectSearchContentContainer = import_react71.css`
+var ObjectSearchContentContainer = import_react69.css`
   display: flex;
   gap: var(--spacing-base);
 `;
-var ObjectSearchImage = import_react71.css`
+var ObjectSearchImage = import_react69.css`
   width: 56px;
   object-fit: contain;
 `;
 
 // src/components/ObjectSearch/ObjectSearchResultItem.tsx
-var import_jsx_runtime65 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime62 = require("@emotion/react/jsx-runtime");
 var ObjectSearchResultItem = ({
   id,
   title,
@@ -6903,77 +6731,73 @@ var ObjectSearchResultItem = ({
     onSelectItem({ id, title: id });
     onRemove == null ? void 0 : onRemove();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { css: ObjectSearchResultItemContainer, "data-testid": "search-result-item", children: [
-    disableDnD ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { role: "presentation", className: "drag-handle", css: ObjectSearchDragHandle }),
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { css: ObjectSearchContentContainer, children: [
-      !imageUrl ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectSearchImage }),
-      /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { css: ObjectSearchResultItemSubtitle, "data-testid": "sub-title", children: formatedContentType }),
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("span", { role: "heading", css: ObjectSearchResultItemTitle, "data-testid": "title", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { css: ObjectSearchResultItemContainer, "data-testid": "search-result-item", children: [
+    disableDnD ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { role: "presentation", className: "drag-handle", css: ObjectSearchDragHandle }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { css: ObjectSearchContentContainer, children: [
+      !imageUrl ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectSearchImage }),
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { css: ObjectSearchResultItemSubtitle, "data-testid": "sub-title", children: formatedContentType }),
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { role: "heading", css: ObjectSearchResultItemTitle, "data-testid": "title", children: [
           title != null ? title : name,
-          !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_design_system38.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
+          !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_design_system36.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
         ] }),
-        !createdAt && !publishStatus ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { css: ObjectSearchAuthorStateGroup, children: [
-          !(publishStatus == null ? void 0 : publishStatus.text) ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_design_system38.Badge, { ...publishStatus, size: "sm", uppercaseText: true }),
-          !createdAt && !publishedAt ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { css: ObjectSearchUpdateGroup, children: [
-            !createdAt ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("small", { css: ObjectSearchResultItemTimeStamp, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("strong", { children: "Last updated: " }),
+        !createdAt && !publishStatus ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { css: ObjectSearchAuthorStateGroup, children: [
+          !(publishStatus == null ? void 0 : publishStatus.text) ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_design_system36.Badge, { ...publishStatus, size: "sm", uppercaseText: true }),
+          !createdAt && !publishedAt ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { css: ObjectSearchUpdateGroup, children: [
+            !createdAt ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("small", { css: ObjectSearchResultItemTimeStamp, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("strong", { children: "Last updated: " }),
               (0, import_timeago3.format)(createdAt)
             ] }),
-            !publishedAt ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("small", { css: ObjectSearchResultItemTimeStamp, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("strong", { children: "Last published: " }),
+            !publishedAt ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("small", { css: ObjectSearchResultItemTimeStamp, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("strong", { children: "Last published: " }),
               (0, import_timeago3.format)(publishedAt)
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { children })
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { children })
       ] })
     ] }) }),
-    !editLink && hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { css: ObjectSearchAuthorStateGroup, children: [
-      !editLink ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(LinkButton, { text: "Edit", href: editLink, icon: editLinkIcon }),
-      hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_design_system38.Button, { buttonType: "ghostDestructive", onClick: onRemoveItem, children: "Remove" })
+    !editLink && hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { css: ObjectSearchAuthorStateGroup, children: [
+      !editLink ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(LinkButton, { text: "Edit", href: editLink, icon: editLinkIcon }),
+      hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_design_system36.Button, { buttonType: "ghostDestructive", onClick: onRemoveItem, children: "Remove" })
     ] })
   ] });
 };
 
-// src/components/ObjectSearch/ObjectSearchResultList.tsx
-var import_design_system39 = require("@uniformdev/design-system");
-var import_react_beautiful_dnd4 = require("react-beautiful-dnd");
-
 // src/components/ObjectSearch/styles/ObjectSearchResultList.styles.ts
-var import_react72 = require("@emotion/react");
-var ObjectSearchResultListContainer = import_react72.css`
+var import_react70 = require("@emotion/react");
+var ObjectSearchResultListContainer = import_react70.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   justify-content: space-between;
 `;
-var ObjectSearchDragContainer = import_react72.css`
+var ObjectSearchDragContainer = import_react70.css`
   margin: 0 0 var(--spacing-sm);
 `;
-var ObjectSearchContainerDragging = import_react72.css`
+var ObjectSearchContainerDragging = import_react70.css`
   box-shadow: var(--shadow-base);
   opacity: var(--opacity-50);
 `;
-var ObjectSearchResultListCounterContainer = import_react72.css`
+var ObjectSearchResultListCounterContainer = import_react70.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectSearchResultListTitle = import_react72.css`
+var ObjectSearchResultListTitle = import_react70.css`
   font-weight: var(--fw-bold);
   line-height: 1;
 `;
 
 // src/components/ObjectSearch/ObjectSearchResultList.tsx
-var import_jsx_runtime66 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime63 = require("@emotion/react/jsx-runtime");
 function ObjectSearchResultList({
   resultLabelText = "Selected",
   removeButtonText = "Remove all",
   onRemoveAllSelected,
   hideRemoveButton = false,
   additionalButtons,
-  renderResultComponent = (value) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ObjectSearchResultItem, { ...value }),
+  renderResultComponent = (value) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ObjectSearchResultItem, { ...value }),
   multiSelectId,
   disableDnD = false,
   getContainerForDnDReparenting,
@@ -7000,7 +6824,7 @@ function ObjectSearchResultList({
       ...item,
       disableDnD: selectedListItems.length === 1 || disableDnD
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       "div",
       {
         css: [
@@ -7015,17 +6839,17 @@ function ObjectSearchResultList({
       }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { role: "group", css: ObjectSearchResultListContainer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { css: ObjectSearchResultListTitle, children: resultLabelText }),
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { role: "group", css: ObjectSearchResultListContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { css: ObjectSearchResultListTitle, children: resultLabelText }),
         " ",
-        !selectedListItems.length ? null : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_design_system39.Counter, { count: selectedListItems.length })
+        !selectedListItems.length ? null : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_design_system37.Counter, { count: selectedListItems.length })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { css: ObjectSearchResultListCounterContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { css: ObjectSearchResultListCounterContainer, children: [
         additionalButtons,
-        hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-          import_design_system39.Button,
+        hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+          import_design_system37.Button,
           {
             buttonType: "ghostDestructive",
             size: "xs",
@@ -7036,15 +6860,15 @@ function ObjectSearchResultList({
         )
       ] })
     ] }),
-    !selectedListItems.length ? whenNothingSelected : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    !selectedListItems.length ? whenNothingSelected : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       import_react_beautiful_dnd4.Droppable,
       {
         droppableId: multiSelectId != null ? multiSelectId : "canvas-multi-select",
         renderClone: getContainerForDnDReparenting ? getDraggableItem : void 0,
         getContainerForClone: getContainerForDnDReparenting,
-        children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
+        children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
           selectedListItems.map((item, i) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
               import_react_beautiful_dnd4.Draggable,
               {
                 draggableId: item.id,
@@ -7062,9 +6886,284 @@ function ObjectSearchResultList({
   ] });
 }
 
+// src/components/ObjectSearch/ObjectSearchContainer.tsx
+var import_jsx_runtime64 = require("@emotion/react/jsx-runtime");
+var ObjectSearchContainer = ({
+  label,
+  enableDynamicInputToResultId,
+  searchFilters,
+  resultList,
+  children = /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ObjectSearchResultList, {})
+}) => {
+  var _a, _b;
+  const { onSelectItem, selectedListItems, list, dynamicEntryId, onSetQuery, query } = useObjectSearchContext();
+  const { flatVariables } = useVariables(true);
+  const inputValue = (_b = dynamicEntryId != null ? dynamicEntryId : (_a = selectedListItems[0]) == null ? void 0 : _a.id) != null ? _b : "";
+  const isDynamicEntryIdAvailable = import_react72.default.useMemo(
+    () => Boolean(inputValue && hasReferencedVariables(inputValue)),
+    [inputValue]
+  );
+  const listItems = resultList != null ? resultList : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    import_design_system38.ScrollableList,
+    {
+      role: "list",
+      css: import_react71.css`
+        > div {
+          transition: max-height var(--duration-slow) var(--timing-ease-out);
+          max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
+        }
+      `,
+      children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(DefaultResultList, {})
+    }
+  );
+  const handleSelectedVariableChange = (selectedValue) => {
+    var _a2;
+    if (!selectedValue) {
+      onSelectItem([]);
+      return;
+    }
+    const { result, errors } = (0, import_canvas9.bindVariables)({
+      value: selectedValue,
+      variables: flatVariables,
+      errorPrefix: "Dynamic input"
+    });
+    if (!result) {
+      onSelectItem([]);
+      return;
+    }
+    const item = (_a2 = list.items) == null ? void 0 : _a2.find((i) => i.id === result);
+    onSelectItem([
+      {
+        title: selectedValue,
+        contentType: (errors == null ? void 0 : errors.length) ? errors[0] instanceof Error ? errors[0].message : errors[0] : `Current dynamic value "${result}" is not an ID in the options`,
+        // spread any matched list item, overriding the above default props
+        ...item,
+        // we want to make sure the ID is our dynamic value
+        id: selectedValue
+      }
+    ]);
+    if (hasReferencedVariables(selectedValue)) {
+      onSetQuery({ ...query, dynamicEntryId: selectedValue });
+    }
+  };
+  const showSearchList = !label || !isDynamicEntryIdAvailable || !enableDynamicInputToResultId;
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_design_system38.IconsProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_design_system38.VerticalRhythm, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_design_system38.Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_design_system38.VerticalRhythm, { children: [
+      label ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+        InputVariables,
+        {
+          id: "entryId",
+          label,
+          value: inputValue,
+          onChange: (value) => {
+            if (value === inputValue) {
+              return;
+            }
+            handleSelectedVariableChange(value);
+          },
+          inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_jsx_runtime64.Fragment, { children: searchFilters }),
+          disableVariables: !enableDynamicInputToResultId
+        }
+      ) : searchFilters,
+      showSearchList ? listItems : null
+    ] }) }),
+    children
+  ] }) });
+};
+var DefaultResultList = () => {
+  var _a, _b;
+  const { list, isListLoading } = useObjectSearchContext();
+  if (isListLoading || !list.items) {
+    return Array.from(Array(5).keys()).map((i) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ObjectSearchListItemLoadingSkeleton, {}, i));
+  }
+  if (((_a = list.items) == null ? void 0 : _a.length) === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_design_system38.Callout, { type: "info", children: "No results were found" });
+  }
+  return (_b = list.items) == null ? void 0 : _b.map((item) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ObjectSearchListItem, { ...item }, item.id));
+};
+
+// src/components/ObjectSearch/ObjectSearchFilter.tsx
+var import_design_system39 = require("@uniformdev/design-system");
+var import_react75 = require("react");
+var import_react_use5 = require("react-use");
+
+// src/utils/createLocationValidator.ts
+function createLocationValidator(setValue, validate) {
+  return (dispatch) => setValue((previous) => {
+    const { newValue, options } = dispatch(previous);
+    return { newValue, options: validate(newValue, options) };
+  });
+}
+
+// src/utils/useContentDataResourceLocaleInfo.ts
+var import_canvas10 = require("@uniformdev/canvas");
+var import_react73 = require("react");
+function useContentDataResourceLocaleInfo({
+  locale,
+  setLocale,
+  dynamicInputs
+}) {
+  var _a;
+  const setLocaleRef = (0, import_react73.useRef)(setLocale);
+  setLocaleRef.current = setLocale;
+  const { flatVariables } = useVariables();
+  const effectiveLocale = locale != null ? locale : dynamicInputs[import_canvas10.LOCALE_DYNAMIC_INPUT_NAME] ? (0, import_canvas10.createVariableReference)(import_canvas10.LOCALE_DYNAMIC_INPUT_NAME) : "";
+  const boundLocale = (_a = (0, import_canvas10.bindVariables)({ variables: flatVariables, value: effectiveLocale }).result) != null ? _a : effectiveLocale;
+  (0, import_react73.useEffect)(() => {
+    if (locale === void 0 && effectiveLocale && setLocaleRef.current) {
+      setLocaleRef.current((0, import_canvas10.createVariableReference)(import_canvas10.LOCALE_DYNAMIC_INPUT_NAME));
+    }
+  }, [locale, effectiveLocale]);
+  return { effectiveLocale, boundLocale: boundLocale ? boundLocale : void 0 };
+}
+
+// src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
+var import_react74 = require("@emotion/react");
+var ObjectSearchFilterContainerLabel = import_react74.css`
+  align-items: center;
+  display: flex;
+  font-size: var(--fs-sm);
+  font-weight: var(--fw-bold);
+  line-height: 1rem;
+  margin-bottom: var(--spacing-sm);
+`;
+var ObjectSearchFilterContainer = import_react74.css`
+  display: grid;
+  gap: var(--spacing-base);
+`;
+var ObjectSearchFilterGrid = (gridColumns) => import_react74.css`
+  display: grid;
+  grid-template-columns: ${gridColumns};
+  gap: var(--spacing-base);
+`;
+
+// src/components/ObjectSearch/ObjectSearchFilter.tsx
+var import_jsx_runtime65 = require("@emotion/react/jsx-runtime");
+var ObjectSearchFilter = ({
+  requireContentType,
+  typeSelectorAllTypesOptionText = "All content types",
+  searchInputName = "searchText",
+  searchInputPlaceholderText = "Enter keyword to narrow your results",
+  selectLabel = "Content Type Select",
+  localeFilterLabel = "Filter by locale",
+  selectOptions
+}) => {
+  var _a, _b, _c;
+  const { query, onSetQuery, localeOptions, enableFilterByLocale } = useObjectSearchContext();
+  const dynamicInputs = useDataResourceDynamicInputs();
+  const { boundLocale = "", effectiveLocale } = useContentDataResourceLocaleInfo({
+    locale: query.locale,
+    dynamicInputs: dynamicInputs != null ? dynamicInputs : {},
+    setLocale: (newLocale) => handleFilterChange({ locale: newLocale != null ? newLocale : "" })
+  });
+  const [searchState, setSearchState] = (0, import_react75.useState)({
+    keyword: (_a = query.keyword) != null ? _a : "",
+    contentType: (_b = query.contentType) != null ? _b : "",
+    locale: (_c = query.locale) != null ? _c : ""
+  });
+  const handleFilterChange = (value) => {
+    setSearchState((prev) => {
+      return { ...prev, ...value };
+    });
+  };
+  (0, import_react_use5.useDebounce)(
+    () => {
+      onSetQuery({ ...query, ...searchState });
+    },
+    500,
+    [searchState]
+  );
+  const memoizedSelectOptions = (0, import_react75.useMemo)(() => {
+    if (!requireContentType && !(selectOptions == null ? void 0 : selectOptions.length)) {
+      return [];
+    }
+    return [
+      ...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
+      ...selectOptions != null ? selectOptions : []
+    ];
+  }, [requireContentType, typeSelectorAllTypesOptionText, selectOptions]);
+  const shouldRenderSelect = memoizedSelectOptions.length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_design_system39.VerticalRhythm, { gap: "base", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+      "fieldset",
+      {
+        css: [
+          ObjectSearchFilterContainer,
+          ObjectSearchFilterGrid(shouldRenderSelect ? "1fr 2fr" : "1fr")
+        ],
+        children: [
+          memoizedSelectOptions.length ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+            import_design_system39.InputSelect,
+            {
+              label: selectLabel,
+              showLabel: false,
+              onChange: (e) => handleFilterChange({ contentType: e.target.value }),
+              options: memoizedSelectOptions,
+              value: query.contentType,
+              "data-testid": "select-entry"
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+            import_design_system39.InputKeywordSearch,
+            {
+              inputFieldName: searchInputName,
+              placeholder: searchInputPlaceholderText,
+              onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
+              disabledFieldSubmission: true,
+              onClear: () => handleFilterChange({ keyword: "" }),
+              value: searchState.keyword
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+            import_design_system39.DebouncedInputKeywordSearch,
+            {
+              inputFieldName: searchInputName,
+              placeholder: searchInputPlaceholderText,
+              onSearchTextChanged: (keyword) => handleFilterChange({ keyword }),
+              disabledFieldSubmission: true,
+              defaultValue: searchState.keyword,
+              delay: 300
+            }
+          )
+        ]
+      }
+    ),
+    enableFilterByLocale && (localeOptions == null ? void 0 : localeOptions.length) && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      InputVariables,
+      {
+        label: localeFilterLabel,
+        id: "locale",
+        value: effectiveLocale,
+        onChange: (newLocale) => handleFilterChange({ locale: newLocale != null ? newLocale : "" }),
+        disableInlineMenu: true,
+        inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+          import_design_system39.InputSelect,
+          {
+            id: "locale",
+            options: localeOptions,
+            name: "locale",
+            label: "",
+            value: boundLocale,
+            onChange: (e) => handleFilterChange({ locale: e.target.value })
+          }
+        )
+      }
+    )
+  ] });
+};
+
+// src/components/ObjectSearch/ObjectSearchFilterContainer.tsx
+var import_jsx_runtime66 = require("@emotion/react/jsx-runtime");
+var ObjectSearchFilterContainer2 = ({ label, children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { css: ObjectSearchFilterContainer, children })
+  ] });
+};
+
 // src/components/ObjectSearch/QueryFilter.tsx
 var import_design_system40 = require("@uniformdev/design-system");
-var import_react73 = require("react");
+var import_react76 = require("react");
 var import_jsx_runtime67 = require("@emotion/react/jsx-runtime");
 var QueryFilter = ({
   requireContentType,
@@ -7094,7 +7193,7 @@ var QueryFilter = ({
 }) => {
   var _a, _b, _c, _d, _e, _f, _g;
   const { query, onSetQuery } = useObjectSearchContext();
-  const [queryState, setQueryState] = (0, import_react73.useState)({
+  const [queryState, setQueryState] = (0, import_react76.useState)({
     contentType: (_a = query.contentType) != null ? _a : "",
     keyword: (_b = query.keyword) != null ? _b : "",
     count: (_c = query.count) != null ? _c : countValue,
@@ -7105,7 +7204,7 @@ var QueryFilter = ({
     setQueryState((prev) => ({ ...prev, ...value }));
     onSetQuery({ ...query, ...value });
   };
-  (0, import_react73.useEffect)(() => {
+  (0, import_react76.useEffect)(() => {
     onSetQuery(queryState);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("fieldset", { children: [
@@ -7230,9 +7329,93 @@ var QueryFilter = ({
   ] });
 };
 
-// src/components/ParamTypeDynamicDataProvider.tsx
-var import_react74 = require("react");
+// src/components/ObjectSearch/hooks/ControlledObjectSearchProvider.tsx
+var import_react77 = require("react");
 var import_jsx_runtime68 = require("@emotion/react/jsx-runtime");
+var ControlledObjectSearchProvider = ({
+  selectedItems,
+  searchResultItems,
+  selectedItemsLoading,
+  searchResultListLoading,
+  searchResultItemsLoading,
+  onQueryChange,
+  onSelectItemsChange,
+  isMulti = false,
+  children,
+  query,
+  enableFilterByLocale,
+  localeOptions,
+  dynamicEntryId
+}) => {
+  const { flatVariables } = useVariables(true);
+  const querySearchDeferred = (0, import_react77.useDeferredValue)(query);
+  const onSetQuery = (0, import_react77.useCallback)(
+    (value2) => {
+      const newQuery = { ...query, ...value2 };
+      onQueryChange(newQuery);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [onQueryChange]
+  );
+  const onSelectItem = (0, import_react77.useCallback)(
+    (selectedResult) => {
+      if (Array.isArray(selectedResult)) {
+        onSelectItemsChange(selectedResult);
+      } else {
+        if (selectedItems == null ? void 0 : selectedItems.some((item) => item.id === selectedResult.id)) {
+          onSelectItemsChange(selectedItems.filter((item) => item.id !== selectedResult.id));
+        } else {
+          onSelectItemsChange([...selectedItems != null ? selectedItems : [], selectedResult]);
+        }
+      }
+    },
+    [onSelectItemsChange, selectedItems]
+  );
+  const onRemoveAllSelectedItems = (0, import_react77.useCallback)(() => {
+    onSelectItemsChange([]);
+  }, [onSelectItemsChange]);
+  const list = (0, import_react77.useMemo)(() => ({ items: searchResultItems }), [searchResultItems]);
+  const boundQuery = (0, import_react77.useMemo)(() => bindQuery(query, flatVariables), [query, flatVariables]);
+  const value = (0, import_react77.useMemo)(
+    () => ({
+      boundQuery,
+      onSetQuery,
+      query: querySearchDeferred,
+      onSelectItem,
+      selectedListItems: selectedItems != null ? selectedItems : [],
+      onRemoveAllSelectedItems,
+      list,
+      selectedItemsLoading,
+      searchResultItemsLoading,
+      searchResultListLoading,
+      isMulti,
+      localeOptions,
+      enableFilterByLocale,
+      dynamicEntryId
+    }),
+    [
+      boundQuery,
+      onSetQuery,
+      querySearchDeferred,
+      onSelectItem,
+      selectedItems,
+      selectedItemsLoading,
+      searchResultItemsLoading,
+      onRemoveAllSelectedItems,
+      searchResultListLoading,
+      list,
+      isMulti,
+      localeOptions,
+      enableFilterByLocale,
+      dynamicEntryId
+    ]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ObjectSearchContext.Provider, { value, children });
+};
+
+// src/components/ParamTypeDynamicDataProvider.tsx
+var import_react78 = require("react");
+var import_jsx_runtime69 = require("@emotion/react/jsx-runtime");
 function ParamTypeDynamicDataProvider(props) {
   const { children } = props;
   const {
@@ -7240,11 +7423,11 @@ function ParamTypeDynamicDataProvider(props) {
   } = useMeshLocation("paramType");
   const dynamicInputsAsVariables = useDynamicInputsAsVariables(dynamicInputs);
   const connectedDataAsVariables = useConnectedDataAsVariables(connectedData);
-  const variables = (0, import_react74.useMemo)(
+  const variables = (0, import_react78.useMemo)(
     () => ({ ...connectedDataAsVariables, ...dynamicInputsAsVariables }),
     [dynamicInputsAsVariables, connectedDataAsVariables]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(VariablesProvider, { value: variables, onChange: () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(VariablesProvider, { value: variables, onChange: () => {
   }, editVariableComponent: JsonMeshVariableEditor, children });
 }
 var JsonMeshVariableEditor = ({
@@ -7253,9 +7436,9 @@ var JsonMeshVariableEditor = ({
   variable,
   context
 }) => {
-  const sillyRef = (0, import_react74.useRef)(false);
+  const sillyRef = (0, import_react78.useRef)(false);
   const { editConnectedData } = useMeshLocation("paramType");
-  (0, import_react74.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     if (sillyRef.current) {
       return;
     }
@@ -7283,36 +7466,6 @@ var JsonMeshVariableEditor = ({
   return null;
 };
 
-// src/utils/createLocationValidator.ts
-function createLocationValidator(setValue, validate) {
-  return (dispatch) => setValue((previous) => {
-    const { newValue, options } = dispatch(previous);
-    return { newValue, options: validate(newValue, options) };
-  });
-}
-
-// src/utils/useContentDataResourceLocaleInfo.ts
-var import_canvas10 = require("@uniformdev/canvas");
-var import_react75 = require("react");
-function useContentDataResourceLocaleInfo({
-  locale,
-  setLocale,
-  dynamicInputs
-}) {
-  var _a;
-  const setLocaleRef = (0, import_react75.useRef)(setLocale);
-  setLocaleRef.current = setLocale;
-  const { flatVariables } = useVariables();
-  const effectiveLocale = locale != null ? locale : dynamicInputs[import_canvas10.LOCALE_DYNAMIC_INPUT_NAME] ? (0, import_canvas10.createVariableReference)(import_canvas10.LOCALE_DYNAMIC_INPUT_NAME) : "";
-  const boundLocale = (_a = (0, import_canvas10.bindVariables)({ variables: flatVariables, value: effectiveLocale }).result) != null ? _a : effectiveLocale;
-  (0, import_react75.useEffect)(() => {
-    if (locale === void 0 && effectiveLocale && setLocaleRef.current) {
-      setLocaleRef.current((0, import_canvas10.createVariableReference)(import_canvas10.LOCALE_DYNAMIC_INPUT_NAME));
-    }
-  }, [locale, effectiveLocale]);
-  return { effectiveLocale, boundLocale: boundLocale ? boundLocale : void 0 };
-}
-
 // src/index.ts
 var import_design_system41 = require("@uniformdev/design-system");
 __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
@@ -7323,11 +7476,13 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   AddListButton,
   Button,
   Callout,
+  ControlledObjectSearchProvider,
   ControlledValuePlugin,
   DISCONNECT_VARIABLE_COMMAND,
   DamSelectedItem,
   DataRefreshButton,
   DataResourceDynamicInputProvider,
+  DataResourceInputContext,
   DataResourceVariablesList,
   DataResourceVariablesListExplicit,
   DataSourceEditor,
@@ -7355,6 +7510,7 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   MeshApp,
   OPEN_INSERT_VARIABLE_COMMAND,
   ObjectSearchContainer,
+  ObjectSearchContext,
   ObjectSearchFilter,
   ObjectSearchFilterContainer,
   ObjectSearchListItem,
@@ -7412,6 +7568,7 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   VariablesPlugin,
   VariablesProvider,
   badgeIcon,
+  bindQuery,
   convertConnectedDataToVariable,
   createLocationValidator,
   damSelectItemImage,
@@ -7483,6 +7640,7 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   urlEncodeRequestUrl,
   useConnectedDataAsVariables,
   useContentDataResourceLocaleInfo,
+  useDataResourceDynamicInputs,
   useDynamicInputsAsVariables,
   useMeshLocation,
   useObjectSearchContext,