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

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

@@ -1,3 +1,3 @@
-var phrasesEn = {"fileTree.list.item.content.input.validation.error.filename.dot":"The filename can't be \".\" or \"..\".","fileTree.list.item.content.input.validation.error.filename.dotElice":"The filename can't be \".elice\".","fileTree.list.item.content.input.validation.error.filename.duplicated":"The file name is already used.","fileTree.list.item.content.input.validation.error.filename.slash":"The filename can't include slash or backslash.","fileTree.list.item.content.input.validation.error.maxLength":"The filename can't be more than {maxLength} characters long.","fileTree.list.item.content.input.validation.error.required":"Please enter a filename.","fileTree.list.item.content.menu.deleteConfirmDialog.body":"Are you sure you want to delete \"{title}\"?","fileTree.list.item.content.menu.deleteConfirmDialog.cancel":"Cancel","fileTree.list.item.content.menu.deleteConfirmDialog.confirm":"Delete","fileTree.list.item.content.menu.deleteConfirmDialog.title":"Confirm Delete","fileTree.list.item.content.menu.item.delete":"Delete","fileTree.list.item.content.menu.item.hiddenSet":"Set Hidden","fileTree.list.item.content.menu.item.hiddenUnset":"Unset Hidden","fileTree.list.item.content.menu.item.newDirectory":"New Directory","fileTree.list.item.content.menu.item.newFile":"New File","fileTree.list.item.content.menu.item.readOnlySet":"Set Read-only","fileTree.list.item.content.menu.item.readOnlyUnset":"Unset Read-only","fileTree.list.item.content.menu.item.rename":"Rename","fileTree.toolbar.newDirectory":"New Directory","fileTree.toolbar.newFile":"New File","fileTree.toolbar.upload":"Upload File"};
+var messageEn = {"fileTree.list.item.content.input.validation.error.filename.dot":"The filename can't be \".\" or \"..\".","fileTree.list.item.content.input.validation.error.filename.dotElice":"The filename can't be \".elice\".","fileTree.list.item.content.input.validation.error.filename.duplicated":"The file name is already used.","fileTree.list.item.content.input.validation.error.filename.slash":"The filename can't include slash or backslash.","fileTree.list.item.content.input.validation.error.maxLength":"The filename can't be more than {maxLength} characters long.","fileTree.list.item.content.input.validation.error.required":"Please enter a filename.","fileTree.list.item.content.menu.deleteConfirmDialog.body":"Are you sure you want to delete \"{title}\"?","fileTree.list.item.content.menu.deleteConfirmDialog.cancel":"Cancel","fileTree.list.item.content.menu.deleteConfirmDialog.confirm":"Delete","fileTree.list.item.content.menu.deleteConfirmDialog.title":"Confirm Delete","fileTree.list.item.content.menu.item.delete":"Delete","fileTree.list.item.content.menu.item.hiddenSet":"Set Hidden","fileTree.list.item.content.menu.item.hiddenUnset":"Unset Hidden","fileTree.list.item.content.menu.item.newDirectory":"New Directory","fileTree.list.item.content.menu.item.newFile":"New File","fileTree.list.item.content.menu.item.readOnlySet":"Set Read-only","fileTree.list.item.content.menu.item.readOnlyUnset":"Unset Read-only","fileTree.list.item.content.menu.item.rename":"Rename","fileTree.toolbar.newDirectory":"New Directory","fileTree.toolbar.newFile":"New File","fileTree.toolbar.upload":"Upload File"};
 
-export { phrasesEn as default };
+export { messageEn as default };

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

