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

package/es/components/material-exercise/MaterialExercise.d.ts

@@ -4,5 +4,7 @@ export interface MaterialExerciseProps extends MaterialExerciseCommonProps {
     locale?: string;
 }
 export type MaterialExerciseApis = MaterialExerciseCommonApis;
-declare const _default: React.ForwardRefExoticComponent<Omit<MaterialExerciseProps & React.RefAttributes<MaterialExerciseCommonApis> & import("@elice/material-shared-utils").MaterialCommponentCommonProps, "ref"> & React.RefAttributes<MaterialExerciseCommonApis>>;
+declare const _default: React.ForwardRefExoticComponent<Omit<import("@elice/intl").IntlComponentExtraProps & Omit<Omit<import("@elice/intl").IntlComponentExtraProps & Omit<MaterialExerciseProps, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & {
+    __intl: import("@elice/intl").EliceIntlShape;
+} & React.RefAttributes<MaterialExerciseCommonApis> & import("@elice/material-shared-utils").MaterialCommponentCommonProps, "ref"> & React.RefAttributes<MaterialExerciseCommonApis>, keyof import("@elice/intl").IntlComponentExtraProps | "__intl">, "ref"> & React.RefAttributes<MaterialExerciseCommonApis>>;
 export default _default;

package/es/components/material-exercise/MaterialExercise.js

@@ -1,11 +1,14 @@
 import React, { forwardRef } from 'react';
-import { useIntl, IntlProvider } from 'react-intl';
 import { config } from '@elice/api-client';
 import { ResizableNext, Button, Icon, Hspace } from '@elice/blocks';
 import { eilClassroom } from '@elice/icons';
+import { IntlComponentBuilder, RawEliceIntlProvider } from '@elice/intl';
 import { withForwardRefMaterial } from '@elice/material-shared-utils';
 import { useRecoilValue } from 'recoil';
 import { MATERIAL_RESIZABLE_COMMON_PROPS } from '../../constants/stylesheets.js';
+import messageEn from '../locales/en.json.js';
+import messageKo from '../locales/ko.json.js';
+import messageTh from '../locales/th.json.js';
 import ExerciseFileTabsFileTreeButton from './exercise-file-tabs/ExerciseFileTabsFileTreeButton.js';
 import { exerciseContainerSizeState, exerciseState, exerciseFileTreeOpenedState, exercisePreviewTypeState, exercisePreviewDisplayModeState, exerciseMonacoEditorApisState } from './context/recoil.js';
 import { ExerciseContext } from './context/context.js';
@@ -24,8 +27,6 @@ import ExercisePreview from './exercise-preview/ExercisePreview.js';
 import ExerciseRightpane from './exercise-rightpane/ExerciseRightpane.js';
 import ExerciseRunner from './exercise-runner/ExerciseRunner.js';
 import { StyledExerciseContainer, EXERCISE_PREVIEW_MIN_WIDTH, EXERCISE_HORIZONTAL_RATIO, StyledExerciseMain, StyledExerciseFileAndTabWrap, StyledExerciseTabBar, StyledExerciseRunnerWrap, EXERCISE_RUNNER_MIN_HEIGHT, StyledxerciseFileTreeContaner, EXERCISE_FILE_TREE_MIN_WIDTH, StyledExerciseFileTreeWrap, StyledExerciseTabsWrap, StyledExerciseTabMenuWrap, StyledExerciseFileWrap } from './MaterialExercise.styled.js';
-import * as MaterialExercise_i18n from './MaterialExercise.i18n.js';
-import { en } from './MaterialExercise.i18n.js';
 
 //
 //
