@uniformdev/mesh-sdk-react 18.13.1-alpha.1 → 18.15.0

package/dist/index.js

@@ -27,9 +27,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  AddListButton: () => import_design_system22.AddListButton,
-  Button: () => import_design_system22.Button,
-  Callout: () => import_design_system22.Callout,
+  AddListButton: () => import_design_system24.AddListButton,
+  Button: () => import_design_system24.Button,
+  Callout: () => import_design_system24.Callout,
   DamSelectedItem: () => DamSelectedItem,
   DataResourceVariablesList: () => DataResourceVariablesList,
   DataSourceEditor: () => DataSourceEditor,
@@ -37,20 +37,20 @@ __export(src_exports, {
   DefaultSearchRow: () => DefaultSearchRow,
   DefaultSelectedItem: () => DefaultSelectedItem,
   EntrySearch: () => EntrySearch,
-  Heading: () => import_design_system22.Heading,
+  Heading: () => import_design_system24.Heading,
   Icons: () => icons_exports,
-  Input: () => import_design_system22.Input,
-  InputComboBox: () => import_design_system22.InputComboBox,
-  InputKeywordSearch: () => import_design_system22.InputKeywordSearch,
-  InputSelect: () => import_design_system22.InputSelect,
-  InputToggle: () => import_design_system22.InputToggle,
+  Input: () => import_design_system24.Input,
+  InputComboBox: () => import_design_system24.InputComboBox,
+  InputKeywordSearch: () => import_design_system24.InputKeywordSearch,
+  InputSelect: () => import_design_system24.InputSelect,
+  InputToggle: () => import_design_system24.InputToggle,
   InputVariables: () => InputVariables,
-  KeywordSearchInput: () => import_design_system22.InputKeywordSearch,
-  Label: () => import_design_system22.Label,
-  LoadingIndicator: () => import_design_system22.LoadingIndicator,
-  LoadingOverlay: () => import_design_system22.LoadingOverlay,
-  Menu: () => import_design_system22.Menu,
-  MenuItem: () => import_design_system22.MenuItem,
+  KeywordSearchInput: () => import_design_system24.InputKeywordSearch,
+  Label: () => import_design_system24.Label,
+  LoadingIndicator: () => import_design_system24.LoadingIndicator,
+  LoadingOverlay: () => import_design_system24.LoadingOverlay,
+  Menu: () => import_design_system24.Menu,
+  MenuItem: () => import_design_system24.MenuItem,
   MeshApp: () => MeshApp,
   ProductPreviewList: () => ProductPreviewList,
   ProductQuery: () => ProductQuery,
@@ -68,13 +68,13 @@ __export(src_exports, {
   RequestUrl: () => RequestUrl,
   RequestUrlInput: () => RequestUrlInput,
   ResolvableLoadingValue: () => ResolvableLoadingValue,
-  ScrollableList: () => import_design_system22.ScrollableList,
-  ScrollableListItem: () => import_design_system22.ScrollableListItem,
+  ScrollableList: () => import_design_system24.ScrollableList,
+  ScrollableListItem: () => import_design_system24.ScrollableListItem,
   SelectionField: () => SelectionField,
-  Switch: () => import_design_system22.Switch,
+  Switch: () => import_design_system24.Switch,
   TextVariableRenderer: () => TextVariableRenderer,
-  Textarea: () => import_design_system22.Textarea,
-  Theme: () => import_design_system22.Theme,
+  Textarea: () => import_design_system24.Textarea,
+  Theme: () => import_design_system24.Theme,
   UniformMeshLocationContext: () => UniformMeshLocationContext,
   UniformMeshLocationContextProvider: () => UniformMeshLocationContextProvider,
   UniformMeshSdkContext: () => UniformMeshSdkContext,
@@ -2784,7 +2784,7 @@ function DefaultDamItemRenderer({ item }) {
 }
 
 // src/components/DataResourceVariablesList.tsx
-var import_design_system16 = require("@uniformdev/design-system");
+var import_design_system18 = require("@uniformdev/design-system");
 
 // src/hooks/useMeshLocation.ts
 var import_react27 = require("react");
@@ -2886,22 +2886,55 @@ function useMeshLocation(expectedLocation) {
 }
 
 // src/components/Variables/InputVariables.tsx
-var import_react29 = require("@emotion/react");
-var import_react30 = __toESM(require("@yaireo/tagify/dist/react.tagify"));
+var import_design_system16 = require("@uniformdev/design-system");
 var React11 = __toESM(require("react"));
 
-// src/components/Variables/InputVariables.styles.ts
+// src/components/Variables/InsertVariableMenu.tsx
+var import_design_system15 = require("@uniformdev/design-system");
+var import_react30 = require("react");
+
+// src/components/Variables/styles/InsertVariableMenu.styles.ts
 var import_react28 = require("@emotion/react");
-var variablesFormContainer = import_react28.css`
+var menuContainer = import_react28.css`
+  position: relative;
+`;
+var menuBtn = import_react28.css`
+  background: none;
+  border: none;
+  color: var(--gray-300);
+  padding: 0;
+  position: absolute;
+  bottom: 25%;
+  right: var(--spacing-sm);
+`;
+var menuItemTextGroup = import_react28.css`
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+`;
+var smallText = import_react28.css`
+  font-size: var(--fs-xs);
+`;
+
+// src/components/Variables/VariablesProvider.tsx
+var React10 = __toESM(require("react"));
+
+// src/components/Variables/VariableEditor.tsx
+var import_design_system14 = require("@uniformdev/design-system");
+var import_formik = require("formik");
+
+// src/components/Variables/InputVariables.styles.ts
+var import_react29 = require("@emotion/react");
+var variablesFormContainer = import_react29.css`
   > * {
     margin: var(--spacing-base) 0 0;
   }
 `;
-var variablesFormBtnGroup = import_react28.css`
+var variablesFormBtnGroup = import_react29.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var tagifyStyles = import_react28.css`
+var tagifyStyles = import_react29.css`
   :root {
     --tagify-dd-color-primary: rgb(53, 149, 246);
     --tagify-dd-bg-color: var(--white);
@@ -3400,12 +3433,7 @@ var tagifyStyles = import_react28.css`
   }
 `;
 
-// src/components/Variables/VariablesProvider.tsx
-var React10 = __toESM(require("react"));
-
 // src/components/Variables/VariableEditor.tsx
-var import_design_system14 = require("@uniformdev/design-system");
-var import_formik = require("formik");
 var import_jsx_runtime28 = require("@emotion/react/jsx-runtime");
 function VariableEditor({ variable, onSubmit, onCancel }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i;
@@ -3518,23 +3546,74 @@ function useVariables() {
   return context;
 }
 
-// src/components/Variables/InputVariables.tsx
+// src/components/Variables/InsertVariableMenu.tsx
 var import_jsx_runtime30 = require("@emotion/react/jsx-runtime");
-function cleanTagifyValue(rawValue) {
-  return rawValue.replace(/\${{.*?"value":"([^"]+)".*?}}/g, "${$1}").replace(/[\r\n]+/g, "");
-}
+var InsertVariableMenu = ({
+  onVariableClick,
+  children,
+  textValue,
+  trigger = "${",
+  showAddVariableMenuOption = false
+}) => {
+  const { variables, dispatch } = useVariables();
+  const btnRef = (0, import_react30.useRef)(null);
+  const hasVariables = Object.entries(variables).length;
+  (0, import_react30.useEffect)(() => {
+    if (textValue === trigger && btnRef.current && btnRef.current.getAttribute("aria-expanded") === "false") {
+      btnRef.current.click();
+    }
+  }, [textValue, btnRef, trigger]);
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { css: menuContainer, children: [
+    children,
+    hasVariables ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+      import_design_system15.Menu,
+      {
+        placement: "bottom-start",
+        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { ref: btnRef, css: menuBtn, type: "button", title: "Insert variable", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_design_system15.Icon, { icon: "usb-c", iconColor: "currentColor" }) }),
+        menuLabel: "Insert variable",
+        children: [
+          Object.entries(variables).map(([key, value]) => {
+            const { helpText } = value;
+            return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+              import_design_system15.MenuItem,
+              {
+                id: key,
+                css: menuItemTextGroup,
+                onClick: () => onVariableClick(decodeURI(`\${${key}}`)),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { children: key }),
+                  helpText ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("small", { css: smallText, children: helpText }) : null
+                ]
+              },
+              key
+            );
+          }),
+          showAddVariableMenuOption ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_design_system15.MenuItemSeparator, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_design_system15.MenuItem, { onClick: () => dispatch({ type: "edit", variable: "" }), children: "Add Variable" })
+          ] }) : null
+        ]
+      }
+    ) : null
+  ] });
+};
+
+// src/components/Variables/InputVariables.tsx
+var import_jsx_runtime31 = require("@emotion/react/jsx-runtime");
 function InputVariables({
   "aria-label": ariaLabel,
   value,
-  disableVariables,
   onChange,
-  onPaste
+  onPaste,
+  onVariableClick,
+  showAddVariableMenuOption,
+  ...inputProps
 }) {
   const { variables, dispatch } = useVariables();
   const currentVariables = React11.useRef(variables);
   const currentDispatch = React11.useRef(dispatch);
   const currentSetValue = React11.useRef(onChange);
-  const tagifyRef = React11.useRef();
+  const inputRef = React11.useRef(null);
   React11.useEffect(() => {
     currentVariables.current = variables;
   }, [variables]);
@@ -3545,86 +3624,38 @@ function InputVariables({
     currentSetValue.current = onChange;
   }, [onChange]);
   React11.useEffect(() => {
-    var _a;
-    if (((_a = tagifyRef == null ? void 0 : tagifyRef.current) == null ? void 0 : _a.DOM) && onPaste) {
-      tagifyRef.current.DOM.input.onpaste = () => {
-        var _a2, _b;
-        return onPaste(cleanTagifyValue((_b = (_a2 = tagifyRef.current) == null ? void 0 : _a2.getInputValue()) != null ? _b : ""));
-      };
+    var _a, _b;
+    if (((_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.value) && onPaste) {
+      onPaste((_b = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _b.value);
     }
   });
-  React11.useEffect(() => {
-    var _a, _b, _c;
-    const currentTagifyValue = cleanTagifyValue((_b = (_a = tagifyRef.current) == null ? void 0 : _a.getInputValue()) != null ? _b : "");
-    if (value !== currentTagifyValue) {
-      (_c = tagifyRef.current) == null ? void 0 : _c.loadOriginalValues(value);
-    }
-  }, [value]);
-  const handleSetValue = React11.useCallback((rawValue) => {
-    currentSetValue.current(cleanTagifyValue(rawValue));
-  }, []);
-  const handleAddTag = React11.useCallback((newTagName) => {
-    if (!currentVariables.current[newTagName]) {
-      currentDispatch.current({
-        type: "set",
-        variable: { name: newTagName, default: "" },
-        openEditor: true
-      });
-    }
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react29.Global, { styles: tagifyStyles }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-      import_react30.default,
-      {
-        tagifyRef,
-        "aria-label": ariaLabel,
-        defaultValue: value,
-        autoFocus: false,
-        whitelist: Object.entries(variables).map(([k, v]) => {
-          var _a;
-          return { name: (_a = v.displayName) != null ? _a : k, value: k };
-        }),
-        settings: {
-          pattern: disableVariables ? null : /\$/,
-          enforceWhitelist: disableVariables,
-          mixTagsInterpolator: ["${", "}"],
-          duplicates: true,
-          tagTextProp: "name",
-          dropdown: {
-            position: "text",
-            enabled: 0,
-            mapValueTo: (v) => v.name,
-            includeSelectedTags: true,
-            searchKeys: ["name", "value"],
-            highlightFirst: true
-          }
-        },
-        InputMode: "textarea",
-        onAdd: (e) => {
-          var _a;
-          const newTagName = (_a = e.detail.data) == null ? void 0 : _a.value;
-          if (newTagName) {
-            handleAddTag(newTagName);
-          }
-        },
-        onRemove: (e) => {
-          handleSetValue(e.detail.tagify.getInputValue());
-        },
-        onChange: (e) => {
-          handleSetValue(e.detail.value);
-        },
-        onInput: (e) => {
-          handleSetValue(e.detail.tagify.getInputValue());
+  const handleSetValue = (rawValue) => {
+    currentSetValue.current(rawValue);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    InsertVariableMenu,
+    {
+      showAddVariableMenuOption,
+      textValue: value,
+      onVariableClick,
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        import_design_system16.Input,
+        {
+          ref: inputRef,
+          label: ariaLabel,
+          showLabel: false,
+          value,
+          onChange: (e) => handleSetValue(e.currentTarget.value),
+          ...inputProps
         }
-      }
-    )
-  ] });
+      )
+    }
+  );
 }
 
 // src/components/Variables/VariablesList.tsx
 var import_react32 = require("@emotion/react");
-var import_design_system15 = require("@uniformdev/design-system");
+var import_design_system17 = require("@uniformdev/design-system");
 var import_react_beautiful_dnd2 = require("react-beautiful-dnd");
 
 // src/components/Variables/styles/VariablesList.styles.ts
@@ -3692,7 +3723,7 @@ function variablesToList(variables) {
 }
 
 // src/components/Variables/VariablesList.tsx
-var import_jsx_runtime31 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime32 = require("@emotion/react/jsx-runtime");
 function VariablesList() {
   const { variables, dispatch } = useVariables();
   const sorted = variablesToList(variables);
@@ -3713,24 +3744,24 @@ function VariablesList() {
       return result;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_beautiful_dnd2.DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_beautiful_dnd2.Droppable, { droppableId: "variables-table", children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_design_system15.Table, { ...provided.droppableProps, ref: provided.innerRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_design_system15.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_design_system15.TableRow, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_design_system15.TableCellHead, { children: "Name" }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_design_system15.TableCellHead, { children: "Default Value" }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_design_system15.TableCellHead, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_beautiful_dnd2.DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_beautiful_dnd2.Droppable, { droppableId: "variables-table", children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_design_system17.Table, { ...provided.droppableProps, ref: provided.innerRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_design_system17.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_design_system17.TableRow, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_design_system17.TableCellHead, { children: "Name" }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_design_system17.TableCellHead, { children: "Default Value" }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_design_system17.TableCellHead, {})
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_design_system15.TableBody, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_design_system17.TableBody, { children: [
         sorted.map(({ name, displayName, default: defaultValue }, index) => {
           const text = displayName != null ? displayName : name;
-          return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             import_react_beautiful_dnd2.Draggable,
             {
               draggableId: name,
               index,
               isDragDisabled: sorted.length === 1,
-              children: (provided2, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
-                import_design_system15.TableRow,
+              children: (provided2, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+                import_design_system17.TableRow,
                 {
                   ref: provided2.innerRef,
                   ...provided2.dragHandleProps,
@@ -3739,7 +3770,7 @@ function VariablesList() {
                   css: tableRow(snapshot.isDragging),
                   "data-dragging": snapshot.isDragging,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_design_system15.TableCellData, { css: sorted.length > 1 ? tableCellDragIcon : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_design_system17.TableCellData, { css: sorted.length > 1 ? tableCellDragIcon : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                       "button",
                       {
                         css: variableName,
@@ -3752,21 +3783,21 @@ function VariablesList() {
                         children: text
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_design_system15.TableCellData, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { css: variableValue, title: defaultValue, children: defaultValue }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_design_system15.TableCellData, { align: "right", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_design_system17.TableCellData, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { css: variableValue, title: defaultValue, children: defaultValue }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_design_system17.TableCellData, { align: "right", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                       "button",
                       {
                         type: "button",
                         title: `delete ${text}`,
                         css: [
-                          import_design_system15.button,
+                          import_design_system17.button,
                           import_react32.css`
                                   background: transparent;
                                 `
                         ],
                         "aria-controls": text,
                         onClick: () => dispatch({ type: "remove", variable: name }),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_design_system15.Icon, { icon: "trash", iconColor: "red" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_design_system17.Icon, { icon: "trash", iconColor: "red" })
                       }
                     ) })
                   ]
@@ -3779,8 +3810,8 @@ function VariablesList() {
         provided.placeholder
       ] })
     ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-      import_design_system15.AddListButton,
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      import_design_system17.AddListButton,
       {
         onButtonClick: () => dispatch({ type: "edit", variable: "" }),
         "aria-label": "Add variable",
@@ -3793,7 +3824,7 @@ function VariablesList() {
 }
 
 // src/components/DataResourceVariablesList.tsx
-var import_jsx_runtime32 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime33 = require("@emotion/react/jsx-runtime");
 function DataResourceVariablesList({
   setVariables,
   noVariables: NoVariablesComponent,
@@ -3806,14 +3837,14 @@ function DataResourceVariablesList({
   const variableDefinitions = variablesToList(dataType.variables);
   if (variableDefinitions.length === 0) {
     if (NoVariablesComponent) {
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(NoVariablesComponent, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(NoVariablesComponent, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_design_system16.Callout, { type: "note", children: "No settings are required." });
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_design_system18.Callout, { type: "note", children: "No settings are required." });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children: variableDefinitions.map((variableDefinition) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.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_runtime32.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       VariableRenderer,
       {
         definition: variableDefinition,
@@ -3835,9 +3866,9 @@ function DataResourceVariablesList({
   }) });
 }
 function TextVariableRenderer({ definition, value, setValue }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-      import_design_system16.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      import_design_system18.Input,
       {
         label: definition.displayName || definition.name,
         value,
@@ -3847,7 +3878,7 @@ function TextVariableRenderer({ definition, value, setValue }) {
         }
       }
     ),
-    definition.default !== "" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("small", { children: [
+    definition.default !== "" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("small", { children: [
       "Default value: ",
       definition.default
     ] }) : null
@@ -3857,12 +3888,12 @@ function TextVariableRenderer({ definition, value, setValue }) {
 // src/components/Request/RequestBody.tsx
 var import_react34 = require("@emotion/react");
 var import_react35 = __toESM(require("@monaco-editor/react"));
-var import_design_system17 = require("@uniformdev/design-system");
+var import_design_system19 = require("@uniformdev/design-system");
 var import_react36 = require("react");
 
 // src/components/Request/RequestProvider.tsx
 var React12 = __toESM(require("react"));
-var import_jsx_runtime33 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime34 = require("@emotion/react/jsx-runtime");
 var RequestContext = React12.createContext(null);
 function RequestProvider({ value, onChange, children }) {
   const contextValue = React12.useMemo(() => {
@@ -3931,7 +3962,7 @@ function RequestProvider({ value, onChange, children }) {
       request: value
     };
   }, [onChange, value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(RequestContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RequestContext.Provider, { value: contextValue, children });
 }
 function useRequest() {
   const context = React12.useContext(RequestContext);
@@ -3955,17 +3986,17 @@ var requestTypeContainer = (bgColor) => import_react33.css`
 `;
 
 // src/components/Request/RequestTypeContainer.tsx
-var import_jsx_runtime34 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime35 = require("@emotion/react/jsx-runtime");
 var RequestTypeContainer = ({
   bgColor = "transparent",
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { css: requestTypeContainer(bgColor), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { css: requestTypeContainer(bgColor), ...props, children });
 };
 
 // src/components/Request/RequestBody.tsx
-var import_jsx_runtime35 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime36 = require("@emotion/react/jsx-runtime");
 var LANGUAGE_OPTIONS = [
   { label: "Text", value: "plaintext" },
   { label: "JSON", value: "json" },
@@ -3985,22 +4016,22 @@ var LANGUAGE_TO_CONTENT_TYPE = {
 function RequestBody() {
   const { request, dispatch } = useRequest();
   const [language, setLanguage] = (0, import_react36.useState)("json");
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     "div",
     {
       css: import_react34.css`
         background: var(--white);
       `,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           RequestTypeContainer,
           {
             bgColor: "var(--gray-100)",
             css: import_react34.css`
           padding: var(--spacing-sm) var(--spacing-base);
         `,
-            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-              import_design_system17.InputSelect,
+            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              import_design_system19.InputSelect,
               {
                 label: "Language",
                 showLabel: false,
@@ -4022,7 +4053,7 @@ function RequestBody() {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           import_react35.default,
           {
             height: 200,
@@ -4046,79 +4077,87 @@ function RequestBody() {
 }
 
 // src/components/Request/RequestHeaders.tsx
-var import_design_system18 = require("@uniformdev/design-system");
-var import_jsx_runtime36 = require("@emotion/react/jsx-runtime");
+var import_design_system20 = require("@uniformdev/design-system");
+var import_jsx_runtime37 = require("@emotion/react/jsx-runtime");
 function RequestHeaders({ disableVariables }) {
   var _a, _b;
   const { dispatch, request } = useRequest();
   const deezHeaders = [...request.headers, { key: "", value: "" }];
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { css: innerContentStyles, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_design_system18.Table, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_design_system18.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_design_system18.TableRow, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_design_system18.TableCellHead, { children: "Name" }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_design_system18.TableCellHead, { children: "Value" })
+  const handleUpdateParamFromMenu = ({
+    key,
+    value,
+    index
+  }) => {
+    dispatch({
+      type: "updateHeader",
+      header: { key, value },
+      index
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { css: innerContentStyles, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_design_system20.Table, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_design_system20.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_design_system20.TableRow, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_design_system20.TableCellHead, { children: "Name" }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_design_system20.TableCellHead, { children: "Value" })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_design_system18.TableBody, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.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_runtime36.jsxs)(import_design_system18.TableRow, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_design_system18.TableCellData, { width: "50%", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_design_system20.TableRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_design_system20.TableCellData, { width: "50%", children: [
             baseHeader.key,
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("br", {}),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("small", { children: "from data source" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("br", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("small", { children: "from data source" }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_design_system18.TableCellData, { width: "50%", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("i", { css: { color: "var(--gray-500)" }, children: baseHeader.value }),
-            request.headers.find((p) => p.key === baseHeader.key) ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_design_system18.WarningMessage, { message: "overridden below" }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_design_system20.TableCellData, { width: "50%", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("i", { css: { color: "var(--gray-500)" }, children: baseHeader.value }),
+            request.headers.find((p) => p.key === baseHeader.key) ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_design_system20.WarningMessage, { message: "overridden below" }) : null
           ] })
         ] }, baseHeader.key);
       }),
-      deezHeaders.map((header, index) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_design_system18.TableRow, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_design_system18.TableCellData, { width: "50%", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-          import_design_system18.Input,
-          {
-            label: header.key,
-            value: header.key,
-            showLabel: false,
-            onChange: (e) => {
-              if (e.currentTarget.value) {
-                dispatch({
-                  type: "updateHeader",
-                  header: { key: e.currentTarget.value, value: header.value },
-                  index
-                });
-              } else {
-                dispatch({ type: "removeHeader", index });
-              }
-            },
-            "data-test-id": "header-key"
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_design_system18.TableCellData, { width: "50%", children: header.key ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-          import_design_system18.Input,
-          {
-            showLabel: false,
-            label: header.value,
-            value: header.value,
-            onChange: (e) => dispatch({
-              type: "updateHeader",
-              header: { key: header.key, value: e.currentTarget.value },
-              index
-            }),
-            "data-test-id": "header-value"
-          }
-        ) : null })
-      ] }, index))
+      deezHeaders.map((header, index) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_design_system20.TableRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_design_system20.TableCellData, { width: "50%", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            import_design_system20.Input,
+            {
+              label: header.key,
+              value: header.key,
+              showLabel: false,
+              onChange: (e) => {
+                if (e.currentTarget.value) {
+                  dispatch({
+                    type: "updateHeader",
+                    header: { key: e.currentTarget.value, value: header.value },
+                    index
+                  });
+                } else {
+                  dispatch({ type: "removeHeader", index });
+                }
+              },
+              "data-test-id": "header-key"
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_design_system20.TableCellData, { width: "50%", children: header.key ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            InputVariables,
+            {
+              value: header.value,
+              onChange: (value) => handleUpdateParamFromMenu({ key: header.key, value, index }),
+              onVariableClick: (value) => handleUpdateParamFromMenu({ key: header.key, value, index }),
+              "data-test-id": "header-value"
+            }
+          ) : null })
+        ] }, index);
+      })
     ] })
   ] }) });
 }
 
 // src/components/Request/RequestMethodSelect.tsx
-var import_design_system19 = require("@uniformdev/design-system");
-var import_jsx_runtime37 = require("@emotion/react/jsx-runtime");
+var import_design_system21 = require("@uniformdev/design-system");
+var import_jsx_runtime38 = require("@emotion/react/jsx-runtime");
 function RequestMethodSelect(props) {
   var _a;
   const { request, dispatch } = useRequest();
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-    import_design_system19.InputSelect,
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    import_design_system21.InputSelect,
     {
       ...props,
       options: [
@@ -4133,67 +4172,83 @@ function RequestMethodSelect(props) {
 }
 
 // src/components/Request/RequestParameters.tsx
-var import_design_system20 = require("@uniformdev/design-system");
-var import_jsx_runtime38 = require("@emotion/react/jsx-runtime");
+var import_design_system22 = require("@uniformdev/design-system");
+var import_jsx_runtime39 = require("@emotion/react/jsx-runtime");
 function RequestParameters({ disableVariables }) {
   var _a, _b;
   const { dispatch, request } = useRequest();
   const deezParameters = [...request.parameters, { key: "", value: "" }];
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { css: innerContentStyles, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_design_system20.Table, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_design_system20.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_design_system20.TableRow, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_design_system20.TableCellHead, { children: "Name" }),
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_design_system20.TableCellHead, { children: "Value" })
+  const handleUpdateParamFromMenu = ({
+    key,
+    value,
+    index
+  }) => {
+    dispatch({
+      type: "updateParameter",
+      parameter: { key, value },
+      index
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { css: innerContentStyles, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_design_system22.Table, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_design_system22.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_design_system22.TableRow, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_design_system22.TableCellHead, { children: "Name" }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_design_system22.TableCellHead, { children: "Value" })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_design_system20.TableBody, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.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_runtime38.jsxs)(import_design_system20.TableRow, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_design_system20.TableCellData, { width: "50%", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_design_system22.TableRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_design_system22.TableCellData, { width: "50%", children: [
             baseParameter.key,
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("br", {}),
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.jsxs)(import_design_system20.TableCellData, { width: "50%", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("i", { css: { color: "var(--gray-500)" }, children: baseParameter.value }),
-            request.parameters.find((p) => p.key === baseParameter.key) ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_design_system20.WarningMessage, { message: "overridden below" }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_design_system22.TableCellData, { width: "50%", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("i", { css: { color: "var(--gray-500)" }, children: baseParameter.value }),
+            request.parameters.find((p) => p.key === baseParameter.key) ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_design_system22.WarningMessage, { message: "overridden below" }) : null
           ] })
         ] }, baseParameter.key);
       }),
-      deezParameters.map((parameter, index) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_design_system20.TableRow, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_design_system20.TableCellData, { width: "50%", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-          import_design_system20.Input,
-          {
-            label: parameter.key,
-            value: parameter.key,
-            showLabel: false,
-            onChange: (e) => {
-              if (e.currentTarget.value) {
-                dispatch({
-                  type: "updateParameter",
-                  parameter: { key: e.currentTarget.value, value: parameter.value },
-                  index
-                });
-              } else {
-                dispatch({ type: "removeParameter", index });
-              }
-            },
-            "data-test-id": "parameter-key"
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_design_system20.TableCellData, { width: "50%", children: parameter.key ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-          import_design_system20.Input,
-          {
-            showLabel: false,
-            label: parameter.value,
-            value: parameter.value,
-            onChange: (e) => dispatch({
-              type: "updateParameter",
-              parameter: { key: parameter.key, value: e.currentTarget.value },
-              index
-            }),
-            "data-test-id": "parameter-value"
-          }
-        ) : null })
-      ] }, index))
+      deezParameters.map((parameter, index) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_design_system22.TableRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_design_system22.TableCellData, { width: "50%", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            import_design_system22.Input,
+            {
+              label: parameter.key,
+              value: parameter.key,
+              showLabel: false,
+              onChange: (e) => {
+                if (e.currentTarget.value) {
+                  dispatch({
+                    type: "updateParameter",
+                    parameter: { key: e.currentTarget.value, value: parameter.value },
+                    index
+                  });
+                } else {
+                  dispatch({ type: "removeParameter", index });
+                }
+              },
+              "data-test-id": "parameter-key"
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_design_system22.TableCellData, { width: "50%", children: parameter.key ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            InputVariables,
+            {
+              value: parameter.value,
+              onChange: (selectedVariable) => handleUpdateParamFromMenu({
+                key: parameter.key,
+                value: selectedVariable,
+                index
+              }),
+              onVariableClick: (selectedVariable) => handleUpdateParamFromMenu({
+                key: parameter.key,
+                value: selectedVariable,
+                index
+              }),
+              "data-test-id": "parameter-value"
+            }
+          ) : null })
+        ] }, index);
+      })
     ] })
   ] }) });
 }
@@ -4221,7 +4276,7 @@ function decodeVariablesInUrlEncodedString(string, varValues) {
 }
 
 // src/components/Request/RequestUrl.tsx
-var import_jsx_runtime39 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime40 = require("@emotion/react/jsx-runtime");
 function RequestUrl() {
   var _a, _b;
   const { variables } = useVariables();
@@ -4233,7 +4288,7 @@ function RequestUrl() {
     }
     return request.baseRequest.parameters.filter((baseParam) => !request.parameters.find((p) => p.key === baseParam.key)).concat(request.parameters);
   }, [(_a = request.baseRequest) == null ? void 0 : _a.parameters, request.parameters]);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     "small",
     {
       css: import_react37.css`
@@ -4242,14 +4297,14 @@ function RequestUrl() {
         word-break: break-word;
       `,
       children: [
-        request.baseRequest ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: (_b = request.baseRequest) == null ? void 0 : _b.baseUrl }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { css: { fontWeight: request.baseRequest ? "bold" : "inherit" }, children: [
+        request.baseRequest ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { children: (_b = request.baseRequest) == null ? void 0 : _b.baseUrl }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { css: { fontWeight: request.baseRequest ? "bold" : "inherit" }, children: [
           urlEncodeRequestUrl(request.relativeUrl, variables),
-          mergedParameters.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+          mergedParameters.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
             "?",
             mergedParameters.map((param, index) => {
               const encoded = urlEncodeRequestParameter(param, variables);
-              return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { children: [
+              return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { children: [
                 index > 0 ? "&" : null,
                 encoded.key,
                 "=",
@@ -4264,10 +4319,10 @@ function RequestUrl() {
 }
 
 // src/components/Request/RequestUrlInput.tsx
-var import_jsx_runtime40 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime41 = require("@emotion/react/jsx-runtime");
 function RequestUrlInput(props) {
   const { request, dispatch } = useRequest();
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     InputVariables,
     {
       ...props,
@@ -4295,7 +4350,11 @@ function RequestUrlInput(props) {
       },
       onChange: (value) => {
         dispatch({ type: "setRelativeUrl", relativeUrl: value });
-      }
+      },
+      onVariableClick: (selectedValue) => {
+        dispatch({ type: "setRelativeUrl", relativeUrl: request.relativeUrl.concat(selectedValue) });
+      },
+      showAddVariableMenuOption: true
     }
   );
 }
@@ -4335,18 +4394,18 @@ function useRequestParameter(paramName) {
 }
 
 // src/components/DataSourceEditor.tsx
-var import_jsx_runtime41 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime42 = 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_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     VariablesProvider,
     {
       value: (_a = value.variables) != null ? _a : {},
       onChange: (newValue) => onChange((prev) => ({ newValue: { ...prev, variables: newValue } })),
       editVariableComponent,
-      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         RequestProvider,
         {
           value: currentRequestValue,
@@ -4383,7 +4442,7 @@ function convertRequestDataToDataSource(dataSource, requestData) {
 }
 
 // src/components/DataTypeEditor.tsx
-var import_jsx_runtime42 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime43 = require("@emotion/react/jsx-runtime");
 function DataTypeEditor({ onChange, children, editVariableComponent }) {
   var _a;
   const {
@@ -4391,13 +4450,13 @@ function DataTypeEditor({ onChange, children, editVariableComponent }) {
     metadata: { dataSource }
   } = useMeshLocation("dataType");
   const currentRequestValue = convertDataTypeToRequestData(value, dataSource);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     VariablesProvider,
     {
       value: (_a = value.variables) != null ? _a : {},
       onChange: (newValue) => onChange((prev) => ({ newValue: { ...prev, variables: newValue } })),
       editVariableComponent,
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
         RequestProvider,
         {
           value: currentRequestValue,
@@ -4443,7 +4502,7 @@ function convertRequestDataToDataType(dataType, requestData) {
 }
 
 // src/components/MeshApp.tsx
-var import_design_system21 = require("@uniformdev/design-system");
+var import_design_system23 = require("@uniformdev/design-system");
 
 // src/hooks/useInitializeUniformMeshSdk.ts
 var import_mesh_sdk = require("@uniformdev/mesh-sdk");
@@ -4480,7 +4539,7 @@ var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
 };
 
 // src/components/MeshApp.tsx
-var import_jsx_runtime43 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime44 = require("@emotion/react/jsx-runtime");
 var MeshApp = ({
   children,
   loadingComponent,
@@ -4489,18 +4548,18 @@ var MeshApp = ({
   const { initializing, error, sdk } = useInitializeUniformMeshSdk();
   if (initializing || !sdk) {
     const LoadingComponent = loadingComponent;
-    return LoadingComponent ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(LoadingComponent, {}) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system21.LoadingIndicator, {});
+    return LoadingComponent ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(LoadingComponent, {}) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_design_system23.LoadingIndicator, {});
   }
   if (error) {
     const ErrorComponent = errorComponent;
     if (ErrorComponent) {
-      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ErrorComponent, { error });
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ErrorComponent, { error });
     }
     throw error;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(UniformMeshSdkContext.Provider, { value: { sdk }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system21.Theme, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(UniformMeshLocationContextProvider, { children })
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(UniformMeshSdkContext.Provider, { value: { sdk }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_design_system23.Theme, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(UniformMeshLocationContextProvider, { children })
   ] });
 };
 
@@ -4519,7 +4578,7 @@ function createLocationValidator(setValue, validate) {
 }
 
 // src/index.ts
-var import_design_system22 = require("@uniformdev/design-system");
+var import_design_system24 = 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 = {