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

package/es/components/material-exercise/exercise-file-tree/ExerciseFileTree.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-file-tree/ExerciseFileTree.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { useIntl } from 'react-intl';
 import { postOrgMaterialExerciseExerciseRoomUserFileAdd, postOrgMaterialExerciseExerciseRoomUserFileDirectoryAdd, postOrgMaterialExerciseExerciseRoomUserFileDelete, postOrgMaterialExerciseExerciseRoomUserFileDirectoryDelete, postOrgMaterialExerciseExerciseRoomUserFileMove, postOrgMaterialExerciseExerciseRoomUserFileDirectoryMove, getOrgMaterialExerciseExerciseRoomGet } from '@elice/api-client';
 import { Flex, Notification } from '@elice/blocks';
+import { IntlComponentBuilder } from '@elice/intl';
 import { enums } from '@elice/types';
 import { camelize } from 'humps';
 import { useRecoilValue, useRecoilState } from 'recoil';
@@ -17,9 +17,9 @@ 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 messageEn from './locales/en.json.js';
+import messageKo from './locales/ko.json.js';
+import messageTh from './locales/th.json.js';
 
 const AsyncFileTree = React.lazy(() => import('../../shared/file-tree/FileTree.js'));
 const AsyncFileTreeList = React.lazy(() => import('../../shared/file-tree/FileTreeList.js'));
@@ -40,9 +40,10 @@ var MaterialExerciseFileError;
   MaterialExerciseFileError["UsableSizeExceed"] = "usable_size_exceed";
   MaterialExerciseFileError["SubFileOrPathExist"] = "sub_file_or_path_exist";
 })(MaterialExerciseFileError || (MaterialExerciseFileError = {}));