@@ -34,7 +35,9 @@ import { en } from './MaterialExercise.i18n.js';
  * Material exercise.
  */
 const MaterialExercise = forwardRef((props, ref) => {
-  const intl = useIntl();
+  const {
+    __intl
+  } = props;
   const {
     onReferenceDocsToggle
   } = React.useContext(ExerciseContext);
@@ -89,7 +92,7 @@ const MaterialExercise = forwardRef((props, ref) => {
       icon: eilClassroom
     }), React.createElement(Hspace, {
       width: 0.25
-    }), intl.formatMessage({
+    }), __intl.formatMessage({
       id: 'materialExercise.button.referenceDocs'
     })), React.createElement(Hspace, {
       width: 0.5
@@ -166,19 +169,12 @@ const MaterialExercise = forwardRef((props, ref) => {
 //
 //
 //
-var MaterialExercise$1 = withForwardRefMaterial(forwardRef((props, ref) => {
-  const {
-    locale = 'en'
-  } = props;
-  return React.createElement(IntlProvider, {
-    locale: locale,
-    defaultLocale: "en",
-    messages: locale in MaterialExercise_i18n ? MaterialExercise_i18n[locale] : en
-  }, React.createElement(ExerciseProvider, Object.assign({}, props), React.createElement(MaterialExercise, Object.assign({}, props, {
+var MaterialExercise$1 = new IntlComponentBuilder(withForwardRefMaterial(forwardRef((props, ref) => {
+  return React.createElement(RawEliceIntlProvider, Object.assign({}, props.__intl), React.createElement(ExerciseProvider, Object.assign({}, props), React.createElement(MaterialExercise, Object.assign({}, props, {
     ref: ref
   }))));
 }), config.init, {
   overrideRecoilScope: true
-});
+})).add('en', messageEn).add('ko', messageKo).add('th', messageTh).build();
 
 export { MaterialExercise$1 as default };

package/es/components/material-exercise/context/ExerciseProviderNoImage.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { WithIntlComponentBuilderProps } from '@elice/intl';
 export interface ExerciseProviderNoImageProps {
     /**  */
     text?: React.ReactChild;
@@ -11,5 +12,5 @@ export interface ExerciseProviderNoImageProps {
     /**  */
     locale?: string;
 }
-declare const _default: (props: ExerciseProviderNoImageProps) => React.JSX.Element;
+declare const _default: React.ForwardRefExoticComponent<import("@elice/intl").IntlComponentExtraProps & Omit<WithIntlComponentBuilderProps<ExerciseProviderNoImageProps>, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & React.RefAttributes<any>>;
 export default _default;

package/es/components/material-exercise/context/ExerciseProviderNoImage.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { useIntl } from 'react-intl';
 import { SafeImage, Box, Text, Button } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
-import { MaterialIntlProvider } from '@elice/material-shared-utils';
+import { IntlComponentBuilder } from '@elice/intl';
 import styled from 'styled-components';
-import phrasesEn from './locales/noImage.en.json.js';
-import phrasesKo from './locales/noImage.ko.json.js';
+import noImageMessageEn from './locales/noImage.en.json.js';
+import noImageMessageKo from './locales/noImage.ko.json.js';
+import noImageMessageTh from './locales/noImage.th.json.js';
 
 const StyledProviderNoImage = styled.div.withConfig({
   componentId: "sc-oaauqc-0"
@@ -14,9 +14,9 @@ const ExerciseProviderNoImage = ({
   text,
   imageSrc = '',
   buttonText,
-  onButtonClick
+  onButtonClick,
+  __intl
 }) => {
-  const intl = useIntl();
   /**
    * render action button
    */
@@ -26,7 +26,7 @@ const ExerciseProviderNoImage = ({
     }
     return React.createElement(Button, {
       onClick: onButtonClick
-    }, buttonText || intl.formatMessage({
+    }, buttonText || __intl.formatMessage({
       id: 'exerciseContext.provider.noImage.button'
     }));
   };
@@ -45,21 +45,13 @@ const ExerciseProviderNoImage = ({
     paddingbottom: "2rem"
   }, React.createElement(Text, {
     role: "white"
-  }, text || intl.formatMessage({
+  }, text || __intl.formatMessage({
     id: 'exerciseContext.provider.noImage.title'
   }))), renderActionButton());
 };
 //
 //
 //
-var MaterialExerciseNoImage = (props => {
-  return React.createElement(MaterialIntlProvider, {
-    locale: props.locale,
-    phrases: {
-      en: phrasesEn,
-      ko: phrasesKo
-    }
-  }, React.createElement(ExerciseProviderNoImage, Object.assign({}, props)));
-});
+var MaterialExerciseNoImage = new IntlComponentBuilder(ExerciseProviderNoImage).add('en', noImageMessageEn).add('ko', noImageMessageKo).add('th', noImageMessageTh).build();
 
 export { MaterialExerciseNoImage as default };

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

@@ -1,3 +1,3 @@
-var phrasesEn = {"exerciseContext.provider.noImage.button":"Create a new image","exerciseContext.provider.noImage.title":"Exercise image is not ready yet."};
+var noImageMessageEn = {"exerciseContext.provider.noImage.button":"Create a new image","exerciseContext.provider.noImage.title":"Exercise image is not ready yet."};
 
-export { phrasesEn as default };
+export { noImageMessageEn as default };

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

@@ -1,3 +1,3 @@
-var phrasesKo = {"exerciseContext.provider.noImage.button":"예제 작성","exerciseContext.provider.noImage.title":"실습 코드가 작성되지 않았습니다."};
+var noImageMessageKo = {"exerciseContext.provider.noImage.button":"예제 작성","exerciseContext.provider.noImage.title":"실습 코드가 작성되지 않았습니다."};
 
-export { phrasesKo as default };
+export { noImageMessageKo as default };

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

@@ -0,0 +1,3 @@
+var noImageMessageTh = {"exerciseContext.provider.noImage.button":"ตัวอย่างการเขียน","exerciseContext.provider.noImage.title":"ยังไม่มีโค้ดที่เขียนไว้ในการฝึกฝนครับ."};
+
+export { noImageMessageTh as default };

package/es/components/material-exercise/exercise-code-history/ExerciseCodeHistory.d.ts

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

package/es/components/material-exercise/exercise-code-history/ExerciseCodeHistory.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { useIntl } from 'react-intl';
 import { Button, Text } from '@elice/blocks';
+import { IntlComponentBuilder } from '@elice/intl';
 import dayjs from 'dayjs';
 import { useRecoilValue } from 'recoil';
 import ExerciseVersionList from '../../shared/exercise-version-list/ExerciseVersionList.js';
@@ -26,16 +26,16 @@ import 'lodash/debounce';
 import 'ot-text-unicode';
 import 'random-words';
 import 'unicount';
-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';
 import { StyledModalContent, StyledVersionsWrapper, StyledVersionRangeInputWrapper, StyledVersionRangeInput, StyledEditorWrapper, StyledFileNameBox } from './ExerciseCodeHistory.styled.js';
 
 const ExerciseCodeHistory = ({
   onHide,
-  onLoadVersionButtonClick
+  onLoadVersionButtonClick,
+  __intl
 }) => {
-  const intl = useIntl();
   const {
     exerciseRoomId
   } = React.useContext(ExerciseContext);
@@ -62,7 +62,7 @@ const ExerciseCodeHistory = ({
   }, React.createElement(Text, {
     role: "gray3",
     size: "small"
-  }, intl.formatMessage({
+  }, __intl.formatMessage({
     id: 'exerciseCodeHistory.op.version'
   }, {
     version: op.version,
@@ -75,7 +75,7 @@ const ExerciseCodeHistory = ({
   }, React.createElement(Text, {
     role: "white",
     size: "small"
-  }, intl.formatMessage({
+  }, __intl.formatMessage({
     id: 'exerciseCodeHistory.button.load.more'
   }))) : null);
   /**
@@ -126,7 +126,7 @@ const ExerciseCodeHistory = ({
       onClick: () => {
         onLoadVersionButtonClick(doc);
       }
-    }, intl.formatMessage({
+    }, __intl.formatMessage({
       id: 'exerciseCodeHistory.button.load.selectedVersions'
     }));
   };
@@ -134,7 +134,7 @@ const ExerciseCodeHistory = ({
   //
   //
   return React.createElement(MaterialModal, {
-    title: intl.formatMessage({
+    title: __intl.formatMessage({
       id: 'exerciseCodeHistory.title'
     }),
     onHide: onHide,
@@ -144,9 +144,6 @@ const ExerciseCodeHistory = ({
 //
 //
 //
-var ExerciseCodeHistory$1 = withExerciseIntlProvider(ExerciseCodeHistory, {
-  en: phrasesEn,
-  ko: phrasesKo
-});
+var ExerciseCodeHistory$1 = new IntlComponentBuilder(ExerciseCodeHistory).add('en', messageEn).add('ko', messageKo).add('th', messageTh).build();
 
 export { ExerciseCodeHistory$1 as default };

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

@@ -1,3 +1,3 @@
-var phrasesEn = {"exerciseCodeHistory.button.load.more":"Load more","exerciseCodeHistory.button.load.selectedVersions":"Load selected versions","exerciseCodeHistory.op.version":"Version {version} {datetime}","exerciseCodeHistory.title":"Code revision history"};
+var messageEn = {"exerciseCodeHistory.button.load.more":"Load more","exerciseCodeHistory.button.load.selectedVersions":"Load selected versions","exerciseCodeHistory.op.version":"Version {version} {datetime}","exerciseCodeHistory.title":"Code revision history"};
 
-export { phrasesEn as default };
+export { messageEn as default };

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

@@ -1,3 +1,3 @@
-var phrasesKo = {"exerciseCodeHistory.button.load.more":"더 불러오기","exerciseCodeHistory.button.load.selectedVersions":"선택 버전 불러오기","exerciseCodeHistory.op.version":"버전 {version} {datetime}","exerciseCodeHistory.title":"코드 수정 이력"};
+var messageKo = {"exerciseCodeHistory.button.load.more":"더 불러오기","exerciseCodeHistory.button.load.selectedVersions":"선택 버전 불러오기","exerciseCodeHistory.op.version":"버전 {version} {datetime}","exerciseCodeHistory.title":"코드 수정 이력"};
 
-export { phrasesKo as default };
+export { messageKo as default };

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

@@ -0,0 +1,3 @@
+var messageTh = {"exerciseCodeHistory.button.load.more":"โหลดเพิ่มเติม","exerciseCodeHistory.button.load.selectedVersions":"โหลดเวอร์ชันที่เลือก","exerciseCodeHistory.op.version":"เวอร์ชัน {version} {datetime}","exerciseCodeHistory.title":"ประวัติการแก้ไขโค้ด"};
+
+export { messageTh as default };

package/es/components/material-exercise/exercise-file-editor/ExerciseFileReadOnlyBanner.d.ts

@@ -1,6 +1,4 @@
 import React from 'react';
-/**
- * Banner for readonly exercise file.
- */
-declare const ExerciseFileReadOnlyBanner: React.FC;
-export default ExerciseFileReadOnlyBanner;
+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-editor/ExerciseFileReadOnlyBanner.js

@@ -1,13 +1,16 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
 import { Text } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
+import { IntlComponentBuilder } from '@elice/intl';
 import styled from 'styled-components';
 import '../context/recoil.js';
 import { ExerciseContext } from '../context/context.js';
 import '../context/recoilTypes.js';
 import '../context/subjects.js';
 import '../context/ExerciseProvider.js';
+import messageEn from './locales/en.json.js';
+import messageKo from './locales/ko.json.js';
+import messageTh from './locales/th.json.js';
 
 const StyledEditorReadOnlyBanner = styled.div.withConfig({
   componentId: "sc-kh9iw2-0"
@@ -15,7 +18,9 @@ const StyledEditorReadOnlyBanner = styled.div.withConfig({
 /**
  * Banner for readonly exercise file.
  */
-const ExerciseFileReadOnlyBanner = () => {
+const ExerciseFileReadOnlyBanner = ({
+  __intl
+}) => {
   const {
     readOnlyActiveFile
   } = React.useContext(ExerciseContext);
@@ -25,9 +30,13 @@ const ExerciseFileReadOnlyBanner = () => {
   return React.createElement(StyledEditorReadOnlyBanner, null, React.createElement(Text, {
     size: "tiny",
     role: "gray3"
-  }, React.createElement(FormattedMessage, {
-    id: "materialExercise.text.readOnlyBanner"
+  }, __intl.formatMessage({
+    id: 'materialExercise.text.readOnlyBanner'
   })));
 };
+//
+//
+//
+var ExerciseFileReadOnlyBanner$1 = new IntlComponentBuilder(ExerciseFileReadOnlyBanner).add('ko', messageKo).add('en', messageEn).add('th', messageTh).build();
 
-export { ExerciseFileReadOnlyBanner as default };
+export { ExerciseFileReadOnlyBanner$1 as default };

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

@@ -0,0 +1,3 @@
+var messageEn = {"materialExercise.text.readOnlyBanner":"[Read-Only] This file is read-only."};
+
+export { messageEn as default };

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

@@ -0,0 +1,3 @@
+var messageKo = {"materialExercise.text.readOnlyBanner":"[읽기전용] 이 파일은 읽기전용 입니다."};
+
+export { messageKo as default };

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

@@ -0,0 +1,3 @@
+var messageTh = {"materialExercise.text.readOnlyBanner":"[อ่านเท่านั้น] ไฟล์นี้เป็นเพียงอ่านอย่างเดียว"};
+
+export { messageTh as default };

package/es/components/material-exercise/exercise-file-tabs/ExerciseFileTabs.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
-declare const ExerciseFileTabs: React.FC;
-export default ExerciseFileTabs;
+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-tabs/ExerciseFileTabs.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IntlComponentBuilder, RawEliceIntlProvider } from '@elice/intl';
 import { useRecoilState } from 'recoil';
 import styled from 'styled-components';
 import '../../shared/exercise-shimmer/ExerciseFileShimmer.js';
@@ -11,12 +12,23 @@ import { ExerciseContext } from '../context/context.js';
 import '../context/recoilTypes.js';
 import '../context/subjects.js';
 import '../context/ExerciseProvider.js';
+import messageEn from './locales/fileTreeButton.en.json.js';
+import messageKo from './locales/fileTreeButton.ko.json.js';
+import messageTh from './locales/fileTreeButton.th.json.js';
 
+//
+//
+//
 const AsyncFileTabs = React.lazy(() => import('../../shared/file-tabs/FileTabs.js'));
 const StyledFileTabsWrapper = styled.div.withConfig({
   componentId: "sc-11fdoyl-0"
 })(["flex:0 0 3rem;"]);
-const ExerciseFileTabs = () => {
+//
+//
+//
+const ExerciseFileTabs = ({
+  __intl
+}) => {
   const {
     exerciseRoomId,
     materialExerciseId
@@ -48,7 +60,7 @@ const ExerciseFileTabs = () => {
     }
     setActiveFilename(path);
   };
-  return React.createElement(StyledFileTabsWrapper, null, React.createElement(React.Suspense, {
+  return React.createElement(RawEliceIntlProvider, Object.assign({}, __intl), React.createElement(StyledFileTabsWrapper, null, React.createElement(React.Suspense, {
     fallback: React.createElement(ExerciseFileTabsShimmer, null)
   }, React.createElement(AsyncFileTabs, {
     openedTabs: openedTabs,
@@ -56,7 +68,8 @@ const ExerciseFileTabs = () => {
     onCloseTab: handleCloseTab,
     onSelectTab: handleActivePathChange,
     onTabOrderChange: handleTabOrderChange
-  })));
+  }))));
 };
+var ExerciseFileTabs$1 = new IntlComponentBuilder(ExerciseFileTabs).add('en', messageEn).add('ko', messageKo).add('th', messageTh).build();
 
-export { ExerciseFileTabs as default };
+export { ExerciseFileTabs$1 as default };

package/es/components/material-exercise/exercise-file-tabs/ExerciseFileTabsFileTreeButton.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const _default: React.ForwardRefExoticComponent<Omit<React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export default _default;
+declare const ExerciseFileTabsFileTreeButton: React.ForwardRefExoticComponent<React.RefAttributes<HTMLButtonElement>>;
+export default ExerciseFileTabsFileTreeButton;

package/es/components/material-exercise/exercise-file-tabs/ExerciseFileTabsFileTreeButton.js

@@ -1,9 +1,9 @@
 import React, { forwardRef } from 'react';
-import { useIntl } from 'react-intl';
 import { useHover } from 'react-use';
 import { IconButton, Tooltip } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { eilArrowRightwardsDouble, eilFolder } from '@elice/icons';
+import { useRawEliceIntl } from '@elice/intl';
 import { enums } from '@elice/types';
 import { eliceApiUiConfigNormalizeHelper } from '@elice/utils';
 import { useRecoilValue, useRecoilState } from 'recoil';
@@ -13,16 +13,13 @@ import { ExerciseContext } from '../context/context.js';
 import '../context/recoilTypes.js';
 import '../context/subjects.js';
 import '../context/ExerciseProvider.js';
-import { withForwardRefExerciseIntlProvider } from '../context/ExerciseIntlProvider.js';
-import phrasesEn from './locales/fileTreeButton.en.json.js';
-import phrasesKo from './locales/fileTreeButton.ko.json.js';
 
 const ICON_BUTTON_SIZE = '2.25rem';
 const StyledFileTreeButton = styled(IconButton).withConfig({
   componentId: "sc-ohtsjn-0"
 })(["width:", " !important;height:", " !important;border-right:1px solid ", " !important;background-color:", " !important;&:hover{background-color:", " !important;}"], ICON_BUTTON_SIZE, ICON_BUTTON_SIZE, base.color.navy7, props => props.active ? base.color.navy8 : base.color.navy8, base.color.navy9);
 const ExerciseFileTabsFileTreeButton = forwardRef((_, ref) => {
-  const intl = useIntl();
+  const intl = useRawEliceIntl();
   const {
     materialExerciseId
   } = React.useContext(ExerciseContext);
@@ -70,12 +67,5 @@ const ExerciseFileTabsFileTreeButton = forwardRef((_, ref) => {
   });
   return (exercise === null || exercise === void 0 ? void 0 : exercise.uiConfig.editorFileTreeDefaultStatus) === enums.ExerciseUiConfigEditorFileTreeDefaultStatus.Hide ? null : el;
 });
-//
-//
-//
-var ExerciseFileTabsFileTreeButton$1 = withForwardRefExerciseIntlProvider(ExerciseFileTabsFileTreeButton, {
-  en: phrasesEn,
-  ko: phrasesKo
-});
 
-export { ExerciseFileTabsFileTreeButton$1 as default };
+export { ExerciseFileTabsFileTreeButton as default };

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

@@ -1,3 +1,3 @@
-var phrasesEn = {"exerciseFileTab.fileTreeButton.tooltip.close":"Close Filetree","exerciseFileTab.fileTreeButton.tooltip.open":"Open Filetree"};
+var messageEn = {"exerciseFileTab.fileTreeButton.tooltip.close":"Close Filetree","exerciseFileTab.fileTreeButton.tooltip.open":"Open Filetree"};
 
-export { phrasesEn as default };
+export { messageEn as default };

package/es/components/material-exercise/exercise-file-tabs/locales/fileTreeButton.ko.json.js

@@ -1,3 +1,3 @@
-var phrasesKo = {"exerciseFileTab.fileTreeButton.tooltip.close":"파일 트리 닫기","exerciseFileTab.fileTreeButton.tooltip.open":"파일 트리 열기"};
+var messageKo = {"exerciseFileTab.fileTreeButton.tooltip.close":"파일 트리 닫기","exerciseFileTab.fileTreeButton.tooltip.open":"파일 트리 열기"};
 
-export { phrasesKo as default };
+export { messageKo as default };

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

@@ -0,0 +1,3 @@
+var messageTh = {"exerciseFileTab.fileTreeButton.tooltip.close":"ปิดต้นไม้ไฟล์","exerciseFileTab.fileTreeButton.tooltip.open":"เปิดต้นไม้ไฟล์"};
+
+export { messageTh as default };

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

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

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;