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

package/cjs/components/material-quiz/MaterialQuiz.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { WithIntlComponentBuilderProps } from '@elice/intl';
 import type { MaterialQuizProps } from './context/MaterialQuizContext';
-declare const MaterialQuizContainer: React.FC<MaterialQuizProps>;
-export default MaterialQuizContainer;
+declare const _default: React.ForwardRefExoticComponent<import("@elice/intl").IntlComponentExtraProps & Omit<WithIntlComponentBuilderProps<MaterialQuizProps>, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & React.RefAttributes<any>>;
+export default _default;

package/cjs/components/material-quiz/MaterialQuiz.js

@@ -3,15 +3,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var reactIntl = require('react-intl');
 var reactUse = require('react-use');
 var designTokens = require('@elice/design-tokens');
+var intl = require('@elice/intl');
 var types = require('@elice/types');
 var styled = require('styled-components');
 var MaterialQuizContext = require('./context/MaterialQuizContext.js');
+var en = require('./locales/en.json.js');
+var ko = require('./locales/ko.json.js');
+var th = require('./locales/th.json.js');
 var MaterialQuizShimmer = require('./MaterialQuizShimmer.js');
 var MaterialQuizInfo = require('./MaterialQuizInfo.js');
-var MaterialQuiz_i18n = require('./MaterialQuiz.i18n.js');
 
 const AsyncMaterialQuizSelectMultiple = React.lazy(() => Promise.resolve().then(function () { return require('./MaterialQuizSelectMultiple.js'); }));
 const AsyncMaterialQuizSelectMultipleOrder = React.lazy(() => Promise.resolve().then(function () { return require('./MaterialQuizSelectMultipleOrder.js'); }));
