@uniformdev/mesh-sdk-react 19.135.0 → 19.135.1-alpha.9

package/dist/index.js

@@ -33,67 +33,87 @@ var src_exports = {};
 __export(src_exports, {
   $createVariableNode: () => $createVariableNode,
   $isVariableNode: () => $isVariableNode,
-  AddListButton: () => import_design_system41.AddListButton,
-  Button: () => import_design_system41.Button,
-  Callout: () => import_design_system41.Callout,
+  AddListButton: () => import_design_system54.AddListButton,
+  Button: () => import_design_system54.Button,
+  CHECKBOX_OPERATORS: () => CHECKBOX_OPERATORS,
+  Callout: () => import_design_system54.Callout,
+  ControlledObjectSearchProvider: () => ControlledObjectSearchProvider,
   ControlledValuePlugin: () => ControlledValuePlugin,
+  DATE_OPERATORS: () => DATE_OPERATORS,
   DISCONNECT_VARIABLE_COMMAND: () => DISCONNECT_VARIABLE_COMMAND,
   DamSelectedItem: () => DamSelectedItem,
   DataRefreshButton: () => DataRefreshButton,
   DataResourceDynamicInputProvider: () => DataResourceDynamicInputProvider,
+  DataResourceInputContext: () => DataResourceInputContext,
   DataResourceVariablesList: () => DataResourceVariablesList,
   DataResourceVariablesListExplicit: () => DataResourceVariablesListExplicit,
   DataSourceEditor: () => DataSourceEditor,
   DataTypeEditor: () => DataTypeEditor,
+  DateEditor: () => DateEditor,
+  DateRangeEditor: () => DateRangeEditor,
   DefaultSearchRow: () => DefaultSearchRow,
   DefaultSelectedItem: () => DefaultSelectedItem,
-  DrawerContent: () => import_design_system41.DrawerContent,
+  DrawerContent: () => import_design_system54.DrawerContent,
   EDIT_VARIABLE_COMMAND: () => EDIT_VARIABLE_COMMAND,
   EntrySearch: () => EntrySearch,
-  Heading: () => import_design_system41.Heading,
+  FilterButton: () => FilterButton2,
+  FilterControls: () => FilterControls,
+  FilterEditorRenderer: () => FilterEditorRenderer,
+  FilterItem: () => FilterItem,
+  FilterItems: () => FilterItems,
+  FilterMenu: () => FilterMenu,
+  FilterMultiChoiceEditor: () => FilterMultiChoiceEditor,
+  FilterSingleChoiceEditor: () => FilterSingleChoiceEditor,
+  Heading: () => import_design_system54.Heading,
   INSERT_VARIABLE_COMMAND: () => INSERT_VARIABLE_COMMAND,
   Icons: () => icons_exports,
-  Input: () => import_design_system41.Input,
-  InputComboBox: () => import_design_system41.InputComboBox,
-  InputKeywordSearch: () => import_design_system41.InputKeywordSearch,
-  InputSelect: () => import_design_system41.InputSelect,
-  InputToggle: () => import_design_system41.InputToggle,
+  Input: () => import_design_system54.Input,
+  InputComboBox: () => import_design_system54.InputComboBox,
+  InputKeywordSearch: () => import_design_system54.InputKeywordSearch,
+  InputSelect: () => import_design_system54.InputSelect,
+  InputToggle: () => import_design_system54.InputToggle,
   InputVariables: () => InputVariables,
-  Label: () => import_design_system41.Label,
+  Label: () => import_design_system54.Label,
   LinkButton: () => LinkButton,
-  LoadingIndicator: () => import_design_system41.LoadingIndicator,
-  LoadingOverlay: () => import_design_system41.LoadingOverlay,
-  Menu: () => import_design_system41.Menu,
-  MenuItem: () => import_design_system41.MenuItem,
+  LoadingIndicator: () => import_design_system54.LoadingIndicator,
+  LoadingOverlay: () => import_design_system54.LoadingOverlay,
+  Menu: () => import_design_system54.Menu,
+  MenuItem: () => import_design_system54.MenuItem,
   MeshApp: () => MeshApp,
+  NUMBER_OPERATORS: () => NUMBER_OPERATORS,
+  NumberEditor: () => NumberEditor,
+  NumberRangeEditor: () => NumberRangeEditor,
   OPEN_INSERT_VARIABLE_COMMAND: () => OPEN_INSERT_VARIABLE_COMMAND,
   ObjectSearchContainer: () => ObjectSearchContainer,
+  ObjectSearchContext: () => ObjectSearchContext,
   ObjectSearchFilter: () => ObjectSearchFilter,
   ObjectSearchFilterContainer: () => ObjectSearchFilterContainer2,
   ObjectSearchListItem: () => ObjectSearchListItem,
   ObjectSearchListItemLoadingSkeleton: () => ObjectSearchListItemLoadingSkeleton,
+  ObjectSearchListOfSearchResults: () => ObjectSearchListOfSearchResults,
   ObjectSearchProvider: () => ObjectSearchProvider,
   ObjectSearchResultItem: () => ObjectSearchResultItem,
   ObjectSearchResultItemButton: () => ObjectSearchResultItemButton,
   ObjectSearchResultList: () => ObjectSearchResultList,
+  PUBLISH_STATUS_FIELD_OPERATORS: () => PUBLISH_STATUS_FIELD_OPERATORS,
   ParamTypeDynamicDataProvider: () => ParamTypeDynamicDataProvider,
   ParameterConnectionIndicator: () => ParameterConnectionIndicator,
-  ParameterGroup: () => import_design_system41.ParameterGroup,
-  ParameterImage: () => import_design_system41.ParameterImage,
-  ParameterImageInner: () => import_design_system41.ParameterImageInner,
-  ParameterInput: () => import_design_system41.ParameterInput,
-  ParameterInputInner: () => import_design_system41.ParameterInputInner,
-  ParameterLabel: () => import_design_system41.ParameterLabel,
-  ParameterMenuButton: () => import_design_system41.ParameterMenuButton,
+  ParameterGroup: () => import_design_system54.ParameterGroup,
+  ParameterImage: () => import_design_system54.ParameterImage,
+  ParameterImageInner: () => import_design_system54.ParameterImageInner,
+  ParameterInput: () => import_design_system54.ParameterInput,
+  ParameterInputInner: () => import_design_system54.ParameterInputInner,
+  ParameterLabel: () => import_design_system54.ParameterLabel,
+  ParameterMenuButton: () => import_design_system54.ParameterMenuButton,
   ParameterOrSingleVariable: () => ParameterOrSingleVariable,
-  ParameterSelect: () => import_design_system41.ParameterSelect,
-  ParameterSelectInner: () => import_design_system41.ParameterSelectInner,
-  ParameterShell: () => import_design_system41.ParameterShell,
+  ParameterSelect: () => import_design_system54.ParameterSelect,
+  ParameterSelectInner: () => import_design_system54.ParameterSelectInner,
+  ParameterShell: () => import_design_system54.ParameterShell,
   ParameterShellContext: () => import_design_system14.ParameterShellContext,
-  ParameterTextarea: () => import_design_system41.ParameterTextarea,
-  ParameterTextareaInner: () => import_design_system41.ParameterTextareaInner,
-  ParameterToggle: () => import_design_system41.ParameterToggle,
-  ParameterToggleInner: () => import_design_system41.ParameterToggleInner,
+  ParameterTextarea: () => import_design_system54.ParameterTextarea,
+  ParameterTextareaInner: () => import_design_system54.ParameterTextareaInner,
+  ParameterToggle: () => import_design_system54.ParameterToggle,
+  ParameterToggleInner: () => import_design_system54.ParameterToggleInner,
   ParameterVariables: () => ParameterVariables,
   ProductPreviewList: () => ProductPreviewList,
   ProductQuery: () => ProductQuery,
@@ -103,6 +123,7 @@ __export(src_exports, {
   ProductSearchRow: () => ProductSearchRow,
   ProductSelectedItem: () => ProductSelectedItem,
   QueryFilter: () => QueryFilter,
+  RICHTEXT_OPERATORS: () => RICHTEXT_OPERATORS,
   RequestBody: () => RequestBody,
   RequestHeaders: () => RequestHeaders,
   RequestMethodSelect: () => RequestMethodSelect,
@@ -112,19 +133,37 @@ __export(src_exports, {
   RequestUrl: () => RequestUrl,
   RequestUrlInput: () => RequestUrlInput,
   ResolvableLoadingValue: () => ResolvableLoadingValue,
-  ScrollableList: () => import_design_system41.ScrollableList,
-  ScrollableListItem: () => import_design_system41.ScrollableListItem,
+  SELECT_OPERATORS: () => SELECT_OPERATORS,
+  SYSTEM_DATE_OPERATORS: () => SYSTEM_DATE_OPERATORS,
+  SYSTEM_FIELD_OPERATORS: () => SYSTEM_FIELD_OPERATORS,
+  ScrollableList: () => import_design_system54.ScrollableList,
+  ScrollableListItem: () => import_design_system54.ScrollableListItem,
+  SearchAndFilter: () => SearchAndFilter,
+  SearchAndFilterContext: () => SearchAndFilterContext,
+  SearchAndFilterOptionsContainer: () => SearchAndFilterOptionsContainer2,
+  SearchAndFilterProvider: () => SearchAndFilterProvider,
+  SearchAndFilterResultContainer: () => SearchAndFilterResultContainer,
+  SearchOnlyContext: () => SearchOnlyContext,
+  SearchOnlyFilter: () => SearchOnlyFilter,
   SelectionField: () => SelectionField,
-  Switch: () => import_design_system41.Switch,
+  SortItems: () => SortItems,
+  StatusMultiEditor: () => StatusMultiEditor,
+  StatusSingleEditor: () => StatusSingleEditor,
+  Switch: () => import_design_system54.Switch,
+  TEXTBOX_OPERATORS: () => TEXTBOX_OPERATORS,
+  TextEditor: () => TextEditor,
   TextVariableRenderer: () => TextVariableRenderer,
-  Textarea: () => import_design_system41.Textarea,
-  Theme: () => import_design_system41.Theme,
+  Textarea: () => import_design_system54.Textarea,
+  Theme: () => import_design_system54.Theme,
+  USER_OPERATORS: () => USER_OPERATORS,
   VariableEditor: () => VariableEditor,
   VariableNode: () => VariableNode,
   VariablesList: () => VariablesList,
   VariablesPlugin: () => VariablesPlugin,
   VariablesProvider: () => VariablesProvider,
   badgeIcon: () => badgeIcon,
+  bindQuery: () => bindQuery,
+  bindableFiltersMapper: () => bindableFiltersMapper,
   convertConnectedDataToVariable: () => convertConnectedDataToVariable,
   createLocationValidator: () => createLocationValidator,
   damSelectItemImage: () => damSelectItemImage,
@@ -155,6 +194,7 @@ __export(src_exports, {
   entrySearchSelectInput: () => entrySearchSelectInput,
   entrySearchSelectOption: () => entrySearchSelectOption,
   entrySearchWrapper: () => entrySearchWrapper,
+  filterMapper: () => filterMapper,
   hasReferencedVariables: () => hasReferencedVariables,
   prettifyBindExpression: () => prettifyBindExpression,
   productSearchRowActiveIcon: () => productSearchRowActiveIcon,
@@ -196,6 +236,7 @@ __export(src_exports, {
   urlEncodeRequestUrl: () => urlEncodeRequestUrl,
   useConnectedDataAsVariables: () => useConnectedDataAsVariables,
   useContentDataResourceLocaleInfo: () => useContentDataResourceLocaleInfo,
+  useDataResourceDynamicInputs: () => useDataResourceDynamicInputs,
   useDynamicInputsAsVariables: () => useDynamicInputsAsVariables,
   useMeshLocation: () => useMeshLocation,
   useObjectSearchContext: () => useObjectSearchContext,
@@ -205,10 +246,12 @@ __export(src_exports, {
   useRequest: () => useRequest,
   useRequestHeader: () => useRequestHeader,
   useRequestParameter: () => useRequestParameter,
+  useSearchAndFilter: () => useSearchAndFilter,
   useUniformMeshSdk: () => useUniformMeshSdk,
   useVariableEditor: () => useVariableEditor,
   useVariables: () => useVariables,
   useVariablesMenu: () => useVariablesMenu,
+  utilityColors: () => import_design_system54.utilityColors,
   variableDefaultTextValue: () => variableDefaultTextValue,
   variablePrefix: () => variablePrefix,
   variableSuffix: () => variableSuffix,
@@ -2855,6 +2898,9 @@ function DefaultDamItemRenderer({ item }) {
   ] }) : null;
 }
 
+// src/components/DataResourceDynamicInputProvider.tsx
+var import_react59 = require("react");
+
 // src/hooks/useConnectedDataAsVariables.tsx
 var import_react26 = require("react");
 function useConnectedDataAsVariables(connectedData) {
@@ -3138,7 +3184,8 @@ var import_react40 = require("react");
 
 // src/components/Variables/util/prettifyBindExpression.tsx
 function prettifyBindExpression(bindExpression) {
-  return bindExpression.substring(bindExpression.lastIndexOf(":") + 1);
+  const [, expression] = bindExpression.split(":");
+  return expression;
 }
 
 // src/components/Variables/composer/VariableChip.tsx
@@ -3158,42 +3205,58 @@ function VariableChip({
 }) {
   const hasClickEvent = !!onClick;
   const referenceIsValidFr = isFresh ? true : referenceIsValid;
-  const Wrapper = referenceIsValidFr === "info" ? InfoVariableReference : referenceIsValidFr ? import_react32.Fragment : UndefinedVariableReference;
+  const Wrapper = referenceIsValidFr === "warning" ? WarningVariableReference : referenceIsValidFr === "info" ? InfoVariableReference : referenceIsValidFr ? import_react32.Fragment : UndefinedVariableReference;
   const extraTitle = !referenceIsValidFr ? `${reference} is not defined.` : hasClickEvent && clickToEdit ? "Click to edit" : void 0;
+  const chippy = /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_design_system15.MultilineChip, { onClick, "aria-selected": selected ? true : void 0, "aria-disabled": disabled, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Wrapper, { children: displayName || reference }) });
+  if (tooltip) {
+    const tip = tooltip ? `${tooltip}${extraTitle ? `
+
+${extraTitle}` : ""}` : extraTitle != null ? extraTitle : "";
+    const tipLines = tip.split("\n");
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      import_design_system15.Tooltip,
+      {
+        title: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_design_system15.VerticalRhythm, { gap: "sm", children: tipLines.map((t, index) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: t }, index)) }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: chippy })
+      }
+    );
+  }
+  return chippy;
+}
+function UndefinedVariableReference({ children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-    import_design_system15.MultilineChip,
+    "span",
     {
-      title: tooltip ? `${tooltip}${extraTitle ? `
-
-${extraTitle}` : ""}` : extraTitle,
-      onClick,
-      "aria-selected": selected ? true : void 0,
-      "aria-disabled": disabled,
-      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Wrapper, { children: displayName || reference })
+      style: {
+        textDecoration: "underline",
+        textDecorationStyle: "wavy",
+        textDecorationColor: "var(--error)"
+      },
+      children
     }
   );
 }
-function UndefinedVariableReference({ children }) {
+function InfoVariableReference({ children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "span",
     {
       style: {
         textDecoration: "underline",
         textDecorationStyle: "wavy",
-        textDecorationColor: "red"
+        textDecorationColor: "var(--primary-action-default)"
       },
       children
     }
   );
 }
-function InfoVariableReference({ children }) {
+function WarningVariableReference({ children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "span",
     {
       style: {
         textDecoration: "underline",
         textDecorationStyle: "wavy",
-        textDecorationColor: "blue"
+        textDecorationColor: "var(--alert)"
       },
       children
     }
@@ -3441,7 +3504,8 @@ function VariablesProvider({
   readOnly,
   isLoading,
   children,
-  knownUndefinedValues = {}
+  knownUndefinedValues = {},
+  onChangeKnownUndefinedValue
 }) {
   const [editing, setEditing] = (0, import_react37.useState)();
   const [editingContext, setEditingContext] = (0, import_react37.useState)();
@@ -3508,6 +3572,15 @@ function VariablesProvider({
       isLoading: !!isLoading
     };
   }, [valueBasedContextValue, editVariableTxn, editing, events, knownUndefinedValues, isLoading]);
+  (0, import_react37.useEffect)(() => {
+    if (editing === void 0) {
+      return;
+    }
+    const activeElement = document.activeElement;
+    if (activeElement && "blur" in activeElement && typeof activeElement.blur === "function") {
+      activeElement.blur();
+    }
+  }, [editing]);
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(VariablesContext.Provider, { value: contextValue, children: [
     children,
     typeof editing !== "undefined" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
@@ -3516,9 +3589,19 @@ function VariablesProvider({
         context: editingContext,
         onSubmit: (val, editorCompletedContext) => {
           contextValue.dispatch({ type: "cancelEdit" });
-          const { name, ...varValue } = val;
-          const latestValue = { ...value, [name]: varValue };
-          onChange == null ? void 0 : onChange(latestValue);
+          if ("resultType" in val) {
+            if (!onChangeKnownUndefinedValue) {
+              throw new Error(
+                "onChangeKnownUndefinedValue must be provided to handle known-undefined-value results"
+              );
+            }
+            const { name, ...kuv } = val;
+            onChangeKnownUndefinedValue(val.name, kuv);
+          } else {
+            const { name, ...varValue } = val;
+            const latestValue = { ...value, [name]: varValue };
+            onChange == null ? void 0 : onChange(latestValue);
+          }
           events.emit("editCompleted", {
             canceled: false,
             selectedVariable: val,
@@ -3933,21 +4016,21 @@ function VariablesPlugin({
   ]);
   const updateExistingNodeIfChanged = (0, import_react39.useCallback)(
     (variableNode) => {
-      var _a, _b, _c;
+      var _a, _b, _c, _d;
       const targetVar = variablesRef.current.variables[variableNode.reference];
       const targetUndefinedVar = variablesRef.current.knownUndefinedValues[variableNode.reference];
       const isLoadingVariables = variablesRef.current.isLoading;
       const currentState = variableNode.getState();
-      if (currentState.isFresh && !targetVar) {
+      if (currentState.isFresh && !targetVar && !targetUndefinedVar) {
         return;
       }
-      const tooltip = (_c = (_b = (_a = targetVar == null ? void 0 : targetVar.tooltip) != null ? _a : targetVar == null ? void 0 : targetVar.helpText) != null ? _b : targetUndefinedVar == null ? void 0 : targetUndefinedVar.error) != null ? _c : targetUndefinedVar == null ? void 0 : targetUndefinedVar.info;
+      const tooltip = (_d = (_c = (_b = (_a = targetVar == null ? void 0 : targetVar.tooltip) != null ? _a : targetVar == null ? void 0 : targetVar.helpText) != null ? _b : targetUndefinedVar == null ? void 0 : targetUndefinedVar.error) != null ? _c : targetUndefinedVar == null ? void 0 : targetUndefinedVar.warning) != null ? _d : targetUndefinedVar == null ? void 0 : targetUndefinedVar.info;
       const newState = {
         ...currentState,
         displayName: (targetVar == null ? void 0 : targetVar.displayName) || (targetUndefinedVar == null ? void 0 : targetUndefinedVar.displayName) || variableNode.reference,
         isLoading: isLoadingVariables && !targetVar && !(targetUndefinedVar == null ? void 0 : targetUndefinedVar.info),
         hasClickEvent: canEditVariable(variableNode.reference, targetVar),
-        referenceIsValid: (targetUndefinedVar == null ? void 0 : targetUndefinedVar.info) ? "info" : isLoadingVariables ? true : Boolean(targetVar),
+        referenceIsValid: (targetUndefinedVar == null ? void 0 : targetUndefinedVar.error) ? false : (targetUndefinedVar == null ? void 0 : targetUndefinedVar.warning) ? "warning" : (targetUndefinedVar == null ? void 0 : targetUndefinedVar.info) ? "info" : isLoadingVariables ? true : Boolean(targetVar),
         tooltip,
         isFresh: false
       };
@@ -3963,7 +4046,7 @@ function VariablesPlugin({
         updateExistingNodeIfChanged(variableNode);
       });
     });
-  }, [editor, variables, canEditVariable, updateExistingNodeIfChanged]);
+  }, [editor, variables, knownUndefinedValues, canEditVariable, updateExistingNodeIfChanged]);
   (0, import_react39.useEffect)(() => {
     return editor.registerNodeTransform(VariableNode, (variableNode) => {
       updateExistingNodeIfChanged(variableNode);
@@ -4231,8 +4314,9 @@ function $isTargetWithinDecorator(target) {
 }
 
 // src/components/Variables/InputVariables.tsx
-var import_design_system20 = require("@uniformdev/design-system");
-var import_react50 = require("react");
+var import_react51 = require("@emotion/react");
+var import_design_system21 = require("@uniformdev/design-system");
+var import_react52 = require("react");
 var import_uuid2 = require("uuid");
 
 // src/components/Variables/composer/EditorRefPlugin.tsx
@@ -4337,6 +4421,7 @@ var input = import_react42.css`
 var inputCompact = import_react42.css`
   border: 1px solid var(--white);
   padding-block: var(--spacing-sm);
+  min-height: 39px;
   font-size: var(--fs-sm);
 `;
 var inputDisabled = import_react42.css`
@@ -4346,19 +4431,112 @@ var inputDisabled = import_react42.css`
 var placeholderCaption = import_react42.css`
   position: absolute;
   color: var(--gray-400);
-  inset: var(--spacing-base) var(--spacing-lg) var(--spacing-base) var(--spacing-base);
+  inset: 12px var(--spacing-base) 12px var(--spacing-sm);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   pointer-events: none;
 `;
 var placeholderCompact = import_react42.css`
-  inset: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-base);
+  inset: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-sm);
+`;
+
+// src/components/Variables/styles/ParameterVariables.styles.ts
+var import_react43 = require("@emotion/react");
+var import_design_system19 = require("@uniformdev/design-system");
+var variableBindButton = import_react43.css`
+  align-items: center;
+  border: none;
+  border-radius: var(--rounded-base);
+  background: none;
+  display: flex;
+  height: 1.2rem;
+  padding: var(--spacing-2xs);
+  transition: background var(--duration-fast) var(--timing-ease-out),
+    color var(--duration-fast) var(--timing-ease-out);
+  width: 1.2rem;
+
+  &:hover,
+  &[aria-pressed='true']:not(:disabled) {
+    background: var(--brand-secondary-3);
+    color: var(--white);
+  }
+
+  &[aria-disabled='true'] {
+    background: none;
+    color: currentColor;
+  }
+
+  // fixes menu resizing issue within iframes
+  // see https://linear.app/uniform/issue/UNI-3068/mesh-integration-resizing-with-menus
+  + [role='menu'] {
+    max-height: unset;
+  }
+`;
+var input2 = import_react43.css`
+  display: block;
+  appearance: none;
+  box-sizing: border-box;
+  background: var(--white);
+  border: 1px solid var(--gray-200);
+  border-radius: var(--rounded-sm);
+  color: var(--gray-700);
+  font-size: var(--fs-sm);
+  line-height: 1.5;
+  min-height: 2rem;
+  padding: var(--spacing-sm);
+  width: 100%;
+  position: relative;
+  white-space: normal;
+  transition-property: background, border-color, color, box-shadow, border-radius;
+  transition-duration: var(--duration-fast);
+  transition-timing-function: var(--timing-ease-out);
+
+  &::placeholder {
+    color: var(--gray-400);
+  }
+
+  &:focus,
+  &:focus-within {
+    border-radius: var(--rounded-sm);
+    box-shadow: var(--elevation-100);
+    border: 1px solid var(--accent-dark-active);
+    outline: none;
+  }
+  &:hover {
+    border: 1px solid var(--accent-dark-hover);
+  }
+
+  &:disabled,
+  &:disabled::placeholder,
+  &:disabled:hover {
+    border-radius: var(--rounded-sm);
+    cursor: not-allowed;
+    color: var(--gray-400);
+  }
+
+  &[readonly],
+  &[contenteditable='false'] {
+    cursor: not-allowed;
+    color: var(--gray-400);
+  }
+
+  > p {
+    margin: 0;
+  }
+`;
+var inputMultiLine = (lines) => import_react43.css`
+  ${import_design_system19.scrollbarStyles}
+  // 1.5 = line height, spacing-sm = top and bottom padding + spacing-xs to give a slight increase in height
+  // as the text looked to close to the bottom of the input
+  height: calc(${lines * 1.5}em + var(--spacing-sm) + var(--spacing-xs));
+  resize: vertical;
+  overflow: auto;
 `;
 
 // src/components/Variables/toolbox/InputVariablesProvider.tsx
 var React10 = __toESM(require("react"));
-var import_react43 = require("react");
+var import_react44 = require("react");
 
 // src/components/Variables/util/hasReferencedVariables.ts
 var import_canvas5 = require("@uniformdev/canvas");
@@ -4403,7 +4581,7 @@ function useInputVariablesState({
   const hadVariablesInValueForReals = inputWhenNoVariables ? hadVariablesInValue : hasVariablesInValue;
   const disableVariablesForReals = disableVariables || Object.keys(variables).length === 0 && !showAddVariableMenuOption;
   const disableResetForReals = !inputWhenNoVariables || !hadVariablesInValueForReals;
-  const sharedMenuProps = (0, import_react43.useMemo)(
+  const sharedMenuProps = (0, import_react44.useMemo)(
     () => ({
       menuTooltip,
       showAddVariableMenuOption,
@@ -4434,15 +4612,15 @@ function useInputVariablesState({
 }
 
 // src/components/Variables/toolbox/VariableField.styles.ts
-var import_react44 = require("@emotion/react");
-var labelText = import_react44.css`
+var import_react45 = require("@emotion/react");
+var labelText = import_react45.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
   margin: 0 0 var(--spacing-xs);
 `;
-var variableBindButton = import_react44.css`
+var variableBindButton2 = import_react45.css`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -4473,8 +4651,8 @@ var import_lexical6 = require("lexical");
 // src/components/Variables/toolbox/SelectVariableMenu.tsx
 var import_BsFillPlusCircleFill = require("@react-icons/all-files/bs/BsFillPlusCircleFill");
 var import_CgUsbC = require("@react-icons/all-files/cg/CgUsbC");
-var import_design_system19 = require("@uniformdev/design-system");
-var import_react45 = require("react");
+var import_design_system20 = require("@uniformdev/design-system");
+var import_react46 = require("react");
 var import_jsx_runtime35 = require("@emotion/react/jsx-runtime");
 function SelectVariableMenu({
   onSelectVariable,
@@ -4489,7 +4667,7 @@ function SelectVariableMenu({
   filterVariable
 }) {
   const { variables, canDispatch, readOnly } = useVariables(true);
-  const btnRef = (0, import_react45.useRef)(null);
+  const btnRef = (0, import_react46.useRef)(null);
   const { editVariable } = useVariableEditor();
   const variablesGroups = variablesToGroupedList(variables, filterVariable, getEditorContext == null ? void 0 : getEditorContext());
   const showAddVariableMenuOptionForReals = showAddVariableMenuOption && canDispatch && !readOnly;
@@ -4498,7 +4676,7 @@ function SelectVariableMenu({
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-    import_design_system19.Menu,
+    import_design_system20.Menu,
     {
       placement: portal ? "bottom-end" : "bottom-start",
       portal,
@@ -4517,7 +4695,7 @@ function SelectVariableMenu({
       menuLabel: menuTooltip,
       children: [
         showAddVariableMenuOptionForReals ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-          import_design_system19.MenuItem,
+          import_design_system20.MenuItem,
           {
             onClick: async () => {
               const result = await editVariable("", getEditorContext == null ? void 0 : getEditorContext());
@@ -4527,19 +4705,19 @@ function SelectVariableMenu({
               onSelectVariable == null ? void 0 : onSelectVariable(result.selectedVariable);
             },
             "data-testid": "add-variable-button",
-            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_design_system19.HorizontalRhythm, { gap: "sm", align: "center", children: [
+            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_design_system20.HorizontalRhythm, { gap: "sm", align: "center", children: [
               /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_BsFillPlusCircleFill.BsFillPlusCircleFill, { fill: "var(--gray-500)", size: "1.25em" }),
               /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: typeof showAddVariableMenuOption === "string" ? showAddVariableMenuOption : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: "Add\u2026" }) })
             ] })
           }
         ) : null,
-        showAddVariableMenuOptionForReals && menuHasVariableOptions ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_design_system19.MenuItemSeparator, {}) : null,
+        showAddVariableMenuOptionForReals && menuHasVariableOptions ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_design_system20.MenuItemSeparator, {}) : null,
         variablesGroups.map((group) => {
           var _a;
-          return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_design_system19.MenuGroup, { title: (_a = group.name) != null ? _a : "", children: group.variables.map((variable) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_design_system20.MenuGroup, { title: (_a = group.name) != null ? _a : "", children: group.variables.map((variable) => {
             const { name, displayName, helpText } = variable;
             return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-              import_design_system19.MenuItem,
+              import_design_system20.MenuItem,
               {
                 id: name,
                 css: menuItemTextGroup,
@@ -4553,9 +4731,9 @@ function SelectVariableMenu({
             );
           }) }, group.name);
         }),
-        menuHasVariableOptions && onResetVariables ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_design_system19.MenuItemSeparator, {}) : null,
-        onResetVariables ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_design_system19.MenuItem, { onClick: onResetVariables, css: { color: "var(--brand-secondary-5)" }, children: "Reset" }) : null,
-        tip && (menuHasVariableOptions || onResetVariables) ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_design_system19.MenuItemSeparator, {}) : null,
+        menuHasVariableOptions && onResetVariables ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_design_system20.MenuItemSeparator, {}) : null,
+        onResetVariables ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_design_system20.MenuItem, { onClick: onResetVariables, css: { color: "var(--brand-secondary-5)" }, children: "Reset" }) : null,
+        tip && (menuHasVariableOptions || onResetVariables) ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_design_system20.MenuItemSeparator, {}) : null,
         tip ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("i", { css: variablesTipText, children: tip }) : null
       ]
     }
@@ -4601,14 +4779,14 @@ function VariableField({
 }) {
   const { variables } = useVariables(true);
   const varCount = Object.keys(variables).length;
-  const variableSelector = (varCount > 0 || (selectVariableMenuOptions == null ? void 0 : selectVariableMenuOptions.showAddVariableMenuOption)) && !disableVariables ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  const variableSelector = (varCount > 0 || (selectVariableMenuOptions == null ? void 0 : selectVariableMenuOptions.showAddVariableMenuOption)) && !disableVariables ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { "data-testid": "label-var-menu", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     VariablesComposerVariableMenu,
     {
       ...selectVariableMenuOptions,
-      buttonCss: [variableBindButton, selectVariableMenuOptions == null ? void 0 : selectVariableMenuOptions.buttonCss],
+      buttonCss: [variableBindButton2, selectVariableMenuOptions == null ? void 0 : selectVariableMenuOptions.buttonCss],
       buttonProps: isActive ? { "aria-pressed": "true" } : void 0
     }
-  ) : null;
+  ) }) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { "data-testid": "variable-field", children: [
     /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("label", { htmlFor: id, css: labelText, "data-testid": "field-name", children: [
       variableSelector,
@@ -4623,14 +4801,14 @@ var import_LexicalAutoFocusPlugin = require("@lexical/react/LexicalAutoFocusPlug
 var import_LexicalClearEditorPlugin = require("@lexical/react/LexicalClearEditorPlugin");
 var import_LexicalComposer = require("@lexical/react/LexicalComposer");
 var import_LexicalOnChangePlugin = require("@lexical/react/LexicalOnChangePlugin");
-var import_react48 = require("react");
+var import_react49 = require("react");
 
 // src/components/Variables/composer/DisablePlugin.tsx
 var import_LexicalComposerContext7 = require("@lexical/react/LexicalComposerContext");
-var import_react46 = require("react");
+var import_react47 = require("react");
 function DisablePlugin({ disabled }) {
   const [editor] = (0, import_LexicalComposerContext7.useLexicalComposerContext)();
-  (0, import_react46.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     editor.setEditable(!disabled);
   }, [editor, disabled]);
   return null;
@@ -4639,10 +4817,10 @@ function DisablePlugin({ disabled }) {
 // src/components/Variables/composer/SingleLineTextPlugin.tsx
 var import_LexicalComposerContext8 = require("@lexical/react/LexicalComposerContext");
 var import_lexical7 = require("lexical");
-var import_react47 = require("react");
+var import_react48 = require("react");
 function SingleLineTextPlugin() {
   const [editor] = (0, import_LexicalComposerContext8.useLexicalComposerContext)();
-  (0, import_react47.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     editor.registerNodeTransform(import_lexical7.LineBreakNode, (node) => {
       node.remove();
     });
@@ -4695,8 +4873,8 @@ function VariablesComposer(props) {
     autoFocus,
     ...variablesPluginProps
   } = props;
-  const [lastEmittedValue, setLastEmittedValue] = (0, import_react48.useState)(value);
-  const editorConfig = (0, import_react48.useMemo)(
+  const [lastEmittedValue, setLastEmittedValue] = (0, import_react49.useState)(value);
+  const editorConfig = (0, import_react49.useMemo)(
     () => ({
       namespace: "uniform",
       onError(error) {
@@ -4708,8 +4886,8 @@ function VariablesComposer(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const editorState = (0, import_react48.useRef)();
-  const updateTimeout = (0, import_react48.useRef)();
+  const editorState = (0, import_react49.useRef)();
+  const updateTimeout = (0, import_react49.useRef)();
   if (typeof document === "undefined")
     return null;
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_LexicalComposer.LexicalComposer, { initialConfig: editorConfig, children: [
@@ -4752,10 +4930,10 @@ var import_LexicalHistoryPlugin = require("@lexical/react/LexicalHistoryPlugin")
 var import_LexicalPlainTextPlugin = require("@lexical/react/LexicalPlainTextPlugin");
 var import_utils4 = require("@lexical/utils");
 var import_lexical9 = require("lexical");
-var import_react49 = require("react");
+var import_react50 = require("react");
 var import_jsx_runtime39 = require("@emotion/react/jsx-runtime");
 function VariablesComposerInput({
-  css: css37,
+  css: css40,
   placeholder,
   ...contentEditableProps
 }) {
@@ -4774,7 +4952,7 @@ function VariablesComposerInput({
 }
 function RichishCopyAndPastePlugin() {
   const [editor] = (0, import_LexicalComposerContext9.useLexicalComposerContext)();
-  (0, import_react49.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     return (0, import_utils4.mergeRegister)(
       editor.registerCommand(
         import_lexical9.COPY_COMMAND,
@@ -4858,6 +5036,7 @@ function InputVariables(props) {
     value,
     enableEditingVariables,
     disableInlineMenu,
+    showMenuPosition,
     onChange,
     transformPaste,
     showAddVariableMenuOption,
@@ -4875,9 +5054,10 @@ function InputVariables(props) {
     editorRef,
     filterVariable,
     styleVariant = "default",
-    renderMenuInPortal
+    renderMenuInPortal,
+    disableDismissEditorOnChange
   } = props;
-  const [finalId] = (0, import_react50.useState)(id != null ? id : () => (0, import_uuid2.v4)());
+  const [finalId] = (0, import_react52.useState)(id != null ? id : () => (0, import_uuid2.v4)());
   const { dispatch, canDispatch, isEditing } = useVariables(true);
   const { disableVariablesForReals, hadVariablesInValue, sharedMenuProps } = useInputVariablesState(props);
   const useInputWithNoVariables = Boolean(inputWhenNoVariables && !hadVariablesInValue);
@@ -4885,46 +5065,71 @@ function InputVariables(props) {
     "div",
     {
       onKeyDown: () => {
-        if (isEditing && canDispatch) {
+        if (!disableDismissEditorOnChange && isEditing && canDispatch) {
           dispatch({ type: "cancelEdit" });
         }
       },
       css: disabled ? inputDisabled : "",
       children: [
-        useInputWithNoVariables ? inputWhenNoVariables : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-          InputVariablesOverlayMenu,
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+          import_design_system21.HorizontalRhythm,
           {
-            ...sharedMenuProps,
-            disabled: disableVariablesForReals || disableInlineMenu === true || disableInlineMenu === "by-input",
-            portal: renderMenuInPortal,
-            replaceValueOnVariableInsert: useInputWithNoVariables,
-            useInputWhenNoVariables: useInputWithNoVariables,
-            children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-              VariablesComposerInput,
-              {
-                id: finalId,
-                "aria-label": ariaLabel,
-                "data-testid": dataTestId ? dataTestId : "input-container",
-                "data-text-value": value,
-                css: [input, styleVariant === "compact" ? inputCompact : null],
-                placeholder: placeholder ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-                  import_design_system20.Caption,
-                  {
-                    css: [
-                      placeholderCaption,
-                      styleVariant === "compact" ? placeholderCompact : null
-                    ],
-                    children: placeholder
-                  }
-                ) : void 0
-              }
-            )
+            align: "center",
+            gap: "xs",
+            css: import_react51.css`
+          position: relative;
+          & > div:first-child {
+            flex-grow: 1;
+          }
+        `,
+            children: [
+              useInputWithNoVariables ? inputWhenNoVariables : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                InputVariablesOverlayMenu,
+                {
+                  ...sharedMenuProps,
+                  disabled: disableVariablesForReals || showMenuPosition && showMenuPosition !== "label" || disableInlineMenu === true || disableInlineMenu === "by-input",
+                  portal: renderMenuInPortal,
+                  replaceValueOnVariableInsert: useInputWithNoVariables,
+                  useInputWhenNoVariables: useInputWithNoVariables,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                    VariablesComposerInput,
+                    {
+                      id: finalId,
+                      "aria-label": ariaLabel,
+                      "data-testid": dataTestId ? dataTestId : "input-container",
+                      "data-text-value": value,
+                      css: [input, styleVariant === "compact" ? inputCompact : null],
+                      placeholder: placeholder ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                        import_design_system21.Caption,
+                        {
+                          css: [
+                            placeholderCaption,
+                            styleVariant === "compact" ? placeholderCompact : null
+                          ],
+                          children: placeholder
+                        }
+                      ) : void 0
+                    }
+                  )
+                }
+              ),
+              disableVariablesForReals || showMenuPosition !== "inline-right" ? null : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                VariablesComposerVariableMenu,
+                {
+                  ...sharedMenuProps,
+                  buttonCss: variableBindButton,
+                  tip: useInputWithNoVariables ? void 0 : "Tip: access this list by typing $$",
+                  buttonProps: hadVariablesInValue ? { "aria-pressed": "true" } : void 0,
+                  replaceValueOnVariableInsert: useInputWithNoVariables
+                }
+              )
+            ]
           }
         ),
-        caption ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system20.Caption, { children: caption }) : null,
-        errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system20.ErrorMessage, { message: errorMessage }) : null,
-        warningMessage ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system20.WarningMessage, { message: warningMessage }) : null,
-        infoMessage ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system20.InfoMessage, { message: infoMessage }) : null
+        caption ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system21.Caption, { children: caption }) : null,
+        errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system21.ErrorMessage, { message: errorMessage }) : null,
+        warningMessage ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system21.WarningMessage, { message: warningMessage }) : null,
+        infoMessage ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system21.InfoMessage, { message: infoMessage }) : null
       ]
     }
   );
@@ -4940,7 +5145,7 @@ function InputVariables(props) {
         },
         id: finalId,
         isActive: hadVariablesInValue,
-        disableVariables: disableVariablesForReals || disableInlineMenu === "by-label",
+        disableVariables: disableVariablesForReals || showMenuPosition && showMenuPosition !== "label" || disableInlineMenu === "by-label",
         children: input3
       }
     );
@@ -4978,7 +5183,7 @@ function InputVariablesOverlayMenu({
   if (disabled) {
     return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_jsx_runtime40.Fragment, { children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { css: menuContainer, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { css: menuContainer, "data-testid": "inline-var-menu", children: [
     children,
     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       VariablesComposerVariableMenu,
@@ -4996,111 +5201,17 @@ function InputVariablesOverlayMenu({
 var import_CgUsbC2 = require("@react-icons/all-files/cg/CgUsbC");
 var import_canvas7 = require("@uniformdev/canvas");
 var import_design_system22 = require("@uniformdev/design-system");
-var import_react52 = require("react");
-
-// src/components/Variables/styles/ParameterVariables.styles.ts
-var import_react51 = require("@emotion/react");
-var import_design_system21 = require("@uniformdev/design-system");
-var variableBindButton2 = import_react51.css`
-  align-items: center;
-  border: none;
-  border-radius: var(--rounded-base);
-  background: none;
-  display: flex;
-  height: 1.2rem;
-  padding: var(--spacing-2xs);
-  transition: background var(--duration-fast) var(--timing-ease-out),
-    color var(--duration-fast) var(--timing-ease-out);
-  width: 1.2rem;
-
-  &:hover,
-  &[aria-pressed='true']:not(:disabled) {
-    background: var(--brand-secondary-3);
-    color: var(--white);
-  }
-
-  &[aria-disabled='true'] {
-    background: none;
-    color: currentColor;
-  }
-
-  // fixes menu resizing issue within iframes
-  // see https://linear.app/uniform/issue/UNI-3068/mesh-integration-resizing-with-menus
-  + [role='menu'] {
-    max-height: unset;
-  }
-`;
-var input2 = import_react51.css`
-  display: block;
-  appearance: none;
-  box-sizing: border-box;
-  background: var(--white);
-  border: 1px solid var(--gray-200);
-  border-radius: var(--rounded-sm);
-  color: var(--gray-700);
-  font-size: var(--fs-sm);
-  line-height: 1.5;
-  min-height: 2rem;
-  padding: var(--spacing-sm);
-  width: 100%;
-  position: relative;
-  white-space: normal;
-  transition-property: background, border-color, color, box-shadow, border-radius;
-  transition-duration: var(--duration-fast);
-  transition-timing-function: var(--timing-ease-out);
-
-  &::placeholder {
-    color: var(--gray-400);
-  }
-
-  &:focus,
-  &:focus-within {
-    border-radius: var(--rounded-sm);
-    box-shadow: var(--elevation-100);
-    border: 1px solid var(--accent-dark-active);
-    outline: none;
-  }
-  &:hover {
-    border: 1px solid var(--accent-dark-hover);
-  }
-
-  &:disabled,
-  &:disabled::placeholder,
-  &:disabled:hover {
-    border-radius: var(--rounded-sm);
-    cursor: not-allowed;
-    color: var(--gray-400);
-  }
-
-  &[readonly],
-  &[contenteditable='false'] {
-    cursor: not-allowed;
-    color: var(--gray-400);
-  }
-
-  > p {
-    margin: 0;
-  }
-`;
-var inputMultiLine = (lines) => import_react51.css`
-  ${import_design_system21.scrollbarStyles}
-  // 1.5 = line height, spacing-sm = top and bottom padding + spacing-xs to give a slight increase in height
-  // as the text looked to close to the bottom of the input
-  height: calc(${lines * 1.5}em + var(--spacing-sm) + var(--spacing-xs));
-  resize: vertical;
-  overflow: auto;
-`;
-
-// src/components/Variables/ParameterConnectionIndicator.tsx
+var import_react53 = require("react");
 var import_jsx_runtime41 = require("@emotion/react/jsx-runtime");
 function ParameterConnectionIndicator({
   children,
   value,
   menuOptions,
   disabled,
-  menuTooltip = "Insert variable"
+  menuTooltip = "Insert variable",
+  overrideMenuButtonParentMargin
 }) {
-  const hasVariablesInValue = (0, import_react52.useMemo)(() => {
+  const hasVariablesInValue = (0, import_react53.useMemo)(() => {
     let result = false;
     (0, import_canvas7.bindVariablesToObject)({
       value,
@@ -5119,13 +5230,21 @@ function ParameterConnectionIndicator({
         placement: "bottom-start",
         withoutPortal: true,
         menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-          "button",
+          "div",
           {
-            title: menuTooltip,
-            "aria-pressed": hasVariablesInValue,
-            css: [menuBtn, variableBindButton2],
-            type: "button",
-            children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_CgUsbC2.CgUsbC, { size: "1.4rem" })
+            css: overrideMenuButtonParentMargin ? {
+              marginBottom: overrideMenuButtonParentMargin
+            } : void 0,
+            children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              "button",
+              {
+                title: menuTooltip,
+                "aria-pressed": hasVariablesInValue,
+                css: [menuBtn, variableBindButton],
+                type: "button",
+                children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_CgUsbC2.CgUsbC, { size: "1.4rem" })
+              }
+            )
           }
         ),
         menuLabel: menuTooltip,
@@ -5137,21 +5256,21 @@ function ParameterConnectionIndicator({
 
 // src/components/Variables/ParameterOrSingleVariable.tsx
 var import_design_system23 = require("@uniformdev/design-system");
-var import_react54 = require("react");
+var import_react55 = require("react");
 
 // src/components/Variables/composer/OnDisconnectPlugin.tsx
 var import_LexicalComposerContext10 = require("@lexical/react/LexicalComposerContext");
 var import_utils5 = require("@lexical/utils");
 var import_lexical10 = require("lexical");
-var import_react53 = require("react");
+var import_react54 = require("react");
 function OnDisconnectPlugin({
   onDisconnect
 }) {
   const [editor] = (0, import_LexicalComposerContext10.useLexicalComposerContext)();
   const { variables } = useVariables(true);
-  const variablesRef = (0, import_react53.useRef)(variables);
+  const variablesRef = (0, import_react54.useRef)(variables);
   variablesRef.current = variables;
-  (0, import_react53.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     return (0, import_utils5.mergeRegister)(
       editor.registerCommand(
         DISCONNECT_VARIABLE_COMMAND,
@@ -5196,7 +5315,7 @@ function ParameterOrSingleVariable(props) {
     hasVariablesInValue,
     setHadVariablesInValue
   } = useInputVariablesState(props);
-  const handleDisconnect = (0, import_react54.useCallback)(
+  const handleDisconnect = (0, import_react55.useCallback)(
     (variable) => {
       setHadVariablesInValue(false);
       if (onDisconnect) {
@@ -5235,7 +5354,7 @@ function ParameterOrSingleVariable(props) {
               VariablesComposerVariableMenu,
               {
                 ...sharedMenuProps,
-                buttonCss: [variableBindButton2],
+                buttonCss: [variableBindButton],
                 buttonProps: hasVariablesInValue ? { "aria-pressed": "true" } : void 0,
                 replaceValueOnVariableInsert: true,
                 filterVariable
@@ -5249,7 +5368,7 @@ function ParameterOrSingleVariable(props) {
 }
 
 // src/components/Variables/ParameterVariables.tsx
-var import_react55 = require("@emotion/react");
+var import_react56 = require("@emotion/react");
 var import_design_system24 = require("@uniformdev/design-system");
 var import_jsx_runtime43 = require("@emotion/react/jsx-runtime");
 function ParameterVariables(props) {
@@ -5288,19 +5407,17 @@ function ParameterVariables(props) {
       children: [
         editorRef ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(EditorRefPlugin, { editorRef }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ControlledValuePlugin, { value, enabled: useInputWhenNoVariables }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
-          import_design_system24.HorizontalRhythm,
-          {
-            align: "center",
-            gap: "xs",
-            css: { width: "100%" },
-            onKeyDown: () => {
-              if (isEditing && canDispatch) {
-                dispatch({ type: "cancelEdit" });
-              }
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { css: { flex: 1 }, children: useInputWhenNoVariables ? inputWhenNoVariables : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_design_system24.HorizontalRhythm, { align: "center", gap: "xs", css: { width: "100%" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            "div",
+            {
+              css: { flex: 1 },
+              onKeyDown: () => {
+                if (isEditing && canDispatch) {
+                  dispatch({ type: "cancelEdit" });
+                }
+              },
+              children: useInputWhenNoVariables ? inputWhenNoVariables : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 VariablesComposerInput,
                 {
                   "aria-label": ariaLabel,
@@ -5308,24 +5425,24 @@ function ParameterVariables(props) {
                   "data-text-value": value,
                   css: [
                     input2,
-                    typeof multiLine === "number" ? inputMultiLine(multiLine) : multiLine === true ? inputMultiLine(2) : import_react55.css``,
-                    inputCss != null ? inputCss : import_react55.css``
+                    typeof multiLine === "number" ? inputMultiLine(multiLine) : multiLine === true ? inputMultiLine(2) : import_react56.css``,
+                    inputCss != null ? inputCss : import_react56.css``
                   ]
                 }
-              ) }),
-              disableVariablesForReals ? null : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-                VariablesComposerVariableMenu,
-                {
-                  ...sharedMenuProps,
-                  buttonCss: [variableBindButton2],
-                  tip: useInputWhenNoVariables ? void 0 : "Tip: access this list by typing $$",
-                  buttonProps: hasVariablesInValue ? { "aria-pressed": "true" } : void 0,
-                  replaceValueOnVariableInsert: useInputWhenNoVariables
-                }
               )
-            ]
-          }
-        )
+            }
+          ),
+          disableVariablesForReals ? null : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            VariablesComposerVariableMenu,
+            {
+              ...sharedMenuProps,
+              buttonCss: [variableBindButton],
+              tip: useInputWhenNoVariables ? void 0 : "Tip: access this list by typing $$",
+              buttonProps: hasVariablesInValue ? { "aria-pressed": "true" } : void 0,
+              replaceValueOnVariableInsert: useInputWhenNoVariables
+            }
+          )
+        ] })
       ]
     }
   );
@@ -5333,7 +5450,7 @@ function ParameterVariables(props) {
 
 // src/components/Variables/util/convertConnectedDataToVariable.ts
 function convertConnectedDataToVariable(bindExpression, value) {
-  const isValuePrimitive = typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+  const isValuePrimitive = typeof value === "string" && value.length > 0 || typeof value === "number" || typeof value === "boolean";
   return {
     ephemeral: true,
     displayName: isValuePrimitive ? value.toString() : prettifyBindExpression(bindExpression),
@@ -5345,13 +5462,13 @@ ${prettifyBindExpression(bindExpression)}`
 }
 
 // src/components/Variables/VariablesList.tsx
-var import_react57 = require("@emotion/react");
+var import_react58 = require("@emotion/react");
 var import_design_system25 = require("@uniformdev/design-system");
 var import_react_beautiful_dnd3 = require("react-beautiful-dnd");
 
 // src/components/Variables/styles/VariablesList.styles.ts
-var import_react56 = require("@emotion/react");
-var tableRow = (isDragging) => import_react56.css`
+var import_react57 = require("@emotion/react");
+var tableRow = (isDragging) => import_react57.css`
   position: relative;
   ${isDragging ? `
   display: table;   
@@ -5359,7 +5476,7 @@ var tableRow = (isDragging) => import_react56.css`
   top: auto !important;
   ` : void 0}
 `;
-var tableCellDragIcon = import_react56.css`
+var tableCellDragIcon = import_react57.css`
   &::after {
     content: '';
     display: block;
@@ -5377,7 +5494,7 @@ var tableCellDragIcon = import_react56.css`
     opacity: 1;
   }
 `;
-var variableName = import_react56.css`
+var variableName = import_react57.css`
   border: none;
   font-weight: var(--fw-medium);
   padding: 0;
@@ -5387,7 +5504,7 @@ var variableName = import_react56.css`
   white-space: nowrap;
   max-width: 20ch;
 `;
-var variableValue = import_react56.css`
+var variableValue = import_react57.css`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -5464,7 +5581,7 @@ function VariablesList() {
                         title: `delete ${text}`,
                         css: [
                           import_design_system25.button,
-                          import_react57.css`
+                          import_react58.css`
                                     background: transparent;
                                   `
                         ],
@@ -5498,6 +5615,10 @@ function VariablesList() {
 
 // src/components/DataResourceDynamicInputProvider.tsx
 var import_jsx_runtime45 = require("@emotion/react/jsx-runtime");
+var DataResourceInputContext = (0, import_react59.createContext)(void 0);
+var useDataResourceDynamicInputs = () => {
+  return (0, import_react59.useContext)(DataResourceInputContext);
+};
 function DataResourceDynamicInputProvider(props) {
   const { children, dynamicInputs } = props;
   if (dynamicInputs) {
@@ -5516,7 +5637,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
@@ -5593,9 +5714,9 @@ function TextVariableRenderer({ definition, value, setValue }) {
 }
 
 // src/components/Request/RequestBody.tsx
-var import_react59 = require("@emotion/react");
+var import_react61 = require("@emotion/react");
 var import_design_system27 = require("@uniformdev/design-system");
-var import_react60 = require("react");
+var import_react62 = require("react");
 
 // src/components/Request/RequestProvider.tsx
 var React11 = __toESM(require("react"));
@@ -5679,11 +5800,11 @@ function useRequest() {
 }
 
 // src/components/Request/styles/Request.styles.ts
-var import_react58 = require("@emotion/react");
-var innerContentStyles = import_react58.css`
+var import_react60 = require("@emotion/react");
+var innerContentStyles = import_react60.css`
   background: var(--white);
 `;
-var requestTypeContainer = (bgColor) => import_react58.css`
+var requestTypeContainer = (bgColor) => import_react60.css`
   align-items: start;
   background: ${bgColor};
   display: grid;
@@ -5721,11 +5842,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_react62.useState)("json");
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     "div",
     {
-      css: import_react59.css`
+      css: import_react61.css`
         background: var(--white);
       `,
       children: [
@@ -5733,7 +5854,7 @@ function RequestBody() {
           RequestTypeContainer,
           {
             bgColor: "var(--gray-100)",
-            css: import_react59.css`
+            css: import_react61.css`
           padding: var(--spacing-sm) var(--spacing-base);
         `,
             children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
@@ -5851,8 +5972,11 @@ function RequestHeaders({
             }
           ) : null }),
           addOmitIfEmpty ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_design_system28.TableCellData, { width: "50%", children: header.key ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-            import_design_system28.Input,
+            import_design_system28.InputToggle,
             {
+              label: "Omit if empty",
+              showLabel: false,
+              name: "omitIfEmpty",
               type: "checkbox",
               checked: header.omitIfEmpty,
               "data-testid": "header-omitifempty",
@@ -5979,8 +6103,11 @@ function RequestParameters({
             }
           ) : null }),
           addOmitIfEmpty ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_design_system30.TableCellData, { width: "50%", children: parameter.key ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-            import_design_system30.Input,
+            import_design_system30.InputToggle,
             {
+              label: "Omit if empty",
+              showLabel: false,
+              name: "omitIfEmpty",
               type: "checkbox",
               checked: parameter.omitIfEmpty,
               "data-testid": "parameter-omitifempty",
@@ -6004,8 +6131,8 @@ function RequestParameters({
 }
 
 // src/components/Request/RequestUrl.tsx
-var import_react61 = require("@emotion/react");
-var import_react62 = require("react");
+var import_react63 = require("@emotion/react");
+var import_react64 = require("react");
 
 // src/components/Request/urlEncodeRequestParameter.ts
 function urlEncodeRequestUrl(url, varValues) {
@@ -6031,7 +6158,7 @@ function RequestUrl() {
   var _a, _b;
   const { variables } = useVariables();
   const { request } = useRequest();
-  const mergedParameters = (0, import_react62.useMemo)(() => {
+  const mergedParameters = (0, import_react64.useMemo)(() => {
     var _a2;
     if (!((_a2 = request.baseRequest) == null ? void 0 : _a2.parameters)) {
       return request.parameters;
@@ -6041,7 +6168,7 @@ function RequestUrl() {
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     "small",
     {
-      css: import_react61.css`
+      css: import_react63.css`
         display: inline-block;
         margin-bottom: var(--spacing-xs);
         word-break: break-word;
@@ -6279,12 +6406,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_react65 = 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_react65.useState)();
+  const [sdk, setSdk] = (0, import_react65.useState)();
+  const initializationInProgress = (0, import_react65.useRef)(false);
+  (0, import_react65.useEffect)(
     () => {
       if (typeof window === "undefined" || sdk) {
         return;
@@ -6342,7 +6469,7 @@ var MeshApp = ({
 };
 
 // src/components/ObjectSearch/DataRefreshButton.tsx
-var import_react64 = require("@emotion/react");
+var import_react66 = require("@emotion/react");
 var import_design_system32 = require("@uniformdev/design-system");
 var import_jsx_runtime58 = require("@emotion/react/jsx-runtime");
 var DataRefreshButton = ({
@@ -6355,7 +6482,7 @@ var DataRefreshButton = ({
     !isLoading ? null : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       import_design_system32.LoadingIndicator,
       {
-        css: import_react64.css`
+        css: import_react66.css`
             ${isLoading ? "opacity: 0.2;" : void 0}
           `
       }
@@ -6365,15 +6492,16 @@ var DataRefreshButton = ({
 };
 
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
-var import_react67 = require("@emotion/react");
+var import_react72 = 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_react73 = __toESM(require("react"));
 
 // src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
 var import_canvas8 = require("@uniformdev/canvas");
-var import_react65 = require("react");
+var import_react67 = require("react");
 var import_jsx_runtime59 = require("@emotion/react/jsx-runtime");
-var ObjectSearchContext = (0, import_react65.createContext)({
+var ObjectSearchContext = (0, import_react67.createContext)({
   onSetQuery: () => {
   },
   onSelectItem: () => {
@@ -6381,8 +6509,6 @@ var ObjectSearchContext = (0, import_react65.createContext)({
   query: {},
   boundQuery: {},
   list: {},
-  onSetList: () => {
-  },
   selectedListItems: [],
   onRemoveAllSelectedItems: () => {
   },
@@ -6394,16 +6520,16 @@ var ObjectSearchProvider = ({
   children,
   defaultQuery
 }) => {
-  const [query, setQuery] = (0, import_react65.useState)({
+  const [query, setQuery] = (0, import_react67.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_react67.useDeferredValue)(query);
+  const [selectedItems, setSelectedItems] = (0, import_react67.useState)(currentlySelectedItems != null ? currentlySelectedItems : []);
+  const [list, setList] = (0, import_react67.useState)({});
+  const onSetQuery = (0, import_react67.useCallback)(
     (value2) => {
       if (Array.isArray(value2.contentType) && value2.contentType.length > 0) {
         return setQuery({
@@ -6415,7 +6541,7 @@ var ObjectSearchProvider = ({
     },
     [setQuery]
   );
-  const onSelectItem = (0, import_react65.useCallback)(
+  const onSelectItem = (0, import_react67.useCallback)(
     (selectedResult) => {
       if (Array.isArray(selectedResult)) {
         setSelectedItems(selectedResult);
@@ -6429,17 +6555,17 @@ var ObjectSearchProvider = ({
     },
     [setSelectedItems, selectedItems]
   );
-  const onRemoveAllSelectedItems = (0, import_react65.useCallback)(() => {
+  const onRemoveAllSelectedItems = (0, import_react67.useCallback)(() => {
     setSelectedItems([]);
   }, [setSelectedItems]);
-  const onSetList = (0, import_react65.useCallback)(
+  const onSetList = (0, import_react67.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_react67.useMemo)(() => bindQuery(query, flatVariables), [query, flatVariables]);
+  const value = (0, import_react67.useMemo)(
     () => ({
       boundQuery,
       onSetQuery,
@@ -6466,7 +6592,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_react67.useContext)(ObjectSearchContext);
 }
 function bindQuery(query, inputs) {
   const { result, errors } = (0, import_canvas8.bindVariablesToObject)({
@@ -6484,9 +6610,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_react68 = require("@emotion/react");
 var import_design_system33 = require("@uniformdev/design-system");
-var ObjectListItemContainer = import_react66.css`
+var ObjectListItemContainer = import_react68.css`
   align-items: center;
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -6495,11 +6621,11 @@ var ObjectListItemContainer = import_react66.css`
   grid-template-columns: 1fr auto;
   padding: var(--spacing-sm);
 `;
-var ObjectListItemContainerDisabled = import_react66.css`
+var ObjectListItemContainerDisabled = import_react68.css`
   opacity: var(--opacity-50);
   pointer-events: none;
 `;
-var ObjectListItemLoading = import_react66.css`
+var ObjectListItemLoading = import_react68.css`
   animation: ${import_design_system33.skeletonLoading} 1s linear infinite alternate;
   border-color: transparent;
   min-height: 42px;
@@ -6523,36 +6649,36 @@ var ObjectListItemLoading = import_react66.css`
     width: 1rem;
   }
 `;
-var ObjectListItemHeadingGroup = import_react66.css`
+var ObjectListItemHeadingGroup = import_react68.css`
   align-items: center;
   display: grid;
 `;
-var ObjectListItemThumbnail = import_react66.css`
+var ObjectListItemThumbnail = import_react68.css`
   width: 30px;
   object-fit: contain;
 `;
-var ObjectListItemTitle = import_react66.css`
+var ObjectListItemTitle = import_react68.css`
   color: var(--typography-base);
   display: block;
   font-size: var(--fs-sm);
 `;
-var ObjectListItemSubtitle = import_react66.css`
+var ObjectListItemSubtitle = import_react68.css`
   color: var(--gray-500);
   display: block;
   font-size: var(--fs-xs);
   line-height: 1;
 `;
-var ObjectListItemInfoContainer = import_react66.css`
+var ObjectListItemInfoContainer = import_react68.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   justify-content: center;
 `;
-var ObjectListItemControlledContent = import_react66.css`
+var ObjectListItemControlledContent = import_react68.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectListItemUnControlledContent = import_react66.css`
+var ObjectListItemUnControlledContent = import_react68.css`
   margin-top: var(--spacing-sm);
   grid-column: 1 / -1;
 `;
@@ -6622,202 +6748,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_react69 = require("@emotion/react");
+var import_design_system35 = require("@uniformdev/design-system");
+var ButtonStyles = import_react69.css`
+  ${import_design_system35.button}
   background: transparent;
   border: 1px solid var(--typography-base);
   color: var(--typography-base);
@@ -6843,20 +6786,20 @@ var ButtonStyles = import_react70.css`
     text-decoration: none;
   }
 `;
-var ButtonIcon = import_react70.css`
+var ButtonIcon = import_react69.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
   ] });
 };
@@ -6865,15 +6808,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_react70 = require("@emotion/react");
+var ObjectSearchResultItemContainer = import_react70.css`
   align-items: center;
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -6889,7 +6832,7 @@ var ObjectSearchResultItemContainer = import_react71.css`
     }
   }
 `;
-var ObjectSearchDragHandle = import_react71.css`
+var ObjectSearchDragHandle = import_react70.css`
   border-left: 2px dotted var(--gray-300);
   border-right: 2px dotted var(--gray-300);
   position: absolute;
@@ -6898,41 +6841,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_react70.css`
   color: var(--gray-500);
   display: block;
   font-size: var(--fs-xs);
   line-height: 1;
 `;
-var ObjectSearchResultItemTitle = import_react71.css`
+var ObjectSearchResultItemTitle = import_react70.css`
   align-items: center;
   color: var(--typography-base);
   display: flex;
   gap: var(--spacing-xs);
 `;
-var ObjectSearchResultItemTimeStamp = import_react71.css`
+var ObjectSearchResultItemTimeStamp = import_react70.css`
   color: var(--gray-500);
   font-size: var(--fs-xs);
 `;
-var ObjectSearchAuthorStateGroup = import_react71.css`
+var ObjectSearchAuthorStateGroup = import_react70.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectSearchUpdateGroup = import_react71.css`
+var ObjectSearchUpdateGroup = import_react70.css`
   display: grid;
 `;
-var ObjectSearchContentContainer = import_react71.css`
+var ObjectSearchContentContainer = import_react70.css`
   display: flex;
   gap: var(--spacing-base);
 `;
-var ObjectSearchImage = import_react71.css`
+var ObjectSearchImage = import_react70.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,
@@ -6956,70 +6899,66 @@ 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_react71 = require("@emotion/react");
+var ObjectSearchResultListContainer = import_react71.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   justify-content: space-between;
 `;
-var ObjectSearchDragContainer = import_react72.css`
+var ObjectSearchDragContainer = import_react71.css`
   margin: 0 0 var(--spacing-sm);
 `;
-var ObjectSearchContainerDragging = import_react72.css`
+var ObjectSearchContainerDragging = import_react71.css`
   box-shadow: var(--shadow-base);
   opacity: var(--opacity-50);
 `;
-var ObjectSearchResultListCounterContainer = import_react72.css`
+var ObjectSearchResultListCounterContainer = import_react71.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectSearchResultListTitle = import_react72.css`
+var ObjectSearchResultListTitle = import_react71.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",
@@ -7027,7 +6966,7 @@ function ObjectSearchResultList({
   hideRemoveButton = false,
   resultLabelOverride,
   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,
@@ -7052,9 +6991,10 @@ function ObjectSearchResultList({
     const item = selectedListItems.find((i) => i.id === rubric.draggableId);
     const renderListItem = renderResultComponent({
       ...item,
+      hideRemoveButton,
       disableDnD: selectedListItems.length === 1 || disableDnD
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       "div",
       {
         css: [
@@ -7069,17 +7009,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: [
-      !resultLabelOverride ? /* @__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: [
+      !resultLabelOverride ? /* @__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 })
       ] }) : resultLabelOverride,
-      /* @__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",
@@ -7090,15 +7030,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,
@@ -7116,42 +7056,306 @@ function ObjectSearchResultList({
   ] });
 }
 
-// src/components/ObjectSearch/QueryFilter.tsx
-var import_design_system40 = require("@uniformdev/design-system");
-var import_react73 = require("react");
-var import_jsx_runtime67 = require("@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",
-  searchInputLabel = "Query",
-  countLabel = "Count",
-  countValue = 5,
-  sortLabel = "Sort By",
-  sortOptions,
-  sortOrderLabel = "Sort Order",
-  sortOrderOptions = [
-    {
-      value: "asc",
-      label: "Ascending"
-    },
+// 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_react73.default.useMemo(
+    () => Boolean(inputValue && hasReferencedVariables(inputValue)),
+    [inputValue]
+  );
+  const listItems = resultList != null ? resultList : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    import_design_system38.ScrollableList,
     {
-      value: "desc",
-      label: "Descending"
+      role: "list",
+      css: import_react72.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, {})
     }
-  ],
-  children
-}) => {
-  var _a, _b, _c, _d, _e, _f, _g;
-  const { query, onSetQuery } = useObjectSearchContext();
-  const [queryState, setQueryState] = (0, import_react73.useState)({
-    contentType: (_a = query.contentType) != null ? _a : "",
-    keyword: (_b = query.keyword) != null ? _b : "",
-    count: (_c = query.count) != null ? _c : countValue,
+  );
+  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_react76 = 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_react74 = require("react");
+function useContentDataResourceLocaleInfo({
+  locale,
+  setLocale,
+  dynamicInputs
+}) {
+  var _a;
+  const setLocaleRef = (0, import_react74.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_react74.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_react75 = require("@emotion/react");
+var ObjectSearchFilterContainerLabel = import_react75.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_react75.css`
+  display: grid;
+  gap: var(--spacing-base);
+`;
+var ObjectSearchFilterGrid = (gridColumns) => import_react75.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_react76.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_react76.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.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_react77 = require("react");
+var import_jsx_runtime67 = require("@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",
+  searchInputLabel = "Query",
+  countLabel = "Count",
+  countValue = 5,
+  sortLabel = "Sort By",
+  sortOptions,
+  sortOrderLabel = "Sort Order",
+  sortOrderOptions = [
+    {
+      value: "asc",
+      label: "Ascending"
+    },
+    {
+      value: "desc",
+      label: "Descending"
+    }
+  ],
+  children
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const { query, onSetQuery } = useObjectSearchContext();
+  const [queryState, setQueryState] = (0, import_react77.useState)({
+    contentType: (_a = query.contentType) != null ? _a : "",
+    keyword: (_b = query.keyword) != null ? _b : "",
+    count: (_c = query.count) != null ? _c : countValue,
     sortBy: (_d = query.sortBy) != null ? _d : "",
     sortOrder: (_e = query.sortOrder) != null ? _e : ""
   });
@@ -7159,7 +7363,7 @@ var QueryFilter = ({
     setQueryState((prev) => ({ ...prev, ...value }));
     onSetQuery({ ...query, ...value });
   };
-  (0, import_react73.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     onSetQuery(queryState);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("fieldset", { children: [
@@ -7284,9 +7488,107 @@ var QueryFilter = ({
   ] });
 };
 
-// src/components/ParamTypeDynamicDataProvider.tsx
-var import_react74 = require("react");
+// src/components/ObjectSearch/ObjectSearchListOfSearchResults.tsx
+var import_design_system41 = require("@uniformdev/design-system");
 var import_jsx_runtime68 = require("@emotion/react/jsx-runtime");
+function ObjectSearchListOfSearchResults() {
+  var _a, _b;
+  const { list, isListLoading } = useObjectSearchContext();
+  if (isListLoading) {
+    return Array.from(Array(5).keys()).map((i) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ObjectSearchListItemLoadingSkeleton, {}, i));
+  }
+  if (((_a = list.items) == null ? void 0 : _a.length) === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_design_system41.Callout, { type: "info", children: "No results were found" });
+  }
+  return (_b = list.items) == null ? void 0 : _b.map((item) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ObjectSearchListItem, { ...item }, item.id));
+}
+
+// src/components/ObjectSearch/hooks/ControlledObjectSearchProvider.tsx
+var import_react78 = require("react");
+var import_jsx_runtime69 = require("@emotion/react/jsx-runtime");
+var ControlledObjectSearchProvider = ({
+  selectedItems,
+  searchResultItems,
+  selectedItemsLoading,
+  searchResultListLoading,
+  onQueryChange = () => {
+  },
+  onSelectItemsChange,
+  isMulti = false,
+  children,
+  query = {},
+  enableFilterByLocale,
+  localeOptions,
+  dynamicEntryId,
+  isManualSelection
+}) => {
+  var _a, _b;
+  const { flatVariables } = useVariables(true);
+  const querySearchDeferred = (0, import_react78.useDeferredValue)(query);
+  const innerSelectedItems = (0, import_react78.useRef)(selectedItems);
+  (0, import_react78.useEffect)(() => {
+    if (selectedItems !== void 0) {
+      innerSelectedItems.current = selectedItems;
+    }
+  }, [selectedItems]);
+  const onSetQuery = (0, import_react78.useCallback)(
+    (value) => {
+      const newQuery = { ...query, ...value };
+      onQueryChange(newQuery);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [onQueryChange]
+  );
+  const onSelectItem = (0, import_react78.useCallback)(
+    (selectedResult) => {
+      var _a2;
+      if (Array.isArray(selectedResult)) {
+        innerSelectedItems.current = selectedResult;
+        onSelectItemsChange(selectedResult);
+      } else {
+        const itemIsAlreadySelected = selectedItems == null ? void 0 : selectedItems.some((item) => item.id === selectedResult.id);
+        const updatedSelectedItems = itemIsAlreadySelected ? (_a2 = selectedItems == null ? void 0 : selectedItems.filter((item) => item.id !== selectedResult.id)) != null ? _a2 : [] : [...selectedItems != null ? selectedItems : [], selectedResult];
+        innerSelectedItems.current = updatedSelectedItems;
+        onSelectItemsChange(updatedSelectedItems);
+      }
+    },
+    [onSelectItemsChange, selectedItems]
+  );
+  const onRemoveAllSelectedItems = (0, import_react78.useCallback)(() => {
+    innerSelectedItems.current = [];
+    onSelectItemsChange([]);
+  }, [onSelectItemsChange]);
+  const list = (0, import_react78.useMemo)(() => ({ items: searchResultItems }), [searchResultItems]);
+  const boundQuery = (0, import_react78.useMemo)(() => bindQuery(query, flatVariables), [query, flatVariables]);
+  const isLoadingInitially = Boolean(
+    isManualSelection ? !((_a = innerSelectedItems.current) == null ? void 0 : _a.length) && selectedItemsLoading : selectedItemsLoading
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    ObjectSearchContext.Provider,
+    {
+      value: {
+        boundQuery,
+        onSetQuery,
+        query: querySearchDeferred,
+        onSelectItem,
+        selectedListItems: (_b = isManualSelection ? innerSelectedItems.current : selectedItems) != null ? _b : [],
+        onRemoveAllSelectedItems,
+        list,
+        isSelectedItemsListLoading: isLoadingInitially,
+        isListLoading: searchResultListLoading,
+        isMulti,
+        localeOptions,
+        enableFilterByLocale,
+        dynamicEntryId
+      },
+      children
+    }
+  );
+};
+
+// src/components/ParamTypeDynamicDataProvider.tsx
+var import_react79 = require("react");
+var import_jsx_runtime70 = require("@emotion/react/jsx-runtime");
 function ParamTypeDynamicDataProvider(props) {
   const { children } = props;
   const {
@@ -7294,11 +7596,11 @@ function ParamTypeDynamicDataProvider(props) {
   } = useMeshLocation("paramType");
   const dynamicInputsAsVariables = useDynamicInputsAsVariables(dynamicInputs);
   const connectedDataAsVariables = useConnectedDataAsVariables(connectedData);
-  const variables = (0, import_react74.useMemo)(
+  const variables = (0, import_react79.useMemo)(
     () => ({ ...connectedDataAsVariables, ...dynamicInputsAsVariables }),
     [dynamicInputsAsVariables, connectedDataAsVariables]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(VariablesProvider, { value: variables, onChange: () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(VariablesProvider, { value: variables, onChange: () => {
   }, editVariableComponent: JsonMeshVariableEditor, children });
 }
 var JsonMeshVariableEditor = ({
@@ -7307,9 +7609,9 @@ var JsonMeshVariableEditor = ({
   variable,
   context
 }) => {
-  const sillyRef = (0, import_react74.useRef)(false);
+  const sillyRef = (0, import_react79.useRef)(false);
   const { editConnectedData } = useMeshLocation("paramType");
-  (0, import_react74.useEffect)(() => {
+  (0, import_react79.useEffect)(() => {
     if (sillyRef.current) {
       return;
     }
@@ -7337,38 +7639,2078 @@ 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");
+// src/components/SearchAndFilter/constants.ts
+var NUMBER_OPERATORS = [
+  {
+    label: "equals...",
+    symbol: "=",
+    value: "eq",
+    editorType: "number"
+  },
+  {
+    label: "does not equal...",
+    symbol: "\u2260",
+    value: "neq",
+    editorType: "number"
+  },
+  {
+    label: "greater than...",
+    symbol: ">",
+    value: "gt",
+    editorType: "number"
+  },
+  {
+    label: "greater than or equal to...",
+    symbol: "\u2265",
+    value: "gte",
+    editorType: "number"
+  },
+  {
+    label: "less than...",
+    symbol: "<",
+    value: "lt",
+    editorType: "number"
+  },
+  {
+    label: "less than or equal to...",
+    symbol: "\u2264",
+    value: "lte",
+    editorType: "number"
+  },
+  {
+    label: "is empty",
+    value: "ndef",
+    editorType: "empty"
+  },
+  {
+    label: "is between...",
+    value: "between",
+    editorType: "numberRange"
+  },
+  {
+    label: "is not empty",
+    value: "def",
+    editorType: "empty"
+  }
+];
+var DATE_OPERATORS = [
+  {
+    label: "is",
+    value: "eq",
+    editorType: "date"
+  },
+  {
+    label: "is between...",
+    value: "between",
+    editorType: "dateRange"
+  },
+  {
+    label: "is before...",
+    value: "lt",
+    editorType: "date"
+  },
+  {
+    label: "is after...",
+    value: "gt",
+    editorType: "date"
+  },
+  {
+    label: "is on or before...",
+    value: "lte",
+    editorType: "date"
+  },
+  {
+    label: "is on or after...",
+    value: "gte",
+    editorType: "date"
+  },
+  {
+    label: "is empty",
+    value: "ndef",
+    editorType: "empty"
+  },
+  {
+    label: "is not",
+    value: "neq",
+    editorType: "date"
+  },
+  {
+    label: "is not empty",
+    value: "def",
+    editorType: "empty"
+  }
+];
+var TEXTBOX_OPERATORS = [
+  {
+    label: "contains...",
+    value: "match",
+    editorType: "text"
+  },
+  {
+    label: "is",
+    value: "eq",
+    editorType: "text"
+  },
+  {
+    label: "is empty",
+    value: "ndef",
+    editorType: "empty"
+  },
+  {
+    label: "starts with...",
+    value: "starts",
+    editorType: "text"
+  },
+  {
+    label: "is not",
+    value: "neq",
+    editorType: "text"
+  },
+  {
+    label: "is not empty",
+    value: "def",
+    editorType: "empty"
+  }
+];
+var USER_OPERATORS = [
+  {
+    label: "contains...",
+    value: "match",
+    editorType: "text"
+  },
+  {
+    label: "is",
+    value: "eq",
+    editorType: "text"
+  },
+  {
+    label: "starts with...",
+    value: "starts",
+    editorType: "text"
+  },
+  {
+    label: "is not",
+    value: "neq",
+    editorType: "text"
+  }
+];
+var SYSTEM_DATE_OPERATORS = [
+  {
+    label: "is",
+    value: "sys-date-eq",
+    editorType: "date"
+  },
+  {
+    label: "is between...",
+    value: "sys-date-between",
+    editorType: "dateRange"
+  },
+  {
+    label: "is before...",
+    value: "sys-date-lt",
+    editorType: "date"
+  },
+  {
+    label: "is after...",
+    value: "sys-date-gt",
+    editorType: "date"
+  },
+  {
+    label: "is on or before...",
+    value: "sys-date-lte",
+    editorType: "date"
+  },
+  {
+    label: "is on or after...",
+    value: "sys-date-gte",
+    editorType: "date"
+  },
+  {
+    label: "is not",
+    value: "sys-date-neq",
+    editorType: "date"
+  }
+];
+var RICHTEXT_OPERATORS = [
+  {
+    label: "contains...",
+    value: "match",
+    editorType: "text"
+  },
+  {
+    label: "is empty",
+    value: "ndef",
+    editorType: "empty"
+  },
+  {
+    label: "starts with...",
+    value: "starts",
+    editorType: "text"
+  },
+  {
+    label: "is not empty",
+    value: "def",
+    editorType: "empty"
+  }
+];
+var CHECKBOX_OPERATORS = [
+  {
+    label: "is checked",
+    value: "def",
+    editorType: "empty"
+  },
+  {
+    label: "is not checked",
+    value: "ndef",
+    editorType: "empty"
+  }
+];
+var SYSTEM_FIELD_OPERATORS = [
+  {
+    label: "is",
+    value: "eq",
+    editorType: "singleChoice"
+  },
+  {
+    label: "is any of...",
+    value: "in",
+    editorType: "multiChoice"
+  },
+  {
+    label: "is not",
+    value: "neq",
+    editorType: "singleChoice"
+  },
+  {
+    label: "is none of...",
+    value: "nin",
+    editorType: "multiChoice"
+  }
+];
+var PUBLISH_STATUS_FIELD_OPERATORS = [
+  {
+    label: "is",
+    value: "eq",
+    editorType: "statusSingleChoice"
+  },
+  {
+    label: "is any of...",
+    value: "in",
+    editorType: "statusMultiChoice"
+  },
+  {
+    label: "is not",
+    value: "neq",
+    editorType: "statusSingleChoice"
+  },
+  {
+    label: "is none of...",
+    value: "nin",
+    editorType: "statusMultiChoice"
+  }
+];
+var SELECT_OPERATORS = [
+  {
+    label: "is",
+    value: "eq",
+    editorType: "singleChoice"
+  },
+  {
+    label: "is any of...",
+    value: "in",
+    editorType: "multiChoice"
+  },
+  {
+    label: "is empty",
+    value: "ndef",
+    editorType: "empty"
+  },
+  {
+    label: "contains...",
+    value: "match",
+    editorType: "text"
+  },
+  {
+    label: "starts with...",
+    value: "starts",
+    editorType: "text"
+  },
+  {
+    label: "is not",
+    value: "neq",
+    editorType: "singleChoice"
+  },
+  {
+    label: "is none of...",
+    value: "nin",
+    editorType: "multiChoice"
+  },
+  {
+    label: "is not empty",
+    value: "def",
+    editorType: "empty"
+  }
+];
+
+// src/components/SearchAndFilter/FilterButton.tsx
+var import_design_system43 = require("@uniformdev/design-system");
+
+// src/components/SearchAndFilter/styles/SearchAndFilter.styles.ts
+var import_react80 = require("@emotion/react");
+var import_design_system42 = require("@uniformdev/design-system");
+var SearchAndFilterControlsWrapper = (gridColumns) => import_react80.css`
+  align-items: stretch;
+  display: grid;
+  grid-template-columns: ${gridColumns};
+  gap: var(--spacing-sm);
+`;
+var SearchAndFilterOutterControlWrapper = (gridColumns) => import_react80.css`
+  align-items: stretch;
+  display: grid;
+  grid-template-columns: ${gridColumns};
+  gap: var(--spacing-sm);
+`;
+var ConditionalFilterRow = import_react80.css`
+  display: grid;
+  grid-template-columns: 35px 1fr;
+  gap: var(--spacing-sm);
+  margin-left: var(--spacing-base);
+
+  ${(0, import_design_system42.cq)("380px")} {
+    align-items: center;
+
+    &:after {
+      content: '';
+      display: block;
+      height: 1px;
+      background: var(--gray-300);
+      width: calc(100% - var(--spacing-base));
+      margin-left: var(--spacing-base);
+    }
+    &:last-of-type:after {
+      display: none;
+    }
+  }
+
+  &:nth-of-type(2) {
+    margin-left: 0;
+    grid-template-columns: 50px 1fr;
+  }
+
+  ${(0, import_design_system42.cq)("580px")} {
+    &:after {
+      display: none;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: ${import_design_system42.fadeInLtr} var(--duration-fast) var(--timing-ease-out);
+  }
+`;
+var ConditionalInputRow = import_react80.css`
+  display: flex;
+  gap: var(--spacing-sm);
+  flex-wrap: wrap;
+
+  ${(0, import_design_system42.cq)("380px")} {
+    & > div:nth-child(-n + 2) {
+      width: calc(50% - var(--spacing-sm));
+    }
+
+    & > div:nth-child(n + 3) {
+      width: calc(100% - 48px);
+    }
+  }
+  ${(0, import_design_system42.cq)("764px")} {
+    display: grid;
+    grid-template-columns: 200px 160px 1fr 32px;
+
+    & > div:nth-child(n) {
+      width: auto;
+    }
+  }
+`;
+var SearchInput = import_react80.css`
+  max-height: 40px;
+  min-height: unset;
+`;
+var BindableKeywordSearchInputStyles = import_react80.css`
+  position: relative;
+  width: 100%;
+
+  & [data-lexical-editor='true'] {
+    padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-base);
+    font-size: var(--fs-sm);
+    border-radius: var(--rounded-full);
+    max-height: 40px;
+    min-height: unset;
+    width: 100%;
+    position: relative;
+    white-space: nowrap;
+  }
+`;
+var ClearSearchButtonContainer = import_react80.css`
+  align-items: center;
+  display: flex;
+  position: absolute;
+  inset: 0 var(--spacing-lg) 0 auto;
+`;
+var ClearSearchButtonStyles = import_react80.css`
+  background: none;
+  border: none;
+  padding: 0;
+  pointer-events: all;
+`;
+var FilterButton = import_react80.css`
+  align-items: center;
+  background: var(--white);
+  border: 1px solid var(--gray-300);
+  border-radius: var(--rounded-full);
+  color: var(--typography-base);
+  display: flex;
+  font-size: var(--fs-sm);
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-base);
+  max-height: 40px;
+  transition: color var(--duration-fast) var(--timing-ease-out),
+    background-color var(--duration-fast) var(--timing-ease-out),
+    border-color var(--duration-fast) var(--timing-ease-out),
+    box-shadow var(--duration-fast) var(--timing-ease-out);
+
+  svg {
+    color: var(--gray-300);
+    transition: color var(--duration-fast) var(--timing-ease-out);
+  }
+
+  &:hover,
+  :where([aria-expanded='true']) {
+    outline: none;
+    background: var(--gray-200);
+    border-color: var(--gray-300);
+
+    svg {
+      color: var(--typography-base);
+    }
+  }
+
+  &:disabled {
+    opacity: var(--opacity-50);
+  }
+`;
+var FilterButtonText = import_react80.css`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 14ch;
+`;
+var FilterButtonSelected = import_react80.css`
+  background: var(--gray-100);
+  border-color: var(--gray-300);
+
+  svg {
+    color: var(--accent-dark);
+  }
+`;
+var FilterButtonWithOptions = import_react80.css`
+  :where([aria-expanded='true']) {
+    background: var(--purple-rain-100);
+    border-color: var(--accent-light);
+    color: var(--typography-base);
+    box-shadow: var(--elevation-100);
+
+    svg {
+      color: var(--accent-dark);
+    }
+  }
+`;
+var SearchIcon = import_react80.css`
+  color: var(--icon-color);
+  position: absolute;
+  inset: 0 var(--spacing-base) 0 auto;
+  margin: auto;
+  transition: color var(--duration-fast) var(--timing-ease-out);
+`;
+var AddConditionalBtn = import_react80.css`
+  align-items: center;
+  background: transparent;
+  border: none;
+  color: var(--primary-action-default);
+  display: flex;
+  gap: var(--spacing-sm);
+  transition: color var(--duration-fast) var(--timing-ease-out);
+  padding: 0;
+
+  &:hover,
+  &:focus {
+    color: var(--primary-action-hover);
+  }
+
+  &:disabled {
+    color: var(--gray-400);
+  }
+`;
+var Title = import_react80.css`
+  color: var(--typography-light);
+
+  &:focus {
+    outline: none;
+  }
+`;
+var ResetConditionsBtn = import_react80.css`
+  background: transparent;
+  border: none;
+  color: var(--action-destructive-default);
+  transition: color var(--duration-fast) var(--timing-ease-out);
+  padding: 0;
+
+  &:hover,
+  &:focus {
+    color: var(--action-destructive-hover);
+  }
+`;
+var IconBtn = import_react80.css`
+  background: transparent;
+  border: none;
+  padding: var(--spacing-sm);
+`;
+var SearchAndFilterOptionsContainer = import_react80.css`
+  background: var(--gray-50);
+  border: 1px solid var(--gray-300);
+  border-radius: var(--rounded-base);
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-md) 0 var(--spacing-base);
+  will-change: height;
+  position: relative;
+  z-index: 1;
+`;
+var SearchAndFilterOptionsInnerContainer = import_react80.css`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  padding-inline: var(--spacing-md);
+`;
+var SearchAndFilterButtonGroup = import_react80.css`
+  margin-top: var(--spacing-xs);
+  margin-left: calc(56px + var(--spacing-md));
+`;
+
+// src/components/SearchAndFilter/FilterButton.tsx
+var import_jsx_runtime71 = require("@emotion/react/jsx-runtime");
+var FilterButton2 = ({
+  text = "Filters",
+  icon = "filter-add",
+  filterCount,
+  hasSelectedValue,
+  dataTestId,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+    "button",
+    {
+      type: "button",
+      css: [
+        FilterButton,
+        hasSelectedValue ? FilterButtonSelected : void 0,
+        filterCount ? [FilterButtonWithOptions, FilterButtonSelected] : void 0
+      ],
+      ...props,
+      "data-testid": dataTestId,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_design_system43.Icon, { icon, iconColor: "currentColor", size: "1rem" }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { css: FilterButtonText, children: text }),
+        filterCount ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_design_system43.Counter, { count: filterCount, bgColor: "var(--white)" }) : null
+      ]
+    }
+  );
+};
+
+// src/components/SearchAndFilter/FilterControls.tsx
+var import_CgClose5 = require("@react-icons/all-files/cg/CgClose");
+var import_design_system46 = require("@uniformdev/design-system");
+var import_lexical11 = require("lexical");
+var import_react83 = require("react");
+var import_react_use7 = require("react-use");
+var import_uuid3 = require("uuid");
+
+// src/components/SearchAndFilter/hooks/useSearchAndFilter.tsx
+var import_design_system45 = require("@uniformdev/design-system");
+var import_react82 = require("react");
+
+// src/components/SearchAndFilter/FilterEditor.tsx
+var import_design_system44 = require("@uniformdev/design-system");
+var import_react81 = require("react");
+var import_react_use6 = require("react-use");
+var import_jsx_runtime72 = require("@emotion/react/jsx-runtime");
+var readOnlyAttributes = {
+  isSearchable: false,
+  menuIsOpen: false,
+  isClearable: false
+};
+var FilterMultiChoiceEditor = ({
+  value,
+  options,
+  disabled,
+  readOnly,
+  valueTestId,
+  ...props
+}) => {
+  const readOnlyProps = readOnly ? readOnlyAttributes : {};
+  const isClearable = !readOnly || !disabled;
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+    import_design_system44.InputComboBox,
+    {
+      ...props,
+      placeholder: "Type to search...",
+      options,
+      isMulti: true,
+      isClearable,
+      isDisabled: disabled,
+      onChange: (e) => {
+        var _a;
+        return props.onChange((_a = e == null ? void 0 : e.map((option) => option.value)) != null ? _a : []);
+      },
+      value: options == null ? void 0 : options.filter((option) => value == null ? void 0 : value.includes(option.value)),
+      "aria-readonly": readOnly,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
+      ...readOnlyProps
+    }
+  ) });
+};
+var FilterSingleChoiceEditor = ({
+  options,
+  value,
+  disabled,
+  readOnly,
+  onChange,
+  valueTestId
+}) => {
+  var _a;
+  const readOnlyProps = readOnly ? readOnlyAttributes : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+    import_design_system44.InputComboBox,
+    {
+      placeholder: "Type to search...",
+      options,
+      isClearable: true,
+      onChange: (e) => {
+        var _a2;
+        return onChange((_a2 = e == null ? void 0 : e.value) != null ? _a2 : "");
+      },
+      isDisabled: disabled,
+      value: (_a = options == null ? void 0 : options.find((option) => option.value === value)) != null ? _a : null,
+      "aria-readonly": readOnly,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
+      ...readOnlyProps
+    }
+  ) });
+};
+var CustomOptions = ({ label, value }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_design_system44.StatusBullet, { status: label, message: value });
+};
+var StatusMultiEditor = ({
+  options,
+  value,
+  disabled,
+  readOnly,
+  onChange,
+  valueTestId
+}) => {
+  const readOnlyProps = readOnly ? readOnlyAttributes : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+    import_design_system44.InputComboBox,
+    {
+      options,
+      isMulti: true,
+      onChange: (e) => {
+        var _a;
+        return onChange((_a = e.map((item) => item.value)) != null ? _a : []);
+      },
+      formatOptionLabel: CustomOptions,
+      "aria-readonly": readOnly,
+      value: options == null ? void 0 : options.filter((option) => value == null ? void 0 : value.includes(option.value)),
+      isDisabled: disabled,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
+      ...readOnlyProps
+    }
+  ) });
+};
+var StatusSingleEditor = ({
+  options,
+  value,
+  disabled,
+  readOnly,
+  onChange,
+  valueTestId
+}) => {
+  const readOnlyProps = readOnly ? readOnlyAttributes : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { "data-testid": valueTestId, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+    import_design_system44.InputComboBox,
+    {
+      options,
+      onChange: (e) => {
+        var _a;
+        return onChange((_a = e == null ? void 0 : e.value) != null ? _a : "");
+      },
+      formatOptionLabel: CustomOptions,
+      "aria-readonly": readOnly,
+      value: options == null ? void 0 : options.find((option) => option.value === value),
+      isDisabled: disabled,
+      styles: {
+        menu(base) {
+          return {
+            ...base,
+            minWidth: "max-content"
+          };
+        }
+      },
+      ...readOnlyProps
+    }
+  ) });
+};
+var TextEditor = ({
+  onChange,
+  ariaLabel,
+  value,
+  readOnly,
+  valueTestId
+}) => {
+  const [innerValue, setInnerValue] = (0, import_react81.useState)(value != null ? value : "");
+  (0, import_react_use6.useDebounce)(() => onChange(innerValue), 500, [innerValue]);
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+    import_design_system44.Input,
+    {
+      showLabel: false,
+      label: ariaLabel,
+      onChange: (e) => setInnerValue(e.currentTarget.value),
+      placeholder: "Enter phrase to search\u2026",
+      value: innerValue,
+      readOnly,
+      "data-testid": valueTestId
+    }
+  );
+};
+var NumberRangeEditor = ({
+  onChange,
+  disabled,
+  ariaLabel,
+  value,
+  readOnly,
+  valueTestId
+}) => {
+  const [minValue, setMinValue] = (0, import_react81.useState)("");
+  const [maxValue, setMaxValue] = (0, import_react81.useState)("");
+  const [error, setError] = (0, import_react81.useState)("");
+  (0, import_react_use6.useDebounce)(
+    () => {
+      if (minValue && maxValue && !error) {
+        onChange([minValue, maxValue]);
+      } else {
+        onChange([]);
+      }
+    },
+    500,
+    [minValue, maxValue]
+  );
+  (0, import_react81.useEffect)(() => {
+    if (!maxValue && !minValue) {
+      return;
+    }
+    const max = Number(maxValue);
+    const min = Number(minValue);
+    if (max < min || min > max) {
+      setError("Please enter a valid numeric range");
+      return;
+    }
+    if (maxValue && !minValue || minValue && !maxValue) {
+      setError("Please enter both a low and high number");
+      return;
+    }
+    if (error) {
+      setError("");
+    }
+    if (min && max) {
+      setMinValue(minValue);
+      setMaxValue(maxValue);
+    }
+  }, [maxValue, minValue, setError]);
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(import_jsx_runtime72.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+        import_design_system44.Input,
+        {
+          label: `${ariaLabel}-min`,
+          type: "number",
+          showLabel: false,
+          min: 0,
+          placeholder: "Low",
+          onChange: (e) => setMinValue(e.currentTarget.value),
+          "aria-invalid": !error ? false : true,
+          disabled,
+          value: value ? value[0] : "",
+          readOnly,
+          "data-testid": "value-low"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+        import_design_system44.Input,
+        {
+          type: "number",
+          label: `${ariaLabel}-max`,
+          showLabel: false,
+          min: 0,
+          placeholder: "High",
+          onChange: (e) => setMaxValue(e.currentTarget.value),
+          "aria-invalid": !error ? false : true,
+          disabled,
+          value: value ? value[1] : "",
+          readOnly,
+          "data-testid": "value-high"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ErrorContainer, { errorMessage: error })
+  ] });
+};
+var NumberEditor = ({
+  ariaLabel,
+  onChange,
+  disabled,
+  value,
+  readOnly,
+  valueTestId
+}) => {
+  const [innerValue, setInnerValue] = (0, import_react81.useState)(value != null ? value : "");
+  (0, import_react_use6.useDebounce)(() => onChange(innerValue), 500, [innerValue]);
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+    import_design_system44.Input,
+    {
+      label: ariaLabel,
+      type: "number",
+      showLabel: false,
+      min: 0,
+      onChange: (e) => setInnerValue(e.currentTarget.value),
+      disabled,
+      value: innerValue,
+      readOnly,
+      "data-testid": valueTestId
+    }
+  );
+};
+var DateEditor = ({
+  onChange,
+  ariaLabel,
+  disabled,
+  value,
+  readOnly,
+  valueTestId
+}) => {
+  const [innerValue, setInnerValue] = (0, import_react81.useState)(value != null ? value : "");
+  (0, import_react_use6.useDebounce)(() => onChange(innerValue), 500, [innerValue]);
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+    import_design_system44.Input,
+    {
+      type: "date",
+      label: ariaLabel,
+      showLabel: false,
+      onChange: (e) => setInnerValue(e.currentTarget.value),
+      disabled,
+      value: innerValue,
+      readOnly,
+      "data-testid": valueTestId
+    }
+  );
+};
+var DateRangeEditor = ({
+  ariaLabel,
+  onChange,
+  disabled,
+  value,
+  readOnly,
+  valueTestId
+}) => {
+  const [minDateValue, setMinDateValue] = (0, import_react81.useState)(value ? value[0] : "");
+  const [maxDateValue, setMaxDateValue] = (0, import_react81.useState)(value ? value[1] : "");
+  const [error, setError] = (0, import_react81.useState)("");
+  (0, import_react_use6.useDebounce)(
+    () => {
+      if (minDateValue && maxDateValue && !error) {
+        onChange([minDateValue, maxDateValue]);
+      } else {
+        onChange([]);
+      }
+    },
+    500,
+    [minDateValue, maxDateValue]
+  );
+  (0, import_react81.useEffect)(() => {
+    if (!minDateValue || !maxDateValue) {
+      return;
+    }
+    const minDate = new Date(minDateValue);
+    const maxDate = new Date(maxDateValue);
+    if (maxDate < minDate) {
+      setError("The max date cannot be lower than the min date");
+      return;
+    }
+    if (maxDate && !minDate) {
+      setError("Please enter both a low and high date");
+      return;
+    }
+    const minDateString = minDate.toDateString();
+    const maxDateString = maxDate.toDateString();
+    if (minDateString === maxDateString || maxDateString === minDateString) {
+      setError("The min and max date cannot be the same");
+      return;
+    }
+    if (minDate > maxDate) {
+      setError("The min date cannot be higher than the max date");
+      return;
+    }
+    if (error) {
+      setError("");
+    }
+    if (minDate && maxDate) {
+      setMinDateValue(minDateValue);
+      setMaxDateValue(maxDateValue);
+    } else {
+      setMinDateValue("");
+      setMaxDateValue("");
+    }
+  }, [minDateValue, maxDateValue, setError]);
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(import_jsx_runtime72.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { css: twoColumnGrid, "data-testid": valueTestId, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+        import_design_system44.Input,
+        {
+          label: `${ariaLabel}-min-date`,
+          type: "date",
+          showLabel: false,
+          value: minDateValue,
+          onChange: (e) => setMinDateValue(e.currentTarget.value),
+          "aria-invalid": !error ? false : true,
+          disabled,
+          readOnly,
+          "data-testid": "value-low"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+        import_design_system44.Input,
+        {
+          label: `${ariaLabel}-max-date`,
+          type: "date",
+          showLabel: false,
+          value: maxDateValue,
+          onChange: (e) => setMaxDateValue(e.currentTarget.value),
+          "aria-invalid": !error ? false : true,
+          disabled,
+          readOnly,
+          "data-testid": "value-high"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ErrorContainer, { errorMessage: error })
+  ] });
+};
+var FilterEditorRenderer = ({ editorType, ...props }) => {
+  const { filterMapper: contextFilterMapper } = useSearchAndFilter();
+  const Editor = contextFilterMapper == null ? void 0 : contextFilterMapper[editorType];
+  if (!Editor) {
+    return null;
+  }
+  if (editorType === "empty") {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Editor, { ...props });
+};
+var filterMapper = {
+  multiChoice: FilterMultiChoiceEditor,
+  singleChoice: FilterSingleChoiceEditor,
+  date: DateEditor,
+  dateRange: DateRangeEditor,
+  text: TextEditor,
+  numberRange: NumberRangeEditor,
+  number: NumberEditor,
+  statusMultiChoice: StatusMultiEditor,
+  statusSingleChoice: StatusSingleEditor,
+  empty: null
+};
+function withInputVariables(WrappedComponent) {
+  const WithInputVariables = (props) => {
+    if (Array.isArray(props.value) || !props.bindable || props.disabled || props.readOnly) {
+      return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(WrappedComponent, { ...props });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+      InputVariables,
+      {
+        disableInlineMenu: true,
+        showMenuPosition: "inline-right",
+        onChange: (newValue) => props.onChange(newValue != null ? newValue : ""),
+        value: props.value,
+        disabled: props.disabled,
+        inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(WrappedComponent, { ...props })
+      }
+    );
+  };
+  return WithInputVariables;
+}
+function withInputVariablesForMultiValue(WrappedComponent) {
+  const WithInputVariables = (props) => {
+    var _a;
+    if (!props.bindable || props.disabled || props.readOnly) {
+      return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(WrappedComponent, { ...props });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+      InputVariables,
+      {
+        disableInlineMenu: true,
+        showMenuPosition: "inline-right",
+        onChange: (newValue) => props.onChange(newValue ? [newValue] : []),
+        value: (_a = props.value) == null ? void 0 : _a[0],
+        inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(WrappedComponent, { ...props })
+      }
+    );
+  };
+  return WithInputVariables;
+}
+var bindableFiltersMapper = {
+  ...filterMapper,
+  multiChoice: withInputVariablesForMultiValue(FilterMultiChoiceEditor),
+  singleChoice: withInputVariables(FilterSingleChoiceEditor),
+  date: withInputVariables(DateEditor),
+  text: withInputVariables(TextEditor),
+  number: withInputVariables(NumberEditor)
+};
+var ErrorContainer = ({ errorMessage }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+    "div",
+    {
+      css: {
+        gridColumn: "span 6",
+        order: 6
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_design_system44.FieldMessage, { errorMessage })
+    }
+  );
+};
+var twoColumnGrid = {
+  display: "grid",
+  gridTemplateColumns: "1fr 1fr",
+  gap: "var(--spacing-sm);"
+};
+
+// src/components/SearchAndFilter/hooks/useSearchAndFilter.tsx
+var import_jsx_runtime73 = require("@emotion/react/jsx-runtime");
+var SearchAndFilterContext = (0, import_react82.createContext)({
+  searchTerm: "",
+  setSearchTerm: () => {
+  },
+  filterVisibility: void 0,
+  setFilterVisibility: () => {
+  },
+  filters: [],
+  setFilters: () => {
+  },
+  handleAddFilter: () => {
+  },
+  handleResetFilters: () => {
+  },
+  handleDeleteFilter: () => {
+  },
+  filterOptions: [],
+  validFilterQuery: [],
+  filterMapper: {},
+  totalResults: 0,
+  allowBindingSearchTerm: false
+});
+var SearchAndFilterProvider = ({
+  filters,
+  filterOptions,
+  filterVisible = false,
+  defaultSearchTerm = "",
+  onSearchChange,
+  onChange,
+  resetFilterValues = [{ field: "", operator: "", value: "" }],
+  totalResults,
+  filterMapper: filterMapper2 = filterMapper,
+  children,
+  allowBindingSearchTerm
+}) => {
+  const [searchTerm, setSearchTerm] = (0, import_react82.useState)(defaultSearchTerm);
+  const deferredSearchTerm = (0, import_react82.useDeferredValue)(searchTerm);
+  const [filterVisibility, setFilterVisibility] = (0, import_react82.useState)(filterVisible);
+  const handleSearchTerm = (0, import_react82.useCallback)(
+    (term) => {
+      setSearchTerm(term);
+      onSearchChange == null ? void 0 : onSearchChange(term);
+    },
+    [setSearchTerm, onSearchChange]
+  );
+  const handleToggleFilterVisibility = (0, import_react82.useCallback)(
+    (visible) => setFilterVisibility(visible),
+    [setFilterVisibility]
+  );
+  const handleAddFilter = (0, import_react82.useCallback)(() => {
+    onChange([...filters, { field: "", operator: "", value: "" }]);
+  }, [filters, onChange]);
+  const handleResetFilters = (0, import_react82.useCallback)(() => {
+    onSearchChange == null ? void 0 : onSearchChange("");
+    onChange(resetFilterValues);
+  }, [onChange, resetFilterValues, onSearchChange]);
+  const handleDeleteFilter = (0, import_react82.useCallback)(
+    (index) => {
+      const remainingFilters = filters.filter((_, i) => i !== index);
+      onChange(remainingFilters);
+    },
+    [filters, onChange]
+  );
+  const validFilterQuery = (0, import_react82.useMemo)(() => {
+    const hasValidFilters = filters.every((f) => f.field && f.operator && f.value);
+    if (hasValidFilters) {
+      return filters;
+    }
+  }, [filters]);
+  (0, import_react82.useEffect)(() => {
+    if (filterVisibility) {
+      const handleEscKeyFilterClose = (e) => {
+        if (e.key === "Escape") {
+          setFilterVisibility(false);
+        }
+      };
+      document.addEventListener("keydown", (e) => handleEscKeyFilterClose(e));
+      return () => {
+        document.removeEventListener("keydown", (e) => handleEscKeyFilterClose(e));
+      };
+    }
+  }, [filterVisibility]);
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+    SearchAndFilterContext.Provider,
+    {
+      value: {
+        searchTerm: deferredSearchTerm,
+        setSearchTerm: (e) => handleSearchTerm(e),
+        filterVisibility,
+        setFilterVisibility: (e) => handleToggleFilterVisibility(e),
+        filters,
+        setFilters: (e) => onChange(e),
+        handleAddFilter,
+        handleResetFilters,
+        handleDeleteFilter,
+        filterOptions,
+        validFilterQuery,
+        totalResults,
+        filterMapper: filterMapper2,
+        allowBindingSearchTerm
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_design_system45.VerticalRhythm, { children })
+    }
+  );
+};
+var useSearchAndFilter = () => {
+  const value = (0, import_react82.useContext)(SearchAndFilterContext);
+  return { ...value };
+};
+
+// src/components/SearchAndFilter/FilterControls.tsx
+var import_jsx_runtime74 = require("@emotion/react/jsx-runtime");
+var FilterControls = ({
+  children,
+  hideSearchInput
+}) => {
+  const {
+    setFilterVisibility,
+    filterVisibility,
+    setSearchTerm,
+    validFilterQuery,
+    searchTerm,
+    allowBindingSearchTerm
+  } = useSearchAndFilter();
+  const editorRef = (0, import_react83.useRef)(null);
+  const hasVariableInSearchTerm = hasReferencedVariables(searchTerm);
+  const [idToResetInputVariables, setIdToResetInputVariables] = (0, import_react83.useState)("data-resource-search-term-input");
+  const [localeSearchTerm, setLocaleSearchTerm] = (0, import_react83.useState)(searchTerm);
+  (0, import_react_use7.useDebounce)(
+    () => {
+      setSearchTerm(localeSearchTerm);
+    },
+    300,
+    [localeSearchTerm]
+  );
+  (0, import_react83.useEffect)(() => {
+    if (searchTerm === "") {
+      setLocaleSearchTerm("");
+      setIdToResetInputVariables(`data-resource-search-term-input-${(0, import_uuid3.v4)()}`);
+    }
+  }, [searchTerm]);
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+      FilterButton2,
+      {
+        "aria-controls": "search-and-filter-options",
+        "aria-label": "filter options",
+        "aria-haspopup": "true",
+        text: "Filter/Sort",
+        "aria-expanded": filterVisibility === true,
+        filterCount: validFilterQuery == null ? void 0 : validFilterQuery.length,
+        onClick: () => setFilterVisibility(!filterVisibility),
+        dataTestId: "filters-button"
+      }
+    ),
+    hideSearchInput ? null : /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { css: BindableKeywordSearchInputStyles, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+        InputVariables,
+        {
+          label: "",
+          id: idToResetInputVariables,
+          showMenuPosition: "inline-right",
+          editorRef,
+          value: localeSearchTerm,
+          onChange: (value) => setLocaleSearchTerm(value != null ? value : ""),
+          disableVariables: !allowBindingSearchTerm,
+          inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+            import_design_system46.InputKeywordSearch,
+            {
+              placeholder: "Search...",
+              onSearchTextChanged: (e) => setLocaleSearchTerm(e),
+              value: localeSearchTerm,
+              compact: true,
+              rounded: true,
+              css: SearchInput
+            }
+          )
+        }
+      ),
+      hasVariableInSearchTerm ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { css: ClearSearchButtonContainer, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+        "button",
+        {
+          css: ClearSearchButtonStyles,
+          onClick: () => {
+            setLocaleSearchTerm("");
+            if (editorRef.current) {
+              if (editorRef.current.getRootElement() !== document.activeElement) {
+                editorRef.current.dispatchCommand(import_lexical11.CLEAR_EDITOR_COMMAND, void 0);
+              }
+            }
+          },
+          type: "button",
+          "data-testid": "keyword-search-clear-button",
+          children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_design_system46.Icon, { icon: import_CgClose5.CgClose, iconColor: "red", size: "1rem" })
+        }
+      ) }) : null
+    ] }),
+    children
+  ] });
+};
+
+// src/components/SearchAndFilter/FilterItem.tsx
+var import_design_system48 = require("@uniformdev/design-system");
+var import_react85 = require("react");
+
+// src/components/SearchAndFilter/FilterMenu.tsx
+var import_design_system47 = require("@uniformdev/design-system");
+var import_react84 = __toESM(require("react"));
+var import_jsx_runtime75 = require("@emotion/react/jsx-runtime");
+var SearchAndFilterOptionsContainer2 = ({
+  buttonRow,
+  additionalFiltersContainer,
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { css: SearchAndFilterOptionsContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { css: SearchAndFilterOptionsInnerContainer, children }),
+    buttonRow ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+      import_design_system47.HorizontalRhythm,
+      {
+        css: SearchAndFilterButtonGroup,
+        gap: "sm",
+        align: "center",
+        justify: "space-between",
+        children: buttonRow
+      }
+    ) : null,
+    additionalFiltersContainer ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { children: additionalFiltersContainer }) : null
+  ] });
+};
+var FilterMenu = ({
+  id,
+  filterTitle = "Show results",
+  menuControls,
+  additionalFiltersContainer,
+  children,
+  dataTestId,
+  resetButtonText = "reset"
+}) => {
+  const { filterVisibility, setFilterVisibility, handleResetFilters, filters } = useSearchAndFilter();
+  const innerMenuRef = import_react84.default.useRef(null);
+  (0, import_react84.useEffect)(() => {
+    var _a;
+    if (filterVisibility) {
+      (_a = innerMenuRef.current) == null ? void 0 : _a.focus();
+    }
+  }, [filterVisibility]);
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_design_system47.VerticalRhythm, { gap: "sm", "aria-haspopup": "true", id, "data-testid": dataTestId, children: filterVisibility ? /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+    SearchAndFilterOptionsContainer2,
+    {
+      buttonRow: menuControls,
+      additionalFiltersContainer,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_design_system47.HorizontalRhythm, { gap: "sm", align: "center", justify: "space-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { css: Title, ref: innerMenuRef, tabIndex: 0, children: filterTitle }),
+          (filters == null ? void 0 : filters.length) ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+            "button",
+            {
+              type: "button",
+              css: ResetConditionsBtn,
+              onClick: () => {
+                handleResetFilters();
+                setFilterVisibility(false);
+              },
+              "data-testid": "reset-filters",
+              children: resetButtonText
+            }
+          ) : null
+        ] }),
+        children
+      ]
+    }
+  ) : null });
+};
+
+// src/components/SearchAndFilter/FilterItem.tsx
+var import_jsx_runtime76 = require("@emotion/react/jsx-runtime");
+var FilterItem = ({
+  index,
+  paramOptions,
+  operatorOptions,
+  valueOptions,
+  onParamChange,
+  onOperatorChange,
+  onValueChange
+}) => {
+  var _a, _b;
+  const { filters, handleDeleteFilter, filterOptions } = useSearchAndFilter();
+  const label = filters[index].field !== "" ? filters[index].field : "unknown filter field";
+  const operatorLabel = filters[index].operator !== "" ? `operator ${filters[index].operator}` : "unknown operator";
+  const metaDataLabel = filters[index].value !== "" ? `value ${filters[index].value}` : "unknown value";
+  const metaDataPossibleOptions = (_b = (_a = operatorOptions.find((op) => filters[index].operator === op.value)) == null ? void 0 : _a.editorType) != null ? _b : "singleChoice";
+  const { selectedFieldValue, selectedOperatorValue, selectedMetaValue, readOnly, bindable } = (0, import_react85.useMemo)(() => {
+    var _a2;
+    const currentSelectedFilter = filterOptions.find((item) => {
+      var _a3;
+      return (_a3 = item.options) == null ? void 0 : _a3.find((op) => op.value === filters[index].field);
+    });
+    const selectedFieldValue2 = (_a2 = currentSelectedFilter == null ? void 0 : currentSelectedFilter.options) == null ? void 0 : _a2.find((item) => {
+      return filters[index].field === item.value;
+    });
+    const isCurrentFieldReadOnly = selectedFieldValue2 == null ? void 0 : selectedFieldValue2.readOnly;
+    const selectedOperatorValue2 = operatorOptions == null ? void 0 : operatorOptions.find((item) => {
+      return filters[index].operator === item.value;
+    });
+    return {
+      selectedFieldValue: selectedFieldValue2,
+      selectedOperatorValue: selectedOperatorValue2 != null ? selectedOperatorValue2 : void 0,
+      selectedMetaValue: filters[index].value,
+      readOnly: isCurrentFieldReadOnly,
+      bindable: selectedFieldValue2 == null ? void 0 : selectedFieldValue2.bindable
+    };
+  }, [filters, filterOptions, index, operatorOptions]);
+  const readOnlyProps = readOnly ? {
+    "aria-readonly": true,
+    isSearchable: false,
+    menuIsOpen: false,
+    isClearable: false
+  } : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { css: ConditionalFilterRow, "data-testid": "filter-item", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { children: index === 0 ? "Where" : "and" }),
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { css: ConditionalInputRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        import_design_system48.InputComboBox,
+        {
+          "aria-label": label,
+          options: paramOptions,
+          onChange: (e) => {
+            var _a2;
+            onParamChange((_a2 = e == null ? void 0 : e.value) != null ? _a2 : "");
+          },
+          isOptionDisabled: (option) => {
+            var _a2;
+            return (_a2 = option == null ? void 0 : option.disabled) != null ? _a2 : false;
+          },
+          styles: {
+            menu(base) {
+              return {
+                ...base,
+                minWidth: "max-content"
+              };
+            }
+          },
+          value: selectedFieldValue,
+          ...readOnlyProps,
+          id: "filter-field",
+          name: `filter-field-${index}`
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        import_design_system48.InputComboBox,
+        {
+          "aria-label": operatorLabel,
+          options: operatorOptions,
+          onChange: (e) => {
+            var _a2;
+            return onOperatorChange((_a2 = e == null ? void 0 : e.value) != null ? _a2 : "");
+          },
+          isDisabled: !filters[index].field,
+          value: selectedOperatorValue,
+          styles: {
+            menu(base) {
+              return {
+                ...base,
+                minWidth: "max-content"
+              };
+            }
+          },
+          ...readOnlyProps,
+          id: "filter-operator",
+          name: `filter-operator-${index}`
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        FilterEditorRenderer,
+        {
+          "aria-label": metaDataLabel,
+          editorType: metaDataPossibleOptions,
+          options: valueOptions,
+          onChange: (e) => onValueChange(e != null ? e : ""),
+          readOnly,
+          bindable,
+          disabled: !filters[index].operator,
+          value: selectedMetaValue,
+          valueTestId: "filter-value"
+        }
+      ),
+      readOnly || index === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => handleDeleteFilter(index),
+          "aria-label": "delete filter",
+          css: IconBtn,
+          "data-testid": "delete-filter",
+          children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_design_system48.Icon, { icon: "trash", iconColor: "red", size: "1rem" })
+        }
+      )
+    ] })
+  ] });
+};
+var FilterItems = ({
+  addButtonText = "add condition",
+  additionalFiltersContainer
+}) => {
+  const { filterOptions, filters, setFilters, handleAddFilter } = useSearchAndFilter();
+  const handleUpdateFilter = (index, prop, value) => {
+    var _a, _b, _c, _d, _e;
+    const next = [...filters];
+    next[index] = { ...next[index], [prop]: value };
+    if (prop === "operator") {
+      if (["eq", "neq", "lt", "gt"].includes(value) && Array.isArray(next[index].value)) {
+        next[index].value = next[index].value[0];
+      }
+      if (filters[index].operator === "ndef" || filters[index].operator === "def") {
+        next[index].value = "";
+      }
+      if (["between"].includes(value) && Array.isArray(next[index].value) === false) {
+        next[index].value = [next[index].value, ""];
+      }
+      if (value === "def" || value === "true") {
+        next[index].value = "true";
+      }
+      if (value === "ndef" || value === "false") {
+        next[index].value = "false";
+      }
+    }
+    if (prop === "field") {
+      const firstOperatorInAvailableOperators = (_e = (_d = (_c = (_b = (_a = filterOptions.find((fo) => {
+        var _a2;
+        return (_a2 = fo.options) == null ? void 0 : _a2.find((op) => op.value === value);
+      })) == null ? void 0 : _a.options) == null ? void 0 : _b.find((op) => op.value === next[index].field)) == null ? void 0 : _c.operatorOptions) == null ? void 0 : _d[0].value) != null ? _e : "eq";
+      next[index].operator = firstOperatorInAvailableOperators;
+      next[index].value = "";
+    }
+    setFilters(next);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+    FilterMenu,
+    {
+      id: "search-and-filter-options",
+      dataTestId: "search-and-filter-options",
+      menuControls: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+        "button",
+        {
+          type: "button",
+          css: AddConditionalBtn,
+          onClick: handleAddFilter,
+          "data-testid": "add-filter",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_design_system48.Icon, { icon: "math-plus", iconColor: "currentColor", size: "1rem" }),
+            addButtonText
+          ]
+        }
+      ),
+      additionalFiltersContainer,
+      children: filters.map((item, i) => {
+        var _a, _b, _c, _d, _e, _f;
+        const availableTypeOptions = (_b = (_a = filterOptions.find((fo) => {
+          var _a2;
+          return (_a2 = fo.options) == null ? void 0 : _a2.find((op) => op.value === item.field);
+        })) == null ? void 0 : _a.options) != null ? _b : [];
+        const possibleValueOptions = (_d = (_c = availableTypeOptions == null ? void 0 : availableTypeOptions.find((op) => op.value === item.field)) == null ? void 0 : _c.valueOptions) != null ? _d : [];
+        const possibleOperators = (_f = (_e = availableTypeOptions == null ? void 0 : availableTypeOptions.find((op) => op.value === item.field)) == null ? void 0 : _e.operatorOptions) != null ? _f : [];
+        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+          FilterItem,
+          {
+            index: i,
+            paramOptions: filterOptions,
+            onParamChange: (e) => handleUpdateFilter(i, "field", e),
+            operatorOptions: possibleOperators,
+            onOperatorChange: (e) => handleUpdateFilter(i, "operator", e),
+            onValueChange: (e) => handleUpdateFilter(i, "value", e),
+            valueOptions: possibleValueOptions
+          },
+          i
+        );
+      })
+    }
+  );
+};
+
+// src/components/SearchAndFilter/SearchAndFilter.tsx
+var import_design_system50 = require("@uniformdev/design-system");
+
+// src/components/SearchAndFilter/SearchAndFilterResultContainer.tsx
+var import_design_system49 = require("@uniformdev/design-system");
+var import_jsx_runtime77 = require("@emotion/react/jsx-runtime");
+var SearchAndFilterResultContainer = ({
+  buttonText,
+  clearButtonLabel = "clear",
+  calloutTitle,
+  calloutText,
+  onHandleClear,
+  hideClearButton
+}) => {
+  const { searchTerm, totalResults, filters, handleResetFilters, setSearchTerm } = useSearchAndFilter();
+  const automateCalloutTitle = () => {
+    if (searchTerm && !filters.length) {
+      return "No search results found";
+    }
+    if (filters.length && !searchTerm) {
+      return "No results match the selected filters";
+    }
+    return "No matching results found";
+  };
+  if (totalResults && totalResults > 0) {
+    return null;
+  }
+  const handleClearSearch = () => {
+    setSearchTerm("");
+    if (onHandleClear) {
+      onHandleClear();
+    } else {
+      handleResetFilters();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_jsx_runtime77.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_design_system49.HorizontalRhythm, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("span", { children: [
+        totalResults,
+        " results ",
+        searchTerm ? `for "${searchTerm}"` : null
+      ] }),
+      !searchTerm || hideClearButton ? null : /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_design_system49.Button, { buttonType: "ghostDestructive", size: "zero", onClick: handleClearSearch, children: clearButtonLabel })
+    ] }),
+    totalResults === 0 ? /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_design_system49.Callout, { title: calloutTitle != null ? calloutTitle : automateCalloutTitle(), type: "note", children: [
+      calloutText ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_design_system49.Paragraph, { children: calloutText }) : null,
+      hideClearButton ? null : /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_design_system49.Button, { buttonType: "tertiaryOutline", size: "xs", onClick: handleClearSearch, children: buttonText != null ? buttonText : "Clear search" })
+    ] }) : null
+  ] });
+};
+
+// src/components/SearchAndFilter/SearchAndFilter.tsx
+var import_jsx_runtime78 = require("@emotion/react/jsx-runtime");
+var SearchAndFilter = ({
+  filters,
+  filterOptions,
+  filterVisible,
+  filterControls,
+  viewSwitchControls,
+  resultsContainerView = /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(SearchAndFilterResultContainer, {}),
+  filterMapper: filterMapper2 = filterMapper,
+  additionalFiltersContainer,
+  onChange,
+  defaultSearchTerm,
+  onSearchChange,
+  totalResults,
+  allowBindingSearchTerm = false,
+  resetFilterValues = []
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+    SearchAndFilterProvider,
+    {
+      filters,
+      filterOptions,
+      filterVisible,
+      onChange,
+      defaultSearchTerm,
+      onSearchChange,
+      totalResults,
+      resetFilterValues,
+      filterMapper: filterMapper2,
+      allowBindingSearchTerm,
+      children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_design_system50.VerticalRhythm, { "data-testid": "search-and-filter", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { css: SearchAndFilterOutterControlWrapper(viewSwitchControls ? "1fr auto" : "1fr"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+            "div",
+            {
+              css: SearchAndFilterControlsWrapper(viewSwitchControls ? "auto 1fr 0.05fr" : "auto 1fr"),
+              children: !filterControls ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(FilterControls, { hideSearchInput: !onSearchChange }) : filterControls
+            }
+          ),
+          viewSwitchControls
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(FilterItems, { additionalFiltersContainer }),
+        resultsContainerView
+      ] })
+    }
+  );
+};
+
+// src/components/SearchAndFilter/SearchOnlyFilter.tsx
+var import_design_system51 = require("@uniformdev/design-system");
+var import_react86 = require("react");
+var import_react_use8 = require("react-use");
+var import_jsx_runtime79 = require("@emotion/react/jsx-runtime");
+var SearchOnlyContext = (0, import_react86.createContext)({
+  searchTerm: "",
+  setSearchTerm: () => {
+  }
+});
+var SearchOnlyFilter = ({ onSearchChange, maxWidth }) => {
+  const { searchTerm, setSearchTerm } = useSearchAndFilter();
+  const [localeSearchTerm, setLocaleSearchTerm] = (0, import_react86.useState)("");
+  (0, import_react_use8.useDebounce)(
+    () => {
+      setSearchTerm(localeSearchTerm);
+      onSearchChange == null ? void 0 : onSearchChange(localeSearchTerm);
+    },
+    300,
+    [localeSearchTerm]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+    SearchOnlyContext.Provider,
+    {
+      value: {
+        searchTerm,
+        setSearchTerm: setLocaleSearchTerm
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { css: { maxWidth: maxWidth != null ? maxWidth : "712px" }, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+        import_design_system51.InputKeywordSearch,
+        {
+          placeholder: "Search...",
+          onSearchTextChanged: (e) => setLocaleSearchTerm(e),
+          value: localeSearchTerm,
+          compact: true,
+          rounded: true
+        }
+      ) })
+    }
+  );
+};
+
+// src/components/SearchAndFilter/SortItems.tsx
+var import_design_system53 = require("@uniformdev/design-system");
+
+// src/components/SearchAndFilter/styles/SortItems.styles.ts
+var import_react87 = require("@emotion/react");
+var import_design_system52 = require("@uniformdev/design-system");
+var ConditionalFilterRow2 = import_react87.css`
+  display: grid;
+  grid-template-columns: 35px 1fr;
+  gap: var(--spacing-sm);
+  margin-left: var(--spacing-base);
+
+  ${(0, import_design_system52.cq)("380px")} {
+    align-items: center;
+
+    &:after {
+      content: '';
+      display: block;
+      height: 1px;
+      background: var(--gray-300);
+      width: calc(100% - var(--spacing-base));
+      margin-left: var(--spacing-base);
+    }
+    &:last-of-type:after {
+      display: none;
+    }
+  }
+
+  &:nth-of-type(2) {
+    margin-left: 0;
+    grid-template-columns: 50px 1fr;
+  }
+
+  ${(0, import_design_system52.cq)("580px")} {
+    &:after {
+      display: none;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: ${import_design_system52.fadeInLtr} var(--duration-fast) var(--timing-ease-out);
+  }
+`;
+var ConditionalInputRow2 = import_react87.css`
+  display: flex;
+  gap: var(--spacing-sm);
+  flex-wrap: wrap;
+
+  ${(0, import_design_system52.cq)("380px")} {
+    & > div:nth-child(-n + 2) {
+      width: calc(50% - var(--spacing-sm));
+    }
+
+    & > div:nth-child(n + 3) {
+      width: calc(100% - 48px);
+    }
+  }
+  ${(0, import_design_system52.cq)("580px")} {
+    display: grid;
+    grid-template-columns: 200px 160px 1fr 32px;
+
+    & > div:nth-child(n) {
+      width: auto;
+    }
+  }
+`;
+var SearchInput2 = import_react87.css`
+  max-height: 40px;
+  min-height: unset;
+`;
+var FilterButton3 = import_react87.css`
+  align-items: center;
+  background: var(--white);
+  border: 1px solid var(--gray-300);
+  border-radius: var(--rounded-full);
+  color: var(--typography-base);
+  display: flex;
+  font-size: var(--fs-sm);
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-base);
+  max-height: 40px;
+  transition: color var(--duration-fast) var(--timing-ease-out),
+    background-color var(--duration-fast) var(--timing-ease-out),
+    border-color var(--duration-fast) var(--timing-ease-out),
+    box-shadow var(--duration-fast) var(--timing-ease-out);
+
+  svg {
+    color: var(--gray-300);
+    transition: color var(--duration-fast) var(--timing-ease-out);
+  }
+
+  &:hover,
+  :where([aria-expanded='true']) {
+    outline: none;
+    background: var(--gray-200);
+    border-color: var(--gray-300);
+
+    svg {
+      color: var(--typography-base);
+    }
+  }
+
+  &:disabled {
+    opacity: var(--opacity-50);
+  }
+`;
+var FilterButtonText2 = import_react87.css`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 14ch;
+`;
+var FilterButtonSelected2 = import_react87.css`
+  background: var(--gray-100);
+  border-color: var(--gray-300);
+
+  svg {
+    color: var(--accent-dark);
+  }
+`;
+var FilterButtonWithOptions2 = import_react87.css`
+  :where([aria-expanded='true']) {
+    background: var(--purple-rain-100);
+    border-color: var(--accent-light);
+    color: var(--typography-base);
+    box-shadow: var(--elevation-100);
+
+    svg {
+      color: var(--accent-dark);
+    }
+  }
+`;
+var SearchIcon2 = import_react87.css`
+  color: var(--icon-color);
+  position: absolute;
+  inset: 0 var(--spacing-base) 0 auto;
+  margin: auto;
+  transition: color var(--duration-fast) var(--timing-ease-out);
+`;
+var AddConditionalBtn2 = import_react87.css`
+  align-items: center;
+  background: transparent;
+  border: none;
+  color: var(--primary-action-default);
+  display: flex;
+  gap: var(--spacing-sm);
+  transition: color var(--duration-fast) var(--timing-ease-out);
+  padding: 0;
+
+  &:hover,
+  &:focus {
+    color: var(--primary-action-hover);
+  }
+
+  &:disabled {
+    color: var(--gray-400);
+  }
+`;
+var Title2 = import_react87.css`
+  color: var(--typography-light);
+
+  &:focus {
+    outline: none;
+  }
+`;
+var ResetConditionsBtn2 = import_react87.css`
+  background: transparent;
+  border: none;
+  color: var(--action-destructive-default);
+  transition: color var(--duration-fast) var(--timing-ease-out);
+  padding: 0;
+
+  &:hover,
+  &:focus {
+    color: var(--action-destructive-hover);
+  }
+`;
+var IconBtn2 = import_react87.css`
+  background: transparent;
+  border: none;
+  padding: var(--spacing-sm);
+`;
+var SearchAndFilterOptionsContainer3 = import_react87.css`
+  background: var(--gray-50);
+  border: 1px solid var(--gray-300);
+  border-radius: var(--rounded-base);
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-md) 0 var(--spacing-base);
+  will-change: height;
+  position: relative;
+  z-index: 1;
+`;
+var SearchAndFilterOptionsInnerContainer2 = import_react87.css`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  padding-inline: var(--spacing-md);
+`;
+var SearchAndFilterButtonGroup2 = import_react87.css`
+  margin-top: var(--spacing-xs);
+  margin-left: calc(56px + var(--spacing-md));
+`;
+var SortFilterWrapper = (hiddenLocaleInput) => import_react87.css`
+  align-items: center;
+  border-top: 1px solid var(--gray-300);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-base);
+  padding: var(--spacing-base) var(--spacing-md) 0;
+  position: relative;
+  z-index: 0;
+
+  ${(0, import_design_system52.cq)("420px")} {
+    display: grid;
+    grid-template-columns: ${hiddenLocaleInput ? "1fr" : "1fr minmax(140px, 0.25fr)"};
+  }
+`;
+var SortFilterInputRow = import_react87.css`
+  align-items: center;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: var(--spacing-base);
+`;
+var InputVariableWrapper = import_react87.css`
+  flex-grow: 1;
+
+  // we need to override label styles nested within the input variable
+  // as these are slightly different from the default label styles
+  label > span {
+    color: var(--typography-light);
+  }
+`;
+
+// src/components/SearchAndFilter/SortItems.tsx
+var import_jsx_runtime80 = require("@emotion/react/jsx-runtime");
+var SortItems = ({
+  sortByLabel = "Sort by",
+  localeLabel = "Show locale",
+  sortOptions,
+  sortByValue,
+  onSortChange,
+  localeValue,
+  localeOptions,
+  onLocaleChange,
+  disableSortBinding
+}) => {
+  var _a, _b;
+  const hideLocaleOptions = !localeOptions || !onLocaleChange;
+  const values = sortByValue == null ? void 0 : sortByValue.split("_");
+  const sortDirection = values == null ? void 0 : values.pop();
+  const sortField = values == null ? void 0 : values.join("_");
+  const currentSelectedOption = (_b = (_a = sortOptions.find((item) => {
+    var _a2;
+    return (_a2 = item.options) == null ? void 0 : _a2.find((option) => option.value === sortField);
+  })) == null ? void 0 : _a.options) == null ? void 0 : _b.find((nestedOption) => nestedOption.value === sortField);
+  const localeLabelValue = sortOptions.length > 1 ? localeLabel : `${localeLabel}s`;
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { css: [SortFilterWrapper(hideLocaleOptions)], "data-testid": "sorting-options", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_design_system53.VerticalRhythm, { gap: "xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { css: Title2, children: sortByLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { css: SortFilterInputRow, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+          InputVariables,
+          {
+            disableInlineMenu: disableSortBinding,
+            showMenuPosition: disableSortBinding ? void 0 : "inline-right",
+            value: sortField,
+            valueToResetTo: "created_at",
+            onChange: (e) => onSortChange(`${e}_${sortDirection}`),
+            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+              import_design_system53.InputComboBox,
+              {
+                id: "sort-by-field",
+                "aria-label": "Sort by",
+                options: sortOptions,
+                onChange: (e) => {
+                  const fieldName = e == null ? void 0 : e.value;
+                  onSortChange(`${fieldName}_${sortDirection}`);
+                },
+                styles: {
+                  menu(base) {
+                    return {
+                      ...base,
+                      minWidth: "max-content"
+                    };
+                  }
+                },
+                value: currentSelectedOption
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+          InputVariables,
+          {
+            disableInlineMenu: disableSortBinding,
+            value: sortDirection,
+            valueToResetTo: "DESC",
+            showMenuPosition: disableSortBinding ? void 0 : "inline-right",
+            onChange: (e) => onSortChange(`${sortField}_${e}`),
+            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+              import_design_system53.SegmentedControl,
+              {
+                noCheckmark: true,
+                name: "sortBy",
+                hideOptionText: true,
+                iconSize: "1rem",
+                size: "xl",
+                options: [
+                  {
+                    label: "Ascending",
+                    icon: "arrow-up",
+                    value: `ASC`,
+                    tooltip: "Ascending (e.g. A-Z, oldest to newest)",
+                    "data-testid": "sort-ascending"
+                  },
+                  {
+                    label: "Descending",
+                    icon: "arrow-down",
+                    value: `DESC`,
+                    tooltip: "Descending (e.g. Z-A, newest to oldest)",
+                    "data-testid": "sort-descending"
+                  }
+                ],
+                onChange: (e) => onSortChange(`${sortField}_${e}`),
+                value: sortDirection
+              }
+            )
+          }
+        )
+      ] })
+    ] }),
+    hideLocaleOptions ? null : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_design_system53.VerticalRhythm, { gap: "xs", css: InputVariableWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+      InputVariables,
+      {
+        label: localeLabelValue,
+        value: localeValue,
+        showMenuPosition: "inline-right",
+        onChange: (e) => onLocaleChange(e != null ? e : ""),
+        inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+          import_design_system53.InputSelect,
+          {
+            name: "localeReturned",
+            "aria-label": localeLabelValue,
+            label: localeLabelValue,
+            showLabel: false,
+            "data-testid": "context-locale",
+            onChange: (e) => {
+              var _a2;
+              return onLocaleChange((_a2 = e.currentTarget.value) != null ? _a2 : "");
+            },
+            options: localeOptions,
+            value: localeValue
+          }
+        )
+      }
+    ) })
+  ] });
+};
+
+// src/index.ts
+var import_design_system54 = require("@uniformdev/design-system");
 __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -7376,21 +9718,35 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   $isVariableNode,
   AddListButton,
   Button,
+  CHECKBOX_OPERATORS,
   Callout,
+  ControlledObjectSearchProvider,
   ControlledValuePlugin,
+  DATE_OPERATORS,
   DISCONNECT_VARIABLE_COMMAND,
   DamSelectedItem,
   DataRefreshButton,
   DataResourceDynamicInputProvider,
+  DataResourceInputContext,
   DataResourceVariablesList,
   DataResourceVariablesListExplicit,
   DataSourceEditor,
   DataTypeEditor,
+  DateEditor,
+  DateRangeEditor,
   DefaultSearchRow,
   DefaultSelectedItem,
   DrawerContent,
   EDIT_VARIABLE_COMMAND,
   EntrySearch,
+  FilterButton,
+  FilterControls,
+  FilterEditorRenderer,
+  FilterItem,
+  FilterItems,
+  FilterMenu,
+  FilterMultiChoiceEditor,
+  FilterSingleChoiceEditor,
   Heading,
   INSERT_VARIABLE_COMMAND,
   Icons,
@@ -7407,16 +9763,22 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   Menu,
   MenuItem,
   MeshApp,
+  NUMBER_OPERATORS,
+  NumberEditor,
+  NumberRangeEditor,
   OPEN_INSERT_VARIABLE_COMMAND,
   ObjectSearchContainer,
+  ObjectSearchContext,
   ObjectSearchFilter,
   ObjectSearchFilterContainer,
   ObjectSearchListItem,
   ObjectSearchListItemLoadingSkeleton,
+  ObjectSearchListOfSearchResults,
   ObjectSearchProvider,
   ObjectSearchResultItem,
   ObjectSearchResultItemButton,
   ObjectSearchResultList,
+  PUBLISH_STATUS_FIELD_OPERATORS,
   ParamTypeDynamicDataProvider,
   ParameterConnectionIndicator,
   ParameterGroup,
@@ -7444,6 +9806,7 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   ProductSearchRow,
   ProductSelectedItem,
   QueryFilter,
+  RICHTEXT_OPERATORS,
   RequestBody,
   RequestHeaders,
   RequestMethodSelect,
@@ -7453,19 +9816,37 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   RequestUrl,
   RequestUrlInput,
   ResolvableLoadingValue,
+  SELECT_OPERATORS,
+  SYSTEM_DATE_OPERATORS,
+  SYSTEM_FIELD_OPERATORS,
   ScrollableList,
   ScrollableListItem,
+  SearchAndFilter,
+  SearchAndFilterContext,
+  SearchAndFilterOptionsContainer,
+  SearchAndFilterProvider,
+  SearchAndFilterResultContainer,
+  SearchOnlyContext,
+  SearchOnlyFilter,
   SelectionField,
+  SortItems,
+  StatusMultiEditor,
+  StatusSingleEditor,
   Switch,
+  TEXTBOX_OPERATORS,
+  TextEditor,
   TextVariableRenderer,
   Textarea,
   Theme,
+  USER_OPERATORS,
   VariableEditor,
   VariableNode,
   VariablesList,
   VariablesPlugin,
   VariablesProvider,
   badgeIcon,
+  bindQuery,
+  bindableFiltersMapper,
   convertConnectedDataToVariable,
   createLocationValidator,
   damSelectItemImage,
@@ -7496,6 +9877,7 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   entrySearchSelectInput,
   entrySearchSelectOption,
   entrySearchWrapper,
+  filterMapper,
   hasReferencedVariables,
   prettifyBindExpression,
   productSearchRowActiveIcon,
@@ -7537,6 +9919,7 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   urlEncodeRequestUrl,
   useConnectedDataAsVariables,
   useContentDataResourceLocaleInfo,
+  useDataResourceDynamicInputs,
   useDynamicInputsAsVariables,
   useMeshLocation,
   useObjectSearchContext,
@@ -7546,10 +9929,12 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   useRequest,
   useRequestHeader,
   useRequestParameter,
+  useSearchAndFilter,
   useUniformMeshSdk,
   useVariableEditor,
   useVariables,
   useVariablesMenu,
+  utilityColors,
   variableDefaultTextValue,
   variablePrefix,
   variableSuffix,