@elice/material-exercise 1.240401.0 → 1.240508.0-globalization.1

package/es/components/material-exercise/exercise-menu/ExerciseMenu.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { base } from '@elice/design-tokens';
+import { IntlComponentBuilder, RawEliceIntlProvider } from '@elice/intl';
 import { enums } from '@elice/types';
 import { useRecoilValue } from 'recoil';
 import styled from 'styled-components';
@@ -8,19 +9,21 @@ import { ExerciseContext } from '../context/context.js';
 import '../context/recoilTypes.js';
 import '../context/subjects.js';
 import '../context/ExerciseProvider.js';
-import { withExerciseIntlProvider } from '../context/ExerciseIntlProvider.js';
-import phrasesEn from './locales/en.json.js';
-import phrasesKo from './locales/ko.json.js';
 import ExerciseMenuArduinoAgentModalButton from './ExerciseMenuArduinoAgentModalButton.js';
 import ExerciseMenuArduinoSettings from './ExerciseMenuArduinoSettings.js';
 import ExerciseMenuDropdown from './ExerciseMenuDropdown.js';
 import ExerciseMenuReset from './ExerciseMenuReset.js';
 import ExerciseMenuStdioFileBrowser from './ExerciseMenuStdioFileBrowser.js';
+import messageEn from './locales/en.json.js';
+import messageKo from './locales/ko.json.js';
+import messageTh from './locales/th.json.js';
 
 const StyledExerciseMenuWrapper = styled.div.withConfig({
   componentId: "sc-1gf6m87-0"
 })(["display:flex;justify-content:center;align-items:center;padding:0 0.5rem 0 1rem;height:2.25rem;gap:0.5rem;background-color:", ";"], base.color.navy8);