-const ExerciseFileTree = () => {
+const ExerciseFileTree = ({
+  __intl
+}) => {
   var _a, _b, _c, _d;
-  const intl = useIntl();
   const {
     exerciseRoomId,
     materialExerciseId,
@@ -116,7 +117,7 @@ const ExerciseFileTree = () => {
       setExerciseRoom(exerciseRoom);
     } catch (error) {
       console.error(error);
-      Notification.error(intl.formatMessage({
+      Notification.error(__intl.formatMessage({
         id: 'materialExercise.exerciseFileTree.fetchRoom.failure'
       }));
     }
@@ -143,7 +144,7 @@ const ExerciseFileTree = () => {
         message = ((_b = error.detail) === null || _b === void 0 ? void 0 : _b.failCode) ? error.detail.failCode : `materialExercise.exerciseFileTree.errorCode.unknown`;
         failMessage = (_c = error.detail) === null || _c === void 0 ? void 0 : _c.failMessage;
     }
-    Notification.error(intl.formatMessage({
+    Notification.error(__intl.formatMessage({
       id: message
     }) + `${failMessage ? ` (${failMessage})` : ''}`);
     if (typeof onError === 'function') {
@@ -326,9 +327,6 @@ const ExerciseFileTree = () => {
     locale: locale
   }, React.createElement(AsyncFileTreeToolbar, null), React.createElement(StyledFileTreeDivider, null), React.createElement(AsyncFileTreeList, null))));
 };
-var ExerciseFileTree$1 = withExerciseIntlProvider(ExerciseFileTree, {
-  en: phrasesEn,
-  ko: phrasesKo
-});
+var ExerciseFileTree$1 = new IntlComponentBuilder(ExerciseFileTree).add('en', messageEn).add('ko', messageKo).add('th', messageTh).build();
 
 export { ExerciseFileTree$1 as default };

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

@@ -1,3 +1,3 @@
-var phrasesEn = {"exerciseFileTree.errorCode.insufficientPermission":"[Error] Insufficient Permission","exerciseFileTree.errorCode.invalidParameter":"[Error] Invalid Parameter","exerciseFileTree.errorCode.invalidParameterCombination":"[Error] Invalid Parameter Combination","exerciseFileTree.errorCode.notFoundCurrentFilename":"[Error] Not Found Current Filename","exerciseFileTree.errorCode.notFoundExerciseRoom":"[Error] Not Found ExerciseRoom","exerciseFileTree.errorCode.notFoundPath":"[Error] Not Found Path","exerciseFileTree.errorCode.overwriteExistingOne":"[Error] Overwrite Existing One","exerciseFileTree.errorCode.resultingFilenameUnderCurrentFilename":"[Error] Resulting Filename Under Current Filename","exerciseFileTree.errorCode.subFileOrPathExist":"[Error] Sub File Or Path Exist","exerciseFileTree.errorCode.unknown":"[Error] An unkown error has occurred.","exerciseFileTree.errorCode.usableSizeExceed":"[Error] Usable Size Exceed","exerciseFileTree.fetchRoom.failure":"Failed to fetch exercise room."};
+var messageEn = {"exerciseFileTree.errorCode.insufficientPermission":"[Error] Insufficient Permission","exerciseFileTree.errorCode.invalidParameter":"[Error] Invalid Parameter","exerciseFileTree.errorCode.invalidParameterCombination":"[Error] Invalid Parameter Combination","exerciseFileTree.errorCode.notFoundCurrentFilename":"[Error] Not Found Current Filename","exerciseFileTree.errorCode.notFoundExerciseRoom":"[Error] Not Found ExerciseRoom","exerciseFileTree.errorCode.notFoundPath":"[Error] Not Found Path","exerciseFileTree.errorCode.overwriteExistingOne":"[Error] Overwrite Existing One","exerciseFileTree.errorCode.resultingFilenameUnderCurrentFilename":"[Error] Resulting Filename Under Current Filename","exerciseFileTree.errorCode.subFileOrPathExist":"[Error] Sub File Or Path Exist","exerciseFileTree.errorCode.unknown":"[Error] An unkown error has occurred.","exerciseFileTree.errorCode.usableSizeExceed":"[Error] Usable Size Exceed","exerciseFileTree.fetchRoom.failure":"Failed to fetch exercise room."};
 
-export { phrasesEn as default };
+export { messageEn as default };

package/es/components/material-exercise/exercise-file-tree/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-file-tree/locales/ko.json.js

@@ -1,3 +1,3 @@
-var phrasesKo = {"exerciseFileTree.errorCode.insufficientPermission":"[Error] 권한이 없습니다.","exerciseFileTree.errorCode.invalidParameter":"[Error] 파라미터가 올바르지 않습니다.","exerciseFileTree.errorCode.invalidParameterCombination":"[Error] 파라미터 조합이 올바르지 않습니다.","exerciseFileTree.errorCode.notFoundCurrentFilename":"[Error] 파일을 찾을 수 없습니다.","exerciseFileTree.errorCode.notFoundExerciseRoom":"[Error] 실습방을 찾을 수 없습니다.","exerciseFileTree.errorCode.notFoundPath":"[Error] 해당 경로를 찾을 수 없습니다.","exerciseFileTree.errorCode.overwriteExistingOne":"[Error] 덮어쓰기가 불가능합니다.","exerciseFileTree.errorCode.resultingFilenameUnderCurrentFilename":"[Error] 같은 경로에 디렉토리를 옮길 수 없습니다.","exerciseFileTree.errorCode.subFileOrPathExist":"[Error] 디렉토리를 삭제하지 못했습니다. 디렉토리가 비어있어야 삭제할 수 있습니다.","exerciseFileTree.errorCode.unknown":"[Error] 알수 없는 에러가 발생하였습니다.","exerciseFileTree.errorCode.usableSizeExceed":"[Error] 허용된 용량을 초과하였습니다.","exerciseFileTree.fetchRoom.failure":"실습을 가져오는데 실패했습니다."};
+var messageKo = {"exerciseFileTree.errorCode.insufficientPermission":"[Error] 권한이 없습니다.","exerciseFileTree.errorCode.invalidParameter":"[Error] 파라미터가 올바르지 않습니다.","exerciseFileTree.errorCode.invalidParameterCombination":"[Error] 파라미터 조합이 올바르지 않습니다.","exerciseFileTree.errorCode.notFoundCurrentFilename":"[Error] 파일을 찾을 수 없습니다.","exerciseFileTree.errorCode.notFoundExerciseRoom":"[Error] 실습방을 찾을 수 없습니다.","exerciseFileTree.errorCode.notFoundPath":"[Error] 해당 경로를 찾을 수 없습니다.","exerciseFileTree.errorCode.overwriteExistingOne":"[Error] 덮어쓰기가 불가능합니다.","exerciseFileTree.errorCode.resultingFilenameUnderCurrentFilename":"[Error] 같은 경로에 디렉토리를 옮길 수 없습니다.","exerciseFileTree.errorCode.subFileOrPathExist":"[Error] 디렉토리를 삭제하지 못했습니다. 디렉토리가 비어있어야 삭제할 수 있습니다.","exerciseFileTree.errorCode.unknown":"[Error] 알수 없는 에러가 발생하였습니다.","exerciseFileTree.errorCode.usableSizeExceed":"[Error] 허용된 용량을 초과하였습니다.","exerciseFileTree.fetchRoom.failure":"실습을 가져오는데 실패했습니다."};
 
-export { phrasesKo as default };
+export { messageKo as default };

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

@@ -0,0 +1,3 @@
+var messageTh = {"exerciseFileTree.errorCode.insufficientPermission":"[ข้อผิดพลาด] ไม่มีสิทธิ์.","exerciseFileTree.errorCode.invalidParameter":"[ข้อผิดพลาด] พารามิเตอร์ไม่ถูกต้อง","exerciseFileTree.errorCode.invalidParameterCombination":"[ข้อผิดพลาด] การรวมพารามิเตอร์ไม่ถูกต้อง.","exerciseFileTree.errorCode.notFoundCurrentFilename":"[ข้อผิดพลาด] ไม่พบไฟล์","exerciseFileTree.errorCode.notFoundExerciseRoom":"[ข้อผิดพลาด] ไม่พบห้องปฏิบัติการ.","exerciseFileTree.errorCode.notFoundPath":"[ข้อผิดพลาด] ไม่สามารถหาเส้นทางที่ระบุ","exerciseFileTree.errorCode.overwriteExistingOne":"[ข้อผิดพลาด] ไม่สามารถเขียนทับได้.","exerciseFileTree.errorCode.resultingFilenameUnderCurrentFilename":"[ข้อผิดพลาด] ไม่สามารถย้ายไดเรกทอรีไปยังตำแหน่งเดียวกันได้ ค่ะ.","exerciseFileTree.errorCode.subFileOrPathExist":"[ข้อผิดพลาด] ไม่สามารถลบไดเรกทอรี ไดเร็กทอรีต้องว่างเปล่าก่อนจึงจะสามารถลบได้","exerciseFileTree.errorCode.unknown":"[ข้อผิดพลาด] เกิดข้อผิดพลาดที่ไม่สามารถระบุได้.","exerciseFileTree.errorCode.usableSizeExceed":"[ข้อผิดพลาด] คุณเกินพื้นที่ที่อนุญาตแล้วค่ะ.","exerciseFileTree.fetchRoom.failure":"การเรียนปฏิบัติล้มเหลว "};
+
+export { messageTh as default };

package/es/components/material-exercise/exercise-menu/ExerciseMenu.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-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,12 @@ 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, {
+    value: {
+      intl: __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,9 @@ import '../context/ExerciseProvider.js';
 
 const ExerciseMenuArduinoAgentModalButton = () => {
   const setOpen = useSetRecoilState(exerciseArduinoAgentModalState);
+  const {
+    intl
+  } = useRawEliceIntl();
   const handleClick = () => {
     setOpen(true);
   };
@@ -23,8 +26,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,9 @@ 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 +31,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 +49,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 +61,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 +82,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,9 @@ 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,9 @@ 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 +70,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,9 @@ 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 +91,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 +123,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,12 @@ const ExercisePreview = () => {
   //
   //
   //
-  return React.createElement(StyledExercisePreview, null, renderNoVnc(), renderWebBrowser());
+  return React.createElement(RawEliceIntlProvider, {
+    value: {
+      intl: __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,9 @@ 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,16 @@ const ExerciseRightpane = () => {
   if (!activeState) {
     return null;
   }
-  return React.createElement(StyledRightpaneWrap, null, renderRightpaneHeader(), React.createElement(Hr, {
+  return React.createElement(RawEliceIntlProvider, {
+    value: {
+      intl: __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,9 @@ 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 };