@elice/material-exercise 1.230328.0 → 1.230418.1

package/cjs/components/material-exercise/exercise-menu/ExerciseMenuStdioFileBrowser.js

@@ -1,5 +1,8 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var reactIntl = require('react-intl');
 var blocks = require('@elice/blocks');
@@ -18,47 +21,45 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const IMAGE_NEW_WIN_IFRAME_STYLE = 'border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;';
-
-const ExerciseMenuStdioFileBrowser = () => {
-  const intl = reactIntl.useIntl();
-  const [open, setOpen] = React__default["default"].useState(false);
-  const anchorRef = React__default["default"].useRef(null);
-  const stdioFiles = recoil.useRecoilValue(recoil$1.exerciseRunnerStdioFilesState);
+var IMAGE_NEW_WIN_IFRAME_STYLE = 'border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;';
+var ExerciseMenuStdioFileBrowser = function ExerciseMenuStdioFileBrowser() {
+  var intl = reactIntl.useIntl();
+  var _React$useState = React__default["default"].useState(false),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    open = _React$useState2[0],
+    setOpen = _React$useState2[1];
+  var anchorRef = React__default["default"].useRef(null);
+  var stdioFiles = recoil.useRecoilValue(recoil$1.exerciseRunnerStdioFilesState);
   /**
    * Open image as new window.
    */
-
-  const handleImageFileClick = e => {
+  var handleImageFileClick = function handleImageFileClick(e) {
     e.preventDefault();
-    const win = window.open('about:blank', e.currentTarget.target);
-
+    var win = window.open('about:blank', e.currentTarget.target);
     if (win) {
       // since `Not allowed to navigate top frame to data URL:` error thrown by browser,
       // use iframe to display image at new window.
-      win.document.write(`<iframe src="${e.currentTarget.href}" frameborder="0" style="${IMAGE_NEW_WIN_IFRAME_STYLE}" allowfullscreen></iframe>`);
+      win.document.write("<iframe src=\"".concat(e.currentTarget.href, "\" frameborder=\"0\" style=\"").concat(IMAGE_NEW_WIN_IFRAME_STYLE, "\" allowfullscreen></iframe>"));
       win.focus();
     }
-  }; //
+  };
+  //
   // Open stdio file browser, on file changes.
   //
-
-
-  React__default["default"].useEffect(() => {
+  React__default["default"].useEffect(function () {
     if (stdioFiles && stdioFiles.length > 0) {
       setOpen(true);
     }
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   [stdioFiles]);
   /**
    * Image type stdio file.
    */
-
-  const renderStdioFileListItemImage = (key, f) => {
+  var renderStdioFileListItemImage = function renderStdioFileListItemImage(key, f) {
     var _a;
-
-    const ext = (_a = f.mime) === null || _a === void 0 ? void 0 : _a.split('/').pop();
-    const filename = ext ? `image_output.${ext}` : 'image_output';
+    var ext = (_a = f.mime) === null || _a === void 0 ? void 0 : _a.split('/').pop();
+    var filename = ext ? "image_output.".concat(ext) : 'image_output';
     return React__default["default"].createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyListItem, {
       key: key
     }, React__default["default"].createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyListItemContentImageWrap, {
@@ -79,10 +80,8 @@ const ExerciseMenuStdioFileBrowser = () => {
   /**
    * File type stdio file.
    */
-
-
-  const renderStdioFileListFile = (key, f) => {
-    const size = (f.data.length / 1024).toFixed(2);
+  var renderStdioFileListFile = function renderStdioFileListFile(key, f) {
+    var size = (f.data.length / 1024).toFixed(2);
     return React__default["default"].createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyListItem, {
       key: key
     }, React__default["default"].createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyListItemContentFile, null, React__default["default"].createElement(blocks.Text, {
@@ -90,7 +89,7 @@ const ExerciseMenuStdioFileBrowser = () => {
       role: "white",
       size: "small"
     }), React__default["default"].createElement(blocks.Text, {
-      children: `${size} KB`,
+      children: "".concat(size, " KB"),
       role: "gray4",
       size: "tiny"
     })), React__default["default"].createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyListItemDownloadButton, {
@@ -103,9 +102,7 @@ const ExerciseMenuStdioFileBrowser = () => {
   /**
    * Empty list of stdio files.
    */
-
-
-  const renderStdioFileListEmpty = () => {
+  var renderStdioFileListEmpty = function renderStdioFileListEmpty() {
     return React__default["default"].createElement(blocks.Flex, {
       column: true,
       align: "center",
@@ -129,21 +126,16 @@ const ExerciseMenuStdioFileBrowser = () => {
   /**
    * List of stdio files.
    */
-
-
-  const renderStdioFileList = () => {
+  var renderStdioFileList = function renderStdioFileList() {
     if (!stdioFiles || !stdioFiles.length) {
       return renderStdioFileListEmpty();
     }
-
-    return React__default["default"].createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyList, null, stdioFiles.map((f, index) => {
+    return React__default["default"].createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBodyList, null, stdioFiles.map(function (f, index) {
       switch (f.type) {
         case 'image':
           return renderStdioFileListItemImage(index, f);
-
         case 'file':
           return renderStdioFileListFile(index, f);
-
         default:
           return null;
       }
@@ -152,9 +144,7 @@ const ExerciseMenuStdioFileBrowser = () => {
   /**
    * Popover header.
    */
-
-
-  const renderStdioFilePopoverHeader = () => {
+  var renderStdioFilePopoverHeader = function renderStdioFilePopoverHeader() {
     return React__default["default"].createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverHeader, null, React__default["default"].createElement(blocks.Flex, {
       align: "center"
     }, React__default["default"].createElement(blocks.Text, {
@@ -174,15 +164,15 @@ const ExerciseMenuStdioFileBrowser = () => {
       size: "micro",
       border: false,
       transparent: true,
-      onClick: () => setOpen(false)
+      onClick: function onClick() {
+        return setOpen(false);
+      }
     }));
   };
   /**
    * Popover body.
    */
-
-
-  const renderStdioFilePopoverBody = () => {
+  var renderStdioFilePopoverBody = function renderStdioFilePopoverBody() {
     return React__default["default"].createElement(ExerciseMenuStdioFileBrowser_styled.StyledFilePopoverBody, {
       children: renderStdioFileList()
     });
@@ -190,9 +180,7 @@ const ExerciseMenuStdioFileBrowser = () => {
   /**
    * Popover.
    */
-
-
-  const renderStdioFilePopover = () => {
+  var renderStdioFilePopover = function renderStdioFilePopover() {
     return React__default["default"].createElement(blocks.Popover, {
       open: open,
       anchorEl: anchorRef.current,
@@ -205,27 +193,28 @@ const ExerciseMenuStdioFileBrowser = () => {
   /**
    * Popover toggle button.
    */
-
-
-  const renderStdioFilePopoverToggleButton = () => {
-    return React__default["default"].createElement(ExerciseMenuButton, {
+  var renderStdioFilePopoverToggleButton = function renderStdioFilePopoverToggleButton() {
+    return React__default["default"].createElement(ExerciseMenuButton["default"], {
       icon: icons.eilAttachment,
       active: open,
       title: intl.formatMessage({
         id: 'exerciseMenu.stdioFileBrowser.button.tooltip'
       }),
-      onClick: () => setOpen(prev => !prev),
+      onClick: function onClick() {
+        return setOpen(function (prev) {
+          return !prev;
+        });
+      },
       ref: anchorRef
     }, React__default["default"].createElement(ExerciseMenuStdioFileBrowser_styled.StyledMenuButtonFileCount, {
       role: "white",
       value: stdioFiles.length
     }));
-  }; //
+  };
+  //
   //
   //
-
-
   return React__default["default"].createElement(React__default["default"].Fragment, null, renderStdioFilePopover(), renderStdioFilePopoverToggleButton());
 };
 
-module.exports = ExerciseMenuStdioFileBrowser;
+exports["default"] = ExerciseMenuStdioFileBrowser;

package/cjs/components/material-exercise/exercise-menu/ExerciseMenuStdioFileBrowser.styled.js

@@ -10,40 +10,40 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const StyledMenuButtonFileCount = styled__default["default"](blocks.NotificationCount).withConfig({
+var StyledMenuButtonFileCount = styled__default["default"](blocks.NotificationCount).withConfig({
   componentId: "sc-9mtuee-0"
 })(["position:absolute;top:0.2rem;right:0.2rem;padding:0;min-width:0.625rem;height:0.625rem;font-size:0.5rem;"]);
-const StyledFilePopoverContent = styled__default["default"].div.withConfig({
+var StyledFilePopoverContent = styled__default["default"].div.withConfig({
   componentId: "sc-9mtuee-1"
 })(["display:flex;flex-direction:column;padding:0;width:252px;min-height:178px;max-height:383px;border-radius:8px;background-color:", ";overflow:hidden;"], designTokens.base.color.navy6);
-const StyledFilePopoverHeader = styled__default["default"].div.withConfig({
+var StyledFilePopoverHeader = styled__default["default"].div.withConfig({
   componentId: "sc-9mtuee-2"
 })(["flex:0 0 2.5rem;display:flex;justify-content:space-between;align-items:center;padding:0 1rem;color:white;background-color:", ";"], designTokens.base.color.navy7);
-const StyledFilePopoverBody = styled__default["default"].div.withConfig({
+var StyledFilePopoverBody = styled__default["default"].div.withConfig({
   componentId: "sc-9mtuee-3"
 })(["flex:1;overflow-x:hidden;overflow-y:auto;"]);
-const StyledFilePopoverBodyList = styled__default["default"].ul.withConfig({
+var StyledFilePopoverBodyList = styled__default["default"].ul.withConfig({
   componentId: "sc-9mtuee-4"
 })(["margin:0;padding:0.5rem;width:100%;height:100%;"]);
-const StyledFilePopoverBodyListItem = styled__default["default"].li.withConfig({
+var StyledFilePopoverBodyListItem = styled__default["default"].li.withConfig({
   componentId: "sc-9mtuee-5"
 })(["display:flex;margin-bottom:0.5rem;border-radius:0.5rem;background-color:", ";overflow:hidden;&:last-of-type{margin-bottom:0;}"], designTokens.base.color.navy5);
-const StyledFilePopoverBodyListItemDownloadButton = styled__default["default"].a.withConfig({
+var StyledFilePopoverBodyListItemDownloadButton = styled__default["default"].a.withConfig({
   componentId: "sc-9mtuee-6"
 })(["display:flex;align-items:center;justify-content:center;padding:0.75rem;color:", ";font-size:1rem;background-color:", ";"], designTokens.base.color.white, designTokens.base.color.primary5);
-const StyledFilePopoverBodyListItemContentFile = styled__default["default"].div.withConfig({
+var StyledFilePopoverBodyListItemContentFile = styled__default["default"].div.withConfig({
   componentId: "sc-9mtuee-7"
 })(["flex:1;display:flex;align-items:center;justify-content:space-between;padding:0 0.5rem;"]);
-const StyledFilePopoverBodyListItemContentImageWrap = styled__default["default"].a.withConfig({
+var StyledFilePopoverBodyListItemContentImageWrap = styled__default["default"].a.withConfig({
   componentId: "sc-9mtuee-8"
 })(["display:flex;padding:0.5rem;flex:1 1 0;background:", ";"], designTokens.base.color.white);
-const StyledFilePopoverBodyListItemContentImage = styled__default["default"].img.withConfig({
+var StyledFilePopoverBodyListItemContentImage = styled__default["default"].img.withConfig({
   componentId: "sc-9mtuee-9"
 })(["width:100%;max-height:128px;object-fit:contain;"]);
-const StyledPreferenceBodyItem = styled__default["default"].div.withConfig({
+var StyledPreferenceBodyItem = styled__default["default"].div.withConfig({
   componentId: "sc-9mtuee-10"
 })(["display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;min-height:2rem;color:white;&:last-child{margin-bottom:0;}"]);
-const StyledSelect = styled__default["default"](blocks.Select).withConfig({
+var StyledSelect = styled__default["default"](blocks.Select).withConfig({
   componentId: "sc-9mtuee-11"
 })(["> div{background:", " !important;border-color:", " !important;}select{padding:0 !important;height:2rem !important;color:#fff !important;> option{background:", " !important;}}"], designTokens.base.color.navy8, designTokens.base.color.navy7, designTokens.base.color.navy8);
 

package/cjs/components/material-exercise/exercise-menu/locales/en.json.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var phrasesEn = {"exerciseMenu.dropdown.button.tooltip":"More","exerciseMenu.dropdown.item.codeHistory":"Submit History","exerciseMenu.dropdown.item.environment":"Environment","exerciseMenu.dropdown.item.preference":"Editor Preferences","exerciseMenu.dropdown.item.room":"Code Sharing","exerciseMenu.dropdown.item.submitHistory":"Code History","exerciseMenu.arduino.agent.button":"Having problem with connecting to arduino?","exerciseMenu.reset.button.tooltip.disabled":"The file cannot be reset","exerciseMenu.reset.button.tooltip.enabled":"Reset the file","exerciseMenu.reset.confirmDialog.body":"Are you sure you want to clear all the code you wrote at current file and reset it?","exerciseMenu.reset.confirmDialog.cancel":"Cencel","exerciseMenu.reset.confirmDialog.confirm":"Confirm","exerciseMenu.reset.confirmDialog.title":"Reset the file","exerciseMenu.stdioFileBrowser.button.tooltip":"File","exerciseMenu.stdioFileBrowser.popover.body.placeholder":"Files sent from your code\nappear here.","exerciseMenu.stdioFileBrowser.popover.header":"File"};
 
-module.exports = phrasesEn;
+exports["default"] = phrasesEn;

package/cjs/components/material-exercise/exercise-menu/locales/ko.json.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var phrasesKo = {"exerciseMenu.dropdown.button.tooltip":"더 보기","exerciseMenu.dropdown.item.codeHistory":"코드 수정 이력","exerciseMenu.dropdown.item.environment":"실습 환경","exerciseMenu.dropdown.item.preference":"에디터 설정","exerciseMenu.dropdown.item.room":"코드 공유","exerciseMenu.dropdown.item.submitHistory":"실행/제출 이력","exerciseMenu.arduino.agent.button":"아두이노 연결 중 문제가 발생했나요?","exerciseMenu.reset.button.tooltip.disabled":"해당 파일은 초기화를 할 수 없습니다","exerciseMenu.reset.button.tooltip.enabled":"코드 초기화","exerciseMenu.reset.confirmDialog.body":"작성한 코드를 모두 지우고 초기화하시겠습니까?","exerciseMenu.reset.confirmDialog.cancel":"취소","exerciseMenu.reset.confirmDialog.confirm":"확인","exerciseMenu.reset.confirmDialog.title":"코드 초기화","exerciseMenu.stdioFileBrowser.button.tooltip":"파일","exerciseMenu.stdioFileBrowser.popover.body.placeholder":"코드에서 전송한 파일이\n여기에 표시됩니다.","exerciseMenu.stdioFileBrowser.popover.header":"파일"};
 
-module.exports = phrasesKo;
+exports["default"] = phrasesKo;

package/cjs/components/material-exercise/exercise-multilang-dropdown/ExerciseMultilangDropdown.js

@@ -1,5 +1,8 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var blocks = require('@elice/blocks');
 var recoil = require('recoil');
@@ -13,36 +16,41 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const ExerciseMultilangDropdown = () => {
-  const {
-    materialExerciseId,
-    exerciseRoomId
-  } = React__default["default"].useContext(context.ExerciseContext);
-  const multilangLanguages = recoil.useRecoilValue(recoil$1.exerciseMultilangLanguagesState(materialExerciseId));
-  const [multilangEnvironment, setMultilangEnvironment] = recoil.useRecoilState(recoil$1.exerciseMultilangEnvironmentState({
-    materialExerciseId,
-    exerciseRoomId
-  })); //
+var ExerciseMultilangDropdown = function ExerciseMultilangDropdown() {
+  var _React$useContext = React__default["default"].useContext(context.ExerciseContext),
+    materialExerciseId = _React$useContext.materialExerciseId,
+    exerciseRoomId = _React$useContext.exerciseRoomId;
+  var multilangLanguages = recoil.useRecoilValue(recoil$1.exerciseMultilangLanguagesState(materialExerciseId));
+  var _useRecoilState = recoil.useRecoilState(recoil$1.exerciseMultilangEnvironmentState({
+      materialExerciseId: materialExerciseId,
+      exerciseRoomId: exerciseRoomId
+    })),
+    _useRecoilState2 = _rollupPluginBabelHelpers.slicedToArray(_useRecoilState, 2),
+    multilangEnvironment = _useRecoilState2[0],
+    setMultilangEnvironment = _useRecoilState2[1];
+  //
   //
   //
-
   if (!multilangLanguages || !Object.keys(multilangLanguages !== null && multilangLanguages !== void 0 ? multilangLanguages : {}).length || !multilangEnvironment) {
     return null;
   }
-
   return React__default["default"].createElement(blocks.Dropdown, {
     type: "dark",
     size: "tiny",
     border: true,
     placement: "bottom-end",
     value: multilangEnvironment.language,
-    onChange: language => setMultilangEnvironment({
-      language
-    })
-  }, Object.keys(multilangLanguages).map(lang => React__default["default"].createElement("option", {
-    key: lang,
-    value: lang
-  }, multilangLanguages[lang].label)));
+    onChange: function onChange(language) {
+      return setMultilangEnvironment({
+        language: language
+      });
+    }
+  }, Object.keys(multilangLanguages).map(function (lang) {
+    return React__default["default"].createElement("option", {
+      key: lang,
+      value: lang
+    }, multilangLanguages[lang].label);
+  }));
 };
 
-module.exports = ExerciseMultilangDropdown;
+exports["default"] = ExerciseMultilangDropdown;

package/cjs/components/material-exercise/exercise-multilang-dropdown/ExerciseMultilangDropdownLazy.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var React = require('react');
 var ExerciseMultilangDropdown = require('./ExerciseMultilangDropdown.js');
 
@@ -7,10 +9,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const ExerciseMultilangDropdownLazy = () => {
+var ExerciseMultilangDropdownLazy = function ExerciseMultilangDropdownLazy() {
   return React__default["default"].createElement(React__default["default"].Suspense, {
     fallback: null
-  }, React__default["default"].createElement(ExerciseMultilangDropdown, null));
+  }, React__default["default"].createElement(ExerciseMultilangDropdown["default"], null));
 };
 
-module.exports = ExerciseMultilangDropdownLazy;
+exports["default"] = ExerciseMultilangDropdownLazy;

package/cjs/components/material-exercise/exercise-preview/ExercisePreview.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var React = require('react');
 var designTokens = require('@elice/design-tokens');
 var recoil = require('recoil');
@@ -21,7 +23,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const StyledExercisePreview = styled__default["default"].div.withConfig({
+var StyledExercisePreview = styled__default["default"].div.withConfig({
   componentId: "sc-i6d1i5-0"
 })(["width:100%;height:100%;background-color:", ";"], designTokens.base.color.navy7);
 /**
@@ -29,90 +31,77 @@ const StyledExercisePreview = styled__default["default"].div.withConfig({
  * - NoVnc
  * - Web browser
  */
-
-const ExercisePreview = () => {
-  const {
-    materialExerciseId
-  } = React__default["default"].useContext(context.ExerciseContext);
-  const exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
-  const exercisePreviewType = recoil.useRecoilValue(recoil$1.exercisePreviewTypeState(materialExerciseId)); // runner states
-
-  const isSubmitting = recoil.useRecoilValue(recoil$1.exerciseRunnerSubmittingState);
-  const isRunning = recoil.useRecoilValue(recoil$1.exerciseRunnerRunningState);
-  const exerciseRunnerRoomConnectionInfo = recoil.useRecoilValue(recoil$1.exerciseRunnerRoomConnectionInfoState); // preview refs
-
-  const noVnc = React__default["default"].useRef(null);
-  const webBrowser = React__default["default"].useRef(null); //
+var ExercisePreview = function ExercisePreview() {
+  var _React$useContext = React__default["default"].useContext(context.ExerciseContext),
+    materialExerciseId = _React$useContext.materialExerciseId;
+  var exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
+  var exercisePreviewType = recoil.useRecoilValue(recoil$1.exercisePreviewTypeState(materialExerciseId));
+  // runner states
+  var isSubmitting = recoil.useRecoilValue(recoil$1.exerciseRunnerSubmittingState);
+  var isRunning = recoil.useRecoilValue(recoil$1.exerciseRunnerRunningState);
+  var exerciseRunnerRoomConnectionInfo = recoil.useRecoilValue(recoil$1.exerciseRunnerRoomConnectionInfoState);
+  // preview refs
+  var noVnc = React__default["default"].useRef(null);
+  var webBrowser = React__default["default"].useRef(null);
+  //
   // Action when exercise submitted.
   //
-
-  React__default["default"].useEffect(() => {
+  React__default["default"].useEffect(function () {
     var _a, _b;
-
     if (!isSubmitting) {
       return;
     }
-
     switch (exercisePreviewType) {
       case recoilTypes.ExercisePreviewType.NoVnc:
         (_a = noVnc.current) === null || _a === void 0 ? void 0 : _a.reset();
         break;
-
       case recoilTypes.ExercisePreviewType.WebBrowser:
         (_b = webBrowser.current) === null || _b === void 0 ? void 0 : _b.reload();
         break;
     }
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   [isSubmitting]);
   /**
    * NoVnc
    */
-
-  const renderNoVnc = () => {
+  var renderNoVnc = function renderNoVnc() {
     if (exercisePreviewType !== recoilTypes.ExercisePreviewType.NoVnc) {
       return null;
     }
-
     if (!(exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage) || !exerciseRunnerRoomConnectionInfo) {
       return null;
     }
-
-    return React__default["default"].createElement(NoVncLazy, Object.assign({}, exerciseRunnerRoomConnectionInfo, {
+    return React__default["default"].createElement(NoVncLazy["default"], Object.assign({}, exerciseRunnerRoomConnectionInfo, {
       isRunning: isRunning,
       readyExerciseImage: exercise.readyExerciseImage,
-      exercisePreviewDisplayModeButton: React__default["default"].createElement(ExercisePreviewDisplayModeButton, null),
+      exercisePreviewDisplayModeButton: React__default["default"].createElement(ExercisePreviewDisplayModeButton["default"], null),
       ref: noVnc
     }));
   };
   /**
    * Web browser
    */
-
-
-  const renderWebBrowser = () => {
+  var renderWebBrowser = function renderWebBrowser() {
     if (exercisePreviewType !== recoilTypes.ExercisePreviewType.WebBrowser) {
       return null;
     }
-
     if (!exerciseRunnerRoomConnectionInfo) {
       return null;
     }
-
-    return React__default["default"].createElement(WebBrowser, Object.assign({}, exerciseRunnerRoomConnectionInfo, {
-      menuButtons: React__default["default"].createElement(ExercisePreviewDisplayModeButton, null),
+    return React__default["default"].createElement(WebBrowser["default"], Object.assign({}, exerciseRunnerRoomConnectionInfo, {
+      menuButtons: React__default["default"].createElement(ExercisePreviewDisplayModeButton["default"], null),
       ref: webBrowser
     }));
-  }; //
+  };
+  //
   //
   //
-
-
   return React__default["default"].createElement(StyledExercisePreview, null, renderNoVnc(), renderWebBrowser());
 };
-
 var ExercisePreview$1 = ExerciseIntlProvider.withExerciseIntlProvider(ExercisePreview, {
-  en: en,
-  ko: ko
+  en: en["default"],
+  ko: ko["default"]
 });
 
-module.exports = ExercisePreview$1;
+exports["default"] = ExercisePreview$1;

package/cjs/components/material-exercise/exercise-preview/ExercisePreviewDisplayModeButton.js

@@ -1,5 +1,8 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var reactIntl = require('react-intl');
 var icons = require('@elice/icons');
@@ -15,23 +18,25 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const ExercisePreviewDisplayModeButton = React.forwardRef((props, ref) => {
+var ExercisePreviewDisplayModeButton = React.forwardRef(function (props, ref) {
   var _a;
-
-  const intl = reactIntl.useIntl();
-  const [exercisePreviewDisplayMode, setExercisePreviewDisplayMode] = recoil.useRecoilState(recoil$1.exercisePreviewDisplayModeState);
+  var intl = reactIntl.useIntl();
+  var _useRecoilState = recoil.useRecoilState(recoil$1.exercisePreviewDisplayModeState),
+    _useRecoilState2 = _rollupPluginBabelHelpers.slicedToArray(_useRecoilState, 2),
+    exercisePreviewDisplayMode = _useRecoilState2[0],
+    setExercisePreviewDisplayMode = _useRecoilState2[1];
   /**
    * Handle click.
    */
-
-  const handleClick = () => {
-    setExercisePreviewDisplayMode(prevDisplayMode => prevDisplayMode === recoilTypes.ExercisePreviewDisplayMode.Mini ? recoilTypes.ExercisePreviewDisplayMode.SideBySide : recoilTypes.ExercisePreviewDisplayMode.Mini);
-  }; //
+  var handleClick = function handleClick() {
+    setExercisePreviewDisplayMode(function (prevDisplayMode) {
+      return prevDisplayMode === recoilTypes.ExercisePreviewDisplayMode.Mini ? recoilTypes.ExercisePreviewDisplayMode.SideBySide : recoilTypes.ExercisePreviewDisplayMode.Mini;
+    });
+  };
   //
   //
-
-
-  return React__default["default"].createElement(ExerciseMenuButton, Object.assign({}, props, {
+  //
+  return React__default["default"].createElement(ExerciseMenuButton["default"], Object.assign({}, props, {
     icon: exercisePreviewDisplayMode === recoilTypes.ExercisePreviewDisplayMode.Mini ? icons.eilScreenHalf : icons.eilPanelRight,
     title: ((_a = props.title) !== null && _a !== void 0 ? _a : exercisePreviewDisplayMode === recoilTypes.ExercisePreviewDisplayMode.Mini) ? intl.formatMessage({
       id: 'exercisePreview.displayModeButton.sideBySide'
@@ -44,4 +49,4 @@ const ExercisePreviewDisplayModeButton = React.forwardRef((props, ref) => {
   }));
 });
 
-module.exports = ExercisePreviewDisplayModeButton;
+exports["default"] = ExercisePreviewDisplayModeButton;

package/cjs/components/material-exercise/exercise-preview/locales/en.json.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var phrasesEn = {"exercisePreview.displayModeButton.mini":"Toggle to Mini mode","exercisePreview.displayModeButton.sideBySide":"Toggle to Side-by-side mode"};
 
-module.exports = phrasesEn;
+exports["default"] = phrasesEn;

package/cjs/components/material-exercise/exercise-preview/locales/ko.json.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var phrasesKo = {"exercisePreview.displayModeButton.mini":"간소화 뷰로 전환","exercisePreview.displayModeButton.sideBySide":"사이드 뷰로 전환"};
 
-module.exports = phrasesKo;
+exports["default"] = phrasesKo;