@camunda/task-testing 0.2.3 → 0.2.5

package/dist/index.js

@@ -33,8 +33,8 @@ class ElementConfig extends (events__WEBPACK_IMPORTED_MODULE_0___default()) {
     this._injector = injector;
     this._elementVariables = elementVariables;
 
-    /**
-     * @type {import('./types').Config}
+    /**
+     * @type {import('./types').Config}
      */
     this._config = {
       ...DEFAULT_CONFIG,
@@ -108,9 +108,9 @@ class ElementConfig extends (events__WEBPACK_IMPORTED_MODULE_0___default()) {
     return this._config.input[element.id];
   }
 
-  /**
-   * @param {import('./types').Element} element
-   * @returns {import('./types').ElementOutput}
+  /**
+   * @param {import('./types').Element} element
+   * @returns {import('./types').ElementOutput}
    */
   getOutputConfigForElement(element) {
     if (!(0,bpmn_js_lib_util_ModelUtil__WEBPACK_IMPORTED_MODULE_1__.isAny)(element, SUPPORTED_ELEMENT_TYPES)) {
@@ -127,12 +127,12 @@ class ElementConfig extends (events__WEBPACK_IMPORTED_MODULE_0___default()) {
   }
 }
 
-/**
- * Get input parameters from a BPMN element.
- *
- * @param {import('./types').Element} element
- *
- * @returns {import('./types').ModdleElement[]}
+/**
+ * Get input parameters from a BPMN element.
+ *
+ * @param {import('./types').Element} element
+ *
+ * @returns {import('./types').ModdleElement[]}
  */
 function getInputParameters(element) {
   const businessObject = (0,bpmn_js_lib_util_ModelUtil__WEBPACK_IMPORTED_MODULE_1__.getBusinessObject)(element);
@@ -151,20 +151,20 @@ function getInputParameters(element) {
   return ioMapping.get('inputParameters');
 }
 
-/**
- * Unflatten an object with dot notation keys into a nested object.
- *
- * Example:
- *
- * ```
- * unflatten({
- *   'foo.bar': 'baz'
- * }) // returns { foo: { bar: 'baz' } }
- * ```
- *
- * @param {Object} obj
- *
- * @returns {Object}
+/**
+ * Unflatten an object with dot notation keys into a nested object.
+ *
+ * Example:
+ *
+ * ```
+ * unflatten({
+ *   'foo.bar': 'baz'
+ * }) // returns { foo: { bar: 'baz' } }
+ * ```
+ *
+ * @param {Object} obj
+ *
+ * @returns {Object}
  */
 function unflatten(obj) {
   const result = {};
@@ -183,16 +183,16 @@ function unflatten(obj) {
   return result;
 }
 
-/**
- * Create default input config for a BPMN element.
- *
- * @todo Only simple input parameter sources can be handled until
- * https://github.com/bpmn-io/internal-docs/issues/1218 is implemented.
- *
- * @param {import('./types').Element} element
- * @param {import('./types').Variable[]} variablesForElement
- *
- * @returns {string}
+/**
+ * Create default input config for a BPMN element.
+ *
+ * @todo Only simple input parameter sources can be handled until
+ * https://github.com/bpmn-io/internal-docs/issues/1218 is implemented.
+ *
+ * @param {import('./types').Element} element
+ * @param {import('./types').Variable[]} variablesForElement
+ *
+ * @returns {string}
  */
 function createDefaultInputConfig(element, variablesForElement) {
   const inputParameters = getInputParameters(element);
@@ -234,18 +234,18 @@ function createDefaultInputConfig(element, variablesForElement) {
   return JSON.stringify(unflatten(foundVariables), null, 2);
 }
 
-/**
- * Get the name from a source string.
- *
- * @example
- *
- * getNameFromSource('=foo') // 'foo'
- * getNameFromSource('=foo + bar') // null
- * getNameFromSource('= 1 + 2') // null
- *
- * @param {string} source
- *
- * @returns {string|null}
+/**
+ * Get the name from a source string.
+ *
+ * @example
+ *
+ * getNameFromSource('=foo') // 'foo'
+ * getNameFromSource('=foo + bar') // null
+ * getNameFromSource('= 1 + 2') // null
+ *
+ * @param {string} source
+ *
+ * @returns {string|null}
  */
 function getNameFromSource(source) {
   if (source && isFeel(source)) {
@@ -257,36 +257,36 @@ function getNameFromSource(source) {
   return null;
 }
 
-/**
- * Check if a source string is a FEEL expression.
- *
- * @example
- *
- * isFeel('=foo') // true
- * isFeel('= 1 + 2') // true
- * isFeel('foo') // false
- *
- * @param {string} source
- *
- * @returns {boolean}
+/**
+ * Check if a source string is a FEEL expression.
+ *
+ * @example
+ *
+ * isFeel('=foo') // true
+ * isFeel('= 1 + 2') // true
+ * isFeel('foo') // false
+ *
+ * @param {string} source
+ *
+ * @returns {boolean}
  */
 function isFeel(source) {
   return !!source && source.startsWith('=');
 }
 
-/**
- * Check if a source string is a boolean FEEL expression.
- *
- * @example
- *
- * isBoolean('=true') // true
- * isBoolean('= false') // true
- * isBoolean('=foo') // false
- * isBoolean('=1 + 2') // false
- *
- * @param {string} source
- *
- * @return {boolean}
+/**
+ * Check if a source string is a boolean FEEL expression.
+ *
+ * @example
+ *
+ * isBoolean('=true') // true
+ * isBoolean('= false') // true
+ * isBoolean('=foo') // false
+ * isBoolean('=1 + 2') // false
+ *
+ * @param {string} source
+ *
+ * @return {boolean}
  */
 function isBoolean(source) {
   return !!source && /^=\s*(true|false)\s*$/i.test(source);
@@ -352,33 +352,33 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var events__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! events */ "./node_modules/events/events.js");
 /* harmony import */ var events__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(events__WEBPACK_IMPORTED_MODULE_0__);
-/**
- * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
- * under one or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information regarding copyright
- * ownership.
- *
- * Camunda licenses this file to you under the MIT; you may not use this file
- * except in compliance with the MIT License.
+/**
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information regarding copyright
+ * ownership.
+ *
+ * Camunda licenses this file to you under the MIT; you may not use this file
+ * except in compliance with the MIT License.
  */
 
 
 const INTERVAL_MS = 1000;
 
-/**
- * @import { TaskExecutionApi, TaskExecutionResult, TaskExecutionError, TaskExecutionStatus } from './types';
+/**
+ * @import { TaskExecutionApi, TaskExecutionResult, TaskExecutionError, TaskExecutionStatus } from './types';
  */
 
-/**
- * Emits:
- * - `taskExecution.status.changed` with one of {@link TaskExecutionStatus}
- * - `taskExecution.finished` with {@link TaskExecutionResult}
- * - `taskExecution.error` with {@link TaskExecutionError}
+/**
+ * Emits:
+ * - `taskExecution.status.changed` with one of {@link TaskExecutionStatus}
+ * - `taskExecution.finished` with {@link TaskExecutionResult}
+ * - `taskExecution.error` with {@link TaskExecutionError}
  */
 class TaskExecution extends (events__WEBPACK_IMPORTED_MODULE_0___default()) {
-  /**
-   * @param {Object} injector
-   * @param {TaskExecutionApi} api
+  /**
+   * @param {Object} injector
+   * @param {TaskExecutionApi} api
    */
   constructor(injector, api) {
     super();
@@ -392,20 +392,19 @@ class TaskExecution extends (events__WEBPACK_IMPORTED_MODULE_0___default()) {
     const eventBus = injector.get('eventBus');
     eventBus.on(['selection.changed', 'commandStack.changed'], () => {
       if (this._status !== 'idle') {
-        console.log('Interrupting task execution in TaskExecution');
         this.emit('taskExecution.interrupted');
       }
       this.cancelTaskExecution();
     });
   }
 
-  /**
-   * Start task execution.
-   *
-   * @param {string} elementId
-   * @param {Object} variables
-   *
-   * @returns {Promise<void>}
+  /**
+   * Start task execution.
+   *
+   * @param {string} elementId
+   * @param {Object} variables
+   *
+   * @returns {Promise<void>}
    */
   async executeTask(elementId, variables) {
     this._changeStatus('deploying');
@@ -499,8 +498,8 @@ class TaskExecution extends (events__WEBPACK_IMPORTED_MODULE_0___default()) {
     this._interval = setInterval(intervalCallback, INTERVAL_MS);
   }
 
-  /**
-   * Cancel current task execution, clean up and change status to `idle`.
+  /**
+   * Cancel current task execution, clean up and change status to `idle`.
    */
   async cancelTaskExecution() {
     // TODO: Proper clean up:
@@ -514,11 +513,11 @@ class TaskExecution extends (events__WEBPACK_IMPORTED_MODULE_0___default()) {
     this._changeStatus('idle');
   }
 
-  /**
-   * Emit `taskExecution.error` event.
-   *
-   * @param {string} message
-   * @param {any} [response]
+  /**
+   * Emit `taskExecution.error` event.
+   *
+   * @param {string} message
+   * @param {any} [response]
    */
   _emitError(message, response) {
     /** @type {import('./types').TaskExecutionError} */
@@ -539,12 +538,12 @@ class TaskExecution extends (events__WEBPACK_IMPORTED_MODULE_0___default()) {
   }
 }
 
-/**
- * Get the process ID from the deployment response.
- *
- * @param {import('./types').DeploymentResponse} [response]
- *
- * @returns {string|null} The process ID or null if not found.
+/**
+ * Get the process ID from the deployment response.
+ *
+ * @param {import('./types').DeploymentResponse} [response]
+ *
+ * @returns {string|null} The process ID or null if not found.
  */
 function getProcessId(response) {
   if (!response) {
@@ -561,12 +560,12 @@ function getProcessId(response) {
   return null;
 }
 
-/**
- * Get the process instance key from the response.
- *
- * @param {import('./types').StartInstanceResponse} [response]
- *
- * @returns {string|null} The process instance key or null if not found.
+/**
+ * Get the process instance key from the response.
+ *
+ * @param {import('./types').StartInstanceResponse} [response]
+ *
+ * @returns {string|null} The process instance key or null if not found.
  */
 function getProcessInstanceKey(response) {
   if (!response) {
@@ -770,21 +769,21 @@ function InputEditor({
       value
     }));
 
-    /**
-     * @type {import('@codemirror/autocomplete').Completion[]}
+    /**
+     * @type {import('@codemirror/autocomplete').Completion[]}
      */
     const result = [...variablesForElementAutocompletions, ...outputVariablesAutocompletions];
     return result;
   }, [allOutputs, variablesForElement]);
   const ref = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
 
-  /**
-   * @type {ReturnType<typeof useState<EditorView>>}
+  /**
+   * @type {ReturnType<typeof useState<EditorView>>}
    */
   const [editorView, setEditorView] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();
 
-  /**
-   * @type {ReturnType<typeof useState<string?>>}
+  /**
+   * @type {ReturnType<typeof useState<string?>>}
    */
   const [error, setError] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
@@ -892,19 +891,19 @@ function getAllOutputVariables(allOutputs) {
   return allOutputVariables;
 }
 
-/**
- * Get a string representation of the type of a value.
- *
- * @example
- *
- * getDetail('foo') // String
- * getDetail(1337) // Number
- * getDetail(true) // Boolean
- * getDetail({}) // Object
- *
- * @param {any} value
- *
- * @return {string}
+/**
+ * Get a string representation of the type of a value.
+ *
+ * @example
+ *
+ * getDetail('foo') // String
+ * getDetail(1337) // Number
+ * getDetail(true) // Boolean
+ * getDetail({}) // Object
+ *
+ * @param {any} value
+ *
+ * @return {string}
  */
 function getDetail(value) {
   const type = typeof value;
@@ -949,17 +948,17 @@ const TASK_EXECUTION_STATUS_LABEL = {
   executing: 'Waiting for task to be completed...'
 };
 
-/**
- * @param {Object} props
- * @param {boolean} props.isConnectionConfigured
- * @param {string} [props.configureConnectionBannerTitle]
- * @param {string} [props.configureConnectionBannerDescription]
- * @param {string} [props.configureConnectionLabel]
- * @param {Function} [props.onConfigureConnection]
- * @param {boolean} props.isTaskExecuting
- * @param {import('../../types').ElementOutput} props.output
- * @param {Function} props.onResetOutput
- * @param {import('../../types').TaskExecutionStatus} props.taskExecutionStatus
+/**
+ * @param {Object} props
+ * @param {boolean} props.isConnectionConfigured
+ * @param {string} [props.configureConnectionBannerTitle]
+ * @param {string} [props.configureConnectionBannerDescription]
+ * @param {string} [props.configureConnectionLabel]
+ * @param {Function} [props.onConfigureConnection]
+ * @param {boolean} props.isTaskExecuting
+ * @param {import('../../types').ElementOutput} props.output
+ * @param {Function} props.onResetOutput
+ * @param {import('../../types').TaskExecutionStatus} props.taskExecutionStatus
  */
 function Output({
   isConnectionConfigured,
@@ -991,6 +990,7 @@ function Output({
     });
   }, [output, isTaskExecuting, isConnectionConfigured]);
   const showResetButton = isConnectionConfigured && ((output === null || output === void 0 ? void 0 : output.success) || (output === null || output === void 0 ? void 0 : output.error) || (output === null || output === void 0 ? void 0 : output.incident));
+  const showOperateUrl = isConnectionConfigured && (output === null || output === void 0 ? void 0 : output.operateUrl);
   const headerText = isTaskExecuting ? TASK_EXECUTION_STATUS_LABEL[taskExecutionStatus] : 'Results';
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", {
     className: "output",
@@ -1010,7 +1010,7 @@ function Output({
         tooltipPosition: "right",
         iconDescription: "Reset output",
         children: "Reset"
-      }), (output === null || output === void 0 ? void 0 : output.operateUrl) && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.Link, {
+      }), showOperateUrl && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.Link, {
         href: output.operateUrl,
         target: "_blank",
         className: "output__header--button-operate",
@@ -1137,14 +1137,14 @@ function OutputVariables({
   });
 }
 
-/**
- *
- * @param {Object} props
- * @param {string} props.title
- * @param {string} props.description
- * @param {string} [props.actionLabel]
- * @param {string} [props.actionUrl]
- * @param {Function} [props.onActionClick]
+/**
+ *
+ * @param {Object} props
+ * @param {string} props.title
+ * @param {string} props.description
+ * @param {string} [props.actionLabel]
+ * @param {string} [props.actionUrl]
+ * @param {Function} [props.onActionClick]
  */
 function ErrorBanner({
   title,
@@ -1176,12 +1176,12 @@ function ErrorBanner({
   });
 }
 
-/**
- * Print the details of an incident.
- *
- * @param {Object} incident
- *
- * @returns {string}
+/**
+ * Print the details of an incident.
+ *
+ * @param {Object} incident
+ *
+ * @returns {string}
  */
 function printIncident(incident) {
   let text = '';
@@ -1191,16 +1191,16 @@ function printIncident(incident) {
   return text;
 }
 
-/**
- * Capitalize a string, adding spaces before capital letters.
- *
- * @example
- *
- * capitalize('fooBar'); // Foo Bar
- *
- * @param {string} string
- *
- * @returns {string}
+/**
+ * Capitalize a string, adding spaces before capital letters.
+ *
+ * @example
+ *
+ * capitalize('fooBar'); // Foo Bar
+ *
+ * @param {string} string
+ *
+ * @returns {string}
  */
 function capitalize(string) {
   return string.replace(/([A-Z])/g, ' $1').replace(/^./, match => match.toUpperCase());
@@ -1239,8 +1239,8 @@ function OutputEditor({
 }) {
   const ref = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
 
-  /**
-   * @type {ReturnType<typeof useState<EditorView>>}
+  /**
+   * @type {ReturnType<typeof useState<EditorView>>}
    */
   const [editorView, setEditorView] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
@@ -1335,23 +1335,24 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-const NO_ELEMENT_TEXT = 'Select a task to start testing';
+const NO_ELEMENT_TEXT = 'Select a task to start testing.';
 
-/**
- * @param {Object} props
- * @param {Object} props.injector
- * @param {import('../../types').TaskExecutionApi} props.api
- * @param {boolean} props.isConnectionConfigured
- * @param {string} [props.configureConnectionBannerTitle]
- * @param {string} [props.configureConnectionBannerDescription]
- * @param {string} [props.configureConnectionLabel]
- * @param {Function} [props.onConfigureConnection]
- * @param {import('../../types').Config|undefined} [props.config]
- * @param {Function} [props.onConfigChanged=() => {}]
- * @param {string} [props.operateBaseUrl]
- * @param {Function} [props.onTaskExecutionStarted=() => {}]
- * @param {Function} [props.onTaskExecutionFinished=() => {}]
- * @param {Function} [props.onTaskExecutionInterrupted=() => {}]
+/**
+ * @param {Object} props
+ * @param {Object} props.injector
+ * @param {import('../../types').TaskExecutionApi} props.api
+ * @param {boolean} props.isConnectionConfigured
+ * @param {string} [props.configureConnectionBannerTitle]
+ * @param {string} [props.configureConnectionBannerDescription]
+ * @param {string} [props.configureConnectionLabel]
+ * @param {Function} [props.onConfigureConnection]
+ * @param {import('../../types').Config|undefined} [props.config]
+ * @param {Function} [props.onConfigChanged=() => {}]
+ * @param {string} [props.operateBaseUrl]
+ * @param {string} [props.documentationUrl]
+ * @param {Function} [props.onTaskExecutionStarted=() => {}]
+ * @param {Function} [props.onTaskExecutionFinished=() => {}]
+ * @param {Function} [props.onTaskExecutionInterrupted=() => {}]
  */
 function TaskTesting({
   injector,
@@ -1364,41 +1365,42 @@ function TaskTesting({
   config,
   onConfigChanged = () => {},
   operateBaseUrl,
+  documentationUrl,
   onTaskExecutionStarted = () => {},
   onTaskExecutionFinished = () => {},
   onTaskExecutionInterrupted = () => {}
 }) {
-  /**
-   * @type {React.RefObject<ElementVariables?>}
+  /**
+   * @type {React.RefObject<ElementVariables?>}
    */
   const elementVariablesRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
 
-  /**
-   * @type {React.RefObject<ElementConfig?>}
+  /**
+   * @type {React.RefObject<ElementConfig?>}
    */
   const elementConfigRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
   const [variablesForElement, setVariablesForElement] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]);
 
-  /**
-   * @type {ReturnType<typeof useState<import('../../types').TaskExecutionStatus>>}
+  /**
+   * @type {ReturnType<typeof useState<import('../../types').TaskExecutionStatus>>}
    */
   const [taskExecutionStatus, setTaskExecutionStatus] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();
 
-  /**
-   * @type {ReturnType<typeof useState<string>>}
+  /**
+   * @type {ReturnType<typeof useState<string>>}
    */
   const [input, setInput] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();
 
-  /**
-   * @type {ReturnType<typeof useState<import('../../types').ElementOutput>>}
+  /**
+   * @type {ReturnType<typeof useState<import('../../types').ElementOutput>>}
    */
   const [output, setOutput] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();
   const [allOutputs, setAllOutputs] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({});
   const [inputError, setInputError] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
   const element = (0,_hooks_useSelectedElement__WEBPACK_IMPORTED_MODULE_4__.useSelectedElement)(injector);
 
-  /**
-   * @type {React.RefObject<TaskExecution?>}
+  /**
+   * @type {React.RefObject<TaskExecution?>}
    */
   const taskExecutionRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
 
@@ -1477,9 +1479,9 @@ function TaskTesting({
       });
     };
 
-    /**
-     * @param {import('../../types').TaskExecutionStatus} status
-     * @param {string} [processInstanceKey]
+    /**
+     * @param {import('../../types').TaskExecutionStatus} status
+     * @param {string} [processInstanceKey]
      */
     const handleStatusChange = (status, processInstanceKey) => {
       setTaskExecutionStatus(status);
@@ -1505,7 +1507,6 @@ function TaskTesting({
       onTaskExecutionFinished(element, output);
     };
     const handleInterrupted = () => {
-      console.log('interrrrrrupted');
       onTaskExecutionInterrupted();
     };
     taskExecutionRef === null || taskExecutionRef === void 0 || (_taskExecutionRef$cur = taskExecutionRef.current) === null || _taskExecutionRef$cur === void 0 || _taskExecutionRef$cur.on('taskExecution.finished', handleFinished);
@@ -1585,8 +1586,12 @@ function TaskTesting({
       className: "task-testing__container task-testing__container--empty",
       children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("div", {
         className: "task-testing__container-no-element",
-        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_carbon_icons_react__WEBPACK_IMPORTED_MODULE_2__.Cursor_1, {}), " ", /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("span", {
+        children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_carbon_icons_react__WEBPACK_IMPORTED_MODULE_2__.Cursor_1, {}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("span", {
           children: NO_ELEMENT_TEXT
+        }), documentationUrl && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(_carbon_react__WEBPACK_IMPORTED_MODULE_1__.Link, {
+          href: documentationUrl,
+          target: "_blank",
+          children: "Learn more."
         })]
       })
     });
@@ -1782,11 +1787,11 @@ __webpack_require__.r(__webpack_exports__);
 
 const SUPPORTED_ELEMENT_TYPES = ['bpmn:Task'];
 
-/**
- * Get currently selected BPMN element, if it is a single `bpmn:Task`.
- *
- * @param {Object} injector
- * @return {Object|null} Selected BPMN element or null
+/**
+ * Get currently selected BPMN element, if it is a single `bpmn:Task`.
+ *
+ * @param {Object} injector
+ * @return {Object|null} Selected BPMN element or null
  */
 function useSelectedElement(injector) {
   const [selectedElement, setSelectedElement] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
@@ -1884,21 +1889,21 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-/**
- * @typedef {import('@codemirror/autocomplete').Completion} Completion
- * @typedef {import('@codemirror/autocomplete').CompletionContext} CompletionContext
- * @typedef {import('@codemirror/autocomplete').CompletionResult} CompletionResult
+/**
+ * @typedef {import('@codemirror/autocomplete').Completion} Completion
+ * @typedef {import('@codemirror/autocomplete').CompletionContext} CompletionContext
+ * @typedef {import('@codemirror/autocomplete').CompletionResult} CompletionResult
  */
 
-/**
- * @param {Completion[]} variables
+/**
+ * @param {Completion[]} variables
  */
 function getAutocompletionExtensions(variables) {
   return [autoCompletionExtension(variables), startCompletionExtension()];
 }
 
-/**
- * @param {Completion[]} variables
+/**
+ * @param {Completion[]} variables
  */
 function autoCompletionExtension(variables) {
   return (0,_codemirror_autocomplete__WEBPACK_IMPORTED_MODULE_0__.autocompletion)({
@@ -1906,8 +1911,8 @@ function autoCompletionExtension(variables) {
   });
 }
 
-/**
- * Trigger autocompletion when the user goes into a new line.
+/**
+ * Trigger autocompletion when the user goes into a new line.
  */
 function startCompletionExtension() {
   return _codemirror_view__WEBPACK_IMPORTED_MODULE_1__.EditorView.updateListener.of(update => {
@@ -1931,11 +1936,11 @@ function startCompletionExtension() {
   });
 }
 
-/**
- * @param {CompletionContext} context
- * @param {Array} variables
- *
- * @returns {CompletionResult | null}
+/**
+ * @param {CompletionContext} context
+ * @param {Array} variables
+ *
+ * @returns {CompletionResult | null}
  */
 function autocomplete(context, variables) {
   const {
@@ -2026,13 +2031,13 @@ function autocomplete(context, variables) {
   };
 }
 
-/**
- * Check if there is a property after the current position by looking for a `"` character.
- *
- * @param {*} state
- * @param {number} pos
- *
- * @returns {boolean}
+/**
+ * Check if there is a property after the current position by looking for a `"` character.
+ *
+ * @param {*} state
+ * @param {number} pos
+ *
+ * @returns {boolean}
  */
 function hasPropertyAfter(state, pos) {
   const textAfter = state.sliceDoc(pos).trimStart();
@@ -2055,12 +2060,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var bpmn_js_lib_util_ModelUtil__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! bpmn-js/lib/util/ModelUtil */ "./node_modules/bpmn-js/lib/util/ModelUtil.js");
 
 
-/**
- * Get the name of a BPMN element.
- *
- * @param {import('../types').Element} element
- *
- * @returns {string}
+/**
+ * Get the name of a BPMN element.
+ *
+ * @param {import('../types').Element} element
+ *
+ * @returns {string}
  */
 function getName(element) {
   const businessObject = (0,bpmn_js_lib_util_ModelUtil__WEBPACK_IMPORTED_MODULE_0__.getBusinessObject)(element);
@@ -2071,12 +2076,12 @@ function getName(element) {
   return name;
 }
 
-/**
- * Get the name of a BPMN element.
- *
- * @param {import('../types').Element} element
- *
- * @returns {string}
+/**
+ * Get the name of a BPMN element.
+ *
+ * @param {import('../types').Element} element
+ *
+ * @returns {string}
  */
 function getType(element) {
   const businessObject = (0,bpmn_js_lib_util_ModelUtil__WEBPACK_IMPORTED_MODULE_0__.getBusinessObject)(element);
@@ -32814,7 +32819,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.task-testing__container {
 }
 .code__editor .code__editor-copy-button svg {
   fill: #525252;
-}`, "",{"version":3,"sources":["webpack://./lib/style/style.scss"],"names":[],"mappings":"AAAA;EACE,aAAA;EACA,mBAAA;EACA,YAAA;EACA,WAAA;EACA,aAAA;EACA,eAAA;AACF;AAEI;;EAEE,aAAA;EACA,mBAAA;EACA,QAAA;EACA,YAAA;AAAN;AAEM;;EACE,oBAAA;EACA,uBAAA;AACR;AAIE;EACE,UAAA;EACA,aAAA;EACA,sBAAA;EACA,+BAAA;EACA,kBAAA;AAFJ;AAKE;EACE,UAAA;EACA,aAAA;EACA,sBAAA;EACA,iBAAA;AAHJ;AAME;EACE,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,SAAA;EACA,WAAA;AAJJ;AAMI;EACE,aAAA;EACA,QAAA;AAJN;AAMM;EACE,iBAAA;AAJR;AAQI;EACE,YAAA;AANN;AASI;EACE,aAAA;AAPN;AAUI;EACE,aAAA;AARN;AAWI;EACE,oBAAA;EACA,uBAAA;AATN;AAaE;EACE,YAAA;EACA,aAAA;EACA,sBAAA;EACA,QAAA;AAXJ;AAaI;EACE,aAAA;EACA,mBAAA;EACA,QAAA;AAXN;AAcI;EACE,cAAA;AAZN;AAgBE;EACE,YAAA;EACA,aAAA;EACA,sBAAA;EACA,QAAA;AAdJ;AAgBI;EACE,aAAA;EACA,mBAAA;EACA,YAAA;EACA,WAAA;AAdN;AAiBI;EACE,cAAA;EACA,aAAA;EACA,mBAAA;EACA,QAAA;AAfN;AAiBM;EACE,aAAA;AAfR;AAkBM;EACE,aAAA;AAhBR;AAmBM;EACE,aAAA;AAjBR;AAoBM;EACE,iBAAA;EACA,uBAAA;AAlBR;AAsBI;EACE,iBAAA;AApBN;AAuBI;EACE,aAAA;EACA,sBAAA;EACA,YAAA;EACA,kBAAA;AArBN;AAuBM;EACE,oCAAA;AArBR;AAwBM;EACE,UAAA;EACA,yBAAA;AAtBR;AAyBM;EACE,aAAA;AAvBR;AA2BM;EACE,aAAA;AAzBR;AA6BI;EACE,aAAA;EACA,sBAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,yBAAA;EACA,sBAAA;EACA,yBAAA;AA3BN;AA6BM;EACE,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,iBAAA;AA3BR;AA6BQ;EACE,aAAA;AA3BV;AA8BQ;EACE,iBAAA;AA5BV;AAiCI;EACE,YAAA;EACA,aAAA;EACA,mBAAA;EACA,cAAA;AA/BN;AAkCI;EACE,iBAAA;AAhCN;AAmCI;EACE,WAAA;AAjCN;AAoCI;EACE,qBAAA;EACA,YAAA;AAlCN;AAqCI;EACE,eAAA;AAnCN;;AAwCA;EACE,kBAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;AArCF;AAuCE;EACE,0BAAA;EACA,oBAAA;AArCJ;AAwCE;EACE,kBAAA;EACA,YAAA;AAtCJ;AAwCI;EACE,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;AAtCN;AAwCM;EACE,YAAA;EACA,2CAAA;AAtCR;AAyCM;EACE,2BAAA;AAvCR;AA0CM;EACE,aAAA;AAxCR;AA2CM;EACE,aAAA;AAzCR;AA4CM;EACE,eAAA;AA1CR;AA6CM;EACE,YAAA;EACA,sBAAA;EACA,eAAA;EACA,gBAAA;EACA,qBAAA;AA3CR;AA6CQ;EACE,kBAAA;AA3CV;AA8CQ;EACE,eAAA;AA5CV;AAkDE;EACE,cAAA;EACA,eAAA;EACA,eAAA;AAhDJ;AAmDE;EACE,kBAAA;EACA,SAAA;EACA,WAAA;EACA,WAAA;AAjDJ;AAmDI;EACE,aAAA;AAjDN","sourcesContent":[".task-testing__container {\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  width: 100%;\n  padding: 10px;\n  font-size: 14px;\n\n  &.task-testing__container--empty {\n    .task-testing__container-no-config,\n    .task-testing__container-no-element {\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      height: 32px;\n\n      .cds--inline-loading {\n        inline-size: initial;\n        min-block-size: initial;\n      }\n    }\n  }\n\n  .task-testing__container--left {\n    width: 50%;\n    display: flex;\n    flex-direction: column;\n    border-right: 1px solid #E0E0E0;\n    padding-right: 6px;\n  }\n\n  .task-testing__container--right {\n    width: 50%;\n    display: flex;\n    flex-direction: column;\n    padding-left: 6px;\n  }\n\n  .task-testing__container--header {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n    width: 100%;\n\n    .task-header {\n      display: flex;\n      gap: 6px;\n      \n      .task-type {\n        font-weight: bold;\n      }\n    }\n\n    .btn-execute {\n      width: 138px;\n    }\n\n    .cds--popover-container:not(.has-error) .cds--popover {\n      display: none;\n    }\n\n    .cds--tooltip-content {\n      padding: 12px;\n    }\n\n    .cds--btn .cds--inline-loading {\n      inline-size: initial;\n      min-block-size: initial;\n    }\n  }\n\n  .input {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 5px;\n\n    .input__header {\n      display: flex;\n      align-items: center;\n      gap: 5px;\n    }\n\n    .input__header--title {\n      color: #525252;\n    }\n  }\n\n  .output {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 5px;\n\n    .output__header {\n      display: flex;\n      align-items: center;\n      height: 32px;\n      width: 100%;\n    }\n\n    .output__header--title {\n      color: #525252;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n\n      svg.output__status-icon--ready {\n        fill: #0043ce;\n      }\n\n      svg.output__status-icon--success {\n        fill: #24a148;\n      }\n\n      svg.output__status-icon--error {\n        fill: #da1e28;\n      }\n\n      .cds--inline-loading {\n        inline-size: 16px;\n        min-block-size: initial;\n      }\n    }\n\n    .output__header--button-operate {\n      margin-left: auto;\n    }\n\n    .output__body {\n      display: flex;\n      flex-direction: column;\n      flex-grow: 1;\n      position: relative;\n\n      .cds--tabs {\n        --cds-layout-size-height-local: 32px;\n      }\n      \n      .cds--tab-content {\n        padding: 0;\n        height: calc(100% - 20px);\n      }\n\n      .cds--tab-content:not([hidden]) {\n        display: flex;\n      }\n\n      // Tooltip on Carbon Button with absolute position is broken.\n      .cds--popover {\n        display: none;\n      }\n    }\n\n    .output__error {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      padding: 12px;\n      margin-bottom: 12px;\n      border: 1px solid #da1e28;\n      border-left-width: 3px;\n      background-color: #fff1f1;\n\n      .output__error--title {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        font-weight: bold;\n\n        svg {\n          fill: #da1e28;\n        }\n\n        .output__error--action {\n          margin-left: auto;\n        }\n      }\n    }\n\n    .output__variables--empty {\n      height: 32px;\n      display: flex;\n      align-items: center;\n      color: #525252;\n    }\n\n    .output__variables--empty-action {\n      font-weight: bold;\n    }\n\n    .cds--snippet-container {\n      width: 100%;\n    }\n\n    .cds--snippet {\n      max-inline-size: 100%;\n      height: 100%;\n    }\n\n    code {\n      font-size: 14px;\n    }\n  }\n}\n\n.code__editor {\n  position: relative;\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n\n  &.code__editor--error .code__editor-codemirror .code__editor-codemirror-inner .cm-editor {\n    outline: 1px solid #da1e28;\n    outline-offset: -1px;\n  }\n\n  .code__editor-codemirror {\n    position: relative;\n    flex-grow: 1;\n\n    .code__editor-codemirror-inner {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n\n      .cm-editor {\n        height: 100%;\n        background-color: var(--cds-layer, #f4f4f4);\n      }\n\n      .cm-scroller {\n        overflow-y: auto !important;\n      }\n\n      .cm-content {\n        padding: 15px;\n      }\n\n      .cm-focused {\n        outline: none;\n      }\n\n      .cm-tooltip {\n        font-size: 14px;\n      }\n\n      .info {\n        padding: 5px;\n        font-family: monospace;\n        font-size: 12px;\n        max-width: 300px;\n        word-wrap: break-word;\n\n        span {\n          font-style: italic;\n        }\n\n        pre {\n          margin-top: 5px;\n        }\n      }\n    }\n  }\n\n  .code__editor-error {\n    color: #da1e28;\n    font-size: 13px;\n    margin-top: 5px;\n  }\n\n  .code__editor-copy-button {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    z-index: 10;\n\n    svg {\n      fill: #525252;\n    }\n  }\n}"],"sourceRoot":""}]);
+}`, "",{"version":3,"sources":["webpack://./lib/style/style.scss"],"names":[],"mappings":"AAAA;EACE,aAAA;EACA,mBAAA;EACA,YAAA;EACA,WAAA;EACA,aAAA;EACA,eAAA;AACF;AAEI;;EAEE,aAAA;EACA,mBAAA;EACA,QAAA;EACA,YAAA;AAAN;AAEM;;EACE,oBAAA;EACA,uBAAA;AACR;AAIE;EACE,UAAA;EACA,aAAA;EACA,sBAAA;EACA,+BAAA;EACA,kBAAA;AAFJ;AAKE;EACE,UAAA;EACA,aAAA;EACA,sBAAA;EACA,iBAAA;AAHJ;AAME;EACE,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,SAAA;EACA,WAAA;AAJJ;AAMI;EACE,aAAA;EACA,QAAA;AAJN;AAMM;EACE,iBAAA;AAJR;AAQI;EACE,YAAA;AANN;AASI;EACE,aAAA;AAPN;AAUI;EACE,aAAA;AARN;AAWI;EACE,oBAAA;EACA,uBAAA;AATN;AAaE;EACE,YAAA;EACA,aAAA;EACA,sBAAA;EACA,QAAA;AAXJ;AAaI;EACE,aAAA;EACA,mBAAA;EACA,QAAA;AAXN;AAcI;EACE,cAAA;AAZN;AAgBE;EACE,YAAA;EACA,aAAA;EACA,sBAAA;EACA,QAAA;AAdJ;AAgBI;EACE,aAAA;EACA,mBAAA;EACA,YAAA;EACA,WAAA;AAdN;AAiBI;EACE,cAAA;EACA,aAAA;EACA,mBAAA;EACA,QAAA;AAfN;AAiBM;EACE,aAAA;AAfR;AAkBM;EACE,aAAA;AAhBR;AAmBM;EACE,aAAA;AAjBR;AAoBM;EACE,iBAAA;EACA,uBAAA;AAlBR;AAsBI;EACE,iBAAA;AApBN;AAuBI;EACE,aAAA;EACA,sBAAA;EACA,YAAA;EACA,kBAAA;AArBN;AAuBM;EACE,oCAAA;AArBR;AAwBM;EACE,UAAA;EACA,yBAAA;AAtBR;AAyBM;EACE,aAAA;AAvBR;AA2BM;EACE,aAAA;AAzBR;AA6BI;EACE,aAAA;EACA,sBAAA;EACA,SAAA;EACA,aAAA;EACA,mBAAA;EACA,yBAAA;EACA,sBAAA;EACA,yBAAA;AA3BN;AA6BM;EACE,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,iBAAA;AA3BR;AA6BQ;EACE,aAAA;AA3BV;AA8BQ;EACE,iBAAA;AA5BV;AAiCI;EACE,YAAA;EACA,aAAA;EACA,mBAAA;EACA,cAAA;AA/BN;AAkCI;EACE,iBAAA;AAhCN;AAmCI;EACE,WAAA;AAjCN;AAoCI;EACE,qBAAA;EACA,YAAA;AAlCN;AAqCI;EACE,eAAA;AAnCN;;AAwCA;EACE,kBAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;AArCF;AAuCE;EACE,0BAAA;EACA,oBAAA;AArCJ;AAwCE;EACE,kBAAA;EACA,YAAA;AAtCJ;AAwCI;EACE,kBAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;AAtCN;AAwCM;EACE,YAAA;EACA,2CAAA;AAtCR;AAyCM;EACE,2BAAA;AAvCR;AA0CM;EACE,aAAA;AAxCR;AA2CM;EACE,aAAA;AAzCR;AA4CM;EACE,eAAA;AA1CR;AA6CM;EACE,YAAA;EACA,sBAAA;EACA,eAAA;EACA,gBAAA;EACA,qBAAA;AA3CR;AA6CQ;EACE,kBAAA;AA3CV;AA8CQ;EACE,eAAA;AA5CV;AAkDE;EACE,cAAA;EACA,eAAA;EACA,eAAA;AAhDJ;AAmDE;EACE,kBAAA;EACA,SAAA;EACA,WAAA;EACA,WAAA;AAjDJ;AAmDI;EACE,aAAA;AAjDN","sourcesContent":[".task-testing__container {\r\n  display: flex;\r\n  flex-direction: row;\r\n  height: 100%;\r\n  width: 100%;\r\n  padding: 10px;\r\n  font-size: 14px;\r\n\r\n  &.task-testing__container--empty {\r\n    .task-testing__container-no-config,\r\n    .task-testing__container-no-element {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 5px;\r\n      height: 32px;\r\n\r\n      .cds--inline-loading {\r\n        inline-size: initial;\r\n        min-block-size: initial;\r\n      }\r\n    }\r\n  }\r\n\r\n  .task-testing__container--left {\r\n    width: 50%;\r\n    display: flex;\r\n    flex-direction: column;\r\n    border-right: 1px solid #E0E0E0;\r\n    padding-right: 6px;\r\n  }\r\n\r\n  .task-testing__container--right {\r\n    width: 50%;\r\n    display: flex;\r\n    flex-direction: column;\r\n    padding-left: 6px;\r\n  }\r\n\r\n  .task-testing__container--header {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 12px;\r\n    width: 100%;\r\n\r\n    .task-header {\r\n      display: flex;\r\n      gap: 6px;\r\n      \r\n      .task-type {\r\n        font-weight: bold;\r\n      }\r\n    }\r\n\r\n    .btn-execute {\r\n      width: 138px;\r\n    }\r\n\r\n    .cds--popover-container:not(.has-error) .cds--popover {\r\n      display: none;\r\n    }\r\n\r\n    .cds--tooltip-content {\r\n      padding: 12px;\r\n    }\r\n\r\n    .cds--btn .cds--inline-loading {\r\n      inline-size: initial;\r\n      min-block-size: initial;\r\n    }\r\n  }\r\n\r\n  .input {\r\n    flex-grow: 1;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 5px;\r\n\r\n    .input__header {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 5px;\r\n    }\r\n\r\n    .input__header--title {\r\n      color: #525252;\r\n    }\r\n  }\r\n\r\n  .output {\r\n    flex-grow: 1;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 5px;\r\n\r\n    .output__header {\r\n      display: flex;\r\n      align-items: center;\r\n      height: 32px;\r\n      width: 100%;\r\n    }\r\n\r\n    .output__header--title {\r\n      color: #525252;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 6px;\r\n\r\n      svg.output__status-icon--ready {\r\n        fill: #0043ce;\r\n      }\r\n\r\n      svg.output__status-icon--success {\r\n        fill: #24a148;\r\n      }\r\n\r\n      svg.output__status-icon--error {\r\n        fill: #da1e28;\r\n      }\r\n\r\n      .cds--inline-loading {\r\n        inline-size: 16px;\r\n        min-block-size: initial;\r\n      }\r\n    }\r\n\r\n    .output__header--button-operate {\r\n      margin-left: auto;\r\n    }\r\n\r\n    .output__body {\r\n      display: flex;\r\n      flex-direction: column;\r\n      flex-grow: 1;\r\n      position: relative;\r\n\r\n      .cds--tabs {\r\n        --cds-layout-size-height-local: 32px;\r\n      }\r\n      \r\n      .cds--tab-content {\r\n        padding: 0;\r\n        height: calc(100% - 20px);\r\n      }\r\n\r\n      .cds--tab-content:not([hidden]) {\r\n        display: flex;\r\n      }\r\n\r\n      // Tooltip on Carbon Button with absolute position is broken.\r\n      .cds--popover {\r\n        display: none;\r\n      }\r\n    }\r\n\r\n    .output__error {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 12px;\r\n      padding: 12px;\r\n      margin-bottom: 12px;\r\n      border: 1px solid #da1e28;\r\n      border-left-width: 3px;\r\n      background-color: #fff1f1;\r\n\r\n      .output__error--title {\r\n        display: flex;\r\n        flex-direction: row;\r\n        align-items: center;\r\n        font-weight: bold;\r\n\r\n        svg {\r\n          fill: #da1e28;\r\n        }\r\n\r\n        .output__error--action {\r\n          margin-left: auto;\r\n        }\r\n      }\r\n    }\r\n\r\n    .output__variables--empty {\r\n      height: 32px;\r\n      display: flex;\r\n      align-items: center;\r\n      color: #525252;\r\n    }\r\n\r\n    .output__variables--empty-action {\r\n      font-weight: bold;\r\n    }\r\n\r\n    .cds--snippet-container {\r\n      width: 100%;\r\n    }\r\n\r\n    .cds--snippet {\r\n      max-inline-size: 100%;\r\n      height: 100%;\r\n    }\r\n\r\n    code {\r\n      font-size: 14px;\r\n    }\r\n  }\r\n}\r\n\r\n.code__editor {\r\n  position: relative;\r\n  flex-grow: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  &.code__editor--error .code__editor-codemirror .code__editor-codemirror-inner .cm-editor {\r\n    outline: 1px solid #da1e28;\r\n    outline-offset: -1px;\r\n  }\r\n\r\n  .code__editor-codemirror {\r\n    position: relative;\r\n    flex-grow: 1;\r\n\r\n    .code__editor-codemirror-inner {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      right: 0;\r\n      bottom: 0;\r\n\r\n      .cm-editor {\r\n        height: 100%;\r\n        background-color: var(--cds-layer, #f4f4f4);\r\n      }\r\n\r\n      .cm-scroller {\r\n        overflow-y: auto !important;\r\n      }\r\n\r\n      .cm-content {\r\n        padding: 15px;\r\n      }\r\n\r\n      .cm-focused {\r\n        outline: none;\r\n      }\r\n\r\n      .cm-tooltip {\r\n        font-size: 14px;\r\n      }\r\n\r\n      .info {\r\n        padding: 5px;\r\n        font-family: monospace;\r\n        font-size: 12px;\r\n        max-width: 300px;\r\n        word-wrap: break-word;\r\n\r\n        span {\r\n          font-style: italic;\r\n        }\r\n\r\n        pre {\r\n          margin-top: 5px;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .code__editor-error {\r\n    color: #da1e28;\r\n    font-size: 13px;\r\n    margin-top: 5px;\r\n  }\r\n\r\n  .code__editor-copy-button {\r\n    position: absolute;\r\n    top: 10px;\r\n    right: 10px;\r\n    z-index: 10;\r\n\r\n    svg {\r\n      fill: #525252;\r\n    }\r\n  }\r\n}"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);