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

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

@@ -3,14 +3,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _styled = require('@emotion/styled/base');
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var Runtime = require('./runtime/Runtime.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
+
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 //
 //
 //
-const StyledRunboxBody = /*#__PURE__*/_styled("div", {
+var StyledRunboxBody = /*#__PURE__*/_styled__default.default("div", {
   target: "e9bwldp0"
 })("production" === "production" ? {
   name: "277wu0",
@@ -23,8 +27,10 @@ const StyledRunboxBody = /*#__PURE__*/_styled("div", {
 //
 //
 //
-const MaterialRunboxBody = props => {
-  return React.createElement(StyledRunboxBody, null, React.createElement(Runtime.default, Object.assign({}, props)));
+var MaterialRunboxBody = function MaterialRunboxBody(props) {
+  return jsxRuntime.jsx(StyledRunboxBody, {
+    children: jsxRuntime.jsx(Runtime.default, Object.assign({}, props))
+  });
 };
 
 exports.default = MaterialRunboxBody;

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

@@ -2,8 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var _styled = require('@emotion/styled/base');
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var blocks = require('@elice/blocks');
 var intl = require('@elice/intl');
 var runboxClient = require('@elice/runbox-client');
@@ -17,15 +18,19 @@ var MaterialRunboxBody = require('./MaterialRunboxBody.js');
 var MaterialRunboxFooter = require('./MaterialRunboxFooter.js');
 var MaterialRunboxHeader = require('./MaterialRunboxHeader.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
+
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 //
 //
 //
-const DEFAULT_DATA = [null, null, null];
+var DEFAULT_DATA = [null, null, null];
 //
 //
 //
-const StyledRunboxContainer = /*#__PURE__*/_styled("div", {
+var StyledRunboxContainer = /*#__PURE__*/_styled__default.default("div", {
   target: "eeh98mq0"
 })("production" === "production" ? {
   name: "t5t5sq",
@@ -38,122 +43,146 @@ const StyledRunboxContainer = /*#__PURE__*/_styled("div", {
 //
 //
 //
-const MaterialRunboxContent = ({
-  runboxId,
-  courseId
-}) => {
-  const intl$1 = intl.useRawEliceIntl();
-  const {
-    showMessenger
-  } = MaterialRunboxContext.useMaterialRunboxContext();
-  const materialRunboxApi = MaterialRunboxApiContext.useMaterialRunboxApiContext();
+var MaterialRunboxContent = function MaterialRunboxContent(_ref) {
+  var runboxId = _ref.runboxId,
+    courseId = _ref.courseId;
+  var intl$1 = intl.useRawEliceIntl();
+  var _useMaterialRunboxCon = MaterialRunboxContext.useMaterialRunboxContext(),
+    showMessenger = _useMaterialRunboxCon.showMessenger;
+  var materialRunboxApi = MaterialRunboxApiContext.useMaterialRunboxApiContext();
   //
   //
   //
-  const {
-    data: [runbox, runtime, runtimeTemplate] = DEFAULT_DATA,
-    isInitialLoading,
-    isError,
-    refetch
-  } = reactQuery.useQuery({
-    enabled: Boolean(runboxId),
-    queryKey: ['eliceMaterialRunboxRunboxApi.runboxRunboxIdGet', 'eliceMaterialRunboxRuntimeTemplateApi.runtimeTemplateRuntimeTemplateIdGet', runboxId, courseId],
-    queryFn: ({
-      signal
-    }) => materialRunboxApi.runbox.runboxRunboxIdGet({
-      runboxId: runboxId,
-      eliceCourseId: courseId
-    }, {
-      signal
-    }).then(runbox => Promise.all([
-    // runbox
-    runbox,
-    // runtime
-    materialRunboxApi.runtime.runtimeGet({
-      filterImageId: runbox.imageId,
-      filterRuntimeTemplateId: runbox.runtimeTemplateId,
-      skip: 0,
-      count: 1,
-      eliceCourseId: courseId
-    }, {
-      signal
-    }).then(runtimes => {
-      var _a;
-      return (_a = runtimes[0]) !== null && _a !== void 0 ? _a : null;
+  var _useQuery = reactQuery.useQuery({
+      enabled: Boolean(runboxId),
+      queryKey: ['eliceMaterialRunboxRunboxApi.runboxRunboxIdGet', 'eliceMaterialRunboxRuntimeTemplateApi.runtimeTemplateRuntimeTemplateIdGet', runboxId, courseId],
+      queryFn: function queryFn(_ref2) {
+        var signal = _ref2.signal;
+        return materialRunboxApi.runbox.runboxRunboxIdGet({
+          runboxId: runboxId,
+          eliceCourseId: courseId
+        }, {
+          signal: signal
+        }).then(function (runbox) {
+          return Promise.all([
+          // runbox
+          runbox,
+          // runtime
+          materialRunboxApi.runtime.runtimeGet({
+            filterImageId: runbox.imageId,
+            filterRuntimeTemplateId: runbox.runtimeTemplateId,
+            skip: 0,
+            count: 1,
+            eliceCourseId: courseId
+          }, {
+            signal: signal
+          }).then(function (runtimes) {
+            var _a;
+            return (_a = runtimes[0]) !== null && _a !== void 0 ? _a : null;
+          }),
+          // runtimeTemplate
+          materialRunboxApi.runtimeTemplate.runtimeTemplateRuntimeTemplateIdGet({
+            runtimeTemplateId: runbox.runtimeTemplateId,
+            eliceCourseId: courseId
+          }, {
+            signal: signal
+          })]);
+        });
+      },
+      cacheTime: 0,
+      keepPreviousData: true,
+      refetchOnWindowFocus: false
     }),
-    // runtimeTemplate
-    materialRunboxApi.runtimeTemplate.runtimeTemplateRuntimeTemplateIdGet({
-      runtimeTemplateId: runbox.runtimeTemplateId,
-      eliceCourseId: courseId
-    }, {
-      signal
-    })])),
-    cacheTime: 0,
-    keepPreviousData: true,
-    refetchOnWindowFocus: false
-  });
+    _useQuery$data = _useQuery.data,
+    _useQuery$data2 = _useQuery$data === void 0 ? DEFAULT_DATA : _useQuery$data,
+    _useQuery$data3 = _rollupPluginBabelHelpers.slicedToArray(_useQuery$data2, 3),
+    runbox = _useQuery$data3[0],
+    runtime = _useQuery$data3[1],
+    runtimeTemplate = _useQuery$data3[2],
+    isInitialLoading = _useQuery.isInitialLoading,
+    isError = _useQuery.isError,
+    refetch = _useQuery.refetch;
   //
   //
   //
   if (isInitialLoading) {
-    return React.createElement(StyledRunboxContainer, null, React.createElement(blocks.Spinner, null));
+    return jsxRuntime.jsx(StyledRunboxContainer, {
+      children: jsxRuntime.jsx(blocks.Spinner, {})
+    });
   }
   if (isError) {
-    return React.createElement(StyledRunboxContainer, null, React.createElement(material.Stack, {
-      gap: "1.5rem"
-    }, React.createElement(material.Typography, {
-      variant: "h6"
-    }, intl$1.formatMessage({
-      id: 'runbox.runtime.message.startError'
-    })), React.createElement(material.Stack, {
-      gap: "0.5rem"
-    }, React.createElement(material.Button, {
-      startIcon: React.createElement(iconsMaterial.Refresh, null),
-      onClick: () => refetch()
-    }, intl$1.formatMessage({
-      id: 'runbox.common.retry'
-    })), typeof showMessenger === 'function' ? React.createElement(material.Button, {
-      variant: "outlined",
-      onClick: () => showMessenger()
-    }, intl$1.formatMessage({
-      id: 'runbox.common.support'
-    })) : null)));
+    return jsxRuntime.jsx(StyledRunboxContainer, {
+      children: jsxRuntime.jsxs(material.Stack, {
+        gap: "1.5rem",
+        children: [jsxRuntime.jsx(material.Typography, {
+          variant: "h6",
+          children: intl$1.formatMessage({
+            id: 'runbox.runtime.message.startError'
+          })
+        }), jsxRuntime.jsxs(material.Stack, {
+          gap: "0.5rem",
+          children: [jsxRuntime.jsx(material.Button, {
+            startIcon: jsxRuntime.jsx(iconsMaterial.Refresh, {}),
+            onClick: function onClick() {
+              return refetch();
+            },
+            children: intl$1.formatMessage({
+              id: 'runbox.common.retry'
+            })
+          }), typeof showMessenger === 'function' ? jsxRuntime.jsx(material.Button, {
+            variant: "outlined",
+            onClick: function onClick() {
+              return showMessenger();
+            },
+            children: intl$1.formatMessage({
+              id: 'runbox.common.support'
+            })
+          }) : null]
+        })]
+      })
+    });
   }
   if (!runbox || !runtimeTemplate) {
     return null;
   }
-  const props = {
-    runbox,
-    runtime,
-    runtimeTemplate,
-    courseId,
-    refetch
+  var props = {
+    runbox: runbox,
+    runtime: runtime,
+    runtimeTemplate: runtimeTemplate,
+    courseId: courseId,
+    refetch: refetch
   };
-  return React.createElement(MaterialRunboxCommandContext.default, {
+  return jsxRuntime.jsx(MaterialRunboxCommandContext.default, {
     runtime: runtime,
-    courseId: courseId
-  }, React.createElement(runboxClient.EliceRunboxProvider, {
-    runboxId: runbox.id,
-    runboxApiHeartbeat: ({
-      id,
-      signal
-    }) => materialRunboxApi.runbox.runboxRunboxIdHeartbeatPost({
-      runboxId: id,
-      eliceCourseId: courseId
-    }, {
-      signal
-    }),
-    runboxApiQuota: ({
-      id,
-      signal
-    }) => materialRunboxApi.runbox.runboxRunboxIdQuotaGet({
-      runboxId: id,
-      eliceCourseId: courseId
-    }, {
-      signal
-    }),
-    onRunboxRefetchRequest: refetch
-  }, React.createElement(StyledRunboxContainer, null, React.createElement(MaterialRunboxHeader.default, Object.assign({}, props)), React.createElement(MaterialRunboxBody.default, Object.assign({}, props)), React.createElement(MaterialRunboxFooter.default, Object.assign({}, props)))));
+    courseId: courseId,
+    children: jsxRuntime.jsx(runboxClient.EliceRunboxProvider, {
+      runboxId: runbox.id,
+      runboxApiHeartbeat: function runboxApiHeartbeat(_ref3) {
+        var id = _ref3.id,
+          signal = _ref3.signal;
+        return materialRunboxApi.runbox.runboxRunboxIdHeartbeatPost({
+          runboxId: id,
+          eliceCourseId: courseId
+        }, {
+          signal: signal
+        });
+      },
+      runboxApiQuota: function runboxApiQuota(_ref4) {
+        var id = _ref4.id,
+          signal = _ref4.signal;
+        return materialRunboxApi.runbox.runboxRunboxIdQuotaGet({
+          runboxId: id,
+          eliceCourseId: courseId
+        }, {
+          signal: signal
+        });
+      },
+      onRunboxRefetchRequest: refetch,
+      children: jsxRuntime.jsxs(StyledRunboxContainer, {
+        children: [jsxRuntime.jsx(MaterialRunboxHeader.default, Object.assign({}, props)), jsxRuntime.jsx(MaterialRunboxBody.default, Object.assign({}, props)), jsxRuntime.jsx(MaterialRunboxFooter.default, Object.assign({}, props))]
+      })
+    })
+  });
 };
 
 exports.default = MaterialRunboxContent;

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

@@ -3,50 +3,59 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _styled = require('@emotion/styled/base');
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var runboxClient = require('@elice/runbox-client');
 var material = require('@mui/material');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
+
 //
 //
 //
-const StyledFooter = /*#__PURE__*/_styled("div", {
+var StyledFooter = /*#__PURE__*/_styled__default.default("div", {
   target: "e9lbhtr0"
-})("position:relative;flex:0 0 2rem;display:flex;justify-content:space-between;align-items:center;padding:0 1rem;width:100%;border-top:1px solid ", ({
-  theme
-}) => theme.palette.divider, ";");
+})("position:relative;flex:0 0 2rem;display:flex;justify-content:space-between;align-items:center;padding:0 1rem;width:100%;border-top:1px solid ", function (_ref) {
+  var theme = _ref.theme;
+  return theme.palette.divider;
+}, ";");
 //
 //
 //
-const MaterialRunboxFooter = ({
-  runtimeTemplate
-}) => {
+var MaterialRunboxFooter = function MaterialRunboxFooter(_ref2) {
+  var runtimeTemplate = _ref2.runtimeTemplate;
   /**
    * Resource stats
    */
-  const renderFooterResourceStats = () => {
+  var renderFooterResourceStats = function renderFooterResourceStats() {
     var _a, _b;
-    return React.createElement(material.Box, null, React.createElement(runboxClient.EliceRunboxResourceStat, {
-      gpu: ((_b = (_a = runtimeTemplate.gpus) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0
-    }));
+    return jsxRuntime.jsx(material.Box, {
+      children: jsxRuntime.jsx(runboxClient.EliceRunboxResourceStat, {
+        gpu: ((_b = (_a = runtimeTemplate.gpus) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0
+      })
+    });
   };
   /**
    * Status
    */
-  const renderFooterStatus = () => {
-    return React.createElement(material.Stack, {
+  var renderFooterStatus = function renderFooterStatus() {
+    return jsxRuntime.jsxs(material.Stack, {
       direction: "row",
       gap: "0.5rem",
-      divider: React.createElement(material.Divider, {
+      divider: jsxRuntime.jsx(material.Divider, {
         orientation: "vertical",
         flexItem: true
-      })
-    }, React.createElement(runboxClient.EliceRunboxRemainingTimer, null), React.createElement(runboxClient.EliceRunboxNetworkStat, null), React.createElement(runboxClient.EliceRunboxRunningStatus, null));
+      }),
+      children: [jsxRuntime.jsx(runboxClient.EliceRunboxRemainingTimer, {}), jsxRuntime.jsx(runboxClient.EliceRunboxNetworkStat, {}), jsxRuntime.jsx(runboxClient.EliceRunboxRunningStatus, {})]
+    });
   };
   //
   //
   //
-  return React.createElement(StyledFooter, null, renderFooterResourceStats(), renderFooterStatus());
+  return jsxRuntime.jsxs(StyledFooter, {
+    children: [renderFooterResourceStats(), renderFooterStatus()]
+  });
 };
 
 exports.default = MaterialRunboxFooter;

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

@@ -2,7 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var _styled = require('@emotion/styled/base');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var intl = require('@elice/intl');
 var muiElements = require('@elice/mui-elements');
@@ -19,75 +21,83 @@ require('./contexts/MaterialRunboxCommandContext.js');
 var MaterialRunboxContext = require('./contexts/MaterialRunboxContext.js');
 var runbox_logo = require('../../assets/runbox_logo.png.js');
 
-const StyledHeader = /*#__PURE__*/_styled("div", {
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var StyledHeader = /*#__PURE__*/_styled__default.default("div", {
   target: "e110d0bp0"
-})("position:relative;flex:0 0 3rem;display:flex;justify-content:space-between;align-items:center;padding:0 1rem;width:100%;border-bottom:1px solid ", ({
-  theme
-}) => theme.palette.divider, ";overflow:hidden;");
+})("position:relative;flex:0 0 3rem;display:flex;justify-content:space-between;align-items:center;padding:0 1rem;width:100%;border-bottom:1px solid ", function (_ref) {
+  var theme = _ref.theme;
+  return theme.palette.divider;
+}, ";overflow:hidden;");
 //
 //
 //
-const MaterialRunboxHeader = ({
-  runbox,
-  runtime,
-  runtimeTemplate,
-  courseId,
-  refetch
-}) => {
-  const intl$1 = intl.useRawEliceIntl();
-  const {
-    enableAutoShutdownToggle
-  } = MaterialRunboxContext.useMaterialRunboxContext();
-  const [menuAnchorEl, setMenuAnchorEl] = React.useState(null);
-  const {
-    status
-  } = runboxClient.useEliceRunboxRunning();
-  const isRunboxRunning = status === 'running';
+var MaterialRunboxHeader = function MaterialRunboxHeader(_ref2) {
+  var runbox = _ref2.runbox,
+    runtime = _ref2.runtime,
+    runtimeTemplate = _ref2.runtimeTemplate,
+    courseId = _ref2.courseId,
+    refetch = _ref2.refetch;
+  var intl$1 = intl.useRawEliceIntl();
+  var _useMaterialRunboxCon = MaterialRunboxContext.useMaterialRunboxContext(),
+    enableAutoShutdownToggle = _useMaterialRunboxCon.enableAutoShutdownToggle;
+  var _React$useState = React__default.default.useState(null),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    menuAnchorEl = _React$useState2[0],
+    setMenuAnchorEl = _React$useState2[1];
+  var _useEliceRunboxRunnin = runboxClient.useEliceRunboxRunning(),
+    status = _useEliceRunboxRunnin.status;
+  var isRunboxRunning = status === 'running';
   /**
    *
    */
-  const handleMenuClose = () => {
+  var handleMenuClose = function handleMenuClose() {
     setMenuAnchorEl(null);
   };
-  const materialRunboxApi = MaterialRunboxApiContext.useMaterialRunboxApiContext();
-  const {
-    data: leaderboardSubmitInfo,
-    isLoading: isLeaderboardSubmitInfoLoading
-  } = reactQuery.useQuery({
-    queryKey: ['eliceMaterialRunboxRunboxApi.runboxRunboxIdSubmitInfoGet', {
-      courseId,
-      runtime
-    }],
-    queryFn: ({
-      signal
-    }) => materialRunboxApi.runbox.runboxRunboxIdSubmitInfoGet({
-      eliceCourseId: courseId,
-      runboxId: runtime === null || runtime === void 0 ? void 0 : runtime.runboxId
-    }, {
-      signal
+  var materialRunboxApi = MaterialRunboxApiContext.useMaterialRunboxApiContext();
+  var _useQuery = reactQuery.useQuery({
+      queryKey: ['eliceMaterialRunboxRunboxApi.runboxRunboxIdSubmitInfoGet', {
+        courseId: courseId,
+        runtime: runtime
+      }],
+      queryFn: function queryFn(_ref3) {
+        var signal = _ref3.signal;
+        return materialRunboxApi.runbox.runboxRunboxIdSubmitInfoGet({
+          eliceCourseId: courseId,
+          runboxId: runtime === null || runtime === void 0 ? void 0 : runtime.runboxId
+        }, {
+          signal: signal
+        });
+      },
+      refetchInterval: function refetchInterval(data) {
+        return !(data === null || data === void 0 ? void 0 : data.remainSubmitCount) ? false : 5 * 1000;
+      },
+      enabled: Boolean(runtime === null || runtime === void 0 ? void 0 : runtime.runboxId),
+      retry: false
     }),
-    refetchInterval: data => !(data === null || data === void 0 ? void 0 : data.remainSubmitCount) ? false : 5 * 1000,
-    enabled: Boolean(runtime === null || runtime === void 0 ? void 0 : runtime.runboxId),
-    retry: false
-  });
+    leaderboardSubmitInfo = _useQuery.data,
+    isLeaderboardSubmitInfoLoading = _useQuery.isLoading;
   /**
    *
    */
-  const renderHeaderSubmitInfo = () => {
-    const remainSubmitCount = leaderboardSubmitInfo === null || leaderboardSubmitInfo === void 0 ? void 0 : leaderboardSubmitInfo.remainSubmitCount;
-    const totalSubmitCount = leaderboardSubmitInfo === null || leaderboardSubmitInfo === void 0 ? void 0 : leaderboardSubmitInfo.submitCountLimit;
-    const isDailyLimitEnabled = leaderboardSubmitInfo === null || leaderboardSubmitInfo === void 0 ? void 0 : leaderboardSubmitInfo.dailyLimitEnabled;
-    const isIndividualTypeLeaderboard = (leaderboardSubmitInfo === null || leaderboardSubmitInfo === void 0 ? void 0 : leaderboardSubmitInfo.entryType) === types.enums.LeaderboardEntryType.Individual;
+  var renderHeaderSubmitInfo = function renderHeaderSubmitInfo() {
+    var remainSubmitCount = leaderboardSubmitInfo === null || leaderboardSubmitInfo === void 0 ? void 0 : leaderboardSubmitInfo.remainSubmitCount;
+    var totalSubmitCount = leaderboardSubmitInfo === null || leaderboardSubmitInfo === void 0 ? void 0 : leaderboardSubmitInfo.submitCountLimit;
+    var isDailyLimitEnabled = leaderboardSubmitInfo === null || leaderboardSubmitInfo === void 0 ? void 0 : leaderboardSubmitInfo.dailyLimitEnabled;
+    var isIndividualTypeLeaderboard = (leaderboardSubmitInfo === null || leaderboardSubmitInfo === void 0 ? void 0 : leaderboardSubmitInfo.entryType) === types.enums.LeaderboardEntryType.Individual;
     if (isLeaderboardSubmitInfoLoading || remainSubmitCount === null) {
       return null;
     }
-    return React.createElement(muiElements.Tag, {
+    return jsxRuntime.jsx(muiElements.Tag, {
       label: intl$1.formatMessage({
         id: 'runbox.header.submitInfo'
       }, {
         remainCount: remainSubmitCount,
         totalCount: totalSubmitCount,
-        isDailyLimitEnabled,
+        isDailyLimitEnabled: isDailyLimitEnabled,
         isIndividual: isIndividualTypeLeaderboard
       }),
       variant: "muted",
@@ -97,11 +107,11 @@ const MaterialRunboxHeader = ({
   /**
    *
    */
-  const renderHeaderActionAutoShutdown = () => {
+  var renderHeaderActionAutoShutdown = function renderHeaderActionAutoShutdown() {
     if (!enableAutoShutdownToggle) {
       return null;
     }
-    return React.createElement(MaterialRunboxActionAutoShutdown.default, {
+    return jsxRuntime.jsx(MaterialRunboxActionAutoShutdown.default, {
       runtime: runtime,
       runtimeTemplate: runtimeTemplate,
       courseId: courseId,
@@ -111,11 +121,11 @@ const MaterialRunboxHeader = ({
   /**
    *
    */
-  const renderHeaderActionGrade = () => {
+  var renderHeaderActionGrade = function renderHeaderActionGrade() {
     if (!runbox.submission.enabled) {
       return null;
     }
-    return React.createElement(MaterialRunboxActionGrade.default, {
+    return jsxRuntime.jsx(MaterialRunboxActionGrade.default, {
       runtime: runtime,
       courseId: courseId
     });
@@ -123,45 +133,51 @@ const MaterialRunboxHeader = ({
   /**
    *
    */
-  const renderOptionMenu = () => {
-    return React.createElement(React.Fragment, null, React.createElement(material.IconButton, {
-      disabled: !isRunboxRunning,
-      onClick: e => {
-        if (Boolean(menuAnchorEl)) {
-          setMenuAnchorEl(null);
-        } else {
-          setMenuAnchorEl(e.currentTarget);
-        }
-      }
-    }, React.createElement(muiElements.EliceIcon, {
-      icon: proSolidSvgIcons.faEllipsisVertical
-    })), React.createElement(MaterialRunboxActionMenu.default, {
-      runbox: runbox,
-      runtime: runtime,
-      courseId: courseId,
-      menuAnchorEl: menuAnchorEl,
-      refetch: refetch,
-      handleMenuClose: handleMenuClose
-    }));
+  var renderOptionMenu = function renderOptionMenu() {
+    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(material.IconButton, {
+        disabled: !isRunboxRunning,
+        onClick: function onClick(e) {
+          if (Boolean(menuAnchorEl)) {
+            setMenuAnchorEl(null);
+          } else {
+            setMenuAnchorEl(e.currentTarget);
+          }
+        },
+        children: jsxRuntime.jsx(muiElements.EliceIcon, {
+          icon: proSolidSvgIcons.faEllipsisVertical
+        })
+      }), jsxRuntime.jsx(MaterialRunboxActionMenu.default, {
+        runbox: runbox,
+        runtime: runtime,
+        courseId: courseId,
+        menuAnchorEl: menuAnchorEl,
+        refetch: refetch,
+        handleMenuClose: handleMenuClose
+      })]
+    });
   };
   //
   //
   //
-  return React.createElement(StyledHeader, null, React.createElement(material.Box, {
-    component: "img",
-    src: runbox_logo.default,
-    alt: "elice runbox",
-    sx: {
-      width: 'auto',
-      height: '100%',
-      imageRendering: 'auto',
-      padding: '0.465rem 0'
-    }
-  }), React.createElement(material.Stack, {
-    direction: "row",
-    alignItems: "center",
-    gap: "0.5rem"
-  }, renderHeaderSubmitInfo(), renderHeaderActionAutoShutdown(), renderOptionMenu(), renderHeaderActionGrade()));
+  return jsxRuntime.jsxs(StyledHeader, {
+    children: [jsxRuntime.jsx(material.Box, {
+      component: "img",
+      src: runbox_logo.default,
+      alt: "elice runbox",
+      sx: {
+        width: 'auto',
+        height: '100%',
+        imageRendering: 'auto',
+        padding: '0.465rem 0'
+      }
+    }), jsxRuntime.jsxs(material.Stack, {
+      direction: "row",
+      alignItems: "center",
+      gap: "0.5rem",
+      children: [renderHeaderSubmitInfo(), renderHeaderActionAutoShutdown(), renderOptionMenu(), renderHeaderActionGrade()]
+    })]
+  });
 };
 
 exports.default = MaterialRunboxHeader;