@@ -1,3 +1,3 @@
-var phrasesKo = {"fileTree.list.item.content.input.validation.error.filename.dot":"파일 이름은 \".\" 혹은 \"..\"을 사용할 수 없습니다.","fileTree.list.item.content.input.validation.error.filename.dotElice":"파일 이름은 \".elice\"를 사용할 수 없습니다.","fileTree.list.item.content.input.validation.error.filename.duplicated":"이미 존재하는 파일 이름입니다.","fileTree.list.item.content.input.validation.error.filename.slash":"파일 이름은 슬래시나 역슬래시를 포함할 수 없습니다.","fileTree.list.item.content.input.validation.error.maxLength":"파일 이름은 {maxLength}자를 초과할 수 없습니다..","fileTree.list.item.content.input.validation.error.required":"파일 이름을 입력해주세요.","fileTree.list.item.content.menu.deleteConfirmDialog.body":"\"{title}\" 파일을 삭제하시겠습니까?","fileTree.list.item.content.menu.deleteConfirmDialog.cancel":"취소","fileTree.list.item.content.menu.deleteConfirmDialog.confirm":"확인","fileTree.list.item.content.menu.deleteConfirmDialog.title":"파일 삭제","fileTree.list.item.content.menu.item.delete":"삭제","fileTree.list.item.content.menu.item.hiddenSet":"파일 숨기기","fileTree.list.item.content.menu.item.hiddenUnset":"파일 보이기","fileTree.list.item.content.menu.item.newDirectory":"새 폴더","fileTree.list.item.content.menu.item.newFile":"새 파일","fileTree.list.item.content.menu.item.readOnlySet":"읽기 전용","fileTree.list.item.content.menu.item.readOnlyUnset":"읽기 전용 해제","fileTree.list.item.content.menu.item.rename":"이름 바꾸기","fileTree.toolbar.newDirectory":"새 폴더 추가","fileTree.toolbar.newFile":"새 파일 추가","fileTree.toolbar.upload":"파일 업로드"};
+var messageKo = {"fileTree.list.item.content.input.validation.error.filename.dot":"파일 이름은 \".\" 혹은 \"..\"을 사용할 수 없습니다.","fileTree.list.item.content.input.validation.error.filename.dotElice":"파일 이름은 \".elice\"를 사용할 수 없습니다.","fileTree.list.item.content.input.validation.error.filename.duplicated":"이미 존재하는 파일 이름입니다.","fileTree.list.item.content.input.validation.error.filename.slash":"파일 이름은 슬래시나 역슬래시를 포함할 수 없습니다.","fileTree.list.item.content.input.validation.error.maxLength":"파일 이름은 {maxLength}자를 초과할 수 없습니다..","fileTree.list.item.content.input.validation.error.required":"파일 이름을 입력해주세요.","fileTree.list.item.content.menu.deleteConfirmDialog.body":"\"{title}\" 파일을 삭제하시겠습니까?","fileTree.list.item.content.menu.deleteConfirmDialog.cancel":"취소","fileTree.list.item.content.menu.deleteConfirmDialog.confirm":"확인","fileTree.list.item.content.menu.deleteConfirmDialog.title":"파일 삭제","fileTree.list.item.content.menu.item.delete":"삭제","fileTree.list.item.content.menu.item.hiddenSet":"파일 숨기기","fileTree.list.item.content.menu.item.hiddenUnset":"파일 보이기","fileTree.list.item.content.menu.item.newDirectory":"새 폴더","fileTree.list.item.content.menu.item.newFile":"새 파일","fileTree.list.item.content.menu.item.readOnlySet":"읽기 전용","fileTree.list.item.content.menu.item.readOnlyUnset":"읽기 전용 해제","fileTree.list.item.content.menu.item.rename":"이름 바꾸기","fileTree.toolbar.newDirectory":"새 폴더 추가","fileTree.toolbar.newFile":"새 파일 추가","fileTree.toolbar.upload":"파일 업로드"};
 
-export { phrasesKo as default };
+export { messageKo as default };

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

@@ -0,0 +1,3 @@
+var messageTh = {"fileTree.list.item.content.input.validation.error.filename.dot":"ชื่อไฟล์ไม่สามารถใช้ \".\" หรือ \"..\" ได้ครับ.","fileTree.list.item.content.input.validation.error.filename.dotElice":"ชื่อไฟล์ไม่สามารถใช้ \".elice\" ได้ค่ะ.","fileTree.list.item.content.input.validation.error.filename.duplicated":"มีชื่อไฟล์นี้อยู่แล้วค่ะ.","fileTree.list.item.content.input.validation.error.filename.slash":"ชื่อไฟล์ไม่สามารถมีเครื่องหมายสแลชหรือสแลชย้อนได้","fileTree.list.item.content.input.validation.error.maxLength":"ชื่อไฟล์คือ {maxLength}ไม่สามารถเกินไปได้.","fileTree.list.item.content.input.validation.error.required":"โปรดป้อนชื่อไฟล์.","fileTree.list.item.content.menu.deleteConfirmDialog.body":"\"{title}\"คุณต้องการลบไฟล์หรือไม่?\"","fileTree.list.item.content.menu.deleteConfirmDialog.cancel":"ยกเลิก","fileTree.list.item.content.menu.deleteConfirmDialog.confirm":"ตรวจสอบ","fileTree.list.item.content.menu.deleteConfirmDialog.title":"ลบไฟล์","fileTree.list.item.content.menu.item.delete":"ลบ","fileTree.list.item.content.menu.item.hiddenSet":"ซ่อนไฟล์","fileTree.list.item.content.menu.item.hiddenUnset":"แสดงไฟล์","fileTree.list.item.content.menu.item.newDirectory":"โฟลเดอร์ใหม่","fileTree.list.item.content.menu.item.newFile":"ไฟล์ใหม่","fileTree.list.item.content.menu.item.readOnlySet":"โหมดอ่านอย่างเดียว","fileTree.list.item.content.menu.item.readOnlyUnset":"ปลดล็อกอ่านเท่านั้น","fileTree.list.item.content.menu.item.rename":"เปลี่ยนชื่อ","fileTree.toolbar.newDirectory":"เพิ่มโฟลเดอร์ใหม่","fileTree.toolbar.newFile":"เพิ่มไฟล์ใหม่","fileTree.toolbar.upload":"อัปโหลดไฟล์"};
+
+export { messageTh as default };

package/es/components/shared/file-viewer/FileViewer.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
+import type { WithIntlComponentBuilderProps } from '@elice/intl';
 export interface FileViewerBaseProps {
     filename: string;
     fileurl?: null | string;
     locale?: string;
 }
-declare const _default: (props: FileViewerBaseProps) => React.JSX.Element;
+declare const _default: React.ForwardRefExoticComponent<import("@elice/intl").IntlComponentExtraProps & Omit<WithIntlComponentBuilderProps<FileViewerBaseProps>, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & React.RefAttributes<any>>;
 export default _default;

package/es/components/shared/file-viewer/FileViewer.js

@@ -1,9 +1,8 @@
 import React, { useState } from 'react';
-import { FormattedMessage } from 'react-intl';
 import { Flex, Hspace, Icon } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { eilDownload } from '@elice/icons';
