@uniformdev/mesh-sdk-react 19.22.1-alpha.8 → 19.23.1-alpha.12

package/dist/index.esm.js

@@ -2921,42 +2921,206 @@ function useMeshLocation(expectedLocation) {
 
 // src/components/Variables/InputVariables.tsx
 init_emotion_jsx_shim();
-import { Caption, ErrorMessage, InfoMessage, Input as Input3, WarningMessage } from "@uniformdev/design-system";
+import { Caption as Caption2, ErrorMessage, InfoMessage, WarningMessage } from "@uniformdev/design-system";
 import * as React11 from "react";
-import { v4 as v42 } from "uuid";
+import { useMemo as useMemo8 } from "react";
+import { v4 as v43 } from "uuid";
 
-// src/components/Variables/SelectVariableMenu.tsx
+// src/components/Variables/composer/PasteTransformerPlugin.tsx
 init_emotion_jsx_shim();
-import { Menu as Menu2, MenuItem as MenuItem2, MenuItemSeparator } from "@uniformdev/design-system";
-import { useEffect as useEffect6, useRef as useRef8, useState as useState8 } from "react";
-import { CgUsbC } from "react-icons/cg";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_HIGH, PASTE_COMMAND } from "lexical";
+import { useEffect as useEffect5 } from "react";
+function PasteTransformerPlugin({ transformPaste }) {
+  const [editor] = useLexicalComposerContext();
+  useEffect5(() => {
+    editor.registerCommand(
+      PASTE_COMMAND,
+      (event) => {
+        var _a;
+        const selection = $getSelection();
+        const pastedText = (_a = event.clipboardData) == null ? void 0 : _a.getData("text/plain");
+        if (pastedText && transformPaste && $isRangeSelection(selection)) {
+          const result = transformPaste(pastedText);
+          if (result !== void 0) {
+            selection.insertText(result);
+            return true;
+          }
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_HIGH
+    );
+  }, [editor, transformPaste]);
+  return null;
+}
 
-// src/components/Variables/styles/InsertVariableMenu.styles.ts
+// src/components/Variables/styles/InputVariables.styles.ts
 init_emotion_jsx_shim();
 import { css as css18 } from "@emotion/react";
+var menuContainer = css18`
+  position: relative;
+`;
 var menuBtn = css18`
-  background: none;
-  border: none;
-  color: var(--gray-500);
-  padding: 0;
+  position: absolute;
+  top: 50%;
+  right: var(--spacing-sm);
+  transform: translateY(-50%);
 `;
-var menuItemTextGroup = css18`
-  align-items: flex-start;
-  display: flex;
-  flex-direction: column;
+var input = css18`
+  appearance: none;
+  background-color: var(--white);
+  border: 1px solid var(--gray-400);
+  border-radius: var(--rounded-md);
+  color: var(--gray-700);
+  padding-block: var(--spacing-sm);
+  padding-left: var(--spacing-base);
+  padding-right: var(--spacing-lg);
+  line-height: 2.5;
+  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);
+
+  &:focus,
+  &:focus-within {
+    border-color: var(--brand-secondary-1);
+    box-shadow: none;
+    outline: none;
+  }
+
+  &:disabled,
+  &:disabled::placeholder {
+    cursor: not-allowed;
+    color: var(--gray-300);
+    border-color: var(--gray-300);
+  }
+
+  > p {
+    margin: 0;
+  }
 `;
-var smallText = css18`
-  font-size: var(--fs-xs);
+
+// src/components/Variables/util/getReferencedVariables.ts
+init_emotion_jsx_shim();
+
+// src/components/Variables/util/parseVariableExpression.ts
+init_emotion_jsx_shim();
+
+// src/components/Variables/util/variableExpression.ts
+init_emotion_jsx_shim();
+var variablePrefix = "${";
+var variableSuffix = "}";
+
+// src/components/Variables/util/parseVariableExpression.ts
+function parseVariableExpression(serialized, onToken) {
+  let buf = [];
+  let state = "text";
+  for (let index = 0; index < serialized.length; index++) {
+    const char = serialized[index];
+    if (char === "$" && serialized.at(index + 1) === "{") {
+      if (serialized.at(index - 1) === "\\") {
+        buf.pop();
+        buf.push(char);
+        continue;
+      }
+      state = "variable";
+      if (buf.length) {
+        onToken(buf.join(""), "text");
+        buf = [];
+      }
+      index++;
+      continue;
+    }
+    if (char === "}" && state === "variable") {
+      state = "text";
+      if (buf.length) {
+        onToken(buf.join(""), "variable");
+        buf = [];
+      }
+      continue;
+    }
+    buf.push(char);
+  }
+  if (buf.length) {
+    if (state === "variable") {
+      state = "text";
+      buf.unshift(variablePrefix);
+    }
+    onToken(buf.join(""), state);
+  }
+}
+
+// src/components/Variables/util/getReferencedVariables.ts
+function getReferencedVariables(value) {
+  const result = [];
+  parseVariableExpression(value, (token, type) => {
+    if (type === "variable") {
+      result.push(token);
+    }
+  });
+  return result;
+}
+
+// src/components/Variables/VariableField.tsx
+init_emotion_jsx_shim();
+
+// src/components/Variables/styles/VariableField.styles.ts
+init_emotion_jsx_shim();
+import { css as css19 } from "@emotion/react";
+var labelText = css19`
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-xs);
+  font-weight: var(--fw-regular);
+  margin: 0 0 var(--spacing-xs);
 `;
-var variablesTipText = css18`
-  ${smallText}
-  color: var(--gray-500);
-  padding: 0 var(--spacing-sm);
+var variableBindButton = css19`
+  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;
+  }
 `;
 
+// src/components/Variables/VariablesComposerVariableMenu.tsx
+init_emotion_jsx_shim();
+import { useLexicalComposerContext as useLexicalComposerContext3 } from "@lexical/react/LexicalComposerContext";
+import { CLEAR_EDITOR_COMMAND } from "lexical";
+
+// src/components/Variables/composer/VariablesPlugin.tsx
+init_emotion_jsx_shim();
+import { css as css21 } from "@emotion/react";
+import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexical/react/LexicalComposerContext";
+import {
+  LexicalTypeaheadMenuPlugin,
+  MenuOption
+} from "@lexical/react/LexicalTypeaheadMenuPlugin";
+import { Caption, MenuGroup, MenuItem as MenuItem2, MenuItemSeparator } from "@uniformdev/design-system";
+import { $insertNodes, $nodesOfType, COMMAND_PRIORITY_NORMAL, createCommand } from "lexical";
+import { useCallback, useEffect as useEffect7, useMemo as useMemo6, useState as useState8 } from "react";
+import { createPortal } from "react-dom";
+
 // src/components/Variables/useOnVariableUpdated.ts
 init_emotion_jsx_shim();
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect6 } from "react";
 
 // src/components/Variables/VariablesProvider.tsx
 init_emotion_jsx_shim();
@@ -2972,13 +3136,13 @@ import { z } from "zod";
 
 // src/components/Variables/styles/VariableEditor.styles.ts
 init_emotion_jsx_shim();
-import { css as css19 } from "@emotion/react";
-var variablesFormContainer = css19`
+import { css as css20 } from "@emotion/react";
+var variablesFormContainer = css20`
   > * {
     margin: var(--spacing-base) 0 0;
   }
 `;
