@uniformdev/mesh-sdk-react 19.45.0 → 19.45.2-alpha.6

package/dist/index.js

@@ -33,9 +33,9 @@ var src_exports = {};
 __export(src_exports, {
   $createVariableNode: () => $createVariableNode,
   $isVariableNode: () => $isVariableNode,
-  AddListButton: () => import_design_system39.AddListButton,
-  Button: () => import_design_system39.Button,
-  Callout: () => import_design_system39.Callout,
+  AddListButton: () => import_design_system40.AddListButton,
+  Button: () => import_design_system40.Button,
+  Callout: () => import_design_system40.Callout,
   ControlledValuePlugin: () => ControlledValuePlugin,
   DamSelectedItem: () => DamSelectedItem,
   DataRefreshButton: () => DataRefreshButton,
@@ -46,24 +46,24 @@ __export(src_exports, {
   DataTypeEditor: () => DataTypeEditor,
   DefaultSearchRow: () => DefaultSearchRow,
   DefaultSelectedItem: () => DefaultSelectedItem,
-  DrawerContent: () => import_design_system39.DrawerContent,
+  DrawerContent: () => import_design_system40.DrawerContent,
   EDIT_VARIABLE_COMMAND: () => EDIT_VARIABLE_COMMAND,
   EntrySearch: () => EntrySearch,
-  Heading: () => import_design_system39.Heading,
+  Heading: () => import_design_system40.Heading,
   INSERT_VARIABLE_COMMAND: () => INSERT_VARIABLE_COMMAND,
   Icons: () => icons_exports,
-  Input: () => import_design_system39.Input,
-  InputComboBox: () => import_design_system39.InputComboBox,
-  InputKeywordSearch: () => import_design_system39.InputKeywordSearch,
-  InputSelect: () => import_design_system39.InputSelect,
-  InputToggle: () => import_design_system39.InputToggle,
+  Input: () => import_design_system40.Input,
+  InputComboBox: () => import_design_system40.InputComboBox,
+  InputKeywordSearch: () => import_design_system40.InputKeywordSearch,
+  InputSelect: () => import_design_system40.InputSelect,
+  InputToggle: () => import_design_system40.InputToggle,
   InputVariables: () => InputVariables,
-  Label: () => import_design_system39.Label,
+  Label: () => import_design_system40.Label,
   LinkButton: () => LinkButton,
-  LoadingIndicator: () => import_design_system39.LoadingIndicator,
-  LoadingOverlay: () => import_design_system39.LoadingOverlay,
-  Menu: () => import_design_system39.Menu,
-  MenuItem: () => import_design_system39.MenuItem,
+  LoadingIndicator: () => import_design_system40.LoadingIndicator,
+  LoadingOverlay: () => import_design_system40.LoadingOverlay,
+  Menu: () => import_design_system40.Menu,
+  MenuItem: () => import_design_system40.MenuItem,
   MeshApp: () => MeshApp,
   OPEN_INSERT_VARIABLE_COMMAND: () => OPEN_INSERT_VARIABLE_COMMAND,
   ObjectSearchContainer: () => ObjectSearchContainer,
@@ -77,22 +77,22 @@ __export(src_exports, {
   ObjectSearchResultList: () => ObjectSearchResultList,
   ParamTypeDynamicDataProvider: () => ParamTypeDynamicDataProvider,
   ParameterConnectionIndicator: () => ParameterConnectionIndicator,
-  ParameterGroup: () => import_design_system39.ParameterGroup,
-  ParameterImage: () => import_design_system39.ParameterImage,
-  ParameterImageInner: () => import_design_system39.ParameterImageInner,
-  ParameterInput: () => import_design_system39.ParameterInput,
-  ParameterInputInner: () => import_design_system39.ParameterInputInner,
-  ParameterLabel: () => import_design_system39.ParameterLabel,
-  ParameterMenuButton: () => import_design_system39.ParameterMenuButton,
+  ParameterGroup: () => import_design_system40.ParameterGroup,
+  ParameterImage: () => import_design_system40.ParameterImage,
+  ParameterImageInner: () => import_design_system40.ParameterImageInner,
+  ParameterInput: () => import_design_system40.ParameterInput,
+  ParameterInputInner: () => import_design_system40.ParameterInputInner,
+  ParameterLabel: () => import_design_system40.ParameterLabel,
+  ParameterMenuButton: () => import_design_system40.ParameterMenuButton,
   ParameterOrSingleVariable: () => ParameterOrSingleVariable,
-  ParameterSelect: () => import_design_system39.ParameterSelect,
-  ParameterSelectInner: () => import_design_system39.ParameterSelectInner,
-  ParameterShell: () => import_design_system39.ParameterShell,
+  ParameterSelect: () => import_design_system40.ParameterSelect,
+  ParameterSelectInner: () => import_design_system40.ParameterSelectInner,
+  ParameterShell: () => import_design_system40.ParameterShell,
   ParameterShellContext: () => import_design_system14.ParameterShellContext,
-  ParameterTextarea: () => import_design_system39.ParameterTextarea,
-  ParameterTextareaInner: () => import_design_system39.ParameterTextareaInner,
-  ParameterToggle: () => import_design_system39.ParameterToggle,
-  ParameterToggleInner: () => import_design_system39.ParameterToggleInner,
+  ParameterTextarea: () => import_design_system40.ParameterTextarea,
+  ParameterTextareaInner: () => import_design_system40.ParameterTextareaInner,
+  ParameterToggle: () => import_design_system40.ParameterToggle,
+  ParameterToggleInner: () => import_design_system40.ParameterToggleInner,
   ParameterVariables: () => ParameterVariables,
   ProductPreviewList: () => ProductPreviewList,
   ProductQuery: () => ProductQuery,
@@ -111,13 +111,13 @@ __export(src_exports, {
   RequestUrl: () => RequestUrl,
   RequestUrlInput: () => RequestUrlInput,
   ResolvableLoadingValue: () => ResolvableLoadingValue,
-  ScrollableList: () => import_design_system39.ScrollableList,
-  ScrollableListItem: () => import_design_system39.ScrollableListItem,
+  ScrollableList: () => import_design_system40.ScrollableList,
+  ScrollableListItem: () => import_design_system40.ScrollableListItem,
   SelectionField: () => SelectionField,
-  Switch: () => import_design_system39.Switch,
+  Switch: () => import_design_system40.Switch,
   TextVariableRenderer: () => TextVariableRenderer,
-  Textarea: () => import_design_system39.Textarea,
-  Theme: () => import_design_system39.Theme,
+  Textarea: () => import_design_system40.Textarea,
+  Theme: () => import_design_system40.Theme,
   VariableEditor: () => VariableEditor,
   VariableNode: () => VariableNode,
   VariablesList: () => VariablesList,
@@ -2976,6 +2976,7 @@ var import_design_system14 = require("@uniformdev/design-system");
 
 // src/components/Variables/composer/ControlledValuePlugin.tsx
 var import_LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var import_lite = require("dequal/lite");
 var import_react30 = require("react");
 
 // src/components/Variables/util/deserializeVariablesEditorState.ts
@@ -3087,12 +3088,17 @@ function ControlledValuePlugin({
   extraDependencies
 }) {
   const [editor] = (0, import_LexicalComposerContext.useLexicalComposerContext)();
+  const lastValueRef = (0, import_react30.useRef)(value);
   (0, import_react30.useEffect)(() => {
     if (!enabled) {
       return;
     }
+    if ((0, import_lite.dequal)(lastValueRef.current, value)) {
+      return;
+    }
     setTimeout(() => {
       if (editor) {
+        lastValueRef.current = value;
         setVariablesEditorValue(editor, value);
       }
     });
@@ -3106,8 +3112,9 @@ var import_useLexicalNodeSelection = require("@lexical/react/useLexicalNodeSelec
 var import_selection = require("@lexical/selection");
 var import_utils = require("@lexical/utils");
 var import_canvas3 = require("@uniformdev/canvas");
+var import_design_system18 = require("@uniformdev/design-system");
 var import_lexical4 = require("lexical");
-var import_react37 = require("react");
+var import_react38 = require("react");
 
 // src/components/Variables/util/prettifyBindExpression.tsx
 function prettifyBindExpression(bindExpression) {
@@ -3171,15 +3178,15 @@ function InfoVariableReference({ children }) {
 }
 
 // src/components/Variables/composer/VariablesPlugin.tsx
-var import_react35 = require("@emotion/react");
+var import_react36 = require("@emotion/react");
 var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerContext");
 var import_LexicalTypeaheadMenuPlugin = require("@lexical/react/LexicalTypeaheadMenuPlugin");
 var import_AiFillPlusCircle = require("@react-icons/all-files/ai/AiFillPlusCircle");
 var import_canvas2 = require("@uniformdev/canvas");
 var import_design_system17 = require("@uniformdev/design-system");
-var import_lite = require("dequal/lite");
+var import_lite2 = require("dequal/lite");
 var import_lexical3 = require("lexical");
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/components/Variables/toolbox/SelectVariableMenu.styles.ts
@@ -3212,11 +3219,11 @@ var variablesTipText = import_react32.css`
 `;
 
 // src/components/Variables/useOnVariableUpdated.ts
-var import_react34 = require("react");
+var import_react35 = require("react");
 
 // src/components/Variables/VariablesProvider.tsx
 var import_mitt = __toESM(require("mitt"));
-var React10 = __toESM(require("react"));
+var import_react34 = require("react");
 
 // src/components/Variables/VariableEditor.tsx
 var import_zod = require("@hookform/resolvers/zod");
@@ -3327,61 +3334,71 @@ function VariableEditor({ variable, onSubmit, onCancel, disableMeshTip }) {
 
 // src/components/Variables/VariablesProvider.tsx
 var import_jsx_runtime31 = require("@emotion/react/jsx-runtime");
-var VariablesContext = React10.createContext(null);
+var VariablesContext = (0, import_react34.createContext)(null);
 function VariablesProvider({
   value,
   onChange,
   editVariableComponent,
   readOnly,
+  isLoading,
   children,
   knownUndefinedValues = {}
 }) {
-  const [editing, setEditing] = React10.useState();
-  const [editingContext, setEditingContext] = React10.useState();
-  const events = React10.useMemo(() => (0, import_mitt.default)(), []);
+  const [editing, setEditing] = (0, import_react34.useState)();
+  const [editingContext, setEditingContext] = (0, import_react34.useState)();
+  const events = (0, import_react34.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 });
-        if (event.openEditor) {
-          setEditing(event.variable.name);
+  const valueBasedContextValue = (0, import_react34.useMemo)(
+    () => ({
+      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({ ...value, [event.variable.name]: varValue });
+          if (event.openEditor) {
+            setEditing(event.variable.name);
+            setEditingContext(event.context);
+          }
+        } else if (event.type === "edit") {
+          setEditing(event.variable);
           setEditingContext(event.context);
+        } else if (event.type === "remove") {
+          const newValue = { ...value };
+          delete newValue[event.variable];
+          onChange == null ? void 0 : onChange(newValue);
+        } else if (event.type === "reorder") {
+          onChange == null ? void 0 : onChange(event.result);
+        } else if (event.type === "cancelEdit") {
+          setEditing(void 0);
+          setEditingContext(void 0);
+        } else {
+          throw new Error(`Unknown event ${JSON.stringify(event)}`);
         }
-      } else if (event.type === "edit") {
-        setEditing(event.variable);
-        setEditingContext(event.context);
-      } else if (event.type === "remove") {
-        const newValue = { ...value };
-        delete newValue[event.variable];
-        onChange == null ? void 0 : onChange(newValue);
-      } else if (event.type === "reorder") {
-        onChange == null ? void 0 : onChange(event.result);
-      } else if (event.type === "cancelEdit") {
-        setEditing(void 0);
-        setEditingContext(void 0);
-      } else {
-        throw new Error(`Unknown event ${JSON.stringify(event)}`);
-      }
-    },
-    variables: value,
-    isEditing: typeof editing !== "undefined",
-    events,
-    canDispatch: true,
-    readOnly,
-    knownUndefinedValues
-  };
+      },
+      variables: value,
+      readOnly
+    }),
+    [onChange, readOnly, value]
+  );
+  const contextValue = (0, import_react34.useMemo)(() => {
+    return {
+      ...valueBasedContextValue,
+      isEditing: typeof editing !== "undefined",
+      events,
+      canDispatch: true,
+      knownUndefinedValues,
+      isLoading: !!isLoading
+    };
+  }, [editing, events, knownUndefinedValues, valueBasedContextValue, isLoading]);
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(VariablesContext.Provider, { value: contextValue, children: [
     children,
     typeof editing !== "undefined" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
@@ -3404,7 +3421,7 @@ function VariablesProvider({
   ] });
 }
 function useVariables(returnEmptyWithoutProvider = false) {
-  const context = React10.useContext(VariablesContext);
+  const context = (0, import_react34.useContext)(VariablesContext);
   if (!context) {
     if (returnEmptyWithoutProvider) {
       return {
@@ -3416,7 +3433,8 @@ function useVariables(returnEmptyWithoutProvider = false) {
         isEditing: false,
         variables: {},
         knownUndefinedValues: {},
-        canDispatch: false
+        canDispatch: false,
+        isLoading: false
       };
     }
     throw new Error("No VariablesProvider present");
@@ -3434,7 +3452,7 @@ function flattenVariables(variables) {
 // src/components/Variables/useOnVariableUpdated.ts
 function useOnVariableUpdated(fn, disabled) {
   const { variables, events, canDispatch } = useVariables(true);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (disabled || !canDispatch) {
       return;
     }
@@ -3518,7 +3536,7 @@ function useVariablesMenu({
   getEditorContext
 }) {
   const { variables, canDispatch, readOnly } = useVariables(true);
-  const canEditVariable = (0, import_react36.useCallback)(
+  const canEditVariable = (0, import_react37.useCallback)(
     (name, variable) => (
       // name === '' means new var. Add var perms computed by menu options.
       name === "" || canDispatch && enableEditingVariables && !readOnly && !(variable == null ? void 0 : variable.readOnly)
@@ -3526,7 +3544,7 @@ function useVariablesMenu({
     [canDispatch, enableEditingVariables, readOnly]
   );
   const canAddVariable = canDispatch && showAddVariableMenuOption && !readOnly;
-  const { groupedVariables, menuOptions } = (0, import_react36.useMemo)(() => {
+  const { groupedVariables, menuOptions } = (0, import_react37.useMemo)(() => {
     const groupedVariables2 = variablesToGroupedList(variables, filterVariable, getEditorContext == null ? void 0 : getEditorContext());
     if (canAddVariable) {
       groupedVariables2.unshift({
@@ -3548,7 +3566,7 @@ function useVariablesMenu({
     );
     return { menuOptions: menuOptions2, groupedVariables: groupedVariables2 };
   }, [variables, filterVariable, getEditorContext, canAddVariable, showAddVariableMenuOption]);
-  const onSelect = (0, import_react36.useCallback)(
+  const onSelect = (0, import_react37.useCallback)(
     ({ queryString, value, nodeToReplace, editor, overwriteExistingValue }) => {
       if (value === ADD_VARIABLE_OPTION) {
         editor.update(() => {
@@ -3571,7 +3589,8 @@ function useVariablesMenu({
             hasClickEvent: canEditVariable(value, targetVariable),
             referenceIsValid: true,
             tooltip: (_a = targetVariable == null ? void 0 : targetVariable.tooltip) != null ? _a : targetVariable == null ? void 0 : targetVariable.helpText,
-            isFresh: true
+            isFresh: true,
+            isLoading: false
           });
           if (nodeToReplace) {
             nodeToReplace.replace(variableNode);
@@ -3594,17 +3613,17 @@ function VariablesPlugin({
   filterVariable
 }) {
   const [editor] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
-  const { variables, dispatch, isEditing, canDispatch, readOnly, knownUndefinedValues } = useVariables(true);
-  const variablesRef = (0, import_react36.useRef)({ variables, knownUndefinedValues });
-  variablesRef.current = { variables, knownUndefinedValues };
-  const canEditVariable = (0, import_react36.useCallback)(
+  const { variables, dispatch, isEditing, canDispatch, readOnly, knownUndefinedValues, isLoading } = useVariables(true);
+  const variablesRef = (0, import_react37.useRef)({ variables, knownUndefinedValues, isLoading });
+  variablesRef.current = { variables, knownUndefinedValues, isLoading };
+  const canEditVariable = (0, import_react37.useCallback)(
     (name, variable) => (
       // name === '' means new var. Add var perms computed by menu options.
       name === "" || canDispatch && enableEditingVariables && !readOnly && !(variable == null ? void 0 : variable.readOnly)
     ),
     [canDispatch, enableEditingVariables, readOnly]
   );
-  const [editingKey, setEditingKey] = (0, import_react36.useState)(null);
+  const [editingKey, setEditingKey] = (0, import_react37.useState)(null);
   useOnVariableUpdated(({ name, latestValue }) => {
     editor.update(() => {
       var _a;
@@ -3620,18 +3639,18 @@ function VariablesPlugin({
       });
     });
   }, editingKey === null);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (editingKey !== null && !isEditing) {
       setEditingKey(null);
     }
   }, [editingKey, isEditing]);
-  const [queryString, setQueryString] = (0, import_react36.useState)(null);
+  const [queryString, setQueryString] = (0, import_react37.useState)(null);
   const { groupedVariables, menuOptions, onSelect } = useVariablesMenu({
     showAddVariableMenuOption,
     filterVariable,
     getEditorContext
   });
-  const { filteredGroupedVariables, filteredMenuOptions } = (0, import_react36.useMemo)(() => {
+  const { filteredGroupedVariables, filteredMenuOptions } = (0, import_react37.useMemo)(() => {
     if (!queryString) {
       return {
         filteredGroupedVariables: groupedVariables,
@@ -3651,7 +3670,7 @@ function VariablesPlugin({
       )
     };
   }, [queryString, groupedVariables, menuOptions]);
-  const onSelectOption = (0, import_react36.useCallback)(
+  const onSelectOption = (0, import_react37.useCallback)(
     (selectedOption, nodeToReplace, closeMenu) => {
       if (selectedOption.key === ADD_VARIABLE_OPTION) {
         setEditingKey(void 0);
@@ -3667,7 +3686,7 @@ function VariablesPlugin({
     },
     [editor, onSelect, queryString, replaceValueOnVariableInsert]
   );
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     editor.registerCommand(
       EDIT_VARIABLE_COMMAND,
       ({ reference, sourceKey }) => {
@@ -3705,7 +3724,8 @@ function VariablesPlugin({
             hasClickEvent: canEditVariable(reference, targetVariable),
             referenceIsValid: true,
             tooltip: (_a = targetVariable == null ? void 0 : targetVariable.tooltip) != null ? _a : targetVariable == null ? void 0 : targetVariable.helpText,
-            isFresh: true
+            isFresh: true,
+            isLoading: false
           });
           if (targetKey) {
             (_b = (0, import_lexical3.$getNodeByKey)(targetKey)) == null ? void 0 : _b.replace(variableNode);
@@ -3718,35 +3738,38 @@ function VariablesPlugin({
       import_lexical3.COMMAND_PRIORITY_NORMAL
     );
   }, [editor, disableVariables, canDispatch, dispatch, canEditVariable, readOnly, getEditorContext]);
-  const updateExistingNodeIfChanged = (0, import_react36.useCallback)(
+  const updateExistingNodeIfChanged = (0, import_react37.useCallback)(
     (variableNode) => {
       var _a, _b, _c;
       const targetVar = variablesRef.current.variables[variableNode.reference];
       const targetUndefinedVar = variablesRef.current.knownUndefinedValues[variableNode.reference];
+      const isLoadingVariables = variablesRef.current.isLoading;
       const tooltip = (_c = (_b = (_a = targetVar == null ? void 0 : targetVar.tooltip) != null ? _a : targetVar == null ? void 0 : targetVar.helpText) != null ? _b : targetUndefinedVar == null ? void 0 : targetUndefinedVar.error) != null ? _c : targetUndefinedVar == null ? void 0 : targetUndefinedVar.info;
       const currentState = variableNode.getState();
       const newState = {
         ...currentState,
-        // if we lose a display name we 'latch' it to last known (prevents flashes during mesh var updates)
-        displayName: (targetVar == null ? void 0 : targetVar.displayName) || currentState.displayName || variableNode.reference,
+        // if we lose a display name we 'latch' it to last known (prevents flashes during mesh var updates),
+        // unless we're also loading the whole var state
+        displayName: (targetVar == null ? void 0 : targetVar.displayName) || (isLoadingVariables ? void 0 : currentState.displayName) || variableNode.reference,
+        isLoading: isLoadingVariables && !targetVar && !(targetUndefinedVar == null ? void 0 : targetUndefinedVar.info),
         hasClickEvent: canEditVariable(variableNode.reference, targetVar),
-        referenceIsValid: (targetUndefinedVar == null ? void 0 : targetUndefinedVar.info) ? "info" : Boolean(targetVar),
+        referenceIsValid: (targetUndefinedVar == null ? void 0 : targetUndefinedVar.info) ? "info" : isLoadingVariables ? true : Boolean(targetVar),
         tooltip
       };
-      if (!(0, import_lite.dequal)(currentState, newState)) {
+      if (!(0, import_lite2.dequal)(currentState, newState)) {
         variableNode.setState(newState);
       }
     },
     [canEditVariable]
   );
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     editor.update(() => {
       (0, import_lexical3.$nodesOfType)(VariableNode).forEach((variableNode) => {
         updateExistingNodeIfChanged(variableNode);
       });
     });
   }, [editor, variables, canEditVariable, updateExistingNodeIfChanged]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     return editor.registerNodeTransform(VariableNode, (variableNode) => {
       updateExistingNodeIfChanged(variableNode);
     });
@@ -3770,7 +3793,7 @@ function VariablesPlugin({
           /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "div",
             {
-              css: import_react35.css`
+              css: import_react36.css`
               box-shadow: var(--shadow-base);
               border-radius: var(--rounded-base);
               background: var(--gray-50);
@@ -3849,7 +3872,8 @@ var VariableNode = class _VariableNode extends import_lexical4.DecoratorNode {
       referenceIsValid: true,
       isFresh: false,
       hasClickEvent: void 0,
-      tooltip: void 0
+      tooltip: void 0,
+      isLoading: false
     });
   }
   /** Gets the node's current state */
@@ -3909,7 +3933,7 @@ function VariableNodeComponent({
 }) {
   const [editor] = (0, import_LexicalComposerContext3.useLexicalComposerContext)();
   const [isSelected, setSelected, clearSelection] = (0, import_useLexicalNodeSelection.useLexicalNodeSelection)(nodeKey);
-  const onDelete = (0, import_react37.useCallback)(
+  const onDelete = (0, import_react38.useCallback)(
     (event) => {
       if (isSelected && (0, import_lexical4.$isNodeSelection)((0, import_lexical4.$getSelection)())) {
         event.preventDefault();
@@ -3922,7 +3946,7 @@ function VariableNodeComponent({
     },
     [isSelected, nodeKey]
   );
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     return (0, import_utils.mergeRegister)(
       editor.registerCommand(import_lexical4.KEY_DELETE_COMMAND, onDelete, import_lexical4.COMMAND_PRIORITY_LOW),
       editor.registerCommand(import_lexical4.KEY_BACKSPACE_COMMAND, onDelete, import_lexical4.COMMAND_PRIORITY_LOW),
@@ -3990,6 +4014,7 @@ function VariableNodeComponent({
     {
       ...state,
       reference,
+      displayName: state.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_design_system18.LoadingIndicator, { size: "sm" }) : state.displayName,
       selected: isSelected,
       onClick: state.hasClickEvent ? () => {
         setSelected(!isSelected);
@@ -4007,8 +4032,8 @@ function $isTargetWithinDecorator(target) {
 }
 
 // src/components/Variables/InputVariables.tsx
-var import_design_system19 = require("@uniformdev/design-system");
-var import_react47 = require("react");
+var import_design_system20 = require("@uniformdev/design-system");
+var import_react48 = require("react");
 var import_uuid2 = require("uuid");
 
 // src/components/Variables/composer/EditorRefPlugin.tsx
@@ -4028,10 +4053,10 @@ function EditorRefPlugin({
 // src/components/Variables/composer/PasteTransformerPlugin.tsx
 var import_LexicalComposerContext5 = require("@lexical/react/LexicalComposerContext");
 var import_lexical5 = require("lexical");
-var import_react38 = require("react");
+var import_react39 = require("react");
 function PasteTransformerPlugin({ transformPaste }) {
   const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     editor.registerCommand(
       import_lexical5.PASTE_COMMAND,
       (event) => {
@@ -4054,17 +4079,17 @@ function PasteTransformerPlugin({ transformPaste }) {
 }
 
 // src/components/Variables/styles/InputVariables.styles.ts
-var import_react39 = require("@emotion/react");
-var menuContainer = import_react39.css`
+var import_react40 = require("@emotion/react");
+var menuContainer = import_react40.css`
   position: relative;
 `;
-var menuBtn2 = import_react39.css`
+var menuBtn2 = import_react40.css`
   position: absolute;
   top: 50%;
   right: var(--spacing-sm);
   transform: translateY(-50%);
 `;
-var input = import_react39.css`
+var input = import_react40.css`
   appearance: none;
   background-color: var(--white);
   border: 1px solid var(--gray-400);
@@ -4100,8 +4125,8 @@ var input = import_react39.css`
 `;
 
 // src/components/Variables/toolbox/InputVariablesProvider.tsx
-var React11 = __toESM(require("react"));
-var import_react40 = require("react");
+var React10 = __toESM(require("react"));
+var import_react41 = require("react");
 
 // src/components/Variables/util/hasReferencedVariables.ts
 var import_canvas4 = require("@uniformdev/canvas");
@@ -4131,14 +4156,14 @@ function useInputVariablesState({
 }) {
   const { variables } = useVariables(true);
   const hasVariablesInValue = hasReferencedVariables(value != null ? value : "");
-  const [lastKnownId] = React11.useState(id);
-  const [hadVariablesInValue, setHadVariablesInValue] = React11.useState(hasVariablesInValue);
-  React11.useEffect(() => {
+  const [lastKnownId] = React10.useState(id);
+  const [hadVariablesInValue, setHadVariablesInValue] = React10.useState(hasVariablesInValue);
+  React10.useEffect(() => {
     if (hasVariablesInValue) {
       setHadVariablesInValue(true);
     }
   }, [hasVariablesInValue]);
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (id !== lastKnownId) {
       setHadVariablesInValue(hasVariablesInValue);
     }
@@ -4146,7 +4171,7 @@ function useInputVariablesState({
   const hadVariablesInValueForReals = inputWhenNoVariables ? hadVariablesInValue : hasVariablesInValue;
   const disableVariablesForReals = disableVariables || Object.keys(variables).length === 0 && !showAddVariableMenuOption;
   const disableResetForReals = !inputWhenNoVariables || !hadVariablesInValueForReals;
-  const sharedMenuProps = (0, import_react40.useMemo)(
+  const sharedMenuProps = (0, import_react41.useMemo)(
     () => ({
       menuTooltip,
       showAddVariableMenuOption,
@@ -4176,15 +4201,15 @@ function useInputVariablesState({
 }
 
 // src/components/Variables/toolbox/VariableField.styles.ts
-var import_react41 = require("@emotion/react");
-var labelText = import_react41.css`
+var import_react42 = require("@emotion/react");
+var labelText = import_react42.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
   margin: 0 0 var(--spacing-xs);
 `;
-var variableBindButton = import_react41.css`
+var variableBindButton = import_react42.css`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -4215,8 +4240,8 @@ var import_lexical6 = require("lexical");
 // src/components/Variables/toolbox/SelectVariableMenu.tsx
 var import_BsFillPlusCircleFill = require("@react-icons/all-files/bs/BsFillPlusCircleFill");
 var import_CgUsbC = require("@react-icons/all-files/cg/CgUsbC");
-var import_design_system18 = require("@uniformdev/design-system");
-var import_react42 = require("react");
+var import_design_system19 = require("@uniformdev/design-system");
+var import_react43 = require("react");
 var import_jsx_runtime34 = require("@emotion/react/jsx-runtime");
 function SelectVariableMenu({
   onSelectVariable,
@@ -4230,12 +4255,12 @@ function SelectVariableMenu({
   filterVariable
 }) {
   const { variables, dispatch, isEditing, canDispatch, readOnly } = useVariables(true);
-  const btnRef = (0, import_react42.useRef)(null);
-  const [openedAdd, setOpenedAdd] = (0, import_react42.useState)(false);
+  const btnRef = (0, import_react43.useRef)(null);
+  const [openedAdd, setOpenedAdd] = (0, import_react43.useState)(false);
   useOnVariableUpdated(({ name, latestValue }) => {
     onSelectVariable == null ? void 0 : onSelectVariable({ ...latestValue[name], name });
   }, !openedAdd);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (openedAdd && !isEditing) {
       setOpenedAdd(false);
     }
@@ -4247,7 +4272,7 @@ function SelectVariableMenu({
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
-    import_design_system18.Menu,
+    import_design_system19.Menu,
     {
       placement: "bottom-start",
       withoutPortal: true,
@@ -4266,26 +4291,26 @@ function SelectVariableMenu({
       menuLabel: menuTooltip,
       children: [
         showAddVariableMenuOptionForReals ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-          import_design_system18.MenuItem,
+          import_design_system19.MenuItem,
           {
             onClick: () => {
               setOpenedAdd(true);
               dispatch({ type: "edit", variable: "", context: getEditorContext == null ? void 0 : getEditorContext() });
             },
             "data-testid": "add-variable-button",
-            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_design_system18.HorizontalRhythm, { gap: "sm", align: "center", children: [
+            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_design_system19.HorizontalRhythm, { gap: "sm", align: "center", children: [
               /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_BsFillPlusCircleFill.BsFillPlusCircleFill, { fill: "var(--gray-500)", size: "1.25em" }),
               /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: typeof showAddVariableMenuOption === "string" ? showAddVariableMenuOption : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children: "Add\u2026" }) })
             ] })
           }
         ) : null,
-        showAddVariableMenuOptionForReals && menuHasVariableOptions ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_design_system18.MenuItemSeparator, {}) : null,
+        showAddVariableMenuOptionForReals && menuHasVariableOptions ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_design_system19.MenuItemSeparator, {}) : null,
         variablesGroups.map((group) => {
           var _a;
-          return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_design_system18.MenuGroup, { title: (_a = group.name) != null ? _a : "", children: group.variables.map((variable) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_design_system19.MenuGroup, { title: (_a = group.name) != null ? _a : "", children: group.variables.map((variable) => {
             const { name, displayName, helpText } = variable;
             return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
-              import_design_system18.MenuItem,
+              import_design_system19.MenuItem,
               {
                 id: name,
                 css: menuItemTextGroup,
@@ -4299,9 +4324,9 @@ function SelectVariableMenu({
             );
           }) }, group.name);
         }),
-        menuHasVariableOptions && onResetVariables ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_design_system18.MenuItemSeparator, {}) : null,
-        onResetVariables ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_design_system18.MenuItem, { onClick: onResetVariables, css: { color: "var(--brand-secondary-5)" }, children: "Reset" }) : null,
-        tip && (menuHasVariableOptions || onResetVariables) ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_design_system18.MenuItemSeparator, {}) : null,
+        menuHasVariableOptions && onResetVariables ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_design_system19.MenuItemSeparator, {}) : null,
+        onResetVariables ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_design_system19.MenuItem, { onClick: onResetVariables, css: { color: "var(--brand-secondary-5)" }, children: "Reset" }) : null,
+        tip && (menuHasVariableOptions || onResetVariables) ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_design_system19.MenuItemSeparator, {}) : null,
         tip ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("i", { css: variablesTipText, children: tip }) : null
       ]
     }
@@ -4369,14 +4394,14 @@ var import_LexicalAutoFocusPlugin = require("@lexical/react/LexicalAutoFocusPlug
 var import_LexicalClearEditorPlugin = require("@lexical/react/LexicalClearEditorPlugin");
 var import_LexicalComposer = require("@lexical/react/LexicalComposer");
 var import_LexicalOnChangePlugin = require("@lexical/react/LexicalOnChangePlugin");
-var import_react45 = require("react");
+var import_react46 = require("react");
 
 // src/components/Variables/composer/DisablePlugin.tsx
 var import_LexicalComposerContext7 = require("@lexical/react/LexicalComposerContext");
-var import_react43 = require("react");
+var import_react44 = require("react");
 function DisablePlugin({ disabled }) {
   const [editor] = (0, import_LexicalComposerContext7.useLexicalComposerContext)();
-  (0, import_react43.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     editor.setEditable(!disabled);
   }, [editor, disabled]);
   return null;
@@ -4385,10 +4410,10 @@ function DisablePlugin({ disabled }) {
 // src/components/Variables/composer/SingleLineTextPlugin.tsx
 var import_LexicalComposerContext8 = require("@lexical/react/LexicalComposerContext");
 var import_lexical7 = require("lexical");
-var import_react44 = require("react");
+var import_react45 = require("react");
 function SingleLineTextPlugin() {
   const [editor] = (0, import_LexicalComposerContext8.useLexicalComposerContext)();
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     editor.registerNodeTransform(import_lexical7.LineBreakNode, (node) => {
       node.remove();
     });
@@ -4441,8 +4466,8 @@ function VariablesComposer(props) {
     autoFocus,
     ...variablesPluginProps
   } = props;
-  const [lastEmittedValue, setLastEmittedValue] = (0, import_react45.useState)(value);
-  const editorConfig = (0, import_react45.useMemo)(
+  const [lastEmittedValue, setLastEmittedValue] = (0, import_react46.useState)(value);
+  const editorConfig = (0, import_react46.useMemo)(
     () => ({
       namespace: "uniform",
       onError(error) {
@@ -4454,8 +4479,8 @@ function VariablesComposer(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const editorState = (0, import_react45.useRef)();
-  const updateTimeout = (0, import_react45.useRef)();
+  const editorState = (0, import_react46.useRef)();
+  const updateTimeout = (0, import_react46.useRef)();
   if (typeof document === "undefined")
     return null;
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_LexicalComposer.LexicalComposer, { initialConfig: editorConfig, children: [
@@ -4497,7 +4522,7 @@ var import_LexicalHistoryPlugin = require("@lexical/react/LexicalHistoryPlugin")
 var import_LexicalPlainTextPlugin = require("@lexical/react/LexicalPlainTextPlugin");
 var import_utils2 = require("@lexical/utils");
 var import_lexical9 = require("lexical");
-var import_react46 = require("react");
+var import_react47 = require("react");
 var import_jsx_runtime38 = require("@emotion/react/jsx-runtime");
 function VariablesComposerInput({ css: css37, ...contentEditableProps }) {
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { children: [
@@ -4515,7 +4540,7 @@ function VariablesComposerInput({ css: css37, ...contentEditableProps }) {
 }
 function RichishCopyAndPastePlugin() {
   const [editor] = (0, import_LexicalComposerContext9.useLexicalComposerContext)();
-  (0, import_react46.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     editor.registerCommand(
       import_lexical9.COPY_COMMAND,
       (event) => {
@@ -4607,7 +4632,7 @@ function InputVariables(props) {
     editorRef,
     filterVariable
   } = props;
-  const [finalId] = (0, import_react47.useState)(id != null ? id : () => (0, import_uuid2.v4)());
+  const [finalId] = (0, import_react48.useState)(id != null ? id : () => (0, import_uuid2.v4)());
   const { dispatch, canDispatch, isEditing } = useVariables(true);
   const { disableVariablesForReals, hadVariablesInValue, sharedMenuProps } = useInputVariablesState(props);
   const disableInlineVariablesForReals = disableVariablesForReals || disableInlineMenu;
@@ -4640,10 +4665,10 @@ function InputVariables(props) {
             )
           }
         ),
-        caption ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_design_system19.Caption, { children: caption }) : null,
-        errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_design_system19.ErrorMessage, { message: errorMessage }) : null,
-        warningMessage ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_design_system19.WarningMessage, { message: warningMessage }) : null,
-        infoMessage ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_design_system19.InfoMessage, { message: infoMessage }) : null
+        caption ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_design_system20.Caption, { children: caption }) : null,
+        errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_design_system20.ErrorMessage, { message: errorMessage }) : null,
+        warningMessage ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_design_system20.WarningMessage, { message: warningMessage }) : null,
+        infoMessage ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_design_system20.InfoMessage, { message: infoMessage }) : null
       ]
     }
   );
@@ -4712,12 +4737,12 @@ function InputVariablesOverlayMenu({
 // src/components/Variables/ParameterConnectionIndicator.tsx
 var import_CgUsbC2 = require("@react-icons/all-files/cg/CgUsbC");
 var import_canvas6 = require("@uniformdev/canvas");
-var import_design_system20 = require("@uniformdev/design-system");
-var import_react49 = require("react");
+var import_design_system21 = require("@uniformdev/design-system");
+var import_react50 = require("react");
 
 // src/components/Variables/styles/ParameterVariables.styles.ts
-var import_react48 = require("@emotion/react");
-var variableBindButton2 = import_react48.css`
+var import_react49 = require("@emotion/react");
+var variableBindButton2 = import_react49.css`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -4746,7 +4771,7 @@ var variableBindButton2 = import_react48.css`
     max-height: unset;
   }
 `;
-var input2 = import_react48.css`
+var input2 = import_react49.css`
   display: block;
   appearance: none;
   box-sizing: border-box;
@@ -4785,7 +4810,8 @@ var input2 = import_react48.css`
     color: var(--gray-400);
   }
 
-  &[readonly] {
+  &[readonly],
+  &[contenteditable='false'] {
     cursor: not-allowed;
     color: var(--gray-400);
   }
@@ -4794,7 +4820,7 @@ var input2 = import_react48.css`
     margin: 0;
   }
 `;
-var inputMultiLine = (lines) => import_react48.css`
+var inputMultiLine = (lines) => import_react49.css`
   // 1.5 = line height, spacing-md = top and bottom padding
   height: calc(${lines * 1.5}em + var(--spacing-md));
   resize: vertical;
@@ -4810,7 +4836,7 @@ function ParameterConnectionIndicator({
   disabled,
   menuTooltip = "Insert variable"
 }) {
-  const hasVariablesInValue = (0, import_react49.useMemo)(() => {
+  const hasVariablesInValue = (0, import_react50.useMemo)(() => {
     let result = false;
     (0, import_canvas6.bindVariablesToObject)({
       value,
@@ -4821,10 +4847,10 @@ function ParameterConnectionIndicator({
     });
     return result;
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_design_system20.HorizontalRhythm, { align: "center", gap: "xs", css: { width: "100%" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_design_system21.HorizontalRhythm, { align: "center", gap: "xs", css: { width: "100%" }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { css: { flex: 1 }, children }),
     disabled ? null : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-      import_design_system20.Menu,
+      import_design_system21.Menu,
       {
         placement: "bottom-start",
         withoutPortal: true,
@@ -4846,7 +4872,7 @@ function ParameterConnectionIndicator({
 }
 
 // src/components/Variables/ParameterOrSingleVariable.tsx
-var import_design_system21 = require("@uniformdev/design-system");
+var import_design_system22 = require("@uniformdev/design-system");
 var import_jsx_runtime41 = require("@emotion/react/jsx-runtime");
 function ParameterOrSingleVariable(props) {
   const {
@@ -4875,7 +4901,7 @@ function ParameterOrSingleVariable(props) {
         children: [
           editorRef ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(EditorRefPlugin, { editorRef }) : null,
           /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ControlledValuePlugin, { enabled: true, value }),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_design_system21.HorizontalRhythm, { align: "center", gap: "xs", css: { width: "100%" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_design_system22.HorizontalRhythm, { align: "center", gap: "xs", css: { width: "100%" }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { css: { flex: 1 }, children: inputWhenNoVariables && !hadVariablesInValue ? inputWhenNoVariables : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
               VariablesComposerInput,
               {
@@ -4902,8 +4928,8 @@ function ParameterOrSingleVariable(props) {
 }
 
 // src/components/Variables/ParameterVariables.tsx
-var import_react50 = require("@emotion/react");
-var import_design_system22 = require("@uniformdev/design-system");
+var import_react51 = require("@emotion/react");
+var import_design_system23 = require("@uniformdev/design-system");
 var import_jsx_runtime42 = require("@emotion/react/jsx-runtime");
 function ParameterVariables(props) {
   const {
@@ -4941,7 +4967,7 @@ function ParameterVariables(props) {
         editorRef ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(EditorRefPlugin, { editorRef }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ControlledValuePlugin, { value, enabled: useInputWhenNoVariables }),
         /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-          import_design_system22.HorizontalRhythm,
+          import_design_system23.HorizontalRhythm,
           {
             align: "center",
             gap: "xs",
@@ -4960,7 +4986,7 @@ function ParameterVariables(props) {
                   "data-text-value": value,
                   css: [
                     input2,
-                    typeof multiLine === "number" ? inputMultiLine(multiLine) : multiLine === true ? inputMultiLine(4) : import_react50.css``
+                    typeof multiLine === "number" ? inputMultiLine(multiLine) : multiLine === true ? inputMultiLine(4) : import_react51.css``
                   ]
                 }
               ) }),
@@ -5010,13 +5036,13 @@ function variableDefaultTextValue(defaultValue) {
 }
 
 // src/components/Variables/VariablesList.tsx
-var import_react52 = require("@emotion/react");
-var import_design_system23 = require("@uniformdev/design-system");
+var import_react53 = require("@emotion/react");
+var import_design_system24 = require("@uniformdev/design-system");
 var import_react_beautiful_dnd2 = require("react-beautiful-dnd");
 
 // src/components/Variables/styles/VariablesList.styles.ts
-var import_react51 = require("@emotion/react");
-var tableRow = (isDragging) => import_react51.css`
+var import_react52 = require("@emotion/react");
+var tableRow = (isDragging) => import_react52.css`
   position: relative;
   ${isDragging ? `
   display: table;   
@@ -5024,7 +5050,7 @@ var tableRow = (isDragging) => import_react51.css`
   top: auto !important;
   ` : void 0}
 `;
-var tableCellDragIcon = import_react51.css`
+var tableCellDragIcon = import_react52.css`
   &::after {
     content: '';
     display: block;
@@ -5042,7 +5068,7 @@ var tableCellDragIcon = import_react51.css`
     opacity: 1;
   }
 `;
-var variableName = import_react51.css`
+var variableName = import_react52.css`
   border: none;
   color: var(--brand-secondary-5);
   font-weight: var(--fw-medium);
@@ -5053,7 +5079,7 @@ var variableName = import_react51.css`
   white-space: nowrap;
   max-width: 20ch;
 `;
-var variableValue = import_react51.css`
+var variableValue = import_react52.css`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -5083,13 +5109,13 @@ function VariablesList() {
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_beautiful_dnd2.DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_beautiful_dnd2.Droppable, { droppableId: "variables-table", children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_design_system23.Table, { ...provided.droppableProps, ref: provided.innerRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system23.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_design_system23.TableRow, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system23.TableCellHead, { children: "Name" }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system23.TableCellHead, { children: "Default Value" }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system23.TableCellHead, {})
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_beautiful_dnd2.DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_beautiful_dnd2.Droppable, { droppableId: "variables-table", children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_design_system24.Table, { ...provided.droppableProps, ref: provided.innerRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system24.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_design_system24.TableRow, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system24.TableCellHead, { children: "Name" }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system24.TableCellHead, { children: "Default Value" }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system24.TableCellHead, {})
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_design_system23.TableBody, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_design_system24.TableBody, { children: [
         sorted.map(({ name, displayName, default: defaultValue, readOnly }, index) => {
           const text = displayName != null ? displayName : name;
           const textValue = variableDefaultTextValue(defaultValue);
@@ -5100,7 +5126,7 @@ function VariablesList() {
               index,
               isDragDisabled: sorted.length === 1,
               children: (provided2, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
-                import_design_system23.TableRow,
+                import_design_system24.TableRow,
                 {
                   ref: provided2.innerRef,
                   ...provided2.dragHandleProps,
@@ -5109,7 +5135,7 @@ function VariablesList() {
                   css: tableRow(snapshot.isDragging),
                   "data-dragging": snapshot.isDragging,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system23.TableCellData, { css: sorted.length > 1 ? tableCellDragIcon : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system24.TableCellData, { css: sorted.length > 1 ? tableCellDragIcon : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                       "button",
                       {
                         css: variableName,
@@ -5122,21 +5148,21 @@ function VariablesList() {
                         children: text
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system23.TableCellData, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { css: variableValue, title: textValue, children: textValue }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system23.TableCellData, { align: "right", children: readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system24.TableCellData, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { css: variableValue, title: textValue, children: textValue }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system24.TableCellData, { align: "right", children: readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                       "button",
                       {
                         type: "button",
                         title: `delete ${text}`,
                         css: [
-                          import_design_system23.button,
-                          import_react52.css`
+                          import_design_system24.button,
+                          import_react53.css`
                                     background: transparent;
                                   `
                         ],
                         "aria-controls": text,
                         onClick: () => dispatch({ type: "remove", variable: name }),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system23.Icon, { icon: "trash", iconColor: "red" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system24.Icon, { icon: "trash", iconColor: "red" })
                       }
                     ) })
                   ]
@@ -5150,7 +5176,7 @@ function VariablesList() {
       ] })
     ] }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-      import_design_system23.AddListButton,
+      import_design_system24.AddListButton,
       {
         onButtonClick: () => dispatch({ type: "edit", variable: "" }),
         "aria-label": "Add variable",
@@ -5186,7 +5212,7 @@ function DataResourceDynamicInputProviderRenderer({
 }
 
 // src/components/DataResourceVariablesList.tsx
-var import_design_system24 = require("@uniformdev/design-system");
+var import_design_system25 = require("@uniformdev/design-system");
 var import_jsx_runtime45 = require("@emotion/react/jsx-runtime");
 function DataResourceVariablesList(props) {
   const {
@@ -5216,9 +5242,9 @@ function DataResourceVariablesListExplicit({
     if (NoVariablesComponent) {
       return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(NoVariablesComponent, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_design_system24.Callout, { type: "note", children: "No settings are required." });
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_design_system25.Callout, { type: "note", children: "No settings are required." });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DataResourceDynamicInputProvider, { dynamicInputs, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_design_system24.VerticalRhythm, { children: variableDefinitions.map((variableDefinition) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DataResourceDynamicInputProvider, { dynamicInputs, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_design_system25.VerticalRhythm, { 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_runtime45.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
@@ -5257,16 +5283,16 @@ function TextVariableRenderer({ definition, value, setValue }) {
 }
 
 // src/components/Request/RequestBody.tsx
-var import_react54 = require("@emotion/react");
-var import_design_system25 = require("@uniformdev/design-system");
-var import_react55 = require("react");
+var import_react55 = require("@emotion/react");
+var import_design_system26 = require("@uniformdev/design-system");
+var import_react56 = require("react");
 
 // src/components/Request/RequestProvider.tsx
-var React12 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var import_jsx_runtime46 = require("@emotion/react/jsx-runtime");
-var RequestContext = React12.createContext(null);
+var RequestContext = React11.createContext(null);
 function RequestProvider({ value, onChange, children }) {
-  const contextValue = React12.useMemo(() => {
+  const contextValue = React11.useMemo(() => {
     return {
       dispatch: (event) => {
         if (event.type === "setRelativeUrl") {
@@ -5335,7 +5361,7 @@ function RequestProvider({ value, onChange, children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(RequestContext.Provider, { value: contextValue, children });
 }
 function useRequest() {
-  const context = React12.useContext(RequestContext);
+  const context = React11.useContext(RequestContext);
   if (!context) {
     throw new Error("No RequestProvider present");
   }
@@ -5343,11 +5369,11 @@ function useRequest() {
 }
 
 // src/components/Request/styles/Request.styles.ts
-var import_react53 = require("@emotion/react");
-var innerContentStyles = import_react53.css`
+var import_react54 = require("@emotion/react");
+var innerContentStyles = import_react54.css`
   background: var(--white);
 `;
-var requestTypeContainer = (bgColor) => import_react53.css`
+var requestTypeContainer = (bgColor) => import_react54.css`
   align-items: start;
   background: ${bgColor};
   display: grid;
@@ -5385,11 +5411,11 @@ var LANGUAGE_TO_CONTENT_TYPE = {
 };
 function RequestBody() {
   const { request, dispatch } = useRequest();
-  const [language, setLanguage] = (0, import_react55.useState)("json");
+  const [language, setLanguage] = (0, import_react56.useState)("json");
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     "div",
     {
-      css: import_react54.css`
+      css: import_react55.css`
         background: var(--white);
       `,
       children: [
@@ -5397,11 +5423,11 @@ function RequestBody() {
           RequestTypeContainer,
           {
             bgColor: "var(--gray-100)",
-            css: import_react54.css`
+            css: import_react55.css`
           padding: var(--spacing-sm) var(--spacing-base);
         `,
             children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-              import_design_system25.InputSelect,
+              import_design_system26.InputSelect,
               {
                 label: "Language",
                 showLabel: false,
@@ -5424,7 +5450,7 @@ function RequestBody() {
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-          import_design_system25.JsonEditor,
+          import_design_system26.JsonEditor,
           {
             height: 200,
             defaultValue: request.body,
@@ -5441,7 +5467,7 @@ function RequestBody() {
 }
 
 // src/components/Request/RequestHeaders.tsx
-var import_design_system26 = require("@uniformdev/design-system");
+var import_design_system27 = require("@uniformdev/design-system");
 var import_jsx_runtime49 = require("@emotion/react/jsx-runtime");
 function RequestHeaders({
   disableVariables,
@@ -5461,30 +5487,30 @@ function RequestHeaders({
       index
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { css: innerContentStyles, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system26.Table, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system26.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system26.TableRow, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system26.TableCellHead, { children: "Name" }),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system26.TableCellHead, { children: "Value" }),
-      addOmitIfEmpty ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system26.TableCellHead, { children: "Omit If Empty" }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { css: innerContentStyles, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system27.Table, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system27.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system27.TableRow, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system27.TableCellHead, { children: "Name" }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system27.TableCellHead, { children: "Value" }),
+      addOmitIfEmpty ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system27.TableCellHead, { children: "Omit If Empty" }) : null
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system26.TableBody, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system27.TableBody, { children: [
       (_b = (_a = request.baseRequest) == null ? void 0 : _a.headers) == null ? void 0 : _b.map((baseHeader) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system26.TableRow, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system26.TableCellData, { width: "50%", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system27.TableRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system27.TableCellData, { width: "50%", children: [
             baseHeader.key,
             /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("br", {}),
             /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("small", { children: "from data source" }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system26.TableCellData, { width: "50%", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system27.TableCellData, { width: "50%", children: [
             /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("i", { css: { color: "var(--gray-500)" }, children: baseHeader.value }),
-            request.headers.find((p) => p.key === baseHeader.key) ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system26.WarningMessage, { message: "overridden below" }) : null
+            request.headers.find((p) => p.key === baseHeader.key) ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system27.WarningMessage, { message: "overridden below" }) : null
           ] })
         ] }, baseHeader.key);
       }),
       deezHeaders.map((header, index) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system26.TableRow, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system26.TableCellData, { width: "50%", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-            import_design_system26.Input,
+        return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system27.TableRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system27.TableCellData, { width: "50%", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            import_design_system27.Input,
             {
               label: header.key,
               value: header.key,
@@ -5503,7 +5529,7 @@ function RequestHeaders({
               "data-testid": "header-key"
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system26.TableCellData, { width: "50%", children: header.key ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system27.TableCellData, { width: "50%", children: header.key ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             InputVariables,
             {
               value: header.value,
@@ -5514,8 +5540,8 @@ function RequestHeaders({
               "data-testid": "header-value"
             }
           ) : null }),
-          addOmitIfEmpty ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system26.TableCellData, { width: "50%", children: header.key ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-            import_design_system26.Input,
+          addOmitIfEmpty ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system27.TableCellData, { width: "50%", children: header.key ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            import_design_system27.Input,
             {
               type: "checkbox",
               checked: header.omitIfEmpty,
@@ -5538,13 +5564,13 @@ function RequestHeaders({
 }
 
 // src/components/Request/RequestMethodSelect.tsx
-var import_design_system27 = require("@uniformdev/design-system");
+var import_design_system28 = require("@uniformdev/design-system");
 var import_jsx_runtime50 = require("@emotion/react/jsx-runtime");
 function RequestMethodSelect(props) {
   var _a;
   const { request, dispatch } = useRequest();
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-    import_design_system27.InputSelect,
+    import_design_system28.InputSelect,
     {
       ...props,
       options: [
@@ -5559,7 +5585,7 @@ function RequestMethodSelect(props) {
 }
 
 // src/components/Request/RequestParameters.tsx
-var import_design_system28 = require("@uniformdev/design-system");
+var import_design_system29 = require("@uniformdev/design-system");
 var import_jsx_runtime51 = require("@emotion/react/jsx-runtime");
 function RequestParameters({
   disableVariables,
@@ -5580,30 +5606,30 @@ function RequestParameters({
       index
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { css: innerContentStyles, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system28.Table, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system28.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system28.TableRow, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system28.TableCellHead, { children: "Name" }),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system28.TableCellHead, { children: "Value" }),
-      addOmitIfEmpty ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system28.TableCellHead, { children: "Omit If Empty" }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { css: innerContentStyles, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system29.Table, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system29.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system29.TableRow, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system29.TableCellHead, { children: "Name" }),
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system29.TableCellHead, { children: "Value" }),
+      addOmitIfEmpty ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system29.TableCellHead, { children: "Omit If Empty" }) : null
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system28.TableBody, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system29.TableBody, { children: [
       (_b = (_a = request.baseRequest) == null ? void 0 : _a.parameters) == null ? void 0 : _b.map((baseParameter) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system28.TableRow, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system28.TableCellData, { width: "50%", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system29.TableRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system29.TableCellData, { width: "50%", children: [
             baseParameter.key,
             /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("br", {}),
             /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("small", { children: "from data source" }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system28.TableCellData, { width: "50%", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system29.TableCellData, { width: "50%", children: [
             /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("i", { css: { color: "var(--gray-500)" }, children: baseParameter.value }),
-            request.parameters.find((p) => p.key === baseParameter.key) ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system28.WarningMessage, { message: "overridden below" }) : null
+            request.parameters.find((p) => p.key === baseParameter.key) ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system29.WarningMessage, { message: "overridden below" }) : null
           ] })
         ] }, baseParameter.key);
       }),
       deezParameters.map((parameter, index) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system28.TableRow, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system28.TableCellData, { width: "50%", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-            import_design_system28.Input,
+        return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system29.TableRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system29.TableCellData, { width: "50%", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+            import_design_system29.Input,
             {
               label: parameter.key,
               value: parameter.key,
@@ -5626,7 +5652,7 @@ function RequestParameters({
               "data-testid": "parameter-key"
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system28.TableCellData, { width: "50%", children: parameter.key ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system29.TableCellData, { width: "50%", children: parameter.key ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
             InputVariables,
             {
               value: parameter.value,
@@ -5642,8 +5668,8 @@ function RequestParameters({
               enableEditingVariables: true
             }
           ) : null }),
-          addOmitIfEmpty ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system28.TableCellData, { width: "50%", children: parameter.key ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-            import_design_system28.Input,
+          addOmitIfEmpty ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system29.TableCellData, { width: "50%", children: parameter.key ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+            import_design_system29.Input,
             {
               type: "checkbox",
               checked: parameter.omitIfEmpty,
@@ -5668,8 +5694,8 @@ function RequestParameters({
 }
 
 // src/components/Request/RequestUrl.tsx
-var import_react56 = require("@emotion/react");
-var import_react57 = require("react");
+var import_react57 = require("@emotion/react");
+var import_react58 = require("react");
 
 // src/components/Request/urlEncodeRequestParameter.ts
 function urlEncodeRequestUrl(url, varValues) {
@@ -5695,7 +5721,7 @@ function RequestUrl() {
   var _a, _b;
   const { variables } = useVariables();
   const { request } = useRequest();
-  const mergedParameters = (0, import_react57.useMemo)(() => {
+  const mergedParameters = (0, import_react58.useMemo)(() => {
     var _a2;
     if (!((_a2 = request.baseRequest) == null ? void 0 : _a2.parameters)) {
       return request.parameters;
@@ -5705,7 +5731,7 @@ function RequestUrl() {
   return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
     "small",
     {
-      css: import_react56.css`
+      css: import_react57.css`
         display: inline-block;
         margin-bottom: var(--spacing-xs);
         word-break: break-word;
@@ -5939,16 +5965,16 @@ function convertRequestDataToDataType(dataType, requestData) {
 }
 
 // src/components/MeshApp.tsx
-var import_design_system29 = require("@uniformdev/design-system");
+var import_design_system30 = require("@uniformdev/design-system");
 
 // src/hooks/useInitializeUniformMeshSdk.ts
 var import_mesh_sdk = require("@uniformdev/mesh-sdk");
-var import_react58 = require("react");
+var import_react59 = require("react");
 var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
-  const [error, setError] = (0, import_react58.useState)();
-  const [sdk, setSdk] = (0, import_react58.useState)();
-  const initializationInProgress = (0, import_react58.useRef)(false);
-  (0, import_react58.useEffect)(
+  const [error, setError] = (0, import_react59.useState)();
+  const [sdk, setSdk] = (0, import_react59.useState)();
+  const initializationInProgress = (0, import_react59.useRef)(false);
+  (0, import_react59.useEffect)(
     () => {
       if (typeof window === "undefined" || sdk) {
         return;
@@ -5990,7 +6016,7 @@ var MeshApp = ({
   const { initializing, error, sdk } = useInitializeUniformMeshSdk();
   if (initializing || !sdk) {
     const LoadingComponent = loadingComponent;
-    return LoadingComponent ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(LoadingComponent, {}) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_design_system29.LoadingIndicator, {});
+    return LoadingComponent ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(LoadingComponent, {}) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_design_system30.LoadingIndicator, {});
   }
   if (error) {
     const ErrorComponent = errorComponent;
@@ -6000,14 +6026,14 @@ var MeshApp = ({
     throw error;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(UniformMeshSdkContext.Provider, { value: { sdk }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_design_system29.Theme, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_design_system30.Theme, {}),
     /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(UniformMeshLocationContextProvider, { children })
   ] });
 };
 
 // src/components/ObjectSearch/DataRefreshButton.tsx
-var import_react59 = require("@emotion/react");
-var import_design_system30 = require("@uniformdev/design-system");
+var import_react60 = require("@emotion/react");
+var import_design_system31 = require("@uniformdev/design-system");
 var import_jsx_runtime57 = require("@emotion/react/jsx-runtime");
 var DataRefreshButton = ({
   buttonText,
@@ -6015,11 +6041,11 @@ var DataRefreshButton = ({
   onRefreshData,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_design_system30.Button, { buttonType: "primaryInvert", onClick: onRefreshData, disabled: isLoading, ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_design_system31.Button, { buttonType: "primaryInvert", onClick: onRefreshData, disabled: isLoading, ...props, children: [
     !isLoading ? null : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-      import_design_system30.LoadingIndicator,
+      import_design_system31.LoadingIndicator,
       {
-        css: import_react59.css`
+        css: import_react60.css`
             ${isLoading ? "opacity: 0.2;" : void 0}
           `
       }
@@ -6029,15 +6055,15 @@ var DataRefreshButton = ({
 };
 
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
-var import_react61 = require("@emotion/react");
+var import_react62 = require("@emotion/react");
 var import_canvas8 = require("@uniformdev/canvas");
-var import_design_system31 = require("@uniformdev/design-system");
+var import_design_system32 = require("@uniformdev/design-system");
 
 // src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
 var import_canvas7 = require("@uniformdev/canvas");
-var import_react60 = require("react");
+var import_react61 = require("react");
 var import_jsx_runtime58 = require("@emotion/react/jsx-runtime");
-var ObjectSearchContext = (0, import_react60.createContext)({
+var ObjectSearchContext = (0, import_react61.createContext)({
   onSetQuery: () => {
   },
   onSelectItem: () => {
@@ -6052,15 +6078,15 @@ var ObjectSearchContext = (0, import_react60.createContext)({
   }
 });
 var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
-  const [query, setQuery] = (0, import_react60.useState)({
+  const [query, setQuery] = (0, import_react61.useState)({
     contentType: "",
     keyword: ""
   });
   const { flatVariables } = useVariables(true);
-  const querySearchDeferred = (0, import_react60.useDeferredValue)(query);
-  const [selectedItems, setSelectedItems] = (0, import_react60.useState)(currentlySelectedItems != null ? currentlySelectedItems : []);
-  const [list, setList] = (0, import_react60.useState)({});
-  const onSetQuery = (0, import_react60.useCallback)(
+  const querySearchDeferred = (0, import_react61.useDeferredValue)(query);
+  const [selectedItems, setSelectedItems] = (0, import_react61.useState)(currentlySelectedItems != null ? currentlySelectedItems : []);
+  const [list, setList] = (0, import_react61.useState)({});
+  const onSetQuery = (0, import_react61.useCallback)(
     (value2) => {
       if (Array.isArray(value2.contentType) && value2.contentType.length > 0) {
         return setQuery({
@@ -6072,7 +6098,7 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
     },
     [setQuery]
   );
-  const onSelectItem = (0, import_react60.useCallback)(
+  const onSelectItem = (0, import_react61.useCallback)(
     (selectedResult) => {
       if (Array.isArray(selectedResult)) {
         setSelectedItems(selectedResult);
@@ -6086,17 +6112,17 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
     },
     [setSelectedItems, selectedItems]
   );
-  const onRemoveAllSelectedItems = (0, import_react60.useCallback)(() => {
+  const onRemoveAllSelectedItems = (0, import_react61.useCallback)(() => {
     setSelectedItems([]);
   }, [setSelectedItems]);
-  const onSetList = (0, import_react60.useCallback)(
+  const onSetList = (0, import_react61.useCallback)(
     (value2) => {
       setList(value2);
     },
     [setList]
   );
-  const boundQuery = (0, import_react60.useMemo)(() => bindQuery(query, flatVariables), [query, flatVariables]);
-  const value = (0, import_react60.useMemo)(
+  const boundQuery = (0, import_react61.useMemo)(() => bindQuery(query, flatVariables), [query, flatVariables]);
+  const value = (0, import_react61.useMemo)(
     () => ({
       boundQuery,
       onSetQuery,
@@ -6121,7 +6147,7 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ObjectSearchContext.Provider, { value, children });
 };
 function useObjectSearchContext() {
-  return (0, import_react60.useContext)(ObjectSearchContext);
+  return (0, import_react61.useContext)(ObjectSearchContext);
 }
 function bindQuery(query, inputs) {
   const { result, errors } = (0, import_canvas7.bindVariablesToObject)({
@@ -6147,13 +6173,13 @@ var ObjectSearchContainer = ({
   var _a, _b;
   const { onSelectItem, selectedListItems, list } = useObjectSearchContext();
   const { flatVariables } = useVariables(true);
-  const body = /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_design_system31.VerticalRhythm, { children: [
+  const body = /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_design_system32.VerticalRhythm, { children: [
     searchFilters,
     !resultList ? null : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-      import_design_system31.ScrollableList,
+      import_design_system32.ScrollableList,
       {
         role: "list",
-        css: import_react61.css`
+        css: import_react62.css`
             > div {
               transition: max-height var(--duration-slow) var(--timing-ease-out);
               max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
@@ -6190,8 +6216,8 @@ var ObjectSearchContainer = ({
       }
     ]);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_design_system31.IconsProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_design_system31.VerticalRhythm, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_design_system31.Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_design_system32.IconsProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_design_system32.VerticalRhythm, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_design_system32.Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       InputVariables,
       {
         label,
@@ -6206,12 +6232,12 @@ var ObjectSearchContainer = ({
 };
 
 // src/components/ObjectSearch/ObjectSearchFilter.tsx
-var import_design_system32 = require("@uniformdev/design-system");
-var import_react63 = require("react");
+var import_design_system33 = require("@uniformdev/design-system");
+var import_react64 = require("react");
 
 // src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
-var import_react62 = require("@emotion/react");
-var ObjectSearchFilterContainerLabel = import_react62.css`
+var import_react63 = require("@emotion/react");
+var ObjectSearchFilterContainerLabel = import_react63.css`
   align-items: center;
   display: flex;
   font-size: var(--fs-sm);
@@ -6219,14 +6245,14 @@ var ObjectSearchFilterContainerLabel = import_react62.css`
   line-height: 1rem;
   margin-bottom: var(--spacing-sm);
 `;
-var ObjectSearchFilterContainer = import_react62.css`
+var ObjectSearchFilterContainer = import_react63.css`
   display: grid;
   gap: var(--spacing-base);
 `;
-var ObjectSearchFilterDropdownAndTextSearch = import_react62.css`
+var ObjectSearchFilterDropdownAndTextSearch = import_react63.css`
   grid-template-columns: 0.5fr 1fr;
 `;
-var ObjectSearchFilterGrid = (gridColumns) => import_react62.css`
+var ObjectSearchFilterGrid = (gridColumns) => import_react63.css`
   display: grid;
   grid-template-columns: ${gridColumns};
   gap: var(--spacing-base);
@@ -6243,7 +6269,7 @@ var ObjectSearchFilter = ({
   selectOptions
 }) => {
   const { query, onSetQuery } = useObjectSearchContext();
-  const [searchState, setSearchState] = (0, import_react63.useState)({
+  const [searchState, setSearchState] = (0, import_react64.useState)({
     contentType: "",
     keyword: ""
   });
@@ -6255,7 +6281,7 @@ var ObjectSearchFilter = ({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("fieldset", { css: [ObjectSearchFilterContainer, ObjectSearchFilterDropdownAndTextSearch], children: [
     /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-      import_design_system32.InputSelect,
+      import_design_system33.InputSelect,
       {
         label: selectLabel,
         showLabel: false,
@@ -6271,7 +6297,7 @@ var ObjectSearchFilter = ({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-      import_design_system32.InputKeywordSearch,
+      import_design_system33.InputKeywordSearch,
       {
         inputFieldName: searchInputName,
         placeholder: searchInputPlaceholderText,
@@ -6294,12 +6320,12 @@ var ObjectSearchFilterContainer2 = ({ label, children }) => {
 };
 
 // src/components/ObjectSearch/ObjectSearchListItem.tsx
-var import_design_system34 = require("@uniformdev/design-system");
+var import_design_system35 = require("@uniformdev/design-system");
 
 // src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
-var import_react64 = require("@emotion/react");
-var import_design_system33 = require("@uniformdev/design-system");
-var ObjectListItemContainer = import_react64.css`
+var import_react65 = require("@emotion/react");
+var import_design_system34 = require("@uniformdev/design-system");
+var ObjectListItemContainer = import_react65.css`
   align-items: center;
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -6308,12 +6334,12 @@ var ObjectListItemContainer = import_react64.css`
   grid-template-columns: 1fr auto;
   padding: var(--spacing-sm);
 `;
-var ObjectListItemContainerDisabled = import_react64.css`
+var ObjectListItemContainerDisabled = import_react65.css`
   opacity: var(--opacity-50);
   pointer-events: none;
 `;
-var ObjectListItemLoading = import_react64.css`
-  animation: ${import_design_system33.skeletonLoading} 1s linear infinite alternate;
+var ObjectListItemLoading = import_react65.css`
+  animation: ${import_design_system34.skeletonLoading} 1s linear infinite alternate;
   border-color: transparent;
   min-height: 42px;
   position: relative;
@@ -6336,32 +6362,32 @@ var ObjectListItemLoading = import_react64.css`
     width: 1rem;
   }
 `;
-var ObjectListItemHeadingGroup = import_react64.css`
+var ObjectListItemHeadingGroup = import_react65.css`
   align-items: center;
   display: grid;
 `;
-var ObjectListItemTitle = import_react64.css`
+var ObjectListItemTitle = import_react65.css`
   color: var(--brand-secondary-1);
   display: block;
   font-size: var(--fs-sm);
 `;
-var ObjectListItemSubtitle = import_react64.css`
+var ObjectListItemSubtitle = import_react65.css`
   color: var(--gray-500);
   display: block;
   font-size: var(--fs-xs);
   line-height: 1;
 `;
-var ObjectListItemInfoContainer = import_react64.css`
+var ObjectListItemInfoContainer = import_react65.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   justify-content: center;
 `;
-var ObjectListItemControlledContent = import_react64.css`
+var ObjectListItemControlledContent = import_react65.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectListItemUnControlledContent = import_react64.css`
+var ObjectListItemUnControlledContent = import_react65.css`
   margin-top: var(--spacing-sm);
   grid-column: 1 / -1;
 `;
@@ -6414,8 +6440,8 @@ var ObjectSearchListItem = ({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { css: ObjectListItemInfoContainer, children: [
-          selected ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_design_system34.Chip, { text: "selected", size: "xs" }) : null,
-          !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_design_system34.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
+          selected ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_design_system35.Chip, { text: "selected", size: "xs" }) : null,
+          !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_design_system35.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
         ] }),
         !children ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { css: ObjectListItemUnControlledContent, children })
       ]
@@ -6427,14 +6453,14 @@ var ObjectSearchListItemLoadingSkeleton = () => {
 };
 
 // src/components/ObjectSearch/ObjectSearchResultItem.tsx
-var import_design_system36 = require("@uniformdev/design-system");
+var import_design_system37 = require("@uniformdev/design-system");
 var import_timeago3 = require("timeago.js");
 
 // src/components/ObjectSearch/styles/ObjectSearchResultItemButton.styles.ts
-var import_react65 = require("@emotion/react");
-var import_design_system35 = require("@uniformdev/design-system");
-var ButtonStyles = import_react65.css`
-  ${import_design_system35.button}
+var import_react66 = require("@emotion/react");
+var import_design_system36 = require("@uniformdev/design-system");
+var ButtonStyles = import_react66.css`
+  ${import_design_system36.button}
   background: transparent;
   border: 1px solid var(--brand-secondary-1);
   color: var(--brand-secondary-1);
@@ -6460,7 +6486,7 @@ var ButtonStyles = import_react65.css`
     text-decoration: none;
   }
 `;
-var ButtonIcon = import_react65.css`
+var ButtonIcon = import_react66.css`
   width: 1rem;
   height: 1rem;
 `;
@@ -6489,8 +6515,8 @@ var LinkButton = ({
 };
 
 // src/components/ObjectSearch/styles/ObjectSearchResultItem.styles.ts
-var import_react66 = require("@emotion/react");
-var ObjectSearchResultItemContainer = import_react66.css`
+var import_react67 = require("@emotion/react");
+var ObjectSearchResultItemContainer = import_react67.css`
   align-items: center;
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -6506,7 +6532,7 @@ var ObjectSearchResultItemContainer = import_react66.css`
     }
   }
 `;
-var ObjectSearchDragHandle = import_react66.css`
+var ObjectSearchDragHandle = import_react67.css`
   border-left: 2px dotted var(--gray-300);
   border-right: 2px dotted var(--gray-300);
   position: absolute;
@@ -6515,35 +6541,35 @@ var ObjectSearchDragHandle = import_react66.css`
   transition: opacity var(--duration-fast) var(--timing-ease-out);
   opacity: 0;
 `;
-var ObjectSearchResultItemSubtitle = import_react66.css`
+var ObjectSearchResultItemSubtitle = import_react67.css`
   color: var(--gray-500);
   display: block;
   font-size: var(--fs-xs);
   line-height: 1;
 `;
-var ObjectSearchResultItemTitle = import_react66.css`
+var ObjectSearchResultItemTitle = import_react67.css`
   align-items: center;
   color: var(--brand-secondary-1);
   display: flex;
   gap: var(--spacing-xs);
 `;
-var ObjectSearchResultItemTimeStamp = import_react66.css`
+var ObjectSearchResultItemTimeStamp = import_react67.css`
   color: var(--gray-500);
   font-size: var(--fs-xs);
 `;
-var ObjectSearchAuthorStateGroup = import_react66.css`
+var ObjectSearchAuthorStateGroup = import_react67.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectSearchUpdateGroup = import_react66.css`
+var ObjectSearchUpdateGroup = import_react67.css`
   display: grid;
 `;
-var ObjectSearchContentContainer = import_react66.css`
+var ObjectSearchContentContainer = import_react67.css`
   display: flex;
   gap: var(--spacing-base);
 `;
-var ObjectSearchImage = import_react66.css`
+var ObjectSearchImage = import_react67.css`
   width: 56px;
   object-fit: contain;
 `;
@@ -6581,10 +6607,10 @@ var ObjectSearchResultItem = ({
         /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { css: ObjectSearchResultItemSubtitle, children: formatedContentType }),
         /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { role: "heading", css: ObjectSearchResultItemTitle, children: [
           title != null ? title : name,
-          !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_design_system36.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
+          !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_design_system37.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
         ] }),
         !createdAt && !publishStatus ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { css: ObjectSearchAuthorStateGroup, children: [
-          !(publishStatus == null ? void 0 : publishStatus.text) ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_design_system36.Badge, { ...publishStatus, size: "sm", uppercaseText: true }),
+          !(publishStatus == null ? void 0 : publishStatus.text) ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_design_system37.Badge, { ...publishStatus, size: "sm", uppercaseText: true }),
           !createdAt && !publishedAt ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { css: ObjectSearchUpdateGroup, children: [
             !createdAt ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("small", { css: ObjectSearchResultItemTimeStamp, children: [
               /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("strong", { children: "Last updated: " }),
@@ -6601,36 +6627,36 @@ var ObjectSearchResultItem = ({
     ] }) }),
     !editLink && hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { css: ObjectSearchAuthorStateGroup, children: [
       !editLink ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(LinkButton, { text: "Edit", href: editLink, icon: editLinkIcon }),
-      hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_design_system36.Button, { buttonType: "ghostDestructive", onClick: onRemoveItem, children: "Remove" })
+      hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_design_system37.Button, { buttonType: "ghostDestructive", onClick: onRemoveItem, children: "Remove" })
     ] })
   ] });
 };
 
 // src/components/ObjectSearch/ObjectSearchResultList.tsx
-var import_design_system37 = require("@uniformdev/design-system");
+var import_design_system38 = require("@uniformdev/design-system");
 var import_react_beautiful_dnd3 = require("react-beautiful-dnd");
 
 // src/components/ObjectSearch/styles/ObjectSearchResultList.styles.ts
-var import_react67 = require("@emotion/react");
-var ObjectSearchResultListContainer = import_react67.css`
+var import_react68 = require("@emotion/react");
+var ObjectSearchResultListContainer = import_react68.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   justify-content: space-between;
 `;
-var ObjectSearchDragContainer = import_react67.css`
+var ObjectSearchDragContainer = import_react68.css`
   margin: 0 0 var(--spacing-sm);
 `;
-var ObjectSearchContainerDragging = import_react67.css`
+var ObjectSearchContainerDragging = import_react68.css`
   box-shadow: var(--shadow-base);
   opacity: var(--opacity-50);
 `;
-var ObjectSearchResultListCounterContainer = import_react67.css`
+var ObjectSearchResultListCounterContainer = import_react68.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectSearchResultListTitle = import_react67.css`
+var ObjectSearchResultListTitle = import_react68.css`
   font-weight: var(--fw-bold);
   line-height: 1;
 `;
@@ -6668,12 +6694,12 @@ function ObjectSearchResultList({
       /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
         /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { css: ObjectSearchResultListTitle, children: resultLabelText }),
         " ",
-        !selectedListItems.length ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_design_system37.Counter, { count: selectedListItems.length })
+        !selectedListItems.length ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_design_system38.Counter, { count: selectedListItems.length })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { css: ObjectSearchResultListCounterContainer, children: [
         additionalButtons,
         hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-          import_design_system37.Button,
+          import_design_system38.Button,
           {
             buttonType: "ghostDestructive",
             size: "xs",
@@ -6718,8 +6744,8 @@ function ObjectSearchResultList({
 }
 
 // src/components/ObjectSearch/QueryFilter.tsx
-var import_design_system38 = require("@uniformdev/design-system");
-var import_react68 = require("react");
+var import_design_system39 = require("@uniformdev/design-system");
+var import_react69 = require("react");
 var import_jsx_runtime66 = require("@emotion/react/jsx-runtime");
 var QueryFilter = ({
   requireContentType,
@@ -6751,7 +6777,7 @@ var QueryFilter = ({
 }) => {
   var _a, _b, _c, _d;
   const { query, onSetQuery } = useObjectSearchContext();
-  const [queryState, setQueryState] = (0, import_react68.useState)({
+  const [queryState, setQueryState] = (0, import_react69.useState)({
     contentType: "",
     keyword: "",
     count: countValue != null ? countValue : 5,
@@ -6762,12 +6788,12 @@ var QueryFilter = ({
     setQueryState((prev) => ({ ...prev, ...value }));
     onSetQuery({ ...query, ...value });
   };
-  (0, import_react68.useEffect)(() => {
+  (0, import_react69.useEffect)(() => {
     onSetQuery(queryState);
   }, [onSetQuery, queryState]);
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("fieldset", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { css: ObjectSearchFilterContainerLabel, children: queryFilterTitle }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { css: ObjectSearchFilterContainer, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_design_system38.VerticalRhythm, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { css: ObjectSearchFilterContainer, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_design_system39.VerticalRhythm, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
         InputVariables,
         {
@@ -6777,7 +6803,7 @@ var QueryFilter = ({
           disableInlineMenu: true,
           id: "qf_searchText",
           inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-            import_design_system38.InputKeywordSearch,
+            import_design_system39.InputKeywordSearch,
             {
               id: "qf_searchText",
               inputFieldName: searchInputName,
@@ -6800,7 +6826,7 @@ var QueryFilter = ({
             onChange: (newType) => handleFilterChange({ contentType: newType }),
             disableInlineMenu: true,
             inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-              import_design_system38.InputSelect,
+              import_design_system39.InputSelect,
               {
                 id: "qf_contentType",
                 label: contentTypeLabel,
@@ -6827,7 +6853,7 @@ var QueryFilter = ({
             onChange: (newCount) => handleFilterChange({ count: newCount }),
             disableInlineMenu: true,
             inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-              import_design_system38.Input,
+              import_design_system39.Input,
               {
                 id: "qf_count",
                 label: countLabel,
@@ -6851,7 +6877,7 @@ var QueryFilter = ({
             onChange: (newSortBy) => handleFilterChange({ sortBy: newSortBy }),
             disableInlineMenu: true,
             inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-              import_design_system38.InputSelect,
+              import_design_system39.InputSelect,
               {
                 label: sortLabel,
                 id: "qf_sortBy",
@@ -6881,7 +6907,7 @@ var QueryFilter = ({
             onChange: (newSort) => handleFilterChange({ sortOrder: newSort }),
             disableInlineMenu: true,
             inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-              import_design_system38.InputSelect,
+              import_design_system39.InputSelect,
               {
                 label: sortOrderLabel,
                 id: "qf_sortOrder",
@@ -6905,7 +6931,7 @@ var QueryFilter = ({
 };
 
 // src/components/ParamTypeDynamicDataProvider.tsx
-var import_react69 = require("react");
+var import_react70 = require("react");
 var import_jsx_runtime67 = require("@emotion/react/jsx-runtime");
 function ParamTypeDynamicDataProvider(props) {
   const { children } = props;
@@ -6914,7 +6940,7 @@ function ParamTypeDynamicDataProvider(props) {
   } = useMeshLocation("paramType");
   const dynamicInputsAsVariables = useDynamicInputsAsVariables(dynamicInputs);
   const connectedDataAsVariables = useConnectedDataAsVariables(connectedData);
-  const variables = (0, import_react69.useMemo)(
+  const variables = (0, import_react70.useMemo)(
     () => ({ ...connectedDataAsVariables, ...dynamicInputsAsVariables }),
     [dynamicInputsAsVariables, connectedDataAsVariables]
   );
@@ -6927,9 +6953,9 @@ var JsonMeshVariableEditor = ({
   variable,
   context
 }) => {
-  const sillyRef = (0, import_react69.useRef)(false);
+  const sillyRef = (0, import_react70.useRef)(false);
   const { editConnectedData } = useMeshLocation("paramType");
-  (0, import_react69.useEffect)(() => {
+  (0, import_react70.useEffect)(() => {
     if (sillyRef.current) {
       return;
     }
@@ -6966,7 +6992,7 @@ function createLocationValidator(setValue, validate) {
 }
 
 // src/index.ts
-var import_design_system39 = require("@uniformdev/design-system");
+var import_design_system40 = 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 = {