@uniformdev/mesh-sdk-react 19.23.0 → 19.23.1-alpha.13

package/dist/index.js

@@ -166,9 +166,9 @@ var require_p_limit = __commonJS({
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  AddListButton: () => import_design_system34.AddListButton,
-  Button: () => import_design_system34.Button,
-  Callout: () => import_design_system34.Callout,
+  AddListButton: () => import_design_system36.AddListButton,
+  Button: () => import_design_system36.Button,
+  Callout: () => import_design_system36.Callout,
   DamSelectedItem: () => DamSelectedItem,
   DataRefreshButton: () => DataRefreshButton,
   DataResourceDynamicInputProvider: () => DataResourceDynamicInputProvider,
@@ -179,20 +179,20 @@ __export(src_exports, {
   DefaultSearchRow: () => DefaultSearchRow,
   DefaultSelectedItem: () => DefaultSelectedItem,
   EntrySearch: () => EntrySearch,
-  Heading: () => import_design_system34.Heading,
+  Heading: () => import_design_system36.Heading,
   Icons: () => icons_exports,
-  Input: () => import_design_system34.Input,
-  InputComboBox: () => import_design_system34.InputComboBox,
-  InputKeywordSearch: () => import_design_system34.InputKeywordSearch,
-  InputSelect: () => import_design_system34.InputSelect,
-  InputToggle: () => import_design_system34.InputToggle,
+  Input: () => import_design_system36.Input,
+  InputComboBox: () => import_design_system36.InputComboBox,
+  InputKeywordSearch: () => import_design_system36.InputKeywordSearch,
+  InputSelect: () => import_design_system36.InputSelect,
+  InputToggle: () => import_design_system36.InputToggle,
   InputVariables: () => InputVariables,
-  Label: () => import_design_system34.Label,
+  Label: () => import_design_system36.Label,
   LinkButton: () => LinkButton,
-  LoadingIndicator: () => import_design_system34.LoadingIndicator,
-  LoadingOverlay: () => import_design_system34.LoadingOverlay,
-  Menu: () => import_design_system34.Menu,
-  MenuItem: () => import_design_system34.MenuItem,
+  LoadingIndicator: () => import_design_system36.LoadingIndicator,
+  LoadingOverlay: () => import_design_system36.LoadingOverlay,
+  Menu: () => import_design_system36.Menu,
+  MenuItem: () => import_design_system36.MenuItem,
   MeshApp: () => MeshApp,
   ObjectSearchContainer: () => ObjectSearchContainer,
   ObjectSearchFilter: () => ObjectSearchFilter,
@@ -203,21 +203,21 @@ __export(src_exports, {
   ObjectSearchResultItem: () => ObjectSearchResultItem,
   ObjectSearchResultItemButton: () => ObjectSearchResultItemButton,
   ObjectSearchResultList: () => ObjectSearchResultList,
-  ParameterGroup: () => import_design_system34.ParameterGroup,
-  ParameterImage: () => import_design_system34.ParameterImage,
-  ParameterImageInner: () => import_design_system34.ParameterImageInner,
-  ParameterInput: () => import_design_system34.ParameterInput,
-  ParameterInputInner: () => import_design_system34.ParameterInputInner,
-  ParameterLabel: () => import_design_system34.ParameterLabel,
-  ParameterMenuButton: () => import_design_system34.ParameterMenuButton,
-  ParameterSelect: () => import_design_system34.ParameterSelect,
-  ParameterSelectInner: () => import_design_system34.ParameterSelectInner,
-  ParameterShell: () => import_design_system34.ParameterShell,
-  ParameterShellContext: () => import_design_system33.ParameterShellContext,
-  ParameterTextarea: () => import_design_system34.ParameterTextarea,
-  ParameterTextareaInner: () => import_design_system34.ParameterTextareaInner,
-  ParameterToggle: () => import_design_system34.ParameterToggle,
-  ParameterToggleInner: () => import_design_system34.ParameterToggleInner,
+  ParameterGroup: () => import_design_system36.ParameterGroup,
+  ParameterImage: () => import_design_system36.ParameterImage,
+  ParameterImageInner: () => import_design_system36.ParameterImageInner,
+  ParameterInput: () => import_design_system36.ParameterInput,
+  ParameterInputInner: () => import_design_system36.ParameterInputInner,
+  ParameterLabel: () => import_design_system36.ParameterLabel,
+  ParameterMenuButton: () => import_design_system36.ParameterMenuButton,
+  ParameterSelect: () => import_design_system36.ParameterSelect,
+  ParameterSelectInner: () => import_design_system36.ParameterSelectInner,
+  ParameterShell: () => import_design_system36.ParameterShell,
+  ParameterShellContext: () => import_design_system35.ParameterShellContext,
+  ParameterTextarea: () => import_design_system36.ParameterTextarea,
+  ParameterTextareaInner: () => import_design_system36.ParameterTextareaInner,
+  ParameterToggle: () => import_design_system36.ParameterToggle,
+  ParameterToggleInner: () => import_design_system36.ParameterToggleInner,
   ProductPreviewList: () => ProductPreviewList,
   ProductQuery: () => ProductQuery,
   ProductQueryContext: () => ProductQueryContext,
@@ -235,13 +235,13 @@ __export(src_exports, {
   RequestUrl: () => RequestUrl,
   RequestUrlInput: () => RequestUrlInput,
   ResolvableLoadingValue: () => ResolvableLoadingValue,
-  ScrollableList: () => import_design_system34.ScrollableList,
-  ScrollableListItem: () => import_design_system34.ScrollableListItem,
+  ScrollableList: () => import_design_system36.ScrollableList,
+  ScrollableListItem: () => import_design_system36.ScrollableListItem,
   SelectionField: () => SelectionField,
-  Switch: () => import_design_system34.Switch,
+  Switch: () => import_design_system36.Switch,
   TextVariableRenderer: () => TextVariableRenderer,
-  Textarea: () => import_design_system34.Textarea,
-  Theme: () => import_design_system34.Theme,
+  Textarea: () => import_design_system36.Textarea,
+  Theme: () => import_design_system36.Theme,
   VariableEditor: () => VariableEditor,
   VariablesList: () => VariablesList,
   VariablesProvider: () => VariablesProvider,
@@ -312,7 +312,7 @@ __export(src_exports, {
   urlEncodeRequestUrl: () => urlEncodeRequestUrl,
   useMeshLocation: () => useMeshLocation,
   useObjectSearchContext: () => useObjectSearchContext,
-  useParameterShell: () => import_design_system33.useParameterShell,
+  useParameterShell: () => import_design_system35.useParameterShell,
   useProductQueryContext: () => useProductQueryContext,
   useProductSearchContext: () => useProductSearchContext,
   useRequest: () => useRequest,
@@ -320,7 +320,6 @@ __export(src_exports, {
   useRequestParameter: () => useRequestParameter,
   useUniformMeshSdk: () => useUniformMeshSdk,
   useVariables: () => useVariables,
-  variableExpression: () => variableExpression,
   variablePrefix: () => variablePrefix,
   variableSuffix: () => variableSuffix,
   variablesToList: () => variablesToList
@@ -3077,34 +3076,221 @@ function useMeshLocation(expectedLocation) {
 
 // src/components/Variables/InputVariables.tsx
 init_emotion_jsx_shim();
-var import_design_system16 = require("@uniformdev/design-system");
+var import_design_system18 = require("@uniformdev/design-system");
 var React11 = __toESM(require("react"));
-var import_uuid2 = require("uuid");
+var import_react41 = require("react");
+var import_uuid3 = require("uuid");
 
-// src/components/Variables/SelectVariableMenu.tsx
+// src/components/Variables/composer/PasteTransformerPlugin.tsx
 init_emotion_jsx_shim();
-var import_design_system15 = require("@uniformdev/design-system");
-var import_react31 = require("react");
-var import_cg5 = require("react-icons/cg");
+var import_LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var import_lexical = require("lexical");
+var import_react28 = require("react");
+function PasteTransformerPlugin({ transformPaste }) {
+  const [editor] = (0, import_LexicalComposerContext.useLexicalComposerContext)();
+  (0, import_react28.useEffect)(() => {
+    editor.registerCommand(
+      import_lexical.PASTE_COMMAND,
+      (event) => {
+        var _a;
+        const selection = (0, import_lexical.$getSelection)();
+        const pastedText = (_a = event.clipboardData) == null ? void 0 : _a.getData("text/plain");
+        if (pastedText && transformPaste && (0, import_lexical.$isRangeSelection)(selection)) {
+          const result = transformPaste(pastedText);
+          if (result !== void 0) {
+            selection.insertText(result);
+            return true;
+          }
+        }
+        return false;
+      },
+      import_lexical.COMMAND_PRIORITY_HIGH
+    );
+  }, [editor, transformPaste]);
+  return null;
+}
+
+// src/components/Variables/styles/InputVariables.styles.ts
+init_emotion_jsx_shim();
+var import_react29 = require("@emotion/react");
+var menuContainer = import_react29.css`
+  position: relative;
+`;
+var menuBtn = import_react29.css`
+  position: absolute;
+  top: 50%;
+  right: var(--spacing-sm);
+  transform: translateY(-50%);
+`;
+var input = import_react29.css`
+  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;
+  }
+`;
+
+// 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();
+var import_react30 = require("@emotion/react");
+var labelText = import_react30.css`
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-xs);
+  font-weight: var(--fw-regular);
+  margin: 0 0 var(--spacing-xs);
+`;
+var variableBindButton = import_react30.css`
+  align-items: center;
+  border: none;
+  border-radius: var(--rounded-base);
+  background: none;
+  display: flex;
+  height: 1.2rem;
+  padding: var(--spacing-2xs);
+  transition: background var(--duration-fast) var(--timing-ease-out),
+    color var(--duration-fast) var(--timing-ease-out);
+  width: 1.2rem;
+
+  &:hover,
+  &[aria-pressed='true']:not(:disabled) {
+    background: var(--brand-secondary-3);
+    color: var(--white);
+  }
+
+  &[aria-disabled='true'] {
+    background: none;
+    color: currentColor;
+  }
+`;
+
+// src/components/Variables/VariablesComposerVariableMenu.tsx
+init_emotion_jsx_shim();
+var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerContext");
+var import_lexical4 = require("lexical");
+
+// src/components/Variables/composer/VariablesPlugin.tsx
+init_emotion_jsx_shim();
+var import_react35 = require("@emotion/react");
+var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerContext");
+var import_LexicalTypeaheadMenuPlugin = require("@lexical/react/LexicalTypeaheadMenuPlugin");
+var import_design_system16 = require("@uniformdev/design-system");
+var import_lexical3 = require("lexical");
+var import_react36 = require("react");
+var import_react_dom = require("react-dom");
 
 // src/components/Variables/styles/InsertVariableMenu.styles.ts
 init_emotion_jsx_shim();
-var import_react28 = require("@emotion/react");
-var menuBtn = import_react28.css`
+var import_react31 = require("@emotion/react");
+var menuBtn2 = import_react31.css`
   background: none;
   border: none;
   color: var(--gray-500);
   padding: 0;
 `;
-var menuItemTextGroup = import_react28.css`
+var menuItemTextGroup = import_react31.css`
   align-items: flex-start;
   display: flex;
   flex-direction: column;
+  gap: 0;
+  line-height: 1em;
 `;
-var smallText = import_react28.css`
+var smallText = import_react31.css`
   font-size: var(--fs-xs);
+  color: var(--gray-500);
 `;
-var variablesTipText = import_react28.css`
+var variablesTipText = import_react31.css`
   ${smallText}
   color: var(--gray-500);
   padding: 0 var(--spacing-sm);
@@ -3112,7 +3298,7 @@ var variablesTipText = import_react28.css`
 
 // src/components/Variables/useOnVariableUpdated.ts
 init_emotion_jsx_shim();
-var import_react30 = require("react");
+var import_react33 = require("react");
 
 // src/components/Variables/VariablesProvider.tsx
 init_emotion_jsx_shim();
@@ -3128,13 +3314,13 @@ var import_zod2 = require("zod");
 
 // src/components/Variables/styles/VariableEditor.styles.ts
 init_emotion_jsx_shim();
-var import_react29 = require("@emotion/react");
-var variablesFormContainer = import_react29.css`
+var import_react32 = require("@emotion/react");
+var variablesFormContainer = import_react32.css`
   > * {
     margin: var(--spacing-base) 0 0;
   }
 `;
-var variablesFormBtnGroup = import_react29.css`
+var variablesFormBtnGroup = import_react32.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
@@ -3235,17 +3421,27 @@ function VariablesProvider({
   value,
   onChange,
   editVariableComponent,
+  readOnly,
   children
 }) {
   const [editing, setEditing] = React10.useState();
   const events = React10.useMemo(() => (0, import_mitt.default)(), []);
+  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);
         }
@@ -3254,9 +3450,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)}`);
       }
@@ -3264,7 +3460,8 @@ function VariablesProvider({
     variables: value,
     isEditing: typeof editing !== "undefined",
     events,
-    canDispatch: true
+    canDispatch: true,
+    readOnly
   };
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(VariablesContext.Provider, { value: contextValue, children: [
     children,
@@ -3274,7 +3471,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),
@@ -3313,7 +3510,7 @@ function flattenVariables(variables) {
 // src/components/Variables/useOnVariableUpdated.ts
 function useOnVariableUpdated(fn2, disabled) {
   const { variables, events } = useVariables();
-  (0, import_react30.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (disabled) {
       return;
     }
@@ -3322,6 +3519,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) {
@@ -3341,180 +3541,474 @@ function variablesToList(variables) {
   }));
 }
 
-// src/components/Variables/SelectVariableMenu.tsx
+// 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();
+var import_design_system15 = require("@uniformdev/design-system");
+var import_lexical2 = require("lexical");
+var import_react34 = require("react");
 var import_jsx_runtime30 = require("@emotion/react/jsx-runtime");
+var VariableNode = class extends import_lexical2.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 ? import_react34.Fragment : UndefinedVariableReference;
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      import_design_system15.Chip,
+      {
+        text: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(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__ */ (0, import_jsx_runtime30.jsx)(
+    "span",
+    {
+      style: {
+        textDecoration: "underline",
+        textDecorationStyle: "wavy",
+        textDecorationColor: "red"
+      },
+      children
+    }
+  );
+}
+
+// src/components/Variables/composer/VariablesPlugin.tsx
+var import_jsx_runtime31 = require("@emotion/react/jsx-runtime");
+var EDIT_VARIABLE_COMMAND = (0, import_lexical3.createCommand)("uniform:edit-variable");
+var INSERT_VARIABLE_COMMAND = (0, import_lexical3.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] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
+  const { variables, dispatch, isEditing, canDispatch, readOnly } = useVariables();
+  const canEditVariable = canDispatch && enableEditingVariables && !readOnly;
+  const canAddVariable = canDispatch && showAddVariableMenuOption && !readOnly;
+  const [openedAdd, setOpenedAdd] = (0, import_react36.useState)(false);
+  useOnVariableUpdated((varName) => {
+    editor.update(() => {
+      editor.dispatchCommand(INSERT_VARIABLE_COMMAND, { reference: varName });
+    });
+  }, !openedAdd);
+  (0, import_react36.useEffect)(() => {
+    if (openedAdd && !isEditing) {
+      setOpenedAdd(false);
+    }
+  }, [isEditing, openedAdd]);
+  const [queryString, setQueryString] = (0, import_react36.useState)(null);
+  const { groupedVariables, menuOptions } = (0, import_react36.useMemo)(() => {
+    const groupedVariables2 = variablesToGroupedList(variables);
+    if (canAddVariable) {
+      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 import_LexicalTypeaheadMenuPlugin.MenuOption(variable.name));
+      })
+    );
+    return { menuOptions: menuOptions2, groupedVariables: groupedVariables2 };
+  }, [variables, canAddVariable]);
+  const { filteredGroupedVariables, filteredMenuOptions } = (0, import_react36.useMemo)(() => {
+    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 = (0, import_react36.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]
+  );
+  (0, import_react36.useEffect)(() => {
+    editor.registerCommand(
+      EDIT_VARIABLE_COMMAND,
+      ({ reference }) => {
+        if (!disableVariables && canEditVariable) {
+          dispatch({ type: "edit", variable: reference });
+        }
+        return true;
+      },
+      import_lexical3.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])
+          });
+          (0, import_lexical3.$insertNodes)([variableNode]);
+        }
+        return true;
+      },
+      import_lexical3.COMMAND_PRIORITY_NORMAL
+    );
+  }, [editor, disableVariables, variables, canDispatch, dispatch, canEditVariable, readOnly]);
+  (0, import_react36.useEffect)(() => {
+    editor.update(() => {
+      (0, import_lexical3.$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__ */ (0, import_jsx_runtime31.jsx)(
+    import_LexicalTypeaheadMenuPlugin.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 (0, import_react_dom.createPortal)(
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            "div",
+            {
+              css: import_react35.css`
+              box-shadow: var(--shadow-base);
+              border-radius: var(--rounded-base);
+              background: var(--gray-50);
+              display: flex;
+              flex-direction: column;
+              // 1em = text height, spacing-sm for padding, to prevent menu overlapping text entry
+              margin-top: calc(1em + var(--spacing-sm));
+              min-width: 250px;
+              padding: var(--spacing-sm);
+              outline: none;
+              overflow: hidden;
+              position: relative;
+              z-index: var(--z-50);
+            `,
+              children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: filteredGroupedVariables.map((group, index) => {
+                var _a, _b;
+                return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                  import_design_system16.MenuGroup,
+                  {
+                    title: group.name === SOURCE_SEPARATOR ? "" : (_a = group.name) != null ? _a : "",
+                    children: [
+                      group.name === SOURCE_SEPARATOR && currentCumulativeMenuIndex > 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_design_system16.MenuItemSeparator, {}) : null,
+                      group.variables.map((variable) => {
+                        var _a2;
+                        currentCumulativeMenuIndex++;
+                        const myCumulativeIndex = currentCumulativeMenuIndex;
+                        return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                          import_design_system16.MenuItem,
+                          {
+                            active: selectedIndex === myCumulativeIndex,
+                            onClick: () => {
+                              setHighlightedIndex(myCumulativeIndex);
+                              selectOptionAndCleanUp(new import_LexicalTypeaheadMenuPlugin.MenuOption(variable.name));
+                            },
+                            onMouseEnter: () => {
+                              setHighlightedIndex(myCumulativeIndex);
+                            },
+                            css: menuItemTextGroup,
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: (_a2 = variable.displayName) != null ? _a2 : variable.name }),
+                              variable.helpText ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("small", { css: smallText, children: variable.helpText }) : null
+                            ]
+                          },
+                          variable.name
+                        );
+                      })
+                    ]
+                  },
+                  (_b = group.name) != null ? _b : `none${index}`
+                );
+              }) })
+            }
+          ),
+          anchorElementRef.current
+        );
+      }
+    }
+  );
+}
+
+// src/components/Variables/SelectVariableMenu.tsx
+init_emotion_jsx_shim();
+var import_design_system17 = require("@uniformdev/design-system");
+var import_react37 = require("react");
+var import_cg5 = require("react-icons/cg");
+var import_jsx_runtime32 = require("@emotion/react/jsx-runtime");
 var SelectVariableMenu = ({
   onSelectVariable,
   onResetVariables,
   showAddVariableMenuOption = false,
-  forceVisible,
   buttonCss,
   buttonProps,
   tip
 }) => {
   const { variables, dispatch, isEditing, canDispatch } = useVariables();
-  const btnRef = (0, import_react31.useRef)(null);
-  const [openedAdd, setOpenedAdd] = (0, import_react31.useState)(false);
+  const btnRef = (0, import_react37.useRef)(null);
+  const [openedAdd, setOpenedAdd] = (0, import_react37.useState)(false);
   useOnVariableUpdated((varName) => {
     onSelectVariable == null ? void 0 : onSelectVariable({ name: varName, default: "" });
   }, !openedAdd);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (openedAdd && !isEditing) {
       setOpenedAdd(false);
     }
   }, [isEditing, openedAdd]);
-  const variablesList = variablesToList(variables);
+  const variablesGroups = variablesToGroupedList(variables);
   const menuHasVariableOptions = Object.entries(variables).length || showAddVariableMenuOption;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
-    import_design_system15.Menu,
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    import_design_system17.Menu,
     {
       placement: "bottom-start",
-      forceVisible,
-      menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "button",
         {
           title: "Insert variable",
           ...buttonProps,
           ref: btnRef,
-          css: [menuBtn, buttonCss],
+          css: [menuBtn2, buttonCss],
           type: "button",
-          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_cg5.CgUsbC, { size: "1.4rem" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_cg5.CgUsbC, { size: "1.4rem" })
         }
       ),
       menuLabel: "Insert variable",
       children: [
-        variablesList.map((variable) => {
-          const { name, helpText } = variable;
-          return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
-            import_design_system15.MenuItem,
-            {
-              id: name,
-              css: menuItemTextGroup,
-              onClick: () => onSelectVariable == null ? void 0 : onSelectVariable(variable),
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: name }),
-                helpText ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("small", { css: smallText, children: helpText }) : null
-              ]
-            },
-            name
-          );
+        variablesGroups.map((group) => {
+          var _a;
+          return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_design_system17.MenuGroup, { title: (_a = group.name) != null ? _a : "", children: group.variables.map((variable) => {
+            const { name, helpText } = variable;
+            return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+              import_design_system17.MenuItem,
+              {
+                id: name,
+                css: menuItemTextGroup,
+                onClick: () => onSelectVariable == null ? void 0 : onSelectVariable(variable),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: name }),
+                  helpText ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("small", { css: smallText, children: helpText }) : null
+                ]
+              },
+              name
+            );
+          }) }, group.name);
         }),
-        showAddVariableMenuOption && canDispatch ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-          variablesList.length ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_design_system15.MenuItemSeparator, {}) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-            import_design_system15.MenuItem,
+        showAddVariableMenuOption && canDispatch ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+          variablesGroups.length ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_design_system17.MenuItemSeparator, {}) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            import_design_system17.MenuItem,
             {
               onClick: () => {
                 setOpenedAdd(true);
                 dispatch({ type: "edit", variable: "" });
               },
-              children: "Add Variable"
+              children: "Add\u2026"
             }
           )
         ] }) : null,
-        menuHasVariableOptions && onResetVariables ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_design_system15.MenuItemSeparator, {}) : null,
-        onResetVariables ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_design_system15.MenuItem, { onClick: onResetVariables, css: { color: "var(--brand-secondary-5)" }, children: "Reset" }) : null,
-        tip && (menuHasVariableOptions || onResetVariables) ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_design_system15.MenuItemSeparator, {}) : null,
-        tip ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("i", { css: variablesTipText, children: tip }) : null
+        menuHasVariableOptions && onResetVariables ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_design_system17.MenuItemSeparator, {}) : null,
+        onResetVariables ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_design_system17.MenuItem, { onClick: onResetVariables, css: { color: "var(--brand-secondary-5)" }, children: "Reset" }) : null,
+        tip && (menuHasVariableOptions || onResetVariables) ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_design_system17.MenuItemSeparator, {}) : null,
+        tip ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("i", { css: variablesTipText, children: tip }) : null
       ]
     }
   );
 };
 
-// src/components/Variables/styles/InputVariables.styles.ts
-init_emotion_jsx_shim();
-var import_react32 = require("@emotion/react");
-var menuContainer = import_react32.css`
-  position: relative;
-`;
-var menuBtn2 = import_react32.css`
-  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();
-var import_react33 = require("@emotion/react");
-var labelText = import_react33.css`
-  align-items: center;
-  display: flex;
-  gap: var(--spacing-xs);
-  font-weight: var(--fw-regular);
-  margin: 0 0 var(--spacing-xs);
-`;
-var variableBindButton = import_react33.css`
-  align-items: center;
-  border: none;
-  border-radius: var(--rounded-base);
-  background: none;
-  display: flex;
-  height: 1.2rem;
-  padding: var(--spacing-2xs);
-  transition: background var(--duration-fast) var(--timing-ease-out),
-    color var(--duration-fast) var(--timing-ease-out);
-  width: 1.2rem;
-
-  &:hover,
-  &[aria-pressed='true']:not(:disabled) {
-    background: var(--brand-secondary-3);
-    color: var(--white);
-  }
-
-  &[aria-disabled='true'] {
-    background: none;
-    color: currentColor;
-  }
-`;
+// src/components/Variables/VariablesComposerVariableMenu.tsx
+var import_jsx_runtime33 = require("@emotion/react/jsx-runtime");
+var VariablesComposerVariableMenu = (props) => {
+  const [editor] = (0, import_LexicalComposerContext3.useLexicalComposerContext)();
+  const onSelectVariable = (selectedVariable) => {
+    editor.dispatchCommand(INSERT_VARIABLE_COMMAND, {
+      reference: selectedVariable.name
+    });
+  };
+  const onResetVariable = () => {
+    var _a;
+    editor.dispatchCommand(import_lexical4.CLEAR_EDITOR_COMMAND, void 0);
+    (_a = props.onResetVariables) == null ? void 0 : _a.call(props);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    SelectVariableMenu,
+    {
+      ...props,
+      onSelectVariable,
+      onResetVariables: props.onResetVariables ? onResetVariable : void 0
+    }
+  );
+};
 
 // src/components/Variables/VariableField.tsx
-var import_jsx_runtime31 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime34 = require("@emotion/react/jsx-runtime");
 function VariableField({
   label,
   selectVariableMenuOptions,
@@ -3525,25 +4019,191 @@ function VariableField({
 }) {
   const { variables } = useVariables(true);
   const varCount = Object.keys(variables).length;
-  const variableSelector = varCount > 0 && (selectVariableMenuOptions == null ? void 0 : selectVariableMenuOptions.onSelectVariable) && !disableVariables ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-    SelectVariableMenu,
+  const variableSelector = varCount > 0 && !disableVariables ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    VariablesComposerVariableMenu,
     {
       ...selectVariableMenuOptions,
       buttonCss: [variableBindButton, selectVariableMenuOptions == null ? void 0 : selectVariableMenuOptions.buttonCss],
       buttonProps: isActive ? { "aria-pressed": "true" } : void 0
     }
   ) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("label", { htmlFor: id, css: labelText, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("label", { htmlFor: id, css: labelText, children: [
       variableSelector,
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: label })
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: label })
     ] }),
     children
   ] });
 }
 
+// src/components/Variables/VariablesComposer.tsx
+init_emotion_jsx_shim();
+var import_LexicalClearEditorPlugin = require("@lexical/react/LexicalClearEditorPlugin");
+var import_LexicalComposer = require("@lexical/react/LexicalComposer");
+var import_LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
+var import_LexicalErrorBoundary = __toESM(require("@lexical/react/LexicalErrorBoundary"));
+var import_LexicalOnChangePlugin = require("@lexical/react/LexicalOnChangePlugin");
+var import_LexicalPlainTextPlugin = require("@lexical/react/LexicalPlainTextPlugin");
+var import_lexical6 = require("lexical");
+var import_react40 = require("react");
+var import_uuid2 = require("uuid");
+
+// src/components/Variables/composer/DisablePlugin.tsx
+init_emotion_jsx_shim();
+var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerContext");
+var import_react38 = require("react");
+function DisablePlugin({ disabled }) {
+  const [editor] = (0, import_LexicalComposerContext4.useLexicalComposerContext)();
+  (0, import_react38.useEffect)(() => {
+    editor.setEditable(!disabled);
+  }, [editor, disabled]);
+  return null;
+}
+
+// src/components/Variables/composer/SingleLineTextPlugin.tsx
+init_emotion_jsx_shim();
+var import_LexicalComposerContext5 = require("@lexical/react/LexicalComposerContext");
+var import_lexical5 = require("lexical");
+var import_react39 = require("react");
+function SingleLineTextPlugin() {
+  const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
+  (0, import_react39.useEffect)(() => {
+    editor.registerNodeTransform(import_lexical5.LineBreakNode, (node) => {
+      node.remove();
+    });
+  }, [editor]);
+  return null;
+}
+
+// src/components/Variables/VariablesComposer.tsx
+var import_jsx_runtime35 = require("@emotion/react/jsx-runtime");
+function VariablesComposer(props) {
+  const { value, children, onChange, disabled, disableVariables, ...variablesPluginProps } = props;
+  const [namespace] = (0, import_react40.useState)((0, import_uuid2.v4)());
+  const [lastEmittedValue, setLastEmittedValue] = (0, import_react40.useState)(value);
+  const editorConfig = (0, import_react40.useMemo)(
+    () => ({
+      namespace,
+      onError(error) {
+        throw error;
+      },
+      nodes: [VariableNode],
+      editorState: deserializeEditorState(props.value)
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [namespace]
+  );
+  const editorState = (0, import_react40.useRef)();
+  const updateTimeout = (0, import_react40.useRef)();
+  if (typeof document === "undefined")
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_LexicalComposer.LexicalComposer, { initialConfig: editorConfig, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      import_LexicalOnChangePlugin.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__ */ (0, import_jsx_runtime35.jsx)(SingleLineTextPlugin, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_LexicalClearEditorPlugin.ClearEditorPlugin, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(VariablesPlugin, { ...variablesPluginProps }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DisablePlugin, { disabled }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children })
+  ] });
+}
+function VariablesComposerInput(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    import_LexicalPlainTextPlugin.PlainTextPlugin,
+    {
+      contentEditable: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_LexicalContentEditable.ContentEditable, { css: input, ...props }),
+      placeholder: null,
+      ErrorBoundary: import_LexicalErrorBoundary.default
+    }
+  ) });
+}
+function deserializeEditorState(serialized) {
+  const result = [];
+  parseVariableExpression(serialized, (token, type) => {
+    if (type === "text") {
+      const node = {
+        type: import_lexical6.TextNode.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 === import_lexical6.TextNode.getType()) {
+    buffer.push(node.text);
+  }
+  if (node.type === VariableNode.getType()) {
+    buffer.push(`\${${node.reference}}`);
+  }
+  if (node.type === import_lexical6.LineBreakNode.getType()) {
+    buffer.push("\n");
+  }
+  if ("children" in node && node.children) {
+    for (const child of node.children) {
+      serializeRecursive(child, buffer);
+    }
+  }
+}
+
 // src/components/Variables/InputVariables.tsx
-var import_jsx_runtime32 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime36 = require("@emotion/react/jsx-runtime");
 function InputVariables({
   id,
   "aria-label": ariaLabel,
@@ -3551,38 +4211,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 : () => (0, import_uuid2.v4)());
-  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 [finalId] = React11.useState(id != null ? id : () => (0, import_uuid3.v4)());
   const hasVariablesInValue = getReferencedVariables(value).length > 0;
   const [hadVariablesInValue, setHadVariablesInValue] = React11.useState(hasVariablesInValue);
   React11.useEffect(() => {
@@ -3592,58 +4234,33 @@ function InputVariables({
   }, [hasVariablesInValue]);
   const disableVariablesForReals = disableVariables || Object.keys(variables).length === 0 && !showAddVariableMenuOption;
   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__ */ (0, import_jsx_runtime32.jsxs)("div", { children: [
-    inputWhenNoVariables && !hadVariablesInValue ? inputWhenNoVariables : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-      InputVariablesShell,
+  const sharedMenuProps = (0, import_react41.useMemo)(
+    () => ({
+      showAddVariableMenuOption,
+      onResetVariables: disableReset ? void 0 : () => {
+        setHadVariablesInValue(false);
+      }
+    }),
+    [disableReset, showAddVariableMenuOption]
+  );
+  const input2 = /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { children: [
+    inputWhenNoVariables && !hadVariablesInValue ? inputWhenNoVariables : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(InputVariablesMenu, { ...sharedMenuProps, disabled: disableInlineVariablesForReals, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      VariablesComposerInput,
       {
-        ...sharedMenuProps,
-        disabled: disableInlineVariablesForReals,
-        forceVisible: forceMenu || void 0,
-        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-          import_design_system16.Input,
-          {
-            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__ */ (0, import_jsx_runtime32.jsx)(import_design_system16.Caption, { children: caption }) : null,
-    errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_design_system16.ErrorMessage, { message: errorMessage }) : null,
-    warningMessage ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_design_system16.WarningMessage, { message: warningMessage }) : null,
-    infoMessage ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_design_system16.InfoMessage, { message: infoMessage }) : null
+    ) }),
+    caption ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_design_system18.Caption, { children: caption }) : null,
+    errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_design_system18.ErrorMessage, { message: errorMessage }) : null,
+    warningMessage ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_design_system18.WarningMessage, { message: warningMessage }) : null,
+    infoMessage ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_design_system18.InfoMessage, { message: infoMessage }) : null
   ] });
+  let body = input2;
   if (label) {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    body = /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       VariableField,
       {
         label,
@@ -3651,36 +4268,56 @@ function InputVariables({
         id: finalId,
         isActive: hadVariablesInValue,
         disableVariables: disableVariablesForReals,
-        children: input
+        children: input2
       }
     );
   }
-  return input;
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    VariablesComposer,
+    {
+      onChange,
+      value,
+      disableVariables: disableVariablesForReals,
+      showAddVariableMenuOption,
+      enableEditingVariables,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PasteTransformerPlugin, { transformPaste }),
+        body
+      ]
+    }
+  );
 }
-function InputVariablesShell({
+function InputVariablesMenu({
   children,
   disabled,
   ...props
 }) {
   if (disabled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { css: menuContainer, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { css: menuContainer, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectVariableMenu, { ...props, tip: "Tip: access this list by typing ${", buttonCss: menuBtn2 })
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      VariablesComposerVariableMenu,
+      {
+        ...props,
+        tip: "Tip: access this list by typing $",
+        buttonCss: menuBtn
+      }
+    )
   ] });
 }
 
 // src/components/Variables/VariablesList.tsx
 init_emotion_jsx_shim();
-var import_react35 = require("@emotion/react");
-var import_design_system17 = require("@uniformdev/design-system");
+var import_react43 = require("@emotion/react");
+var import_design_system19 = require("@uniformdev/design-system");
 var import_react_beautiful_dnd2 = require("react-beautiful-dnd");
 
 // src/components/Variables/styles/VariablesList.styles.ts
 init_emotion_jsx_shim();
-var import_react34 = require("@emotion/react");
-var tableRow = (isDragging) => import_react34.css`
+var import_react42 = require("@emotion/react");
+var tableRow = (isDragging) => import_react42.css`
   position: relative;
   ${isDragging ? `
   display: table;   
@@ -3688,7 +4325,7 @@ var tableRow = (isDragging) => import_react34.css`
   top: auto !important;
   ` : void 0}
 `;
-var tableCellDragIcon = import_react34.css`
+var tableCellDragIcon = import_react42.css`
   &::after {
     content: '';
     display: block;
@@ -3706,7 +4343,7 @@ var tableCellDragIcon = import_react34.css`
     opacity: 1;
   }
 `;
-var variableName = import_react34.css`
+var variableName = import_react42.css`
   border: none;
   color: var(--brand-secondary-5);
   font-weight: var(--fw-medium);
@@ -3717,7 +4354,7 @@ var variableName = import_react34.css`
   white-space: nowrap;
   max-width: 20ch;
 `;
-var variableValue = import_react34.css`
+var variableValue = import_react42.css`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -3725,7 +4362,7 @@ var variableValue = import_react34.css`
 `;
 
 // src/components/Variables/VariablesList.tsx
-var import_jsx_runtime33 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime37 = require("@emotion/react/jsx-runtime");
 function VariablesList() {
   const { variables, dispatch } = useVariables();
   const sorted = variablesToList(variables);
@@ -3746,24 +4383,24 @@ function VariablesList() {
       return result;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_beautiful_dnd2.DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_beautiful_dnd2.Droppable, { droppableId: "variables-table", children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_design_system17.Table, { ...provided.droppableProps, ref: provided.innerRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_design_system17.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_design_system17.TableRow, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_design_system17.TableCellHead, { children: "Name" }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_design_system17.TableCellHead, { children: "Default Value" }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_design_system17.TableCellHead, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_beautiful_dnd2.DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_beautiful_dnd2.Droppable, { droppableId: "variables-table", children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_design_system19.Table, { ...provided.droppableProps, ref: provided.innerRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_design_system19.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_design_system19.TableRow, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_design_system19.TableCellHead, { children: "Name" }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_design_system19.TableCellHead, { children: "Default Value" }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_design_system19.TableCellHead, {})
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_design_system17.TableBody, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_design_system19.TableBody, { children: [
         sorted.map(({ name, displayName, default: defaultValue }, index) => {
           const text = displayName != null ? displayName : name;
-          return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             import_react_beautiful_dnd2.Draggable,
             {
               draggableId: name,
               index,
               isDragDisabled: sorted.length === 1,
-              children: (provided2, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-                import_design_system17.TableRow,
+              children: (provided2, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                import_design_system19.TableRow,
                 {
                   ref: provided2.innerRef,
                   ...provided2.dragHandleProps,
@@ -3772,7 +4409,7 @@ function VariablesList() {
                   css: tableRow(snapshot.isDragging),
                   "data-dragging": snapshot.isDragging,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_design_system17.TableCellData, { css: sorted.length > 1 ? tableCellDragIcon : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_design_system19.TableCellData, { css: sorted.length > 1 ? tableCellDragIcon : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                       "button",
                       {
                         css: variableName,
@@ -3785,21 +4422,21 @@ function VariablesList() {
                         children: text
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_design_system17.TableCellData, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { css: variableValue, title: defaultValue, children: defaultValue }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_design_system17.TableCellData, { align: "right", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_design_system19.TableCellData, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { css: variableValue, title: defaultValue, children: defaultValue }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_design_system19.TableCellData, { align: "right", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                       "button",
                       {
                         type: "button",
                         title: `delete ${text}`,
                         css: [
-                          import_design_system17.button,
-                          import_react35.css`
+                          import_design_system19.button,
+                          import_react43.css`
                                   background: transparent;
                                 `
                         ],
                         "aria-controls": text,
                         onClick: () => dispatch({ type: "remove", variable: name }),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_design_system17.Icon, { icon: "trash", iconColor: "red" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_design_system19.Icon, { icon: "trash", iconColor: "red" })
                       }
                     ) })
                   ]
@@ -3812,8 +4449,8 @@ function VariablesList() {
         provided.placeholder
       ] })
     ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-      import_design_system17.AddListButton,
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      import_design_system19.AddListButton,
       {
         onButtonClick: () => dispatch({ type: "edit", variable: "" }),
         "aria-label": "Add variable",
@@ -3826,49 +4463,36 @@ function VariablesList() {
 }
 
 // src/components/DataResourceDynamicInputProvider.tsx
-var import_jsx_runtime34 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime38 = require("@emotion/react/jsx-runtime");
 function DataResourceDynamicInputProvider({
   children,
   dynamicInputs
 }) {
   if (dynamicInputs) {
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DataResourceDynamicInputProviderRenderer, { dynamicInputs, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DataResourceDynamicInputProviderRenderer, { dynamicInputs, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DataResourceDynamicInputProviderContextShim, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DataResourceDynamicInputProviderContextShim, { children });
 }
 function DataResourceDynamicInputProviderContextShim(props) {
   const {
     metadata: { dynamicInputs }
   } = useMeshLocation("dataResource");
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DataResourceDynamicInputProviderRenderer, { ...props, dynamicInputs });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DataResourceDynamicInputProviderRenderer, { ...props, dynamicInputs });
 }
 function DataResourceDynamicInputProviderRenderer({
   children,
   dynamicInputs
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-    VariablesProvider,
-    {
-      value: convertDynamicInputsToVariables(dynamicInputs),
-      onChange: () => {
-        throw new Error("Cannot change dynamic inputs. Make sure that add variable is disabled.");
-      },
-      editVariableComponent: () => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: "Cannot edit dynamic inputs." }),
-      children
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(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__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-          input.value || /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("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__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children: input2.value || /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("em", { children: "not provided" }) })
         // type abuse! 💚
       };
       return acc;
@@ -3879,14 +4503,14 @@ function convertDynamicInputsToVariables(dynamicInputs) {
 
 // src/components/DataResourceVariablesList.tsx
 init_emotion_jsx_shim();
-var import_design_system18 = require("@uniformdev/design-system");
-var import_jsx_runtime35 = require("@emotion/react/jsx-runtime");
+var import_design_system20 = require("@uniformdev/design-system");
+var import_jsx_runtime39 = require("@emotion/react/jsx-runtime");
 function DataResourceVariablesList(props) {
   const {
     value,
     metadata: { dataType, dynamicInputs }
   } = useMeshLocation("dataResource");
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     DataResourceVariablesListExplicit,
     {
       ...props,
@@ -3907,14 +4531,14 @@ function DataResourceVariablesListExplicit({
   const variableDefinitions = variablesToList(dataType.variables);
   if (variableDefinitions.length === 0) {
     if (NoVariablesComponent) {
-      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(NoVariablesComponent, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(NoVariablesComponent, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_design_system18.Callout, { type: "note", children: "No settings are required." });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_design_system20.Callout, { type: "note", children: "No settings are required." });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DataResourceDynamicInputProvider, { dynamicInputs, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { children: variableDefinitions.map((variableDefinition) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DataResourceDynamicInputProvider, { dynamicInputs, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("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__ */ (0, import_jsx_runtime35.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       VariableRenderer,
       {
         definition: variableDefinition,
@@ -3937,7 +4561,7 @@ function DataResourceVariablesListExplicit({
 }
 function TextVariableRenderer({ definition, value, setValue }) {
   var _a;
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     InputVariables,
     {
       label: definition.displayName || definition.name,
@@ -3953,14 +4577,14 @@ init_emotion_jsx_shim();
 
 // src/components/Request/RequestBody.tsx
 init_emotion_jsx_shim();
-var import_react37 = require("@emotion/react");
-var import_design_system19 = require("@uniformdev/design-system");
-var import_react38 = require("react");
+var import_react45 = require("@emotion/react");
+var import_design_system21 = require("@uniformdev/design-system");
+var import_react46 = require("react");
 
 // src/components/Request/RequestProvider.tsx
 init_emotion_jsx_shim();
 var React12 = __toESM(require("react"));
-var import_jsx_runtime36 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime40 = require("@emotion/react/jsx-runtime");
 var RequestContext = React12.createContext(null);
 function RequestProvider({ value, onChange, children }) {
   const contextValue = React12.useMemo(() => {
@@ -4029,7 +4653,7 @@ function RequestProvider({ value, onChange, children }) {
       request: value
     };
   }, [onChange, value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RequestContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(RequestContext.Provider, { value: contextValue, children });
 }
 function useRequest() {
   const context = React12.useContext(RequestContext);
@@ -4044,11 +4668,11 @@ init_emotion_jsx_shim();
 
 // src/components/Request/styles/Request.styles.ts
 init_emotion_jsx_shim();
-var import_react36 = require("@emotion/react");
-var innerContentStyles = import_react36.css`
+var import_react44 = require("@emotion/react");
+var innerContentStyles = import_react44.css`
   background: var(--white);
 `;
-var requestTypeContainer = (bgColor) => import_react36.css`
+var requestTypeContainer = (bgColor) => import_react44.css`
   align-items: start;
   background: ${bgColor};
   display: grid;
@@ -4057,17 +4681,17 @@ var requestTypeContainer = (bgColor) => import_react36.css`
 `;
 
 // src/components/Request/RequestTypeContainer.tsx
-var import_jsx_runtime37 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime41 = require("@emotion/react/jsx-runtime");
 var RequestTypeContainer = ({
   bgColor = "transparent",
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { css: requestTypeContainer(bgColor), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { css: requestTypeContainer(bgColor), ...props, children });
 };
 
 // src/components/Request/RequestBody.tsx
-var import_jsx_runtime38 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime42 = require("@emotion/react/jsx-runtime");
 var LANGUAGE_OPTIONS = [
   { label: "Text", value: "plaintext" },
   { label: "JSON", value: "json" },
@@ -4086,23 +4710,23 @@ var LANGUAGE_TO_CONTENT_TYPE = {
 };
 function RequestBody() {
   const { request, dispatch } = useRequest();
-  const [language, setLanguage] = (0, import_react38.useState)("json");
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  const [language, setLanguage] = (0, import_react46.useState)("json");
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "div",
     {
-      css: import_react37.css`
+      css: import_react45.css`
         background: var(--white);
       `,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           RequestTypeContainer,
           {
             bgColor: "var(--gray-100)",
-            css: import_react37.css`
+            css: import_react45.css`
           padding: var(--spacing-sm) var(--spacing-base);
         `,
-            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-              import_design_system19.InputSelect,
+            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              import_design_system21.InputSelect,
               {
                 label: "Language",
                 showLabel: false,
@@ -4124,8 +4748,8 @@ function RequestBody() {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-          import_design_system19.JsonEditor,
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          import_design_system21.JsonEditor,
           {
             height: 200,
             defaultValue: request.body,
@@ -4143,8 +4767,8 @@ function RequestBody() {
 
 // src/components/Request/RequestHeaders.tsx
 init_emotion_jsx_shim();
-var import_design_system20 = require("@uniformdev/design-system");
-var import_jsx_runtime39 = require("@emotion/react/jsx-runtime");
+var import_design_system22 = require("@uniformdev/design-system");
+var import_jsx_runtime43 = require("@emotion/react/jsx-runtime");
 function RequestHeaders({ disableVariables }) {
   var _a, _b;
   const { dispatch, request } = useRequest();
@@ -4160,29 +4784,29 @@ function RequestHeaders({ disableVariables }) {
       index
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { css: innerContentStyles, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_design_system20.Table, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_design_system20.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_design_system20.TableRow, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_design_system20.TableCellHead, { children: "Name" }),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_design_system20.TableCellHead, { children: "Value" })
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { css: innerContentStyles, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_design_system22.Table, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system22.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_design_system22.TableRow, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system22.TableCellHead, { children: "Name" }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system22.TableCellHead, { children: "Value" })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_design_system20.TableBody, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_design_system22.TableBody, { children: [
       (_b = (_a = request.baseRequest) == null ? void 0 : _a.headers) == null ? void 0 : _b.map((baseHeader) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_design_system20.TableRow, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_design_system20.TableCellData, { width: "50%", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_design_system22.TableRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_design_system22.TableCellData, { width: "50%", children: [
             baseHeader.key,
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("br", {}),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("small", { children: "from data source" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("br", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("small", { children: "from data source" }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_design_system20.TableCellData, { width: "50%", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("i", { css: { color: "var(--gray-500)" }, children: baseHeader.value }),
-            request.headers.find((p2) => p2.key === baseHeader.key) ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_design_system20.WarningMessage, { message: "overridden below" }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_design_system22.TableCellData, { width: "50%", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("i", { css: { color: "var(--gray-500)" }, children: baseHeader.value }),
+            request.headers.find((p2) => p2.key === baseHeader.key) ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system22.WarningMessage, { message: "overridden below" }) : null
           ] })
         ] }, baseHeader.key);
       }),
       deezHeaders.map((header, index) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_design_system20.TableRow, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_design_system20.TableCellData, { width: "50%", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-            import_design_system20.Input,
+        return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_design_system22.TableRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system22.TableCellData, { width: "50%", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            import_design_system22.Input,
             {
               label: header.key,
               value: header.key,
@@ -4201,13 +4825,15 @@ function RequestHeaders({ disableVariables }) {
               "data-test-id": "header-key"
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_design_system20.TableCellData, { width: "50%", children: header.key ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system22.TableCellData, { width: "50%", children: header.key ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             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 })
@@ -4219,13 +4845,13 @@ function RequestHeaders({ disableVariables }) {
 
 // src/components/Request/RequestMethodSelect.tsx
 init_emotion_jsx_shim();
-var import_design_system21 = require("@uniformdev/design-system");
-var import_jsx_runtime40 = require("@emotion/react/jsx-runtime");
+var import_design_system23 = require("@uniformdev/design-system");
+var import_jsx_runtime44 = require("@emotion/react/jsx-runtime");
 function RequestMethodSelect(props) {
   var _a;
   const { request, dispatch } = useRequest();
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-    import_design_system21.InputSelect,
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    import_design_system23.InputSelect,
     {
       ...props,
       options: [
@@ -4241,8 +4867,8 @@ function RequestMethodSelect(props) {
 
 // src/components/Request/RequestParameters.tsx
 init_emotion_jsx_shim();
-var import_design_system22 = require("@uniformdev/design-system");
-var import_jsx_runtime41 = require("@emotion/react/jsx-runtime");
+var import_design_system24 = require("@uniformdev/design-system");
+var import_jsx_runtime45 = require("@emotion/react/jsx-runtime");
 function RequestParameters({ disableVariables }) {
   var _a, _b;
   const { dispatch, request } = useRequest();
@@ -4258,29 +4884,29 @@ function RequestParameters({ disableVariables }) {
       index
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { css: innerContentStyles, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_design_system22.Table, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_design_system22.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_design_system22.TableRow, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_design_system22.TableCellHead, { children: "Name" }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_design_system22.TableCellHead, { children: "Value" })
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { css: innerContentStyles, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_design_system24.Table, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_design_system24.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_design_system24.TableRow, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_design_system24.TableCellHead, { children: "Name" }),
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_design_system24.TableCellHead, { children: "Value" })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_design_system22.TableBody, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_design_system24.TableBody, { children: [
       (_b = (_a = request.baseRequest) == null ? void 0 : _a.parameters) == null ? void 0 : _b.map((baseParameter) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_design_system22.TableRow, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_design_system22.TableCellData, { width: "50%", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_design_system24.TableRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_design_system24.TableCellData, { width: "50%", children: [
             baseParameter.key,
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("br", {}),
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("small", { children: "from data source" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("br", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("small", { children: "from data source" }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_design_system22.TableCellData, { width: "50%", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("i", { css: { color: "var(--gray-500)" }, children: baseParameter.value }),
-            request.parameters.find((p2) => p2.key === baseParameter.key) ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_design_system22.WarningMessage, { message: "overridden below" }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_design_system24.TableCellData, { width: "50%", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("i", { css: { color: "var(--gray-500)" }, children: baseParameter.value }),
+            request.parameters.find((p2) => p2.key === baseParameter.key) ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_design_system24.WarningMessage, { message: "overridden below" }) : null
           ] })
         ] }, baseParameter.key);
       }),
       deezParameters.map((parameter, index) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_design_system22.TableRow, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_design_system22.TableCellData, { width: "50%", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-            import_design_system22.Input,
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_design_system24.TableRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_design_system24.TableCellData, { width: "50%", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            import_design_system24.Input,
             {
               label: parameter.key,
               value: parameter.key,
@@ -4299,7 +4925,7 @@ function RequestParameters({ disableVariables }) {
               "data-test-id": "parameter-key"
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_design_system22.TableCellData, { width: "50%", children: parameter.key ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_design_system24.TableCellData, { width: "50%", children: parameter.key ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
             InputVariables,
             {
               value: parameter.value,
@@ -4310,7 +4936,9 @@ function RequestParameters({ disableVariables }) {
               }),
               disableVariables,
               "data-test-id": "parameter-value",
-              showAddVariableMenuOption: true
+              showAddVariableMenuOption: true,
+              enableEditingVariables: true,
+              disableReset: true
             }
           ) : null })
         ] }, index);
@@ -4321,8 +4949,8 @@ function RequestParameters({ disableVariables }) {
 
 // src/components/Request/RequestUrl.tsx
 init_emotion_jsx_shim();
-var import_react39 = require("@emotion/react");
-var import_react40 = require("react");
+var import_react47 = require("@emotion/react");
+var import_react48 = require("react");
 
 // src/components/Request/urlEncodeRequestParameter.ts
 init_emotion_jsx_shim();
@@ -4344,35 +4972,35 @@ function decodeVariablesInUrlEncodedString(string, varValues) {
 }
 
 // src/components/Request/RequestUrl.tsx
-var import_jsx_runtime42 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime46 = require("@emotion/react/jsx-runtime");
 function RequestUrl() {
   var _a, _b;
   const { variables } = useVariables();
   const { request } = useRequest();
-  const mergedParameters = (0, import_react40.useMemo)(() => {
+  const mergedParameters = (0, import_react48.useMemo)(() => {
     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__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     "small",
     {
-      css: import_react39.css`
+      css: import_react47.css`
         display: inline-block;
         margin-bottom: var(--spacing-xs);
         word-break: break-word;
       `,
       children: [
-        request.baseRequest ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { children: (_b = request.baseRequest) == null ? void 0 : _b.baseUrl }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { css: { fontWeight: request.baseRequest ? "bold" : "inherit" }, children: [
+        request.baseRequest ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { children: (_b = request.baseRequest) == null ? void 0 : _b.baseUrl }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { css: { fontWeight: request.baseRequest ? "bold" : "inherit" }, children: [
           urlEncodeRequestUrl(request.relativeUrl, variables),
-          mergedParameters.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+          mergedParameters.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
             "?",
             mergedParameters.map((param, index) => {
               const encoded = urlEncodeRequestParameter(param, variables);
-              return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { children: [
+              return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { children: [
                 index > 0 ? "&" : null,
                 encoded.key,
                 "=",
@@ -4389,9 +5017,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;
@@ -4399,7 +5027,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 });
@@ -4412,25 +5039,25 @@ function handlePastedUrl(value, currentRequest, dispatch) {
     } catch (e) {
     }
   }
+  return relativeUrl;
 }
 
 // src/components/Request/RequestUrlInput.tsx
-var import_jsx_runtime43 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime47 = require("@emotion/react/jsx-runtime");
 function RequestUrlInput(props) {
   const { request, dispatch } = useRequest();
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     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"
     }
   );
@@ -4473,18 +5100,19 @@ function useRequestParameter(paramName) {
 }
 
 // src/components/DataSourceEditor.tsx
-var import_jsx_runtime44 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime48 = require("@emotion/react/jsx-runtime");
 function DataSourceEditor({ onChange, children, editVariableComponent }) {
   var _a;
   const { value } = useMeshLocation("dataSource");
   const currentRequestValue = convertDataSourceToRequestData(value);
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
     VariablesProvider,
     {
       value: (_a = value.variables) != null ? _a : {},
       onChange: (newValue) => onChange((prev) => ({ newValue: { ...prev, variables: newValue } })),
       editVariableComponent,
-      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      readOnly: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         RequestProvider,
         {
           value: currentRequestValue,
@@ -4522,21 +5150,23 @@ function convertRequestDataToDataSource(dataSource, requestData) {
 
 // src/components/DataTypeEditor.tsx
 init_emotion_jsx_shim();
-var import_jsx_runtime45 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime49 = require("@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__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     VariablesProvider,
     {
       value: (_a = value.variables) != null ? _a : {},
       onChange: (newValue) => onChange((prev) => ({ newValue: { ...prev, variables: newValue } })),
       editVariableComponent,
-      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      readOnly: isReadOnly,
+      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         RequestProvider,
         {
           value: currentRequestValue,
@@ -4583,17 +5213,17 @@ function convertRequestDataToDataType(dataType, requestData) {
 
 // src/components/MeshApp.tsx
 init_emotion_jsx_shim();
-var import_design_system23 = require("@uniformdev/design-system");
+var import_design_system25 = require("@uniformdev/design-system");
 
 // src/hooks/useInitializeUniformMeshSdk.ts
 init_emotion_jsx_shim();
 var import_mesh_sdk = require("@uniformdev/mesh-sdk");
-var import_react41 = require("react");
+var import_react49 = require("react");
 var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
-  const [error, setError] = (0, import_react41.useState)();
-  const [sdk, setSdk] = (0, import_react41.useState)();
-  const initializationInProgress = (0, import_react41.useRef)(false);
-  (0, import_react41.useEffect)(
+  const [error, setError] = (0, import_react49.useState)();
+  const [sdk, setSdk] = (0, import_react49.useState)();
+  const initializationInProgress = (0, import_react49.useRef)(false);
+  (0, import_react49.useEffect)(
     () => {
       if (typeof window === "undefined" || sdk) {
         return;
@@ -4626,7 +5256,7 @@ var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
 };
 
 // src/components/MeshApp.tsx
-var import_jsx_runtime46 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime50 = require("@emotion/react/jsx-runtime");
 var MeshApp = ({
   children,
   loadingComponent,
@@ -4635,37 +5265,37 @@ var MeshApp = ({
   const { initializing, error, sdk } = useInitializeUniformMeshSdk();
   if (initializing || !sdk) {
     const LoadingComponent = loadingComponent;
-    return LoadingComponent ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(LoadingComponent, {}) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_design_system23.LoadingIndicator, {});
+    return LoadingComponent ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(LoadingComponent, {}) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_design_system25.LoadingIndicator, {});
   }
   if (error) {
     const ErrorComponent = errorComponent;
     if (ErrorComponent) {
-      return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ErrorComponent, { error });
+      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ErrorComponent, { error });
     }
     throw error;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(UniformMeshSdkContext.Provider, { value: { sdk }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_design_system23.Theme, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(UniformMeshLocationContextProvider, { children })
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(UniformMeshSdkContext.Provider, { value: { sdk }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_design_system25.Theme, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(UniformMeshLocationContextProvider, { children })
   ] });
 };
 
 // src/components/ObjectSearch/DataRefreshButton.tsx
 init_emotion_jsx_shim();
-var import_react42 = require("@emotion/react");
-var import_design_system24 = require("@uniformdev/design-system");
-var import_jsx_runtime47 = require("@emotion/react/jsx-runtime");
+var import_react50 = require("@emotion/react");
+var import_design_system26 = require("@uniformdev/design-system");
+var import_jsx_runtime51 = require("@emotion/react/jsx-runtime");
 var DataRefreshButton = ({
   buttonText,
   isLoading,
   onRefreshData,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_design_system24.Button, { buttonType: "primaryInvert", onClick: onRefreshData, disabled: isLoading, ...props, children: [
-    !isLoading ? null : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-      import_design_system24.LoadingIndicator,
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system26.Button, { buttonType: "primaryInvert", onClick: onRefreshData, disabled: isLoading, ...props, children: [
+    !isLoading ? null : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      import_design_system26.LoadingIndicator,
       {
-        css: import_react42.css`
+        css: import_react50.css`
             ${isLoading ? "opacity: 0.2;" : void 0}
           `
       }
@@ -5837,13 +6467,13 @@ function bindVariablesToObjectRecursive({
 }
 
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
-var import_design_system25 = require("@uniformdev/design-system");
+var import_design_system27 = require("@uniformdev/design-system");
 
 // src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
 init_emotion_jsx_shim();
-var import_react43 = require("react");
-var import_jsx_runtime48 = require("@emotion/react/jsx-runtime");
-var ObjectSearchContext = (0, import_react43.createContext)({
+var import_react51 = require("react");
+var import_jsx_runtime52 = require("@emotion/react/jsx-runtime");
+var ObjectSearchContext = (0, import_react51.createContext)({
   onSetQuery: () => {
   },
   onSelectItem: () => {
@@ -5858,15 +6488,15 @@ var ObjectSearchContext = (0, import_react43.createContext)({
   }
 });
 var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
-  const [query, setQuery] = (0, import_react43.useState)({
+  const [query, setQuery] = (0, import_react51.useState)({
     contentType: "",
     keyword: ""
   });
   const { flatVariables } = useVariables(true);
-  const querySearchDeferred = (0, import_react43.useDeferredValue)(query);
-  const [selectedItems, setSelectedItems] = (0, import_react43.useState)(currentlySelectedItems != null ? currentlySelectedItems : []);
-  const [list, setList] = (0, import_react43.useState)({});
-  const onSetQuery = (0, import_react43.useCallback)(
+  const querySearchDeferred = (0, import_react51.useDeferredValue)(query);
+  const [selectedItems, setSelectedItems] = (0, import_react51.useState)(currentlySelectedItems != null ? currentlySelectedItems : []);
+  const [list, setList] = (0, import_react51.useState)({});
+  const onSetQuery = (0, import_react51.useCallback)(
     (value2) => {
       if (Array.isArray(value2.contentType) && value2.contentType.length > 0) {
         return setQuery({
@@ -5878,7 +6508,7 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
     },
     [setQuery]
   );
-  const onSelectItem = (0, import_react43.useCallback)(
+  const onSelectItem = (0, import_react51.useCallback)(
     (selectedResult) => {
       if (Array.isArray(selectedResult)) {
         setSelectedItems(selectedResult);
@@ -5892,17 +6522,17 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
     },
     [setSelectedItems, selectedItems]
   );
-  const onRemoveAllSelectedItems = (0, import_react43.useCallback)(() => {
+  const onRemoveAllSelectedItems = (0, import_react51.useCallback)(() => {
     setSelectedItems([]);
   }, [setSelectedItems]);
-  const onSetList = (0, import_react43.useCallback)(
+  const onSetList = (0, import_react51.useCallback)(
     (value2) => {
       setList(value2);
     },
     [setList]
   );
-  const boundQuery = (0, import_react43.useMemo)(() => bindQuery(query, flatVariables), [query, flatVariables]);
-  const value = (0, import_react43.useMemo)(
+  const boundQuery = (0, import_react51.useMemo)(() => bindQuery(query, flatVariables), [query, flatVariables]);
+  const value = (0, import_react51.useMemo)(
     () => ({
       boundQuery,
       onSetQuery,
@@ -5924,10 +6554,10 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
       onSetList
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ObjectSearchContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ObjectSearchContext.Provider, { value, children });
 };
 function useObjectSearchContext() {
-  return (0, import_react43.useContext)(ObjectSearchContext);
+  return (0, import_react51.useContext)(ObjectSearchContext);
 }
 function bindQuery(query, inputs) {
   const { result, errors } = bindVariablesToObject({
@@ -5942,7 +6572,7 @@ function bindQuery(query, inputs) {
 }
 
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
-var import_jsx_runtime49 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime53 = require("@emotion/react/jsx-runtime");
 var ObjectSearchContainer = ({
   label,
   enableDynamicInputToResultId,
@@ -5953,9 +6583,9 @@ var ObjectSearchContainer = ({
   var _a, _b;
   const { onSelectItem, selectedListItems, list } = useObjectSearchContext();
   const { flatVariables } = useVariables(true);
-  const body = /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system25.VerticalRhythm, { children: [
+  const body = /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_design_system27.VerticalRhythm, { children: [
     searchFilters,
-    !resultList ? null : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system25.ScrollableList, { role: "list", children: resultList })
+    !resultList ? null : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_design_system27.ScrollableList, { role: "list", children: resultList })
   ] });
   const handleSelectedVariableChange = (selectedValue) => {
     var _a2;
@@ -5984,8 +6614,8 @@ var ObjectSearchContainer = ({
       }
     ]);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system25.IconsProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system25.VerticalRhythm, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system25.Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_design_system27.IconsProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_design_system27.VerticalRhythm, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_design_system27.Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       InputVariables,
       {
         label,
@@ -6001,13 +6631,13 @@ var ObjectSearchContainer = ({
 
 // src/components/ObjectSearch/ObjectSearchFilter.tsx
 init_emotion_jsx_shim();
-var import_design_system26 = require("@uniformdev/design-system");
-var import_react45 = require("react");
+var import_design_system28 = require("@uniformdev/design-system");
+var import_react53 = require("react");
 
 // src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
 init_emotion_jsx_shim();
-var import_react44 = require("@emotion/react");
-var ObjectSearchFilterContainerLabel = import_react44.css`
+var import_react52 = require("@emotion/react");
+var ObjectSearchFilterContainerLabel = import_react52.css`
   align-items: center;
   display: flex;
   font-size: var(--fs-sm);
@@ -6015,21 +6645,21 @@ var ObjectSearchFilterContainerLabel = import_react44.css`
   line-height: 1rem;
   margin-bottom: var(--spacing-sm);
 `;
-var ObjectSearchFilterContainer = import_react44.css`
+var ObjectSearchFilterContainer = import_react52.css`
   display: grid;
   gap: var(--spacing-base);
 `;
-var ObjectSearchFilterDropdownAndTextSearch = import_react44.css`
+var ObjectSearchFilterDropdownAndTextSearch = import_react52.css`
   grid-template-columns: 0.5fr 1fr;
 `;
-var ObjectSearchFilterGrid = (gridColumns) => import_react44.css`
+var ObjectSearchFilterGrid = (gridColumns) => import_react52.css`
   display: grid;
   grid-template-columns: ${gridColumns};
   gap: var(--spacing-base);
 `;
 
 // src/components/ObjectSearch/ObjectSearchFilter.tsx
-var import_jsx_runtime50 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime54 = require("@emotion/react/jsx-runtime");
 var ObjectSearchFilter = ({
   requireContentType,
   typeSelectorAllTypesOptionText = "All content types",
@@ -6039,7 +6669,7 @@ var ObjectSearchFilter = ({
   selectOptions
 }) => {
   const { query, onSetQuery } = useObjectSearchContext();
-  const [searchState, setSearchState] = (0, import_react45.useState)({
+  const [searchState, setSearchState] = (0, import_react53.useState)({
     contentType: "",
     keyword: ""
   });
@@ -6049,9 +6679,9 @@ var ObjectSearchFilter = ({
     });
     onSetQuery({ ...query, ...value });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("fieldset", { css: [ObjectSearchFilterContainer, ObjectSearchFilterDropdownAndTextSearch], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-      import_design_system26.InputSelect,
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("fieldset", { css: [ObjectSearchFilterContainer, ObjectSearchFilterDropdownAndTextSearch], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      import_design_system28.InputSelect,
       {
         label: selectLabel,
         showLabel: false,
@@ -6066,8 +6696,8 @@ var ObjectSearchFilter = ({
         value: query.contentType
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-      import_design_system26.InputKeywordSearch,
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      import_design_system28.InputKeywordSearch,
       {
         inputFieldName: searchInputName,
         placeholder: searchInputPlaceholderText,
@@ -6082,23 +6712,23 @@ var ObjectSearchFilter = ({
 
 // src/components/ObjectSearch/ObjectSearchFilterContainer.tsx
 init_emotion_jsx_shim();
-var import_jsx_runtime51 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime55 = require("@emotion/react/jsx-runtime");
 var ObjectSearchFilterContainer2 = ({ label, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { css: ObjectSearchFilterContainer, children })
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { css: ObjectSearchFilterContainer, children })
   ] });
 };
 
 // src/components/ObjectSearch/ObjectSearchListItem.tsx
 init_emotion_jsx_shim();
-var import_design_system28 = require("@uniformdev/design-system");
+var import_design_system30 = require("@uniformdev/design-system");
 
 // src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
 init_emotion_jsx_shim();
-var import_react46 = require("@emotion/react");
-var import_design_system27 = require("@uniformdev/design-system");
-var ObjectListItemContainer = import_react46.css`
+var import_react54 = require("@emotion/react");
+var import_design_system29 = require("@uniformdev/design-system");
+var ObjectListItemContainer = import_react54.css`
   align-items: center;
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -6111,8 +6741,8 @@ var ObjectListItemContainer = import_react46.css`
     display: none;
   }
 `;
-var ObjectListItemLoading = import_react46.css`
-  animation: ${import_design_system27.skeletonLoading} 1s linear infinite alternate;
+var ObjectListItemLoading = import_react54.css`
+  animation: ${import_design_system29.skeletonLoading} 1s linear infinite alternate;
   border-color: transparent;
   min-height: 42px;
   position: relative;
@@ -6135,37 +6765,37 @@ var ObjectListItemLoading = import_react46.css`
     width: 1rem;
   }
 `;
-var ObjectListItemHeadingGroup = import_react46.css`
+var ObjectListItemHeadingGroup = import_react54.css`
   align-items: center;
   display: grid;
 `;
-var ObjectListItemTitle = import_react46.css`
+var ObjectListItemTitle = import_react54.css`
   color: var(--brand-secondary-1);
   display: block;
   font-size: var(--fs-sm);
 `;
-var ObjectListItemSubtitle = import_react46.css`
+var ObjectListItemSubtitle = import_react54.css`
   color: var(--gray-500);
   display: block;
   font-size: var(--fs-xs);
   line-height: 1;
 `;
-var ObjectListItemInfoContainer = import_react46.css`
+var ObjectListItemInfoContainer = import_react54.css`
   align-items: center;
   display: flex;
   justify-content: center;
 `;
-var ObjectListItemControlledContent = import_react46.css`
+var ObjectListItemControlledContent = import_react54.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectListItemUnControlledContent = import_react46.css`
+var ObjectListItemUnControlledContent = import_react54.css`
   margin-top: var(--spacing-sm);
   grid-column: 1 / -1;
 `;
 
 // src/components/ObjectSearch/ObjectSearchListItem.tsx
-var import_jsx_runtime52 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime56 = require("@emotion/react/jsx-runtime");
 var ObjectSearchListItem = ({
   id,
   title,
@@ -6188,25 +6818,25 @@ var ObjectSearchListItem = ({
     return onSelectItem([selectedItem]);
   };
   const hideWhenInSelectedList = selectedListItems.some((item) => item.id === id);
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { role: "listitem", hidden: hideWhenInSelectedList, css: ObjectListItemContainer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { role: "button", onClick: handleSelectItem, css: ObjectListItemControlledContent, children: [
-      !image ? null : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
-        !contentType ? null : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { css: ObjectListItemSubtitle, children: formatedContentType }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { css: ObjectListItemTitle, children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { role: "listitem", hidden: hideWhenInSelectedList, css: ObjectListItemContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { role: "button", onClick: handleSelectItem, css: ObjectListItemControlledContent, children: [
+      !image ? null : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
+        !contentType ? null : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { css: ObjectListItemSubtitle, children: formatedContentType }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { css: ObjectListItemTitle, children: title })
       ] })
     ] }),
-    !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { css: ObjectListItemInfoContainer, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_design_system28.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData }) }),
-    !children ? null : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { css: ObjectListItemUnControlledContent, children })
+    !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { css: ObjectListItemInfoContainer, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_design_system30.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData }) }),
+    !children ? null : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { css: ObjectListItemUnControlledContent, children })
   ] });
 };
 var ObjectSearchListItemLoadingSkeleton = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
 };
 
 // src/components/ObjectSearch/ObjectSearchResultItem.tsx
 init_emotion_jsx_shim();
-var import_design_system30 = require("@uniformdev/design-system");
+var import_design_system32 = require("@uniformdev/design-system");
 var import_timeago3 = require("timeago.js");
 
 // src/components/ObjectSearch/ObjectSearchResultItemButton.tsx
@@ -6214,10 +6844,10 @@ init_emotion_jsx_shim();
 
 // src/components/ObjectSearch/styles/ObjectSearchResultItemButton.styles.ts
 init_emotion_jsx_shim();
-var import_react47 = require("@emotion/react");
-var import_design_system29 = require("@uniformdev/design-system");
-var ButtonStyles = import_react47.css`
-  ${import_design_system29.button}
+var import_react55 = require("@emotion/react");
+var import_design_system31 = require("@uniformdev/design-system");
+var ButtonStyles = import_react55.css`
+  ${import_design_system31.button}
   background: transparent;
   border: 1px solid var(--brand-secondary-1);
   color: var(--brand-secondary-1);
@@ -6243,20 +6873,20 @@ var ButtonStyles = import_react47.css`
     text-decoration: none;
   }
 `;
-var ButtonIcon = import_react47.css`
+var ButtonIcon = import_react55.css`
   width: 1rem;
   height: 1rem;
 `;
 
 // src/components/ObjectSearch/ObjectSearchResultItemButton.tsx
-var import_jsx_runtime53 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime57 = require("@emotion/react/jsx-runtime");
 var ObjectSearchResultItemButton = ({
   text,
   icon,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("button", { type: "button", css: ButtonStyles, ...props, children: [
-    !icon ? null : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Image, { src: icon, css: ButtonIcon }),
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("button", { type: "button", css: ButtonStyles, ...props, children: [
+    !icon ? null : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Image, { src: icon, css: ButtonIcon }),
     text
   ] });
 };
@@ -6265,16 +6895,16 @@ var LinkButton = ({
   icon,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("a", { ...props, css: ButtonStyles, target: "_blank", rel: "noopener noreferrer", children: [
-    !icon ? null : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Image, { src: icon, css: ButtonIcon }),
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("a", { ...props, css: ButtonStyles, target: "_blank", rel: "noopener noreferrer", children: [
+    !icon ? null : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Image, { src: icon, css: ButtonIcon }),
     text
   ] });
 };
 
 // src/components/ObjectSearch/styles/ObjectSearchResultItem.styles.ts
 init_emotion_jsx_shim();
-var import_react48 = require("@emotion/react");
-var ObjectSearchResultItemContainer = import_react48.css`
+var import_react56 = require("@emotion/react");
+var ObjectSearchResultItemContainer = import_react56.css`
   align-items: center;
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -6290,7 +6920,7 @@ var ObjectSearchResultItemContainer = import_react48.css`
     }
   }
 `;
-var ObjectSearchDragHandle = import_react48.css`
+var ObjectSearchDragHandle = import_react56.css`
   border-left: 2px dotted var(--gray-300);
   border-right: 2px dotted var(--gray-300);
   position: absolute;
@@ -6299,41 +6929,41 @@ var ObjectSearchDragHandle = import_react48.css`
   transition: opacity var(--duration-fast) var(--timing-ease-out);
   opacity: 0;
 `;
-var ObjectSearchResultItemSubtitle = import_react48.css`
+var ObjectSearchResultItemSubtitle = import_react56.css`
   color: var(--gray-500);
   display: block;
   font-size: var(--fs-xs);
   line-height: 1;
 `;
-var ObjectSearchResultItemTitle = import_react48.css`
+var ObjectSearchResultItemTitle = import_react56.css`
   align-items: center;
   color: var(--brand-secondary-1);
   display: flex;
   gap: var(--spacing-xs);
 `;
-var ObjectSearchResultItemTimeStamp = import_react48.css`
+var ObjectSearchResultItemTimeStamp = import_react56.css`
   color: var(--gray-500);
   font-size: var(--fs-xs);
 `;
-var ObjectSearchAuthorStateGroup = import_react48.css`
+var ObjectSearchAuthorStateGroup = import_react56.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectSearchUpdateGroup = import_react48.css`
+var ObjectSearchUpdateGroup = import_react56.css`
   display: grid;
 `;
-var ObjectSearchContentContainer = import_react48.css`
+var ObjectSearchContentContainer = import_react56.css`
   display: flex;
   gap: var(--spacing-base);
 `;
-var ObjectSearchImage = import_react48.css`
+var ObjectSearchImage = import_react56.css`
   width: 56px;
   object-fit: contain;
 `;
 
 // src/components/ObjectSearch/ObjectSearchResultItem.tsx
-var import_jsx_runtime54 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime58 = require("@emotion/react/jsx-runtime");
 var ObjectSearchResultItem = ({
   id,
   title,
@@ -6357,75 +6987,75 @@ var ObjectSearchResultItem = ({
     onSelectItem({ id, title: id });
     onRemove == null ? void 0 : onRemove();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { css: ObjectSearchResultItemContainer, children: [
-    disableDnD ? null : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { role: "presentation", className: "drag-handle", css: ObjectSearchDragHandle }),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { css: ObjectSearchContentContainer, children: [
-      !imageUrl ? null : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectSearchImage }),
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { css: ObjectSearchResultItemSubtitle, children: formatedContentType }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { role: "heading", css: ObjectSearchResultItemTitle, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { css: ObjectSearchResultItemContainer, children: [
+    disableDnD ? null : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { role: "presentation", className: "drag-handle", css: ObjectSearchDragHandle }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { css: ObjectSearchContentContainer, children: [
+      !imageUrl ? null : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectSearchImage }),
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { css: ObjectSearchResultItemSubtitle, children: formatedContentType }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { role: "heading", css: ObjectSearchResultItemTitle, children: [
           title != null ? title : name,
-          !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_design_system30.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
+          !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_design_system32.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
         ] }),
-        !createdAt && !publishStatus ? null : /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { css: ObjectSearchAuthorStateGroup, children: [
-          !(publishStatus == null ? void 0 : publishStatus.text) ? null : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_design_system30.Badge, { ...publishStatus, size: "sm", uppercaseText: true }),
-          !createdAt && !publishedAt ? null : /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { css: ObjectSearchUpdateGroup, children: [
-            !createdAt ? null : /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("small", { css: ObjectSearchResultItemTimeStamp, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("strong", { children: "Last updated: " }),
+        !createdAt && !publishStatus ? null : /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { css: ObjectSearchAuthorStateGroup, children: [
+          !(publishStatus == null ? void 0 : publishStatus.text) ? null : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_design_system32.Badge, { ...publishStatus, size: "sm", uppercaseText: true }),
+          !createdAt && !publishedAt ? null : /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { css: ObjectSearchUpdateGroup, children: [
+            !createdAt ? null : /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("small", { css: ObjectSearchResultItemTimeStamp, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("strong", { children: "Last updated: " }),
               (0, import_timeago3.format)(createdAt)
             ] }),
-            !publishedAt ? null : /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("small", { css: ObjectSearchResultItemTimeStamp, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("strong", { children: "Last published: " }),
+            !publishedAt ? null : /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("small", { css: ObjectSearchResultItemTimeStamp, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("strong", { children: "Last published: " }),
               (0, import_timeago3.format)(publishedAt)
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { children })
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { children })
       ] })
     ] }) }),
-    !editLink && hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { css: ObjectSearchAuthorStateGroup, children: [
-      !editLink ? null : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(LinkButton, { text: "Edit", href: editLink, icon: editLinkIcon }),
-      hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_design_system30.Button, { buttonType: "ghostDestructive", onClick: onRemoveItem, children: "Remove" })
+    !editLink && hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { css: ObjectSearchAuthorStateGroup, children: [
+      !editLink ? null : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(LinkButton, { text: "Edit", href: editLink, icon: editLinkIcon }),
+      hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_design_system32.Button, { buttonType: "ghostDestructive", onClick: onRemoveItem, children: "Remove" })
     ] })
   ] });
 };
 
 // src/components/ObjectSearch/ObjectSearchResultList.tsx
 init_emotion_jsx_shim();
-var import_design_system31 = require("@uniformdev/design-system");
+var import_design_system33 = require("@uniformdev/design-system");
 var import_react_beautiful_dnd3 = require("react-beautiful-dnd");
 
 // src/components/ObjectSearch/styles/ObjectSearchResultList.styles.ts
 init_emotion_jsx_shim();
-var import_react49 = require("@emotion/react");
-var ObjectSearchResultListContainer = import_react49.css`
+var import_react57 = require("@emotion/react");
+var ObjectSearchResultListContainer = import_react57.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   justify-content: space-between;
 `;
-var ObjectSearchDragContainer = import_react49.css`
+var ObjectSearchDragContainer = import_react57.css`
   margin: 0 0 var(--spacing-sm);
 `;
-var ObjectSearchResultListCounterContainer = import_react49.css`
+var ObjectSearchResultListCounterContainer = import_react57.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectSearchResultListTitle = import_react49.css`
+var ObjectSearchResultListTitle = import_react57.css`
   font-weight: var(--fw-bold);
   line-height: 1;
 `;
 
 // src/components/ObjectSearch/ObjectSearchResultList.tsx
-var import_jsx_runtime55 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime59 = require("@emotion/react/jsx-runtime");
 function ObjectSearchResultList({
   resultLabelText = "Selected",
   removeButtonText = "Remove all",
   onRemoveAllSelected,
   hideRemoveButton = false,
   additionalButtons,
-  renderResultComponent = (value) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ObjectSearchResultItem, { ...value, disableDnD }),
+  renderResultComponent = (value) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ObjectSearchResultItem, { ...value, disableDnD }),
   multiSelectId,
   disableDnD = false,
   whenNothingSelected = null
@@ -6445,17 +7075,17 @@ function ObjectSearchResultList({
       return result;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { role: "group", css: ObjectSearchResultListContainer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { css: ObjectSearchResultListTitle, children: resultLabelText }),
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { role: "group", css: ObjectSearchResultListContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { css: ObjectSearchResultListTitle, children: resultLabelText }),
         " ",
-        !selectedListItems.length ? null : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_design_system31.Counter, { count: selectedListItems.length })
+        !selectedListItems.length ? null : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_design_system33.Counter, { count: selectedListItems.length })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { css: ObjectSearchResultListCounterContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { css: ObjectSearchResultListCounterContainer, children: [
         additionalButtons,
-        hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-          import_design_system31.Button,
+        hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          import_design_system33.Button,
           {
             buttonType: "ghostDestructive",
             size: "xs",
@@ -6466,10 +7096,10 @@ function ObjectSearchResultList({
         )
       ] })
     ] }),
-    !selectedListItems.length ? whenNothingSelected : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_beautiful_dnd3.DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_beautiful_dnd3.Droppable, { droppableId: multiSelectId != null ? multiSelectId : "canvas-multi-select", children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
+    !selectedListItems.length ? whenNothingSelected : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_beautiful_dnd3.DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_beautiful_dnd3.Droppable, { droppableId: multiSelectId != null ? multiSelectId : "canvas-multi-select", children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
       selectedListItems.map((item, i2) => {
         const renderListItem = renderResultComponent(item);
-        return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_beautiful_dnd3.Draggable, { draggableId: item.id, index: i2, isDragDisabled: disableDnD, children: (provided2, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_beautiful_dnd3.Draggable, { draggableId: item.id, index: i2, isDragDisabled: disableDnD, children: (provided2, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           "div",
           {
             css: ObjectSearchDragContainer,
@@ -6488,9 +7118,9 @@ function ObjectSearchResultList({
 
 // src/components/ObjectSearch/QueryFilter.tsx
 init_emotion_jsx_shim();
-var import_design_system32 = require("@uniformdev/design-system");
-var import_react50 = require("react");
-var import_jsx_runtime56 = require("@emotion/react/jsx-runtime");
+var import_design_system34 = require("@uniformdev/design-system");
+var import_react58 = require("react");
+var import_jsx_runtime60 = require("@emotion/react/jsx-runtime");
 var QueryFilter = ({
   requireContentType,
   queryFilterTitle = "Configure Query",
@@ -6521,7 +7151,7 @@ var QueryFilter = ({
 }) => {
   var _a, _b, _c, _d;
   const { query, onSetQuery } = useObjectSearchContext();
-  const [queryState, setQueryState] = (0, import_react50.useState)({
+  const [queryState, setQueryState] = (0, import_react58.useState)({
     contentType: "",
     keyword: "",
     count: countValue != null ? countValue : 5,
@@ -6532,13 +7162,13 @@ var QueryFilter = ({
     setQueryState((prev) => ({ ...prev, ...value }));
     onSetQuery({ ...query, ...value });
   };
-  (0, import_react50.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     onSetQuery(queryState);
   }, [onSetQuery, queryState]);
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("fieldset", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { css: ObjectSearchFilterContainerLabel, children: queryFilterTitle }),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { css: ObjectSearchFilterContainer, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_design_system32.VerticalRhythm, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("fieldset", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { css: ObjectSearchFilterContainerLabel, children: queryFilterTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { css: ObjectSearchFilterContainer, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_design_system34.VerticalRhythm, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
         InputVariables,
         {
           label: searchInputLabel,
@@ -6546,8 +7176,8 @@ var QueryFilter = ({
           onChange: (newQuery) => handleFilterChange({ keyword: newQuery }),
           disableInlineMenu: true,
           id: "qf_searchText",
-          inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-            import_design_system32.InputKeywordSearch,
+          inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+            import_design_system34.InputKeywordSearch,
             {
               id: "qf_searchText",
               inputFieldName: searchInputName,
@@ -6560,8 +7190,8 @@ var QueryFilter = ({
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { css: ObjectSearchFilterGrid("1fr 100px"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { css: ObjectSearchFilterGrid("1fr 100px"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           InputVariables,
           {
             label: contentTypeLabel,
@@ -6569,8 +7199,8 @@ var QueryFilter = ({
             value: (_d = queryState.contentType) != null ? _d : "",
             onChange: (newType) => handleFilterChange({ contentType: newType }),
             disableInlineMenu: true,
-            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-              import_design_system32.InputSelect,
+            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+              import_design_system34.InputSelect,
               {
                 id: "qf_contentType",
                 label: contentTypeLabel,
@@ -6588,7 +7218,7 @@ var QueryFilter = ({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           InputVariables,
           {
             label: countLabel,
@@ -6596,8 +7226,8 @@ var QueryFilter = ({
             value: queryState.count.toString(10),
             onChange: (newCount) => handleFilterChange({ count: newCount }),
             disableInlineMenu: true,
-            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-              import_design_system32.Input,
+            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+              import_design_system34.Input,
               {
                 id: "qf_count",
                 label: countLabel,
@@ -6611,8 +7241,8 @@ var QueryFilter = ({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { css: ObjectSearchFilterGrid("2fr 1fr"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { css: ObjectSearchFilterGrid("2fr 1fr"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           InputVariables,
           {
             id: "qf_sortBy",
@@ -6620,8 +7250,8 @@ var QueryFilter = ({
             value: queryState.sortBy,
             onChange: (newSortBy) => handleFilterChange({ sortBy: newSortBy }),
             disableInlineMenu: true,
-            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-              import_design_system32.InputSelect,
+            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+              import_design_system34.InputSelect,
               {
                 label: sortLabel,
                 id: "qf_sortBy",
@@ -6642,7 +7272,7 @@ var QueryFilter = ({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           InputVariables,
           {
             label: sortOrderLabel,
@@ -6650,8 +7280,8 @@ var QueryFilter = ({
             value: queryState.sortOrder,
             onChange: (newSort) => handleFilterChange({ sortOrder: newSort }),
             disableInlineMenu: true,
-            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-              import_design_system32.InputSelect,
+            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+              import_design_system34.InputSelect,
               {
                 label: sortOrderLabel,
                 id: "qf_sortOrder",
@@ -6676,7 +7306,7 @@ var QueryFilter = ({
 
 // src/hooks/index.ts
 init_emotion_jsx_shim();
-var import_design_system33 = require("@uniformdev/design-system");
+var import_design_system35 = require("@uniformdev/design-system");
 
 // src/utils/createLocationValidator.ts
 init_emotion_jsx_shim();
@@ -6688,7 +7318,7 @@ function createLocationValidator(setValue, validate) {
 }
 
 // src/index.ts
-var import_design_system34 = require("@uniformdev/design-system");
+var import_design_system36 = require("@uniformdev/design-system");
 __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -6846,7 +7476,6 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   useRequestParameter,
   useUniformMeshSdk,
   useVariables,
-  variableExpression,
   variablePrefix,
   variableSuffix,
   variablesToList,