@elice/material-exercise 1.240718.0-trasncript.0 → 1.240718.0-trasncript.2

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

@@ -4,40 +4,44 @@ var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
 var styled = require('styled-components');
 
-const StyledMenuButtonFileCount = styled(blocks.NotificationCount).withConfig({
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+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.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.div.withConfig({
+})(["display:flex;flex-direction:column;padding:0;width:252px;min-height:178px;max-height:383px;border-radius:8px;background-color:", ";overflow:hidden;position:absolute;top:2.125rem;right:0;z-index:1;"], designTokens.base.color.navy6);
+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.div.withConfig({
+var StyledFilePopoverBody = styled__default.default.div.withConfig({
   componentId: "sc-9mtuee-3"
 })(["flex:1;overflow-x:hidden;overflow-y:auto;"]);
-const StyledFilePopoverBodyList = styled.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.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.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.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.div.withConfig({
+var StyledFilePopoverBodyListItemContentImageWrap = styled__default.default.div.withConfig({
   componentId: "sc-9mtuee-8"
 })(["display:flex;padding:0.5rem;flex:1 1 0;background:", ";"], designTokens.base.color.white);
-const StyledFilePopoverBodyListItemContentImage = styled.img.withConfig({
+var StyledFilePopoverBodyListItemContentImage = styled__default.default.img.withConfig({
   componentId: "sc-9mtuee-9"
 })(["width:100%;max-height:128px;object-fit:contain;cursor:zoom-in;"]);
-const StyledPreferenceBodyItem = styled.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(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/index.js

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

package/cjs/components/material-exercise/exercise-menu/locales/index.js

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

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

@@ -2,6 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactUse = require('react-use');
 var blocks = require('@elice/blocks');
@@ -12,21 +14,27 @@ require('../context/recoilTypes.js');
 require('../context/subjects.js');
 require('../context/ExerciseProvider.js');
 
-const ExerciseMultilangDropdown = () => {
-  const {
-    materialExerciseId,
-    exerciseRoomId,
-    onMultiLangLanguageChange
-  } = React.useContext(context.ExerciseContext);
-  const multilangLanguages = recoil.useRecoilValue(recoil$1.exerciseMultilangLanguagesState(materialExerciseId));
-  const [multilangEnvironment, setMultilangEnvironment] = recoil.useRecoilState(recoil$1.exerciseMultilangEnvironmentState({
-    materialExerciseId,
-    exerciseRoomId
-  }));
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var ExerciseMultilangDropdown = function ExerciseMultilangDropdown() {
+  var _React$useContext = React__default.default.useContext(context.ExerciseContext),
+    materialExerciseId = _React$useContext.materialExerciseId,
+    exerciseRoomId = _React$useContext.exerciseRoomId,
+    onMultiLangLanguageChange = _React$useContext.onMultiLangLanguageChange;
+  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];
   //
   // emit `onMultiLangLanguageChange` when language changed
   //
-  reactUse.useDebounce(() => {
+  reactUse.useDebounce(function () {
     if (multilangEnvironment && typeof onMultiLangLanguageChange === 'function') {
       onMultiLangLanguageChange(multilangEnvironment.language);
     }
@@ -37,19 +45,24 @@ const ExerciseMultilangDropdown = () => {
   if (!multilangLanguages || !Object.keys(multilangLanguages !== null && multilangLanguages !== void 0 ? multilangLanguages : {}).length || !multilangEnvironment) {
     return null;
   }
-  return React.createElement(blocks.Dropdown, {
+  return jsxRuntime.jsx(blocks.Dropdown, {
     type: "dark",
     size: "tiny",
     border: true,
     placement: "bottom-end",
     value: multilangEnvironment.language,
-    onChange: language => setMultilangEnvironment({
-      language
+    onChange: function onChange(language) {
+      return setMultilangEnvironment({
+        language: language
+      });
+    },
+    children: Object.keys(multilangLanguages).map(function (lang) {
+      return jsxRuntime.jsx("option", {
+        value: lang,
+        children: multilangLanguages[lang].label
+      }, lang);
     })
-  }, Object.keys(multilangLanguages).map(lang => React.createElement("option", {
-    key: lang,
-    value: lang
-  }, multilangLanguages[lang].label)));
+  });
 };
 
 exports.default = ExerciseMultilangDropdown;

package/cjs/components/material-exercise/exercise-multilang-dropdown/ExerciseMultilangDropdownLazy.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
-declare const ExerciseMultilangDropdownLazy: () => React.JSX.Element;
+declare const ExerciseMultilangDropdownLazy: () => JSX.Element;
 export default ExerciseMultilangDropdownLazy;

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

@@ -2,13 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var ExerciseMultilangDropdown = require('./ExerciseMultilangDropdown.js');
 
-const ExerciseMultilangDropdownLazy = () => {
-  return React.createElement(React.Suspense, {
-    fallback: null
-  }, React.createElement(ExerciseMultilangDropdown.default, null));
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var ExerciseMultilangDropdownLazy = function ExerciseMultilangDropdownLazy() {
+  return jsxRuntime.jsx(React__default.default.Suspense, {
+    fallback: null,
+    children: jsxRuntime.jsx(ExerciseMultilangDropdown.default, {})
+  });
 };
 
 exports.default = ExerciseMultilangDropdownLazy;

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

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

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

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var designTokens = require('@elice/design-tokens');
 var intl = require('@elice/intl');
@@ -18,7 +19,12 @@ var ExercisePreviewDisplayModeButton = require('./ExercisePreviewDisplayModeButt
 var en = require('./locales/en.json.js');
 var ko = require('./locales/ko.json.js');
 
-const StyledExercisePreview = styled.div.withConfig({
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+var StyledExercisePreview = styled__default.default.div.withConfig({
   componentId: "sc-i6d1i5-0"
 })(["width:100%;height:100%;background-color:", ";"], designTokens.base.color.navy7);
 /**
@@ -26,25 +32,23 @@ const StyledExercisePreview = styled.div.withConfig({
  * - NoVnc
  * - Web browser
  */
-const ExercisePreview = ({
-  __intl
-}) => {
-  const {
-    materialExerciseId
-  } = React.useContext(context.ExerciseContext);
-  const exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
-  const exercisePreviewType = recoil.useRecoilValue(recoil$1.exercisePreviewTypeState(materialExerciseId));
+var ExercisePreview = function ExercisePreview(_ref) {
+  var __intl = _ref.__intl;
+  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
-  const isSubmitting = recoil.useRecoilValue(recoil$1.exerciseRunnerSubmittingState);
-  const isRunning = recoil.useRecoilValue(recoil$1.exerciseRunnerRunningState);
-  const exerciseRunnerRoomConnectionInfo = recoil.useRecoilValue(recoil$1.exerciseRunnerRoomConnectionInfoState);
+  var isSubmitting = recoil.useRecoilValue(recoil$1.exerciseRunnerSubmittingState);
+  var isRunning = recoil.useRecoilValue(recoil$1.exerciseRunnerRunningState);
+  var exerciseRunnerRoomConnectionInfo = recoil.useRecoilValue(recoil$1.exerciseRunnerRoomConnectionInfoState);
   // preview refs
-  const noVnc = React.useRef(null);
-  const webBrowser = React.useRef(null);
+  var noVnc = React__default.default.useRef(null);
+  var webBrowser = React__default.default.useRef(null);
   //
   // Action when exercise submitted.
   //
-  React.useEffect(() => {
+  React__default.default.useEffect(function () {
     var _a, _b;
     if (!isSubmitting) {
       return;
@@ -63,41 +67,44 @@ const ExercisePreview = ({
   /**
    * 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.createElement(NoVncLazy.default, Object.assign({}, exerciseRunnerRoomConnectionInfo, {
+    return jsxRuntime.jsx(NoVncLazy.default, Object.assign({}, exerciseRunnerRoomConnectionInfo, {
       isRunning: isRunning,
       readyExerciseImage: exercise.readyExerciseImage,
-      exercisePreviewDisplayModeButton: React.createElement(ExercisePreviewDisplayModeButton.default, null),
+      exercisePreviewDisplayModeButton: jsxRuntime.jsx(ExercisePreviewDisplayModeButton.default, {}),
       ref: noVnc
     }));
   };
   /**
    * Web browser
    */
-  const renderWebBrowser = () => {
+  var renderWebBrowser = function renderWebBrowser() {
     if (exercisePreviewType !== recoilTypes.ExercisePreviewType.WebBrowser) {
       return null;
     }
     if (!exerciseRunnerRoomConnectionInfo) {
       return null;
     }
-    return React.createElement(WebBrowser.default, Object.assign({}, exerciseRunnerRoomConnectionInfo, {
-      menuButtons: React.createElement(ExercisePreviewDisplayModeButton.default, null),
+    return jsxRuntime.jsx(WebBrowser.default, Object.assign({}, exerciseRunnerRoomConnectionInfo, {
+      menuButtons: jsxRuntime.jsx(ExercisePreviewDisplayModeButton.default, {}),
       ref: webBrowser
     }));
   };
   //
   //
   //
-  return React.createElement(intl.RawEliceIntlProvider, {
-    value: __intl
-  }, React.createElement(StyledExercisePreview, null, renderNoVnc(), renderWebBrowser()));
+  return jsxRuntime.jsx(intl.RawEliceIntlProvider, {
+    value: __intl,
+    children: jsxRuntime.jsxs(StyledExercisePreview, {
+      children: [renderNoVnc(), renderWebBrowser()]
+    })
+  });
 };
 var ExercisePreview$1 = new intl.IntlComponentBuilder(ExercisePreview).add('en', en.default).add('ko', ko.default).addAsync('th', Promise.resolve().then(function () { return require('./locales/th.json.js'); })).addAsync('ja', Promise.resolve().then(function () { return require('./locales/ja.json.js'); })).build();
 

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

@@ -2,6 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var icons = require('@elice/icons');
 var intl = require('@elice/intl');
@@ -13,20 +15,25 @@ var recoilTypes = require('../context/recoilTypes.js');
 require('../context/subjects.js');
 require('../context/ExerciseProvider.js');
 
-const ExercisePreviewDisplayModeButton = React.forwardRef((props, ref) => {
+var ExercisePreviewDisplayModeButton = React.forwardRef(function (props, ref) {
   var _a;
-  const intl$1 = intl.useRawEliceIntl();
-  const [exercisePreviewDisplayMode, setExercisePreviewDisplayMode] = recoil.useRecoilState(recoil$1.exercisePreviewDisplayModeState);
+  var intl$1 = intl.useRawEliceIntl();
+  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.createElement(ExerciseMenuButton.default, Object.assign({}, props, {
+  return jsxRuntime.jsx(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$1.formatMessage({
       id: 'exercisePreview.displayModeButton.sideBySide'

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

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

package/cjs/components/material-exercise/exercise-preview/locales/index.js

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

package/cjs/components/material-exercise/exercise-rightpane/ExerciseRightpane.js

@@ -2,7 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var jsxRuntime = require('react/jsx-runtime');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
 var icons = require('@elice/icons');
@@ -20,36 +21,42 @@ var ExerciseRightpaneEnvironment = require('./ExerciseRightpaneEnvironment.js');
 var en = require('./locales/en.json.js');
 var ko = require('./locales/ko.json.js');
 
-const HEADER_CLOSE_BUTTON_SIZE = '1.75rem';
-const StyledRightpaneWrap = styled.div.withConfig({
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+
+var HEADER_CLOSE_BUTTON_SIZE = '1.75rem';
+var StyledRightpaneWrap = styled__default.default.div.withConfig({
   componentId: "sc-1tj3x49-0"
 })(["position:relative;display:flex;flex-direction:column;width:20rem;border-left:", ";color:white;background-color:", ";"], stylesheets.MATERIAL_DIVIDER_BORDER_VALUE, designTokens.base.color.navy9);
-const StyledPreferenceHeader = styled.div.withConfig({
+var StyledPreferenceHeader = styled__default.default.div.withConfig({
   componentId: "sc-1tj3x49-1"
 })(["display:flex;flex-direction:column;padding:0.25rem 1rem;"]);
-const StyledPreferenceHeaderCloseButton = styled(blocks.IconButton).withConfig({
+var StyledPreferenceHeaderCloseButton = styled__default.default(blocks.IconButton).withConfig({
   componentId: "sc-1tj3x49-2"
 })(["flex:0 0 ", ";height:", " !important;"], HEADER_CLOSE_BUTTON_SIZE, HEADER_CLOSE_BUTTON_SIZE);
-const StyledRightpaneBodyWrap = styled.div.withConfig({
+var StyledRightpaneBodyWrap = styled__default.default.div.withConfig({
   componentId: "sc-1tj3x49-3"
 })(["flex:1;padding:1rem;overflow-x:hidden;overflow-y:auto;", ""], stylesheets.getMaterialScrollBarCss({
   width: '0.375rem',
   borderRadius: '2px'
 }));
-const ExerciseRightpane = ({
-  __intl
-}) => {
-  const [activeState, setActiveState] = recoil.useRecoilState(recoil$1.exerciseRightpaneActiveState);
+var ExerciseRightpane = function ExerciseRightpane(_ref) {
+  var __intl = _ref.__intl;
+  var _useRecoilState = recoil.useRecoilState(recoil$1.exerciseRightpaneActiveState),
+    _useRecoilState2 = _rollupPluginBabelHelpers.slicedToArray(_useRecoilState, 2),
+    activeState = _useRecoilState2[0],
+    setActiveState = _useRecoilState2[1];
   /**
    *
    */
-  const handleClose = () => {
+  var handleClose = function handleClose() {
     setActiveState(null);
   };
   /**
    * Title of pane header.
    */
-  const renderRightpaneHeaderTitle = () => {
+  var renderRightpaneHeaderTitle = function renderRightpaneHeaderTitle() {
     switch (activeState) {
       case 'environment':
         return __intl.formatMessage({
@@ -66,29 +73,33 @@ const ExerciseRightpane = ({
   /**
    * Pane header.
    */
-  const renderRightpaneHeader = () => {
-    return React.createElement(StyledPreferenceHeader, null, React.createElement(blocks.Flex, {
-      align: "center"
-    }, React.createElement(blocks.Text, {
-      role: "white",
-      bold: true,
-      block: true
-    }, renderRightpaneHeaderTitle()), React.createElement(StyledPreferenceHeaderCloseButton, {
-      icon: icons.eilMathsignMultiplyBasic,
-      size: "tight",
-      role: "white",
-      onClick: handleClose
-    })));
+  var renderRightpaneHeader = function renderRightpaneHeader() {
+    return jsxRuntime.jsx(StyledPreferenceHeader, {
+      children: jsxRuntime.jsxs(blocks.Flex, {
+        align: "center",
+        children: [jsxRuntime.jsx(blocks.Text, {
+          role: "white",
+          bold: true,
+          block: true,
+          children: renderRightpaneHeaderTitle()
+        }), jsxRuntime.jsx(StyledPreferenceHeaderCloseButton, {
+          icon: icons.eilMathsignMultiplyBasic,
+          size: "tight",
+          role: "white",
+          onClick: handleClose
+        })]
+      })
+    });
   };
   /**
    * Pane content.
    */
-  const renderRightpaneBodyContent = () => {
+  var renderRightpaneBodyContent = function renderRightpaneBodyContent() {
     switch (activeState) {
       case 'environment':
-        return React.createElement(ExerciseRightpaneEnvironment.default, null);
+        return jsxRuntime.jsx(ExerciseRightpaneEnvironment.default, {});
       case 'preference':
-        return React.createElement(ExerciseRightpaneEditorPerference.default, null);
+        return jsxRuntime.jsx(ExerciseRightpaneEditorPerference.default, {});
       default:
         return null;
     }
@@ -99,13 +110,18 @@ const ExerciseRightpane = ({
   if (!activeState) {
     return null;
   }
-  return React.createElement(intl.RawEliceIntlProvider, {
-    value: __intl
-  }, React.createElement(StyledRightpaneWrap, null, renderRightpaneHeader(), React.createElement(blocks.Hr, {
-    marginStart: 0,
-    marginEnd: 0,
-    color: designTokens.base.color.navy6
-  }), React.createElement(StyledRightpaneBodyWrap, null, renderRightpaneBodyContent())));
+  return jsxRuntime.jsx(intl.RawEliceIntlProvider, {
+    value: __intl,
+    children: jsxRuntime.jsxs(StyledRightpaneWrap, {
+      children: [renderRightpaneHeader(), jsxRuntime.jsx(blocks.Hr, {
+        marginStart: 0,
+        marginEnd: 0,
+        color: designTokens.base.color.navy6
+      }), jsxRuntime.jsx(StyledRightpaneBodyWrap, {
+        children: renderRightpaneBodyContent()
+      })]
+    })
+  });
 };
 var ExerciseRightpane$1 = new intl.IntlComponentBuilder(ExerciseRightpane).add('en', en.default).add('ko', ko.default).addAsync('th', Promise.resolve().then(function () { return require('./locales/th.json.js'); })).addAsync('ja', Promise.resolve().then(function () { return require('./locales/ja.json.js'); })).build();
 

package/cjs/components/material-exercise/exercise-rightpane/ExerciseRightpaneEditorPerference.js

@@ -2,6 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var recoil = require('recoil');
 require('../../shared/monaco-editor/MonacoEditorLazy.js');
@@ -13,12 +15,18 @@ require('../context/recoilTypes.js');
 require('../context/subjects.js');
 require('../context/ExerciseProvider.js');
 
-const ExerciseRightpaneEditorPerference = () => {
-  const {
-    locale
-  } = React.useContext(context.ExerciseContext);
-  const [preference, setPreference] = recoil.useRecoilState(recoil$1.exerciseEditorPreferenceState);
-  return React.createElement(MonacoEditorPerferenceForm.default, {
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var ExerciseRightpaneEditorPerference = function ExerciseRightpaneEditorPerference() {
+  var _React$useContext = React__default.default.useContext(context.ExerciseContext),
+    locale = _React$useContext.locale;
+  var _useRecoilState = recoil.useRecoilState(recoil$1.exerciseEditorPreferenceState),
+    _useRecoilState2 = _rollupPluginBabelHelpers.slicedToArray(_useRecoilState, 2),
+    preference = _useRecoilState2[0],
+    setPreference = _useRecoilState2[1];
+  return jsxRuntime.jsx(MonacoEditorPerferenceForm.default, {
     value: preference,
     locale: locale,
     onChange: setPreference