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

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_system36.AddListButton,
-  Button: () => import_design_system36.Button,
-  Callout: () => import_design_system36.Callout,
+  AddListButton: () => import_design_system34.AddListButton,
+  Button: () => import_design_system34.Button,
+  Callout: () => import_design_system34.Callout,
   DamSelectedItem: () => DamSelectedItem,
   DataRefreshButton: () => DataRefreshButton,
   DataResourceDynamicInputProvider: () => DataResourceDynamicInputProvider,
@@ -179,20 +179,20 @@ __export(src_exports, {
   DefaultSearchRow: () => DefaultSearchRow,
   DefaultSelectedItem: () => DefaultSelectedItem,
   EntrySearch: () => EntrySearch,
-  Heading: () => import_design_system36.Heading,
+  Heading: () => import_design_system34.Heading,
   Icons: () => icons_exports,
-  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,
+  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,
   InputVariables: () => InputVariables,
-  Label: () => import_design_system36.Label,
+  Label: () => import_design_system34.Label,
   LinkButton: () => LinkButton,
-  LoadingIndicator: () => import_design_system36.LoadingIndicator,
-  LoadingOverlay: () => import_design_system36.LoadingOverlay,
-  Menu: () => import_design_system36.Menu,
-  MenuItem: () => import_design_system36.MenuItem,
+  LoadingIndicator: () => import_design_system34.LoadingIndicator,
+  LoadingOverlay: () => import_design_system34.LoadingOverlay,
+  Menu: () => import_design_system34.Menu,
+  MenuItem: () => import_design_system34.MenuItem,
   MeshApp: () => MeshApp,
   ObjectSearchContainer: () => ObjectSearchContainer,
   ObjectSearchFilter: () => ObjectSearchFilter,
@@ -203,21 +203,21 @@ __export(src_exports, {
   ObjectSearchResultItem: () => ObjectSearchResultItem,
   ObjectSearchResultItemButton: () => ObjectSearchResultItemButton,
   ObjectSearchResultList: () => ObjectSearchResultList,
-  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,
+  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,
   ProductPreviewList: () => ProductPreviewList,
   ProductQuery: () => ProductQuery,
   ProductQueryContext: () => ProductQueryContext,
@@ -235,13 +235,13 @@ __export(src_exports, {
   RequestUrl: () => RequestUrl,
   RequestUrlInput: () => RequestUrlInput,
   ResolvableLoadingValue: () => ResolvableLoadingValue,
-  ScrollableList: () => import_design_system36.ScrollableList,
-  ScrollableListItem: () => import_design_system36.ScrollableListItem,
+  ScrollableList: () => import_design_system34.ScrollableList,
+  ScrollableListItem: () => import_design_system34.ScrollableListItem,
   SelectionField: () => SelectionField,
-  Switch: () => import_design_system36.Switch,
+  Switch: () => import_design_system34.Switch,
   TextVariableRenderer: () => TextVariableRenderer,
-  Textarea: () => import_design_system36.Textarea,
-  Theme: () => import_design_system36.Theme,
+  Textarea: () => import_design_system34.Textarea,
+  Theme: () => import_design_system34.Theme,
   VariableEditor: () => VariableEditor,
   VariablesList: () => VariablesList,
   VariablesProvider: () => VariablesProvider,
@@ -312,7 +312,7 @@ __export(src_exports, {
   urlEncodeRequestUrl: () => urlEncodeRequestUrl,
   useMeshLocation: () => useMeshLocation,
   useObjectSearchContext: () => useObjectSearchContext,
-  useParameterShell: () => import_design_system35.useParameterShell,
+  useParameterShell: () => import_design_system33.useParameterShell,
   useProductQueryContext: () => useProductQueryContext,
   useProductSearchContext: () => useProductSearchContext,
   useRequest: () => useRequest,
@@ -320,6 +320,7 @@ __export(src_exports, {
   useRequestParameter: () => useRequestParameter,
   useUniformMeshSdk: () => useUniformMeshSdk,
   useVariables: () => useVariables,
+  variableExpression: () => variableExpression,
   variablePrefix: () => variablePrefix,
   variableSuffix: () => variableSuffix,
   variablesToList: () => variablesToList
@@ -3076,203 +3077,42 @@ function useMeshLocation(expectedLocation) {
 
 // src/components/Variables/InputVariables.tsx
 init_emotion_jsx_shim();
-var import_design_system18 = require("@uniformdev/design-system");
+var import_design_system16 = require("@uniformdev/design-system");
 var React11 = __toESM(require("react"));
-var import_react41 = require("react");
-var import_uuid3 = require("uuid");
+var import_uuid2 = require("uuid");
 
-// src/components/Variables/composer/PasteTransformerPlugin.tsx
+// src/components/Variables/SelectVariableMenu.tsx
 init_emotion_jsx_shim();
-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;
-}
+var import_design_system15 = require("@uniformdev/design-system");
+var import_react31 = require("react");
+var import_cg5 = require("react-icons/cg");
 
-// src/components/Variables/styles/InputVariables.styles.ts
+// src/components/Variables/styles/InsertVariableMenu.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;
-  }
+var import_react28 = require("@emotion/react");
+var menuBtn = import_react28.css`
+  background: none;
+  border: none;
+  color: var(--gray-500);
+  padding: 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;
+var menuItemTextGroup = import_react28.css`
+  align-items: flex-start;
   display: flex;
-  gap: var(--spacing-xs);
-  font-weight: var(--fw-regular);
-  margin: 0 0 var(--spacing-xs);
+  flex-direction: column;
 `;
-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;
-  }
+var smallText = import_react28.css`
+  font-size: var(--fs-xs);
+`;
+var variablesTipText = import_react28.css`
+  ${smallText}
+  color: var(--gray-500);
+  padding: 0 var(--spacing-sm);
 `;
-
-// 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_react34 = 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_react35 = require("react");
-var import_react_dom = require("react-dom");
 
 // src/components/Variables/useOnVariableUpdated.ts
 init_emotion_jsx_shim();
-var import_react32 = require("react");
+var import_react30 = require("react");
 
 // src/components/Variables/VariablesProvider.tsx
 init_emotion_jsx_shim();
@@ -3288,13 +3128,13 @@ var import_zod2 = require("zod");
 
 // src/components/Variables/styles/VariableEditor.styles.ts
 init_emotion_jsx_shim();
-var import_react31 = require("@emotion/react");
-var variablesFormContainer = import_react31.css`
+var import_react29 = require("@emotion/react");
+var variablesFormContainer = import_react29.css`
   > * {
     margin: var(--spacing-base) 0 0;
   }
 `;
-var variablesFormBtnGroup = import_react31.css`
+var variablesFormBtnGroup = import_react29.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
@@ -3395,27 +3235,17 @@ 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 == null ? void 0 : onChange({ ...contextValue.variables, [event.variable.name]: varValue });
+        onChange({ ...contextValue.variables, [event.variable.name]: varValue });
         if (event.openEditor) {
           setEditing(event.variable.name);
         }
@@ -3424,9 +3254,9 @@ function VariablesProvider({
       } else if (event.type === "remove") {
         const newValue = { ...value };
         delete newValue[event.variable];
-        onChange == null ? void 0 : onChange(newValue);
+        onChange(newValue);
       } else if (event.type === "reorder") {
-        onChange == null ? void 0 : onChange(event.result);
+        onChange(event.result);
       } else {
         throw new Error(`Unknown event ${JSON.stringify(event)}`);
       }
@@ -3444,7 +3274,7 @@ function VariablesProvider({
         onSubmit: (val) => {
           setEditing(void 0);
           const { name, ...varValue } = val;
-          onChange == null ? void 0 : onChange({ ...value, [name]: varValue });
+          onChange({ ...value, [name]: varValue });
           events.emit("update", name);
         },
         onCancel: () => setEditing(void 0),
@@ -3483,7 +3313,7 @@ function flattenVariables(variables) {
 // src/components/Variables/useOnVariableUpdated.ts
 function useOnVariableUpdated(fn2, disabled) {
   const { variables, events } = useVariables();
-  (0, import_react32.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (disabled) {
       return;
     }
@@ -3492,9 +3322,6 @@ 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) {
@@ -3514,392 +3341,8 @@ function variablesToList(variables) {
   }));
 }
 
-// src/components/Variables/variablesToGroupedList.ts
-function variablesToGroupedList(variables) {
-  const groups = {};
-  Object.entries(variables || {}).forEach(([name, definition]) => {
-    var _a;
-    const group = (_a = definition.source) != null ? _a : "";
-    if (!groups[group]) {
-      groups[group] = {};
-    }
-    groups[group][name] = definition;
-  });
-  return Object.entries(groups).map(([group, variables2]) => ({
-    name: group,
-    variables: variablesToList(variables2)
-  })).sort((a2, b2) => {
-    var _a, _b;
-    return ((_a = a2.name) != null ? _a : "").localeCompare((_b = b2.name) != null ? _b : "");
-  });
-}
-
-// src/components/Variables/composer/VariableNode.tsx
-init_emotion_jsx_shim();
-var import_design_system15 = require("@uniformdev/design-system");
-var import_lexical2 = require("lexical");
-var import_react33 = 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_react33.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 [openedAdd, setOpenedAdd] = (0, import_react35.useState)(false);
-  useOnVariableUpdated((varName) => {
-    editor.update(() => {
-      editor.dispatchCommand(INSERT_VARIABLE_COMMAND, { reference: varName });
-    });
-  }, !openedAdd);
-  (0, import_react35.useEffect)(() => {
-    if (openedAdd && !isEditing) {
-      setOpenedAdd(false);
-    }
-  }, [isEditing, openedAdd]);
-  const [queryString, setQueryString] = (0, import_react35.useState)(null);
-  const { groupedVariables, menuOptions } = (0, import_react35.useMemo)(() => {
-    const groupedVariables2 = variablesToGroupedList(variables);
-    if (showAddVariableMenuOption) {
-      groupedVariables2.push({
-        name: SOURCE_SEPARATOR,
-        variables: [{ name: ADD_VARIABLE_OPTION, displayName: "Add\u2026", default: "" }]
-      });
-    }
-    const menuOptions2 = [];
-    groupedVariables2.forEach(
-      (group) => group.variables.forEach((variable) => {
-        menuOptions2.push(new import_LexicalTypeaheadMenuPlugin.MenuOption(variable.name));
-      })
-    );
-    return { menuOptions: menuOptions2, groupedVariables: groupedVariables2 };
-  }, [variables, showAddVariableMenuOption]);
-  const { filteredGroupedVariables, filteredMenuOptions } = (0, import_react35.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_react35.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_react35.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_react35.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_react34.css`
-              box-shadow: var(--shadow-base);
-              border-radius: var(--rounded-base);
-              background: var(--gray-50);
-              display: flex;
-              flex-direction: column;
-              min-width: 250px;
-              padding: var(--spacing-sm);
-              outline: none;
-              overflow: hidden;
-              position: relative;
-              z-index: var(--z-50);
-            `,
-              children: /* @__PURE__ */ (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 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_design_system16.MenuItemSeparator, {}) : null,
-                      group.variables.map((variable) => {
-                        var _a2;
-                        currentCumulativeMenuIndex++;
-                        return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
-                          import_design_system16.MenuItem,
-                          {
-                            active: selectedIndex === currentCumulativeMenuIndex,
-                            onClick: () => {
-                              setHighlightedIndex(currentCumulativeMenuIndex);
-                              selectOptionAndCleanUp(new import_LexicalTypeaheadMenuPlugin.MenuOption(variable.name));
-                            },
-                            onMouseEnter: () => {
-                              setHighlightedIndex(currentCumulativeMenuIndex);
-                            },
-                            children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: (_a2 = variable.displayName) != null ? _a2 : variable.name }),
-                              variable.helpText ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_design_system16.Caption, { children: variable.helpText }) : null
-                            ]
-                          },
-                          variable.name
-                        );
-                      })
-                    ]
-                  },
-                  (_b = group.name) != null ? _b : `none${index}`
-                );
-              }) })
-            }
-          ),
-          anchorElementRef.current
-        );
-      }
-    }
-  );
-}
-
 // src/components/Variables/SelectVariableMenu.tsx
-init_emotion_jsx_shim();
-var import_design_system17 = require("@uniformdev/design-system");
-var import_react37 = require("react");
-var import_cg5 = require("react-icons/cg");
-
-// src/components/Variables/styles/InsertVariableMenu.styles.ts
-init_emotion_jsx_shim();
-var import_react36 = require("@emotion/react");
-var menuBtn2 = import_react36.css`
-  background: none;
-  border: none;
-  color: var(--gray-500);
-  padding: 0;
-`;
-var menuItemTextGroup = import_react36.css`
-  align-items: flex-start;
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  line-height: 1em;
-`;
-var smallText = import_react36.css`
-  font-size: var(--fs-xs);
-  color: var(--gray-500);
-`;
-var variablesTipText = import_react36.css`
-  ${smallText}
-  color: var(--gray-500);
-  padding: 0 var(--spacing-sm);
-`;
-
-// src/components/Variables/SelectVariableMenu.tsx
-var import_jsx_runtime32 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime30 = require("@emotion/react/jsx-runtime");
 var SelectVariableMenu = ({
   onSelectVariable,
   onResetVariables,
@@ -3910,103 +3353,168 @@ var SelectVariableMenu = ({
   tip
 }) => {
   const { variables, dispatch, isEditing, canDispatch } = useVariables();
-  const btnRef = (0, import_react37.useRef)(null);
-  const [openedAdd, setOpenedAdd] = (0, import_react37.useState)(false);
+  const btnRef = (0, import_react31.useRef)(null);
+  const [openedAdd, setOpenedAdd] = (0, import_react31.useState)(false);
   useOnVariableUpdated((varName) => {
     onSelectVariable == null ? void 0 : onSelectVariable({ name: varName, default: "" });
   }, !openedAdd);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (openedAdd && !isEditing) {
       setOpenedAdd(false);
     }
   }, [isEditing, openedAdd]);
-  const variablesGroups = variablesToGroupedList(variables);
+  const variablesList = variablesToList(variables);
   const menuHasVariableOptions = Object.entries(variables).length || showAddVariableMenuOption;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-    import_design_system17.Menu,
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    import_design_system15.Menu,
     {
       placement: "bottom-start",
       forceVisible,
-      menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         "button",
         {
           title: "Insert variable",
           ...buttonProps,
           ref: btnRef,
-          css: [menuBtn2, buttonCss],
+          css: [menuBtn, buttonCss],
           type: "button",
-          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_cg5.CgUsbC, { size: "1.4rem" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_cg5.CgUsbC, { size: "1.4rem" })
         }
       ),
       menuLabel: "Insert variable",
       children: [
-        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);
+        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
+          );
         }),
-        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,
+        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,
             {
               onClick: () => {
                 setOpenedAdd(true);
                 dispatch({ type: "edit", variable: "" });
               },
-              children: "Add\u2026"
+              children: "Add Variable"
             }
           )
         ] }) : 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
+        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
       ]
     }
   );
 };
 
-// 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/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
-var import_jsx_runtime34 = require("@emotion/react/jsx-runtime");
+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/VariableField.tsx
+var import_jsx_runtime31 = require("@emotion/react/jsx-runtime");
 function VariableField({
   label,
   selectVariableMenuOptions,
@@ -4017,191 +3525,25 @@ function VariableField({
 }) {
   const { variables } = useVariables(true);
   const varCount = Object.keys(variables).length;
-  const variableSelector = varCount > 0 && !disableVariables ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-    VariablesComposerVariableMenu,
+  const variableSelector = varCount > 0 && (selectVariableMenuOptions == null ? void 0 : selectVariableMenuOptions.onSelectVariable) && !disableVariables ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    SelectVariableMenu,
     {
       ...selectVariableMenuOptions,
       buttonCss: [variableBindButton, selectVariableMenuOptions == null ? void 0 : selectVariableMenuOptions.buttonCss],
       buttonProps: isActive ? { "aria-pressed": "true" } : void 0
     }
   ) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("label", { htmlFor: id, css: labelText, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("label", { htmlFor: id, css: labelText, children: [
       variableSelector,
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: label })
+      /* @__PURE__ */ (0, import_jsx_runtime31.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_runtime36 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime32 = require("@emotion/react/jsx-runtime");
 function InputVariables({
   id,
   "aria-label": ariaLabel,
@@ -4209,20 +3551,38 @@ function InputVariables({
   value,
   disableVariables,
   disableReset,
-  enableEditingVariables,
   disableInlineMenu,
   onChange,
-  transformPaste,
+  onPaste,
   showAddVariableMenuOption,
   inputWhenNoVariables,
   caption,
   errorMessage,
   warningMessage,
   infoMessage,
-  "data-test-id": dataTestId
+  ...inputProps
 }) {
-  const { variables, readOnly } = useVariables(true);
-  const [finalId] = React11.useState(id != null ? id : () => (0, import_uuid3.v4)());
+  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 hasVariablesInValue = getReferencedVariables(value).length > 0;
   const [hadVariablesInValue, setHadVariablesInValue] = React11.useState(hasVariablesInValue);
   React11.useEffect(() => {
@@ -4230,35 +3590,60 @@ function InputVariables({
       setHadVariablesInValue(true);
     }
   }, [hasVariablesInValue]);
-  const disableVariablesForReals = disableVariables || Object.keys(variables).length === 0 && !showAddVariableMenuOption || readOnly;
+  const disableVariablesForReals = disableVariables || Object.keys(variables).length === 0 && !showAddVariableMenuOption;
   const disableInlineVariablesForReals = disableVariablesForReals || disableInlineMenu;
-  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,
+  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,
       {
-        id: finalId,
-        "aria-label": ariaLabel,
-        "data-testid": dataTestId,
-        "data-text-value": value
+        ...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
+          }
+        )
       }
-    ) }),
-    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
+    ),
+    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
   ] });
-  let body = input2;
   if (label) {
-    body = /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       VariableField,
       {
         label,
@@ -4266,56 +3651,36 @@ function InputVariables({
         id: finalId,
         isActive: hadVariablesInValue,
         disableVariables: disableVariablesForReals,
-        children: input2
+        children: 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
-      ]
-    }
-  );
+  return input;
 }
-function InputVariablesMenu({
+function InputVariablesShell({
   children,
   disabled,
   ...props
 }) {
   if (disabled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { css: menuContainer, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { css: menuContainer, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-      VariablesComposerVariableMenu,
-      {
-        ...props,
-        tip: "Tip: access this list by typing $",
-        buttonCss: menuBtn
-      }
-    )
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectVariableMenu, { ...props, tip: "Tip: access this list by typing ${", buttonCss: menuBtn2 })
   ] });
 }
 
 // src/components/Variables/VariablesList.tsx
 init_emotion_jsx_shim();
-var import_react43 = require("@emotion/react");
-var import_design_system19 = require("@uniformdev/design-system");
+var import_react35 = require("@emotion/react");
+var import_design_system17 = 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_react42 = require("@emotion/react");
-var tableRow = (isDragging) => import_react42.css`
+var import_react34 = require("@emotion/react");
+var tableRow = (isDragging) => import_react34.css`
   position: relative;
   ${isDragging ? `
   display: table;   
@@ -4323,7 +3688,7 @@ var tableRow = (isDragging) => import_react42.css`
   top: auto !important;
   ` : void 0}
 `;
-var tableCellDragIcon = import_react42.css`
+var tableCellDragIcon = import_react34.css`
   &::after {
     content: '';
     display: block;
@@ -4341,7 +3706,7 @@ var tableCellDragIcon = import_react42.css`
     opacity: 1;
   }
 `;
-var variableName = import_react42.css`
+var variableName = import_react34.css`
   border: none;
   color: var(--brand-secondary-5);
   font-weight: var(--fw-medium);
@@ -4352,7 +3717,7 @@ var variableName = import_react42.css`
   white-space: nowrap;
   max-width: 20ch;
 `;
-var variableValue = import_react42.css`
+var variableValue = import_react34.css`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -4360,7 +3725,7 @@ var variableValue = import_react42.css`
 `;
 
 // src/components/Variables/VariablesList.tsx
-var import_jsx_runtime37 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime33 = require("@emotion/react/jsx-runtime");
 function VariablesList() {
   const { variables, dispatch } = useVariables();
   const sorted = variablesToList(variables);
@@ -4381,24 +3746,24 @@ function VariablesList() {
       return result;
     }
   };
-  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, {})
+  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, {})
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_design_system19.TableBody, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_design_system17.TableBody, { children: [
         sorted.map(({ name, displayName, default: defaultValue }, index) => {
           const text = displayName != null ? displayName : name;
-          return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             import_react_beautiful_dnd2.Draggable,
             {
               draggableId: name,
               index,
               isDragDisabled: sorted.length === 1,
-              children: (provided2, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
-                import_design_system19.TableRow,
+              children: (provided2, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+                import_design_system17.TableRow,
                 {
                   ref: provided2.innerRef,
                   ...provided2.dragHandleProps,
@@ -4407,7 +3772,7 @@ function VariablesList() {
                   css: tableRow(snapshot.isDragging),
                   "data-dragging": snapshot.isDragging,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_design_system19.TableCellData, { css: sorted.length > 1 ? tableCellDragIcon : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_design_system17.TableCellData, { css: sorted.length > 1 ? tableCellDragIcon : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                       "button",
                       {
                         css: variableName,
@@ -4420,21 +3785,21 @@ function VariablesList() {
                         children: text
                       }
                     ) }),
-                    /* @__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)(
+                    /* @__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)(
                       "button",
                       {
                         type: "button",
                         title: `delete ${text}`,
                         css: [
-                          import_design_system19.button,
-                          import_react43.css`
+                          import_design_system17.button,
+                          import_react35.css`
                                   background: transparent;
                                 `
                         ],
                         "aria-controls": text,
                         onClick: () => dispatch({ type: "remove", variable: name }),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_design_system19.Icon, { icon: "trash", iconColor: "red" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_design_system17.Icon, { icon: "trash", iconColor: "red" })
                       }
                     ) })
                   ]
@@ -4447,8 +3812,8 @@ function VariablesList() {
         provided.placeholder
       ] })
     ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-      import_design_system19.AddListButton,
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      import_design_system17.AddListButton,
       {
         onButtonClick: () => dispatch({ type: "edit", variable: "" }),
         "aria-label": "Add variable",
@@ -4461,36 +3826,49 @@ function VariablesList() {
 }
 
 // src/components/DataResourceDynamicInputProvider.tsx
-var import_jsx_runtime38 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime34 = require("@emotion/react/jsx-runtime");
 function DataResourceDynamicInputProvider({
   children,
   dynamicInputs
 }) {
   if (dynamicInputs) {
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DataResourceDynamicInputProviderRenderer, { dynamicInputs, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DataResourceDynamicInputProviderRenderer, { dynamicInputs, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DataResourceDynamicInputProviderContextShim, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DataResourceDynamicInputProviderContextShim, { children });
 }
 function DataResourceDynamicInputProviderContextShim(props) {
   const {
     metadata: { dynamicInputs }
   } = useMeshLocation("dataResource");
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DataResourceDynamicInputProviderRenderer, { ...props, dynamicInputs });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DataResourceDynamicInputProviderRenderer, { ...props, dynamicInputs });
 }
 function DataResourceDynamicInputProviderRenderer({
   children,
   dynamicInputs
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(VariablesProvider, { value: convertDynamicInputsToVariables(dynamicInputs), readOnly: true, children });
+  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
+    }
+  );
 }
 function convertDynamicInputsToVariables(dynamicInputs) {
   return Object.entries(dynamicInputs).reduce(
-    (acc, [name, input2]) => {
+    (acc, [name, input]) => {
       acc[name] = {
-        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: 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 abuse! 💚
       };
       return acc;
@@ -4501,14 +3879,14 @@ function convertDynamicInputsToVariables(dynamicInputs) {
 
 // src/components/DataResourceVariablesList.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_system18 = require("@uniformdev/design-system");
+var import_jsx_runtime35 = require("@emotion/react/jsx-runtime");
 function DataResourceVariablesList(props) {
   const {
     value,
     metadata: { dataType, dynamicInputs }
   } = useMeshLocation("dataResource");
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     DataResourceVariablesListExplicit,
     {
       ...props,
@@ -4529,14 +3907,14 @@ function DataResourceVariablesListExplicit({
   const variableDefinitions = variablesToList(dataType.variables);
   if (variableDefinitions.length === 0) {
     if (NoVariablesComponent) {
-      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(NoVariablesComponent, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(NoVariablesComponent, {});
     }
-    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)(import_design_system18.Callout, { type: "note", children: "No settings are required." });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DataResourceDynamicInputProvider, { dynamicInputs, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { children: variableDefinitions.map((variableDefinition) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DataResourceDynamicInputProvider, { dynamicInputs, children: /* @__PURE__ */ (0, import_jsx_runtime35.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_runtime39.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       VariableRenderer,
       {
         definition: variableDefinition,
@@ -4559,7 +3937,7 @@ function DataResourceVariablesListExplicit({
 }
 function TextVariableRenderer({ definition, value, setValue }) {
   var _a;
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     InputVariables,
     {
       label: definition.displayName || definition.name,
@@ -4575,14 +3953,14 @@ init_emotion_jsx_shim();
 
 // src/components/Request/RequestBody.tsx
 init_emotion_jsx_shim();
-var import_react45 = require("@emotion/react");
-var import_design_system21 = require("@uniformdev/design-system");
-var import_react46 = require("react");
+var import_react37 = require("@emotion/react");
+var import_design_system19 = require("@uniformdev/design-system");
+var import_react38 = require("react");
 
 // src/components/Request/RequestProvider.tsx
 init_emotion_jsx_shim();
 var React12 = __toESM(require("react"));
-var import_jsx_runtime40 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime36 = require("@emotion/react/jsx-runtime");
 var RequestContext = React12.createContext(null);
 function RequestProvider({ value, onChange, children }) {
   const contextValue = React12.useMemo(() => {
@@ -4651,7 +4029,7 @@ function RequestProvider({ value, onChange, children }) {
       request: value
     };
   }, [onChange, value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(RequestContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(RequestContext.Provider, { value: contextValue, children });
 }
 function useRequest() {
   const context = React12.useContext(RequestContext);
@@ -4666,11 +4044,11 @@ init_emotion_jsx_shim();
 
 // src/components/Request/styles/Request.styles.ts
 init_emotion_jsx_shim();
-var import_react44 = require("@emotion/react");
-var innerContentStyles = import_react44.css`
+var import_react36 = require("@emotion/react");
+var innerContentStyles = import_react36.css`
   background: var(--white);
 `;
-var requestTypeContainer = (bgColor) => import_react44.css`
+var requestTypeContainer = (bgColor) => import_react36.css`
   align-items: start;
   background: ${bgColor};
   display: grid;
@@ -4679,17 +4057,17 @@ var requestTypeContainer = (bgColor) => import_react44.css`
 `;
 
 // src/components/Request/RequestTypeContainer.tsx
-var import_jsx_runtime41 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime37 = require("@emotion/react/jsx-runtime");
 var RequestTypeContainer = ({
   bgColor = "transparent",
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { css: requestTypeContainer(bgColor), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { css: requestTypeContainer(bgColor), ...props, children });
 };
 
 // src/components/Request/RequestBody.tsx
-var import_jsx_runtime42 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime38 = require("@emotion/react/jsx-runtime");
 var LANGUAGE_OPTIONS = [
   { label: "Text", value: "plaintext" },
   { label: "JSON", value: "json" },
@@ -4708,23 +4086,23 @@ var LANGUAGE_TO_CONTENT_TYPE = {
 };
 function RequestBody() {
   const { request, dispatch } = useRequest();
-  const [language, setLanguage] = (0, import_react46.useState)("json");
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  const [language, setLanguage] = (0, import_react38.useState)("json");
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     "div",
     {
-      css: import_react45.css`
+      css: import_react37.css`
         background: var(--white);
       `,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           RequestTypeContainer,
           {
             bgColor: "var(--gray-100)",
-            css: import_react45.css`
+            css: import_react37.css`
           padding: var(--spacing-sm) var(--spacing-base);
         `,
-            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-              import_design_system21.InputSelect,
+            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              import_design_system19.InputSelect,
               {
                 label: "Language",
                 showLabel: false,
@@ -4746,8 +4124,8 @@ function RequestBody() {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          import_design_system21.JsonEditor,
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          import_design_system19.JsonEditor,
           {
             height: 200,
             defaultValue: request.body,
@@ -4765,8 +4143,8 @@ function RequestBody() {
 
 // src/components/Request/RequestHeaders.tsx
 init_emotion_jsx_shim();
-var import_design_system22 = require("@uniformdev/design-system");
-var import_jsx_runtime43 = require("@emotion/react/jsx-runtime");
+var import_design_system20 = require("@uniformdev/design-system");
+var import_jsx_runtime39 = require("@emotion/react/jsx-runtime");
 function RequestHeaders({ disableVariables }) {
   var _a, _b;
   const { dispatch, request } = useRequest();
@@ -4782,29 +4160,29 @@ function RequestHeaders({ disableVariables }) {
       index
     });
   };
-  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" })
+  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" })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_design_system22.TableBody, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_design_system20.TableBody, { children: [
       (_b = (_a = request.baseRequest) == null ? void 0 : _a.headers) == null ? void 0 : _b.map((baseHeader) => {
-        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: [
+        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: [
             baseHeader.key,
-            /* @__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.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.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
+          /* @__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
           ] })
         ] }, baseHeader.key);
       }),
       deezHeaders.map((header, index) => {
-        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,
+        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,
             {
               label: header.key,
               value: header.key,
@@ -4823,15 +4201,13 @@ function RequestHeaders({ disableVariables }) {
               "data-test-id": "header-key"
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system22.TableCellData, { width: "50%", children: header.key ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_design_system20.TableCellData, { width: "50%", children: header.key ? /* @__PURE__ */ (0, import_jsx_runtime39.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 })
@@ -4843,13 +4219,13 @@ function RequestHeaders({ disableVariables }) {
 
 // src/components/Request/RequestMethodSelect.tsx
 init_emotion_jsx_shim();
-var import_design_system23 = require("@uniformdev/design-system");
-var import_jsx_runtime44 = require("@emotion/react/jsx-runtime");
+var import_design_system21 = require("@uniformdev/design-system");
+var import_jsx_runtime40 = require("@emotion/react/jsx-runtime");
 function RequestMethodSelect(props) {
   var _a;
   const { request, dispatch } = useRequest();
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-    import_design_system23.InputSelect,
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    import_design_system21.InputSelect,
     {
       ...props,
       options: [
@@ -4865,8 +4241,8 @@ function RequestMethodSelect(props) {
 
 // src/components/Request/RequestParameters.tsx
 init_emotion_jsx_shim();
-var import_design_system24 = require("@uniformdev/design-system");
-var import_jsx_runtime45 = require("@emotion/react/jsx-runtime");
+var import_design_system22 = require("@uniformdev/design-system");
+var import_jsx_runtime41 = require("@emotion/react/jsx-runtime");
 function RequestParameters({ disableVariables }) {
   var _a, _b;
   const { dispatch, request } = useRequest();
@@ -4882,29 +4258,29 @@ function RequestParameters({ disableVariables }) {
       index
     });
   };
-  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" })
+  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" })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_design_system24.TableBody, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_design_system22.TableBody, { children: [
       (_b = (_a = request.baseRequest) == null ? void 0 : _a.parameters) == null ? void 0 : _b.map((baseParameter) => {
-        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: [
+        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: [
             baseParameter.key,
-            /* @__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.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.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
+          /* @__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
           ] })
         ] }, baseParameter.key);
       }),
       deezParameters.map((parameter, index) => {
-        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,
+        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,
             {
               label: parameter.key,
               value: parameter.key,
@@ -4923,7 +4299,7 @@ function RequestParameters({ disableVariables }) {
               "data-test-id": "parameter-key"
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_design_system24.TableCellData, { width: "50%", children: parameter.key ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_design_system22.TableCellData, { width: "50%", children: parameter.key ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             InputVariables,
             {
               value: parameter.value,
@@ -4934,9 +4310,7 @@ function RequestParameters({ disableVariables }) {
               }),
               disableVariables,
               "data-test-id": "parameter-value",
-              showAddVariableMenuOption: true,
-              enableEditingVariables: true,
-              disableReset: true
+              showAddVariableMenuOption: true
             }
           ) : null })
         ] }, index);
@@ -4947,8 +4321,8 @@ function RequestParameters({ disableVariables }) {
 
 // src/components/Request/RequestUrl.tsx
 init_emotion_jsx_shim();
-var import_react47 = require("@emotion/react");
-var import_react48 = require("react");
+var import_react39 = require("@emotion/react");
+var import_react40 = require("react");
 
 // src/components/Request/urlEncodeRequestParameter.ts
 init_emotion_jsx_shim();
@@ -4970,35 +4344,35 @@ function decodeVariablesInUrlEncodedString(string, varValues) {
 }
 
 // src/components/Request/RequestUrl.tsx
-var import_jsx_runtime46 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime42 = require("@emotion/react/jsx-runtime");
 function RequestUrl() {
   var _a, _b;
   const { variables } = useVariables();
   const { request } = useRequest();
-  const mergedParameters = (0, import_react48.useMemo)(() => {
+  const mergedParameters = (0, import_react40.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_runtime46.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "small",
     {
-      css: import_react47.css`
+      css: import_react39.css`
         display: inline-block;
         margin-bottom: var(--spacing-xs);
         word-break: break-word;
       `,
       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: [
+        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: [
           urlEncodeRequestUrl(request.relativeUrl, variables),
-          mergedParameters.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+          mergedParameters.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
             "?",
             mergedParameters.map((param, index) => {
               const encoded = urlEncodeRequestParameter(param, variables);
-              return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { children: [
+              return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { children: [
                 index > 0 ? "&" : null,
                 encoded.key,
                 "=",
@@ -5015,9 +4389,9 @@ function RequestUrl() {
 // src/components/Request/RequestUrlInput.tsx
 init_emotion_jsx_shim();
 
-// src/components/Request/util/transformPastedUrl.ts
+// src/components/Request/util/handlePastedUrl.ts
 init_emotion_jsx_shim();
-function transformPastedUrl(value, currentRequest, dispatch) {
+function handlePastedUrl(value, currentRequest, dispatch) {
   var _a, _b, _c;
   const indexOfQueryString = value.indexOf("?");
   const hasQueryString = indexOfQueryString >= 0;
@@ -5025,6 +4399,7 @@ function transformPastedUrl(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 });
@@ -5037,25 +4412,25 @@ function transformPastedUrl(value, currentRequest, dispatch) {
     } catch (e) {
     }
   }
-  return relativeUrl;
 }
 
 // src/components/Request/RequestUrlInput.tsx
-var import_jsx_runtime47 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime43 = require("@emotion/react/jsx-runtime");
 function RequestUrlInput(props) {
   const { request, dispatch } = useRequest();
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     InputVariables,
     {
       disableReset: true,
       ...props,
       value: request.relativeUrl,
-      transformPaste: (value) => transformPastedUrl(value, request, dispatch),
+      onPaste: (value) => {
+        handlePastedUrl(value, request, dispatch);
+      },
       onChange: (value) => {
         dispatch({ type: "setRelativeUrl", relativeUrl: value });
       },
       showAddVariableMenuOption: true,
-      enableEditingVariables: true,
       "data-test-id": "field-url"
     }
   );
@@ -5098,19 +4473,18 @@ function useRequestParameter(paramName) {
 }
 
 // src/components/DataSourceEditor.tsx
-var import_jsx_runtime48 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime44 = 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_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     VariablesProvider,
     {
       value: (_a = value.variables) != null ? _a : {},
       onChange: (newValue) => onChange((prev) => ({ newValue: { ...prev, variables: newValue } })),
       editVariableComponent,
-      readOnly: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         RequestProvider,
         {
           value: currentRequestValue,
@@ -5148,23 +4522,21 @@ function convertRequestDataToDataSource(dataSource, requestData) {
 
 // src/components/DataTypeEditor.tsx
 init_emotion_jsx_shim();
-var import_jsx_runtime49 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime45 = require("@emotion/react/jsx-runtime");
 function DataTypeEditor({ onChange, children, editVariableComponent }) {
   var _a;
   const {
     value,
-    metadata: { dataSource },
-    isReadOnly
+    metadata: { dataSource }
   } = useMeshLocation("dataType");
   const currentRequestValue = convertDataTypeToRequestData(value, dataSource);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     VariablesProvider,
     {
       value: (_a = value.variables) != null ? _a : {},
       onChange: (newValue) => onChange((prev) => ({ newValue: { ...prev, variables: newValue } })),
       editVariableComponent,
-      readOnly: isReadOnly,
-      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         RequestProvider,
         {
           value: currentRequestValue,
@@ -5211,17 +4583,17 @@ function convertRequestDataToDataType(dataType, requestData) {
 
 // src/components/MeshApp.tsx
 init_emotion_jsx_shim();
-var import_design_system25 = require("@uniformdev/design-system");
+var import_design_system23 = require("@uniformdev/design-system");
 
 // src/hooks/useInitializeUniformMeshSdk.ts
 init_emotion_jsx_shim();
 var import_mesh_sdk = require("@uniformdev/mesh-sdk");
-var import_react49 = require("react");
+var import_react41 = require("react");
 var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
-  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)(
+  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)(
     () => {
       if (typeof window === "undefined" || sdk) {
         return;
@@ -5254,7 +4626,7 @@ var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
 };
 
 // src/components/MeshApp.tsx
-var import_jsx_runtime50 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime46 = require("@emotion/react/jsx-runtime");
 var MeshApp = ({
   children,
   loadingComponent,
@@ -5263,37 +4635,37 @@ var MeshApp = ({
   const { initializing, error, sdk } = useInitializeUniformMeshSdk();
   if (initializing || !sdk) {
     const LoadingComponent = loadingComponent;
-    return LoadingComponent ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(LoadingComponent, {}) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_design_system25.LoadingIndicator, {});
+    return LoadingComponent ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(LoadingComponent, {}) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_design_system23.LoadingIndicator, {});
   }
   if (error) {
     const ErrorComponent = errorComponent;
     if (ErrorComponent) {
-      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ErrorComponent, { error });
+      return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ErrorComponent, { error });
     }
     throw error;
   }
-  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 })
+  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 })
   ] });
 };
 
 // src/components/ObjectSearch/DataRefreshButton.tsx
 init_emotion_jsx_shim();
-var import_react50 = require("@emotion/react");
-var import_design_system26 = require("@uniformdev/design-system");
-var import_jsx_runtime51 = require("@emotion/react/jsx-runtime");
+var import_react42 = require("@emotion/react");
+var import_design_system24 = require("@uniformdev/design-system");
+var import_jsx_runtime47 = require("@emotion/react/jsx-runtime");
 var DataRefreshButton = ({
   buttonText,
   isLoading,
   onRefreshData,
   ...props
 }) => {
-  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,
+  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,
       {
-        css: import_react50.css`
+        css: import_react42.css`
             ${isLoading ? "opacity: 0.2;" : void 0}
           `
       }
@@ -6465,13 +5837,13 @@ function bindVariablesToObjectRecursive({
 }
 
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
-var import_design_system27 = require("@uniformdev/design-system");
+var import_design_system25 = require("@uniformdev/design-system");
 
 // src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
 init_emotion_jsx_shim();
-var import_react51 = require("react");
-var import_jsx_runtime52 = require("@emotion/react/jsx-runtime");
-var ObjectSearchContext = (0, import_react51.createContext)({
+var import_react43 = require("react");
+var import_jsx_runtime48 = require("@emotion/react/jsx-runtime");
+var ObjectSearchContext = (0, import_react43.createContext)({
   onSetQuery: () => {
   },
   onSelectItem: () => {
@@ -6486,15 +5858,15 @@ var ObjectSearchContext = (0, import_react51.createContext)({
   }
 });
 var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
-  const [query, setQuery] = (0, import_react51.useState)({
+  const [query, setQuery] = (0, import_react43.useState)({
     contentType: "",
     keyword: ""
   });
   const { flatVariables } = useVariables(true);
-  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)(
+  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)(
     (value2) => {
       if (Array.isArray(value2.contentType) && value2.contentType.length > 0) {
         return setQuery({
@@ -6506,7 +5878,7 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
     },
     [setQuery]
   );
-  const onSelectItem = (0, import_react51.useCallback)(
+  const onSelectItem = (0, import_react43.useCallback)(
     (selectedResult) => {
       if (Array.isArray(selectedResult)) {
         setSelectedItems(selectedResult);
@@ -6520,17 +5892,17 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
     },
     [setSelectedItems, selectedItems]
   );
-  const onRemoveAllSelectedItems = (0, import_react51.useCallback)(() => {
+  const onRemoveAllSelectedItems = (0, import_react43.useCallback)(() => {
     setSelectedItems([]);
   }, [setSelectedItems]);
-  const onSetList = (0, import_react51.useCallback)(
+  const onSetList = (0, import_react43.useCallback)(
     (value2) => {
       setList(value2);
     },
     [setList]
   );
-  const boundQuery = (0, import_react51.useMemo)(() => bindQuery(query, flatVariables), [query, flatVariables]);
-  const value = (0, import_react51.useMemo)(
+  const boundQuery = (0, import_react43.useMemo)(() => bindQuery(query, flatVariables), [query, flatVariables]);
+  const value = (0, import_react43.useMemo)(
     () => ({
       boundQuery,
       onSetQuery,
@@ -6552,10 +5924,10 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
       onSetList
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ObjectSearchContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ObjectSearchContext.Provider, { value, children });
 };
 function useObjectSearchContext() {
-  return (0, import_react51.useContext)(ObjectSearchContext);
+  return (0, import_react43.useContext)(ObjectSearchContext);
 }
 function bindQuery(query, inputs) {
   const { result, errors } = bindVariablesToObject({
@@ -6570,7 +5942,7 @@ function bindQuery(query, inputs) {
 }
 
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
-var import_jsx_runtime53 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime49 = require("@emotion/react/jsx-runtime");
 var ObjectSearchContainer = ({
   label,
   enableDynamicInputToResultId,
@@ -6581,9 +5953,9 @@ var ObjectSearchContainer = ({
   var _a, _b;
   const { onSelectItem, selectedListItems, list } = useObjectSearchContext();
   const { flatVariables } = useVariables(true);
-  const body = /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_design_system27.VerticalRhythm, { children: [
+  const body = /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system25.VerticalRhythm, { children: [
     searchFilters,
-    !resultList ? null : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_design_system27.ScrollableList, { role: "list", children: resultList })
+    !resultList ? null : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system25.ScrollableList, { role: "list", children: resultList })
   ] });
   const handleSelectedVariableChange = (selectedValue) => {
     var _a2;
@@ -6612,8 +5984,8 @@ var ObjectSearchContainer = ({
       }
     ]);
   };
-  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)(
+  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)(
       InputVariables,
       {
         label,
@@ -6629,13 +6001,13 @@ var ObjectSearchContainer = ({
 
 // src/components/ObjectSearch/ObjectSearchFilter.tsx
 init_emotion_jsx_shim();
-var import_design_system28 = require("@uniformdev/design-system");
-var import_react53 = require("react");
+var import_design_system26 = require("@uniformdev/design-system");
+var import_react45 = require("react");
 
 // src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
 init_emotion_jsx_shim();
-var import_react52 = require("@emotion/react");
-var ObjectSearchFilterContainerLabel = import_react52.css`
+var import_react44 = require("@emotion/react");
+var ObjectSearchFilterContainerLabel = import_react44.css`
   align-items: center;
   display: flex;
   font-size: var(--fs-sm);
@@ -6643,21 +6015,21 @@ var ObjectSearchFilterContainerLabel = import_react52.css`
   line-height: 1rem;
   margin-bottom: var(--spacing-sm);
 `;
-var ObjectSearchFilterContainer = import_react52.css`
+var ObjectSearchFilterContainer = import_react44.css`
   display: grid;
   gap: var(--spacing-base);
 `;
-var ObjectSearchFilterDropdownAndTextSearch = import_react52.css`
+var ObjectSearchFilterDropdownAndTextSearch = import_react44.css`
   grid-template-columns: 0.5fr 1fr;
 `;
-var ObjectSearchFilterGrid = (gridColumns) => import_react52.css`
+var ObjectSearchFilterGrid = (gridColumns) => import_react44.css`
   display: grid;
   grid-template-columns: ${gridColumns};
   gap: var(--spacing-base);
 `;
 
 // src/components/ObjectSearch/ObjectSearchFilter.tsx
-var import_jsx_runtime54 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime50 = require("@emotion/react/jsx-runtime");
 var ObjectSearchFilter = ({
   requireContentType,
   typeSelectorAllTypesOptionText = "All content types",
@@ -6667,7 +6039,7 @@ var ObjectSearchFilter = ({
   selectOptions
 }) => {
   const { query, onSetQuery } = useObjectSearchContext();
-  const [searchState, setSearchState] = (0, import_react53.useState)({
+  const [searchState, setSearchState] = (0, import_react45.useState)({
     contentType: "",
     keyword: ""
   });
@@ -6677,9 +6049,9 @@ var ObjectSearchFilter = ({
     });
     onSetQuery({ ...query, ...value });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("fieldset", { css: [ObjectSearchFilterContainer, ObjectSearchFilterDropdownAndTextSearch], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-      import_design_system28.InputSelect,
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("fieldset", { css: [ObjectSearchFilterContainer, ObjectSearchFilterDropdownAndTextSearch], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      import_design_system26.InputSelect,
       {
         label: selectLabel,
         showLabel: false,
@@ -6694,8 +6066,8 @@ var ObjectSearchFilter = ({
         value: query.contentType
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-      import_design_system28.InputKeywordSearch,
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      import_design_system26.InputKeywordSearch,
       {
         inputFieldName: searchInputName,
         placeholder: searchInputPlaceholderText,
@@ -6710,23 +6082,23 @@ var ObjectSearchFilter = ({
 
 // src/components/ObjectSearch/ObjectSearchFilterContainer.tsx
 init_emotion_jsx_shim();
-var import_jsx_runtime55 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime51 = require("@emotion/react/jsx-runtime");
 var ObjectSearchFilterContainer2 = ({ label, 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 })
+  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 })
   ] });
 };
 
 // src/components/ObjectSearch/ObjectSearchListItem.tsx
 init_emotion_jsx_shim();
-var import_design_system30 = require("@uniformdev/design-system");
+var import_design_system28 = require("@uniformdev/design-system");
 
 // src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
 init_emotion_jsx_shim();
-var import_react54 = require("@emotion/react");
-var import_design_system29 = require("@uniformdev/design-system");
-var ObjectListItemContainer = import_react54.css`
+var import_react46 = require("@emotion/react");
+var import_design_system27 = require("@uniformdev/design-system");
+var ObjectListItemContainer = import_react46.css`
   align-items: center;
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -6739,8 +6111,8 @@ var ObjectListItemContainer = import_react54.css`
     display: none;
   }
 `;
-var ObjectListItemLoading = import_react54.css`
-  animation: ${import_design_system29.skeletonLoading} 1s linear infinite alternate;
+var ObjectListItemLoading = import_react46.css`
+  animation: ${import_design_system27.skeletonLoading} 1s linear infinite alternate;
   border-color: transparent;
   min-height: 42px;
   position: relative;
@@ -6763,37 +6135,37 @@ var ObjectListItemLoading = import_react54.css`
     width: 1rem;
   }
 `;
-var ObjectListItemHeadingGroup = import_react54.css`
+var ObjectListItemHeadingGroup = import_react46.css`
   align-items: center;
   display: grid;
 `;
-var ObjectListItemTitle = import_react54.css`
+var ObjectListItemTitle = import_react46.css`
   color: var(--brand-secondary-1);
   display: block;
   font-size: var(--fs-sm);
 `;
-var ObjectListItemSubtitle = import_react54.css`
+var ObjectListItemSubtitle = import_react46.css`
   color: var(--gray-500);
   display: block;
   font-size: var(--fs-xs);
   line-height: 1;
 `;
-var ObjectListItemInfoContainer = import_react54.css`
+var ObjectListItemInfoContainer = import_react46.css`
   align-items: center;
   display: flex;
   justify-content: center;
 `;
-var ObjectListItemControlledContent = import_react54.css`
+var ObjectListItemControlledContent = import_react46.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectListItemUnControlledContent = import_react54.css`
+var ObjectListItemUnControlledContent = import_react46.css`
   margin-top: var(--spacing-sm);
   grid-column: 1 / -1;
 `;
 
 // src/components/ObjectSearch/ObjectSearchListItem.tsx
-var import_jsx_runtime56 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime52 = require("@emotion/react/jsx-runtime");
 var ObjectSearchListItem = ({
   id,
   title,
@@ -6816,25 +6188,25 @@ var ObjectSearchListItem = ({
     return onSelectItem([selectedItem]);
   };
   const hideWhenInSelectedList = selectedListItems.some((item) => item.id === id);
-  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 })
+  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 })
       ] })
     ] }),
-    !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 })
+    !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 })
   ] });
 };
 var ObjectSearchListItemLoadingSkeleton = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
 };
 
 // src/components/ObjectSearch/ObjectSearchResultItem.tsx
 init_emotion_jsx_shim();
-var import_design_system32 = require("@uniformdev/design-system");
+var import_design_system30 = require("@uniformdev/design-system");
 var import_timeago3 = require("timeago.js");
 
 // src/components/ObjectSearch/ObjectSearchResultItemButton.tsx
@@ -6842,10 +6214,10 @@ init_emotion_jsx_shim();
 
 // src/components/ObjectSearch/styles/ObjectSearchResultItemButton.styles.ts
 init_emotion_jsx_shim();
-var import_react55 = require("@emotion/react");
-var import_design_system31 = require("@uniformdev/design-system");
-var ButtonStyles = import_react55.css`
-  ${import_design_system31.button}
+var import_react47 = require("@emotion/react");
+var import_design_system29 = require("@uniformdev/design-system");
+var ButtonStyles = import_react47.css`
+  ${import_design_system29.button}
   background: transparent;
   border: 1px solid var(--brand-secondary-1);
   color: var(--brand-secondary-1);
@@ -6871,20 +6243,20 @@ var ButtonStyles = import_react55.css`
     text-decoration: none;
   }
 `;
-var ButtonIcon = import_react55.css`
+var ButtonIcon = import_react47.css`
   width: 1rem;
   height: 1rem;
 `;
 
 // src/components/ObjectSearch/ObjectSearchResultItemButton.tsx
-var import_jsx_runtime57 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime53 = require("@emotion/react/jsx-runtime");
 var ObjectSearchResultItemButton = ({
   text,
   icon,
   ...props
 }) => {
-  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 }),
+  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 }),
     text
   ] });
 };
@@ -6893,16 +6265,16 @@ var LinkButton = ({
   icon,
   ...props
 }) => {
-  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 }),
+  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 }),
     text
   ] });
 };
 
 // src/components/ObjectSearch/styles/ObjectSearchResultItem.styles.ts
 init_emotion_jsx_shim();
-var import_react56 = require("@emotion/react");
-var ObjectSearchResultItemContainer = import_react56.css`
+var import_react48 = require("@emotion/react");
+var ObjectSearchResultItemContainer = import_react48.css`
   align-items: center;
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -6918,7 +6290,7 @@ var ObjectSearchResultItemContainer = import_react56.css`
     }
   }
 `;
-var ObjectSearchDragHandle = import_react56.css`
+var ObjectSearchDragHandle = import_react48.css`
   border-left: 2px dotted var(--gray-300);
   border-right: 2px dotted var(--gray-300);
   position: absolute;
@@ -6927,41 +6299,41 @@ var ObjectSearchDragHandle = import_react56.css`
   transition: opacity var(--duration-fast) var(--timing-ease-out);
   opacity: 0;
 `;
-var ObjectSearchResultItemSubtitle = import_react56.css`
+var ObjectSearchResultItemSubtitle = import_react48.css`
   color: var(--gray-500);
   display: block;
   font-size: var(--fs-xs);
   line-height: 1;
 `;
-var ObjectSearchResultItemTitle = import_react56.css`
+var ObjectSearchResultItemTitle = import_react48.css`
   align-items: center;
   color: var(--brand-secondary-1);
   display: flex;
   gap: var(--spacing-xs);
 `;
-var ObjectSearchResultItemTimeStamp = import_react56.css`
+var ObjectSearchResultItemTimeStamp = import_react48.css`
   color: var(--gray-500);
   font-size: var(--fs-xs);
 `;
-var ObjectSearchAuthorStateGroup = import_react56.css`
+var ObjectSearchAuthorStateGroup = import_react48.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectSearchUpdateGroup = import_react56.css`
+var ObjectSearchUpdateGroup = import_react48.css`
   display: grid;
 `;
-var ObjectSearchContentContainer = import_react56.css`
+var ObjectSearchContentContainer = import_react48.css`
   display: flex;
   gap: var(--spacing-base);
 `;
-var ObjectSearchImage = import_react56.css`
+var ObjectSearchImage = import_react48.css`
   width: 56px;
   object-fit: contain;
 `;
 
 // src/components/ObjectSearch/ObjectSearchResultItem.tsx
-var import_jsx_runtime58 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime54 = require("@emotion/react/jsx-runtime");
 var ObjectSearchResultItem = ({
   id,
   title,
@@ -6985,75 +6357,75 @@ var ObjectSearchResultItem = ({
     onSelectItem({ id, title: id });
     onRemove == null ? void 0 : onRemove();
   };
-  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: [
+  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: [
           title != null ? title : name,
-          !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_design_system32.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
+          !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_design_system30.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
         ] }),
-        !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: " }),
+        !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: " }),
               (0, import_timeago3.format)(createdAt)
             ] }),
-            !publishedAt ? null : /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("small", { css: ObjectSearchResultItemTimeStamp, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("strong", { children: "Last published: " }),
+            !publishedAt ? null : /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("small", { css: ObjectSearchResultItemTimeStamp, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("strong", { children: "Last published: " }),
               (0, import_timeago3.format)(publishedAt)
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { children })
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { children })
       ] })
     ] }) }),
-    !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" })
+    !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" })
     ] })
   ] });
 };
 
 // src/components/ObjectSearch/ObjectSearchResultList.tsx
 init_emotion_jsx_shim();
-var import_design_system33 = require("@uniformdev/design-system");
+var import_design_system31 = 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_react57 = require("@emotion/react");
-var ObjectSearchResultListContainer = import_react57.css`
+var import_react49 = require("@emotion/react");
+var ObjectSearchResultListContainer = import_react49.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   justify-content: space-between;
 `;
-var ObjectSearchDragContainer = import_react57.css`
+var ObjectSearchDragContainer = import_react49.css`
   margin: 0 0 var(--spacing-sm);
 `;
-var ObjectSearchResultListCounterContainer = import_react57.css`
+var ObjectSearchResultListCounterContainer = import_react49.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectSearchResultListTitle = import_react57.css`
+var ObjectSearchResultListTitle = import_react49.css`
   font-weight: var(--fw-bold);
   line-height: 1;
 `;
 
 // src/components/ObjectSearch/ObjectSearchResultList.tsx
-var import_jsx_runtime59 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime55 = require("@emotion/react/jsx-runtime");
 function ObjectSearchResultList({
   resultLabelText = "Selected",
   removeButtonText = "Remove all",
   onRemoveAllSelected,
   hideRemoveButton = false,
   additionalButtons,
-  renderResultComponent = (value) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ObjectSearchResultItem, { ...value, disableDnD }),
+  renderResultComponent = (value) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ObjectSearchResultItem, { ...value, disableDnD }),
   multiSelectId,
   disableDnD = false,
   whenNothingSelected = null
@@ -7073,17 +6445,17 @@ function ObjectSearchResultList({
       return result;
     }
   };
-  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 }),
+  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 }),
         " ",
-        !selectedListItems.length ? null : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_design_system33.Counter, { count: selectedListItems.length })
+        !selectedListItems.length ? null : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_design_system31.Counter, { count: selectedListItems.length })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { css: ObjectSearchResultListCounterContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { css: ObjectSearchResultListCounterContainer, children: [
         additionalButtons,
-        hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-          import_design_system33.Button,
+        hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          import_design_system31.Button,
           {
             buttonType: "ghostDestructive",
             size: "xs",
@@ -7094,10 +6466,10 @@ function ObjectSearchResultList({
         )
       ] })
     ] }),
-    !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.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.map((item, i2) => {
         const renderListItem = renderResultComponent(item);
-        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)(
+        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)(
           "div",
           {
             css: ObjectSearchDragContainer,
@@ -7116,9 +6488,9 @@ function ObjectSearchResultList({
 
 // src/components/ObjectSearch/QueryFilter.tsx
 init_emotion_jsx_shim();
-var import_design_system34 = require("@uniformdev/design-system");
-var import_react58 = require("react");
-var import_jsx_runtime60 = require("@emotion/react/jsx-runtime");
+var import_design_system32 = require("@uniformdev/design-system");
+var import_react50 = require("react");
+var import_jsx_runtime56 = require("@emotion/react/jsx-runtime");
 var QueryFilter = ({
   requireContentType,
   queryFilterTitle = "Configure Query",
@@ -7149,7 +6521,7 @@ var QueryFilter = ({
 }) => {
   var _a, _b, _c, _d;
   const { query, onSetQuery } = useObjectSearchContext();
-  const [queryState, setQueryState] = (0, import_react58.useState)({
+  const [queryState, setQueryState] = (0, import_react50.useState)({
     contentType: "",
     keyword: "",
     count: countValue != null ? countValue : 5,
@@ -7160,13 +6532,13 @@ var QueryFilter = ({
     setQueryState((prev) => ({ ...prev, ...value }));
     onSetQuery({ ...query, ...value });
   };
-  (0, import_react58.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     onSetQuery(queryState);
   }, [onSetQuery, queryState]);
-  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)(
+  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)(
         InputVariables,
         {
           label: searchInputLabel,
@@ -7174,8 +6546,8 @@ var QueryFilter = ({
           onChange: (newQuery) => handleFilterChange({ keyword: newQuery }),
           disableInlineMenu: true,
           id: "qf_searchText",
-          inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-            import_design_system34.InputKeywordSearch,
+          inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+            import_design_system32.InputKeywordSearch,
             {
               id: "qf_searchText",
               inputFieldName: searchInputName,
@@ -7188,8 +6560,8 @@ var QueryFilter = ({
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { css: ObjectSearchFilterGrid("1fr 100px"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { css: ObjectSearchFilterGrid("1fr 100px"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           InputVariables,
           {
             label: contentTypeLabel,
@@ -7197,8 +6569,8 @@ var QueryFilter = ({
             value: (_d = queryState.contentType) != null ? _d : "",
             onChange: (newType) => handleFilterChange({ contentType: newType }),
             disableInlineMenu: true,
-            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-              import_design_system34.InputSelect,
+            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+              import_design_system32.InputSelect,
               {
                 id: "qf_contentType",
                 label: contentTypeLabel,
@@ -7216,7 +6588,7 @@ var QueryFilter = ({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           InputVariables,
           {
             label: countLabel,
@@ -7224,8 +6596,8 @@ var QueryFilter = ({
             value: queryState.count.toString(10),
             onChange: (newCount) => handleFilterChange({ count: newCount }),
             disableInlineMenu: true,
-            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-              import_design_system34.Input,
+            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+              import_design_system32.Input,
               {
                 id: "qf_count",
                 label: countLabel,
@@ -7239,8 +6611,8 @@ var QueryFilter = ({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { css: ObjectSearchFilterGrid("2fr 1fr"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { css: ObjectSearchFilterGrid("2fr 1fr"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           InputVariables,
           {
             id: "qf_sortBy",
@@ -7248,8 +6620,8 @@ var QueryFilter = ({
             value: queryState.sortBy,
             onChange: (newSortBy) => handleFilterChange({ sortBy: newSortBy }),
             disableInlineMenu: true,
-            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-              import_design_system34.InputSelect,
+            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+              import_design_system32.InputSelect,
               {
                 label: sortLabel,
                 id: "qf_sortBy",
@@ -7270,7 +6642,7 @@ var QueryFilter = ({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           InputVariables,
           {
             label: sortOrderLabel,
@@ -7278,8 +6650,8 @@ var QueryFilter = ({
             value: queryState.sortOrder,
             onChange: (newSort) => handleFilterChange({ sortOrder: newSort }),
             disableInlineMenu: true,
-            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-              import_design_system34.InputSelect,
+            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+              import_design_system32.InputSelect,
               {
                 label: sortOrderLabel,
                 id: "qf_sortOrder",
@@ -7304,7 +6676,7 @@ var QueryFilter = ({
 
 // src/hooks/index.ts
 init_emotion_jsx_shim();
-var import_design_system35 = require("@uniformdev/design-system");
+var import_design_system33 = require("@uniformdev/design-system");
 
 // src/utils/createLocationValidator.ts
 init_emotion_jsx_shim();
@@ -7316,7 +6688,7 @@ function createLocationValidator(setValue, validate) {
 }
 
 // src/index.ts
-var import_design_system36 = require("@uniformdev/design-system");
+var import_design_system34 = 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 = {
@@ -7474,6 +6846,7 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   useRequestParameter,
   useUniformMeshSdk,
   useVariables,
+  variableExpression,
   variablePrefix,
   variableSuffix,
   variablesToList,