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

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

@@ -3,18 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _styled = require('@emotion/styled/base');
-var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 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)."; }
 //
 //
 //
-var StyledRunboxBody = /*#__PURE__*/_styled__default.default("div", {
+const StyledRunboxBody = /*#__PURE__*/_styled("div", {
   target: "e9bwldp0"
 })("production" === "production" ? {
   name: "277wu0",
@@ -27,10 +23,8 @@ var StyledRunboxBody = /*#__PURE__*/_styled__default.default("div", {
 //
 //
 //
-var MaterialRunboxBody = function MaterialRunboxBody(props) {
-  return jsxRuntime.jsx(StyledRunboxBody, {
-    children: jsxRuntime.jsx(Runtime.default, Object.assign({}, props))
-  });
+const MaterialRunboxBody = props => {
+  return React.createElement(StyledRunboxBody, null, React.createElement(Runtime.default, Object.assign({}, props)));
 };
 
 exports.default = MaterialRunboxBody;

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

@@ -2,9 +2,8 @@
 
 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 blocks = require('@elice/blocks');
 var intl = require('@elice/intl');
 var runboxClient = require('@elice/runbox-client');
@@ -18,19 +17,15 @@ 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)."; }
 //
 //
 //
-var DEFAULT_DATA = [null, null, null];
+const DEFAULT_DATA = [null, null, null];
 //
 //
 //
-var StyledRunboxContainer = /*#__PURE__*/_styled__default.default("div", {
+const StyledRunboxContainer = /*#__PURE__*/_styled("div", {
   target: "eeh98mq0"
 })("production" === "production" ? {
   name: "t5t5sq",
@@ -43,146 +38,122 @@ var StyledRunboxContainer = /*#__PURE__*/_styled__default.default("div", {
 //
 //
 //
-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 MaterialRunboxContent = ({
+  runboxId,
+  courseId
+}) => {
+  const intl$1 = intl.useRawEliceIntl();
+  const {
+    showMessenger
+  } = MaterialRunboxContext.useMaterialRunboxContext();
+  const materialRunboxApi = MaterialRunboxApiContext.useMaterialRunboxApiContext();
   //
   //
   //
-  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
+  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;
     }),
-    _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;
+    // runtimeTemplate
+    materialRunboxApi.runtimeTemplate.runtimeTemplateRuntimeTemplateIdGet({
+      runtimeTemplateId: runbox.runtimeTemplateId,
+      eliceCourseId: courseId
+    }, {
+      signal
+    })])),
+    cacheTime: 0,
+    keepPreviousData: true,
+    refetchOnWindowFocus: false
+  });
   //
   //
   //
   if (isInitialLoading) {
-    return jsxRuntime.jsx(StyledRunboxContainer, {
-      children: jsxRuntime.jsx(blocks.Spinner, {})
-    });
+    return React.createElement(StyledRunboxContainer, null, React.createElement(blocks.Spinner, null));
   }
   if (isError) {
-    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]
-        })]
-      })
-    });
+    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)));
   }
   if (!runbox || !runtimeTemplate) {
     return null;
   }
-  var props = {
-    runbox: runbox,
-    runtime: runtime,
-    runtimeTemplate: runtimeTemplate,
-    courseId: courseId,
-    refetch: refetch
+  const props = {
+    runbox,
+    runtime,
+    runtimeTemplate,
+    courseId,
+    refetch
   };
-  return jsxRuntime.jsx(MaterialRunboxCommandContext.default, {
+  return React.createElement(MaterialRunboxCommandContext.default, {
     runtime: runtime,
-    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))]
-      })
-    })
-  });
+    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)))));
 };
 
 exports.default = MaterialRunboxContent;

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

@@ -3,59 +3,50 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _styled = require('@emotion/styled/base');
-var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 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);
-
 //
 //
 //
-var StyledFooter = /*#__PURE__*/_styled__default.default("div", {
+const StyledFooter = /*#__PURE__*/_styled("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 ", function (_ref) {
-  var theme = _ref.theme;
-  return 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 ", ({
+  theme
+}) => theme.palette.divider, ";");
 //
 //
 //
-var MaterialRunboxFooter = function MaterialRunboxFooter(_ref2) {
-  var runtimeTemplate = _ref2.runtimeTemplate;
+const MaterialRunboxFooter = ({
+  runtimeTemplate
+}) => {
   /**
    * Resource stats
    */
-  var renderFooterResourceStats = function renderFooterResourceStats() {
+  const renderFooterResourceStats = () => {
     var _a, _b;
-    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
-      })
-    });
+    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
+    }));
   };
   /**
    * Status
    */
