@elice/material-runbox 1.231212.0 → 1.231228.0

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

@@ -2,12 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var _styled = require('@emotion/styled/base');
 var React = require('react');
 var reactIntl = require('react-intl');
 var blocks = require('@elice/blocks');
 var runboxClient = require('@elice/runbox-client');
-var styled = require('@emotion/styled');
 var iconsMaterial = require('@mui/icons-material');
 var material = require('@mui/material');
 var reactQuery = require('@tanstack/react-query');
@@ -18,141 +17,135 @@ var MaterialRunboxBody = require('./MaterialRunboxBody.js');
 var MaterialRunboxFooter = require('./MaterialRunboxFooter.js');
 var MaterialRunboxHeader = require('./MaterialRunboxHeader.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-var _templateObject;
+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 = styled__default["default"].div(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n"])));
+const StyledRunboxContainer = /*#__PURE__*/_styled("div", {
+  target: "eeh98mq0"
+})("production" === "production" ? {
+  name: "t5t5sq",
+  styles: "display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%"
+} : {
+  name: "t5t5sq",
+  styles: "display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 //
 //
 //
-var MaterialRunboxContent = function MaterialRunboxContent(_ref) {
-  var runboxId = _ref.runboxId,
-    courseId = _ref.courseId;
-  var _useMaterialRunboxCon = MaterialRunboxContext.useMaterialRunboxContext(),
-    locale = _useMaterialRunboxCon.locale,
-    showMessenger = _useMaterialRunboxCon.showMessenger;
-  var materialRunboxApi = MaterialRunboxApiContext.useMaterialRunboxApiContext();
+const MaterialRunboxContent = ({
+  runboxId,
+  courseId
+}) => {
+  const {
+    locale,
+    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 React__default["default"].createElement(StyledRunboxContainer, null, React__default["default"].createElement(blocks.Spinner, null));
+    return React.createElement(StyledRunboxContainer, null, React.createElement(blocks.Spinner, null));
   }
   if (isError) {
-    return React__default["default"].createElement(StyledRunboxContainer, null, React__default["default"].createElement(material.Stack, {
+    return React.createElement(StyledRunboxContainer, null, React.createElement(material.Stack, {
       gap: "1.5rem"
-    }, React__default["default"].createElement(material.Typography, {
+    }, React.createElement(material.Typography, {
       variant: "h6"
-    }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+    }, React.createElement(reactIntl.FormattedMessage, {
       id: "runbox.runtime.message.startError"
-    })), React__default["default"].createElement(material.Stack, {
+    })), React.createElement(material.Stack, {
       gap: "0.5rem"
-    }, React__default["default"].createElement(material.Button, {
-      startIcon: React__default["default"].createElement(iconsMaterial.Refresh, null),
-      onClick: function onClick() {
-        return refetch();
-      }
-    }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+    }, React.createElement(material.Button, {
+      startIcon: React.createElement(iconsMaterial.Refresh, null),
+      onClick: () => refetch()
+    }, React.createElement(reactIntl.FormattedMessage, {
       id: "runbox.common.retry"
-    })), typeof showMessenger === 'function' ? React__default["default"].createElement(material.Button, {
+    })), typeof showMessenger === 'function' ? React.createElement(material.Button, {
       variant: "outlined",
-      onClick: function onClick() {
-        return showMessenger();
-      }
-    }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+      onClick: () => showMessenger()
+    }, React.createElement(reactIntl.FormattedMessage, {
       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 React__default["default"].createElement(MaterialRunboxCommandContext["default"], {
+  return React.createElement(MaterialRunboxCommandContext.default, {
     runtime: runtime,
     courseId: courseId
-  }, React__default["default"].createElement(runboxClient.EliceRunboxProvider, {
+  }, React.createElement(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
-      });
-    },
+    runboxApiHeartbeat: ({
+      id,
+      signal
+    }) => materialRunboxApi.runbox.runboxRunboxIdHeartbeatPost({
+      runboxId: id,
+      eliceCourseId: courseId
+    }, {
+      signal
+    }),
     locale: locale,
     onRunboxRefetchRequest: refetch
-  }, React__default["default"].createElement(StyledRunboxContainer, null, React__default["default"].createElement(MaterialRunboxHeader["default"], Object.assign({}, props)), React__default["default"].createElement(MaterialRunboxBody["default"], Object.assign({}, props)), React__default["default"].createElement(MaterialRunboxFooter["default"], Object.assign({}, props)))));
+  }, 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;
+exports.default = MaterialRunboxContent;

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

@@ -2,56 +2,51 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var _styled = require('@emotion/styled/base');
 var React = require('react');
 var runboxClient = require('@elice/runbox-client');
-var styled = require('@emotion/styled');
 var material = require('@mui/material');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-var _templateObject;
 //
 //
 //
-var StyledFooter = styled__default["default"].div(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  position: relative;\n  flex: 0 0 2rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 1rem;\n  width: 100%;\n  border-top: 1px solid ", ";\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.palette.divider;
-});
+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 ", ({
+  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 React__default["default"].createElement(material.Box, null, React__default["default"].createElement(runboxClient.EliceRunboxResourceStat, {
+    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 React__default["default"].createElement(material.Stack, {
+  const renderFooterStatus = () => {
+    return React.createElement(material.Stack, {
       direction: "row",
       gap: "0.5rem",
-      divider: React__default["default"].createElement(material.Divider, {
+      divider: React.createElement(material.Divider, {
         orientation: "vertical",
         flexItem: true
       })
-    }, React__default["default"].createElement(runboxClient.EliceRunboxRemainingTimer, null), React__default["default"].createElement(runboxClient.EliceRunboxNetworkStat, null), React__default["default"].createElement(runboxClient.EliceRunboxRunningStatus, null));
+    }, React.createElement(runboxClient.EliceRunboxRemainingTimer, null), React.createElement(runboxClient.EliceRunboxNetworkStat, null), React.createElement(runboxClient.EliceRunboxRunningStatus, null));
   };
   //
   //
   //
-  return React__default["default"].createElement(StyledFooter, null, renderFooterResourceStats(), renderFooterStatus());
+  return React.createElement(StyledFooter, null, renderFooterResourceStats(), renderFooterStatus());
 };
 
-exports["default"] = MaterialRunboxFooter;
+exports.default = MaterialRunboxFooter;

package/cjs/components/material-runbox/MaterialRunboxHeader.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
 import type { RuntimeProps } from './runtime/Runtime';
+export type RunboxHeaderOptionProps = {
+    onMenuClose: () => void;
+};
 declare const MaterialRunboxHeader: React.FC<RuntimeProps>;
 export default MaterialRunboxHeader;

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

@@ -2,81 +2,81 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var _styled = require('@emotion/styled/base');
 var React = require('react');
 var reactIntl = require('react-intl');
 var muiElements = require('@elice/mui-elements');
-var styled = require('@emotion/styled');
+var runboxClient = require('@elice/runbox-client');
+var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
 var material = require('@mui/material');
 var reactQuery = require('@tanstack/react-query');
 var MaterialRunboxActionAutoShutdown = require('./actions/MaterialRunboxActionAutoShutdown.js');
 var MaterialRunboxActionGrade = require('./actions/MaterialRunboxActionGrade.js');
-var MaterialRunboxActionReset = require('./actions/MaterialRunboxActionReset.js');
-var MaterialRunboxActionRestart = require('./actions/MaterialRunboxActionRestart.js');
-var MaterialRunboxActionShare = require('./actions/MaterialRunboxActionShare.js');
+var MaterialRunboxActionMenu = require('./actions/MaterialRunboxActionMenu.js');
 var MaterialRunboxApiContext = require('./contexts/MaterialRunboxApiContext.js');
 require('./contexts/MaterialRunboxCommandContext.js');
 var MaterialRunboxContext = require('./contexts/MaterialRunboxContext.js');
 var runbox_logo = require('../../assets/runbox_logo.png.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-var _templateObject;
-//
-//
+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 ", ({
+  theme
+}) => theme.palette.divider, ";overflow:hidden;");
 //
-var StyledHeader = styled__default["default"].div(_templateObject || (_templateObject = _rollupPluginBabelHelpers.taggedTemplateLiteral(["\n  position: relative;\n  flex: 0 0 3rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 1rem;\n  width: 100%;\n  border-bottom: 1px solid ", ";\n  overflow: hidden;\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.palette.divider;
-});
 //
 //
-//
-var MaterialRunboxHeader = function MaterialRunboxHeader(_ref2) {
-  var runbox = _ref2.runbox,
-    runtime = _ref2.runtime,
-    runtimeTemplate = _ref2.runtimeTemplate,
-    courseId = _ref2.courseId,
-    refetch = _ref2.refetch;
-  var _useMaterialRunboxCon = MaterialRunboxContext.useMaterialRunboxContext(),
-    enableAutoShutdownToggle = _useMaterialRunboxCon.enableAutoShutdownToggle,
-    enableUrlShare = _useMaterialRunboxCon.enableUrlShare;
-  var materialRunboxApi = MaterialRunboxApiContext.useMaterialRunboxApiContext();
-  var leaderboardSubmitInfoQuery = reactQuery.useQuery({
+const MaterialRunboxHeader = ({
+  runbox,
+  runtime,
+  runtimeTemplate,
+  courseId,
+  refetch
+}) => {
+  const {
+    enableAutoShutdownToggle
+  } = MaterialRunboxContext.useMaterialRunboxContext();
+  const [menuAnchorEl, setMenuAnchorEl] = React.useState(null);
+  const {
+    status
+  } = runboxClient.useEliceRunboxRunning();
+  const isRunboxRunning = status === 'running';
+  /**
+   *
+   */
+  const handleMenuClose = () => {
+    setMenuAnchorEl(null);
+  };
+  const materialRunboxApi = MaterialRunboxApiContext.useMaterialRunboxApiContext();
+  const leaderboardSubmitInfoQuery = reactQuery.useQuery({
     queryKey: ['eliceMaterialRunboxRunboxApi.runboxRunboxIdSubmitInfoGet', {
-      courseId: courseId,
-      runtime: runtime
+      courseId,
+      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;
-    },
+    queryFn: ({
+      signal
+    }) => materialRunboxApi.runbox.runboxRunboxIdSubmitInfoGet({
+      eliceCourseId: courseId,
+      runboxId: runtime === null || runtime === void 0 ? void 0 : runtime.runboxId
+    }, {
+      signal
+    }),
+    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() {
+  const renderHeaderSubmitInfo = () => {
     var _a, _b;
-    var remainSubmitCount = (_a = leaderboardSubmitInfoQuery.data) === null || _a === void 0 ? void 0 : _a.remainSubmitCount;
-    var totalSubmitCount = (_b = leaderboardSubmitInfoQuery.data) === null || _b === void 0 ? void 0 : _b.submitCountLimit;
+    const remainSubmitCount = (_a = leaderboardSubmitInfoQuery.data) === null || _a === void 0 ? void 0 : _a.remainSubmitCount;
+    const totalSubmitCount = (_b = leaderboardSubmitInfoQuery.data) === null || _b === void 0 ? void 0 : _b.submitCountLimit;
     if (leaderboardSubmitInfoQuery.isInitialLoading || remainSubmitCount === null) {
       return null;
     }
-    return React__default["default"].createElement(muiElements.Tag, {
-      label: React__default["default"].createElement(reactIntl.FormattedMessage, {
+    return React.createElement(muiElements.Tag, {
+      label: React.createElement(reactIntl.FormattedMessage, {
         id: "runbox.header.submitInfo",
         values: {
           remainCount: remainSubmitCount,
@@ -90,11 +90,11 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref2) {
   /**
    *
    */
-  var renderHeaderActionAutoShutdown = function renderHeaderActionAutoShutdown() {
+  const renderHeaderActionAutoShutdown = () => {
     if (!enableAutoShutdownToggle) {
       return null;
     }
-    return React__default["default"].createElement(MaterialRunboxActionAutoShutdown["default"], {
+    return React.createElement(MaterialRunboxActionAutoShutdown.default, {
       runtime: runtime,
       runtimeTemplate: runtimeTemplate,
       courseId: courseId,
@@ -104,27 +104,11 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref2) {
   /**
    *
    */
-  var renderHeaderActionShare = function renderHeaderActionShare() {
-    if (!enableUrlShare) {
+  const renderHeaderActionGrade = () => {
+    if (!runbox.submission.enabled) {
       return null;
     }
-    return React__default["default"].createElement(MaterialRunboxActionShare["default"], null);
-  };
-  /**
-   *
-   */
-  var renderHeaderActionRestart = function renderHeaderActionRestart() {
-    return React__default["default"].createElement(MaterialRunboxActionRestart["default"], {
-      runbox: runbox,
-      courseId: courseId,
-      refetch: refetch
-    });
-  };
-  /**
-   *
-   */
-  var renderHeaderActionReset = function renderHeaderActionReset() {
-    return React__default["default"].createElement(MaterialRunboxActionReset["default"], {
+    return React.createElement(MaterialRunboxActionGrade.default, {
       runtime: runtime,
       courseId: courseId
     });
@@ -132,21 +116,33 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref2) {
   /**
    *
    */
-  var renderHeaderActionGrade = function renderHeaderActionGrade() {
-    if (!runbox.submission.enabled) {
-      return null;
-    }
-    return React__default["default"].createElement(MaterialRunboxActionGrade["default"], {
+  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
-    });
+      courseId: courseId,
+      menuAnchorEl: menuAnchorEl,
+      refetch: refetch,
+      handleMenuClose: handleMenuClose
+    }));
   };
   //
   //
   //
-  return React__default["default"].createElement(StyledHeader, null, React__default["default"].createElement(material.Box, {
+  return React.createElement(StyledHeader, null, React.createElement(material.Box, {
     component: "img",
-    src: runbox_logo["default"],
+    src: runbox_logo.default,
     alt: "elice runbox",
     sx: {
       width: 'auto',
@@ -154,11 +150,11 @@ var MaterialRunboxHeader = function MaterialRunboxHeader(_ref2) {
       imageRendering: 'auto',
       padding: '0.465rem 0'
     }
-  }), React__default["default"].createElement(material.Stack, {
+  }), React.createElement(material.Stack, {
     direction: "row",
     alignItems: "center",
     gap: "0.5rem"
-  }, renderHeaderSubmitInfo(), renderHeaderActionAutoShutdown(), renderHeaderActionShare(), renderHeaderActionRestart(), renderHeaderActionReset(), renderHeaderActionGrade()));
+  }, renderHeaderSubmitInfo(), renderHeaderActionAutoShutdown(), renderOptionMenu(), renderHeaderActionGrade()));
 };
 
-exports["default"] = MaterialRunboxHeader;
+exports.default = MaterialRunboxHeader;