@uniformdev/mesh-sdk-react 19.79.1-alpha.13 → 19.79.1-alpha.25

package/dist/index.js

@@ -33,9 +33,9 @@ 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_system43.AddListButton,
+  Button: () => import_design_system43.Button,
+  Callout: () => import_design_system43.Callout,
   ControlledValuePlugin: () => ControlledValuePlugin,
   DISCONNECT_VARIABLE_COMMAND: () => DISCONNECT_VARIABLE_COMMAND,
   DamSelectedItem: () => DamSelectedItem,
@@ -47,24 +47,24 @@ __export(src_exports, {
   DataTypeEditor: () => DataTypeEditor,
   DefaultSearchRow: () => DefaultSearchRow,
   DefaultSelectedItem: () => DefaultSelectedItem,
-  DrawerContent: () => import_design_system41.DrawerContent,
+  DrawerContent: () => import_design_system43.DrawerContent,
   EDIT_VARIABLE_COMMAND: () => EDIT_VARIABLE_COMMAND,
   EntrySearch: () => EntrySearch,
-  Heading: () => import_design_system41.Heading,
+  Heading: () => import_design_system43.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_system43.Input,
+  InputComboBox: () => import_design_system43.InputComboBox,
+  InputKeywordSearch: () => import_design_system43.InputKeywordSearch,
+  InputSelect: () => import_design_system43.InputSelect,
+  InputToggle: () => import_design_system43.InputToggle,
   InputVariables: () => InputVariables,
-  Label: () => import_design_system41.Label,
+  Label: () => import_design_system43.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_system43.LoadingIndicator,
+  LoadingOverlay: () => import_design_system43.LoadingOverlay,
+  Menu: () => import_design_system43.Menu,
+  MenuItem: () => import_design_system43.MenuItem,
   MeshApp: () => MeshApp,
   OPEN_INSERT_VARIABLE_COMMAND: () => OPEN_INSERT_VARIABLE_COMMAND,
   ObjectSearchContainer: () => ObjectSearchContainer,
@@ -78,22 +78,22 @@ __export(src_exports, {
   ObjectSearchResultList: () => ObjectSearchResultList,
   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_system43.ParameterGroup,
+  ParameterImage: () => import_design_system43.ParameterImage,
+  ParameterImageInner: () => import_design_system43.ParameterImageInner,
+  ParameterInput: () => import_design_system43.ParameterInput,
+  ParameterInputInner: () => import_design_system43.ParameterInputInner,
+  ParameterLabel: () => import_design_system43.ParameterLabel,
+  ParameterMenuButton: () => import_design_system43.ParameterMenuButton,
   ParameterOrSingleVariable: () => ParameterOrSingleVariable,
-  ParameterSelect: () => import_design_system41.ParameterSelect,
-  ParameterSelectInner: () => import_design_system41.ParameterSelectInner,
-  ParameterShell: () => import_design_system41.ParameterShell,
+  ParameterSelect: () => import_design_system43.ParameterSelect,
+  ParameterSelectInner: () => import_design_system43.ParameterSelectInner,
+  ParameterShell: () => import_design_system43.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_system43.ParameterTextarea,
+  ParameterTextareaInner: () => import_design_system43.ParameterTextareaInner,
+  ParameterToggle: () => import_design_system43.ParameterToggle,
+  ParameterToggleInner: () => import_design_system43.ParameterToggleInner,
   ParameterVariables: () => ParameterVariables,
   ProductPreviewList: () => ProductPreviewList,
   ProductQuery: () => ProductQuery,
@@ -112,19 +112,20 @@ __export(src_exports, {
   RequestUrl: () => RequestUrl,
   RequestUrlInput: () => RequestUrlInput,
   ResolvableLoadingValue: () => ResolvableLoadingValue,
-  ScrollableList: () => import_design_system41.ScrollableList,
-  ScrollableListItem: () => import_design_system41.ScrollableListItem,
+  ScrollableList: () => import_design_system43.ScrollableList,
+  ScrollableListItem: () => import_design_system43.ScrollableListItem,
   SelectionField: () => SelectionField,
-  Switch: () => import_design_system41.Switch,
+  Switch: () => import_design_system43.Switch,
   TextVariableRenderer: () => TextVariableRenderer,
-  Textarea: () => import_design_system41.Textarea,
-  Theme: () => import_design_system41.Theme,
+  Textarea: () => import_design_system43.Textarea,
+  Theme: () => import_design_system43.Theme,
   VariableEditor: () => VariableEditor,
   VariableNode: () => VariableNode,
   VariablesList: () => VariablesList,
   VariablesPlugin: () => VariablesPlugin,
   VariablesProvider: () => VariablesProvider,
   badgeIcon: () => badgeIcon,
+  bindableFiltersMapper: () => bindableFiltersMapper,
   convertConnectedDataToVariable: () => convertConnectedDataToVariable,
   createLocationValidator: () => createLocationValidator,
   damSelectItemImage: () => damSelectItemImage,
@@ -3242,23 +3243,67 @@ var variablesTipText = import_react33.css`
   padding: 0 var(--spacing-sm);
 `;
 
-// src/components/Variables/useVariableEditor.ts
-var import_react37 = require("react");
-
 // src/components/Variables/VariablesProvider.tsx
 var import_mitt = __toESM(require("mitt"));
-var import_react36 = require("react");
+var import_react37 = require("react");
+
+// src/components/Variables/util/useVariableEditTransaction.ts
+var import_react34 = require("react");
+function useVariableEditTransaction({
+  events,
+  dispatch,
+  isEditing,
+  variables
+}) {
+  const [isEditingBinding, setIsEditingBinding] = (0, import_react34.useState)();
+  (0, import_react34.useEffect)(() => {
+    if (!isEditingBinding) {
+      return;
+    }
+    const fn = (e) => {
+      isEditingBinding.resolve(e);
+      setIsEditingBinding(void 0);
+    };
+    events.on("editCompleted", fn);
+    return () => events.off("editCompleted", fn);
+  }, [events, isEditingBinding, variables]);
+  (0, import_react34.useEffect)(() => {
+    if (!isEditing) {
+      if (isEditingBinding) {
+        isEditingBinding.resolve({ canceled: true });
+      }
+      setIsEditingBinding(void 0);
+    }
+  }, [isEditing, isEditingBinding]);
+  return (0, import_react34.useCallback)(
+    async function editVariableTxn(variable, context) {
+      if (isEditingBinding) {
+        dispatch({ type: "cancelEdit" });
+      }
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          setIsEditingBinding({
+            resolve,
+            variable
+          });
+          dispatch({ type: "edit", variable, context });
+        });
+      });
+    },
+    [dispatch, isEditingBinding]
+  );
+}
 
 // src/components/Variables/VariableEditor.tsx
 var import_zod = require("@hookform/resolvers/zod");
 var import_design_system16 = require("@uniformdev/design-system");
-var import_react35 = require("react");
+var import_react36 = require("react");
 var import_react_hook_form = require("react-hook-form");
 var import_zod2 = require("zod");
 
 // src/components/Variables/styles/VariableEditor.styles.ts
-var import_react34 = require("@emotion/react");
-var variablesFormContainer = import_react34.css`
+var import_react35 = require("@emotion/react");
+var variablesFormContainer = import_react35.css`
   > * {
     margin: var(--spacing-base) 0 0;
   }
@@ -3278,9 +3323,10 @@ function VariableEditor({
   variable,
   onSubmit,
   onCancel,
+  showDisplayName,
   disableMeshTip
 }) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const { variables } = useVariables();
   const currentVariable = variables[variable];
   const { register, handleSubmit, formState } = (0, import_react_hook_form.useForm)({
@@ -3310,9 +3356,9 @@ function VariableEditor({
     },
     activeWhenEditing: true
   });
-  const nameRef = (0, import_react35.useRef)(null);
+  const nameRef = (0, import_react36.useRef)(null);
   const { ref, ...nameRegister } = register("name");
-  (0, import_react35.useLayoutEffect)(() => {
+  (0, import_react36.useLayoutEffect)(() => {
     if (nameRef.current && !nameRef.current.value) {
       nameRef.current.focus();
     }
@@ -3335,6 +3381,16 @@ function VariableEditor({
           }
         }
       ),
+      showDisplayName ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        import_design_system16.Input,
+        {
+          ...register("displayName"),
+          label: "Display name",
+          autoComplete: "off",
+          caption: "This is the name that will be displayed in the UI. If not provided, the name will be used.",
+          errorMessage: (_f = formState.errors.helpText) == null ? void 0 : _f.message
+        }
+      ) : null,
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         import_design_system16.Input,
         {
@@ -3342,7 +3398,7 @@ function VariableEditor({
           label: "Help Text",
           caption: "Appears when entering a value for this variable.",
           autoComplete: "off",
-          errorMessage: (_f = formState.errors.helpText) == null ? void 0 : _f.message
+          errorMessage: (_g = formState.errors.helpText) == null ? void 0 : _g.message
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
@@ -3351,7 +3407,7 @@ function VariableEditor({
           ...register("default"),
           label: "Default Value",
           autoComplete: "off",
-          errorMessage: (_g = formState.errors.default) == null ? void 0 : _g.message
+          errorMessage: (_h = formState.errors.default) == null ? void 0 : _h.message
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_design_system16.HorizontalRhythm, { justify: "space-between", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_design_system16.HorizontalRhythm, { gap: "sm", children: [
@@ -3378,7 +3434,7 @@ function VariableEditor({
 
 // src/components/Variables/VariablesProvider.tsx
 var import_jsx_runtime32 = require("@emotion/react/jsx-runtime");
-var VariablesContext = (0, import_react36.createContext)(null);
+var VariablesContext = (0, import_react37.createContext)(null);
 function VariablesProvider({
   value,
   onChange,
@@ -3388,9 +3444,9 @@ function VariablesProvider({
   children,
   knownUndefinedValues = {}
 }) {
-  const [editing, setEditing] = (0, import_react36.useState)();
-  const [editingContext, setEditingContext] = (0, import_react36.useState)();
-  const events = (0, import_react36.useMemo)(
+  const [editing, setEditing] = (0, import_react37.useState)();
+  const [editingContext, setEditingContext] = (0, import_react37.useState)();
+  const events = (0, import_react37.useMemo)(
     () => (0, import_mitt.default)(),
     []
   );
@@ -3398,7 +3454,7 @@ function VariablesProvider({
     throw new Error("onChange must be provided when readOnly is false");
   }
   const Editor = editVariableComponent != null ? editVariableComponent : VariableEditor;
-  const valueBasedContextValue = (0, import_react36.useMemo)(
+  const valueBasedContextValue = (0, import_react37.useMemo)(
     () => ({
       flatVariables: flattenVariables(value),
       dispatch: (event) => {
@@ -3436,16 +3492,23 @@ function VariablesProvider({
     }),
     [onChange, readOnly, value]
   );
-  const contextValue = (0, import_react36.useMemo)(() => {
+  const editVariableTxn = useVariableEditTransaction({
+    events,
+    dispatch: valueBasedContextValue.dispatch,
+    isEditing: typeof editing !== "undefined",
+    variables: value
+  });
+  const contextValue = (0, import_react37.useMemo)(() => {
     return {
       ...valueBasedContextValue,
+      editVariableTxn,
       isEditing: typeof editing !== "undefined",
       events,
       canDispatch: true,
       knownUndefinedValues,
       isLoading: !!isLoading
     };
-  }, [editing, events, knownUndefinedValues, valueBasedContextValue, isLoading]);
+  }, [valueBasedContextValue, editVariableTxn, editing, events, knownUndefinedValues, isLoading]);
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(VariablesContext.Provider, { value: contextValue, children: [
     children,
     typeof editing !== "undefined" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
@@ -3476,7 +3539,7 @@ function VariablesProvider({
   ] });
 }
 function useVariables(returnEmptyWithoutProvider = false) {
-  const context = (0, import_react36.useContext)(VariablesContext);
+  const context = (0, import_react37.useContext)(VariablesContext);
   if (!context) {
     if (returnEmptyWithoutProvider) {
       return {
@@ -3484,6 +3547,9 @@ function useVariables(returnEmptyWithoutProvider = false) {
         dispatch: () => {
           throw new Error("No VariablesProvider present");
         },
+        editVariableTxn: async () => {
+          throw new Error("No VariablesProvider present");
+        },
         events: (0, import_mitt.default)(),
         isEditing: false,
         variables: {},
@@ -3506,39 +3572,13 @@ function flattenVariables(variables) {
 
 // src/components/Variables/useVariableEditor.ts
 function useVariableEditor() {
-  const { variables, events, canDispatch, dispatch, isEditing } = useVariables(true);
-  const [isEditingBinding, setIsEditingBinding] = (0, import_react37.useState)();
-  (0, import_react37.useEffect)(() => {
-    if (!canDispatch || !isEditingBinding) {
-      return;
-    }
-    const fn = (e) => {
-      isEditingBinding.resolve(e);
-      setIsEditingBinding(void 0);
-    };
-    events.on("editCompleted", fn);
-    return () => events.off("editCompleted", fn);
-  }, [canDispatch, events, isEditingBinding, variables]);
-  (0, import_react37.useEffect)(() => {
-    if (!isEditing) {
-      setIsEditingBinding(void 0);
-    }
-  }, [isEditing]);
+  const { editVariableTxn, canDispatch } = useVariables(true);
   return {
     async editVariable(variable, context) {
       if (!canDispatch) {
         throw new Error("Cannot edit variable. VariablesProvider is not mounted.");
       }
-      if (isEditingBinding) {
-        throw new Error("Cannot edit variable. Another variable is already being edited.");
-      }
-      return new Promise((resolve) => {
-        setIsEditingBinding({
-          resolve,
-          variable
-        });
-        dispatch({ type: "edit", variable, context });
-      });
+      return editVariableTxn(variable, context);
     }
   };
 }
@@ -3776,6 +3816,15 @@ function VariablesPlugin({
                   editor.dispatchCommand(DISCONNECT_VARIABLE_COMMAND, { sourceKey });
                   return;
                 }
+                editor.update(() => {
+                  const selection = (0, import_lexical3.$getSelection)();
+                  if ((0, import_lexical3.$isNodeSelection)(selection)) {
+                    const selectedNodes = selection.getNodes();
+                    if (selectedNodes.every((node) => $isVariableNode(node))) {
+                      (0, import_lexical3.$setSelection)(null);
+                    }
+                  }
+                });
                 return;
               }
               editor.dispatchCommand(INSERT_VARIABLE_COMMAND, {
@@ -4183,8 +4232,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
@@ -4244,32 +4294,41 @@ var menuBtn2 = import_react42.css`
   transform: translateY(-50%);
 `;
 var input = import_react42.css`
+  --input-padding: 12px var(--spacing-base) 12px var(--spacing-sm);
   appearance: none;
   background-color: var(--white);
-  border: 1px solid var(--gray-200);
+  border: 1px solid var(--gray-300);
   border-radius: var(--rounded-sm);
   color: var(--gray-700);
-  padding-block: var(--spacing-base);
-  padding-left: var(--spacing-base);
-  padding-right: var(--spacing-lg);
-  line-height: 1.75;
+  padding: var(--input-padding);
+  min-height: 50px;
   width: 100%;
   position: relative;
   transition: background var(--duration-fast) var(--timing-ease-out),
     border-color var(--duration-fast) var(--timing-ease-out),
-    color var(--duration-fast) var(--timing-ease-out);
+    color var(--duration-fast) var(--timing-ease-out), box-shadow var(--duration-fast) var(--timing-ease-out);
+
+  &::placeholder {
+    color: var(--gray-400);
+  }
 
+  &:hover {
+    border-color: var(--accent-dark-hover);
+  }
+
+  &[data-focus='true'],
   &:focus,
   &:focus-within {
-    border-color: var(--typography-base);
-    box-shadow: none;
+    border-color: var(--accent-dark-active);
+    box-shadow: var(--elevation-100);
     outline: none;
   }
 
+  &[data-disabled='true'],
   &:disabled,
   &:disabled::placeholder {
     cursor: not-allowed;
-    color: var(--gray-400);
+    color: var(--gray-300);
     border-color: var(--gray-300);
   }
 
@@ -4299,9 +4358,102 @@ var placeholderCompact = import_react42.css`
   inset: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-base);
 `;
 
+// 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");
@@ -4346,7 +4498,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,
@@ -4377,15 +4529,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);
@@ -4416,8 +4568,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,
@@ -4428,10 +4580,11 @@ function SelectVariableMenu({
   tip,
   getEditorContext,
   menuTooltip = "Insert variable",
+  portal,
   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;
@@ -4440,10 +4593,10 @@ function SelectVariableMenu({
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-    import_design_system19.Menu,
+    import_design_system20.Menu,
     {
-      placement: "bottom-start",
-      withoutPortal: true,
+      placement: portal ? "bottom-end" : "bottom-start",
+      portal,
       menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         "button",
         {
@@ -4459,7 +4612,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());
@@ -4469,19 +4622,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,
@@ -4495,9 +4648,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
       ]
     }
@@ -4547,7 +4700,7 @@ function VariableField({
     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;
@@ -4565,14 +4718,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;
@@ -4581,10 +4734,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();
     });
@@ -4637,8 +4790,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) {
@@ -4650,8 +4803,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: [
@@ -4694,10 +4847,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: css38,
   placeholder,
   ...contentEditableProps
 }) {
@@ -4716,7 +4869,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,
@@ -4800,6 +4953,7 @@ function InputVariables(props) {
     value,
     enableEditingVariables,
     disableInlineMenu,
+    showMenuPosition,
     onChange,
     transformPaste,
     showAddVariableMenuOption,
@@ -4816,9 +4970,10 @@ function InputVariables(props) {
     disabled,
     editorRef,
     filterVariable,
-    styleVariant = "default"
+    styleVariant = "default",
+    renderMenuInPortal
   } = 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);
@@ -4832,39 +4987,64 @@ function InputVariables(props) {
       },
       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",
-            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`
+          & > 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
       ]
     }
   );
@@ -4880,7 +5060,7 @@ function InputVariables(props) {
         },
         id: finalId,
         isActive: hadVariablesInValue,
-        disableVariables: disableVariablesForReals || disableInlineMenu === "by-label",
+        disableVariables: disableVariablesForReals || showMenuPosition && showMenuPosition !== "label" || disableInlineMenu === true || disableInlineMenu === "by-label",
         children: input3
       }
     );
@@ -4912,6 +5092,7 @@ function InputVariablesOverlayMenu({
   children,
   disabled,
   useInputWhenNoVariables,
+  portal,
   ...props
 }) {
   if (disabled) {
@@ -4923,6 +5104,7 @@ function InputVariablesOverlayMenu({
       VariablesComposerVariableMenu,
       {
         ...props,
+        portal,
         tip: useInputWhenNoVariables ? void 0 : "Tip: access this list by typing $$",
         buttonCss: menuBtn2
       }
@@ -4934,102 +5116,7 @@ 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,
@@ -5038,7 +5125,7 @@ function ParameterConnectionIndicator({
   disabled,
   menuTooltip = "Insert variable"
 }) {
-  const hasVariablesInValue = (0, import_react52.useMemo)(() => {
+  const hasVariablesInValue = (0, import_react53.useMemo)(() => {
     let result = false;
     (0, import_canvas7.bindVariablesToObject)({
       value,
@@ -5061,7 +5148,7 @@ function ParameterConnectionIndicator({
           {
             title: menuTooltip,
             "aria-pressed": hasVariablesInValue,
-            css: [menuBtn, variableBindButton2],
+            css: [menuBtn, variableBindButton],
             type: "button",
             children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_CgUsbC2.CgUsbC, { size: "1.4rem" })
           }
@@ -5075,21 +5162,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,
@@ -5134,7 +5221,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) {
@@ -5173,7 +5260,7 @@ function ParameterOrSingleVariable(props) {
               VariablesComposerVariableMenu,
               {
                 ...sharedMenuProps,
-                buttonCss: [variableBindButton2],
+                buttonCss: [variableBindButton],
                 buttonProps: hasVariablesInValue ? { "aria-pressed": "true" } : void 0,
                 replaceValueOnVariableInsert: true,
                 filterVariable
@@ -5187,7 +5274,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) {
@@ -5246,8 +5333,8 @@ 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``
                   ]
                 }
               ) }),
@@ -5255,7 +5342,7 @@ function ParameterVariables(props) {
                 VariablesComposerVariableMenu,
                 {
                   ...sharedMenuProps,
-                  buttonCss: [variableBindButton2],
+                  buttonCss: [variableBindButton],
                   tip: useInputWhenNoVariables ? void 0 : "Tip: access this list by typing $$",
                   buttonProps: hasVariablesInValue ? { "aria-pressed": "true" } : void 0,
                   replaceValueOnVariableInsert: useInputWhenNoVariables
@@ -5283,13 +5370,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;   
@@ -5297,7 +5384,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;
@@ -5315,7 +5402,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;
@@ -5325,7 +5412,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;
@@ -5343,13 +5430,13 @@ function VariablesList() {
       const result = [...sorted || []];
       const [removed] = (_b = result == null ? void 0 : result.splice(res.source.index, 1)) != null ? _b : [];
       result == null ? void 0 : result.splice(res.destination.index, 0, removed);
-      const resultAsObj = result.reduce(
-        (acc, item, index) => ({
+      const resultAsObj = result.reduce((acc, item, index) => {
+        const { name, ...variableDefinition } = item;
+        return {
           ...acc,
-          [item.name]: { type: item.type, default: item.default, order: index }
-        }),
-        {}
-      );
+          [item.name]: { ...variableDefinition, order: index }
+        };
+      }, {});
       dispatch({ type: "reorder", result: resultAsObj });
       return result;
     }
@@ -5402,7 +5489,7 @@ function VariablesList() {
                         title: `delete ${text}`,
                         css: [
                           import_design_system25.button,
-                          import_react57.css`
+                          import_react58.css`
                                     background: transparent;
                                   `
                         ],
@@ -5531,9 +5618,9 @@ function TextVariableRenderer({ definition, value, setValue }) {
 }
 
 // src/components/Request/RequestBody.tsx
-var import_react59 = require("@emotion/react");
+var import_react60 = require("@emotion/react");
 var import_design_system27 = require("@uniformdev/design-system");
-var import_react60 = require("react");
+var import_react61 = require("react");
 
 // src/components/Request/RequestProvider.tsx
 var React11 = __toESM(require("react"));
@@ -5617,11 +5704,11 @@ function useRequest() {
 }
 
 // src/components/Request/styles/Request.styles.ts
-var import_react58 = require("@emotion/react");
-var innerContentStyles = import_react58.css`
+var import_react59 = require("@emotion/react");
+var innerContentStyles = import_react59.css`
   background: var(--white);
 `;
-var requestTypeContainer = (bgColor) => import_react58.css`
+var requestTypeContainer = (bgColor) => import_react59.css`
   align-items: start;
   background: ${bgColor};
   display: grid;
@@ -5659,11 +5746,11 @@ var LANGUAGE_TO_CONTENT_TYPE = {
 };
 function RequestBody() {
   const { request, dispatch } = useRequest();
-  const [language, setLanguage] = (0, import_react60.useState)("json");
+  const [language, setLanguage] = (0, import_react61.useState)("json");
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     "div",
     {
-      css: import_react59.css`
+      css: import_react60.css`
         background: var(--white);
       `,
       children: [
@@ -5671,7 +5758,7 @@ function RequestBody() {
           RequestTypeContainer,
           {
             bgColor: "var(--gray-100)",
-            css: import_react59.css`
+            css: import_react60.css`
           padding: var(--spacing-sm) var(--spacing-base);
         `,
             children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
@@ -5942,8 +6029,8 @@ function RequestParameters({
 }
 
 // src/components/Request/RequestUrl.tsx
-var import_react61 = require("@emotion/react");
-var import_react62 = require("react");
+var import_react62 = require("@emotion/react");
+var import_react63 = require("react");
 
 // src/components/Request/urlEncodeRequestParameter.ts
 function urlEncodeRequestUrl(url, varValues) {
@@ -5969,7 +6056,7 @@ function RequestUrl() {
   var _a, _b;
   const { variables } = useVariables();
   const { request } = useRequest();
-  const mergedParameters = (0, import_react62.useMemo)(() => {
+  const mergedParameters = (0, import_react63.useMemo)(() => {
     var _a2;
     if (!((_a2 = request.baseRequest) == null ? void 0 : _a2.parameters)) {
       return request.parameters;
@@ -5979,7 +6066,7 @@ function RequestUrl() {
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     "small",
     {
-      css: import_react61.css`
+      css: import_react62.css`
         display: inline-block;
         margin-bottom: var(--spacing-xs);
         word-break: break-word;
@@ -6217,12 +6304,12 @@ var import_design_system31 = require("@uniformdev/design-system");
 
 // src/hooks/useInitializeUniformMeshSdk.ts
 var import_mesh_sdk = require("@uniformdev/mesh-sdk");
-var import_react63 = require("react");
+var import_react64 = require("react");
 var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
-  const [error, setError] = (0, import_react63.useState)();
-  const [sdk, setSdk] = (0, import_react63.useState)();
-  const initializationInProgress = (0, import_react63.useRef)(false);
-  (0, import_react63.useEffect)(
+  const [error, setError] = (0, import_react64.useState)();
+  const [sdk, setSdk] = (0, import_react64.useState)();
+  const initializationInProgress = (0, import_react64.useRef)(false);
+  (0, import_react64.useEffect)(
     () => {
       if (typeof window === "undefined" || sdk) {
         return;
@@ -6280,7 +6367,7 @@ var MeshApp = ({
 };
 
 // src/components/ObjectSearch/DataRefreshButton.tsx
-var import_react64 = require("@emotion/react");
+var import_react65 = require("@emotion/react");
 var import_design_system32 = require("@uniformdev/design-system");
 var import_jsx_runtime58 = require("@emotion/react/jsx-runtime");
 var DataRefreshButton = ({
@@ -6293,7 +6380,7 @@ var DataRefreshButton = ({
     !isLoading ? null : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       import_design_system32.LoadingIndicator,
       {
-        css: import_react64.css`
+        css: import_react65.css`
             ${isLoading ? "opacity: 0.2;" : void 0}
           `
       }
@@ -6303,15 +6390,15 @@ var DataRefreshButton = ({
 };
 
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
-var import_react67 = require("@emotion/react");
+var import_react68 = require("@emotion/react");
 var import_canvas9 = require("@uniformdev/canvas");
 var import_design_system35 = require("@uniformdev/design-system");
 
 // src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
 var import_canvas8 = require("@uniformdev/canvas");
-var import_react65 = require("react");
+var import_react66 = require("react");
 var import_jsx_runtime59 = require("@emotion/react/jsx-runtime");
-var ObjectSearchContext = (0, import_react65.createContext)({
+var ObjectSearchContext = (0, import_react66.createContext)({
   onSetQuery: () => {
   },
   onSelectItem: () => {
@@ -6332,16 +6419,16 @@ var ObjectSearchProvider = ({
   children,
   defaultQuery
 }) => {
-  const [query, setQuery] = (0, import_react65.useState)({
+  const [query, setQuery] = (0, import_react66.useState)({
     contentType: "",
     keyword: "",
     ...defaultQuery
   });
   const { flatVariables } = useVariables(true);
-  const querySearchDeferred = (0, import_react65.useDeferredValue)(query);
-  const [selectedItems, setSelectedItems] = (0, import_react65.useState)(currentlySelectedItems != null ? currentlySelectedItems : []);
-  const [list, setList] = (0, import_react65.useState)({});
-  const onSetQuery = (0, import_react65.useCallback)(
+  const querySearchDeferred = (0, import_react66.useDeferredValue)(query);
+  const [selectedItems, setSelectedItems] = (0, import_react66.useState)(currentlySelectedItems != null ? currentlySelectedItems : []);
+  const [list, setList] = (0, import_react66.useState)({});
+  const onSetQuery = (0, import_react66.useCallback)(
     (value2) => {
       if (Array.isArray(value2.contentType) && value2.contentType.length > 0) {
         return setQuery({
@@ -6353,7 +6440,7 @@ var ObjectSearchProvider = ({
     },
     [setQuery]
   );
-  const onSelectItem = (0, import_react65.useCallback)(
+  const onSelectItem = (0, import_react66.useCallback)(
     (selectedResult) => {
       if (Array.isArray(selectedResult)) {
         setSelectedItems(selectedResult);
@@ -6367,17 +6454,17 @@ var ObjectSearchProvider = ({
     },
     [setSelectedItems, selectedItems]
   );
-  const onRemoveAllSelectedItems = (0, import_react65.useCallback)(() => {
+  const onRemoveAllSelectedItems = (0, import_react66.useCallback)(() => {
     setSelectedItems([]);
   }, [setSelectedItems]);
-  const onSetList = (0, import_react65.useCallback)(
+  const onSetList = (0, import_react66.useCallback)(
     (value2) => {
       setList(value2);
     },
     [setList]
   );
-  const boundQuery = (0, import_react65.useMemo)(() => bindQuery(query, flatVariables), [query, flatVariables]);
-  const value = (0, import_react65.useMemo)(
+  const boundQuery = (0, import_react66.useMemo)(() => bindQuery(query, flatVariables), [query, flatVariables]);
+  const value = (0, import_react66.useMemo)(
     () => ({
       boundQuery,
       onSetQuery,
@@ -6404,7 +6491,7 @@ var ObjectSearchProvider = ({
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ObjectSearchContext.Provider, { value, children });
 };
 function useObjectSearchContext() {
-  return (0, import_react65.useContext)(ObjectSearchContext);
+  return (0, import_react66.useContext)(ObjectSearchContext);
 }
 function bindQuery(query, inputs) {
   const { result, errors } = (0, import_canvas8.bindVariablesToObject)({
@@ -6422,9 +6509,9 @@ function bindQuery(query, inputs) {
 var import_design_system34 = require("@uniformdev/design-system");
 
 // src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
-var import_react66 = require("@emotion/react");
+var import_react67 = require("@emotion/react");
 var import_design_system33 = require("@uniformdev/design-system");
-var ObjectListItemContainer = import_react66.css`
+var ObjectListItemContainer = import_react67.css`
   align-items: center;
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -6433,11 +6520,11 @@ var ObjectListItemContainer = import_react66.css`
   grid-template-columns: 1fr auto;
   padding: var(--spacing-sm);
 `;
-var ObjectListItemContainerDisabled = import_react66.css`
+var ObjectListItemContainerDisabled = import_react67.css`
   opacity: var(--opacity-50);
   pointer-events: none;
 `;
-var ObjectListItemLoading = import_react66.css`
+var ObjectListItemLoading = import_react67.css`
   animation: ${import_design_system33.skeletonLoading} 1s linear infinite alternate;
   border-color: transparent;
   min-height: 42px;
@@ -6461,36 +6548,36 @@ var ObjectListItemLoading = import_react66.css`
     width: 1rem;
   }
 `;
-var ObjectListItemHeadingGroup = import_react66.css`
+var ObjectListItemHeadingGroup = import_react67.css`
   align-items: center;
   display: grid;
 `;
-var ObjectListItemThumbnail = import_react66.css`
+var ObjectListItemThumbnail = import_react67.css`
   width: 30px;
   object-fit: contain;
 `;
-var ObjectListItemTitle = import_react66.css`
+var ObjectListItemTitle = import_react67.css`
   color: var(--typography-base);
   display: block;
   font-size: var(--fs-sm);
 `;
-var ObjectListItemSubtitle = import_react66.css`
+var ObjectListItemSubtitle = import_react67.css`
   color: var(--gray-500);
   display: block;
   font-size: var(--fs-xs);
   line-height: 1;
 `;
-var ObjectListItemInfoContainer = import_react66.css`
+var ObjectListItemInfoContainer = import_react67.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   justify-content: center;
 `;
-var ObjectListItemControlledContent = import_react66.css`
+var ObjectListItemControlledContent = import_react67.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectListItemUnControlledContent = import_react66.css`
+var ObjectListItemUnControlledContent = import_react67.css`
   margin-top: var(--spacing-sm);
   grid-column: 1 / -1;
 `;
@@ -6507,7 +6594,8 @@ var ObjectSearchListItem = ({
   onSelect,
   isMulti,
   disabled,
-  children
+  children,
+  ...props
 }) => {
   const { onSelectItem, selectedListItems, isMulti: globalIsMulti } = useObjectSearchContext();
   const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
@@ -6527,6 +6615,7 @@ var ObjectSearchListItem = ({
       role: "listitem",
       css: [ObjectListItemContainer, disabled ? ObjectListItemContainerDisabled : void 0],
       "data-testid": "list-item",
+      ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
           "div",
@@ -6575,7 +6664,7 @@ var ObjectSearchContainer = ({
     import_design_system35.ScrollableList,
     {
       role: "list",
-      css: import_react67.css`
+      css: import_react68.css`
         > div {
           transition: max-height var(--duration-slow) var(--timing-ease-out);
           max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
@@ -6648,11 +6737,11 @@ var DefaultResultList = () => {
 
 // src/components/ObjectSearch/ObjectSearchFilter.tsx
 var import_design_system36 = require("@uniformdev/design-system");
-var import_react69 = require("react");
+var import_react70 = require("react");
 
 // src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
-var import_react68 = require("@emotion/react");
-var ObjectSearchFilterContainerLabel = import_react68.css`
+var import_react69 = require("@emotion/react");
+var ObjectSearchFilterContainerLabel = import_react69.css`
   align-items: center;
   display: flex;
   font-size: var(--fs-sm);
@@ -6660,11 +6749,11 @@ var ObjectSearchFilterContainerLabel = import_react68.css`
   line-height: 1rem;
   margin-bottom: var(--spacing-sm);
 `;
-var ObjectSearchFilterContainer = import_react68.css`
+var ObjectSearchFilterContainer = import_react69.css`
   display: grid;
   gap: var(--spacing-base);
 `;
-var ObjectSearchFilterGrid = (gridColumns) => import_react68.css`
+var ObjectSearchFilterGrid = (gridColumns) => import_react69.css`
   display: grid;
   grid-template-columns: ${gridColumns};
   gap: var(--spacing-base);
@@ -6682,7 +6771,7 @@ var ObjectSearchFilter = ({
 }) => {
   var _a, _b;
   const { query, onSetQuery } = useObjectSearchContext();
-  const [searchState, setSearchState] = (0, import_react69.useState)({
+  const [searchState, setSearchState] = (0, import_react70.useState)({
     contentType: (_a = query.contentType) != null ? _a : "",
     keyword: (_b = query.keyword) != null ? _b : ""
   });
@@ -6692,7 +6781,7 @@ var ObjectSearchFilter = ({
     });
     onSetQuery({ ...query, ...value });
   };
-  const memoizedSelectOptions = (0, import_react69.useMemo)(() => {
+  const memoizedSelectOptions = (0, import_react70.useMemo)(() => {
     if (!requireContentType && !(selectOptions == null ? void 0 : selectOptions.length)) {
       return [];
     }
@@ -6721,14 +6810,14 @@ var ObjectSearchFilter = ({
           }
         ) : null,
         /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-          import_design_system36.InputKeywordSearch,
+          import_design_system36.DebouncedInputKeywordSearch,
           {
             inputFieldName: searchInputName,
             placeholder: searchInputPlaceholderText,
-            onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
+            onSearchTextChanged: (keyword) => handleFilterChange({ keyword }),
             disabledFieldSubmission: true,
-            onClear: () => handleFilterChange({ keyword: "" }),
-            value: searchState.keyword
+            defaultValue: searchState.keyword,
+            delay: 300
           }
         )
       ]
@@ -6750,9 +6839,9 @@ var import_design_system38 = 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_react71 = require("@emotion/react");
 var import_design_system37 = require("@uniformdev/design-system");
-var ButtonStyles = import_react70.css`
+var ButtonStyles = import_react71.css`
   ${import_design_system37.button}
   background: transparent;
   border: 1px solid var(--typography-base);
@@ -6779,7 +6868,7 @@ var ButtonStyles = import_react70.css`
     text-decoration: none;
   }
 `;
-var ButtonIcon = import_react70.css`
+var ButtonIcon = import_react71.css`
   width: 1rem;
   height: 1rem;
 `;
@@ -6808,8 +6897,8 @@ var LinkButton = ({
 };
 
 // src/components/ObjectSearch/styles/ObjectSearchResultItem.styles.ts
-var import_react71 = require("@emotion/react");
-var ObjectSearchResultItemContainer = import_react71.css`
+var import_react72 = require("@emotion/react");
+var ObjectSearchResultItemContainer = import_react72.css`
   align-items: center;
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -6825,7 +6914,7 @@ var ObjectSearchResultItemContainer = import_react71.css`
     }
   }
 `;
-var ObjectSearchDragHandle = import_react71.css`
+var ObjectSearchDragHandle = import_react72.css`
   border-left: 2px dotted var(--gray-300);
   border-right: 2px dotted var(--gray-300);
   position: absolute;
@@ -6834,35 +6923,35 @@ var ObjectSearchDragHandle = import_react71.css`
   transition: opacity var(--duration-fast) var(--timing-ease-out);
   opacity: 0;
 `;
-var ObjectSearchResultItemSubtitle = import_react71.css`
+var ObjectSearchResultItemSubtitle = import_react72.css`
   color: var(--gray-500);
   display: block;
   font-size: var(--fs-xs);
   line-height: 1;
 `;
-var ObjectSearchResultItemTitle = import_react71.css`
+var ObjectSearchResultItemTitle = import_react72.css`
   align-items: center;
   color: var(--typography-base);
   display: flex;
   gap: var(--spacing-xs);
 `;
-var ObjectSearchResultItemTimeStamp = import_react71.css`
+var ObjectSearchResultItemTimeStamp = import_react72.css`
   color: var(--gray-500);
   font-size: var(--fs-xs);
 `;
-var ObjectSearchAuthorStateGroup = import_react71.css`
+var ObjectSearchAuthorStateGroup = import_react72.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectSearchUpdateGroup = import_react71.css`
+var ObjectSearchUpdateGroup = import_react72.css`
   display: grid;
 `;
-var ObjectSearchContentContainer = import_react71.css`
+var ObjectSearchContentContainer = import_react72.css`
   display: flex;
   gap: var(--spacing-base);
 `;
-var ObjectSearchImage = import_react71.css`
+var ObjectSearchImage = import_react72.css`
   width: 56px;
   object-fit: contain;
 `;
@@ -6930,26 +7019,26 @@ 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_react73 = require("@emotion/react");
+var ObjectSearchResultListContainer = import_react73.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   justify-content: space-between;
 `;
-var ObjectSearchDragContainer = import_react72.css`
+var ObjectSearchDragContainer = import_react73.css`
   margin: 0 0 var(--spacing-sm);
 `;
-var ObjectSearchContainerDragging = import_react72.css`
+var ObjectSearchContainerDragging = import_react73.css`
   box-shadow: var(--shadow-base);
   opacity: var(--opacity-50);
 `;
-var ObjectSearchResultListCounterContainer = import_react72.css`
+var ObjectSearchResultListCounterContainer = import_react73.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectSearchResultListTitle = import_react72.css`
+var ObjectSearchResultListTitle = import_react73.css`
   font-weight: var(--fw-bold);
   line-height: 1;
 `;
@@ -6961,6 +7050,7 @@ function ObjectSearchResultList({
   removeButtonText = "Remove all",
   onRemoveAllSelected,
   hideRemoveButton = false,
+  resultLabelOverride,
   additionalButtons,
   renderResultComponent = (value) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ObjectSearchResultItem, { ...value }),
   multiSelectId,
@@ -7006,11 +7096,11 @@ function ObjectSearchResultList({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { role: "group", css: ObjectSearchResultListContainer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
+      !resultLabelOverride ? /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
         /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { css: ObjectSearchResultListTitle, children: resultLabelText }),
         " ",
         !selectedListItems.length ? null : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_design_system39.Counter, { count: selectedListItems.length })
-      ] }),
+      ] }) : resultLabelOverride,
       /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { css: ObjectSearchResultListCounterContainer, children: [
         additionalButtons,
         hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
@@ -7053,7 +7143,7 @@ function ObjectSearchResultList({
 
 // src/components/ObjectSearch/QueryFilter.tsx
 var import_design_system40 = require("@uniformdev/design-system");
-var import_react73 = require("react");
+var import_react74 = require("react");
 var import_jsx_runtime67 = require("@emotion/react/jsx-runtime");
 var QueryFilter = ({
   requireContentType,
@@ -7071,34 +7161,32 @@ var QueryFilter = ({
   sortOrderLabel = "Sort Order",
   sortOrderOptions = [
     {
-      name: "Ascending",
-      id: "asc",
+      value: "asc",
       label: "Ascending"
     },
     {
-      name: "Descending",
-      id: "desc",
+      value: "desc",
       label: "Descending"
     }
   ],
   children
 }) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g;
   const { query, onSetQuery } = useObjectSearchContext();
-  const [queryState, setQueryState] = (0, import_react73.useState)({
+  const [queryState, setQueryState] = (0, import_react74.useState)({
     contentType: (_a = query.contentType) != null ? _a : "",
-    keyword: (_b = query.contentType) != null ? _b : "",
-    count: countValue != null ? countValue : 5,
-    sortBy: (_c = sortOptions[0].id) != null ? _c : "",
-    sortOrder: (_d = sortOrderOptions[0].id) != null ? _d : ""
+    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 : ""
   });
   const handleFilterChange = (value) => {
     setQueryState((prev) => ({ ...prev, ...value }));
     onSetQuery({ ...query, ...value });
   };
-  (0, import_react73.useEffect)(() => {
+  (0, import_react74.useEffect)(() => {
     onSetQuery(queryState);
-  }, [onSetQuery, queryState]);
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("fieldset", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { css: ObjectSearchFilterContainerLabel, children: queryFilterTitle }),
     /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { css: ObjectSearchFilterContainer, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_design_system40.VerticalRhythm, { children: [
@@ -7106,20 +7194,20 @@ var QueryFilter = ({
         InputVariables,
         {
           label: searchInputLabel,
-          value: (_e = queryState.keyword) != null ? _e : "",
+          value: (_f = queryState.keyword) != null ? _f : "",
           onChange: (newQuery) => handleFilterChange({ keyword: newQuery }),
           disableInlineMenu: true,
           id: "qf_searchText",
           inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
-            import_design_system40.InputKeywordSearch,
+            import_design_system40.DebouncedInputKeywordSearch,
             {
               id: "qf_searchText",
               inputFieldName: searchInputName,
               placeholder: searchInputPlaceholderText,
-              onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
+              onSearchTextChanged: (keyword) => handleFilterChange({ keyword }),
               disabledFieldSubmission: true,
-              onClear: () => handleFilterChange({ keyword: "" }),
-              value: queryState.keyword
+              delay: 300,
+              defaultValue: queryState.keyword
             }
           )
         }
@@ -7130,7 +7218,7 @@ var QueryFilter = ({
           {
             label: contentTypeLabel,
             id: "qf_contentType",
-            value: (_f = queryState.contentType) != null ? _f : "",
+            value: (_g = queryState.contentType) != null ? _g : "",
             onChange: (newType) => handleFilterChange({ contentType: newType }),
             disableInlineMenu: true,
             inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
@@ -7139,13 +7227,8 @@ var QueryFilter = ({
                 id: "qf_contentType",
                 label: contentTypeLabel,
                 showLabel: false,
-                options: [
-                  ...!requireContentType ? [{ id: "", label: typeSelectorAllTypesOptionText }] : [],
-                  ...contentTypeOptions ? contentTypeOptions.map((option) => {
-                    var _a2;
-                    return { id: option.id, label: (_a2 = option.label) != null ? _a2 : option.name, name: option.name };
-                  }) : []
-                ],
+                defaultOption: requireContentType ? void 0 : typeSelectorAllTypesOptionText,
+                options: contentTypeOptions != null ? contentTypeOptions : [],
                 onChange: (e) => handleFilterChange({ contentType: e.target.value }),
                 value: queryState.contentType
               }
@@ -7160,6 +7243,7 @@ var QueryFilter = ({
             value: queryState.count.toString(10),
             onChange: (newCount) => handleFilterChange({ count: newCount }),
             disableInlineMenu: true,
+            valueToResetTo: "5",
             inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
               import_design_system40.Input,
               {
@@ -7190,16 +7274,8 @@ var QueryFilter = ({
                 label: sortLabel,
                 id: "qf_sortBy",
                 showLabel: false,
-                options: [
-                  {
-                    label: "Select a sort",
-                    id: ""
-                  },
-                  ...sortOptions ? sortOptions.map((option) => {
-                    var _a2;
-                    return { id: option.id, name: option.name, label: (_a2 = option.label) != null ? _a2 : option.name };
-                  }) : []
-                ],
+                defaultOption: "Select a sort",
+                options: sortOptions != null ? sortOptions : [],
                 onChange: (e) => handleFilterChange({ sortBy: e.target.value }),
                 value: queryState.sortBy
               }
@@ -7220,12 +7296,7 @@ var QueryFilter = ({
                 label: sortOrderLabel,
                 id: "qf_sortOrder",
                 showLabel: false,
-                options: [
-                  ...sortOrderOptions ? sortOrderOptions.map((option) => {
-                    var _a2;
-                    return { value: option.id, label: (_a2 = option.label) != null ? _a2 : option.name, name: option.name };
-                  }) : []
-                ],
+                options: sortOrderOptions != null ? sortOrderOptions : [],
                 onChange: (e) => handleFilterChange({ sortOrder: e.target.value }),
                 value: queryState.sortOrder
               }
@@ -7239,7 +7310,7 @@ var QueryFilter = ({
 };
 
 // src/components/ParamTypeDynamicDataProvider.tsx
-var import_react74 = require("react");
+var import_react75 = require("react");
 var import_jsx_runtime68 = require("@emotion/react/jsx-runtime");
 function ParamTypeDynamicDataProvider(props) {
   const { children } = props;
@@ -7248,7 +7319,7 @@ function ParamTypeDynamicDataProvider(props) {
   } = useMeshLocation("paramType");
   const dynamicInputsAsVariables = useDynamicInputsAsVariables(dynamicInputs);
   const connectedDataAsVariables = useConnectedDataAsVariables(connectedData);
-  const variables = (0, import_react74.useMemo)(
+  const variables = (0, import_react75.useMemo)(
     () => ({ ...connectedDataAsVariables, ...dynamicInputsAsVariables }),
     [dynamicInputsAsVariables, connectedDataAsVariables]
   );
@@ -7261,9 +7332,9 @@ var JsonMeshVariableEditor = ({
   variable,
   context
 }) => {
-  const sillyRef = (0, import_react74.useRef)(false);
+  const sillyRef = (0, import_react75.useRef)(false);
   const { editConnectedData } = useMeshLocation("paramType");
-  (0, import_react74.useEffect)(() => {
+  (0, import_react75.useEffect)(() => {
     if (sillyRef.current) {
       return;
     }
@@ -7291,6 +7362,57 @@ var JsonMeshVariableEditor = ({
   return null;
 };
 
+// src/components/SearchAndFilter/filtersMapper.tsx
+var import_design_system41 = require("@uniformdev/design-system");
+var import_design_system42 = require("@uniformdev/design-system");
+var import_jsx_runtime69 = require("@emotion/react/jsx-runtime");
+function withInputVariables(WrappedComponent) {
+  const WithInputVariables = (props) => {
+    if (Array.isArray(props.value) || !props.bindable || props.disabled || props.readOnly) {
+      return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(WrappedComponent, { ...props });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime69.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_runtime69.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_runtime69.jsx)(WrappedComponent, { ...props });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime69.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_runtime69.jsx)(WrappedComponent, { ...props })
+      }
+    );
+  };
+  return WithInputVariables;
+}
+var bindableFiltersMapper = {
+  ...import_design_system41.filterMapper,
+  multiChoice: withInputVariablesForMultiValue(import_design_system41.FilterMultiChoiceEditor),
+  singleChoice: withInputVariables(import_design_system42.FilterSingleChoiceEditor),
+  date: withInputVariables(import_design_system42.DateEditor),
+  text: withInputVariables(import_design_system42.TextEditor),
+  number: withInputVariables(import_design_system42.NumberEditor)
+};
+
 // src/utils/createLocationValidator.ts
 function createLocationValidator(setValue, validate) {
   return (dispatch) => setValue((previous) => {
@@ -7301,19 +7423,19 @@ function createLocationValidator(setValue, validate) {
 
 // src/utils/useContentDataResourceLocaleInfo.ts
 var import_canvas10 = require("@uniformdev/canvas");
-var import_react75 = require("react");
+var import_react76 = require("react");
 function useContentDataResourceLocaleInfo({
   locale,
   setLocale,
   dynamicInputs
 }) {
   var _a;
-  const setLocaleRef = (0, import_react75.useRef)(setLocale);
+  const setLocaleRef = (0, import_react76.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)(() => {
+  (0, import_react76.useEffect)(() => {
     if (locale === void 0 && effectiveLocale && setLocaleRef.current) {
       setLocaleRef.current((0, import_canvas10.createVariableReference)(import_canvas10.LOCALE_DYNAMIC_INPUT_NAME));
     }
@@ -7322,7 +7444,7 @@ function useContentDataResourceLocaleInfo({
 }
 
 // src/index.ts
-var import_design_system41 = require("@uniformdev/design-system");
+var import_design_system43 = 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 = {
@@ -7420,6 +7542,7 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   VariablesPlugin,
   VariablesProvider,
   badgeIcon,
+  bindableFiltersMapper,
   convertConnectedDataToVariable,
   createLocationValidator,
   damSelectItemImage,