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

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

@@ -4,44 +4,40 @@ var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
 var styled = require('styled-components');
 
-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({
+const StyledMenuButtonFileCount = styled(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;"]);
-var StyledFilePopoverContent = styled__default.default.div.withConfig({
+const StyledFilePopoverContent = styled.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;position:absolute;top:2.125rem;right:0;z-index:1;"], designTokens.base.color.navy6);
-var StyledFilePopoverHeader = styled__default.default.div.withConfig({
+})(["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({
   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);
-var StyledFilePopoverBody = styled__default.default.div.withConfig({
+const StyledFilePopoverBody = styled.div.withConfig({
   componentId: "sc-9mtuee-3"
 })(["flex:1;overflow-x:hidden;overflow-y:auto;"]);
-var StyledFilePopoverBodyList = styled__default.default.ul.withConfig({
+const StyledFilePopoverBodyList = styled.ul.withConfig({
   componentId: "sc-9mtuee-4"
 })(["margin:0;padding:0.5rem;width:100%;height:100%;"]);
-var StyledFilePopoverBodyListItem = styled__default.default.li.withConfig({
+const StyledFilePopoverBodyListItem = styled.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);
-var StyledFilePopoverBodyListItemDownloadButton = styled__default.default.a.withConfig({
+const StyledFilePopoverBodyListItemDownloadButton = styled.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);
-var StyledFilePopoverBodyListItemContentFile = styled__default.default.div.withConfig({
+const StyledFilePopoverBodyListItemContentFile = styled.div.withConfig({
   componentId: "sc-9mtuee-7"
 })(["flex:1;display:flex;align-items:center;justify-content:space-between;padding:0 0.5rem;"]);
-var StyledFilePopoverBodyListItemContentImageWrap = styled__default.default.div.withConfig({
+const StyledFilePopoverBodyListItemContentImageWrap = styled.div.withConfig({
   componentId: "sc-9mtuee-8"
 })(["display:flex;padding:0.5rem;flex:1 1 0;background:", ";"], designTokens.base.color.white);
-var StyledFilePopoverBodyListItemContentImage = styled__default.default.img.withConfig({
+const StyledFilePopoverBodyListItemContentImage = styled.img.withConfig({
   componentId: "sc-9mtuee-9"
 })(["width:100%;max-height:128px;object-fit:contain;cursor:zoom-in;"]);
-var StyledPreferenceBodyItem = styled__default.default.div.withConfig({
+const StyledPreferenceBodyItem = styled.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;}"]);
-var StyledSelect = styled__default.default(blocks.Select).withConfig({
+const StyledSelect = styled(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-multilang-dropdown/ExerciseMultilangDropdown.js

@@ -2,8 +2,6 @@
 
 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');
@@ -14,27 +12,21 @@ require('../context/recoilTypes.js');
 require('../context/subjects.js');
 require('../context/ExerciseProvider.js');
 
-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];
+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
+  }));
   //
   // emit `onMultiLangLanguageChange` when language changed
   //
-  reactUse.useDebounce(function () {
+  reactUse.useDebounce(() => {
     if (multilangEnvironment && typeof onMultiLangLanguageChange === 'function') {
       onMultiLangLanguageChange(multilangEnvironment.language);
     }
@@ -45,24 +37,19 @@ var ExerciseMultilangDropdown = function ExerciseMultilangDropdown() {
   if (!multilangLanguages || !Object.keys(multilangLanguages !== null && multilangLanguages !== void 0 ? multilangLanguages : {}).length || !multilangEnvironment) {
     return null;
   }
-  return jsxRuntime.jsx(blocks.Dropdown, {
+  return React.createElement(blocks.Dropdown, {
     type: "dark",
     size: "tiny",
     border: true,
     placement: "bottom-end",
     value: multilangEnvironment.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);
+    onChange: language => setMultilangEnvironment({
+      language
     })
-  });
+  }, 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,2 +1,3 @@
-declare const ExerciseMultilangDropdownLazy: () => JSX.Element;
+import React from 'react';
+declare const ExerciseMultilangDropdownLazy: () => React.JSX.Element;
 export default ExerciseMultilangDropdownLazy;

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

@@ -2,19 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var ExerciseMultilangDropdown = require('./ExerciseMultilangDropdown.js');
 
-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, {})
-  });
+const ExerciseMultilangDropdownLazy = () => {
+  return React.createElement(React.Suspense, {
+    fallback: null
+  }, React.createElement(ExerciseMultilangDropdown.default, null));
 };
 
 exports.default = ExerciseMultilangDropdownLazy;

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

@@ -2,7 +2,6 @@
 
 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');
@@ -19,12 +18,7 @@ var ExercisePreviewDisplayModeButton = require('./ExercisePreviewDisplayModeButt
 var en = require('./locales/en.json.js');
 var ko = require('./locales/ko.json.js');
 
-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({
+const StyledExercisePreview = styled.div.withConfig({
   componentId: "sc-i6d1i5-0"
 })(["width:100%;height:100%;background-color:", ";"], designTokens.base.color.navy7);
 /**
@@ -32,23 +26,25 @@ var StyledExercisePreview = styled__default.default.div.withConfig({
  * - NoVnc
  * - Web browser
  */
-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));
+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));
   // runner states
-  var isSubmitting = recoil.useRecoilValue(recoil$1.exerciseRunnerSubmittingState);
-  var isRunning = recoil.useRecoilValue(recoil$1.exerciseRunnerRunningState);
-  var exerciseRunnerRoomConnectionInfo = recoil.useRecoilValue(recoil$1.exerciseRunnerRoomConnectionInfoState);
+  const isSubmitting = recoil.useRecoilValue(recoil$1.exerciseRunnerSubmittingState);
+  const isRunning = recoil.useRecoilValue(recoil$1.exerciseRunnerRunningState);
+  const exerciseRunnerRoomConnectionInfo = recoil.useRecoilValue(recoil$1.exerciseRunnerRoomConnectionInfoState);
   // preview refs
-  var noVnc = React__default.default.useRef(null);
-  var webBrowser = React__default.default.useRef(null);
+  const noVnc = React.useRef(null);
+  const webBrowser = React.useRef(null);
   //
   // Action when exercise submitted.
   //
-  React__default.default.useEffect(function () {
+  React.useEffect(() => {
     var _a, _b;
     if (!isSubmitting) {
       return;
@@ -67,44 +63,41 @@ var ExercisePreview = function ExercisePreview(_ref) {
   /**
    * NoVnc
    */
-  var renderNoVnc = function renderNoVnc() {
+  const renderNoVnc = () => {
     if (exercisePreviewType !== recoilTypes.ExercisePreviewType.NoVnc) {
       return null;
     }
     if (!(exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage) || !exerciseRunnerRoomConnectionInfo) {
       return null;
     }
-    return jsxRuntime.jsx(NoVncLazy.default, Object.assign({}, exerciseRunnerRoomConnectionInfo, {
+    return React.createElement(NoVncLazy.default, Object.assign({}, exerciseRunnerRoomConnectionInfo, {
       isRunning: isRunning,
       readyExerciseImage: exercise.readyExerciseImage,
-      exercisePreviewDisplayModeButton: jsxRuntime.jsx(ExercisePreviewDisplayModeButton.default, {}),
+      exercisePreviewDisplayModeButton: React.createElement(ExercisePreviewDisplayModeButton.default, null),
       ref: noVnc
     }));
   };
   /**
    * Web browser
    */
-  var renderWebBrowser = function renderWebBrowser() {
+  const renderWebBrowser = () => {
     if (exercisePreviewType !== recoilTypes.ExercisePreviewType.WebBrowser) {
       return null;
     }
     if (!exerciseRunnerRoomConnectionInfo) {
       return null;
     }
-    return jsxRuntime.jsx(WebBrowser.default, Object.assign({}, exerciseRunnerRoomConnectionInfo, {
-      menuButtons: jsxRuntime.jsx(ExercisePreviewDisplayModeButton.default, {}),
+    return React.createElement(WebBrowser.default, Object.assign({}, exerciseRunnerRoomConnectionInfo, {
+      menuButtons: React.createElement(ExercisePreviewDisplayModeButton.default, null),
       ref: webBrowser
     }));
   };
   //
   //
   //
-  return jsxRuntime.jsx(intl.RawEliceIntlProvider, {
-    value: __intl,
-    children: jsxRuntime.jsxs(StyledExercisePreview, {
-      children: [renderNoVnc(), renderWebBrowser()]
-    })
-  });
+  return React.createElement(intl.RawEliceIntlProvider, {
+    value: __intl
+  }, React.createElement(StyledExercisePreview, null, 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,8 +2,6 @@
 
 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');
@@ -15,25 +13,20 @@ var recoilTypes = require('../context/recoilTypes.js');
 require('../context/subjects.js');
 require('../context/ExerciseProvider.js');
 
-var ExercisePreviewDisplayModeButton = React.forwardRef(function (props, ref) {
+const ExercisePreviewDisplayModeButton = React.forwardRef((props, ref) => {
   var _a;
-  var intl$1 = intl.useRawEliceIntl();
-  var _useRecoilState = recoil.useRecoilState(recoil$1.exercisePreviewDisplayModeState),
-    _useRecoilState2 = _rollupPluginBabelHelpers.slicedToArray(_useRecoilState, 2),
-    exercisePreviewDisplayMode = _useRecoilState2[0],
-    setExercisePreviewDisplayMode = _useRecoilState2[1];
+  const intl$1 = intl.useRawEliceIntl();
+  const [exercisePreviewDisplayMode, setExercisePreviewDisplayMode] = recoil.useRecoilState(recoil$1.exercisePreviewDisplayModeState);
   /**
    * Handle click.
    */
-  var handleClick = function handleClick() {
-    setExercisePreviewDisplayMode(function (prevDisplayMode) {
-      return prevDisplayMode === recoilTypes.ExercisePreviewDisplayMode.Mini ? recoilTypes.ExercisePreviewDisplayMode.SideBySide : recoilTypes.ExercisePreviewDisplayMode.Mini;
-    });
+  const handleClick = () => {
+    setExercisePreviewDisplayMode(prevDisplayMode => prevDisplayMode === recoilTypes.ExercisePreviewDisplayMode.Mini ? recoilTypes.ExercisePreviewDisplayMode.SideBySide : recoilTypes.ExercisePreviewDisplayMode.Mini);
   };
   //
   //
   //
-  return jsxRuntime.jsx(ExerciseMenuButton.default, Object.assign({}, props, {
+  return React.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$1.formatMessage({
       id: 'exercisePreview.displayModeButton.sideBySide'

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

@@ -2,8 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
-var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
 var icons = require('@elice/icons');
@@ -21,42 +20,36 @@ var ExerciseRightpaneEnvironment = require('./ExerciseRightpaneEnvironment.js');
 var en = require('./locales/en.json.js');
 var ko = require('./locales/ko.json.js');
 
-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({
+const HEADER_CLOSE_BUTTON_SIZE = '1.75rem';
+const StyledRightpaneWrap = styled.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);
-var StyledPreferenceHeader = styled__default.default.div.withConfig({
+const StyledPreferenceHeader = styled.div.withConfig({
   componentId: "sc-1tj3x49-1"
 })(["display:flex;flex-direction:column;padding:0.25rem 1rem;"]);
-var StyledPreferenceHeaderCloseButton = styled__default.default(blocks.IconButton).withConfig({
+const StyledPreferenceHeaderCloseButton = styled(blocks.IconButton).withConfig({
   componentId: "sc-1tj3x49-2"
 })(["flex:0 0 ", ";height:", " !important;"], HEADER_CLOSE_BUTTON_SIZE, HEADER_CLOSE_BUTTON_SIZE);
-var StyledRightpaneBodyWrap = styled__default.default.div.withConfig({
+const StyledRightpaneBodyWrap = styled.div.withConfig({
   componentId: "sc-1tj3x49-3"
 })(["flex:1;padding:1rem;overflow-x:hidden;overflow-y:auto;", ""], stylesheets.getMaterialScrollBarCss({
   width: '0.375rem',
   borderRadius: '2px'
 }));
-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 ExerciseRightpane = ({
+  __intl
+}) => {
+  const [activeState, setActiveState] = recoil.useRecoilState(recoil$1.exerciseRightpaneActiveState);
   /**
    *
    */
-  var handleClose = function handleClose() {
+  const handleClose = () => {
     setActiveState(null);
   };
   /**
    * Title of pane header.
    */
-  var renderRightpaneHeaderTitle = function renderRightpaneHeaderTitle() {
+  const renderRightpaneHeaderTitle = () => {
     switch (activeState) {
       case 'environment':
         return __intl.formatMessage({
@@ -73,33 +66,29 @@ var ExerciseRightpane = function ExerciseRightpane(_ref) {
   /**
    * Pane header.
    */
-  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
-        })]
-      })
-    });
+  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
+    })));
   };
   /**
    * Pane content.
    */
-  var renderRightpaneBodyContent = function renderRightpaneBodyContent() {
+  const renderRightpaneBodyContent = () => {
     switch (activeState) {
       case 'environment':
-        return jsxRuntime.jsx(ExerciseRightpaneEnvironment.default, {});
+        return React.createElement(ExerciseRightpaneEnvironment.default, null);
       case 'preference':
-        return jsxRuntime.jsx(ExerciseRightpaneEditorPerference.default, {});
+        return React.createElement(ExerciseRightpaneEditorPerference.default, null);
       default:
         return null;
     }
@@ -110,18 +99,13 @@ var ExerciseRightpane = function ExerciseRightpane(_ref) {
   if (!activeState) {
     return null;
   }
-  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()
-      })]
-    })
-  });
+  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())));
 };
 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,8 +2,6 @@
 
 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');
@@ -15,18 +13,12 @@ require('../context/recoilTypes.js');
 require('../context/subjects.js');
 require('../context/ExerciseProvider.js');
 
-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, {
+const ExerciseRightpaneEditorPerference = () => {
+  const {
+    locale
+  } = React.useContext(context.ExerciseContext);
+  const [preference, setPreference] = recoil.useRecoilState(recoil$1.exerciseEditorPreferenceState);
+  return React.createElement(MonacoEditorPerferenceForm.default, {
     value: preference,
     locale: locale,
     onChange: setPreference