@elice/material-exercise 1.240718.3 → 1.240719.1

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

@@ -1,3 +1,4 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { base } from '@elice/design-tokens';
 import { IntlComponentBuilder, RawEliceIntlProvider } from '@elice/intl';
@@ -14,7 +15,7 @@ import ExercisePreviewDisplayModeButton from './ExercisePreviewDisplayModeButton
 import messageEn from './locales/en.json.js';
 import messageKo from './locales/ko.json.js';
 
-const StyledExercisePreview = styled.div.withConfig({
+var StyledExercisePreview = styled.div.withConfig({
   componentId: "sc-i6d1i5-0"
 })(["width:100%;height:100%;background-color:", ";"], base.color.navy7);
 /**
@@ -22,25 +23,23 @@ const StyledExercisePreview = styled.div.withConfig({
  * - NoVnc
  * - Web browser
  */
-const ExercisePreview = ({
-  __intl
-}) => {
-  const {
-    materialExerciseId
-  } = React.useContext(ExerciseContext);
-  const exercise = useRecoilValue(exerciseState(materialExerciseId));
-  const exercisePreviewType = useRecoilValue(exercisePreviewTypeState(materialExerciseId));
+var ExercisePreview = function ExercisePreview(_ref) {
+  var __intl = _ref.__intl;
+  var _React$useContext = React.useContext(ExerciseContext),
+    materialExerciseId = _React$useContext.materialExerciseId;
+  var exercise = useRecoilValue(exerciseState(materialExerciseId));
+  var exercisePreviewType = useRecoilValue(exercisePreviewTypeState(materialExerciseId));
   // runner states
-  const isSubmitting = useRecoilValue(exerciseRunnerSubmittingState);
-  const isRunning = useRecoilValue(exerciseRunnerRunningState);
-  const exerciseRunnerRoomConnectionInfo = useRecoilValue(exerciseRunnerRoomConnectionInfoState);
+  var isSubmitting = useRecoilValue(exerciseRunnerSubmittingState);
+  var isRunning = useRecoilValue(exerciseRunnerRunningState);
+  var exerciseRunnerRoomConnectionInfo = useRecoilValue(exerciseRunnerRoomConnectionInfoState);
   // preview refs
-  const noVnc = React.useRef(null);
-  const webBrowser = React.useRef(null);
+  var noVnc = React.useRef(null);
+  var webBrowser = React.useRef(null);
   //
   // Action when exercise submitted.
   //
-  React.useEffect(() => {
+  React.useEffect(function () {
     var _a, _b;
     if (!isSubmitting) {
       return;
@@ -59,41 +58,44 @@ const ExercisePreview = ({
   /**
    * NoVnc
    */
-  const renderNoVnc = () => {
+  var renderNoVnc = function renderNoVnc() {
     if (exercisePreviewType !== ExercisePreviewType.NoVnc) {
       return null;
     }
     if (!(exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage) || !exerciseRunnerRoomConnectionInfo) {
       return null;
     }
-    return React.createElement(NoVncLazy, Object.assign({}, exerciseRunnerRoomConnectionInfo, {
+    return jsx(NoVncLazy, Object.assign({}, exerciseRunnerRoomConnectionInfo, {
       isRunning: isRunning,
       readyExerciseImage: exercise.readyExerciseImage,
-      exercisePreviewDisplayModeButton: React.createElement(ExercisePreviewDisplayModeButton, null),
+      exercisePreviewDisplayModeButton: jsx(ExercisePreviewDisplayModeButton, {}),
       ref: noVnc
     }));
   };
   /**
    * Web browser
    */
-  const renderWebBrowser = () => {
+  var renderWebBrowser = function renderWebBrowser() {
     if (exercisePreviewType !== ExercisePreviewType.WebBrowser) {
       return null;
     }
     if (!exerciseRunnerRoomConnectionInfo) {
       return null;
     }
-    return React.createElement(WebBrowser, Object.assign({}, exerciseRunnerRoomConnectionInfo, {
-      menuButtons: React.createElement(ExercisePreviewDisplayModeButton, null),
+    return jsx(WebBrowser, Object.assign({}, exerciseRunnerRoomConnectionInfo, {
+      menuButtons: jsx(ExercisePreviewDisplayModeButton, {}),
       ref: webBrowser
     }));
   };
   //
   //
   //
-  return React.createElement(RawEliceIntlProvider, {
-    value: __intl
-  }, React.createElement(StyledExercisePreview, null, renderNoVnc(), renderWebBrowser()));
+  return jsx(RawEliceIntlProvider, {
+    value: __intl,
+    children: jsxs(StyledExercisePreview, {
+      children: [renderNoVnc(), renderWebBrowser()]
+    })
+  });
 };
 var ExercisePreview$1 = new IntlComponentBuilder(ExercisePreview).add('en', messageEn).add('ko', messageKo).addAsync('th', import('./locales/th.json.js')).addAsync('ja', import('./locales/ja.json.js')).build();
 

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

@@ -1,4 +1,6 @@
-import React, { forwardRef } from 'react';
+import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import { eilScreenHalf, eilPanelRight } from '@elice/icons';
 import { useRawEliceIntl } from '@elice/intl';
 import { useRecoilState } from 'recoil';
@@ -9,20 +11,25 @@ import { ExercisePreviewDisplayMode } from '../context/recoilTypes.js';
 import '../context/subjects.js';
 import '../context/ExerciseProvider.js';
 
-const ExercisePreviewDisplayModeButton = forwardRef((props, ref) => {
+var ExercisePreviewDisplayModeButton = forwardRef(function (props, ref) {
   var _a;
-  const intl = useRawEliceIntl();
-  const [exercisePreviewDisplayMode, setExercisePreviewDisplayMode] = useRecoilState(exercisePreviewDisplayModeState);
+  var intl = useRawEliceIntl();
+  var _useRecoilState = useRecoilState(exercisePreviewDisplayModeState),
+    _useRecoilState2 = _slicedToArray(_useRecoilState, 2),
+    exercisePreviewDisplayMode = _useRecoilState2[0],
+    setExercisePreviewDisplayMode = _useRecoilState2[1];
   /**
    * Handle click.
    */
-  const handleClick = () => {
-    setExercisePreviewDisplayMode(prevDisplayMode => prevDisplayMode === ExercisePreviewDisplayMode.Mini ? ExercisePreviewDisplayMode.SideBySide : ExercisePreviewDisplayMode.Mini);
+  var handleClick = function handleClick() {
+    setExercisePreviewDisplayMode(function (prevDisplayMode) {
+      return prevDisplayMode === ExercisePreviewDisplayMode.Mini ? ExercisePreviewDisplayMode.SideBySide : ExercisePreviewDisplayMode.Mini;
+    });
   };
   //
   //
   //
-  return React.createElement(ExerciseMenuButton, Object.assign({}, props, {
+  return jsx(ExerciseMenuButton, Object.assign({}, props, {
     icon: exercisePreviewDisplayMode === ExercisePreviewDisplayMode.Mini ? eilScreenHalf : eilPanelRight,
     title: ((_a = props.title) !== null && _a !== void 0 ? _a : exercisePreviewDisplayMode === ExercisePreviewDisplayMode.Mini) ? intl.formatMessage({
       id: 'exercisePreview.displayModeButton.sideBySide'

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

@@ -0,0 +1 @@
+export { default as ExercisePreview } from './ExercisePreview.js';

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

@@ -0,0 +1,4 @@
+export { default as messageEn } from './en.json.js';
+export { default as messageKo } from './ko.json.js';
+export { default as messageTh } from './th.json.js';
+export { default as messageJa } from './ja.json.js';

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

@@ -1,4 +1,5 @@
-import React from 'react';
+import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { IconButton, Hr, Flex, Text } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { eilMathsignMultiplyBasic } from '@elice/icons';
@@ -16,36 +17,38 @@ import ExerciseRightpaneEnvironment from './ExerciseRightpaneEnvironment.js';
 import messageEn from './locales/en.json.js';
 import messageKo from './locales/ko.json.js';
 
-const HEADER_CLOSE_BUTTON_SIZE = '1.75rem';
-const StyledRightpaneWrap = styled.div.withConfig({
+var HEADER_CLOSE_BUTTON_SIZE = '1.75rem';
+var StyledRightpaneWrap = styled.div.withConfig({
   componentId: "sc-1tj3x49-0"
 })(["position:relative;display:flex;flex-direction:column;width:20rem;border-left:", ";color:white;background-color:", ";"], MATERIAL_DIVIDER_BORDER_VALUE, base.color.navy9);
-const StyledPreferenceHeader = styled.div.withConfig({
+var StyledPreferenceHeader = styled.div.withConfig({
   componentId: "sc-1tj3x49-1"
 })(["display:flex;flex-direction:column;padding:0.25rem 1rem;"]);
-const StyledPreferenceHeaderCloseButton = styled(IconButton).withConfig({
+var StyledPreferenceHeaderCloseButton = styled(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.div.withConfig({
   componentId: "sc-1tj3x49-3"
 })(["flex:1;padding:1rem;overflow-x:hidden;overflow-y:auto;", ""], getMaterialScrollBarCss({
   width: '0.375rem',
   borderRadius: '2px'
 }));
-const ExerciseRightpane = ({
-  __intl
-}) => {
-  const [activeState, setActiveState] = useRecoilState(exerciseRightpaneActiveState);
+var ExerciseRightpane = function ExerciseRightpane(_ref) {
+  var __intl = _ref.__intl;
+  var _useRecoilState = useRecoilState(exerciseRightpaneActiveState),
+    _useRecoilState2 = _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({
@@ -62,29 +65,33 @@ const ExerciseRightpane = ({
   /**
    * Pane header.
    */
-  const renderRightpaneHeader = () => {
-    return React.createElement(StyledPreferenceHeader, null, React.createElement(Flex, {
-      align: "center"
-    }, React.createElement(Text, {
-      role: "white",
-      bold: true,
-      block: true
-    }, renderRightpaneHeaderTitle()), React.createElement(StyledPreferenceHeaderCloseButton, {
-      icon: eilMathsignMultiplyBasic,
-      size: "tight",
-      role: "white",
-      onClick: handleClose
-    })));
+  var renderRightpaneHeader = function renderRightpaneHeader() {
+    return jsx(StyledPreferenceHeader, {
+      children: jsxs(Flex, {
+        align: "center",
+        children: [jsx(Text, {
+          role: "white",
+          bold: true,
+          block: true,
+          children: renderRightpaneHeaderTitle()
+        }), jsx(StyledPreferenceHeaderCloseButton, {
+          icon: eilMathsignMultiplyBasic,
+          size: "tight",
+          role: "white",
+          onClick: handleClose
+        })]
+      })
+    });
   };
   /**
    * Pane content.
    */
-  const renderRightpaneBodyContent = () => {
+  var renderRightpaneBodyContent = function renderRightpaneBodyContent() {
     switch (activeState) {
       case 'environment':
-        return React.createElement(ExerciseRightpaneEnvironment, null);
+        return jsx(ExerciseRightpaneEnvironment, {});
       case 'preference':
-        return React.createElement(ExerciseRightpaneEditorPerference, null);
+        return jsx(ExerciseRightpaneEditorPerference, {});
       default:
         return null;
     }
@@ -95,13 +102,18 @@ const ExerciseRightpane = ({
   if (!activeState) {
     return null;
   }
-  return React.createElement(RawEliceIntlProvider, {
-    value: __intl
-  }, React.createElement(StyledRightpaneWrap, null, renderRightpaneHeader(), React.createElement(Hr, {
-    marginStart: 0,
-    marginEnd: 0,
-    color: base.color.navy6
-  }), React.createElement(StyledRightpaneBodyWrap, null, renderRightpaneBodyContent())));
+  return jsx(RawEliceIntlProvider, {
+    value: __intl,
+    children: jsxs(StyledRightpaneWrap, {
+      children: [renderRightpaneHeader(), jsx(Hr, {
+        marginStart: 0,
+        marginEnd: 0,
+        color: base.color.navy6
+      }), jsx(StyledRightpaneBodyWrap, {
+        children: renderRightpaneBodyContent()
+      })]
+    })
+  });
 };
 var ExerciseRightpane$1 = new IntlComponentBuilder(ExerciseRightpane).add('en', messageEn).add('ko', messageKo).addAsync('th', import('./locales/th.json.js')).addAsync('ja', import('./locales/ja.json.js')).build();
 

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

@@ -1,3 +1,5 @@
+import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { useRecoilState } from 'recoil';
 import '../../shared/monaco-editor/MonacoEditorLazy.js';
@@ -9,12 +11,14 @@ import '../context/recoilTypes.js';
 import '../context/subjects.js';
 import '../context/ExerciseProvider.js';
 
-const ExerciseRightpaneEditorPerference = () => {
-  const {
-    locale
-  } = React.useContext(ExerciseContext);
-  const [preference, setPreference] = useRecoilState(exerciseEditorPreferenceState);
-  return React.createElement(MonacoEditorPerference, {
+var ExerciseRightpaneEditorPerference = function ExerciseRightpaneEditorPerference() {
+  var _React$useContext = React.useContext(ExerciseContext),
+    locale = _React$useContext.locale;
+  var _useRecoilState = useRecoilState(exerciseEditorPreferenceState),
+    _useRecoilState2 = _slicedToArray(_useRecoilState, 2),
+    preference = _useRecoilState2[0],
+    setPreference = _useRecoilState2[1];
+  return jsx(MonacoEditorPerference, {
     value: preference,
     locale: locale,
     onChange: setPreference

package/es/components/material-exercise/exercise-rightpane/ExerciseRightpaneEnvironment.js

@@ -1,3 +1,4 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import { Text, Vspace } from '@elice/blocks';
 import { useRawEliceIntl } from '@elice/intl';
@@ -9,95 +10,101 @@ import '../context/recoilTypes.js';
 import '../context/subjects.js';
 import '../context/ExerciseProvider.js';
 
-const StyledEnvironmentList = styled.ul.withConfig({
+var StyledEnvironmentList = styled.ul.withConfig({
   componentId: "sc-208wkr-0"
 })(["margin:0;padding:0;list-style:none;> li{margin-bottom:2rem;&:last-of-type{margin-bottom:0;}}"]);
-const ExerciseRightpaneEnvironment = () => {
-  const intl = useRawEliceIntl();
-  const {
-    materialExerciseId
-  } = React.useContext(ExerciseContext);
-  const materialExercise = useRecoilValue(exerciseState(materialExerciseId));
-  const readyExerciseImage = materialExercise === null || materialExercise === void 0 ? void 0 : materialExercise.readyExerciseImage;
+var ExerciseRightpaneEnvironment = function ExerciseRightpaneEnvironment() {
+  var intl = useRawEliceIntl();
+  var _React$useContext = React.useContext(ExerciseContext),
+    materialExerciseId = _React$useContext.materialExerciseId;
+  var materialExercise = useRecoilValue(exerciseState(materialExerciseId));
+  var readyExerciseImage = materialExercise === null || materialExercise === void 0 ? void 0 : materialExercise.readyExerciseImage;
   /**
    *
    */
-  const exerciseEnvironment = React.useMemo(() => readyExerciseImage ? [{
-    name: intl.formatMessage({
-      id: 'exerciseRightpane.environment.item.cpuLimit.name'
-    }),
-    value: intl.formatMessage({
-      id: 'exerciseRightpane.environment.item.cpuLimit.value'
-    })
-  }, {
-    name: intl.formatMessage({
-      id: 'exerciseRightpane.environment.item.timeLimit.name'
-    }),
-    value: intl.formatNumber(readyExerciseImage.timeLimit / 1000, {
-      style: 'unit',
-      unit: 'second',
-      unitDisplay: 'short'
-    })
-  }, {
-    name: intl.formatMessage({
-      id: 'exerciseRightpane.environment.item.memoryLimit.name'
-    }),
-    value: intl.formatNumber(readyExerciseImage.memoryLimit / 1024 / 1024, {
-      style: 'unit',
-      unit: 'megabyte',
-      unitDisplay: 'short'
-    })
-  }, {
-    name: intl.formatMessage({
-      id: 'exerciseRightpane.environment.item.isVnc.name'
-    }),
-    value: readyExerciseImage.isVnc ? intl.formatMessage({
-      id: 'exerciseRightpane.environment.item.common.value.true'
-    }) : intl.formatMessage({
-      id: 'exerciseRightpane.environment.item.common.value.false'
-    })
-  }, {
-    name: intl.formatMessage({
-      id: 'exerciseRightpane.environment.item.httpPort.name'
-    }),
-    value: readyExerciseImage.httpPort ? intl.formatMessage({
-      id: 'exerciseRightpane.environment.item.httpPort.value.true'
-    }) : intl.formatMessage({
-      id: 'exerciseRightpane.environment.item.httpPort.value.false'
-    })
-  }, {
-    name: intl.formatMessage({
-      id: 'exerciseRightpane.environment.item.isGpu.name'
-    }),
-    value: readyExerciseImage.isGpu ? intl.formatMessage({
-      id: 'exerciseRightpane.environment.item.common.value.true'
-    }) : intl.formatMessage({
-      id: 'exerciseRightpane.environment.item.common.value.false'
-    })
-  }] : null, [readyExerciseImage, intl]);
+  var exerciseEnvironment = React.useMemo(function () {
+    return readyExerciseImage ? [{
+      name: intl.formatMessage({
+        id: 'exerciseRightpane.environment.item.cpuLimit.name'
+      }),
+      value: intl.formatMessage({
+        id: 'exerciseRightpane.environment.item.cpuLimit.value'
+      })
+    }, {
+      name: intl.formatMessage({
+        id: 'exerciseRightpane.environment.item.timeLimit.name'
+      }),
+      value: intl.formatNumber(readyExerciseImage.timeLimit / 1000, {
+        style: 'unit',
+        unit: 'second',
+        unitDisplay: 'short'
+      })
+    }, {
+      name: intl.formatMessage({
+        id: 'exerciseRightpane.environment.item.memoryLimit.name'
+      }),
+      value: intl.formatNumber(readyExerciseImage.memoryLimit / 1024 / 1024, {
+        style: 'unit',
+        unit: 'megabyte',
+        unitDisplay: 'short'
+      })
+    }, {
+      name: intl.formatMessage({
+        id: 'exerciseRightpane.environment.item.isVnc.name'
+      }),
+      value: readyExerciseImage.isVnc ? intl.formatMessage({
+        id: 'exerciseRightpane.environment.item.common.value.true'
+      }) : intl.formatMessage({
+        id: 'exerciseRightpane.environment.item.common.value.false'
+      })
+    }, {
+      name: intl.formatMessage({
+        id: 'exerciseRightpane.environment.item.httpPort.name'
+      }),
+      value: readyExerciseImage.httpPort ? intl.formatMessage({
+        id: 'exerciseRightpane.environment.item.httpPort.value.true'
+      }) : intl.formatMessage({
+        id: 'exerciseRightpane.environment.item.httpPort.value.false'
+      })
+    }, {
+      name: intl.formatMessage({
+        id: 'exerciseRightpane.environment.item.isGpu.name'
+      }),
+      value: readyExerciseImage.isGpu ? intl.formatMessage({
+        id: 'exerciseRightpane.environment.item.common.value.true'
+      }) : intl.formatMessage({
+        id: 'exerciseRightpane.environment.item.common.value.false'
+      })
+    }] : null;
+  }, [readyExerciseImage, intl]);
   //
   //
   //
   if (!exerciseEnvironment) {
     return null;
   }
-  return React.createElement(StyledEnvironmentList, null, exerciseEnvironment.map(({
-    name,
-    value
-  }) => React.createElement("li", {
-    key: name
-  }, React.createElement(Text, {
-    role: "navy",
-    block: true,
-    size: "small"
-  }, name), React.createElement(Vspace, {
-    height: 0.5
-  }), React.createElement(Text, {
-    role: "white",
-    bold: true,
-    block: true,
-    size: "small"
-  }, value))));
+  return jsx(StyledEnvironmentList, {
+    children: exerciseEnvironment.map(function (_ref) {
+      var name = _ref.name,
+        value = _ref.value;
+      return jsxs("li", {
+        children: [jsx(Text, {
+          role: "navy",
+          block: true,
+          size: "small",
+          children: name
+        }), jsx(Vspace, {
+          height: 0.5
+        }), jsx(Text, {
+          role: "white",
+          bold: true,
+          block: true,
+          size: "small",
+          children: value
+        })]
+      }, name);
+    })
+  });
 };
 
 export { ExerciseRightpaneEnvironment as default };

package/es/components/material-exercise/exercise-rightpane/index.js

@@ -0,0 +1 @@
+export { default as ExerciseRightpane } from './ExerciseRightpane.js';

package/es/components/material-exercise/exercise-rightpane/locales/index.js

@@ -0,0 +1,4 @@
+export { default as messageEn } from './en.json.js';
+export { default as messageKo } from './ko.json.js';
+export { default as messageTh } from './th.json.js';
+export { default as messageJa } from './ja.json.js';

package/es/components/material-exercise/exercise-room/ExerciseRoom.js

@@ -1,3 +1,5 @@
+import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { IntlComponentBuilder, RawEliceIntlProvider } from '@elice/intl';
 import MaterialExerciseExerciseRoomDetail from './ExerciseRoomDetail.js';
@@ -5,22 +7,29 @@ import MaterialExerciseExerciseRoomList from './ExerciseRoomList.js';
 import messageEn from './locales/en.json.js';
 import messageKo from './locales/ko.json.js';
 
-const ExerciseRoom = ({
-  onHide,
-  __intl
-}) => {
-  const [selectedExerciseRoomId, setSelectedExerciseRoomId] = React.useState();
-  const ExerciseRoomContent = selectedExerciseRoomId ? React.createElement(MaterialExerciseExerciseRoomDetail, {
+var ExerciseRoom = function ExerciseRoom(_ref) {
+  var onHide = _ref.onHide,
+    __intl = _ref.__intl;
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    selectedExerciseRoomId = _React$useState2[0],
+    setSelectedExerciseRoomId = _React$useState2[1];
+  var ExerciseRoomContent = selectedExerciseRoomId ? jsx(MaterialExerciseExerciseRoomDetail, {
     selectedExerciseRoomId: selectedExerciseRoomId,
-    goToList: () => setSelectedExerciseRoomId(undefined),
+    goToList: function goToList() {
+      return setSelectedExerciseRoomId(undefined);
+    },
     onHide: onHide
-  }) : React.createElement(MaterialExerciseExerciseRoomList, {
-    onExerciseRoomClick: id => setSelectedExerciseRoomId(id),
+  }) : jsx(MaterialExerciseExerciseRoomList, {
+    onExerciseRoomClick: function onExerciseRoomClick(id) {
+      return setSelectedExerciseRoomId(id);
+    },
     onHide: onHide
   });
-  return React.createElement(RawEliceIntlProvider, {
-    value: __intl
-  }, ExerciseRoomContent);
+  return jsx(RawEliceIntlProvider, {
+    value: __intl,
+    children: ExerciseRoomContent
+  });
 };
 var ExerciseRoom$1 = new IntlComponentBuilder(ExerciseRoom).add('en', messageEn).add('ko', messageKo).addAsync('th', import('./locales/th.json.js')).addAsync('ja', import('./locales/ja.json.js')).build();
 

package/es/components/material-exercise/exercise-room/ExerciseRoom.styled.js

@@ -1,29 +1,31 @@
 import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
 
-const StyledExerciseRoomTableWrapper = styled.div.withConfig({
+var StyledExerciseRoomTableWrapper = styled.div.withConfig({
   componentId: "sc-r4oydl-0"
 })(["overflow-y:auto;max-height:25rem;border-radius:4px;background-color:", ";height:18.75rem;"], base.color.navy7);
-const StyledExerciseRoomTable = styled.table.withConfig({
+var StyledExerciseRoomTable = styled.table.withConfig({
   componentId: "sc-r4oydl-1"
 })(["width:100%;color:", ";border-collapse:collapse;"], base.color.navy2);
-const StyledExerciseRoomThead = styled.thead.withConfig({
+var StyledExerciseRoomThead = styled.thead.withConfig({
   componentId: "sc-r4oydl-2"
 })(["& th{position:sticky;top:0;background-color:", ";z-index:100;border-bottom:1px solid ", ";}"], base.color.navy7, base.color.navy6);
-const StyledExerciseRoomTd = styled.td.withConfig({
+var StyledExerciseRoomTd = styled.td.withConfig({
   componentId: "sc-r4oydl-3"
 })(["padding:0.875rem 1rem;"]);
-const StyledExerciseRoomTr = styled.tr.withConfig({
+var StyledExerciseRoomTr = styled.tr.withConfig({
   componentId: "sc-r4oydl-4"
 })([""]);
-const StyledExerciseRoomTbody = styled.tbody.withConfig({
+var StyledExerciseRoomTbody = styled.tbody.withConfig({
   componentId: "sc-r4oydl-5"
-})(["", "{border-bottom:1px solid ", ";}", ":hover{background-color:", ";cursor:", ";}", "{height:3.25rem;}"], StyledExerciseRoomTr, base.color.navy6, StyledExerciseRoomTr, ({
-  hoverable
-}) => hoverable ? base.color.navy5 : '', ({
-  hoverable
-}) => hoverable ? 'pointer' : 'auto', StyledExerciseRoomTd);
-const StyledExerciseRoomTh = styled.th.withConfig({
+})(["", "{border-bottom:1px solid ", ";}", ":hover{background-color:", ";cursor:", ";}", "{height:3.25rem;}"], StyledExerciseRoomTr, base.color.navy6, StyledExerciseRoomTr, function (_ref) {
+  var hoverable = _ref.hoverable;
+  return hoverable ? base.color.navy5 : '';
+}, function (_ref2) {
+  var hoverable = _ref2.hoverable;
+  return hoverable ? 'pointer' : 'auto';
+}, StyledExerciseRoomTd);
+var StyledExerciseRoomTh = styled.th.withConfig({
   componentId: "sc-r4oydl-6"
 })(["font-weight:bold;font-size:", ";padding:0.875rem 1rem;text-align:left;"], base.size.body1);