-import { MaterialIntlProvider } from '@elice/material-shared-utils';
+import { IntlComponentBuilder } from '@elice/intl';
 import FileSaver from 'file-saver';
 import mime from 'mime';
 import styled from 'styled-components';
@@ -29,7 +28,8 @@ const StyledReadonlyBanner = styled.div.withConfig({
 const FileViewer = ({
   filename,
   fileurl,
-  locale
+  locale,
+  __intl
 }) => {
   const [showInTextViewer, setShowInTextViewer] = useState(false);
   /**
@@ -87,8 +87,8 @@ const FileViewer = ({
     if (!fileurl) {
       return null;
     }
-    return React.createElement(StyledReadonlyBanner, null, React.createElement(FormattedMessage, {
-      id: "fileViewer.readOnlyBanner.content"
+    return React.createElement(StyledReadonlyBanner, null, __intl.formatMessage({
+      id: 'fileViewer.readOnlyBanner.content'
     }), React.createElement(Hspace, {
       width: 0.25
     }), React.createElement("a", {
@@ -97,8 +97,8 @@ const FileViewer = ({
     }, React.createElement(Icon, {
       icon: eilDownload,
       size: "tiny"
-    }), React.createElement(FormattedMessage, {
-      id: "fileViewer.readOnlyBanner.downloadButton"
+    }), __intl.formatMessage({
+      id: 'fileViewer.readOnlyBanner.downloadButton'
     })));
   };
   /**
@@ -138,14 +138,6 @@ const FileViewer = ({
 //
 //
 //
-var FileViewer$1 = (props => {
-  return React.createElement(MaterialIntlProvider, {
-    locale: props.locale,
-    phrases: {
-      en: phrasesEn,
-      ko: phrasesKo
-    }
-  }, React.createElement(FileViewer, Object.assign({}, props)));
-});
+var FileViewer$1 = new IntlComponentBuilder(FileViewer).add('en', phrasesEn).add('ko', phrasesKo).add('th', phrasesEn).build();
 
 export { FileViewer$1 as default };

package/es/components/shared/file-viewer/FileViewerCsv.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
 import { Hr, Flex, Text, IconButton, Hspace, AntSwitch } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { eilArrowLeftwardsDouble, eilArrowLeftwardsSingle, eilArrowRightwardsSingle, eilArrowRightwardsDouble } from '@elice/icons';
+import { useRawEliceIntl } from '@elice/intl';
 import styled from 'styled-components';
 import ExerciseFileShimmer from '../exercise-shimmer/ExerciseFileShimmer.js';
 import '../exercise-shimmer/ExerciseFileTabsShimmer.js';
@@ -57,6 +57,9 @@ const StyledViewerFooterHr = styled(Hr).withConfig({
 const FileViewerCsv = ({
   fileurl
 }) => {
+  const {
+    intl
+  } = useRawEliceIntl();
   const [csv, setCsv] = React.useState('');
   const [csvHeader, setCsvHeader] = React.useState(null);
   const [csvRecords, setCsvRecords] = React.useState([]);
@@ -211,8 +214,8 @@ const FileViewerCsv = ({
     }, React.createElement(Text, {
       role: "gray1",
       size: "small"
-    }, React.createElement(FormattedMessage, {
-      id: "\uD5E4\uB354 \uC0AC\uC6A9"
+    }, intl.formatMessage({
+      id: '헤더 사용'
     })), React.createElement(Hspace, {
       width: 0.5
     }), React.createElement(AntSwitch, {
@@ -227,8 +230,8 @@ const FileViewerCsv = ({
     }, React.createElement(Text, {
       role: "gray1",
       size: "small"
-    }, React.createElement(FormattedMessage, {
-      id: "\uAD6C\uBD84\uC790:"
+    }, intl.formatMessage({
+      id: '구분자:'
     })), React.createElement(Hspace, {
       width: 0.5
     }), React.createElement(StyledViewerFooterSelect, {
@@ -248,8 +251,8 @@ const FileViewerCsv = ({
     }, React.createElement(Text, {
       role: "gray1",
       size: "small"
-    }, React.createElement(FormattedMessage, {
-      id: "\uD398\uC774\uC9C0\uB2F9 \uD589:"
+    }, intl.formatMessage({
+      id: '페이지당 행:'
     })), React.createElement(Hspace, {
       width: 0.5
     }), React.createElement(StyledViewerFooterSelect, {

package/es/components/shared/file-viewer/FileViewerNonViewable.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
+import type { WithIntlComponentBuilderProps } from '@elice/intl';
 import type { FileViewerBaseProps } from './FileViewer';
 interface FileViewerNonViewableProps extends FileViewerBaseProps {
     onTextViewerClick?: () => void;
 }
-declare const _default: (props: FileViewerNonViewableProps) => React.JSX.Element;
+declare const _default: React.ForwardRefExoticComponent<import("@elice/intl").IntlComponentExtraProps & Omit<WithIntlComponentBuilderProps<FileViewerNonViewableProps>, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & React.RefAttributes<any>>;
 export default _default;

package/es/components/shared/file-viewer/FileViewerNonViewable.js

@@ -1,13 +1,13 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
 import { Button, Vspace, Text, Icon } from '@elice/blocks';
 import { eilDownload } from '@elice/icons';
-import { MaterialIntlProvider } from '@elice/material-shared-utils';
+import { IntlComponentBuilder } from '@elice/intl';
 import FileSaver from 'file-saver';
 import styled from 'styled-components';
 import FileIcon from '../file-icon/FileIcon.js';
-import phrasesEn from './locales/nonViewable.en.json.js';
-import phrasesKo from './locales/nonViewable.ko.json.js';
+import nonViewableMessageEn from './locales/nonViewable.en.json.js';
+import nonViewableMessageKo from './locales/nonViewable.ko.json.js';
+import nonViewableMessageTh from './locales/nonViewable.th.json.js';
 
 const StyledContainer = styled.div.withConfig({
   componentId: "sc-l8149y-0"
@@ -24,7 +24,8 @@ const StyledButtonsWrap = styled.div.withConfig({
 const FileViewerNonViewable = ({
   filename,
   fileurl,
-  onTextViewerClick
+  onTextViewerClick,
+  __intl
 }) => {
   /**
    * Handle download button click.
@@ -53,8 +54,8 @@ const FileViewerNonViewable = ({
         icon: eilDownload
       }),
       onClick: handleDownloadClick
-    }, React.createElement(FormattedMessage, {
-      id: "fileViewer.nonViewable.downloadButton"
+    }, __intl.formatMessage({
+      id: 'fileViewer.nonViewable.downloadButton'
     }));
   };
   /**
@@ -69,8 +70,8 @@ const FileViewerNonViewable = ({
       size: "tiny",
       hoverable: true,
       onClick: onTextViewerClick
-    }, React.createElement(FormattedMessage, {
-      id: "fileViewer.nonViewable.openViaTextEditor"
+    }, __intl.formatMessage({
+      id: 'fileViewer.nonViewable.openViaTextEditor'
     }));
   };
   //
@@ -91,8 +92,8 @@ const FileViewerNonViewable = ({
     size: "tiny",
     lineHeight: 1.5,
     wordBreak: "keep-all"
-  }, React.createElement(FormattedMessage, {
-    id: "fileViewer.nonViewable.content"
+  }, __intl.formatMessage({
+    id: 'fileViewer.nonViewable.content'
   })), React.createElement(Vspace, {
     height: 2
   }), React.createElement(StyledButtonsWrap, null, renderFileViewerDownloadButton(), renderFileViewerTextEditorLink())));
@@ -100,14 +101,6 @@ const FileViewerNonViewable = ({
 //
 //
 //
-var FileViewerNonViewable$1 = (props => {
-  return React.createElement(MaterialIntlProvider, {
-    locale: props.locale,
-    phrases: {
-      en: phrasesEn,
-      ko: phrasesKo
-    }
-  }, React.createElement(FileViewerNonViewable, Object.assign({}, props)));
-});
+var FileViewerNonViewable$1 = new IntlComponentBuilder(FileViewerNonViewable).add('en', nonViewableMessageEn).add('ko', nonViewableMessageKo).add('th', nonViewableMessageTh).build();
 
 export { FileViewerNonViewable$1 as default };

package/es/components/shared/file-viewer/locales/index.d.ts

@@ -0,0 +1,6 @@
+export { default as messageEn } from './en.json';
+export { default as messageKo } from './ko.json';
+export { default as messageTh } from './th.json';
+export { default as nonViewableMessageEn } from './nonViewable.en.json';
+export { default as nonViewableMessageKo } from './nonViewable.ko.json';
+export { default as nonViewableMessageTh } from './nonViewable.th.json';

package/es/components/shared/file-viewer/locales/nonViewable.en.json.js

@@ -1,3 +1,3 @@
-var phrasesEn = {"fileViewer.nonViewable.content":"The file is not displayed in the editor because it is either binary or not supported.","fileViewer.nonViewable.downloadButton":"Download File","fileViewer.nonViewable.openViaTextEditor":"Open via Editor"};
+var nonViewableMessageEn = {"fileViewer.nonViewable.content":"The file is not displayed in the editor because it is either binary or not supported.","fileViewer.nonViewable.downloadButton":"Download File","fileViewer.nonViewable.openViaTextEditor":"Open via Editor"};
 
-export { phrasesEn as default };
+export { nonViewableMessageEn as default };

package/es/components/shared/file-viewer/locales/nonViewable.ko.json.js

@@ -1,3 +1,3 @@
-var phrasesKo = {"fileViewer.nonViewable.content":"해당 파일은 바이너리 파일이거나 지원하지 않는 파일이기 때문에 에디터에 표시되지 않습니다.","fileViewer.nonViewable.downloadButton":"파일 다운로드","fileViewer.nonViewable.openViaTextEditor":"텍스트 에디터로 열기"};
+var nonViewableMessageKo = {"fileViewer.nonViewable.content":"해당 파일은 바이너리 파일이거나 지원하지 않는 파일이기 때문에 에디터에 표시되지 않습니다.","fileViewer.nonViewable.downloadButton":"파일 다운로드","fileViewer.nonViewable.openViaTextEditor":"텍스트 에디터로 열기"};
 
-export { phrasesKo as default };
+export { nonViewableMessageKo as default };

package/es/components/shared/file-viewer/locales/nonViewable.th.json.js

@@ -0,0 +1,3 @@
+var nonViewableMessageTh = {"fileViewer.nonViewable.content":"ไฟล์ดังกล่าวเป็นไฟล์ไบนารีหรือไฟล์ที่ไม่รองรับ จึงไม่สามารถแสดงในเอดิเตอร์ได้ครับ.","fileViewer.nonViewable.downloadButton":"ดาวน์โหลดไฟล์","fileViewer.nonViewable.openViaTextEditor":"เปิดด้วยเดสก์ท็อป"};
+
+export { nonViewableMessageTh as default };

package/es/components/shared/monaco-editor/MonacoEditorPerferenceForm.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
+import type { WithIntlComponentBuilderProps } from '@elice/intl';
 import type { MonacoEditorPreference } from './constants';
 export interface PerferenceFormProps {
     value: Partial<MonacoEditorPreference>;
     locale?: string;
     onChange?: (value: Required<MonacoEditorPreference>) => void;
 }
-declare const _default: (props: PerferenceFormProps) => React.JSX.Element;
+declare const _default: React.ForwardRefExoticComponent<import("@elice/intl").IntlComponentExtraProps & Omit<WithIntlComponentBuilderProps<PerferenceFormProps>, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & React.RefAttributes<any>>;
 export default _default;

package/es/components/shared/monaco-editor/MonacoEditorPerferenceForm.js

@@ -1,14 +1,14 @@
 import React from 'react';
-import { useIntl, FormattedMessage } from 'react-intl';
 import { useDeepCompareEffect } from 'react-use';
 import { Select, Text, Vspace, AntSwitch } 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 { VSCODE_THEMES } from './constants/themes/index.js';
-import phrasesEn from './locales/en.json.js';
-import phrasesKo from './locales/ko.json.js';
 import { MONACO_EDITOR_PREFERENCE_OPTIONS_FONT_SIZES, MONACO_EDITOR_RENDER_WHITESPACE_OPTIONS, MONACO_EDITOR_PREFERENCE_OPTIONS_TAB_SIZES } from './constants/monaco/preferences.js';
+import messageEn from './locales/en.json.js';
+import messageKo from './locales/ko.json.js';
+import messageTh from './locales/th.json.js';
 import 'monaco-editor/esm/vs/editor/editor.api';
 import { normalizeMonacoPreference } from './utils/monacoPreference.js';
 
@@ -20,9 +20,9 @@ const StyledSelect = styled(Select).withConfig({
 })(["> div{background:", " !important;border-color:", " !important;}select{padding:0 !important;height:2rem !important;color:#fff !important;> option{background:", " !important;}}"], base.color.navy8, base.color.navy7, base.color.navy8);
 const MonacoEditorPerferenceForm = ({
   value,
-  onChange
+  onChange,
+  __intl
 }) => {
-  const intl = useIntl();
   const [preference, setPreference] = React.useState(normalizeMonacoPreference(value));
   /**
    * Update preference from form.
@@ -50,8 +50,8 @@ const MonacoEditorPerferenceForm = ({
       role: "navy",
       size: "tiny",
       block: true
-    }, React.createElement(FormattedMessage, {
-      id: "monacoEditorPerferenceForm.displaying.item.theme.name"
+    }, __intl.formatMessage({
+      id: 'monacoEditorPerferenceForm.displaying.item.theme.name'
     })), React.createElement(StyledSelect, {
       value: preference.theme,
       size: "small",
@@ -77,8 +77,8 @@ const MonacoEditorPerferenceForm = ({
       role: "navy",
       size: "tiny",
       block: true
-    }, React.createElement(FormattedMessage, {
-      id: "monacoEditorPerferenceForm.displaying.item.fontSize.name"
+    }, __intl.formatMessage({
+      id: 'monacoEditorPerferenceForm.displaying.item.fontSize.name'
     })), React.createElement(StyledSelect, {
       value: preference.fontSize,
       size: "small",
@@ -101,8 +101,8 @@ const MonacoEditorPerferenceForm = ({
       role: "navy",
       size: "tiny",
       block: true
-    }, React.createElement(FormattedMessage, {
-      id: "monacoEditorPerferenceForm.displaying.item.wordWrap.name"
+    }, __intl.formatMessage({
+      id: 'monacoEditorPerferenceForm.displaying.item.wordWrap.name'
     })), React.createElement(AntSwitch, {
       checked: preference.wordWrap === 'on',
       onChange: value => {
@@ -120,8 +120,8 @@ const MonacoEditorPerferenceForm = ({
       role: "navy",
       size: "tiny",
       block: true
-    }, React.createElement(FormattedMessage, {
-      id: "monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.name"
+    }, __intl.formatMessage({
+      id: 'monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.name'
     })), React.createElement(StyledSelect, {
       value: preference.renderWhitespace,
       size: "small",
@@ -134,7 +134,7 @@ const MonacoEditorPerferenceForm = ({
     }, MONACO_EDITOR_RENDER_WHITESPACE_OPTIONS.map(option => React.createElement("option", {
       key: option,
       value: option
-    }, intl.formatMessage({
+    }, __intl.formatMessage({
       id: `monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.value.${option}`
     })))));
   };
@@ -147,8 +147,8 @@ const MonacoEditorPerferenceForm = ({
       role: "navy",
       size: "tiny",
       block: true
-    }, React.createElement(FormattedMessage, {
-      id: "monacoEditorPerferenceForm.displaying.item.minimap.name"
+    }, __intl.formatMessage({
+      id: 'monacoEditorPerferenceForm.displaying.item.minimap.name'
     })), React.createElement(AntSwitch, {
       checked: (_a = preference.minimap) === null || _a === void 0 ? void 0 : _a.enabled,
       onChange: value => {
@@ -168,8 +168,8 @@ const MonacoEditorPerferenceForm = ({
       role: "navy",
       size: "tiny",
       block: true
-    }, React.createElement(FormattedMessage, {
-      id: "monacoEditorPerferenceForm.displaying.item.cursorSmoothCaretAnimation.name"
+    }, __intl.formatMessage({
+      id: 'monacoEditorPerferenceForm.displaying.item.cursorSmoothCaretAnimation.name'
     })), React.createElement(AntSwitch, {
       checked: preference.cursorSmoothCaretAnimation,
       onChange: value => {
@@ -187,8 +187,8 @@ const MonacoEditorPerferenceForm = ({
       role: "navy",
       size: "tiny",
       block: true
-    }, React.createElement(FormattedMessage, {
-      id: "monacoEditorPerferenceForm.textEditing.item.autoClosingBrackets.name"
+    }, __intl.formatMessage({
+      id: 'monacoEditorPerferenceForm.textEditing.item.autoClosingBrackets.name'
     })), React.createElement(AntSwitch, {
       checked: preference.autoClosingBrackets === 'always',
       onChange: value => {
@@ -206,8 +206,8 @@ const MonacoEditorPerferenceForm = ({
       role: "navy",
       size: "tiny",
       block: true
-    }, React.createElement(FormattedMessage, {
-      id: "monacoEditorPerferenceForm.textEditing.item.detectIndentation.name"
+    }, __intl.formatMessage({
+      id: 'monacoEditorPerferenceForm.textEditing.item.detectIndentation.name'
     })), React.createElement(AntSwitch, {
       checked: preference.detectIndentation,
       onChange: value => {
@@ -225,8 +225,8 @@ const MonacoEditorPerferenceForm = ({
       role: preference.detectIndentation ? 'grey6' : 'info',
       block: true,
       size: "small"
-    }, React.createElement(FormattedMessage, {
-      id: "monacoEditorPerferenceForm.textEditing.item.tabSize.name"
+    }, __intl.formatMessage({
+      id: 'monacoEditorPerferenceForm.textEditing.item.tabSize.name'
     })), React.createElement(StyledSelect, {
       value: preference.tabSize,
       size: "small",
@@ -249,8 +249,8 @@ const MonacoEditorPerferenceForm = ({
     role: "lightgrey",
     size: "small",
     bold: true
-  }, React.createElement(FormattedMessage, {
-    id: "monacoEditorPerferenceForm.displaying.title"
+  }, __intl.formatMessage({
+    id: 'monacoEditorPerferenceForm.displaying.title'
   })), React.createElement(Vspace, {
     height: 1
   }), renderPreferenceItemTheme(), renderPreferenceItemFontSize(), renderPreferenceItemWordWrap(), renderPreferenceItemWhiteSpace(), renderPreferenceItemMinimap(), renderPreferenceItemCursorSmoothCaretAnimation(), React.createElement(Vspace, {
@@ -259,8 +259,8 @@ const MonacoEditorPerferenceForm = ({
     role: "lightgrey",
     size: "small",
     bold: true
-  }, React.createElement(FormattedMessage, {
-    id: "monacoEditorPerferenceForm.textEditing.title"
+  }, __intl.formatMessage({
+    id: 'monacoEditorPerferenceForm.textEditing.title'
   })), React.createElement(Vspace, {
     height: 1
   }), renderPreferenceItemAutoClosingBrackets(), renderPreferenceItemDetectIndentation(), renderPreferenceItemTabSize());
@@ -268,14 +268,6 @@ const MonacoEditorPerferenceForm = ({
 //
 //
 //
-var MonacoEditorPerference = (props => {
-  return React.createElement(MaterialIntlProvider, {
-    locale: props.locale,
-    phrases: {
-      en: phrasesEn,
-      ko: phrasesKo
-    }
-  }, React.createElement(MonacoEditorPerferenceForm, Object.assign({}, props)));
-});
+var MonacoEditorPerference = new IntlComponentBuilder(MonacoEditorPerferenceForm).add('en', messageEn).add('ko', messageKo).add('th', messageTh).build();
 
 export { MonacoEditorPerference as default };

package/es/components/shared/monaco-editor/locales/en.json.js

@@ -1,3 +1,3 @@
-var phrasesEn = {"monacoEditorPerferenceForm.displaying.item.cursorSmoothCaretAnimation.name":"Cursor Smooth Caret Animation","monacoEditorPerferenceForm.displaying.item.fontSize.name":"Font Size","monacoEditorPerferenceForm.displaying.item.minimap.name":"Minimap","monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.name":"Render Whitespace","monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.value.all":"All","monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.value.boundary":"Boundary","monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.value.none":"None","monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.value.selection":"Selection","monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.value.trailing":"Trailing","monacoEditorPerferenceForm.displaying.item.theme.name":"Color Theme","monacoEditorPerferenceForm.displaying.item.wordWrap.name":"Word Wrap","monacoEditorPerferenceForm.displaying.title":"Displaying","monacoEditorPerferenceForm.textEditing.item.autoClosingBrackets.name":"Auto Closing Brackets","monacoEditorPerferenceForm.textEditing.item.detectIndentation.name":"Detect Indentation","monacoEditorPerferenceForm.textEditing.item.tabSize.name":"Tab Size","monacoEditorPerferenceForm.textEditing.title":"Text Editing"};
+var messageEn = {"monacoEditorPerferenceForm.displaying.item.cursorSmoothCaretAnimation.name":"Cursor Smooth Caret Animation","monacoEditorPerferenceForm.displaying.item.fontSize.name":"Font Size","monacoEditorPerferenceForm.displaying.item.minimap.name":"Minimap","monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.name":"Render Whitespace","monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.value.all":"All","monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.value.boundary":"Boundary","monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.value.none":"None","monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.value.selection":"Selection","monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.value.trailing":"Trailing","monacoEditorPerferenceForm.displaying.item.theme.name":"Color Theme","monacoEditorPerferenceForm.displaying.item.wordWrap.name":"Word Wrap","monacoEditorPerferenceForm.displaying.title":"Displaying","monacoEditorPerferenceForm.textEditing.item.autoClosingBrackets.name":"Auto Closing Brackets","monacoEditorPerferenceForm.textEditing.item.detectIndentation.name":"Detect Indentation","monacoEditorPerferenceForm.textEditing.item.tabSize.name":"Tab Size","monacoEditorPerferenceForm.textEditing.title":"Text Editing"};
 
-export { phrasesEn as default };
+export { messageEn as default };

package/es/components/shared/monaco-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/shared/monaco-editor/locales/ko.json.js

@@ -1,3 +1,3 @@
-var phrasesKo = {"monacoEditorPerferenceForm.displaying.item.cursorSmoothCaretAnimation.name":"커서 이동 애니메이션","monacoEditorPerferenceForm.displaying.item.fontSize.name":"글자 크기","monacoEditorPerferenceForm.displaying.item.minimap.name":"에디터 미니맵","monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.name":"조판 부호 보이기","monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.value.all":"언제나","monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.value.boundary":"글자 사이 제외","monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.value.none":"보이지 않음","monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.value.selection":"선택 시에만","monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.value.trailing":"글자 뒤에만","monacoEditorPerferenceForm.displaying.item.theme.name":"에디터 테마","monacoEditorPerferenceForm.displaying.item.wordWrap.name":"줄 바꿈","monacoEditorPerferenceForm.displaying.title":"화면 표시","monacoEditorPerferenceForm.textEditing.item.autoClosingBrackets.name":"자동 괄호 닫기","monacoEditorPerferenceForm.textEditing.item.detectIndentation.name":"탭 크기 자동 인식","monacoEditorPerferenceForm.textEditing.item.tabSize.name":"탭 크기","monacoEditorPerferenceForm.textEditing.title":"텍스트 편집"};
+var messageKo = {"monacoEditorPerferenceForm.displaying.item.cursorSmoothCaretAnimation.name":"커서 이동 애니메이션","monacoEditorPerferenceForm.displaying.item.fontSize.name":"글자 크기","monacoEditorPerferenceForm.displaying.item.minimap.name":"에디터 미니맵","monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.name":"조판 부호 보이기","monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.value.all":"언제나","monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.value.boundary":"글자 사이 제외","monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.value.none":"보이지 않음","monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.value.selection":"선택 시에만","monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.value.trailing":"글자 뒤에만","monacoEditorPerferenceForm.displaying.item.theme.name":"에디터 테마","monacoEditorPerferenceForm.displaying.item.wordWrap.name":"줄 바꿈","monacoEditorPerferenceForm.displaying.title":"화면 표시","monacoEditorPerferenceForm.textEditing.item.autoClosingBrackets.name":"자동 괄호 닫기","monacoEditorPerferenceForm.textEditing.item.detectIndentation.name":"탭 크기 자동 인식","monacoEditorPerferenceForm.textEditing.item.tabSize.name":"탭 크기","monacoEditorPerferenceForm.textEditing.title":"텍스트 편집"};
 
-export { phrasesKo as default };
+export { messageKo as default };

package/es/components/shared/monaco-editor/locales/th.json.js

@@ -0,0 +1,3 @@
+var messageTh = {"monacoEditorPerferenceForm.displaying.item.cursorSmoothCaretAnimation.name":"การเคลื่อนย้ายเคอร์เซอร์แอนิเมชัน","monacoEditorPerferenceForm.displaying.item.fontSize.name":"ขนาดตัวอักษร","monacoEditorPerferenceForm.displaying.item.minimap.name":"เอดิ터 มินิแมพ","monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.name":"แสดงเครื่องหมายการจัดพิมพ์","monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.value.all":"เสมอ","monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.value.boundary":"ข้อความที่ระบุ","monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.value.none":"ไม่มองเห็น","monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.value.selection":"เฉพาะเมื่อเลือก","monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.value.trailing":"หลังคำ","monacoEditorPerferenceForm.displaying.item.theme.name":"ธีมเอ็ดิเตอร์","monacoEditorPerferenceForm.displaying.item.wordWrap.name":"การเปลี่ยนบรรทัด","monacoEditorPerferenceForm.displaying.title":"การแสดงบนหน้าจอ","monacoEditorPerferenceForm.textEditing.item.autoClosingBrackets.name":"ปิดวงเล็บอัตโนมัติ","monacoEditorPerferenceForm.textEditing.item.detectIndentation.name":"การตรวจจับขนาดแท็บโดยอัตโนมัติ","monacoEditorPerferenceForm.textEditing.item.tabSize.name":"ขนาดแท็บ","monacoEditorPerferenceForm.textEditing.title":"แก้ไขข้อความ"};
+
+export { messageTh as default };

package/es/components/shared/xterm/Xterm.d.ts

@@ -28,5 +28,7 @@ export interface XtermProps {
     /** Send TTY resize. */
     onTtyResizeRequest: (ttySize: TtySize) => void;
 }
-declare const _default: React.ForwardRefExoticComponent<XtermProps & React.RefAttributes<XtermApis>>;
+declare const _default: React.ForwardRefExoticComponent<Omit<import("@elice/intl").IntlComponentExtraProps & Omit<import("@elice/intl").IntlComponentExtraProps & Omit<XtermProps, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & {
+    __intl: import("@elice/intl").EliceIntlShape;
+} & React.RefAttributes<XtermApis>, keyof import("@elice/intl").IntlComponentExtraProps | "__intl">, "ref"> & React.RefAttributes<XtermApis>>;
 export default _default;

package/es/components/shared/xterm/Xterm.js

@@ -1,13 +1,13 @@
 import React, { forwardRef } from 'react';
-import { useIntl } from 'react-intl';
 import { useMeasure, useDebounce } from 'react-use';
 import { base } from '@elice/design-tokens';
-import { MaterialIntlProvider } from '@elice/material-shared-utils';
+import { IntlComponentBuilder } from '@elice/intl';
 import styled from 'styled-components';
 import { Terminal } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
-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 { patchXtermComposedPath } from './utils/index.js';
 import 'xterm/css/xterm.css';
 
@@ -20,9 +20,9 @@ const Xterm = forwardRef(({
   fontSize,
   suppressSystemMessage = false,
   onInputRequest,
-  onTtyResizeRequest
+  onTtyResizeRequest,
+  __intl
 }, ref) => {
-  const intl = useIntl();
   const xterm = React.useRef(null);
   const xtermFitAddon = React.useRef(null);
   const [xtermWrapperElRef, {
@@ -151,7 +151,7 @@ const Xterm = forwardRef(({
       return;
     }
     if (isRunning) {
-      writeSystem(intl.formatMessage({
+      writeSystem(__intl.formatMessage({
         id: 'xterm.systemMessage.running'
       }));
       blur();
@@ -159,14 +159,14 @@ const Xterm = forwardRef(({
     //
     else {
       if (isRunBefore) {
-        writeSystem(intl.formatMessage({
+        writeSystem(__intl.formatMessage({
           id: 'xterm.systemMessage.runAfter'
         }));
         blur();
       }
       //
       else {
-        writeSystem(intl.formatMessage({
+        writeSystem(__intl.formatMessage({
           id: 'xterm.systemMessage.runBefore'
         }));
         blur();
@@ -208,16 +208,6 @@ const Xterm = forwardRef(({
 //
 //
 //
-var Xterm$1 = forwardRef((props, ref) => {
-  return React.createElement(MaterialIntlProvider, {
-    locale: props.locale,
-    phrases: {
-      en: phrasesEn,
-      ko: phrasesKo
-    }
-  }, React.createElement(Xterm, Object.assign({}, props, {
-    ref: ref
-  })));
-});
+var Xterm$1 = new IntlComponentBuilder(Xterm).add('en', messageEn).add('ko', messageKo).add('th', messageTh).build();
 
 export { Xterm$1 as default };

package/es/components/shared/xterm/locales/en.json.js

@@ -1,3 +1,3 @@
-var phrasesEn = {"xterm.systemMessage.runAfter":"\n/* Code running is complete! */","xterm.systemMessage.runBefore":"/* Code has not run yet. */","xterm.systemMessage.running":"/* Code is running... */"};
+var messageEn = {"xterm.systemMessage.runAfter":"\n/* Code running is complete! */","xterm.systemMessage.runBefore":"/* Code has not run yet. */","xterm.systemMessage.running":"/* Code is running... */"};
 
-export { phrasesEn as default };
+export { messageEn as default };

package/es/components/shared/xterm/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/shared/xterm/locales/ko.json.js

@@ -1,3 +1,3 @@
-var phrasesKo = {"xterm.systemMessage.runAfter":"\n/* 코드 실행이 완료되었습니다! */","xterm.systemMessage.runBefore":"/* 코드가 아직 실행되지 않았습니다. */","xterm.systemMessage.running":"/* 코드가 실행되는 중입니다... */"};
+var messageKo = {"xterm.systemMessage.runAfter":"\n/* 코드 실행이 완료되었습니다! */","xterm.systemMessage.runBefore":"/* 코드가 아직 실행되지 않았습니다. */","xterm.systemMessage.running":"/* 코드가 실행되는 중입니다... */"};
 
-export { phrasesKo as default };
+export { messageKo as default };

package/es/components/shared/xterm/locales/th.json.js

@@ -0,0 +1,3 @@
+var messageTh = {"xterm.systemMessage.runAfter":"/* การดำเนินการของโค้ดเสร็จสมบูรณ์แล้ว! */","xterm.systemMessage.runBefore":"/* โค้ดยังไม่ได้รัน */","xterm.systemMessage.running":"/* โค้ดกำลังถูกดำเนินการ... */"};
+
+export { messageTh as default };