-  var renderFooterStatus = function renderFooterStatus() {
-    return jsxRuntime.jsxs(material.Stack, {
+  const renderFooterStatus = () => {
+    return React.createElement(material.Stack, {
       direction: "row",
       gap: "0.5rem",
-      divider: jsxRuntime.jsx(material.Divider, {
+      divider: React.createElement(material.Divider, {
         orientation: "vertical",
         flexItem: true
-      }),
-      children: [jsxRuntime.jsx(runboxClient.EliceRunboxRemainingTimer, {}), jsxRuntime.jsx(runboxClient.EliceRunboxNetworkStat, {}), jsxRuntime.jsx(runboxClient.EliceRunboxRunningStatus, {})]
-    });
+      })
+    }, React.createElement(runboxClient.EliceRunboxRemainingTimer, null), React.createElement(runboxClient.EliceRunboxNetworkStat, null), React.createElement(runboxClient.EliceRunboxRunningStatus, null));
   };
   //
   //
   //
-  return jsxRuntime.jsxs(StyledFooter, {
-    children: [renderFooterResourceStats(), renderFooterStatus()]
-  });
+  return React.createElement(StyledFooter, null, renderFooterResourceStats(), renderFooterStatus());
 };
 
 exports.default = MaterialRunboxFooter;

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

@@ -2,9 +2,7 @@
 
 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');
@@ -21,83 +19,75 @@ require('./contexts/MaterialRunboxCommandContext.js');
 var MaterialRunboxContext = require('./contexts/MaterialRunboxContext.js');
 var runbox_logo = require('../../assets/runbox_logo.png.js');
 
-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", {
+const StyledHeader = /*#__PURE__*/_styled("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 ", function (_ref) {
-  var theme = _ref.theme;
-  return 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 ", ({
+  theme
+}) => theme.palette.divider, ";overflow:hidden;");
 //
 //
 //
-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 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 handleMenuClose = function handleMenuClose() {
+  const handleMenuClose = () => {
     setMenuAnchorEl(null);
   };
-  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
+  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
     }),
-    leaderboardSubmitInfo = _useQuery.data,
-    isLeaderboardSubmitInfoLoading = _useQuery.isLoading;
+    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
+  });
   /**
    *
    */
-  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;
+  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;
     if (isLeaderboardSubmitInfoLoading || remainSubmitCount === null) {
       return null;
     }
-    return jsxRuntime.jsx(muiElements.Tag, {
+    return React.createElement(muiElements.Tag, {
       label: intl$1.formatMessage({
         id: 'runbox.header.submitInfo'
       }, {
         remainCount: remainSubmitCount,
         totalCount: totalSubmitCount,
-        isDailyLimitEnabled: isDailyLimitEnabled,
+        isDailyLimitEnabled,
         isIndividual: isIndividualTypeLeaderboard
       }),
       variant: "muted",
@@ -107,11 +97,11 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref2) {
   /**
    *
    */
-  var renderHeaderActionAutoShutdown = function renderHeaderActionAutoShutdown() {
+  const renderHeaderActionAutoShutdown = () => {
     if (!enableAutoShutdownToggle) {
       return null;
     }
-    return jsxRuntime.jsx(MaterialRunboxActionAutoShutdown.default, {
+    return React.createElement(MaterialRunboxActionAutoShutdown.default, {
       runtime: runtime,
       runtimeTemplate: runtimeTemplate,
       courseId: courseId,
@@ -121,11 +111,11 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref2) {
   /**
    *
    */
-  var renderHeaderActionGrade = function renderHeaderActionGrade() {
+  const renderHeaderActionGrade = () => {
     if (!runbox.submission.enabled) {
       return null;
     }
-    return jsxRuntime.jsx(MaterialRunboxActionGrade.default, {
+    return React.createElement(MaterialRunboxActionGrade.default, {
       runtime: runtime,
       courseId: courseId
     });
@@ -133,51 +123,45 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref2) {
   /**
    *
    */
-  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
-      })]
-    });
+  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
+    }));
   };
   //
   //
   //
-  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()]
-    })]
-  });
+  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()));
 };
 
 exports.default = MaterialRunboxHeader;