-var variablesFormBtnGroup = css19`
+var variablesFormBtnGroup = css20`
   display: flex;
   gap: var(--spacing-sm);
 `;
@@ -3079,17 +3243,27 @@ function VariablesProvider({
   value,
   onChange,
   editVariableComponent,
+  readOnly,
   children
 }) {
   const [editing, setEditing] = React10.useState();
   const events = React10.useMemo(() => mitt(), []);
+  if (!readOnly && !onChange) {
+    throw new Error("onChange must be provided when readOnly is false");
+  }
   const Editor = editVariableComponent != null ? editVariableComponent : VariableEditor;
   const contextValue = {
     flatVariables: flattenVariables(value),
     dispatch: (event) => {
+      if (readOnly) {
+        console.warn(
+          `Received ignored mutation event in read-only variables context: ${JSON.stringify(event)}`
+        );
+        return;
+      }
       if (event.type === "set") {
         const { name, ...varValue } = event.variable;
-        onChange({ ...contextValue.variables, [event.variable.name]: varValue });
+        onChange == null ? void 0 : onChange({ ...contextValue.variables, [event.variable.name]: varValue });
         if (event.openEditor) {
           setEditing(event.variable.name);
         }
@@ -3098,9 +3272,9 @@ function VariablesProvider({
       } else if (event.type === "remove") {
         const newValue = { ...value };
         delete newValue[event.variable];
-        onChange(newValue);
+        onChange == null ? void 0 : onChange(newValue);
       } else if (event.type === "reorder") {
-        onChange(event.result);
+        onChange == null ? void 0 : onChange(event.result);
       } else {
         throw new Error(`Unknown event ${JSON.stringify(event)}`);
       }
@@ -3118,7 +3292,7 @@ function VariablesProvider({
         onSubmit: (val) => {
           setEditing(void 0);
           const { name, ...varValue } = val;
-          onChange({ ...value, [name]: varValue });
+          onChange == null ? void 0 : onChange({ ...value, [name]: varValue });
           events.emit("update", name);
         },
         onCancel: () => setEditing(void 0),
@@ -3157,7 +3331,7 @@ function flattenVariables(variables) {
 // src/components/Variables/useOnVariableUpdated.ts
 function useOnVariableUpdated(fn2, disabled) {
   const { variables, events } = useVariables();
-  useEffect5(() => {
+  useEffect6(() => {
     if (disabled) {
       return;
     }
@@ -3166,6 +3340,9 @@ function useOnVariableUpdated(fn2, disabled) {
   }, [disabled, events, fn2, variables]);
 }
 
+// src/components/Variables/variablesToGroupedList.ts
+init_emotion_jsx_shim();
+
 // src/components/Variables/variablesToList.ts
 init_emotion_jsx_shim();
 function variablesToList(variables) {
@@ -3185,8 +3362,392 @@ function variablesToList(variables) {
   }));
 }
 
+// src/components/Variables/variablesToGroupedList.ts
+function variablesToGroupedList(variables) {
+  const groups = {};
+  Object.entries(variables || {}).forEach(([name, definition]) => {
+    var _a;
+    const group = (_a = definition.source) != null ? _a : "";
+    if (!groups[group]) {
+      groups[group] = {};
+    }
+    groups[group][name] = definition;
+  });
+  return Object.entries(groups).map(([group, variables2]) => ({
+    name: group,
+    variables: variablesToList(variables2)
+  })).sort((a2, b2) => {
+    var _a, _b;
+    return ((_a = a2.name) != null ? _a : "").localeCompare((_b = b2.name) != null ? _b : "");
+  });
+}
+
+// src/components/Variables/composer/VariableNode.tsx
+init_emotion_jsx_shim();
+import { Chip } from "@uniformdev/design-system";
+import { DecoratorNode } from "lexical";
+import { Fragment as Fragment4 } from "react";
+import { jsx as jsx30 } from "@emotion/react/jsx-runtime";
+var VariableNode = class extends DecoratorNode {
+  constructor(reference, state, key) {
+    super(key);
+    this.reference = reference;
+    this.__state = state;
+  }
+  static getType() {
+    return "variable";
+  }
+  static clone(node) {
+    return new VariableNode(node.reference, { ...node.__state }, node.__key);
+  }
+  /** Imports the node from serialized JSON (i.e. the data provided to the editor's initial state) */
+  static importJSON(serializedNode) {
+    return $createVariableNode(serializedNode.reference, {
+      displayName: serializedNode.reference,
+      referenceIsValid: true,
+      hasClickEvent: void 0
+    });
+  }
+  /**
+   * Updates the node's variables state so it knows its current validity, display name, etc
+   * The plugin updates this whenever the variables prop changes.
+   */
+  setState(state) {
+    this.getWritable().__state = state;
+  }
+  /**
+   * Serializes the node to JSON for editor initial state
+   */
+  exportJSON() {
+    return {
+      reference: this.reference,
+      type: VariableNode.getType(),
+      version: 1
+    };
+  }
+  /**
+   * Copy variable to clipboard in a format we will read back if pasted
+   * (albeit it won't get the fancy chip-node)
+   */
+  getTextContent() {
+    return `\${${this.reference}}`;
+  }
+  /** Creates the DOM wrapper that hosts the node */
+  createDOM() {
+    return document.createElement("span");
+  }
+  updateDOM() {
+    return false;
+  }
+  /**
+   * Render the variable node using React.
+   * NOTE: this is effectively an island of React, and you may not call hooks,
+   * rely on Context, etc in this renderer.
+   */
+  decorate(editor) {
+    const { displayName, hasClickEvent, referenceIsValid } = this.__state;
+    const Wrapper = referenceIsValid ? Fragment4 : UndefinedVariableReference;
+    return /* @__PURE__ */ jsx30(
+      Chip,
+      {
+        text: /* @__PURE__ */ jsx30(Wrapper, { children: displayName || this.reference }),
+        title: !referenceIsValid ? `${this.reference} is not defined.` : hasClickEvent ? "Click to edit" : void 0,
+        onClick: () => {
+          editor.dispatchCommand(EDIT_VARIABLE_COMMAND, {
+            reference: this.reference
+          });
+        }
+      }
+    );
+  }
+  /** Enables keyboard navigation to hop over the node to previous text */
+  isIsolated() {
+    return true;
+  }
+};
+function $createVariableNode(variableReference, state) {
+  return new VariableNode(variableReference, state);
+}
+function UndefinedVariableReference({ children }) {
+  return /* @__PURE__ */ jsx30(
+    "span",
+    {
+      style: {
+        textDecoration: "underline",
+        textDecorationStyle: "wavy",
+        textDecorationColor: "red"
+      },
+      children
+    }
+  );
+}
+
+// src/components/Variables/composer/VariablesPlugin.tsx
+import { jsx as jsx31, jsxs as jsxs18 } from "@emotion/react/jsx-runtime";
+var EDIT_VARIABLE_COMMAND = createCommand("uniform:edit-variable");
+var INSERT_VARIABLE_COMMAND = createCommand("uniform:insert-variable");
+var PUNCTUATION = `\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%'"~=<>_:;`;
+var NAME = "\\b[A-Z][^\\s" + PUNCTUATION + "]";
+var DocumentVariablesRegex = {
+  NAME,
+  PUNCTUATION
+};
+var PUNC = DocumentVariablesRegex.PUNCTUATION;
+var TRIGGERS = ["$"].join("");
+var VALID_CHARS = "[^" + TRIGGERS + PUNC + "\\s]";
+var VALID_JOINS = "(?:\\.[ |$]| |[" + PUNC + "]|)";
+var LENGTH_LIMIT = 75;
+var DollarSignVariablesRegex = new RegExp(
+  "(^.*)([" + TRIGGERS + "]((?:" + VALID_CHARS + VALID_JOINS + "){0," + LENGTH_LIMIT + "}))$"
+);
+function getPossibleQueryMatch(text) {
+  const match = DollarSignVariablesRegex.exec(text);
+  if (match !== null) {
+    const maybeLeadingWhitespace = match[1];
+    const matchingString = match[3];
+    return {
+      leadOffset: match.index + maybeLeadingWhitespace.length,
+      matchingString,
+      replaceableString: match[2]
+    };
+  }
+  return null;
+}
+var ADD_VARIABLE_OPTION = "$$add-variable$$";
+var SOURCE_SEPARATOR = "--";
+function VariablesPlugin({
+  disableVariables,
+  showAddVariableMenuOption,
+  enableEditingVariables
+}) {
+  const [editor] = useLexicalComposerContext2();
+  const { variables, dispatch, isEditing, canDispatch, readOnly } = useVariables();
+  const canEditVariable = canDispatch && enableEditingVariables && !readOnly;
+  const [openedAdd, setOpenedAdd] = useState8(false);
+  useOnVariableUpdated((varName) => {
+    editor.update(() => {
+      editor.dispatchCommand(INSERT_VARIABLE_COMMAND, { reference: varName });
+    });
+  }, !openedAdd);
+  useEffect7(() => {
+    if (openedAdd && !isEditing) {
+      setOpenedAdd(false);
+    }
+  }, [isEditing, openedAdd]);
+  const [queryString, setQueryString] = useState8(null);
+  const { groupedVariables, menuOptions } = useMemo6(() => {
+    const groupedVariables2 = variablesToGroupedList(variables);
+    if (showAddVariableMenuOption) {
+      groupedVariables2.push({
+        name: SOURCE_SEPARATOR,
+        variables: [{ name: ADD_VARIABLE_OPTION, displayName: "Add\u2026", default: "" }]
+      });
+    }
+    const menuOptions2 = [];
+    groupedVariables2.forEach(
+      (group) => group.variables.forEach((variable) => {
+        menuOptions2.push(new MenuOption(variable.name));
+      })
+    );
+    return { menuOptions: menuOptions2, groupedVariables: groupedVariables2 };
+  }, [variables, showAddVariableMenuOption]);
+  const { filteredGroupedVariables, filteredMenuOptions } = useMemo6(() => {
+    if (!queryString) {
+      return {
+        filteredGroupedVariables: groupedVariables,
+        filteredMenuOptions: menuOptions
+      };
+    }
+    const query = queryString.toLowerCase();
+    return {
+      filteredGroupedVariables: groupedVariables.map((group) => ({
+        name: group.name,
+        variables: group.variables.filter(
+          (option) => option.name.toLowerCase().includes(query) || option.name === ADD_VARIABLE_OPTION
+        )
+      })).filter((group) => group.variables.length > 0),
+      filteredMenuOptions: menuOptions.filter(
+        (option) => option.key.includes(query) || option.key === ADD_VARIABLE_OPTION
+      )
+    };
+  }, [queryString, groupedVariables, menuOptions]);
+  const onSelectOption = useCallback(
+    (selectedOption, nodeToReplace, closeMenu) => {
+      if (selectedOption.key === ADD_VARIABLE_OPTION) {
+        setOpenedAdd(true);
+        editor.update(() => {
+          nodeToReplace == null ? void 0 : nodeToReplace.remove();
+        });
+        editor.dispatchCommand(EDIT_VARIABLE_COMMAND, {
+          reference: queryString != null ? queryString : ""
+        });
+      } else {
+        editor.update(() => {
+          var _a;
+          const variableNode = $createVariableNode(selectedOption.key, {
+            displayName: ((_a = variables[selectedOption.key]) == null ? void 0 : _a.displayName) || selectedOption.key,
+            hasClickEvent: canEditVariable,
+            referenceIsValid: Boolean(variables[selectedOption.key])
+          });
+          if (nodeToReplace) {
+            nodeToReplace.replace(variableNode);
+          }
+        });
+      }
+      closeMenu();
+    },
+    [editor, queryString, variables, canEditVariable]
+  );
+  useEffect7(() => {
+    editor.registerCommand(
+      EDIT_VARIABLE_COMMAND,
+      ({ reference }) => {
+        if (!disableVariables && canEditVariable) {
+          dispatch({ type: "edit", variable: reference });
+        }
+        return true;
+      },
+      COMMAND_PRIORITY_NORMAL
+    );
+    editor.registerCommand(
+      INSERT_VARIABLE_COMMAND,
+      ({ reference }) => {
+        var _a;
+        if (!disableVariables) {
+          const variableNode = $createVariableNode(reference, {
+            displayName: ((_a = variables[reference]) == null ? void 0 : _a.displayName) || reference,
+            hasClickEvent: canEditVariable,
+            referenceIsValid: Boolean(variables[reference])
+          });
+          $insertNodes([variableNode]);
+        }
+        return true;
+      },
+      COMMAND_PRIORITY_NORMAL
+    );
+  }, [editor, disableVariables, variables, canDispatch, dispatch, canEditVariable, readOnly]);
+  useEffect7(() => {
+    editor.update(() => {
+      $nodesOfType(VariableNode).forEach((variableNode) => {
+        const targetVar = variables[variableNode.reference];
+        variableNode.setState({
+          displayName: (targetVar == null ? void 0 : targetVar.displayName) || variableNode.reference,
+          hasClickEvent: canEditVariable,
+          referenceIsValid: Boolean(targetVar)
+        });
+      });
+    });
+  }, [editor, variables, canEditVariable]);
+  if (disableVariables) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx31(
+    LexicalTypeaheadMenuPlugin,
+    {
+      onQueryChange: setQueryString,
+      onSelectOption,
+      triggerFn: getPossibleQueryMatch,
+      options: filteredMenuOptions,
+      menuRenderFn: (anchorElementRef, { selectOptionAndCleanUp, setHighlightedIndex, selectedIndex }) => {
+        if (!anchorElementRef.current || groupedVariables.length === 0 || openedAdd) {
+          return null;
+        }
+        let currentCumulativeMenuIndex = -1;
+        return createPortal(
+          /* @__PURE__ */ jsx31(
+            "div",
+            {
+              css: css21`
+              box-shadow: var(--shadow-base);
+              border-radius: var(--rounded-base);
+              background: var(--gray-50);
+              display: flex;
+              flex-direction: column;
+              min-width: 250px;
+              padding: var(--spacing-sm);
+              outline: none;
+              overflow: hidden;
+              position: relative;
+              z-index: var(--z-50);
+            `,
+              children: /* @__PURE__ */ jsx31("div", { children: filteredGroupedVariables.map((group, index) => {
+                var _a, _b;
+                return /* @__PURE__ */ jsxs18(
+                  MenuGroup,
+                  {
+                    title: group.name === SOURCE_SEPARATOR ? "" : (_a = group.name) != null ? _a : "",
+                    children: [
+                      group.name === SOURCE_SEPARATOR ? /* @__PURE__ */ jsx31(MenuItemSeparator, {}) : null,
+                      group.variables.map((variable) => {
+                        var _a2;
+                        currentCumulativeMenuIndex++;
+                        return /* @__PURE__ */ jsxs18(
+                          MenuItem2,
+                          {
+                            active: selectedIndex === currentCumulativeMenuIndex,
+                            onClick: () => {
+                              setHighlightedIndex(currentCumulativeMenuIndex);
+                              selectOptionAndCleanUp(new MenuOption(variable.name));
+                            },
+                            onMouseEnter: () => {
+                              setHighlightedIndex(currentCumulativeMenuIndex);
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx31("div", { children: (_a2 = variable.displayName) != null ? _a2 : variable.name }),
+                              variable.helpText ? /* @__PURE__ */ jsx31(Caption, { children: variable.helpText }) : null
+                            ]
+                          },
+                          variable.name
+                        );
+                      })
+                    ]
+                  },
+                  (_b = group.name) != null ? _b : `none${index}`
+                );
+              }) })
+            }
+          ),
+          anchorElementRef.current
+        );
+      }
+    }
+  );
+}
+
+// src/components/Variables/SelectVariableMenu.tsx
+init_emotion_jsx_shim();
+import { Menu as Menu2, MenuGroup as MenuGroup2, MenuItem as MenuItem3, MenuItemSeparator as MenuItemSeparator2 } from "@uniformdev/design-system";
+import { useEffect as useEffect8, useRef as useRef8, useState as useState9 } from "react";
+import { CgUsbC } from "react-icons/cg";
+
+// src/components/Variables/styles/InsertVariableMenu.styles.ts
+init_emotion_jsx_shim();
+import { css as css22 } from "@emotion/react";
+var menuBtn2 = css22`
+  background: none;
+  border: none;
+  color: var(--gray-500);
+  padding: 0;
+`;
+var menuItemTextGroup = css22`
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  line-height: 1em;
+`;
+var smallText = css22`
+  font-size: var(--fs-xs);
+  color: var(--gray-500);
+`;
+var variablesTipText = css22`
+  ${smallText}
+  color: var(--gray-500);
+  padding: 0 var(--spacing-sm);
+`;
+
 // src/components/Variables/SelectVariableMenu.tsx