-const ExerciseMenu = () => {
+const ExerciseMenu = ({
+  __intl
+}) => {
   const {
     materialExerciseId
   } = React.useContext(ExerciseContext);
@@ -29,11 +32,8 @@ const ExerciseMenu = () => {
   //
   //
   //
-  return React.createElement(StyledExerciseMenuWrapper, null, isArduinoExercise ? React.createElement(React.Fragment, null, React.createElement(ExerciseMenuArduinoAgentModalButton, null), React.createElement(ExerciseMenuArduinoSettings, null)) : React.createElement(ExerciseMenuStdioFileBrowser, null), React.createElement(ExerciseMenuReset, null), React.createElement(ExerciseMenuDropdown, null));
+  return React.createElement(RawEliceIntlProvider, Object.assign({}, __intl), React.createElement(StyledExerciseMenuWrapper, null, isArduinoExercise ? React.createElement(React.Fragment, null, React.createElement(ExerciseMenuArduinoAgentModalButton, null), React.createElement(ExerciseMenuArduinoSettings, null)) : React.createElement(ExerciseMenuStdioFileBrowser, null), React.createElement(ExerciseMenuReset, null), React.createElement(ExerciseMenuDropdown, null)));
 };
-var ExerciseMenu$1 = withExerciseIntlProvider(ExerciseMenu, {
-  en: phrasesEn,
-  ko: phrasesKo
-});
+var ExerciseMenu$1 = new IntlComponentBuilder(ExerciseMenu).add('en', messageEn).add('ko', messageKo).add('th', messageTh).build();
 
 export { ExerciseMenu$1 as default };

package/es/components/material-exercise/exercise-menu/ExerciseMenuArduinoAgentModalButton.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
 import { Button, Icon } from '@elice/blocks';
 import { eilStatusDanger } from '@elice/icons';
+import { useRawEliceIntl } from '@elice/intl';
 import { useSetRecoilState } from 'recoil';
 import { exerciseArduinoAgentModalState } from '../context/recoil.js';
 import '../context/context.js';
@@ -11,6 +11,7 @@ import '../context/ExerciseProvider.js';
 
 const ExerciseMenuArduinoAgentModalButton = () => {
   const setOpen = useSetRecoilState(exerciseArduinoAgentModalState);
+  const intl = useRawEliceIntl();
   const handleClick = () => {
     setOpen(true);
   };
@@ -23,8 +24,8 @@ const ExerciseMenuArduinoAgentModalButton = () => {
     iconAlign: "left",
     border: false,
     onClick: handleClick
-  }, React.createElement(FormattedMessage, {
-    id: "exerciseMenu.arduino.agent.button"
+  }, intl.formatMessage({
+    id: 'exerciseMenu.arduino.agent.button'
   }));
 };
 

package/es/components/material-exercise/exercise-menu/ExerciseMenuArduinoSettings.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { useIntl, FormattedMessage } from 'react-intl';
 import { Popover, Text, Flex, IconButton } from '@elice/blocks';
 import { eilMaterialTypeArduino, eilMathsignMultiplyBasic } from '@elice/icons';
+import { useRawEliceIntl } from '@elice/intl';
 import { useRecoilValue, useRecoilState } from 'recoil';
 import ExerciseMenuButton from '../../shared/exercise-menu-button/ExerciseMenuButton.js';
 import { ARDUINO_BAUD_RATES } from '../../../constants/arduino.js';
@@ -14,7 +14,7 @@ import '../context/ExerciseProvider.js';
 import { StyledFilePopoverContent, StyledFilePopoverHeader, StyledFilePopoverBody, StyledFilePopoverBodyList, StyledPreferenceBodyItem, StyledSelect } from './ExerciseMenuStdioFileBrowser.styled.js';
 
 const ExerciseMenuArduinoSettings = () => {
-  const intl = useIntl();
+  const intl = useRawEliceIntl();
   const [open, setOpen] = React.useState(false);
   const anchorRef = React.useRef(null);
   const ports = useRecoilValue(exerciseArduinoPortsState);
@@ -29,8 +29,8 @@ const ExerciseMenuArduinoSettings = () => {
       role: "gray3",
       block: true,
       size: "small"
-    }, React.createElement(FormattedMessage, {
-      id: "exerciseMenu.arduino.transferSpeed"
+    }, intl.formatMessage({
+      id: 'exerciseMenu.arduino.transferSpeed'
     })), React.createElement(StyledSelect, {
       value: preference.baudRate,
       size: "small",
@@ -47,8 +47,8 @@ const ExerciseMenuArduinoSettings = () => {
       role: "gray3",
       block: true,
       size: "small"
-    }, React.createElement(FormattedMessage, {
-      id: "exerciseMenu.arduino.setting.device"
+    }, intl.formatMessage({
+      id: 'exerciseMenu.arduino.setting.device'
     })), React.createElement(StyledSelect, {
       value: openedPort !== null && openedPort !== void 0 ? openedPort : '',
       size: "small",
@@ -59,13 +59,13 @@ const ExerciseMenuArduinoSettings = () => {
     }, ports.length === 0 ? React.createElement("option", {
       value: "",
       disabled: true
-    }, React.createElement(FormattedMessage, {
-      id: "exerciseMenu.arduino.setting.noDevice"
+    }, intl.formatMessage({
+      id: 'exerciseMenu.arduino.setting.noDevice'
     })) : React.createElement("option", {
       value: "",
       disabled: true
-    }, React.createElement(FormattedMessage, {
-      id: "exerciseMenu.arduino.setting.selectDevice"
+    }, intl.formatMessage({
+      id: 'exerciseMenu.arduino.setting.selectDevice'
     })), ports.map(port => React.createElement("option", {
       key: port.Name,
       value: port.Name
@@ -80,8 +80,8 @@ const ExerciseMenuArduinoSettings = () => {
       bold: true
     }, React.createElement(Flex, {
       align: "center"
-    }, React.createElement(FormattedMessage, {
-      id: "exerciseMenu.arduino.setting"
+    }, intl.formatMessage({
+      id: 'exerciseMenu.arduino.setting'
     }))), React.createElement(IconButton, {
       icon: eilMathsignMultiplyBasic,
       role: "white",

package/es/components/material-exercise/exercise-menu/ExerciseMenuDropdown.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { useIntl } from 'react-intl';
 import { ButtonMenu } from '@elice/blocks';
 import { eilMoreVertical } from '@elice/icons';
+import { useRawEliceIntl } from '@elice/intl';
 import { enums } from '@elice/types';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import ExerciseMenuButton from '../../shared/exercise-menu-button/ExerciseMenuButton.js';
@@ -15,7 +15,7 @@ import ExerciseRoom from '../exercise-room/ExerciseRoom.js';
 import ExerciseSubmitHistory from '../exercise-submit-history/ExerciseSubmitHistory.js';
 
 const ExerciseMenuDropdown = () => {
-  const intl = useIntl();
+  const intl = useRawEliceIntl();
   const {
     materialExerciseId
   } = React.useContext(ExerciseContext);

package/es/components/material-exercise/exercise-menu/ExerciseMenuReset.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import { useIntl, FormattedMessage } from 'react-intl';
 import { Dialog } from '@elice/blocks';
 import { eilReset } from '@elice/icons';
+import { useRawEliceIntl } from '@elice/intl';
 import { useRecoilValue } from 'recoil';
 import ExerciseMenuButton from '../../shared/exercise-menu-button/ExerciseMenuButton.js';
 import 'react-use';
@@ -23,7 +23,7 @@ import 'random-words';
 import 'unicount';
 
 const ExerciseMenuReset = () => {
-  const intl = useIntl();
+  const intl = useRawEliceIntl();
   const [isDialogOpen, setDialogOpen] = useState(false);
   const activeFilename = useRecoilValue(exerciseActiveFilenameState);
   const isFileResettable = useExerciseFileResettable(activeFilename);
@@ -68,12 +68,12 @@ const ExerciseMenuReset = () => {
       onHide: () => setDialogOpen(false)
     }, React.createElement(Dialog.CloseButton, {
       onClick: () => setDialogOpen(false)
-    }, React.createElement(FormattedMessage, {
-      id: "exerciseMenu.reset.confirmDialog.cancel"
+    }, intl.formatMessage({
+      id: 'exerciseMenu.reset.confirmDialog.cancel'
     })), React.createElement(Dialog.ActionButton, {
       onClick: handleReset
-    }, React.createElement(FormattedMessage, {
-      id: "exerciseMenu.reset.confirmDialog.confirm"
+    }, intl.formatMessage({
+      id: 'exerciseMenu.reset.confirmDialog.confirm'
     })));
   };
   //

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { useIntl, FormattedMessage } from 'react-intl';
 import { Popover, Flex, Text, Hspace, NotificationCount, IconButton, Icon, Vspace } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { eilAttachment, eilMathsignMultiplyBasic, eilDownload, eilFolder } from '@elice/icons';
+import { useRawEliceIntl } from '@elice/intl';
 import { ImageViewer } from '@elice/mui-elements';
 import { useRecoilValue } from 'recoil';
 import ExerciseMenuButton from '../../shared/exercise-menu-button/ExerciseMenuButton.js';
@@ -14,7 +14,7 @@ import '../context/ExerciseProvider.js';
 import { StyledFilePopoverContent, StyledMenuButtonFileCount, StyledFilePopoverHeader, StyledFilePopoverBody, StyledFilePopoverBodyList, StyledFilePopoverBodyListItem, StyledFilePopoverBodyListItemContentImageWrap, StyledFilePopoverBodyListItemContentImage, StyledFilePopoverBodyListItemDownloadButton, StyledFilePopoverBodyListItemContentFile } from './ExerciseMenuStdioFileBrowser.styled.js';
 
 const ExerciseMenuStdioFileBrowser = () => {
-  const intl = useIntl();
+  const intl = useRawEliceIntl();
   const [open, setOpen] = React.useState(false);
   const anchorRef = React.useRef(null);
   const stdioFiles = useRecoilValue(exerciseRunnerStdioFilesState);
@@ -89,8 +89,8 @@ const ExerciseMenuStdioFileBrowser = () => {
       size: "small",
       textAlign: "center",
       preWrap: true
-    }, React.createElement(FormattedMessage, {
-      id: "exerciseMenu.stdioFileBrowser.popover.body.placeholder"
+    }, intl.formatMessage({
+      id: 'exerciseMenu.stdioFileBrowser.popover.body.placeholder'
     })));
   };
   /**
@@ -121,8 +121,8 @@ const ExerciseMenuStdioFileBrowser = () => {
       role: "white",
       size: "small",
       bold: true
-    }, React.createElement(FormattedMessage, {
-      id: "exerciseMenu.stdioFileBrowser.popover.header"
+    }, intl.formatMessage({
+      id: 'exerciseMenu.stdioFileBrowser.popover.header'
     })), React.createElement(Hspace, {
       width: 0.5
     }), React.createElement(NotificationCount, {

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

@@ -1,3 +1,3 @@
-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.arduino.setting":"Arduino Setting","exerciseMenu.arduino.setting.device":"Device","exerciseMenu.arduino.setting.noDevice":"No device","exerciseMenu.arduino.setting.selectDevice":"Select device","exerciseMenu.arduino.transferSpeed":"Transfer speed","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"};
+var messageEn = {"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.arduino.setting":"Arduino Setting","exerciseMenu.arduino.setting.device":"Device","exerciseMenu.arduino.setting.noDevice":"No device","exerciseMenu.arduino.setting.selectDevice":"Select device","exerciseMenu.arduino.transferSpeed":"Transfer speed","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"};
 
-export { phrasesEn as default };
+export { messageEn as default };

package/es/components/material-exercise/exercise-menu/locales/index.d.ts

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

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

@@ -1,3 +1,3 @@
-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.arduino.setting":"아두이노 세팅","exerciseMenu.arduino.setting.device":"장치","exerciseMenu.arduino.setting.noDevice":"장치 없음","exerciseMenu.arduino.setting.selectDevice":"장치 선택","exerciseMenu.arduino.transferSpeed":"전송 속도","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":"파일"};
+var messageKo = {"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.arduino.setting":"아두이노 세팅","exerciseMenu.arduino.setting.device":"장치","exerciseMenu.arduino.setting.noDevice":"장치 없음","exerciseMenu.arduino.setting.selectDevice":"장치 선택","exerciseMenu.arduino.transferSpeed":"전송 속도","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":"파일"};
 
-export { phrasesKo as default };
+export { messageKo as default };

package/es/components/material-exercise/exercise-menu/locales/th.json.js

@@ -0,0 +1,3 @@
+var messageTh = {"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.arduino.setting":"Arduino การตั้งค่า","exerciseMenu.arduino.setting.device":"อุปกรณ์","exerciseMenu.arduino.setting.noDevice":"ไม่มีอุปกรณ์","exerciseMenu.arduino.setting.selectDevice":"เลือกอุปกรณ์","exerciseMenu.arduino.transferSpeed":"ความเร็วในการส่งถ่าย","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":"ไฟล์ที่ถูกส่งจากโค้ดจะแสดงที่นี่.","exerciseMenu.stdioFileBrowser.popover.header":"ไฟล์"};
+
+export { messageTh as default };

package/es/components/material-exercise/exercise-preview/ExercisePreview.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
-declare const _default: React.VFC<{}>;
+import type { WithIntlComponentBuilderProps as EliceIntlProps } from '@elice/intl';
+declare const _default: React.ForwardRefExoticComponent<Omit<import("@elice/intl").IntlComponentExtraProps & Omit<EliceIntlProps, keyof import("@elice/intl").IntlComponentExtraProps | "__intl">, "ref"> & React.RefAttributes<any>>;
 export default _default;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { base } from '@elice/design-tokens';
+import { IntlComponentBuilder, RawEliceIntlProvider } from '@elice/intl';
 import { useRecoilValue } from 'recoil';
 import styled from 'styled-components';
 import NoVncLazy from '../../shared/no-vnc/NoVncLazy.js';
@@ -9,10 +10,10 @@ import { ExerciseContext } from '../context/context.js';
 import { ExercisePreviewType } from '../context/recoilTypes.js';
 import '../context/subjects.js';
 import '../context/ExerciseProvider.js';
-import { withExerciseIntlProvider } from '../context/ExerciseIntlProvider.js';
-import phrasesEn from './locales/en.json.js';
-import phrasesKo from './locales/ko.json.js';
 import ExercisePreviewDisplayModeButton from './ExercisePreviewDisplayModeButton.js';
+import messageEn from './locales/en.json.js';
+import messageKo from './locales/ko.json.js';
+import messageTh from './locales/th.json.js';
 
 const StyledExercisePreview = styled.div.withConfig({
   componentId: "sc-i6d1i5-0"
@@ -22,7 +23,9 @@ const StyledExercisePreview = styled.div.withConfig({
  * - NoVnc
  * - Web browser
  */
-const ExercisePreview = () => {
+const ExercisePreview = ({
+  __intl
+}) => {
   const {
     materialExerciseId
   } = React.useContext(ExerciseContext);
@@ -89,11 +92,8 @@ const ExercisePreview = () => {
   //
   //
   //
-  return React.createElement(StyledExercisePreview, null, renderNoVnc(), renderWebBrowser());
+  return React.createElement(RawEliceIntlProvider, Object.assign({}, __intl), React.createElement(StyledExercisePreview, null, renderNoVnc(), renderWebBrowser()));
 };
-var ExercisePreview$1 = withExerciseIntlProvider(ExercisePreview, {
-  en: phrasesEn,
-  ko: phrasesKo
-});
+var ExercisePreview$1 = new IntlComponentBuilder(ExercisePreview).add('en', messageEn).add('ko', messageKo).add('th', messageTh).build();
 
 export { ExercisePreview$1 as default };

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

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
-import { useIntl } from 'react-intl';
 import { eilScreenHalf, eilPanelRight } from '@elice/icons';
+import { useRawEliceIntl } from '@elice/intl';
 import { useRecoilState } from 'recoil';
 import ExerciseMenuButton from '../../shared/exercise-menu-button/ExerciseMenuButton.js';
 import { exercisePreviewDisplayModeState } from '../context/recoil.js';
@@ -11,7 +11,7 @@ import '../context/ExerciseProvider.js';
 
 const ExercisePreviewDisplayModeButton = forwardRef((props, ref) => {
   var _a;
-  const intl = useIntl();
+  const intl = useRawEliceIntl();
   const [exercisePreviewDisplayMode, setExercisePreviewDisplayMode] = useRecoilState(exercisePreviewDisplayModeState);
   /**
    * Handle click.

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

@@ -1,3 +1,3 @@
-var phrasesEn = {"exercisePreview.displayModeButton.mini":"Toggle to Mini mode","exercisePreview.displayModeButton.sideBySide":"Toggle to Side-by-side mode"};
+var messageEn = {"exercisePreview.displayModeButton.mini":"Toggle to Mini mode","exercisePreview.displayModeButton.sideBySide":"Toggle to Side-by-side mode"};
 
-export { phrasesEn as default };
+export { messageEn as default };

package/es/components/material-exercise/exercise-preview/locales/index.d.ts

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

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

@@ -1,3 +1,3 @@
-var phrasesKo = {"exercisePreview.displayModeButton.mini":"간소화 뷰로 전환","exercisePreview.displayModeButton.sideBySide":"사이드 뷰로 전환"};
+var messageKo = {"exercisePreview.displayModeButton.mini":"간소화 뷰로 전환","exercisePreview.displayModeButton.sideBySide":"사이드 뷰로 전환"};
 
-export { phrasesKo as default };
+export { messageKo as default };

package/es/components/material-exercise/exercise-preview/locales/th.json.js

@@ -0,0 +1,3 @@
+var messageTh = {"exercisePreview.displayModeButton.mini":"เปลี่ยนเป็นมุมมองที่เรียบง่าย","exercisePreview.displayModeButton.sideBySide":"เปลี่ยนมุมมองเป็นด้านข้าง"};
+
+export { messageTh as default };

package/es/components/material-exercise/exercise-rightpane/ExerciseRightpane.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-declare const _default: React.VFC<{
-    children?: React.ReactNode;
-}>;
+import type { WithIntlComponentBuilderProps as EliceIntlProps } from '@elice/intl';
+declare const _default: React.ForwardRefExoticComponent<Omit<import("@elice/intl").IntlComponentExtraProps & Omit<EliceIntlProps, keyof import("@elice/intl").IntlComponentExtraProps | "__intl">, "ref"> & React.RefAttributes<any>>;
 export default _default;

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
 import { IconButton, Hr, Flex, Text } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { eilMathsignMultiplyBasic } from '@elice/icons';
+import { IntlComponentBuilder, RawEliceIntlProvider } from '@elice/intl';
 import { useRecoilState } from 'recoil';
 import styled from 'styled-components';
 import { MATERIAL_DIVIDER_BORDER_VALUE, getMaterialScrollBarCss } from '../../../constants/stylesheets.js';
@@ -11,11 +11,11 @@ import '../context/context.js';
 import '../context/recoilTypes.js';
 import '../context/subjects.js';
 import '../context/ExerciseProvider.js';
-import { withExerciseIntlProvider } from '../context/ExerciseIntlProvider.js';
-import phrasesEn from './locales/en.json.js';
-import phrasesKo from './locales/ko.json.js';
 import ExerciseRightpaneEditorPerference from './ExerciseRightpaneEditorPerference.js';
 import ExerciseRightpaneEnvironment from './ExerciseRightpaneEnvironment.js';
+import messageEn from './locales/en.json.js';
+import messageKo from './locales/ko.json.js';
+import messageTh from './locales/th.json.js';
 
 const HEADER_CLOSE_BUTTON_SIZE = '1.75rem';
 const StyledRightpaneWrap = styled.div.withConfig({
@@ -33,7 +33,9 @@ const StyledRightpaneBodyWrap = styled.div.withConfig({
   width: '0.375rem',
   borderRadius: '2px'
 }));
-const ExerciseRightpane = () => {
+const ExerciseRightpane = ({
+  __intl
+}) => {
   const [activeState, setActiveState] = useRecoilState(exerciseRightpaneActiveState);
   /**
    *
@@ -47,12 +49,12 @@ const ExerciseRightpane = () => {
   const renderRightpaneHeaderTitle = () => {
     switch (activeState) {
       case 'environment':
-        return React.createElement(FormattedMessage, {
-          id: "exerciseRightpane.environment.title"
+        return __intl.formatMessage({
+          id: 'exerciseRightpane.environment.title'
         });
       case 'preference':
-        return React.createElement(FormattedMessage, {
-          id: "exerciseRightpane.preference.title"
+        return __intl.formatMessage({
+          id: 'exerciseRightpane.preference.title'
         });
       default:
         return '';
@@ -94,15 +96,12 @@ const ExerciseRightpane = () => {
   if (!activeState) {
     return null;
   }
-  return React.createElement(StyledRightpaneWrap, null, renderRightpaneHeader(), React.createElement(Hr, {
+  return React.createElement(RawEliceIntlProvider, Object.assign({}, __intl), React.createElement(StyledRightpaneWrap, null, renderRightpaneHeader(), React.createElement(Hr, {
     marginStart: 0,
     marginEnd: 0,
     color: base.color.navy6
-  }), React.createElement(StyledRightpaneBodyWrap, null, renderRightpaneBodyContent()));
+  }), React.createElement(StyledRightpaneBodyWrap, null, renderRightpaneBodyContent())));
 };
-var ExerciseRightpane$1 = withExerciseIntlProvider(ExerciseRightpane, {
-  en: phrasesEn,
-  ko: phrasesKo
-});
+var ExerciseRightpane$1 = new IntlComponentBuilder(ExerciseRightpane).add('en', messageEn).add('ko', messageKo).add('th', messageTh).build();
 
 export { ExerciseRightpane$1 as default };

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { useIntl } from 'react-intl';
 import { Text, Vspace } from '@elice/blocks';
+import { useRawEliceIntl } from '@elice/intl';
 import { useRecoilValue } from 'recoil';
 import styled from 'styled-components';
 import { exerciseState } from '../context/recoil.js';
@@ -13,7 +13,7 @@ const 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 = useIntl();
+  const intl = useRawEliceIntl();
   const {
     materialExerciseId
   } = React.useContext(ExerciseContext);

package/es/components/material-exercise/exercise-rightpane/locales/en.json.js

@@ -1,3 +1,3 @@
-var phrasesEn = {"exerciseRightpane.environment.item.common.value.false":"No","exerciseRightpane.environment.item.common.value.true":"Yes","exerciseRightpane.environment.item.cpuLimit.name":"CPU Limit","exerciseRightpane.environment.item.cpuLimit.value":"3 cores","exerciseRightpane.environment.item.httpPort.name":"HTTP Port","exerciseRightpane.environment.item.httpPort.value.false":"Not enabled","exerciseRightpane.environment.item.httpPort.value.true":"8080","exerciseRightpane.environment.item.isGpu.name":"GPU Enabled","exerciseRightpane.environment.item.isVnc.name":"VNC Enabled","exerciseRightpane.environment.item.memoryLimit.name":"Memory Limit","exerciseRightpane.environment.item.timeLimit.name":"Time Limit","exerciseRightpane.environment.title":"Environment","exerciseRightpane.preference.title":"Editor Preferences"};
+var messageEn = {"exerciseRightpane.environment.item.common.value.false":"No","exerciseRightpane.environment.item.common.value.true":"Yes","exerciseRightpane.environment.item.cpuLimit.name":"CPU Limit","exerciseRightpane.environment.item.cpuLimit.value":"3 cores","exerciseRightpane.environment.item.httpPort.name":"HTTP Port","exerciseRightpane.environment.item.httpPort.value.false":"Not enabled","exerciseRightpane.environment.item.httpPort.value.true":"8080","exerciseRightpane.environment.item.isGpu.name":"GPU Enabled","exerciseRightpane.environment.item.isVnc.name":"VNC Enabled","exerciseRightpane.environment.item.memoryLimit.name":"Memory Limit","exerciseRightpane.environment.item.timeLimit.name":"Time Limit","exerciseRightpane.environment.title":"Environment","exerciseRightpane.preference.title":"Editor Preferences"};
 
-export { phrasesEn as default };
+export { messageEn as default };

package/es/components/material-exercise/exercise-rightpane/locales/index.d.ts

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

package/es/components/material-exercise/exercise-rightpane/locales/ko.json.js

@@ -1,3 +1,3 @@
-var phrasesKo = {"exerciseRightpane.environment.item.common.value.false":"아니오","exerciseRightpane.environment.item.common.value.true":"예","exerciseRightpane.environment.item.cpuLimit.name":"CPU 제한","exerciseRightpane.environment.item.cpuLimit.value":"3 코어","exerciseRightpane.environment.item.httpPort.name":"HTTP 포트","exerciseRightpane.environment.item.httpPort.value.false":"연결 안 함","exerciseRightpane.environment.item.httpPort.value.true":"8080","exerciseRightpane.environment.item.isGpu.name":"GPU 사용","exerciseRightpane.environment.item.isVnc.name":"VNC 사용","exerciseRightpane.environment.item.memoryLimit.name":"메모리 제한","exerciseRightpane.environment.item.timeLimit.name":"시간 제한","exerciseRightpane.environment.title":"실습 환경","exerciseRightpane.preference.title":"에디터 설정"};
+var messageKo = {"exerciseRightpane.environment.item.common.value.false":"아니오","exerciseRightpane.environment.item.common.value.true":"예","exerciseRightpane.environment.item.cpuLimit.name":"CPU 제한","exerciseRightpane.environment.item.cpuLimit.value":"3 코어","exerciseRightpane.environment.item.httpPort.name":"HTTP 포트","exerciseRightpane.environment.item.httpPort.value.false":"연결 안 함","exerciseRightpane.environment.item.httpPort.value.true":"8080","exerciseRightpane.environment.item.isGpu.name":"GPU 사용","exerciseRightpane.environment.item.isVnc.name":"VNC 사용","exerciseRightpane.environment.item.memoryLimit.name":"메모리 제한","exerciseRightpane.environment.item.timeLimit.name":"시간 제한","exerciseRightpane.environment.title":"실습 환경","exerciseRightpane.preference.title":"에디터 설정"};
 
-export { phrasesKo as default };
+export { messageKo as default };

package/es/components/material-exercise/exercise-rightpane/locales/th.json.js

@@ -0,0 +1,3 @@
+var messageTh = {"exerciseRightpane.environment.item.common.value.false":"ไม่","exerciseRightpane.environment.item.common.value.true":"ตัวอย่าง","exerciseRightpane.environment.item.cpuLimit.name":"ขีดจำกัด CPU","exerciseRightpane.environment.item.cpuLimit.value":"3 คอร์","exerciseRightpane.environment.item.httpPort.name":"พอร์ต HTTP","exerciseRightpane.environment.item.httpPort.value.false":"ไม่ได้เชื่อมต่อ","exerciseRightpane.environment.item.httpPort.value.true":"8080","exerciseRightpane.environment.item.isGpu.name":"การใช้งาน GPU","exerciseRightpane.environment.item.isVnc.name":"การใช้ VNC","exerciseRightpane.environment.item.memoryLimit.name":"ขีดจำกัดหน่วยความจำ","exerciseRightpane.environment.item.timeLimit.name":"ขีดจำกัดเวลา","exerciseRightpane.environment.title":"สมบัติทดลอง","exerciseRightpane.preference.title":"การตั้งค่าเอ็ดิเตอร์"};
+
+export { messageTh as default };

package/es/components/material-exercise/exercise-room/ExerciseRoom.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
+import type { WithIntlComponentBuilderProps } from '@elice/intl';
 export interface ExerciseRoomProps {
     locale?: string;
     onHide: () => void;
 }
-declare const _default: React.VFC<React.PropsWithChildren<ExerciseRoomProps>>;
+declare const _default: React.ForwardRefExoticComponent<import("@elice/intl").IntlComponentExtraProps & Omit<WithIntlComponentBuilderProps<ExerciseRoomProps>, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & React.RefAttributes<any>>;
 export default _default;

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

@@ -1,15 +1,17 @@
 import React from 'react';
-import { withExerciseIntlProvider } from '../context/ExerciseIntlProvider.js';
-import phrasesEn from './locales/en.json.js';
-import phrasesKo from './locales/ko.json.js';
+import { IntlComponentBuilder, RawEliceIntlProvider } from '@elice/intl';
 import MaterialExerciseExerciseRoomDetail from './ExerciseRoomDetail.js';
 import MaterialExerciseExerciseRoomList from './ExerciseRoomList.js';
+import messageEn from './locales/en.json.js';
+import messageKo from './locales/ko.json.js';
+import messageTh from './locales/th.json.js';
 
 const ExerciseRoom = ({
-  onHide
+  onHide,
+  __intl
 }) => {
   const [selectedExerciseRoomId, setSelectedExerciseRoomId] = React.useState();
-  return selectedExerciseRoomId ? React.createElement(MaterialExerciseExerciseRoomDetail, {
+  const ExerciseRoomContent = selectedExerciseRoomId ? React.createElement(MaterialExerciseExerciseRoomDetail, {
     selectedExerciseRoomId: selectedExerciseRoomId,
     goToList: () => setSelectedExerciseRoomId(undefined),
     onHide: onHide
@@ -17,10 +19,8 @@ const ExerciseRoom = ({
     onExerciseRoomClick: id => setSelectedExerciseRoomId(id),
     onHide: onHide
   });
+  return React.createElement(RawEliceIntlProvider, Object.assign({}, __intl), ExerciseRoomContent);
 };
-var ExerciseRoom$1 = withExerciseIntlProvider(ExerciseRoom, {
-  en: phrasesEn,
-  ko: phrasesKo
-});
+var ExerciseRoom$1 = new IntlComponentBuilder(ExerciseRoom).add('en', messageEn).add('ko', messageKo).add('th', messageTh).build();
 
 export { ExerciseRoom$1 as default };

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import { useIntl, FormattedMessage } from 'react-intl';
 import { useCopyToClipboard, useDebounce, useUpdateEffect } from 'react-use';
 import { getOrgMaterialExerciseExerciseRoomGet, postOrgMaterialExerciseExerciseRoomEdit, postOrgMaterialExerciseExerciseRoomDefaultRoomSet, getOrgCourseUserList, postOrgMaterialExerciseExerciseRoomDelete, postOrgMaterialExerciseExerciseRoomUserDelete, postOrgMaterialExerciseExerciseRoomUserEdit } from '@elice/api-client';
 import { Modal, Flex, Icon, Text, Button, Dialog, Label, Vspace, Input, ProfileImage, Select, Notification } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { eilArrowLeftwardsSingle, eisArrowDownwardsCircle, eilSearch } from '@elice/icons';
+import { useRawEliceIntl } from '@elice/intl';
 import { enums } from '@elice/types';
 import _ from 'lodash';
 import { useRecoilValue } from 'recoil';
@@ -26,7 +26,7 @@ const MaterialExerciseExerciseRoomDetail = ({
   onHide
 }) => {
   var _a, _b, _c, _d, _e;
-  const intl = useIntl();
+  const intl = useRawEliceIntl();
   const {
     materialExerciseId,
     onExerciseRoomIdChange
@@ -185,8 +185,8 @@ const MaterialExerciseExerciseRoomDetail = ({
       underline: true,
       border: false,
       onClick: doPostOrgMaterialExerciseExerciseRoomDefaultRoomSet
-    }, React.createElement(FormattedMessage, {
-      id: "materialExerciseExerciseRoom.setDefaultExerciseRoom"
+    }, intl.formatMessage({
+      id: 'materialExerciseExerciseRoom.setDefaultExerciseRoom'
     }))) : undefined,
     footerButtons: [{
       label: intl.formatMessage({

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { useIntl } from 'react-intl';
 import { getOrgMaterialExerciseExerciseRoomList, postOrgMaterialExerciseExerciseRoomEdit } from '@elice/api-client';
 import { Modal, Notification, Flex, Text, Icon, ProfileImageGroup, ProfileImage } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { eisArrowDownwardsCircle } from '@elice/icons';
+import { useRawEliceIntl } from '@elice/intl';
 import { enums } from '@elice/types';
 import { useRecoilValue } from 'recoil';
 import styled from 'styled-components';
@@ -22,7 +22,7 @@ const MaterialExerciseExerciseRoomList = ({
   onExerciseRoomClick,
   onHide
 }) => {
-  const intl = useIntl();
+  const intl = useRawEliceIntl();
   const {
     materialExerciseId,
     exerciseRoomId