@elice/material-runbox 1.240718.0-trasncript.1 → 1.240718.0-trasncript.2

package/cjs/components/material-runbox/contexts/MaterialRunboxApiContext.js

@@ -2,42 +2,54 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var openapiClientMaterialRunbox = require('@elice/openapi-client-material-runbox');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 //
 //
 //
-const MaterialRunboxApiContext = React.createContext({});
-const useMaterialRunboxApiContext = () => {
-  return React.useContext(MaterialRunboxApiContext);
+var MaterialRunboxApiContext = React__default.default.createContext({});
+var useMaterialRunboxApiContext = function useMaterialRunboxApiContext() {
+  return React__default.default.useContext(MaterialRunboxApiContext);
 };
 //
 //
 //
-const MaterialRunboxApiContextProvider = ({
-  children,
-  eliceMaterialRunboxApiConfiguration
-}) => {
-  const createMaterialRunboxApi = () => Object.freeze({
-    runbox: new openapiClientMaterialRunbox.RunboxApi(eliceMaterialRunboxApiConfiguration),
-    runtime: new openapiClientMaterialRunbox.RuntimeApi(eliceMaterialRunboxApiConfiguration),
-    runtimeTemplate: new openapiClientMaterialRunbox.RuntimeTemplateApi(eliceMaterialRunboxApiConfiguration)
-  });
+var MaterialRunboxApiContextProvider = function MaterialRunboxApiContextProvider(_ref) {
+  var children = _ref.children,
+    eliceMaterialRunboxApiConfiguration = _ref.eliceMaterialRunboxApiConfiguration;
+  var createMaterialRunboxApi = function createMaterialRunboxApi() {
+    return Object.freeze({
+      runbox: new openapiClientMaterialRunbox.RunboxApi(eliceMaterialRunboxApiConfiguration),
+      runtime: new openapiClientMaterialRunbox.RuntimeApi(eliceMaterialRunboxApiConfiguration),
+      runtimeTemplate: new openapiClientMaterialRunbox.RuntimeTemplateApi(eliceMaterialRunboxApiConfiguration)
+    });
+  };
   //
   //
   //
-  const [materialRunboxApi, setMaterialRunboxApi] = React.useState(createMaterialRunboxApi);
+  var _React$useState = React__default.default.useState(createMaterialRunboxApi),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    materialRunboxApi = _React$useState2[0],
+    setMaterialRunboxApi = _React$useState2[1];
   //
   //
   //
-  React.useEffect(() => setMaterialRunboxApi(createMaterialRunboxApi),
+  React__default.default.useEffect(function () {
+    return setMaterialRunboxApi(createMaterialRunboxApi);
+  },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [eliceMaterialRunboxApiConfiguration]);
   //
   //
   //
-  return React.createElement(MaterialRunboxApiContext.Provider, {
+  return jsxRuntime.jsx(MaterialRunboxApiContext.Provider, {
     children: children,
     value: materialRunboxApi
   });

package/cjs/components/material-runbox/contexts/MaterialRunboxCommandContext.js

@@ -2,6 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var intl = require('@elice/intl');
 var muiXSnackbar = require('@elice/mui-x-snackbar');
@@ -10,81 +12,95 @@ var rxjs = require('rxjs');
 var operators = require('rxjs/operators');
 var MaterialRunboxApiContext = require('./MaterialRunboxApiContext.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 //
 //
 //
-const PING_INTERVAL = 2000;
-const PING_MAX_TRY_SECOND = 3 * 60; // 3min (ref: https://teams.microsoft.com/l/message/19:aa082e4a9f6f456fbea872be532123d4@thread.tacv2/1689228421341?tenantId=5bb6f1f4-0b48-4496-9baf-f9fb7da5d352&groupId=27480e72-5fcb-4ac9-b4e7-5b92abb31a95&parentMessageId=1689217573531&teamName=div-CTO&channelName=issue-report&createdTime=1689228421341&allowXTenantAccess=false)
-const PING_MAX_TRY_COUNT = PING_MAX_TRY_SECOND * 1000 / PING_INTERVAL;
+var PING_INTERVAL = 2000;
+var PING_MAX_TRY_SECOND = 3 * 60; // 3min (ref: https://teams.microsoft.com/l/message/19:aa082e4a9f6f456fbea872be532123d4@thread.tacv2/1689228421341?tenantId=5bb6f1f4-0b48-4496-9baf-f9fb7da5d352&groupId=27480e72-5fcb-4ac9-b4e7-5b92abb31a95&parentMessageId=1689217573531&teamName=div-CTO&channelName=issue-report&createdTime=1689228421341&allowXTenantAccess=false)
+var PING_MAX_TRY_COUNT = PING_MAX_TRY_SECOND * 1000 / PING_INTERVAL;
 //
 //
 //
-const MaterialRunboxCommandContext = React.createContext({});
-const useMaterialRunboxCommandContext = () => {
-  return React.useContext(MaterialRunboxCommandContext);
+var MaterialRunboxCommandContext = React__default.default.createContext({});
+var useMaterialRunboxCommandContext = function useMaterialRunboxCommandContext() {
+  return React__default.default.useContext(MaterialRunboxCommandContext);
 };
 //
 //
 //
-const MaterialRunboxCommandContextProvider = ({
-  children,
-  runtime,
-  courseId
-}) => {
-  const intl$1 = intl.useRawEliceIntl();
-  const {
-    enqueueSnackbar
-  } = muiXSnackbar.useSnackbar();
-  const runtimeId = runtime === null || runtime === void 0 ? void 0 : runtime.id;
-  const materialRunboxApi = MaterialRunboxApiContext.useMaterialRunboxApiContext();
-  const [pcmdId, setPcmdId] = React.useState(null); // Ping Command ID
-  const [lastCommand, setLastCommand] = React.useState(null);
+var MaterialRunboxCommandContextProvider = function MaterialRunboxCommandContextProvider(_ref) {
+  var children = _ref.children,
+    runtime = _ref.runtime,
+    courseId = _ref.courseId;
+  var intl$1 = intl.useRawEliceIntl();
+  var _useSnackbar = muiXSnackbar.useSnackbar(),
+    enqueueSnackbar = _useSnackbar.enqueueSnackbar;
+  var runtimeId = runtime === null || runtime === void 0 ? void 0 : runtime.id;
+  var materialRunboxApi = MaterialRunboxApiContext.useMaterialRunboxApiContext();
+  var _React$useState = React__default.default.useState(null),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    pcmdId = _React$useState2[0],
+    setPcmdId = _React$useState2[1]; // Ping Command ID
+  var _React$useState3 = React__default.default.useState(null),
+    _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
+    lastCommand = _React$useState4[0],
+    setLastCommand = _React$useState4[1];
   //
   // check whether running command exists or not on mount,
   // if running command exists, set `pcmdId` to start pinging
   //
-  React.useEffect(() => {
+  React__default.default.useEffect(function () {
     if (!runtimeId) {
       return;
     }
     materialRunboxApi.runtime.runtimeRuntimeIdCommandGet({
-      runtimeId,
+      runtimeId: runtimeId,
       eliceCourseId: courseId
-    }).then(res => {
+    }).then(function (res) {
       if (res.status !== openapiClientMaterialRunbox.CommandStatus.Terminated) {
         setLastCommand(res);
         setPcmdId(res.runboxCommandId);
       }
-    }).catch(() => void 0);
+    }).catch(function () {
+      return void 0;
+    });
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [runtimeId, courseId]);
   //
   // ping command
   //
-  React.useEffect(() => {
+  React__default.default.useEffect(function () {
     if (!pcmdId || !runtimeId) {
       return;
     }
-    const _pingobj = {};
-    const subscription = rxjs.timer(0, PING_INTERVAL).pipe(operators.take(PING_MAX_TRY_COUNT), operators.switchMap(() => materialRunboxApi.runtime.runtimeRuntimeIdCommandGet({
-      runtimeId,
-      eliceCourseId: courseId
-    })), operators.takeWhile(res => res.status !== openapiClientMaterialRunbox.CommandStatus.Terminated, true)).subscribe({
-      next: res => {
+    var _pingobj = {};
+    var subscription = rxjs.timer(0, PING_INTERVAL).pipe(operators.take(PING_MAX_TRY_COUNT), operators.switchMap(function () {
+      return materialRunboxApi.runtime.runtimeRuntimeIdCommandGet({
+        runtimeId: runtimeId,
+        eliceCourseId: courseId
+      });
+    }), operators.takeWhile(function (res) {
+      return res.status !== openapiClientMaterialRunbox.CommandStatus.Terminated;
+    }, true)).subscribe({
+      next: function next(res) {
         _pingobj.res = res;
         setLastCommand(res);
       },
-      error: () => {
+      error: function error() {
         enqueueSnackbar(intl$1.formatMessage({
           id: 'runbox.context.command.ping.error'
         }), {
           variant: 'error'
         });
       },
-      complete: () => {
+      complete: function complete() {
         setPcmdId(null); // empty `pcmdId` to stop pinging
-        const hasError = !_pingobj.res ||
+        var hasError = !_pingobj.res ||
         // max try count reached, but command is still running
         _pingobj.res.status !== openapiClientMaterialRunbox.CommandStatus.Terminated;
         if (hasError) {
@@ -97,7 +113,7 @@ const MaterialRunboxCommandContextProvider = ({
         }
       }
     });
-    return () => {
+    return function () {
       subscription.unsubscribe();
     };
   },
@@ -106,10 +122,10 @@ const MaterialRunboxCommandContextProvider = ({
   //
   //
   //
-  return React.createElement(MaterialRunboxCommandContext.Provider, {
+  return jsxRuntime.jsx(MaterialRunboxCommandContext.Provider, {
     children: children,
     value: {
-      lastCommand,
+      lastCommand: lastCommand,
       isLastCommandRunning: Boolean((lastCommand === null || lastCommand === void 0 ? void 0 : lastCommand.status) === openapiClientMaterialRunbox.CommandStatus.Queued || (lastCommand === null || lastCommand === void 0 ? void 0 : lastCommand.status) === openapiClientMaterialRunbox.CommandStatus.Started),
       setCommandIdToPing: setPcmdId
     }

package/cjs/components/material-runbox/contexts/MaterialRunboxContext.js

@@ -3,24 +3,27 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 //
 //
 //
-const MaterialRunboxContext = React.createContext({});
-const useMaterialRunboxContext = () => {
-  return React.useContext(MaterialRunboxContext);
+var MaterialRunboxContext = React__default.default.createContext({});
+var useMaterialRunboxContext = function useMaterialRunboxContext() {
+  return React__default.default.useContext(MaterialRunboxContext);
 };
 //
 //
 //
-const MaterialRunboxContextProvider = _a => {
-  var {
-      children
-    } = _a,
+var MaterialRunboxContextProvider = function MaterialRunboxContextProvider(_a) {
+  var children = _a.children,
     props = tslib.__rest(_a, ["children"]);
-  return React.createElement(MaterialRunboxContext.Provider, {
+  return jsxRuntime.jsx(MaterialRunboxContext.Provider, {
     children: children,
     value: props
   });

package/cjs/components/material-runbox/contexts/index.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var MaterialRunboxApiContext = require('./MaterialRunboxApiContext.js');
+var MaterialRunboxCommandContext = require('./MaterialRunboxCommandContext.js');
+var MaterialRunboxContext = require('./MaterialRunboxContext.js');
+
+
+
+exports.MaterialRunboxApiContext = MaterialRunboxApiContext.MaterialRunboxApiContext;
+exports.MaterialRunboxApiContextProvider = MaterialRunboxApiContext.default;
+exports.useMaterialRunboxApiContext = MaterialRunboxApiContext.useMaterialRunboxApiContext;
+exports.MaterialRunboxCommandContext = MaterialRunboxCommandContext.MaterialRunboxCommandContext;
+exports.MaterialRunboxCommandContextProvider = MaterialRunboxCommandContext.default;
+exports.useMaterialRunboxCommandContext = MaterialRunboxCommandContext.useMaterialRunboxCommandContext;
+exports.MaterialRunboxContext = MaterialRunboxContext.MaterialRunboxContext;
+exports.MaterialRunboxContextProvider = MaterialRunboxContext.default;
+exports.useMaterialRunboxContext = MaterialRunboxContext.useMaterialRunboxContext;

package/cjs/components/material-runbox/hooks/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var useRunboxControl = require('./useRunboxControl.js');
+
+
+
+exports.useRunboxControl = useRunboxControl.useRunboxControl;

package/cjs/components/material-runbox/hooks/useRunboxControl.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var intl = require('@elice/intl');
 var muiXSnackbar = require('@elice/mui-x-snackbar');
@@ -14,53 +15,76 @@ require('../contexts/MaterialRunboxContext.js');
 /**
  * Hook for runbox control and status.
  */
-const useRunboxControl = props => {
-  const _return = React.useRef({});
-  const intl$1 = intl.useRawEliceIntl();
-  const {
-    enqueueSnackbar
-  } = muiXSnackbar.useSnackbar();
-  const materialRunboxApi = MaterialRunboxApiContext.useMaterialRunboxApiContext();
-  const {
-    start: runboxStart,
-    stop: runboxStop
-  } = runboxClient.useEliceRunboxRunning();
+var useRunboxControl = function useRunboxControl(props) {
+  var _return = React.useRef({});
+  var intl$1 = intl.useRawEliceIntl();
+  var _useSnackbar = muiXSnackbar.useSnackbar(),
+    enqueueSnackbar = _useSnackbar.enqueueSnackbar;
+  var materialRunboxApi = MaterialRunboxApiContext.useMaterialRunboxApiContext();
+  var _useEliceRunboxRunnin = runboxClient.useEliceRunboxRunning(),
+    runboxStart = _useEliceRunboxRunnin.start,
+    runboxStop = _useEliceRunboxRunnin.stop;
   /**
    * Start project.
    */
-  const start = React.useCallback(async (force = false) => {
-    return runboxStart(signal => materialRunboxApi.runbox.runboxRunboxIdStartPost({
-      runboxId: props.runbox.id,
-      eliceCourseId: props.courseId
-    }, {
-      signal
-    }), force).then(() => void props.refetch()).catch(err => {
-      if (err.name !== 'AbortError') {
-        enqueueSnackbar(intl$1.formatMessage({
-          id: 'runbox.runtime.message.startError'
-        }), {
-          variant: 'error'
-        });
+  var start = React.useCallback( /*#__PURE__*/_rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee() {
+    var force,
+      _args = arguments;
+    return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          force = _args.length > 0 && _args[0] !== undefined ? _args[0] : false;
+          return _context.abrupt("return", runboxStart(function (signal) {
+            return materialRunboxApi.runbox.runboxRunboxIdStartPost({
+              runboxId: props.runbox.id,
+              eliceCourseId: props.courseId
+            }, {
+              signal: signal
+            });
+          }, force).then(function () {
+            return void props.refetch();
+          }).catch(function (err) {
+            if (err.name !== 'AbortError') {
+              enqueueSnackbar(intl$1.formatMessage({
+                id: 'runbox.runtime.message.startError'
+              }), {
+                variant: 'error'
+              });
+            }
+          }));
+        case 2:
+        case "end":
+          return _context.stop();
       }
-    });
-  },
+    }, _callee);
+  })),
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [props.runbox.id, props.courseId, runboxStart]);
   /**
    * Stop project.
    */
-  const stop = React.useCallback(async () => {
-    return runboxStop(signal => materialRunboxApi.runbox.runboxRunboxIdStopPost({
-      runboxId: props.runbox.id,
-      eliceCourseId: props.courseId
-    }, {
-      signal
-    })).then(() => {
-      //
-    }).catch(err => {
-      if (err.name !== 'AbortError') ;
-    });
-  },
+  var stop = React.useCallback( /*#__PURE__*/_rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee2() {
+    return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          return _context2.abrupt("return", runboxStop(function (signal) {
+            return materialRunboxApi.runbox.runboxRunboxIdStopPost({
+              runboxId: props.runbox.id,
+              eliceCourseId: props.courseId
+            }, {
+              signal: signal
+            });
+          }).then(function () {
+            //
+          }).catch(function (err) {
+            if (err.name !== 'AbortError') ;
+          }));
+        case 1:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })),
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [props.runbox.id, props.courseId, runboxStop]);
   //

package/cjs/components/material-runbox/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var MaterialRunbox = require('./MaterialRunbox.js');
+
+
+
+exports.MaterialRunbox = MaterialRunbox.default;

package/cjs/components/material-runbox/locales/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var en = require('./en.json.js');
+var ko = require('./ko.json.js');
+var th = require('./th.json.js');
+var ja = require('./ja.json.js');
+
+
+
+exports.messageEn = en.default;
+exports.messageKo = ko.default;
+exports.messageTh = th.default;
+exports.messageJa = ja.default;

package/cjs/components/material-runbox/runtime/Runtime.js

@@ -2,6 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var openapiClientMaterialRunbox = require('@elice/openapi-client-material-runbox');
 var runboxClient = require('@elice/runbox-client');
@@ -13,22 +15,27 @@ var RuntimeOverlayAssigned = require('./RuntimeOverlayAssigned.js');
 var RuntimeOverlayQueued = require('./RuntimeOverlayQueued.js');
 var RuntimeOverlayTerminated = require('./RuntimeOverlayTerminated.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 //
 //
 //
-const Runtime = props => {
-  const {
-    isLastCommandRunning,
-    lastCommand
-  } = MaterialRunboxCommandContext.useMaterialRunboxCommandContext();
-  const {
-    start: startRuntime
-  } = useRunboxControl.useRunboxControl(props);
-  const [viewRefreshTrigger, setViewRefreshTrigger] = React.useState(0);
+var Runtime = function Runtime(props) {
+  var _useMaterialRunboxCom = MaterialRunboxCommandContext.useMaterialRunboxCommandContext(),
+    isLastCommandRunning = _useMaterialRunboxCom.isLastCommandRunning,
+    lastCommand = _useMaterialRunboxCom.lastCommand;
+  var _useRunboxControl = useRunboxControl.useRunboxControl(props),
+    startRuntime = _useRunboxControl.start;
+  var _React$useState = React__default.default.useState(0),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    viewRefreshTrigger = _React$useState2[0],
+    setViewRefreshTrigger = _React$useState2[1];
   //
   //
   //
-  React.useEffect(() => {
+  React__default.default.useEffect(function () {
     if (!props.runbox.id) {
       return;
     }
@@ -49,7 +56,7 @@ const Runtime = props => {
   //
   // refresh view when `ProjectFileReset` command done.
   //
-  React.useEffect(() => {
+  React__default.default.useEffect(function () {
     if (isLastCommandRunning || !lastCommand) {
       return;
     }
@@ -65,14 +72,15 @@ const Runtime = props => {
   //
   //
   //
-  return React.createElement(runboxClient.EliceRunboxView, {
-    key: viewRefreshTrigger,
+  return jsxRuntime.jsx(runboxClient.EliceRunboxView, {
     OverlayAssigned: RuntimeOverlayAssigned.default,
     OverlayQueued: RuntimeOverlayQueued.default,
-    OverlayTerminated: props => React.createElement(RuntimeOverlayTerminated.default, Object.assign({}, props, {
-      startRuntime: startRuntime
-    }))
-  });
+    OverlayTerminated: function OverlayTerminated(props) {
+      return jsxRuntime.jsx(RuntimeOverlayTerminated.default, Object.assign({}, props, {
+        startRuntime: startRuntime
+      }));
+    }
+  }, viewRefreshTrigger);
 };
 
 exports.default = Runtime;

package/cjs/components/material-runbox/runtime/RuntimeOverlayAssigned.js

@@ -2,7 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var jsxRuntime = require('react/jsx-runtime');
 var reactUse = require('react-use');
 var intl = require('@elice/intl');
 var material = require('@mui/material');
@@ -13,18 +14,19 @@ var queue = require('../../../assets/queue.gif.js');
 //
 //
 //
-const ASSIGNED_NORMAL_TIMEOUT = 30 * 1e3; // 30 sec
+var ASSIGNED_NORMAL_TIMEOUT = 30 * 1e3; // 30 sec
 //
 //
 //
-const RuntimeOverlayAssigned = ({
-  __intl: intl
-}) => {
-  const [timeout] = reactUse.useTimeout(ASSIGNED_NORMAL_TIMEOUT);
+var RuntimeOverlayAssigned = function RuntimeOverlayAssigned(_ref) {
+  var intl = _ref.__intl;
+  var _useTimeout = reactUse.useTimeout(ASSIGNED_NORMAL_TIMEOUT),
+    _useTimeout2 = _rollupPluginBabelHelpers.slicedToArray(_useTimeout, 1),
+    timeout = _useTimeout2[0];
   //
   //
   //
-  return React.createElement(material.Stack, {
+  return jsxRuntime.jsxs(material.Stack, {
     gap: "1.5rem",
     sx: {
       display: 'flex',
@@ -32,28 +34,30 @@ const RuntimeOverlayAssigned = ({
       alignItems: 'center',
       width: '100%',
       height: '100%'
-    }
-  }, React.createElement(material.Box, {
-    component: "img",
-    src: queue.default,
-    alt: "queue",
-    sx: {
-      width: '100%',
-      height: 'auto',
-      maxWidth: '13.375rem'
-    }
-  }), React.createElement(material.Typography, {
-    variant: "subtitle2",
-    color: "text:secondary",
-    sx: {
-      whiteSpace: 'pre-wrap',
-      textAlign: 'center'
-    }
-  }, timeout() ? intl.formatMessage({
-    id: 'runbox.runtime.overlay.assigned.description_timeout'
-  }) : intl.formatMessage({
-    id: 'runbox.runtime.overlay.assigned.description'
-  })));
+    },
+    children: [jsxRuntime.jsx(material.Box, {
+      component: "img",
+      src: queue.default,
+      alt: "queue",
+      sx: {
+        width: '100%',
+        height: 'auto',
+        maxWidth: '13.375rem'
+      }
+    }), jsxRuntime.jsx(material.Typography, {
+      variant: "subtitle2",
+      color: "text:secondary",
+      sx: {
+        whiteSpace: 'pre-wrap',
+        textAlign: 'center'
+      },
+      children: timeout() ? intl.formatMessage({
+        id: 'runbox.runtime.overlay.assigned.description_timeout'
+      }) : intl.formatMessage({
+        id: 'runbox.runtime.overlay.assigned.description'
+      })
+    })]
+  });
 };
 var RuntimeOverlayAssigned$1 = new intl.IntlComponentBuilder(RuntimeOverlayAssigned).add('en', en.default).add('ko', ko.default).addAsync('th', Promise.resolve().then(function () { return require('../locales/th.json.js'); })).addAsync('ja', Promise.resolve().then(function () { return require('../locales/ja.json.js'); })).build();