-import { Fragment as Fragment4, jsx as jsx30, jsxs as jsxs18 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx32, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
 var SelectVariableMenu = ({
   onSelectVariable,
   onResetVariables,
@@ -3198,167 +3759,102 @@ var SelectVariableMenu = ({
 }) => {
   const { variables, dispatch, isEditing, canDispatch } = useVariables();
   const btnRef = useRef8(null);
-  const [openedAdd, setOpenedAdd] = useState8(false);
+  const [openedAdd, setOpenedAdd] = useState9(false);
   useOnVariableUpdated((varName) => {
     onSelectVariable == null ? void 0 : onSelectVariable({ name: varName, default: "" });
   }, !openedAdd);
-  useEffect6(() => {
+  useEffect8(() => {
     if (openedAdd && !isEditing) {
       setOpenedAdd(false);
     }
   }, [isEditing, openedAdd]);
-  const variablesList = variablesToList(variables);
+  const variablesGroups = variablesToGroupedList(variables);
   const menuHasVariableOptions = Object.entries(variables).length || showAddVariableMenuOption;
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     Menu2,
     {
       placement: "bottom-start",
       forceVisible,
-      menuTrigger: /* @__PURE__ */ jsx30(
+      menuTrigger: /* @__PURE__ */ jsx32(
         "button",
         {
           title: "Insert variable",
           ...buttonProps,
           ref: btnRef,
-          css: [menuBtn, buttonCss],
+          css: [menuBtn2, buttonCss],
           type: "button",
-          children: /* @__PURE__ */ jsx30(CgUsbC, { size: "1.4rem" })
+          children: /* @__PURE__ */ jsx32(CgUsbC, { size: "1.4rem" })
         }
       ),
       menuLabel: "Insert variable",
       children: [
-        variablesList.map((variable) => {
-          const { name, helpText } = variable;
-          return /* @__PURE__ */ jsxs18(
-            MenuItem2,
-            {
-              id: name,
-              css: menuItemTextGroup,
-              onClick: () => onSelectVariable == null ? void 0 : onSelectVariable(variable),
-              children: [
-                /* @__PURE__ */ jsx30("span", { children: name }),
-                helpText ? /* @__PURE__ */ jsx30("small", { css: smallText, children: helpText }) : null
-              ]
-            },
-            name
-          );
+        variablesGroups.map((group) => {
+          var _a;
+          return /* @__PURE__ */ jsx32(MenuGroup2, { title: (_a = group.name) != null ? _a : "", children: group.variables.map((variable) => {
+            const { name, helpText } = variable;
+            return /* @__PURE__ */ jsxs19(
+              MenuItem3,
+              {
+                id: name,
+                css: menuItemTextGroup,
+                onClick: () => onSelectVariable == null ? void 0 : onSelectVariable(variable),
+                children: [
+                  /* @__PURE__ */ jsx32("span", { children: name }),
+                  helpText ? /* @__PURE__ */ jsx32("small", { css: smallText, children: helpText }) : null
+                ]
+              },
+              name
+            );
+          }) }, group.name);
         }),
-        showAddVariableMenuOption && canDispatch ? /* @__PURE__ */ jsxs18(Fragment4, { children: [
-          variablesList.length ? /* @__PURE__ */ jsx30(MenuItemSeparator, {}) : null,
-          /* @__PURE__ */ jsx30(
-            MenuItem2,
+        showAddVariableMenuOption && canDispatch ? /* @__PURE__ */ jsxs19(Fragment5, { children: [
+          variablesGroups.length ? /* @__PURE__ */ jsx32(MenuItemSeparator2, {}) : null,
+          /* @__PURE__ */ jsx32(
+            MenuItem3,
             {
               onClick: () => {
                 setOpenedAdd(true);
                 dispatch({ type: "edit", variable: "" });
               },
-              children: "Add Variable"
+              children: "Add\u2026"
             }
           )
         ] }) : null,
-        menuHasVariableOptions && onResetVariables ? /* @__PURE__ */ jsx30(MenuItemSeparator, {}) : null,
-        onResetVariables ? /* @__PURE__ */ jsx30(MenuItem2, { onClick: onResetVariables, css: { color: "var(--brand-secondary-5)" }, children: "Reset" }) : null,
-        tip && (menuHasVariableOptions || onResetVariables) ? /* @__PURE__ */ jsx30(MenuItemSeparator, {}) : null,
-        tip ? /* @__PURE__ */ jsx30("i", { css: variablesTipText, children: tip }) : null
+        menuHasVariableOptions && onResetVariables ? /* @__PURE__ */ jsx32(MenuItemSeparator2, {}) : null,
+        onResetVariables ? /* @__PURE__ */ jsx32(MenuItem3, { onClick: onResetVariables, css: { color: "var(--brand-secondary-5)" }, children: "Reset" }) : null,
+        tip && (menuHasVariableOptions || onResetVariables) ? /* @__PURE__ */ jsx32(MenuItemSeparator2, {}) : null,
+        tip ? /* @__PURE__ */ jsx32("i", { css: variablesTipText, children: tip }) : null
       ]
     }
   );
 };
 
-// src/components/Variables/styles/InputVariables.styles.ts
-init_emotion_jsx_shim();
-import { css as css20 } from "@emotion/react";
-var menuContainer = css20`
-  position: relative;
-`;
-var menuBtn2 = css20`
-  position: absolute;
-  bottom: 25%;
-  right: var(--spacing-sm);
-`;
-
-// src/components/Variables/util/getReferencedVariables.ts
-init_emotion_jsx_shim();
-
-// src/components/Variables/util/variableExpression.ts
-init_emotion_jsx_shim();
-var variableExpression = /(?<!\\)\${([^}]+)}/g;
-var variablePrefix = "${";
-var variableSuffix = "}";
-
-// src/components/Variables/util/getReferencedVariables.ts
-function getReferencedVariables(value) {
-  const result = [];
-  for (const match of value.matchAll(variableExpression)) {
-    result.push(match[1]);
-  }
-  return result;
-}
-
-// src/components/Variables/util/insertVariableIntoText.ts
-init_emotion_jsx_shim();
-function insertVariableIntoText({
-  variableName: variableName2,
-  value,
-  selectionStart = null,
-  selectionEnd = null
-}) {
-  const variableExpression2 = `${variablePrefix}${variableName2}${variableSuffix}`;
-  if (selectionStart !== null && selectionEnd !== null && selectionStart !== selectionEnd) {
-    return `${value.substring(0, selectionStart)}${variableExpression2}${value.substring(selectionEnd)}`;
-  }
-  const hasCursorPosition = selectionStart !== null;
-  let startOffset = 0;
-  if (hasCursorPosition && value.substring(selectionStart - variablePrefix.length, selectionStart) === variablePrefix) {
-    startOffset = variablePrefix.length;
-  }
-  if (hasCursorPosition) {
-    return `${value.substring(0, selectionStart - startOffset)}${variableExpression2}${value.substring(
-      selectionStart
-    )}`;
-  }
-  return `${value}${variableExpression2}`;
-}
-
-// src/components/Variables/VariableField.tsx
-init_emotion_jsx_shim();
-
-// src/components/Variables/styles/VariableField.styles.ts
-init_emotion_jsx_shim();
-import { css as css21 } from "@emotion/react";
-var labelText = css21`
-  align-items: center;
-  display: flex;
-  gap: var(--spacing-xs);
-  font-weight: var(--fw-regular);
-  margin: 0 0 var(--spacing-xs);
-`;
-var variableBindButton = css21`
-  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;
-  }
-`;
+// src/components/Variables/VariablesComposerVariableMenu.tsx
+import { jsx as jsx33 } from "@emotion/react/jsx-runtime";
+var VariablesComposerVariableMenu = (props) => {
+  const [editor] = useLexicalComposerContext3();
+  const onSelectVariable = (selectedVariable) => {
+    editor.dispatchCommand(INSERT_VARIABLE_COMMAND, {
+      reference: selectedVariable.name
+    });
+  };
+  const onResetVariable = () => {
+    var _a;
+    editor.dispatchCommand(CLEAR_EDITOR_COMMAND, void 0);
+    (_a = props.onResetVariables) == null ? void 0 : _a.call(props);
+  };
+  return /* @__PURE__ */ jsx33(
+    SelectVariableMenu,
+    {
+      ...props,
+      onSelectVariable,
+      onResetVariables: props.onResetVariables ? onResetVariable : void 0
+    }
+  );
+};
 
 // src/components/Variables/VariableField.tsx
-import { jsx as jsx31, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs20 } from "@emotion/react/jsx-runtime";
 function VariableField({
   label,
   selectVariableMenuOptions,
@@ -3369,25 +3865,194 @@ function VariableField({
 }) {
   const { variables } = useVariables(true);
   const varCount = Object.keys(variables).length;
-  const variableSelector = varCount > 0 && (selectVariableMenuOptions == null ? void 0 : selectVariableMenuOptions.onSelectVariable) && !disableVariables ? /* @__PURE__ */ jsx31(
-    SelectVariableMenu,
+  const variableSelector = varCount > 0 && !disableVariables ? /* @__PURE__ */ jsx34(
+    VariablesComposerVariableMenu,
     {
       ...selectVariableMenuOptions,
       buttonCss: [variableBindButton, selectVariableMenuOptions == null ? void 0 : selectVariableMenuOptions.buttonCss],
       buttonProps: isActive ? { "aria-pressed": "true" } : void 0
     }
   ) : null;
-  return /* @__PURE__ */ jsxs19("div", { children: [
-    /* @__PURE__ */ jsxs19("label", { htmlFor: id, css: labelText, children: [
+  return /* @__PURE__ */ jsxs20("div", { children: [
+    /* @__PURE__ */ jsxs20("label", { htmlFor: id, css: labelText, children: [
       variableSelector,
-      /* @__PURE__ */ jsx31("span", { children: label })
+      /* @__PURE__ */ jsx34("span", { children: label })
     ] }),
     children
   ] });
 }
 
+// src/components/Variables/VariablesComposer.tsx
+init_emotion_jsx_shim();
+import { ClearEditorPlugin } from "@lexical/react/LexicalClearEditorPlugin";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
+import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
+import { PlainTextPlugin } from "@lexical/react/LexicalPlainTextPlugin";
+import {
+  LineBreakNode as LineBreakNode2,
+  TextNode as TextNode2
+} from "lexical";
+import { useMemo as useMemo7, useRef as useRef9, useState as useState10 } from "react";
+import { v4 as v42 } from "uuid";
+
+// src/components/Variables/composer/DisablePlugin.tsx
+init_emotion_jsx_shim();
+import { useLexicalComposerContext as useLexicalComposerContext4 } from "@lexical/react/LexicalComposerContext";
+import { useEffect as useEffect9 } from "react";
+function DisablePlugin({ disabled }) {
+  const [editor] = useLexicalComposerContext4();
+  useEffect9(() => {
+    editor.setEditable(!disabled);
+  }, [editor, disabled]);
+  return null;
+}
+
+// src/components/Variables/composer/SingleLineTextPlugin.tsx
+init_emotion_jsx_shim();
+import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
+import { LineBreakNode } from "lexical";
+import { useEffect as useEffect10 } from "react";
+function SingleLineTextPlugin() {
+  const [editor] = useLexicalComposerContext5();
+  useEffect10(() => {
+    editor.registerNodeTransform(LineBreakNode, (node) => {
+      node.remove();
+    });
+  }, [editor]);
+  return null;
+}
+
+// src/components/Variables/VariablesComposer.tsx
+import { Fragment as Fragment6, jsx as jsx35, jsxs as jsxs21 } from "@emotion/react/jsx-runtime";
+function VariablesComposer(props) {
+  const { value, children, onChange, disabled, disableVariables, ...variablesPluginProps } = props;
+  const [namespace] = useState10(v42());
+  const [lastEmittedValue, setLastEmittedValue] = useState10(value);
+  const editorConfig = useMemo7(
+    () => ({
+      namespace,
+      onError(error) {
+        throw error;
+      },
+      nodes: [VariableNode],
+      editorState: deserializeEditorState(props.value)
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [namespace]
+  );
+  const editorState = useRef9();
+  const updateTimeout = useRef9();
+  if (typeof document === "undefined")
+    return null;
+  return /* @__PURE__ */ jsxs21(LexicalComposer, { initialConfig: editorConfig, children: [
+    /* @__PURE__ */ jsx35(
+      OnChangePlugin,
+      {
+        onChange: (state) => {
+          editorState.current = state;
+          if (updateTimeout.current) {
+            clearTimeout(updateTimeout.current);
+          }
+          setTimeout(() => {
+            if (editorState.current) {
+              const valueToEmit = serializeEditorState(editorState.current);
+              if (valueToEmit !== lastEmittedValue) {
+                setLastEmittedValue(valueToEmit);
+                onChange(valueToEmit);
+              }
+            }
+          }, 400);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx35(SingleLineTextPlugin, {}),
+    /* @__PURE__ */ jsx35(ClearEditorPlugin, {}),
+    /* @__PURE__ */ jsx35(VariablesPlugin, { ...variablesPluginProps }),
+    /* @__PURE__ */ jsx35(DisablePlugin, { disabled }),
+    /* @__PURE__ */ jsx35(Fragment6, { children })
+  ] });
+}
+function VariablesComposerInput(props) {
+  return /* @__PURE__ */ jsx35("div", { children: /* @__PURE__ */ jsx35(
+    PlainTextPlugin,
+    {
+      contentEditable: /* @__PURE__ */ jsx35(ContentEditable, { css: input, ...props }),
+      placeholder: null,
+      ErrorBoundary: LexicalErrorBoundary
+    }
+  ) });
+}
+function deserializeEditorState(serialized) {
+  const result = [];
+  parseVariableExpression(serialized, (token, type) => {
+    if (type === "text") {
+      const node = {
+        type: TextNode2.getType(),
+        text: token,
+        mode: "normal",
+        version: 1,
+        detail: 0,
+        format: 0,
+        style: ""
+      };
+      result.push(node);
+    }
+    if (type === "variable") {
+      const node = {
+        type: "variable",
+        reference: token,
+        version: 1
+      };
+      result.push(node);
+    }
+  });
+  const rez = JSON.stringify({
+    root: {
+      children: [
+        {
+          children: result,
+          direction: "ltr",
+          format: "",
+          indent: 0,
+          type: "paragraph",
+          version: 1
+        }
+      ],
+      direction: "ltr",
+      format: "",
+      indent: 0,
+      type: "root",
+      version: 1
+    }
+  });
+  return rez;
+}
+function serializeEditorState(editorState) {
+  const buf = [];
+  serializeRecursive(editorState.toJSON().root, buf);
+  return buf.join("");
+}
+function serializeRecursive(node, buffer) {
+  if (node.type === TextNode2.getType()) {
+    buffer.push(node.text);
+  }
+  if (node.type === VariableNode.getType()) {
+    buffer.push(`\${${node.reference}}`);
+  }
+  if (node.type === LineBreakNode2.getType()) {
+    buffer.push("\n");
+  }
+  if ("children" in node && node.children) {
+    for (const child of node.children) {
+      serializeRecursive(child, buffer);
+    }
+  }
+}
+
 // src/components/Variables/InputVariables.tsx
-import { Fragment as Fragment5, jsx as jsx32, jsxs as jsxs20 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx36, jsxs as jsxs22 } from "@emotion/react/jsx-runtime";
 function InputVariables({
   id,
   "aria-label": ariaLabel,
@@ -3395,38 +4060,20 @@ function InputVariables({
   value,
   disableVariables,
   disableReset,
+  enableEditingVariables,
   disableInlineMenu,
   onChange,
-  onPaste,
+  transformPaste,
   showAddVariableMenuOption,
   inputWhenNoVariables,
   caption,
   errorMessage,
   warningMessage,
   infoMessage,
-  ...inputProps
+  "data-test-id": dataTestId
 }) {
-  var _a, _b;
-  const { variables } = useVariables(true);
-  const inputRef = React11.useRef(null);
-  const [finalId] = React11.useState(id != null ? id : () => v42());
-  const onPasteHandler = (e) => {
-    var _a2, _b2, _c;
-    if (!onPaste) {
-      return;
-    }
-    const pastedValue = (_a2 = e.clipboardData) == null ? void 0 : _a2.getData("text/plain");
-    if (!pastedValue || !e.currentTarget) {
-      return;
-    }
-    const selectionStart = (_b2 = e.currentTarget.selectionStart) != null ? _b2 : 0;
-    const selectionEnd = (_c = e.currentTarget.selectionEnd) != null ? _c : 0;
-    const newValue = e.currentTarget.value.substring(0, selectionStart) + pastedValue + e.currentTarget.value.substring(selectionEnd);
-    onPaste(newValue);
-    e.preventDefault();
-  };
-  const currentCursor = (_b = (_a = inputRef.current) == null ? void 0 : _a.selectionStart) != null ? _b : value.length;
-  const forceMenu = value.substring(currentCursor - 2, currentCursor) === variablePrefix;
+  const { variables, readOnly } = useVariables(true);
+  const [finalId] = React11.useState(id != null ? id : () => v43());
   const hasVariablesInValue = getReferencedVariables(value).length > 0;
   const [hadVariablesInValue, setHadVariablesInValue] = React11.useState(hasVariablesInValue);
   React11.useEffect(() => {
@@ -3434,60 +4081,35 @@ function InputVariables({
       setHadVariablesInValue(true);
     }
   }, [hasVariablesInValue]);
-  const disableVariablesForReals = disableVariables || Object.keys(variables).length === 0 && !showAddVariableMenuOption;
+  const disableVariablesForReals = disableVariables || Object.keys(variables).length === 0 && !showAddVariableMenuOption || readOnly;
   const disableInlineVariablesForReals = disableVariablesForReals || disableInlineMenu;
-  const handleInsertVariable = (variable) => {
-    var _a2, _b2;
-    const baseValue = inputWhenNoVariables && !hasVariablesInValue ? "" : value;
-    handleSetValue(
-      insertVariableIntoText({
-        variableName: variable.name,
-        value: baseValue,
-        selectionEnd: (_a2 = inputRef.current) == null ? void 0 : _a2.selectionEnd,
-        selectionStart: (_b2 = inputRef.current) == null ? void 0 : _b2.selectionStart
-      })
-    );
-  };
-  const handleSetValue = (rawValue) => {
-    onChange(rawValue);
-  };
-  const sharedMenuProps = {
-    onSelectVariable: handleInsertVariable,
-    showAddVariableMenuOption,
-    onResetVariables: hadVariablesInValue && !disableReset ? () => {
-      handleSetValue("");
-      setHadVariablesInValue(false);
-    } : void 0
-  };
-  const input = /* @__PURE__ */ jsxs20("div", { children: [
-    inputWhenNoVariables && !hadVariablesInValue ? inputWhenNoVariables : /* @__PURE__ */ jsx32(
-      InputVariablesShell,
+  const sharedMenuProps = useMemo8(
+    () => ({
+      showAddVariableMenuOption,
+      onResetVariables: disableReset ? void 0 : () => {
+        setHadVariablesInValue(false);
+      }
+    }),
+    [disableReset, showAddVariableMenuOption]
+  );
+  const input2 = /* @__PURE__ */ jsxs22("div", { children: [
+    inputWhenNoVariables && !hadVariablesInValue ? inputWhenNoVariables : /* @__PURE__ */ jsx36(InputVariablesMenu, { ...sharedMenuProps, disabled: disableInlineVariablesForReals, children: /* @__PURE__ */ jsx36(
+      VariablesComposerInput,
       {
-        ...sharedMenuProps,
-        disabled: disableInlineVariablesForReals,
-        forceVisible: forceMenu || void 0,
-        children: /* @__PURE__ */ jsx32(
-          Input3,
-          {
-            id: finalId,
-            ref: inputRef,
-            label: ariaLabel,
-            showLabel: false,
-            value,
-            onChange: (e) => handleSetValue(e.currentTarget.value),
-            onPaste: onPasteHandler,
-            ...inputProps
-          }
-        )
+        id: finalId,
+        "aria-label": ariaLabel,
+        "data-testid": dataTestId,
+        "data-text-value": value
       }
-    ),
-    caption ? /* @__PURE__ */ jsx32(Caption, { children: caption }) : null,
-    errorMessage ? /* @__PURE__ */ jsx32(ErrorMessage, { message: errorMessage }) : null,
-    warningMessage ? /* @__PURE__ */ jsx32(WarningMessage, { message: warningMessage }) : null,
-    infoMessage ? /* @__PURE__ */ jsx32(InfoMessage, { message: infoMessage }) : null
+    ) }),
+    caption ? /* @__PURE__ */ jsx36(Caption2, { children: caption }) : null,
+    errorMessage ? /* @__PURE__ */ jsx36(ErrorMessage, { message: errorMessage }) : null,
+    warningMessage ? /* @__PURE__ */ jsx36(WarningMessage, { message: warningMessage }) : null,
+    infoMessage ? /* @__PURE__ */ jsx36(InfoMessage, { message: infoMessage }) : null
   ] });
+  let body = input2;
   if (label) {
-    return /* @__PURE__ */ jsx32(
+    body = /* @__PURE__ */ jsx36(
       VariableField,
       {
         label,
@@ -3495,29 +4117,49 @@ function InputVariables({
         id: finalId,
         isActive: hadVariablesInValue,
         disableVariables: disableVariablesForReals,
-        children: input
+        children: input2
       }
     );
   }
-  return input;
+  return /* @__PURE__ */ jsxs22(
+    VariablesComposer,
+    {
+      onChange,
+      value,
+      disableVariables: disableVariablesForReals,
+      showAddVariableMenuOption,
+      enableEditingVariables,
+      children: [
+        /* @__PURE__ */ jsx36(PasteTransformerPlugin, { transformPaste }),
+        body
+      ]
+    }
+  );
 }
-function InputVariablesShell({
+function InputVariablesMenu({
   children,
   disabled,
   ...props
 }) {
   if (disabled) {
-    return /* @__PURE__ */ jsx32(Fragment5, { children });
+    return /* @__PURE__ */ jsx36(Fragment7, { children });
   }
-  return /* @__PURE__ */ jsxs20("div", { css: menuContainer, children: [
+  return /* @__PURE__ */ jsxs22("div", { css: menuContainer, children: [
     children,
-    /* @__PURE__ */ jsx32(SelectVariableMenu, { ...props, tip: "Tip: access this list by typing ${", buttonCss: menuBtn2 })
+    /* @__PURE__ */ jsx36(
+      VariablesComposerVariableMenu,
+      {
+        ...props,
+        tip: "Tip: access this list by typing $",
+        buttonCss: menuBtn
+      }
+    )
   ] });
 }
 
 // src/components/Variables/VariablesList.tsx
 init_emotion_jsx_shim();
-import { css as css23 } from "@emotion/react";
+import { css as css24 } from "@emotion/react";
 import {
   AddListButton,
   button,
@@ -3533,8 +4175,8 @@ import { DragDropContext as DragDropContext2, Draggable as Draggable2, Droppable
 
 // src/components/Variables/styles/VariablesList.styles.ts
 init_emotion_jsx_shim();
-import { css as css22 } from "@emotion/react";
-var tableRow = (isDragging) => css22`
+import { css as css23 } from "@emotion/react";
+var tableRow = (isDragging) => css23`
   position: relative;
   ${isDragging ? `
   display: table;   
@@ -3542,7 +4184,7 @@ var tableRow = (isDragging) => css22`
   top: auto !important;
   ` : void 0}
 `;
-var tableCellDragIcon = css22`
+var tableCellDragIcon = css23`
   &::after {
     content: '';
     display: block;
@@ -3560,7 +4202,7 @@ var tableCellDragIcon = css22`
     opacity: 1;
   }
 `;
-var variableName = css22`
+var variableName = css23`
   border: none;
   color: var(--brand-secondary-5);
   font-weight: var(--fw-medium);
@@ -3571,7 +4213,7 @@ var variableName = css22`
   white-space: nowrap;
   max-width: 20ch;
 `;
-var variableValue = css22`
+var variableValue = css23`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -3579,7 +4221,7 @@ var variableValue = css22`
 `;
 
 // src/components/Variables/VariablesList.tsx
-import { Fragment as Fragment6, jsx as jsx33, jsxs as jsxs21 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx37, jsxs as jsxs23 } from "@emotion/react/jsx-runtime";
 function VariablesList() {
   const { variables, dispatch } = useVariables();
   const sorted = variablesToList(variables);
@@ -3600,23 +4242,23 @@ function VariablesList() {
       return result;
     }
   };
-  return /* @__PURE__ */ jsxs21(Fragment6, { children: [
-    /* @__PURE__ */ jsx33(DragDropContext2, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx33(Droppable2, { droppableId: "variables-table", children: (provided) => /* @__PURE__ */ jsxs21(Table, { ...provided.droppableProps, ref: provided.innerRef, children: [
-      /* @__PURE__ */ jsx33(TableHead, { children: /* @__PURE__ */ jsxs21(TableRow, { children: [
-        /* @__PURE__ */ jsx33(TableCellHead, { children: "Name" }),
-        /* @__PURE__ */ jsx33(TableCellHead, { children: "Default Value" }),
-        /* @__PURE__ */ jsx33(TableCellHead, {})
+  return /* @__PURE__ */ jsxs23(Fragment8, { children: [
+    /* @__PURE__ */ jsx37(DragDropContext2, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx37(Droppable2, { droppableId: "variables-table", children: (provided) => /* @__PURE__ */ jsxs23(Table, { ...provided.droppableProps, ref: provided.innerRef, children: [
+      /* @__PURE__ */ jsx37(TableHead, { children: /* @__PURE__ */ jsxs23(TableRow, { children: [
+        /* @__PURE__ */ jsx37(TableCellHead, { children: "Name" }),
+        /* @__PURE__ */ jsx37(TableCellHead, { children: "Default Value" }),
+        /* @__PURE__ */ jsx37(TableCellHead, {})
       ] }) }),
-      /* @__PURE__ */ jsxs21(TableBody, { children: [
+      /* @__PURE__ */ jsxs23(TableBody, { children: [
         sorted.map(({ name, displayName, default: defaultValue }, index) => {
           const text = displayName != null ? displayName : name;
-          return /* @__PURE__ */ jsx33(
+          return /* @__PURE__ */ jsx37(
             Draggable2,
             {
               draggableId: name,
               index,
               isDragDisabled: sorted.length === 1,
-              children: (provided2, snapshot) => /* @__PURE__ */ jsxs21(
+              children: (provided2, snapshot) => /* @__PURE__ */ jsxs23(
                 TableRow,
                 {
                   ref: provided2.innerRef,
@@ -3626,7 +4268,7 @@ function VariablesList() {
                   css: tableRow(snapshot.isDragging),
                   "data-dragging": snapshot.isDragging,
                   children: [
-                    /* @__PURE__ */ jsx33(TableCellData, { css: sorted.length > 1 ? tableCellDragIcon : void 0, children: /* @__PURE__ */ jsx33(
+                    /* @__PURE__ */ jsx37(TableCellData, { css: sorted.length > 1 ? tableCellDragIcon : void 0, children: /* @__PURE__ */ jsx37(
                       "button",
                       {
                         css: variableName,
@@ -3639,21 +4281,21 @@ function VariablesList() {
                         children: text
                       }
                     ) }),
-                    /* @__PURE__ */ jsx33(TableCellData, { children: /* @__PURE__ */ jsx33("span", { css: variableValue, title: defaultValue, children: defaultValue }) }),
-                    /* @__PURE__ */ jsx33(TableCellData, { align: "right", children: /* @__PURE__ */ jsx33(
+                    /* @__PURE__ */ jsx37(TableCellData, { children: /* @__PURE__ */ jsx37("span", { css: variableValue, title: defaultValue, children: defaultValue }) }),
+                    /* @__PURE__ */ jsx37(TableCellData, { align: "right", children: /* @__PURE__ */ jsx37(
                       "button",
                       {
                         type: "button",
                         title: `delete ${text}`,
                         css: [
                           button,
-                          css23`
+                          css24`
                                   background: transparent;
                                 `
                         ],
                         "aria-controls": text,
                         onClick: () => dispatch({ type: "remove", variable: name }),
-                        children: /* @__PURE__ */ jsx33(Icon5, { icon: "trash", iconColor: "red" })
+                        children: /* @__PURE__ */ jsx37(Icon5, { icon: "trash", iconColor: "red" })
                       }
                     ) })
                   ]
@@ -3666,7 +4308,7 @@ function VariablesList() {
         provided.placeholder
       ] })
     ] }) }) }),
-    /* @__PURE__ */ jsx33(
+    /* @__PURE__ */ jsx37(
       AddListButton,
       {
         onButtonClick: () => dispatch({ type: "edit", variable: "" }),
@@ -3680,49 +4322,36 @@ function VariablesList() {
 }
 
 // src/components/DataResourceDynamicInputProvider.tsx
-import { Fragment as Fragment7, jsx as jsx34, jsxs as jsxs22 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx38 } from "@emotion/react/jsx-runtime";
 function DataResourceDynamicInputProvider({
   children,
   dynamicInputs
 }) {
   if (dynamicInputs) {
-    return /* @__PURE__ */ jsx34(DataResourceDynamicInputProviderRenderer, { dynamicInputs, children });
+    return /* @__PURE__ */ jsx38(DataResourceDynamicInputProviderRenderer, { dynamicInputs, children });
   }
-  return /* @__PURE__ */ jsx34(DataResourceDynamicInputProviderContextShim, { children });
+  return /* @__PURE__ */ jsx38(DataResourceDynamicInputProviderContextShim, { children });
 }
 function DataResourceDynamicInputProviderContextShim(props) {
   const {
     metadata: { dynamicInputs }
   } = useMeshLocation("dataResource");
-  return /* @__PURE__ */ jsx34(DataResourceDynamicInputProviderRenderer, { ...props, dynamicInputs });
+  return /* @__PURE__ */ jsx38(DataResourceDynamicInputProviderRenderer, { ...props, dynamicInputs });
 }
 function DataResourceDynamicInputProviderRenderer({
   children,
   dynamicInputs
 }) {
-  return /* @__PURE__ */ jsx34(
-    VariablesProvider,
-    {
-      value: convertDynamicInputsToVariables(dynamicInputs),
-      onChange: () => {
-        throw new Error("Cannot change dynamic inputs. Make sure that add variable is disabled.");
-      },
-      editVariableComponent: () => /* @__PURE__ */ jsx34("span", { children: "Cannot edit dynamic inputs." }),
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx38(VariablesProvider, { value: convertDynamicInputsToVariables(dynamicInputs), readOnly: true, children });
 }
 function convertDynamicInputsToVariables(dynamicInputs) {
   return Object.entries(dynamicInputs).reduce(
-    (acc, [name, input]) => {
+    (acc, [name, input2]) => {
       acc[name] = {
-        type: input.type,
-        default: input.value,
-        helpText: /* @__PURE__ */ jsxs22(Fragment7, { children: [
-          input.value || /* @__PURE__ */ jsx34("em", { children: "not provided" }),
-          ", from ",
-          input.type === "path" ? "URL path" : "query string"
-        ] })
+        type: input2.type,
+        default: input2.value,
+        source: `from ${input2.type === "path" ? "URL path" : "query string"}`,
+        helpText: /* @__PURE__ */ jsx38(Fragment9, { children: input2.value || /* @__PURE__ */ jsx38("em", { children: "not provided" }) })
         // type abuse! 💚
       };
       return acc;
@@ -3734,13 +4363,13 @@ function convertDynamicInputsToVariables(dynamicInputs) {
 // src/components/DataResourceVariablesList.tsx
 init_emotion_jsx_shim();
 import { Callout as Callout4 } from "@uniformdev/design-system";
-import { jsx as jsx35 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx39 } from "@emotion/react/jsx-runtime";
 function DataResourceVariablesList(props) {
   const {
     value,
     metadata: { dataType, dynamicInputs }
   } = useMeshLocation("dataResource");
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx39(
     DataResourceVariablesListExplicit,
     {
       ...props,
@@ -3761,14 +4390,14 @@ function DataResourceVariablesListExplicit({
   const variableDefinitions = variablesToList(dataType.variables);
   if (variableDefinitions.length === 0) {
     if (NoVariablesComponent) {
-      return /* @__PURE__ */ jsx35(NoVariablesComponent, {});
+      return /* @__PURE__ */ jsx39(NoVariablesComponent, {});
     }
-    return /* @__PURE__ */ jsx35(Callout4, { type: "note", children: "No settings are required." });
+    return /* @__PURE__ */ jsx39(Callout4, { type: "note", children: "No settings are required." });
   }
-  return /* @__PURE__ */ jsx35(DataResourceDynamicInputProvider, { dynamicInputs, children: /* @__PURE__ */ jsx35("div", { children: variableDefinitions.map((variableDefinition) => {
+  return /* @__PURE__ */ jsx39(DataResourceDynamicInputProvider, { dynamicInputs, children: /* @__PURE__ */ jsx39("div", { children: variableDefinitions.map((variableDefinition) => {
     var _a, _b, _c;
     const VariableRenderer = variableDefinition.type ? (_a = typeRenderers == null ? void 0 : typeRenderers[variableDefinition.type]) != null ? _a : TextVariableRenderer : TextVariableRenderer;
-    return /* @__PURE__ */ jsx35("div", { children: /* @__PURE__ */ jsx35(
+    return /* @__PURE__ */ jsx39("div", { children: /* @__PURE__ */ jsx39(
       VariableRenderer,
       {
         definition: variableDefinition,
@@ -3791,7 +4420,7 @@ function DataResourceVariablesListExplicit({
 }
 function TextVariableRenderer({ definition, value, setValue }) {
   var _a;
-  return /* @__PURE__ */ jsx35("div", { children: /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx39("div", { children: /* @__PURE__ */ jsx39(
     InputVariables,
     {
       label: definition.displayName || definition.name,
@@ -3807,14 +4436,14 @@ init_emotion_jsx_shim();
 
 // src/components/Request/RequestBody.tsx
 init_emotion_jsx_shim();
-import { css as css25 } from "@emotion/react";
+import { css as css26 } from "@emotion/react";
 import { InputSelect as InputSelect4, JsonEditor } from "@uniformdev/design-system";
-import { useState as useState10 } from "react";
+import { useState as useState12 } from "react";
 
 // src/components/Request/RequestProvider.tsx
 init_emotion_jsx_shim();
 import * as React12 from "react";
-import { jsx as jsx36 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx40 } from "@emotion/react/jsx-runtime";
 var RequestContext = React12.createContext(null);
 function RequestProvider({ value, onChange, children }) {
   const contextValue = React12.useMemo(() => {
@@ -3883,7 +4512,7 @@ function RequestProvider({ value, onChange, children }) {
       request: value
     };
   }, [onChange, value]);
-  return /* @__PURE__ */ jsx36(RequestContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx40(RequestContext.Provider, { value: contextValue, children });
 }
 function useRequest() {
   const context = React12.useContext(RequestContext);
@@ -3898,11 +4527,11 @@ init_emotion_jsx_shim();
 
 // src/components/Request/styles/Request.styles.ts
 init_emotion_jsx_shim();
-import { css as css24 } from "@emotion/react";
-var innerContentStyles = css24`
+import { css as css25 } from "@emotion/react";
+var innerContentStyles = css25`
   background: var(--white);
 `;
-var requestTypeContainer = (bgColor) => css24`
+var requestTypeContainer = (bgColor) => css25`
   align-items: start;
   background: ${bgColor};
   display: grid;
@@ -3911,17 +4540,17 @@ var requestTypeContainer = (bgColor) => css24`
 `;
 
 // src/components/Request/RequestTypeContainer.tsx
-import { jsx as jsx37 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx41 } from "@emotion/react/jsx-runtime";
 var RequestTypeContainer = ({
   bgColor = "transparent",
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx37("div", { css: requestTypeContainer(bgColor), ...props, children });
+  return /* @__PURE__ */ jsx41("div", { css: requestTypeContainer(bgColor), ...props, children });
 };
 
 // src/components/Request/RequestBody.tsx
-import { jsx as jsx38, jsxs as jsxs23 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs24 } from "@emotion/react/jsx-runtime";
 var LANGUAGE_OPTIONS = [
   { label: "Text", value: "plaintext" },
   { label: "JSON", value: "json" },
@@ -3940,22 +4569,22 @@ var LANGUAGE_TO_CONTENT_TYPE = {
 };
 function RequestBody() {
   const { request, dispatch } = useRequest();
-  const [language, setLanguage] = useState10("json");
-  return /* @__PURE__ */ jsxs23(
+  const [language, setLanguage] = useState12("json");
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
-      css: css25`
+      css: css26`
         background: var(--white);
       `,
       children: [
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx42(
           RequestTypeContainer,
           {
             bgColor: "var(--gray-100)",
-            css: css25`
+            css: css26`
           padding: var(--spacing-sm) var(--spacing-base);
         `,
-            children: /* @__PURE__ */ jsx38(
+            children: /* @__PURE__ */ jsx42(
               InputSelect4,
               {
                 label: "Language",
@@ -3978,7 +4607,7 @@ function RequestBody() {
             )
           }
         ),
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx42(
           JsonEditor,
           {
             height: 200,
@@ -3998,7 +4627,7 @@ function RequestBody() {
 // src/components/Request/RequestHeaders.tsx
 init_emotion_jsx_shim();
 import {
-  Input as Input4,
+  Input as Input3,
   Table as Table2,
   TableBody as TableBody2,
   TableCellData as TableCellData2,
@@ -4007,7 +4636,7 @@ import {
   TableRow as TableRow2,
   WarningMessage as WarningMessage2
 } from "@uniformdev/design-system";
-import { jsx as jsx39, jsxs as jsxs24 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs25 } from "@emotion/react/jsx-runtime";
 function RequestHeaders({ disableVariables }) {
   var _a, _b;
   const { dispatch, request } = useRequest();
@@ -4023,29 +4652,29 @@ function RequestHeaders({ disableVariables }) {
       index
     });
   };
-  return /* @__PURE__ */ jsx39("div", { css: innerContentStyles, children: /* @__PURE__ */ jsxs24(Table2, { children: [
-    /* @__PURE__ */ jsx39(TableHead2, { children: /* @__PURE__ */ jsxs24(TableRow2, { children: [
-      /* @__PURE__ */ jsx39(TableCellHead2, { children: "Name" }),
-      /* @__PURE__ */ jsx39(TableCellHead2, { children: "Value" })
+  return /* @__PURE__ */ jsx43("div", { css: innerContentStyles, children: /* @__PURE__ */ jsxs25(Table2, { children: [
+    /* @__PURE__ */ jsx43(TableHead2, { children: /* @__PURE__ */ jsxs25(TableRow2, { children: [
+      /* @__PURE__ */ jsx43(TableCellHead2, { children: "Name" }),
+      /* @__PURE__ */ jsx43(TableCellHead2, { children: "Value" })
     ] }) }),
-    /* @__PURE__ */ jsxs24(TableBody2, { children: [
+    /* @__PURE__ */ jsxs25(TableBody2, { children: [
       (_b = (_a = request.baseRequest) == null ? void 0 : _a.headers) == null ? void 0 : _b.map((baseHeader) => {
-        return /* @__PURE__ */ jsxs24(TableRow2, { children: [
-          /* @__PURE__ */ jsxs24(TableCellData2, { width: "50%", children: [
+        return /* @__PURE__ */ jsxs25(TableRow2, { children: [
+          /* @__PURE__ */ jsxs25(TableCellData2, { width: "50%", children: [
             baseHeader.key,
-            /* @__PURE__ */ jsx39("br", {}),
-            /* @__PURE__ */ jsx39("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ jsx39("small", { children: "from data source" }) })
+            /* @__PURE__ */ jsx43("br", {}),
+            /* @__PURE__ */ jsx43("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ jsx43("small", { children: "from data source" }) })
           ] }),
-          /* @__PURE__ */ jsxs24(TableCellData2, { width: "50%", children: [
-            /* @__PURE__ */ jsx39("i", { css: { color: "var(--gray-500)" }, children: baseHeader.value }),
-            request.headers.find((p2) => p2.key === baseHeader.key) ? /* @__PURE__ */ jsx39(WarningMessage2, { message: "overridden below" }) : null
+          /* @__PURE__ */ jsxs25(TableCellData2, { width: "50%", children: [
+            /* @__PURE__ */ jsx43("i", { css: { color: "var(--gray-500)" }, children: baseHeader.value }),
+            request.headers.find((p2) => p2.key === baseHeader.key) ? /* @__PURE__ */ jsx43(WarningMessage2, { message: "overridden below" }) : null
           ] })
         ] }, baseHeader.key);
       }),
       deezHeaders.map((header, index) => {
-        return /* @__PURE__ */ jsxs24(TableRow2, { children: [
-          /* @__PURE__ */ jsx39(TableCellData2, { width: "50%", children: /* @__PURE__ */ jsx39(
-            Input4,
+        return /* @__PURE__ */ jsxs25(TableRow2, { children: [
+          /* @__PURE__ */ jsx43(TableCellData2, { width: "50%", children: /* @__PURE__ */ jsx43(
+            Input3,
             {
               label: header.key,
               value: header.key,
@@ -4064,13 +4693,15 @@ function RequestHeaders({ disableVariables }) {
               "data-test-id": "header-key"
             }
           ) }),
-          /* @__PURE__ */ jsx39(TableCellData2, { width: "50%", children: header.key ? /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx43(TableCellData2, { width: "50%", children: header.key ? /* @__PURE__ */ jsx43(
             InputVariables,
             {
               value: header.value,
               onChange: (value) => handleUpdateParamFromMenu({ key: header.key, value, index }),
               disableVariables,
               showAddVariableMenuOption: true,
+              enableEditingVariables: true,
+              disableReset: true,
               "data-test-id": "header-value"
             }
           ) : null })
@@ -4083,11 +4714,11 @@ function RequestHeaders({ disableVariables }) {
 // src/components/Request/RequestMethodSelect.tsx
 init_emotion_jsx_shim();
 import { InputSelect as InputSelect5 } from "@uniformdev/design-system";
-import { jsx as jsx40 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx44 } from "@emotion/react/jsx-runtime";
 function RequestMethodSelect(props) {
   var _a;
   const { request, dispatch } = useRequest();
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx44(
     InputSelect5,
     {
       ...props,
@@ -4105,7 +4736,7 @@ function RequestMethodSelect(props) {
 // src/components/Request/RequestParameters.tsx
 init_emotion_jsx_shim();
 import {
-  Input as Input5,
+  Input as Input4,
   Table as Table3,
   TableBody as TableBody3,
   TableCellData as TableCellData3,
@@ -4114,7 +4745,7 @@ import {
   TableRow as TableRow3,
   WarningMessage as WarningMessage3
 } from "@uniformdev/design-system";
-import { jsx as jsx41, jsxs as jsxs25 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs26 } from "@emotion/react/jsx-runtime";
 function RequestParameters({ disableVariables }) {
   var _a, _b;
   const { dispatch, request } = useRequest();
@@ -4130,29 +4761,29 @@ function RequestParameters({ disableVariables }) {
       index
     });
   };
-  return /* @__PURE__ */ jsx41("div", { css: innerContentStyles, children: /* @__PURE__ */ jsxs25(Table3, { children: [
-    /* @__PURE__ */ jsx41(TableHead3, { children: /* @__PURE__ */ jsxs25(TableRow3, { children: [
-      /* @__PURE__ */ jsx41(TableCellHead3, { children: "Name" }),
-      /* @__PURE__ */ jsx41(TableCellHead3, { children: "Value" })
+  return /* @__PURE__ */ jsx45("div", { css: innerContentStyles, children: /* @__PURE__ */ jsxs26(Table3, { children: [
+    /* @__PURE__ */ jsx45(TableHead3, { children: /* @__PURE__ */ jsxs26(TableRow3, { children: [
+      /* @__PURE__ */ jsx45(TableCellHead3, { children: "Name" }),
+      /* @__PURE__ */ jsx45(TableCellHead3, { children: "Value" })
     ] }) }),
-    /* @__PURE__ */ jsxs25(TableBody3, { children: [
+    /* @__PURE__ */ jsxs26(TableBody3, { children: [
       (_b = (_a = request.baseRequest) == null ? void 0 : _a.parameters) == null ? void 0 : _b.map((baseParameter) => {
-        return /* @__PURE__ */ jsxs25(TableRow3, { children: [
-          /* @__PURE__ */ jsxs25(TableCellData3, { width: "50%", children: [
+        return /* @__PURE__ */ jsxs26(TableRow3, { children: [
+          /* @__PURE__ */ jsxs26(TableCellData3, { width: "50%", children: [
             baseParameter.key,
-            /* @__PURE__ */ jsx41("br", {}),
-            /* @__PURE__ */ jsx41("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ jsx41("small", { children: "from data source" }) })
+            /* @__PURE__ */ jsx45("br", {}),
+            /* @__PURE__ */ jsx45("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ jsx45("small", { children: "from data source" }) })
           ] }),
-          /* @__PURE__ */ jsxs25(TableCellData3, { width: "50%", children: [
-            /* @__PURE__ */ jsx41("i", { css: { color: "var(--gray-500)" }, children: baseParameter.value }),
-            request.parameters.find((p2) => p2.key === baseParameter.key) ? /* @__PURE__ */ jsx41(WarningMessage3, { message: "overridden below" }) : null
+          /* @__PURE__ */ jsxs26(TableCellData3, { width: "50%", children: [
+            /* @__PURE__ */ jsx45("i", { css: { color: "var(--gray-500)" }, children: baseParameter.value }),
+            request.parameters.find((p2) => p2.key === baseParameter.key) ? /* @__PURE__ */ jsx45(WarningMessage3, { message: "overridden below" }) : null
           ] })
         ] }, baseParameter.key);
       }),
       deezParameters.map((parameter, index) => {
-        return /* @__PURE__ */ jsxs25(TableRow3, { children: [
-          /* @__PURE__ */ jsx41(TableCellData3, { width: "50%", children: /* @__PURE__ */ jsx41(
-            Input5,
+        return /* @__PURE__ */ jsxs26(TableRow3, { children: [
+          /* @__PURE__ */ jsx45(TableCellData3, { width: "50%", children: /* @__PURE__ */ jsx45(
+            Input4,
             {
               label: parameter.key,
               value: parameter.key,
@@ -4171,7 +4802,7 @@ function RequestParameters({ disableVariables }) {
               "data-test-id": "parameter-key"
             }
           ) }),
-          /* @__PURE__ */ jsx41(TableCellData3, { width: "50%", children: parameter.key ? /* @__PURE__ */ jsx41(
+          /* @__PURE__ */ jsx45(TableCellData3, { width: "50%", children: parameter.key ? /* @__PURE__ */ jsx45(
             InputVariables,
             {
               value: parameter.value,
@@ -4182,7 +4813,9 @@ function RequestParameters({ disableVariables }) {
               }),
               disableVariables,
               "data-test-id": "parameter-value",
-              showAddVariableMenuOption: true
+              showAddVariableMenuOption: true,
+              enableEditingVariables: true,
+              disableReset: true
             }
           ) : null })
         ] }, index);
@@ -4193,8 +4826,8 @@ function RequestParameters({ disableVariables }) {
 
 // src/components/Request/RequestUrl.tsx
 init_emotion_jsx_shim();
-import { css as css26 } from "@emotion/react";
-import { useMemo as useMemo7 } from "react";
+import { css as css27 } from "@emotion/react";
+import { useMemo as useMemo10 } from "react";
 
 // src/components/Request/urlEncodeRequestParameter.ts
 init_emotion_jsx_shim();
@@ -4216,35 +4849,35 @@ function decodeVariablesInUrlEncodedString(string, varValues) {
 }
 
 // src/components/Request/RequestUrl.tsx
-import { Fragment as Fragment8, jsx as jsx42, jsxs as jsxs26 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx46, jsxs as jsxs27 } from "@emotion/react/jsx-runtime";
 function RequestUrl() {
   var _a, _b;
   const { variables } = useVariables();
   const { request } = useRequest();
-  const mergedParameters = useMemo7(() => {
+  const mergedParameters = useMemo10(() => {
     var _a2;
     if (!((_a2 = request.baseRequest) == null ? void 0 : _a2.parameters)) {
       return request.parameters;
     }
     return request.baseRequest.parameters.filter((baseParam) => !request.parameters.find((p2) => p2.key === baseParam.key)).concat(request.parameters);
   }, [(_a = request.baseRequest) == null ? void 0 : _a.parameters, request.parameters]);
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(
     "small",
     {
-      css: css26`
+      css: css27`
         display: inline-block;
         margin-bottom: var(--spacing-xs);
         word-break: break-word;
       `,
       children: [
-        request.baseRequest ? /* @__PURE__ */ jsx42("span", { children: (_b = request.baseRequest) == null ? void 0 : _b.baseUrl }) : null,
-        /* @__PURE__ */ jsxs26("span", { css: { fontWeight: request.baseRequest ? "bold" : "inherit" }, children: [
+        request.baseRequest ? /* @__PURE__ */ jsx46("span", { children: (_b = request.baseRequest) == null ? void 0 : _b.baseUrl }) : null,
+        /* @__PURE__ */ jsxs27("span", { css: { fontWeight: request.baseRequest ? "bold" : "inherit" }, children: [
           urlEncodeRequestUrl(request.relativeUrl, variables),
-          mergedParameters.length > 0 ? /* @__PURE__ */ jsxs26(Fragment8, { children: [
+          mergedParameters.length > 0 ? /* @__PURE__ */ jsxs27(Fragment10, { children: [
             "?",
             mergedParameters.map((param, index) => {
               const encoded = urlEncodeRequestParameter(param, variables);
-              return /* @__PURE__ */ jsxs26("span", { children: [
+              return /* @__PURE__ */ jsxs27("span", { children: [
                 index > 0 ? "&" : null,
                 encoded.key,
                 "=",
@@ -4261,9 +4894,9 @@ function RequestUrl() {
 // src/components/Request/RequestUrlInput.tsx
 init_emotion_jsx_shim();
 
-// src/components/Request/util/handlePastedUrl.ts
+// src/components/Request/util/transformPastedUrl.ts
 init_emotion_jsx_shim();
-function handlePastedUrl(value, currentRequest, dispatch) {
+function transformPastedUrl(value, currentRequest, dispatch) {
   var _a, _b, _c;
   const indexOfQueryString = value.indexOf("?");
   const hasQueryString = indexOfQueryString >= 0;
@@ -4271,7 +4904,6 @@ function handlePastedUrl(value, currentRequest, dispatch) {
   if (((_a = currentRequest.baseRequest) == null ? void 0 : _a.baseUrl) && relativeUrl.startsWith((_b = currentRequest.baseRequest) == null ? void 0 : _b.baseUrl)) {
     relativeUrl = relativeUrl.substring((_c = currentRequest.baseRequest) == null ? void 0 : _c.baseUrl.length);
   }
-  dispatch({ type: "setRelativeUrl", relativeUrl });
   if (hasQueryString) {
     for (let index = currentRequest.parameters.length - 1; index >= 0; index--) {
       dispatch({ type: "removeParameter", index });
@@ -4284,25 +4916,25 @@ function handlePastedUrl(value, currentRequest, dispatch) {
     } catch (e) {
     }
   }
+  return relativeUrl;
 }
 
 // src/components/Request/RequestUrlInput.tsx
-import { jsx as jsx43 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx47 } from "@emotion/react/jsx-runtime";
 function RequestUrlInput(props) {
   const { request, dispatch } = useRequest();
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx47(
     InputVariables,
     {
       disableReset: true,
       ...props,
       value: request.relativeUrl,
-      onPaste: (value) => {
-        handlePastedUrl(value, request, dispatch);
-      },
+      transformPaste: (value) => transformPastedUrl(value, request, dispatch),
       onChange: (value) => {
         dispatch({ type: "setRelativeUrl", relativeUrl: value });
       },
       showAddVariableMenuOption: true,
+      enableEditingVariables: true,
       "data-test-id": "field-url"
     }
   );
@@ -4345,18 +4977,19 @@ function useRequestParameter(paramName) {
 }
 
 // src/components/DataSourceEditor.tsx
-import { jsx as jsx44 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx48 } from "@emotion/react/jsx-runtime";
 function DataSourceEditor({ onChange, children, editVariableComponent }) {
   var _a;
   const { value } = useMeshLocation("dataSource");
   const currentRequestValue = convertDataSourceToRequestData(value);
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx48(
     VariablesProvider,
     {
       value: (_a = value.variables) != null ? _a : {},
       onChange: (newValue) => onChange((prev) => ({ newValue: { ...prev, variables: newValue } })),
       editVariableComponent,
-      children: /* @__PURE__ */ jsx44(
+      readOnly: true,
+      children: /* @__PURE__ */ jsx48(
         RequestProvider,
         {
           value: currentRequestValue,
@@ -4394,21 +5027,23 @@ function convertRequestDataToDataSource(dataSource, requestData) {
 
 // src/components/DataTypeEditor.tsx
 init_emotion_jsx_shim();
-import { jsx as jsx45 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx49 } from "@emotion/react/jsx-runtime";
 function DataTypeEditor({ onChange, children, editVariableComponent }) {
   var _a;
   const {
     value,
-    metadata: { dataSource }
+    metadata: { dataSource },
+    isReadOnly
   } = useMeshLocation("dataType");
   const currentRequestValue = convertDataTypeToRequestData(value, dataSource);
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx49(
     VariablesProvider,
     {
       value: (_a = value.variables) != null ? _a : {},
       onChange: (newValue) => onChange((prev) => ({ newValue: { ...prev, variables: newValue } })),
       editVariableComponent,
-      children: /* @__PURE__ */ jsx45(
+      readOnly: isReadOnly,
+      children: /* @__PURE__ */ jsx49(
         RequestProvider,
         {
           value: currentRequestValue,
@@ -4460,12 +5095,12 @@ import { LoadingIndicator as LoadingIndicator2, Theme as Theme2 } from "@uniform
 // src/hooks/useInitializeUniformMeshSdk.ts
 init_emotion_jsx_shim();
 import { initializeUniformMeshSDK } from "@uniformdev/mesh-sdk";
-import { useEffect as useEffect8, useRef as useRef10, useState as useState11 } from "react";
+import { useEffect as useEffect12, useRef as useRef10, useState as useState13 } from "react";
 var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
-  const [error, setError] = useState11();
-  const [sdk, setSdk] = useState11();
+  const [error, setError] = useState13();
+  const [sdk, setSdk] = useState13();
   const initializationInProgress = useRef10(false);
-  useEffect8(
+  useEffect12(
     () => {
       if (typeof window === "undefined" || sdk) {
         return;
@@ -4498,7 +5133,7 @@ var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
 };
 
 // src/components/MeshApp.tsx
-import { jsx as jsx46, jsxs as jsxs27 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs28 } from "@emotion/react/jsx-runtime";
 var MeshApp = ({
   children,
   loadingComponent,
@@ -4507,37 +5142,37 @@ var MeshApp = ({
   const { initializing, error, sdk } = useInitializeUniformMeshSdk();
   if (initializing || !sdk) {
     const LoadingComponent = loadingComponent;
-    return LoadingComponent ? /* @__PURE__ */ jsx46(LoadingComponent, {}) : /* @__PURE__ */ jsx46(LoadingIndicator2, {});
+    return LoadingComponent ? /* @__PURE__ */ jsx50(LoadingComponent, {}) : /* @__PURE__ */ jsx50(LoadingIndicator2, {});
   }
   if (error) {
     const ErrorComponent = errorComponent;
     if (ErrorComponent) {
-      return /* @__PURE__ */ jsx46(ErrorComponent, { error });
+      return /* @__PURE__ */ jsx50(ErrorComponent, { error });
     }
     throw error;
   }
-  return /* @__PURE__ */ jsxs27(UniformMeshSdkContext.Provider, { value: { sdk }, children: [
-    /* @__PURE__ */ jsx46(Theme2, {}),
-    /* @__PURE__ */ jsx46(UniformMeshLocationContextProvider, { children })
+  return /* @__PURE__ */ jsxs28(UniformMeshSdkContext.Provider, { value: { sdk }, children: [
+    /* @__PURE__ */ jsx50(Theme2, {}),
+    /* @__PURE__ */ jsx50(UniformMeshLocationContextProvider, { children })
   ] });
 };
 
 // src/components/ObjectSearch/DataRefreshButton.tsx
 init_emotion_jsx_shim();
-import { css as css27 } from "@emotion/react";
+import { css as css28 } from "@emotion/react";
 import { Button as Button3, LoadingIndicator as LoadingIndicator3 } from "@uniformdev/design-system";
-import { jsx as jsx47, jsxs as jsxs28 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs29 } from "@emotion/react/jsx-runtime";
 var DataRefreshButton = ({
   buttonText,
   isLoading,
   onRefreshData,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs28(Button3, { buttonType: "primaryInvert", onClick: onRefreshData, disabled: isLoading, ...props, children: [
-    !isLoading ? null : /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsxs29(Button3, { buttonType: "primaryInvert", onClick: onRefreshData, disabled: isLoading, ...props, children: [
+    !isLoading ? null : /* @__PURE__ */ jsx51(
       LoadingIndicator3,
       {
-        css: css27`
+        css: css28`
             ${isLoading ? "opacity: 0.2;" : void 0}
           `
       }
@@ -4548,7 +5183,6 @@ var DataRefreshButton = ({
 
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
 init_emotion_jsx_shim();
-import { css as css28 } from "@emotion/react";
 
 // ../canvas/dist/index.mjs
 init_emotion_jsx_shim();
@@ -5716,13 +6350,13 @@ import { Container, IconsProvider, ScrollableList, VerticalRhythm } from "@unifo
 init_emotion_jsx_shim();
 import {
   createContext as createContext5,
-  useCallback,
+  useCallback as useCallback2,
   useContext as useContext7,
   useDeferredValue,
-  useMemo as useMemo8,
-  useState as useState12
+  useMemo as useMemo11,
+  useState as useState14
 } from "react";
-import { jsx as jsx48 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx52 } from "@emotion/react/jsx-runtime";
 var ObjectSearchContext = createContext5({
   onSetQuery: () => {
   },
@@ -5738,15 +6372,15 @@ var ObjectSearchContext = createContext5({
   }
 });
 var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
-  const [query, setQuery] = useState12({
+  const [query, setQuery] = useState14({
     contentType: "",
     keyword: ""
   });
   const { flatVariables } = useVariables(true);
   const querySearchDeferred = useDeferredValue(query);
-  const [selectedItems, setSelectedItems] = useState12(currentlySelectedItems != null ? currentlySelectedItems : []);
-  const [list, setList] = useState12({});
-  const onSetQuery = useCallback(
+  const [selectedItems, setSelectedItems] = useState14(currentlySelectedItems != null ? currentlySelectedItems : []);
+  const [list, setList] = useState14({});
+  const onSetQuery = useCallback2(
     (value2) => {
       if (Array.isArray(value2.contentType) && value2.contentType.length > 0) {
         return setQuery({
@@ -5758,7 +6392,7 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
     },
     [setQuery]
   );
-  const onSelectItem = useCallback(
+  const onSelectItem = useCallback2(
     (selectedResult) => {
       if (Array.isArray(selectedResult)) {
         setSelectedItems(selectedResult);
@@ -5772,17 +6406,17 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
     },
     [setSelectedItems, selectedItems]
   );
-  const onRemoveAllSelectedItems = useCallback(() => {
+  const onRemoveAllSelectedItems = useCallback2(() => {
     setSelectedItems([]);
   }, [setSelectedItems]);
-  const onSetList = useCallback(
+  const onSetList = useCallback2(
     (value2) => {
       setList(value2);
     },
     [setList]
   );
-  const boundQuery = useMemo8(() => bindQuery(query, flatVariables), [query, flatVariables]);
-  const value = useMemo8(
+  const boundQuery = useMemo11(() => bindQuery(query, flatVariables), [query, flatVariables]);
+  const value = useMemo11(
     () => ({
       boundQuery,
       onSetQuery,
@@ -5804,7 +6438,7 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
       onSetList
     ]
   );
-  return /* @__PURE__ */ jsx48(ObjectSearchContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx52(ObjectSearchContext.Provider, { value, children });
 };
 function useObjectSearchContext() {
   return useContext7(ObjectSearchContext);
@@ -5822,7 +6456,7 @@ function bindQuery(query, inputs) {
 }
 
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
-import { jsx as jsx49, jsxs as jsxs29 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
 var ObjectSearchContainer = ({
   label,
   enableDynamicInputToResultId,
@@ -5833,21 +6467,9 @@ var ObjectSearchContainer = ({
   var _a, _b;
   const { onSelectItem, selectedListItems, list } = useObjectSearchContext();
   const { flatVariables } = useVariables(true);
-  const body = /* @__PURE__ */ jsxs29(VerticalRhythm, { children: [
+  const body = /* @__PURE__ */ jsxs30(VerticalRhythm, { children: [
     searchFilters,
-    !resultList ? null : /* @__PURE__ */ jsx49(
-      ScrollableList,
-      {
-        role: "list",
-        css: css28`
-            > div {
-              transition: max-height var(--duration-slow) var(--timing-ease-out);
-              max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
-            }
-          `,
-        children: resultList
-      }
-    )
+    !resultList ? null : /* @__PURE__ */ jsx53(ScrollableList, { role: "list", children: resultList })
   ] });
   const handleSelectedVariableChange = (selectedValue) => {
     var _a2;
@@ -5876,8 +6498,8 @@ var ObjectSearchContainer = ({
       }
     ]);
   };
-  return /* @__PURE__ */ jsx49(IconsProvider, { children: /* @__PURE__ */ jsxs29(VerticalRhythm, { children: [
-    /* @__PURE__ */ jsx49(Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx53(IconsProvider, { children: /* @__PURE__ */ jsxs30(VerticalRhythm, { children: [
+    /* @__PURE__ */ jsx53(Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ jsx53(
       InputVariables,
       {
         label,
@@ -5894,7 +6516,7 @@ var ObjectSearchContainer = ({
 // src/components/ObjectSearch/ObjectSearchFilter.tsx
 init_emotion_jsx_shim();
 import { InputKeywordSearch as InputKeywordSearch2, InputSelect as InputSelect6 } from "@uniformdev/design-system";
-import { useState as useState13 } from "react";
+import { useState as useState15 } from "react";
 
 // src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
 init_emotion_jsx_shim();
@@ -5921,7 +6543,7 @@ var ObjectSearchFilterGrid = (gridColumns) => css29`
 `;
 
 // src/components/ObjectSearch/ObjectSearchFilter.tsx
-import { jsx as jsx50, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
 var ObjectSearchFilter = ({
   requireContentType,
   typeSelectorAllTypesOptionText = "All content types",
@@ -5931,7 +6553,7 @@ var ObjectSearchFilter = ({
   selectOptions
 }) => {
   const { query, onSetQuery } = useObjectSearchContext();
-  const [searchState, setSearchState] = useState13({
+  const [searchState, setSearchState] = useState15({
     contentType: "",
     keyword: ""
   });
@@ -5941,8 +6563,8 @@ var ObjectSearchFilter = ({
     });
     onSetQuery({ ...query, ...value });
   };
-  return /* @__PURE__ */ jsxs30("fieldset", { css: [ObjectSearchFilterContainer, ObjectSearchFilterDropdownAndTextSearch], children: [
-    /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsxs31("fieldset", { css: [ObjectSearchFilterContainer, ObjectSearchFilterDropdownAndTextSearch], children: [
+    /* @__PURE__ */ jsx54(
       InputSelect6,
       {
         label: selectLabel,
@@ -5958,7 +6580,7 @@ var ObjectSearchFilter = ({
         value: query.contentType
       }
     ),
-    /* @__PURE__ */ jsx50(
+    /* @__PURE__ */ jsx54(
       InputKeywordSearch2,
       {
         inputFieldName: searchInputName,
@@ -5974,17 +6596,17 @@ var ObjectSearchFilter = ({
 
 // src/components/ObjectSearch/ObjectSearchFilterContainer.tsx
 init_emotion_jsx_shim();
-import { jsx as jsx51, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs32 } from "@emotion/react/jsx-runtime";
 var ObjectSearchFilterContainer2 = ({ label, children }) => {
-  return /* @__PURE__ */ jsxs31("div", { children: [
-    label ? /* @__PURE__ */ jsx51("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
-    /* @__PURE__ */ jsx51("div", { css: ObjectSearchFilterContainer, children })
+  return /* @__PURE__ */ jsxs32("div", { children: [
+    label ? /* @__PURE__ */ jsx55("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
+    /* @__PURE__ */ jsx55("div", { css: ObjectSearchFilterContainer, children })
   ] });
 };
 
 // src/components/ObjectSearch/ObjectSearchListItem.tsx
 init_emotion_jsx_shim();
-import { Chip, Popover } from "@uniformdev/design-system";
+import { Popover } from "@uniformdev/design-system";
 
 // src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
 init_emotion_jsx_shim();
@@ -5996,8 +6618,12 @@ var ObjectListItemContainer = css30`
   border-radius: var(--rounded-base);
   background: var(--white);
   display: grid;
-  grid-template-columns: 1fr auto;
+  grid-template-columns: 1fr 32px;
   padding: var(--spacing-sm);
+
+  &[hidden] {
+    display: none;
+  }
 `;
 var ObjectListItemLoading = css30`
   animation: ${skeletonLoading} 1s linear infinite alternate;
@@ -6041,7 +6667,6 @@ var ObjectListItemSubtitle = css30`
 var ObjectListItemInfoContainer = css30`
   align-items: center;
   display: flex;
-  gap: var(--spacing-sm);
   justify-content: center;
 `;
 var ObjectListItemControlledContent = css30`
@@ -6054,7 +6679,7 @@ var ObjectListItemUnControlledContent = css30`
 `;
 
 // src/components/ObjectSearch/ObjectSearchListItem.tsx
-import { jsx as jsx52, jsxs as jsxs32 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
 var ObjectSearchListItem = ({
   id,
   title,
@@ -6076,24 +6701,21 @@ var ObjectSearchListItem = ({
     }
     return onSelectItem([selectedItem]);
   };
-  const selected = selectedListItems.some((item) => item.id === id);
-  return /* @__PURE__ */ jsxs32("div", { role: "listitem", css: ObjectListItemContainer, children: [
-    /* @__PURE__ */ jsxs32("div", { role: "button", onClick: handleSelectItem, css: ObjectListItemControlledContent, children: [
-      !image ? null : /* @__PURE__ */ jsx52("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
-      /* @__PURE__ */ jsxs32("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
-        !contentType ? null : /* @__PURE__ */ jsx52("span", { css: ObjectListItemSubtitle, children: formatedContentType }),
-        /* @__PURE__ */ jsx52("span", { css: ObjectListItemTitle, children: title })
+  const hideWhenInSelectedList = selectedListItems.some((item) => item.id === id);
+  return /* @__PURE__ */ jsxs33("div", { role: "listitem", hidden: hideWhenInSelectedList, css: ObjectListItemContainer, children: [
+    /* @__PURE__ */ jsxs33("div", { role: "button", onClick: handleSelectItem, css: ObjectListItemControlledContent, children: [
+      !image ? null : /* @__PURE__ */ jsx56("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
+      /* @__PURE__ */ jsxs33("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
+        !contentType ? null : /* @__PURE__ */ jsx56("span", { css: ObjectListItemSubtitle, children: formatedContentType }),
+        /* @__PURE__ */ jsx56("span", { css: ObjectListItemTitle, children: title })
       ] })
     ] }),
-    !popoverData ? null : /* @__PURE__ */ jsxs32("div", { css: ObjectListItemInfoContainer, children: [
-      selected ? /* @__PURE__ */ jsx52(Chip, { text: "selected", size: "xs" }) : null,
-      /* @__PURE__ */ jsx52(Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
-    ] }),
-    !children ? null : /* @__PURE__ */ jsx52("div", { css: ObjectListItemUnControlledContent, children })
+    !popoverData ? null : /* @__PURE__ */ jsx56("div", { css: ObjectListItemInfoContainer, children: /* @__PURE__ */ jsx56(Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData }) }),
+    !children ? null : /* @__PURE__ */ jsx56("div", { css: ObjectListItemUnControlledContent, children })
   ] });
 };
 var ObjectSearchListItemLoadingSkeleton = () => {
-  return /* @__PURE__ */ jsx52("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
+  return /* @__PURE__ */ jsx56("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
 };
 
 // src/components/ObjectSearch/ObjectSearchResultItem.tsx
@@ -6141,14 +6763,14 @@ var ButtonIcon = css31`
 `;
 
 // src/components/ObjectSearch/ObjectSearchResultItemButton.tsx
-import { jsx as jsx53, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
 var ObjectSearchResultItemButton = ({
   text,
   icon,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs33("button", { type: "button", css: ButtonStyles, ...props, children: [
-    !icon ? null : /* @__PURE__ */ jsx53(Image, { src: icon, css: ButtonIcon }),
+  return /* @__PURE__ */ jsxs34("button", { type: "button", css: ButtonStyles, ...props, children: [
+    !icon ? null : /* @__PURE__ */ jsx57(Image, { src: icon, css: ButtonIcon }),
     text
   ] });
 };
@@ -6157,8 +6779,8 @@ var LinkButton = ({
   icon,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs33("a", { ...props, css: ButtonStyles, target: "_blank", rel: "noopener noreferrer", children: [
-    !icon ? null : /* @__PURE__ */ jsx53(Image, { src: icon, css: ButtonIcon }),
+  return /* @__PURE__ */ jsxs34("a", { ...props, css: ButtonStyles, target: "_blank", rel: "noopener noreferrer", children: [
+    !icon ? null : /* @__PURE__ */ jsx57(Image, { src: icon, css: ButtonIcon }),
     text
   ] });
 };
@@ -6225,7 +6847,7 @@ var ObjectSearchImage = css32`
 `;
 
 // src/components/ObjectSearch/ObjectSearchResultItem.tsx
-import { jsx as jsx54, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
 var ObjectSearchResultItem = ({
   id,
   title,
@@ -6249,35 +6871,35 @@ var ObjectSearchResultItem = ({
     onSelectItem({ id, title: id });
     onRemove == null ? void 0 : onRemove();
   };
-  return /* @__PURE__ */ jsxs34("div", { css: ObjectSearchResultItemContainer, children: [
-    disableDnD ? null : /* @__PURE__ */ jsx54("div", { role: "presentation", className: "drag-handle", css: ObjectSearchDragHandle }),
-    /* @__PURE__ */ jsx54("div", { children: /* @__PURE__ */ jsxs34("div", { css: ObjectSearchContentContainer, children: [
-      !imageUrl ? null : /* @__PURE__ */ jsx54("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectSearchImage }),
-      /* @__PURE__ */ jsxs34("div", { children: [
-        /* @__PURE__ */ jsx54("span", { css: ObjectSearchResultItemSubtitle, children: formatedContentType }),
-        /* @__PURE__ */ jsxs34("span", { role: "heading", css: ObjectSearchResultItemTitle, children: [
+  return /* @__PURE__ */ jsxs35("div", { css: ObjectSearchResultItemContainer, children: [
+    disableDnD ? null : /* @__PURE__ */ jsx58("div", { role: "presentation", className: "drag-handle", css: ObjectSearchDragHandle }),
+    /* @__PURE__ */ jsx58("div", { children: /* @__PURE__ */ jsxs35("div", { css: ObjectSearchContentContainer, children: [
+      !imageUrl ? null : /* @__PURE__ */ jsx58("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectSearchImage }),
+      /* @__PURE__ */ jsxs35("div", { children: [
+        /* @__PURE__ */ jsx58("span", { css: ObjectSearchResultItemSubtitle, children: formatedContentType }),
+        /* @__PURE__ */ jsxs35("span", { role: "heading", css: ObjectSearchResultItemTitle, children: [
           title != null ? title : name,
-          !popoverData ? null : /* @__PURE__ */ jsx54(Popover2, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
+          !popoverData ? null : /* @__PURE__ */ jsx58(Popover2, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
         ] }),
-        !createdAt && !publishStatus ? null : /* @__PURE__ */ jsxs34("div", { css: ObjectSearchAuthorStateGroup, children: [
-          !(publishStatus == null ? void 0 : publishStatus.text) ? null : /* @__PURE__ */ jsx54(Badge, { ...publishStatus, size: "sm", uppercaseText: true }),
-          !createdAt && !publishedAt ? null : /* @__PURE__ */ jsxs34("div", { css: ObjectSearchUpdateGroup, children: [
-            !createdAt ? null : /* @__PURE__ */ jsxs34("small", { css: ObjectSearchResultItemTimeStamp, children: [
-              /* @__PURE__ */ jsx54("strong", { children: "Last updated: " }),
+        !createdAt && !publishStatus ? null : /* @__PURE__ */ jsxs35("div", { css: ObjectSearchAuthorStateGroup, children: [
+          !(publishStatus == null ? void 0 : publishStatus.text) ? null : /* @__PURE__ */ jsx58(Badge, { ...publishStatus, size: "sm", uppercaseText: true }),
+          !createdAt && !publishedAt ? null : /* @__PURE__ */ jsxs35("div", { css: ObjectSearchUpdateGroup, children: [
+            !createdAt ? null : /* @__PURE__ */ jsxs35("small", { css: ObjectSearchResultItemTimeStamp, children: [
+              /* @__PURE__ */ jsx58("strong", { children: "Last updated: " }),
               timeagoFormat(createdAt)
             ] }),
-            !publishedAt ? null : /* @__PURE__ */ jsxs34("small", { css: ObjectSearchResultItemTimeStamp, children: [
-              /* @__PURE__ */ jsx54("strong", { children: "Last published: " }),
+            !publishedAt ? null : /* @__PURE__ */ jsxs35("small", { css: ObjectSearchResultItemTimeStamp, children: [
+              /* @__PURE__ */ jsx58("strong", { children: "Last published: " }),
               timeagoFormat(publishedAt)
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsx54("div", { children })
+        /* @__PURE__ */ jsx58("div", { children })
       ] })
     ] }) }),
-    !editLink && hideRemoveButton ? null : /* @__PURE__ */ jsxs34("div", { css: ObjectSearchAuthorStateGroup, children: [
-      !editLink ? null : /* @__PURE__ */ jsx54(LinkButton, { text: "Edit", href: editLink, icon: editLinkIcon }),
-      hideRemoveButton ? null : /* @__PURE__ */ jsx54(Button4, { buttonType: "ghostDestructive", onClick: onRemoveItem, children: "Remove" })
+    !editLink && hideRemoveButton ? null : /* @__PURE__ */ jsxs35("div", { css: ObjectSearchAuthorStateGroup, children: [
+      !editLink ? null : /* @__PURE__ */ jsx58(LinkButton, { text: "Edit", href: editLink, icon: editLinkIcon }),
+      hideRemoveButton ? null : /* @__PURE__ */ jsx58(Button4, { buttonType: "ghostDestructive", onClick: onRemoveItem, children: "Remove" })
     ] })
   ] });
 };
@@ -6299,10 +6921,6 @@ var ObjectSearchResultListContainer = css33`
 var ObjectSearchDragContainer = css33`
   margin: 0 0 var(--spacing-sm);
 `;
-var ObjectSearchContainerDragging = css33`
-  box-shadow: var(--shadow-base);
-  opacity: var(--opacity-50);
-`;
 var ObjectSearchResultListCounterContainer = css33`
   align-items: center;
   display: flex;
@@ -6314,14 +6932,14 @@ var ObjectSearchResultListTitle = css33`
 `;
 
 // src/components/ObjectSearch/ObjectSearchResultList.tsx
-import { Fragment as Fragment9, jsx as jsx55, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx59, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
 function ObjectSearchResultList({
   resultLabelText = "Selected",
   removeButtonText = "Remove all",
   onRemoveAllSelected,
   hideRemoveButton = false,
   additionalButtons,
-  renderResultComponent = (value) => /* @__PURE__ */ jsx55(ObjectSearchResultItem, { ...value }),
+  renderResultComponent = (value) => /* @__PURE__ */ jsx59(ObjectSearchResultItem, { ...value, disableDnD }),
   multiSelectId,
   disableDnD = false,
   whenNothingSelected = null
@@ -6341,16 +6959,16 @@ function ObjectSearchResultList({
       return result;
     }
   };
-  return /* @__PURE__ */ jsxs35(Fragment9, { children: [
-    /* @__PURE__ */ jsxs35("div", { role: "group", css: ObjectSearchResultListContainer, children: [
-      /* @__PURE__ */ jsxs35("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
-        /* @__PURE__ */ jsx55("span", { css: ObjectSearchResultListTitle, children: resultLabelText }),
+  return /* @__PURE__ */ jsxs36(Fragment11, { children: [
+    /* @__PURE__ */ jsxs36("div", { role: "group", css: ObjectSearchResultListContainer, children: [
+      /* @__PURE__ */ jsxs36("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
+        /* @__PURE__ */ jsx59("span", { css: ObjectSearchResultListTitle, children: resultLabelText }),
         " ",
-        !selectedListItems.length ? null : /* @__PURE__ */ jsx55(Counter, { count: selectedListItems.length })
+        !selectedListItems.length ? null : /* @__PURE__ */ jsx59(Counter, { count: selectedListItems.length })
       ] }),
-      /* @__PURE__ */ jsxs35("div", { css: ObjectSearchResultListCounterContainer, children: [
+      /* @__PURE__ */ jsxs36("div", { css: ObjectSearchResultListCounterContainer, children: [
         additionalButtons,
-        hideRemoveButton ? null : /* @__PURE__ */ jsx55(
+        hideRemoveButton ? null : /* @__PURE__ */ jsx59(
           Button5,
           {
             buttonType: "ghostDestructive",
@@ -6362,33 +6980,20 @@ function ObjectSearchResultList({
         )
       ] })
     ] }),
-    !selectedListItems.length ? whenNothingSelected : /* @__PURE__ */ jsx55(DragDropContext3, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx55(Droppable3, { droppableId: multiSelectId != null ? multiSelectId : "canvas-multi-select", children: (provided) => /* @__PURE__ */ jsxs35("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
+    !selectedListItems.length ? whenNothingSelected : /* @__PURE__ */ jsx59(DragDropContext3, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx59(Droppable3, { droppableId: multiSelectId != null ? multiSelectId : "canvas-multi-select", children: (provided) => /* @__PURE__ */ jsxs36("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
       selectedListItems.map((item, i2) => {
-        const itemValues = selectedListItems.length === 1 ? { ...item, disableDnD: true } : { ...item, disableDnD };
-        const renderListItem = renderResultComponent(itemValues);
-        return /* @__PURE__ */ jsx55(
-          Draggable3,
+        const renderListItem = renderResultComponent(item);
+        return /* @__PURE__ */ jsx59(Draggable3, { draggableId: item.id, index: i2, isDragDisabled: disableDnD, children: (provided2, snapshot) => /* @__PURE__ */ jsx59(
+          "div",
           {
-            draggableId: item.id,
-            index: i2,
-            isDragDisabled: selectedListItems.length === 1 || disableDnD,
-            children: (provided2, snapshot) => /* @__PURE__ */ jsx55(
-              "div",
-              {
-                css: [
-                  ObjectSearchDragContainer,
-                  snapshot.isDragging ? ObjectSearchContainerDragging : void 0
-                ],
-                ref: provided2.innerRef,
-                "data-dragging": snapshot.isDragging,
-                ...provided2.draggableProps,
-                ...provided2.dragHandleProps,
-                children: renderListItem
-              }
-            )
-          },
-          item.id
-        );
+            css: ObjectSearchDragContainer,
+            ref: provided2.innerRef,
+            "data-dragging": snapshot.isDragging,
+            ...provided2.draggableProps,
+            ...provided2.dragHandleProps,
+            children: renderListItem
+          }
+        ) }, item.id);
       }),
       provided.placeholder
     ] }) }) })
@@ -6397,9 +7002,9 @@ function ObjectSearchResultList({
 
 // src/components/ObjectSearch/QueryFilter.tsx
 init_emotion_jsx_shim();
-import { Input as Input6, InputKeywordSearch as InputKeywordSearch3, InputSelect as InputSelect7, VerticalRhythm as VerticalRhythm2 } from "@uniformdev/design-system";
-import { useEffect as useEffect9, useState as useState14 } from "react";
-import { jsx as jsx56, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
+import { Input as Input5, InputKeywordSearch as InputKeywordSearch3, InputSelect as InputSelect7, VerticalRhythm as VerticalRhythm2 } from "@uniformdev/design-system";
+import { useEffect as useEffect13, useState as useState16 } from "react";
+import { jsx as jsx60, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
 var QueryFilter = ({
   requireContentType,
   queryFilterTitle = "Configure Query",
@@ -6430,7 +7035,7 @@ var QueryFilter = ({
 }) => {
   var _a, _b, _c, _d;
   const { query, onSetQuery } = useObjectSearchContext();
-  const [queryState, setQueryState] = useState14({
+  const [queryState, setQueryState] = useState16({
     contentType: "",
     keyword: "",
     count: countValue != null ? countValue : 5,
@@ -6441,13 +7046,13 @@ var QueryFilter = ({
     setQueryState((prev) => ({ ...prev, ...value }));
     onSetQuery({ ...query, ...value });
   };
-  useEffect9(() => {
+  useEffect13(() => {
     onSetQuery(queryState);
   }, [onSetQuery, queryState]);
-  return /* @__PURE__ */ jsxs36("fieldset", { children: [
-    /* @__PURE__ */ jsx56("span", { css: ObjectSearchFilterContainerLabel, children: queryFilterTitle }),
-    /* @__PURE__ */ jsx56("div", { css: ObjectSearchFilterContainer, children: /* @__PURE__ */ jsxs36(VerticalRhythm2, { children: [
-      /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsxs37("fieldset", { children: [
+    /* @__PURE__ */ jsx60("span", { css: ObjectSearchFilterContainerLabel, children: queryFilterTitle }),
+    /* @__PURE__ */ jsx60("div", { css: ObjectSearchFilterContainer, children: /* @__PURE__ */ jsxs37(VerticalRhythm2, { children: [
+      /* @__PURE__ */ jsx60(
         InputVariables,
         {
           label: searchInputLabel,
@@ -6455,7 +7060,7 @@ var QueryFilter = ({
           onChange: (newQuery) => handleFilterChange({ keyword: newQuery }),
           disableInlineMenu: true,
           id: "qf_searchText",
-          inputWhenNoVariables: /* @__PURE__ */ jsx56(
+          inputWhenNoVariables: /* @__PURE__ */ jsx60(
             InputKeywordSearch3,
             {
               id: "qf_searchText",
@@ -6469,8 +7074,8 @@ var QueryFilter = ({
           )
         }
       ),
-      /* @__PURE__ */ jsxs36("div", { css: ObjectSearchFilterGrid("1fr 100px"), children: [
-        /* @__PURE__ */ jsx56(
+      /* @__PURE__ */ jsxs37("div", { css: ObjectSearchFilterGrid("1fr 100px"), children: [
+        /* @__PURE__ */ jsx60(
           InputVariables,
           {
             label: contentTypeLabel,
@@ -6478,7 +7083,7 @@ var QueryFilter = ({
             value: (_d = queryState.contentType) != null ? _d : "",
             onChange: (newType) => handleFilterChange({ contentType: newType }),
             disableInlineMenu: true,
-            inputWhenNoVariables: /* @__PURE__ */ jsx56(
+            inputWhenNoVariables: /* @__PURE__ */ jsx60(
               InputSelect7,
               {
                 id: "qf_contentType",
@@ -6497,7 +7102,7 @@ var QueryFilter = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx56(
+        /* @__PURE__ */ jsx60(
           InputVariables,
           {
             label: countLabel,
@@ -6505,8 +7110,8 @@ var QueryFilter = ({
             value: queryState.count.toString(10),
             onChange: (newCount) => handleFilterChange({ count: newCount }),
             disableInlineMenu: true,
-            inputWhenNoVariables: /* @__PURE__ */ jsx56(
-              Input6,
+            inputWhenNoVariables: /* @__PURE__ */ jsx60(
+              Input5,
               {
                 id: "qf_count",
                 label: countLabel,
@@ -6520,8 +7125,8 @@ var QueryFilter = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs36("div", { css: ObjectSearchFilterGrid("2fr 1fr"), children: [
-        /* @__PURE__ */ jsx56(
+      /* @__PURE__ */ jsxs37("div", { css: ObjectSearchFilterGrid("2fr 1fr"), children: [
+        /* @__PURE__ */ jsx60(
           InputVariables,
           {
             id: "qf_sortBy",
@@ -6529,7 +7134,7 @@ var QueryFilter = ({
             value: queryState.sortBy,
             onChange: (newSortBy) => handleFilterChange({ sortBy: newSortBy }),
             disableInlineMenu: true,
-            inputWhenNoVariables: /* @__PURE__ */ jsx56(
+            inputWhenNoVariables: /* @__PURE__ */ jsx60(
               InputSelect7,
               {
                 label: sortLabel,
@@ -6551,7 +7156,7 @@ var QueryFilter = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx56(
+        /* @__PURE__ */ jsx60(
           InputVariables,
           {
             label: sortOrderLabel,
@@ -6559,7 +7164,7 @@ var QueryFilter = ({
             value: queryState.sortOrder,
             onChange: (newSort) => handleFilterChange({ sortOrder: newSort }),
             disableInlineMenu: true,
-            inputWhenNoVariables: /* @__PURE__ */ jsx56(
+            inputWhenNoVariables: /* @__PURE__ */ jsx60(
               InputSelect7,
               {
                 label: sortOrderLabel,
@@ -6602,7 +7207,7 @@ import {
   Button as Button6,
   Callout as Callout5,
   Heading,
-  Input as Input7,
+  Input as Input6,
   InputComboBox,
   InputKeywordSearch as InputKeywordSearch4,
   InputSelect as InputSelect8,
@@ -6611,7 +7216,7 @@ import {
   LoadingIndicator as LoadingIndicator4,
   LoadingOverlay as LoadingOverlay2,
   Menu as Menu3,
-  MenuItem as MenuItem3,
+  MenuItem as MenuItem4,
   ParameterGroup,
   ParameterImage,
   ParameterImageInner,
@@ -6649,7 +7254,7 @@ export {
   EntrySearch,
   Heading,
   icons_exports as Icons,
-  Input7 as Input,
+  Input6 as Input,
   InputComboBox,
   InputKeywordSearch4 as InputKeywordSearch,
   InputSelect8 as InputSelect,
@@ -6660,7 +7265,7 @@ export {
   LoadingIndicator4 as LoadingIndicator,
   LoadingOverlay2 as LoadingOverlay,
   Menu3 as Menu,
-  MenuItem3 as MenuItem,
+  MenuItem4 as MenuItem,
   MeshApp,
   ObjectSearchContainer,
   ObjectSearchFilter,
@@ -6788,7 +7393,6 @@ export {
   useRequestParameter,
   useUniformMeshSdk,
   useVariables,
-  variableExpression,
   variablePrefix,
   variableSuffix,
   variablesToList