@@ -84,15 +86,15 @@ const MaterialQuiz = () => {
 const MaterialQuizContainer = ({
   materialQuizId,
   userId,
-  locale = 'en',
   onDirty,
   onSubmit,
-  onNext
+  onNext,
+  __intl
 }) => {
-  return React.createElement(reactIntl.IntlProvider, {
-    locale: locale,
-    defaultLocale: "en",
-    messages: locale in MaterialQuiz_i18n ? MaterialQuiz_i18n[locale] : MaterialQuiz_i18n.en
+  return React.createElement(intl.RawEliceIntlProvider, {
+    value: {
+      intl: __intl
+    }
   }, React.createElement(MaterialQuizContext.MaterialQuizProvider, {
     materialQuizId: materialQuizId,
     userId: userId,
@@ -101,5 +103,6 @@ const MaterialQuizContainer = ({
     onNext: onNext
   }, React.createElement(MaterialQuiz, null)));
 };
+var MaterialQuiz$1 = new intl.IntlComponentBuilder(MaterialQuizContainer).add('en', en.default).add('ko', ko.default).add('th', th.default).build();
 
-exports.default = MaterialQuizContainer;
+exports.default = MaterialQuiz$1;

package/cjs/components/material-quiz/MaterialQuizAnswerExplanation.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var reactIntl = require('react-intl');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
+var intl = require('@elice/intl');
 var markdown = require('@elice/markdown');
 var types = require('@elice/types');
 var styled = require('styled-components');
@@ -22,7 +22,9 @@ const MaterialQuizAnswerExplanation = () => {
     lecture,
     materialQuiz
   } = MaterialQuizContext.useMaterialQuizState();
-  const intl = reactIntl.useIntl();
+  const {
+    intl: intl$1
+  } = intl.useRawEliceIntl();
   if (!materialQuiz || !materialQuiz.explanationInfo.isEnabled || !materialQuiz.isResponded || (lecture === null || lecture === void 0 ? void 0 : lecture.lectureType) === types.enums.LectureType.Test && (lecture === null || lecture === void 0 ? void 0 : lecture.testUserStatus) !== types.enums.LectureTestUserStatus.Completed) {
     return null;
   }
@@ -34,7 +36,7 @@ const MaterialQuizAnswerExplanation = () => {
     header: React.createElement(blocks.Text, {
       bold: true,
       role: "navy0"
-    }, intl.formatMessage({
+    }, intl$1.formatMessage({
       id: 'materialQuiz.explanation.show'
     }))
   }, materialQuiz.explanationInfo.isEnabled ? React.createElement(StyledMarkdownSSR, {
@@ -44,7 +46,7 @@ const MaterialQuizAnswerExplanation = () => {
     role: "info",
     lineHeight: 1.4,
     userSelect: "none"
-  }, intl.formatMessage({
+  }, intl$1.formatMessage({
     id: 'materialQuiz.explanation.empty'
   }))));
 };

package/cjs/components/material-quiz/MaterialQuizSelectMultiple.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var reactIntl = require('react-intl');
 var apiClient = require('@elice/api-client');
+var intl = require('@elice/intl');
 var index = require('../../helpers/index.js');
 require('../shared/QuizDraggbleOption.js');
 require('../shared/QuizDraggbleDummyOption.js');
@@ -33,7 +33,9 @@ const MaterialQuizSelectMultiple = () => {
     onDirty
   } = MaterialQuizContext.useMaterialQuizDispatch();
   // state
-  const intl = reactIntl.useIntl();
+  const {
+    intl: intl$1
+  } = intl.useRawEliceIntl();
   const [selectedAnswer, setSelectedAnswer] = React.useState([]);
   const [materialQuizResponse, setMaterialQuizResponse] = React.useState();
   const [submitStatus, setSubmitStatus] = React.useState('idle');
@@ -139,7 +141,7 @@ const MaterialQuizSelectMultiple = () => {
     }
   };
   return React.createElement(QuestionBox.default, {
-    title: intl.formatMessage({
+    title: intl$1.formatMessage({
       id: 'materialQuiz.selectMultiple.answer.title'
     }),
     titlePrefix: "A.",
@@ -159,7 +161,7 @@ const MaterialQuizSelectMultiple = () => {
       transparent: false,
       role: 'primary',
       onClick: handleSubmit,
-      children: intl.formatMessage({
+      children: intl$1.formatMessage({
         id: 'materialQuiz.submit'
       })
     }]

package/cjs/components/material-quiz/MaterialQuizSelectMultipleOrder.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var reactIntl = require('react-intl');
 var apiClient = require('@elice/api-client');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
 var icons = require('@elice/icons');
+var intl = require('@elice/intl');
 var styled = require('styled-components');
 var index = require('../../helpers/index.js');
 var EbDroppable = require('../eb-sortable/EbDroppable.js');
@@ -71,7 +71,9 @@ const MaterialQuizSelectMultipleOrder = () => {
     onDirty
   } = MaterialQuizContext.useMaterialQuizDispatch();
   // state
-  const intl = reactIntl.useIntl();
+  const {
+    intl: intl$1
+  } = intl.useRawEliceIntl();
   const [materialQuizResponse, setMaterialQuizResponse] = React.useState();
   const [submitStatus, setSubmitStatus] = React.useState('idle');
   const [isActive, setIsActive] = React.useState(false);
@@ -311,7 +313,7 @@ const MaterialQuizSelectMultipleOrder = () => {
     }, React.createElement(blocks.Text, {
       size: "tiny",
       role: "white"
-    }, intl.formatMessage({
+    }, intl$1.formatMessage({
       id: 'materialQuiz.order.answerEmpty'
     }))) : null);
   };
@@ -333,7 +335,7 @@ const MaterialQuizSelectMultipleOrder = () => {
       };
       if (option.value === null) {
         return React.createElement(QuizDraggbleDummyOption.default, {
-          children: intl.formatMessage({
+          children: intl$1.formatMessage({
             id: 'materialQuiz.selectMultipleOrder.answer.title'
           }),
           key: index$1,
@@ -394,7 +396,7 @@ const MaterialQuizSelectMultipleOrder = () => {
     }));
   };
   return React.createElement(QuestionBox.default, {
-    title: intl.formatMessage({
+    title: intl$1.formatMessage({
       id: 'materialQuiz.selectMultipleOrder.answer.title'
     }),
     titlePrefix: "A.",
@@ -414,7 +416,7 @@ const MaterialQuizSelectMultipleOrder = () => {
       transparent: false,
       role: 'primary',
       onClick: handleSubmit,
-      children: intl.formatMessage({
+      children: intl$1.formatMessage({
         id: 'materialQuiz.submit'
       })
     }]
@@ -438,7 +440,7 @@ const MaterialQuizSelectMultipleOrder = () => {
   }, React.createElement(StyledQuizOptionsDropZone, null, React.createElement(blocks.Text, {
     role: "white",
     size: "small"
-  }, intl.formatMessage({
+  }, intl$1.formatMessage({
     id: 'materialQuiz.answer'
   })), correctAnswerList.map((correctAnswer, index) => {
     var _a;

package/cjs/components/material-quiz/MaterialQuizSelectOne.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var reactIntl = require('react-intl');
 var apiClient = require('@elice/api-client');
+var intl = require('@elice/intl');
 var index = require('../../helpers/index.js');
 require('../shared/QuizDraggbleOption.js');
 require('../shared/QuizDraggbleDummyOption.js');
@@ -33,7 +33,9 @@ const MaterialQuizSelectOne = () => {
     onDirty
   } = MaterialQuizContext.useMaterialQuizDispatch();
   // state
-  const intl = reactIntl.useIntl();
+  const {
+    intl: intl$1
+  } = intl.useRawEliceIntl();
   const [selectedAnswer, setSelectedAnswer] = React.useState();
   const [materialQuizResponse, setMaterialQuizResponse] = React.useState();
   const [submitStatus, setSubmitStatus] = React.useState('idle');
@@ -130,7 +132,7 @@ const MaterialQuizSelectOne = () => {
     }
   };
   return React.createElement(QuestionBox.default, {
-    title: intl.formatMessage({
+    title: intl$1.formatMessage({
       id: 'materialQuiz.selectOne.answer.title'
     }),
     titlePrefix: "A.",
@@ -150,7 +152,7 @@ const MaterialQuizSelectOne = () => {
       transparent: false,
       role: 'primary',
       onClick: handleSubmit,
-      children: intl.formatMessage({
+      children: intl$1.formatMessage({
         id: 'materialQuiz.submit'
       })
     }]

package/cjs/components/material-quiz/MaterialQuizText.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var reactIntl = require('react-intl');
 var apiClient = require('@elice/api-client');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
+var intl = require('@elice/intl');
 var styled = require('styled-components');
 var index = require('../../helpers/index.js');
 var QuestionBox = require('../shared/QuestionBox.js');
@@ -36,7 +36,9 @@ const MaterialQuizText = () => {
     onDirty
   } = MaterialQuizContext.useMaterialQuizDispatch();
   // state
-  const intl = reactIntl.useIntl();
+  const {
+    intl: intl$1
+  } = intl.useRawEliceIntl();
   const [materialQuizResponse, setMaterialQuizResponse] = React.useState();
   const [submitStatus, setSubmitStatus] = React.useState('idle');
   const [answer, setAnswer] = React.useState('');
@@ -121,7 +123,7 @@ const MaterialQuizText = () => {
     type: 'text',
     autoFocus: answer.length === 0,
     disabled: submitStatus === 'pending' || index.checkUserLectureTestEnded(lecture) || !!userId,
-    placeholder: (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.answerHint) || intl.formatMessage({
+    placeholder: (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.answerHint) || intl$1.formatMessage({
       id: 'materialQuiz.text.placeholder'
     }),
     value: answer,
@@ -132,7 +134,7 @@ const MaterialQuizText = () => {
     }
   };
   return React.createElement(QuestionBox.default, {
-    title: intl.formatMessage({
+    title: intl$1.formatMessage({
       id: 'materialQuiz.text.answer.title'
     }),
     titlePrefix: "A.",
@@ -146,7 +148,7 @@ const MaterialQuizText = () => {
     isNextActive: hasSubmitted && typeof onNext === 'function',
     footerActions: [{
       border: true,
-      children: intl.formatMessage({
+      children: intl$1.formatMessage({
         id: 'materialQuiz.submit'
       }),
       disabled: answer.length === 0 || index.checkUserLectureTestEnded(lecture) || !!userId,
@@ -160,7 +162,7 @@ const MaterialQuizText = () => {
     column: true
   }, userId ? React.createElement(StyledLabel, {
     htmlFor: "quiz-text-answer"
-  }, intl.formatMessage({
+  }, intl$1.formatMessage({
     id: 'materialQuiz.submittedAnswer'
   })) : null, React.createElement(StyledTextarea, Object.assign({
     id: "quiz-text-answer"
@@ -169,7 +171,7 @@ const MaterialQuizText = () => {
     margintop: "1rem"
   }, React.createElement(StyledLabel, {
     htmlFor: "quiz-text-submitted-answer"
-  }, intl.formatMessage({
+  }, intl$1.formatMessage({
     id: 'materialQuiz.answer'
   })), React.createElement(StyledTextarea, {
     id: "quiz-text-submitted-answer",

package/cjs/components/material-quiz/QuizResultBadge.js

@@ -3,35 +3,37 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var reactIntl = require('react-intl');
 var blocks = require('@elice/blocks');
+var intl = require('@elice/intl');
 var index = require('../../helpers/index.js');
 
 const QuizResultBadge = ({
   materialQuizResponse
 }) => {
-  const intl = reactIntl.useIntl();
+  const {
+    intl: intl$1
+  } = intl.useRawEliceIntl();
   const status = React.useMemo(() => index.getQuizResultStatus(materialQuizResponse), [materialQuizResponse]);
   switch (status) {
     case index.QuizResultStatus.Correct:
       return React.createElement(blocks.BadgeNext, {
         type: "quiet",
         role: "green"
-      }, intl.formatMessage({
+      }, intl$1.formatMessage({
         id: 'materialQuiz.resultStatus.correct'
       }));
     case index.QuizResultStatus.Wrong:
       return React.createElement(blocks.BadgeNext, {
         type: "quiet",
         role: "red"
-      }, intl.formatMessage({
+      }, intl$1.formatMessage({
         id: 'materialQuiz.resultStatus.wrong'
       }));
     case index.QuizResultStatus.Submitted:
       return React.createElement(blocks.BadgeNext, {
         type: "quiet",
         role: "primary"
-      }, intl.formatMessage({
+      }, intl$1.formatMessage({
         id: 'materialQuiz.resultStatus.submitted'
       }));
     default:

package/cjs/components/material-quiz/QuizSubmitStatusText.js

@@ -3,26 +3,28 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var reactIntl = require('react-intl');
 var blocks = require('@elice/blocks');
+var intl = require('@elice/intl');
 
 const QuizSubmitStatusText = ({
   status
 }) => {
-  const intl = reactIntl.useIntl();
+  const {
+    intl: intl$1
+  } = intl.useRawEliceIntl();
   switch (status) {
     case 'resolved':
       return React.createElement(blocks.StatusText, {
         role: "success",
         size: "small"
-      }, intl.formatMessage({
+      }, intl$1.formatMessage({
         id: 'materialQuiz.submitStatus.success'
       }));
     case 'rejected':
       return React.createElement(blocks.StatusText, {
         role: "danger",
         size: "small"
-      }, intl.formatMessage({
+      }, intl$1.formatMessage({
         id: 'materialQuiz.submitStatus.failure'
       }));
     default:

package/cjs/components/material-quiz/locales/en.json.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var messageEn = {"materialQuiz.error":"Failed to fetch quiz","materialQuiz.submit":"Submit","materialQuiz.submittedAnswer":"Submitted Answer","materialQuiz.answer":"Answer","materialQuiz.next":"Next question >","materialQuiz.selectOne.answer.title":"Choose from the views below.","materialQuiz.selectMultiple.answer.title":"Choose from the views below. (Redundant selections available)","materialQuiz.selectMultipleOrder.answer.title":"Drag and drop your answers.","materialQuiz.text.answer.title":"Please fill out the answer.","materialQuiz.empty.title":"Quiz is now preparing.","materialQuiz.empty.description":"Please check again after quiz posting!","materialQuiz.survey.empty.title":"Survey is now preparing.","materialQuiz.survey.empty.description":"Please check again after survey posting!","materialQuiz.submitStatus.success":"Submitted","materialQuiz.submitStatus.failure":"Failed to submit","materialQuiz.resultStatus.correct":"Correct","materialQuiz.resultStatus.wrong":"Wrong","materialQuiz.resultStatus.submitted":"Submitted","materialQuiz.explanation.close":"close quiz explanations","materialQuiz.explanation.show":"show quiz explanations","materialQuiz.explanation.empty":"no explanations","materialQuiz.text.placeholder":"please fill the answer","materialQuiz.text.correct":"that's correct!","materialQuiz.text.wrong":"that's wrong. try it again!","materialQuiz.order.answerEmpty":"You could move the options back here","materialQuiz.bottomSheet.title":"Options","materialQuiz.bottomSheet.optionEmpty":"All views have been placed in the group.","materialQuiz.dropzone.desktop.answerEmpty":"Drag the view into the area.","materialQuiz.dropzone.mobile.answerEmpty":"Click here to add a view.","materialQuiz.dropzone.optionEmpty":"Option","materialQuiz.dropzone.optionReset":"Answer Reset"};
+
+exports.default = messageEn;

package/cjs/components/material-quiz/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/cjs/components/material-quiz/locales/ko.json.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var messageKo = {"materialQuiz.error":"퀴즈를 불러오는데 실패했습니다.\n잠시 후 다시 시도해주세요.","materialQuiz.submit":"제출","materialQuiz.submittedAnswer":"제출한 답","materialQuiz.answer":"정답","materialQuiz.next":"다음 문제로 이동 >","materialQuiz.selectOne.answer.title":"아래 보기에서 골라주세요.","materialQuiz.selectMultiple.answer.title":"아래 보기에서 골라주세요. (중복 선택 가능)","materialQuiz.selectMultipleOrder.answer.title":"답안을 드래그 앤 드롭하세요.","materialQuiz.text.answer.title":"답안을 작성해 주세요.","materialQuiz.empty.title":"퀴즈가 준비 중 입니다.","materialQuiz.empty.description":"퀴즈 게시 후 다시 확인해주세요!","materialQuiz.survey.empty.title":"설문조사 준비 중 입니다.","materialQuiz.survey.empty.description":"설문지 게시 후 다시 확인해주세요!","materialQuiz.submitStatus.success":"제출되었습니다.","materialQuiz.submitStatus.failure":"제출에 실패하였습니다.","materialQuiz.resultStatus.correct":"정답","materialQuiz.resultStatus.wrong":"오답","materialQuiz.resultStatus.submitted":"제출완료","materialQuiz.explanation.close":"퀴즈해설 닫기","materialQuiz.explanation.show":"퀴즈 해설 보기","materialQuiz.explanation.empty":"작성된 해설이 없습니다.","materialQuiz.text.placeholder":"답안을 작성해 주세요.","materialQuiz.text.correct":"정답입니다.","materialQuiz.text.wrong":"오답입니다. 다시 답안을 제출해보세요.","materialQuiz.order.answerEmpty":"항목을 다시 이곳으로 옮길 수 있습니다.","materialQuiz.bottomSheet.title":"보기","materialQuiz.bottomSheet.optionEmpty":"모든 보기를 그룹에 배치하였습니다.","materialQuiz.dropzone.desktop.answerEmpty":"보기를 영역에 끌어 넣어주세요.","materialQuiz.dropzone.mobile.answerEmpty":"이곳을 클릭하여 보기를 넣어주세요.","materialQuiz.dropzone.optionEmpty":"보기","materialQuiz.dropzone.optionReset":"답안 초기화"};
+
+exports.default = messageKo;

package/cjs/components/material-quiz/locales/th.json.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var messageTh = {"materialQuiz.error":"การโหลดควิซล้วนหลุดล้วน\nโปรดลองอีกครั้งในภายหลัง","materialQuiz.submit":"ส่ง","materialQuiz.submittedAnswer":"การส่งคำตอบ","materialQuiz.answer":"คำตอบ","materialQuiz.next":"เข้าสู่ปัญหาถัดไป >","materialQuiz.selectOne.answer.title":"โปรดเลือกในตัวเลือกด้านล่าง.","materialQuiz.selectMultiple.answer.title":"โปรดเลือกจากรายการด้านล่าง (สามารถเลือกได้มากกว่า 1 รายการ)","materialQuiz.selectMultipleOrder.answer.title":"ลากและวางคำตอบที่ต้องการ","materialQuiz.text.answer.title":"โปรดเขียนคำตอบ","materialQuiz.empty.title":"ควิซกำลังเตรียมอยู่ครับ.","materialQuiz.empty.description":"โปสต์คำถามอีกครั้งหลังจากนั้น!","materialQuiz.survey.empty.title":"กำลังเตรียมการสำรวจข้อมูลค่ะ.","materialQuiz.survey.empty.description":"กรุณาตรวจสอบแบบสอบถามอีกครั้งหลังจากที่โพสต์แล้วค่ะ!","materialQuiz.submitStatus.success":"ส่งแล้วครับ","materialQuiz.submitStatus.failure":"การส่งล้มเหลวแล้วค่ะ.","materialQuiz.resultStatus.correct":"คำตอบ","materialQuiz.resultStatus.wrong":"ข้อผิดพลาด","materialQuiz.resultStatus.submitted":"การส่งเสร็จสิ้น","materialQuiz.explanation.close":"ปิดคำอธิบายควิซ","materialQuiz.explanation.show":"ดูคำอธิบายคำตอบของควิซ","materialQuiz.explanation.empty":"ไม่มีคำอธิบายที่เขียนไว้ ","materialQuiz.text.placeholder":"โปรดเขียนคำตอบ","materialQuiz.text.correct":"คำตอบถูกต้องค่ะ.","materialQuiz.text.wrong":"คำตอบไม่ถูกครับ กรุณาส่งคำตอบอีกครั้งครับ.","materialQuiz.order.answerEmpty":"คุณสามารถย้ายรายการกลับมาที่นี่อีกครั้งได้ค่ะ.","materialQuiz.bottomSheet.title":"ดูให้ดี","materialQuiz.bottomSheet.optionEmpty":"ได้จัดทุกกลุ่มมุมมองลงในกลุ่มแล้วค่ะ.","materialQuiz.dropzone.desktop.answerEmpty":"ลากและวางรายการในพื้นที่ที่กำหนด คุณสามารถลากและวางรายการในพื้นที่ที่กำหนดได้","materialQuiz.dropzone.mobile.answerEmpty":"โปรดคลิกที่นี่เพื่อดู.","materialQuiz.dropzone.optionEmpty":"มุมมอง","materialQuiz.dropzone.optionReset":"ตอบกลับรีเซ็ต"};
+
+exports.default = messageTh;

package/cjs/components/material-quiz/material-quiz-group/MaterialQuizGroup.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var reactIntl = require('react-intl');
 var apiClient = require('@elice/api-client');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
+var intl = require('@elice/intl');
 var markdown = require('@elice/markdown');
 var cloneDeep = require('lodash-es/cloneDeep');
 var flattenDeep = require('lodash-es/flattenDeep');
@@ -20,8 +20,13 @@ var context = require('./context/context.js');
 var MaterialQuizGroupDesktop = require('./MaterialQuizGroupDesktop.js');
 var MaterialQuizGroupMobile = require('./MaterialQuizGroupMobile.js');
 
+//
+//
+//
 const MaterialQuizGroup = () => {
-  const intl = reactIntl.useIntl();
+  const {
+    intl: intl$1
+  } = intl.useRawEliceIntl();
   // context
   const {
     materialQuiz,
@@ -284,7 +289,7 @@ const MaterialQuizGroup = () => {
       transparent: false,
       role: 'primary',
       onClick: handleSubmit,
-      children: intl.formatMessage({
+      children: intl$1.formatMessage({
         id: 'materialQuiz.submit'
       })
     }]

package/cjs/components/material-quiz/material-quiz-group/MaterialQuizGroupDesktop.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var reactIntl = require('react-intl');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
 var icons = require('@elice/icons');
+var intl = require('@elice/intl');
 var styled = require('styled-components');
 var EbDroppable = require('../../eb-sortable/EbDroppable.js');
 var MaterialQuizContext = require('../context/MaterialQuizContext.js');
@@ -34,7 +34,9 @@ const StyledQuizOptionsDropzone = styled(EbDroppable.default).withConfig({
   componentId: "sc-18trt81-4"
 })(["display:flex;flex-wrap:wrap;gap:1rem;min-height:10.25rem;border-radius:0.5rem;outline:1px dashed ", ";&.ui-droppable-hover{outline:1px dashed ", ";}"], designTokens.base.color.navy4, designTokens.base.color.gray4);
 const MaterialQuizGroupDesktop = () => {
-  const intl = reactIntl.useIntl();
+  const {
+    intl: intl$1
+  } = intl.useRawEliceIntl();
   const {
     userId
   } = MaterialQuizContext.useMaterialQuizState();
@@ -85,7 +87,7 @@ const MaterialQuizGroupDesktop = () => {
     })) : React.createElement(blocks.Text, {
       role: "gray5",
       bold: true
-    }, intl.formatMessage({
+    }, intl$1.formatMessage({
       id: 'materialQuiz.dropzone.desktop.answerEmpty'
     }))));
   };
@@ -116,7 +118,7 @@ const MaterialQuizGroupDesktop = () => {
       size: "small",
       disabled: !!userId,
       onClick: handleAnswerReset
-    }, intl.formatMessage({
+    }, intl$1.formatMessage({
       id: 'materialQuiz.dropzone.optionReset'
     })), React.createElement(blocks.Vspace, {
       height: 1
@@ -137,7 +139,7 @@ const MaterialQuizGroupDesktop = () => {
       role: "navy",
       textAlign: "center",
       bold: true
-    }, intl.formatMessage({
+    }, intl$1.formatMessage({
       id: 'materialQuiz.dropzone.optionEmpty'
     }))))), renderQuizContentSortation());
   };

package/cjs/components/material-quiz/material-quiz-group/MaterialQuizGroupMobile.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var reactIntl = require('react-intl');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
+var intl = require('@elice/intl');
 var styled = require('styled-components');
 var MaterialQuizContext = require('../context/MaterialQuizContext.js');
 var context = require('./context/context.js');
@@ -29,7 +29,9 @@ const StyledBottomSheetWrapper = styled(StyledQuizOptionList).withConfig({
   isCurrentOptionList
 }) => vertical && isCurrentOptionList ? 'flex-start' : 'center');
 const MaterialQuizGroupMobile = () => {
-  const intl = reactIntl.useIntl();
+  const {
+    intl: intl$1
+  } = intl.useRawEliceIntl();
   // context
   const {
     materialQuiz,
@@ -54,7 +56,7 @@ const MaterialQuizGroupMobile = () => {
       disabled: !!userId,
       onClick: handleAnswerReset,
       block: true
-    }, intl.formatMessage({
+    }, intl$1.formatMessage({
       id: 'materialQuiz.dropzone.optionReset'
     })), React.createElement(blocks.Vspace, {
       height: 1
@@ -91,7 +93,7 @@ const MaterialQuizGroupMobile = () => {
         textAlign: "center",
         bold: true,
         block: true
-      }, intl.formatMessage({
+      }, intl$1.formatMessage({
         id: 'materialQuiz.dropzone.mobile.answerEmpty'
       }))));
     }));
@@ -103,7 +105,7 @@ const MaterialQuizGroupMobile = () => {
     const isCurrentOptionList = Boolean(currentOptionList.length);
     return React.createElement(blocks.BottomSheet, {
       show: dropzoneIndex !== null,
-      title: intl.formatMessage({
+      title: intl$1.formatMessage({
         id: 'materialQuiz.bottomSheet.title'
       }),
       contentsText: "",
@@ -133,7 +135,7 @@ const MaterialQuizGroupMobile = () => {
       textAlign: "center",
       bold: true,
       block: true
-    }, intl.formatMessage({
+    }, intl$1.formatMessage({
       id: 'materialQuiz.bottomSheet.optionEmpty'
     }))));
   };

package/cjs/components/material-quiz-edit/MaterialQuizEdit.d.ts

@@ -12,8 +12,6 @@ export interface MaterialQuizEditProps {
      * When true, cannot change `optionType`, `options` and `answerInfo`.
      */
     disabled?: boolean;
-    /** Locale of edit form. */
-    locale: string;
     /** Handle form change event. */
     onChange: (value: MaterialQuizEditValue) => void;
     /** Handle form state changes. (`FormState` from react-hook-form) */
@@ -21,5 +19,7 @@ export interface MaterialQuizEditProps {
     /** Handle file upload. */
     onFileUploadRequest: MarkdownEditorFileUploadReqFn;
 }
-declare const MaterialQuizEdit: React.ForwardRefExoticComponent<MaterialQuizEditProps & React.RefAttributes<HTMLFormElement>>;
-export default MaterialQuizEdit;
+declare const _default: React.ForwardRefExoticComponent<Omit<import("@elice/intl").IntlComponentExtraProps & Omit<import("@elice/intl").IntlComponentExtraProps & Omit<MaterialQuizEditProps, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & {
+    __intl: import("@elice/intl").EliceIntlShape;
+} & React.RefAttributes<HTMLFormElement>, keyof import("@elice/intl").IntlComponentExtraProps | "__intl">, "ref"> & React.RefAttributes<HTMLFormElement>>;
+export default _default;

package/cjs/components/material-quiz-edit/MaterialQuizEdit.js

@@ -4,20 +4,22 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var reactHookForm = require('react-hook-form');
-var reactIntl = require('react-intl');
+var intl = require('@elice/intl');
 var materialSharedUtils = require('@elice/material-shared-utils');
 var editValue = require('./utils/editValue.js');
 var context = require('./context.js');
-var locales = require('./locales.js');
+var en = require('./locales/en.json.js');
+var ko = require('./locales/ko.json.js');
+var th = require('./locales/th.json.js');
 var MaterialQuizEditContent = require('./MaterialQuizEditContent.js');
 
 const MaterialQuizEdit = React.forwardRef(({
   value,
   disabled = false,
-  locale = 'en',
   onChange,
   onFormStateChange,
-  onFileUploadRequest
+  onFileUploadRequest,
+  __intl
 }, ref) => {
   const formElRef = React.useRef(null);
   const useFormMethods = reactHookForm.useForm({
@@ -75,18 +77,19 @@ const MaterialQuizEdit = React.forwardRef(({
   //
   //
   //
-  return React.createElement("form", {
+  return React.createElement(intl.RawEliceIntlProvider, {
+    value: {
+      intl: __intl
+    }
+  }, React.createElement("form", {
     ref: formElRef
   }, React.createElement(context.default.Provider, {
     value: {
       disabled,
       onFileUploadRequest
     }
-  }, React.createElement(reactIntl.IntlProvider, {
-    locale: locale,
-    defaultLocale: "en",
-    messages: locale in locales ? locales[locale] : locales.en
   }, React.createElement(reactHookForm.FormProvider, Object.assign({}, useFormMethods), React.createElement(MaterialQuizEditContent.default, null)))));
 });
+var MaterialQuizEdit$1 = new intl.IntlComponentBuilder(MaterialQuizEdit).add('en', en.default).add('ko', ko.default).add('th', th.default).build();
 
-exports.default = MaterialQuizEdit;
+exports.default = MaterialQuizEdit$1;