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

package/cjs/components/material-survey/MaterialSurvey.d.ts

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

package/cjs/components/material-survey/MaterialSurvey.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 MaterialSurveyContext = require('./context/MaterialSurveyContext.js');
+var en = require('./locales/en.json.js');
+var ko = require('./locales/ko.json.js');
+var th = require('./locales/th.json.js');
 var MaterialSurveyShimmer = require('./MaterialSurveyShimmer.js');
 var MaterialSurveyInfo = require('./MaterialSurveyInfo.js');
-var MaterialSurvey_i18n = require('./MaterialSurvey.i18n.js');
 
 const AsyncMaterialSurveySelectMultiple = React.lazy(() => Promise.resolve().then(function () { return require('./MaterialSurveySelectMultiple.js'); }));
 const AsyncMaterialSurveyText = React.lazy(() => Promise.resolve().then(function () { return require('./MaterialSurveyText.js'); }));
@@ -78,20 +80,17 @@ const MaterialSurvey = () => {
 const MaterialSurveyContainer = ({
   materialSurveyId,
   userId,
-  locale = 'en',
   onSubmit,
-  onNext
+  onNext,
+  __intl
 }) => {
-  return React.createElement(reactIntl.IntlProvider, {
-    locale: locale,
-    defaultLocale: "en",
-    messages: locale in MaterialSurvey_i18n ? MaterialSurvey_i18n[locale] : MaterialSurvey_i18n.en
-  }, React.createElement(MaterialSurveyContext.MaterialSurveyProvider, {
+  return React.createElement(intl.RawEliceIntlProvider, Object.assign({}, __intl), React.createElement(MaterialSurveyContext.MaterialSurveyProvider, {
     materialSurveyId: materialSurveyId,
     userId: userId,
     onSubmit: onSubmit,
     onNext: onNext
   }, React.createElement(MaterialSurvey, null)));
 };
+var MaterialSurvey$1 = new intl.IntlComponentBuilder(MaterialSurveyContainer).add('en', en.default).add('ko', ko.default).add('th', th.default).build();
 
-exports.default = MaterialSurveyContainer;
+exports.default = MaterialSurvey$1;

package/cjs/components/material-survey/MaterialSurveySelectMultiple.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/question-radio/QuestionRadio.js');
 require('../shared/question-radio/QuestionRadioOption.js');
@@ -31,7 +31,7 @@ const MaterialSurveySelectMultiple = () => {
     refreshOrgMaterialSurvey
   } = MaterialSurveyContext.useMaterialSurveyDispatch();
   // state
-  const intl = reactIntl.useIntl();
+  const intl$1 = intl.useRawEliceIntl();
   const [selectedAnswer, setSelectedAnswer] = React.useState([]);
   const [materialSurveyResponse, setMaterialSurveyResponse] = React.useState();
   const [submitStatus, setSubmitStatus] = React.useState('idle');
@@ -122,7 +122,7 @@ const MaterialSurveySelectMultiple = () => {
     }
   };
   return React.createElement(SurveyContentBox.default, {
-    title: intl.formatMessage({
+    title: intl$1.formatMessage({
       id: 'materialSurvey.myAnswer'
     }),
     onNext: onNext,
@@ -140,7 +140,7 @@ const MaterialSurveySelectMultiple = () => {
       transparent: false,
       role: 'primary',
       onClick: handleSubmit,
-      children: intl.formatMessage({
+      children: intl$1.formatMessage({
         id: 'materialSurvey.submit'
       })
     }]

package/cjs/components/material-survey/MaterialSurveySelectOne.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');
 var QuestionRadio = require('../shared/question-radio/QuestionRadio.js');
 var QuestionRadioOption = require('../shared/question-radio/QuestionRadioOption.js');
@@ -30,7 +30,7 @@ const MaterialSurveySelectOne = () => {
     refreshOrgMaterialSurvey
   } = MaterialSurveyContext.useMaterialSurveyDispatch();
   // state
-  const intl = reactIntl.useIntl();
+  const intl$1 = intl.useRawEliceIntl();
   const [selectedAnswer, setSelectedAnswer] = React.useState();
   const [materialSurveyResponse, setMaterialSurveyResponse] = React.useState();
   const [submitStatus, setSubmitStatus] = React.useState('idle');
@@ -110,7 +110,7 @@ const MaterialSurveySelectOne = () => {
     }
   };
   return React.createElement(SurveyContentBox.default, {
-    title: intl.formatMessage({
+    title: intl$1.formatMessage({
       id: 'materialSurvey.myAnswer'
     }),
     onNext: onNext,
@@ -128,7 +128,7 @@ const MaterialSurveySelectOne = () => {
       transparent: false,
       role: 'primary',
       onClick: handleSubmit,
-      children: intl.formatMessage({
+      children: intl$1.formatMessage({
         id: 'materialSurvey.submit'
       })
     }]

package/cjs/components/material-survey/MaterialSurveyText.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var reactIntl = require('react-intl');
 var apiClient = require('@elice/api-client');
 var designTokens = require('@elice/design-tokens');
+var intl = require('@elice/intl');
 var styled = require('styled-components');
 var index = require('../../helpers/index.js');
 var SurveyContentBox = require('../shared/SurveyContentBox.js');
@@ -31,7 +31,7 @@ const MaterialSurveyText = () => {
     refreshOrgMaterialSurvey
   } = MaterialSurveyContext.useMaterialSurveyDispatch();
   // state
-  const intl = reactIntl.useIntl();
+  const intl$1 = intl.useRawEliceIntl();
   const [materialSurveyResponse, setMaterialSurveyResponse] = React.useState();
   const [submitStatus, setSubmitStatus] = React.useState('idle');
   const [answer, setAnswer] = React.useState('');
@@ -113,7 +113,7 @@ const MaterialSurveyText = () => {
     type: 'text',
     autoFocus: answer.length === 0,
     disabled: submitStatus === 'pending' || index.checkUserLectureTestEnded(lecture) || !!userId,
-    placeholder: intl.formatMessage({
+    placeholder: intl$1.formatMessage({
       id: 'materialSurvey.text.placeholder'
     }),
     value: answer,
@@ -122,7 +122,7 @@ const MaterialSurveyText = () => {
     }
   };
   return React.createElement(SurveyContentBox.default, {
-    title: intl.formatMessage({
+    title: intl$1.formatMessage({
       id: 'materialSurvey.myAnswer'
     }),
     onNext: onNext,
@@ -134,7 +134,7 @@ const MaterialSurveyText = () => {
     }),
     footerActions: [{
       border: true,
-      children: intl.formatMessage({
+      children: intl$1.formatMessage({
         id: 'materialSurvey.submit'
       }),
       disabled: answer.length === 0 || index.checkUserLectureTestEnded(lecture) || !!userId,

package/cjs/components/material-survey/SurveyResultBadge.js

@@ -3,21 +3,21 @@
 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 SurveyResultBadge = ({
   materialSurveyResponse
 }) => {
-  const intl = reactIntl.useIntl();
+  const intl$1 = intl.useRawEliceIntl();
   const status = React.useMemo(() => index.getSurveyResultStatus(materialSurveyResponse), [materialSurveyResponse]);
   switch (status) {
     case index.SurveyResultStatus.Submitted:
       return React.createElement(blocks.BadgeNext, {
         type: "quiet",
         role: "primary"
-      }, intl.formatMessage({
+      }, intl$1.formatMessage({
         id: 'materialSurvey.resultStatus.submitted'
       }));
     default:

package/cjs/components/material-survey/SurveySubmitStatusText.js

@@ -3,26 +3,26 @@
 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 SurveySubmitStatusText = ({
   status
 }) => {
-  const intl = reactIntl.useIntl();
+  const intl$1 = intl.useRawEliceIntl();
   switch (status) {
     case 'resolved':
       return React.createElement(blocks.StatusText, {
         role: "success",
         size: "small"
-      }, intl.formatMessage({
+      }, intl$1.formatMessage({
         id: 'materialSurvey.submitStatus.success'
       }));
     case 'rejected':
       return React.createElement(blocks.StatusText, {
         role: "danger",
         size: "small"
-      }, intl.formatMessage({
+      }, intl$1.formatMessage({
         id: 'materialSurvey.submitStatus.failure'
       }));
     default:

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var messageEn = {"materialSurvey.error":"Failed to fetch survey","materialSurvey.submit":"Submit","materialSurvey.submittedAnswer":"Submitted Answer","materialSurvey.next":"Next question >","materialSurvey.myAnswer":"My answer","materialSurvey.empty.title":"Survey is now preparing.","materialSurvey.empty.description":"Please check again after survey posting!","materialSurvey.survey.empty.title":"Survey is now preparing.","materialSurvey.survey.empty.description":"Please check again after survey posting!","materialSurvey.submitStatus.success":"Submitted","materialSurvey.submitStatus.failure":"Failed to submit","materialSurvey.resultStatus.submitted":"Submitted","materialSurvey.text.placeholder":"please fill the answer"};
+
+exports.default = messageEn;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var messageKo = {"materialSurvey.error":"설문조사를 불러오는데 실패했습니다.\n잠시 후 다시 시도해주세요.","materialSurvey.submit":"제출","materialSurvey.submittedAnswer":"제출한 답","materialSurvey.next":"다음으로 이동 >","materialSurvey.myAnswer":"내 답변","materialSurvey.empty.title":"설문조사가 준비 중 입니다.","materialSurvey.empty.description":"설문조사 게시 후 다시 확인해주세요!","materialSurvey.survey.empty.title":"설문조사가 준비 중 입니다.","materialSurvey.survey.empty.description":"설문지 게시 후 다시 확인해주세요!","materialSurvey.submitStatus.success":"제출되었습니다.","materialSurvey.submitStatus.failure":"제출에 실패하였습니다.","materialSurvey.resultStatus.submitted":"제출완료","materialSurvey.text.placeholder":"답변을 입력하세요."};
+
+exports.default = messageKo;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var messageTh = {"materialSurvey.error":"การโหลดแบบสำรวจล้มเหลว\nโปรดลองอีกครั้งในภายหลัง","materialSurvey.submit":"ส่ง","materialSurvey.submittedAnswer":"ส่งคำตอบ","materialSurvey.next":"ย้ายไปที่ต่อไป >","materialSurvey.myAnswer":"การตอบของฉัน","materialSurvey.empty.title":"การสำรวจกำลังจะเริ่มขึ้นค่ะ.","materialSurvey.empty.description":"โปสต์แบบสำรวจแล้ว กรุณาตรวจสอบอีกครั้งค่ะ!","materialSurvey.survey.empty.title":"การสำรวจกำลังจะเริ่มต้น  โปรดรอสัก{_termCourseRoleEducator}่.","materialSurvey.survey.empty.description":"กรุณาตรวจสอบแบบสำรวจอีกครั้งหลังจากที่โพสต์แล้วค่ะ!","materialSurvey.submitStatus.success":"ส่งแล้วครับ.","materialSurvey.submitStatus.failure":"การส่งล้มเหลวแล้วค่ะ.","materialSurvey.resultStatus.submitted":"การส่งแบบทำเสร็จแล้ว","materialSurvey.text.placeholder":"โปรดใส่คำตอบของคุณ."};
+
+exports.default = messageTh;

package/cjs/components/material-survey-edit/MaterialSurveyEdit.d.ts

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

@@ -4,20 +4,25 @@ 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 MaterialSurveyEditContent = require('./MaterialSurveyEditContent.js');
 
+//
+//
+//
 const MaterialSurveyEdit = React.forwardRef(({
   value,
   disabled = false,
-  locale = 'en',
   onChange,
   onFormStateChange,
-  onFileUploadRequest
+  onFileUploadRequest,
+  __intl
 }, ref) => {
   const formElRef = React.useRef(null);
   const useFormMethods = reactHookForm.useForm({
@@ -73,18 +78,15 @@ const MaterialSurveyEdit = React.forwardRef(({
   //
   //
   //
-  return React.createElement("form", {
+  return React.createElement(intl.RawEliceIntlProvider, Object.assign({}, __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(MaterialSurveyEditContent.default, null)))));
 });
+var MaterialSurveyEdit$1 = new intl.IntlComponentBuilder(MaterialSurveyEdit).add('en', en.default).add('ko', ko.default).add('th', th.default).build();
 
-exports.default = MaterialSurveyEdit;
+exports.default = MaterialSurveyEdit$1;

package/cjs/components/material-survey-edit/MaterialSurveyEditContent.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var reactHookForm = require('react-hook-form');
-var reactIntl = require('react-intl');
 var blocks = require('@elice/blocks');
+var intl = require('@elice/intl');
 var markdown = require('@elice/markdown');
 var types = require('@elice/types');
 var styled = require('styled-components');
@@ -19,7 +19,7 @@ const StyledSurveyOptionTypeSelectWrap = styled.div.withConfig({
   componentId: "sc-r4ms68-0"
 })(["display:flex;max-width:12rem;"]);
 const MaterialSurveyEditContent = () => {
-  const intl = reactIntl.useIntl();
+  const intl$1 = intl.useRawEliceIntl();
   const {
     disabled,
     onFileUploadRequest
@@ -42,14 +42,14 @@ const MaterialSurveyEditContent = () => {
           // add default option info
           [{
             id: randomId.createRandomId(),
-            value: intl.formatMessage({
+            value: intl$1.formatMessage({
               id: 'common.option'
             }, {
               number: 1
             })
           }, {
             id: randomId.createRandomId(),
-            value: intl.formatMessage({
+            value: intl$1.formatMessage({
               id: 'common.option'
             }, {
               number: 2
@@ -64,7 +64,7 @@ const MaterialSurveyEditContent = () => {
     setValue('questionInfoList.0.optionInfo', get());
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  [watchedOptionType, setValue, intl]);
+  [watchedOptionType, setValue, intl$1]);
   /**
    * Input of option info and answer info,
    * according to option type.
@@ -87,8 +87,8 @@ const MaterialSurveyEditContent = () => {
       label: React.createElement(blocks.Label, {
         size: "small",
         required: true
-      }, React.createElement(reactIntl.FormattedMessage, {
-        id: "content.title"
+      }, intl$1.formatMessage({
+        id: 'content.title'
       })),
       input: React.createElement(reactHookForm.Controller, {
         control: control,
@@ -96,13 +96,13 @@ const MaterialSurveyEditContent = () => {
         rules: {
           required: {
             value: true,
-            message: intl.formatMessage({
+            message: intl$1.formatMessage({
               id: 'content.title.errorMessage.required'
             })
           },
           minLength: {
             value: MIN_TEXT_LENGTH,
-            message: intl.formatMessage({
+            message: intl$1.formatMessage({
               id: 'common.errorMessage.range'
             }, {
               min: MIN_TEXT_LENGTH,
@@ -111,7 +111,7 @@ const MaterialSurveyEditContent = () => {
           },
           maxLength: {
             value: MAX_TEXT_LENGTH,
-            message: intl.formatMessage({
+            message: intl$1.formatMessage({
               id: 'common.errorMessage.range'
             }, {
               min: MIN_TEXT_LENGTH,
@@ -129,7 +129,7 @@ const MaterialSurveyEditContent = () => {
             width: "full",
             minLength: MIN_TEXT_LENGTH,
             maxLength: MAX_TEXT_LENGTH,
-            placeholder: intl.formatMessage({
+            placeholder: intl$1.formatMessage({
               id: 'content.title.placeholder'
             }),
             invalid: fieldState.invalid,
@@ -146,8 +146,8 @@ const MaterialSurveyEditContent = () => {
     return React.createElement(blocks.FormInputVerticalLayout, {
       label: React.createElement(blocks.Label, {
         size: "small"
-      }, React.createElement(reactIntl.FormattedMessage, {
-        id: "content.description.title"
+      }, intl$1.formatMessage({
+        id: 'content.description.title'
       })),
       input: React.createElement(reactHookForm.Controller, {
         control: control,
@@ -156,7 +156,7 @@ const MaterialSurveyEditContent = () => {
           field
         }) => React.createElement(markdown.MarkdownEditor, Object.assign({
           enableFooter: true,
-          placeholder: intl.formatMessage({
+          placeholder: intl$1.formatMessage({
             id: 'content.description.placeholder'
           }),
           onFileUploadRequest: onFileUploadRequest
@@ -172,8 +172,8 @@ const MaterialSurveyEditContent = () => {
       label: React.createElement(blocks.Label, {
         size: "small",
         required: true
-      }, React.createElement(reactIntl.FormattedMessage, {
-        id: "content.option.title"
+      }, intl$1.formatMessage({
+        id: 'content.option.title'
       })),
       input: React.createElement(React.Fragment, null, React.createElement(reactHookForm.Controller, {
         control: control,
@@ -181,7 +181,7 @@ const MaterialSurveyEditContent = () => {
         render: ({
           field
         }) => React.createElement(blocks.Tooltip, {
-          title: disabled ? intl.formatMessage({
+          title: disabled ? intl$1.formatMessage({
             id: 'content.option.tooltip.disabled'
           }) : undefined,
           placement: "top-end"
@@ -193,17 +193,17 @@ const MaterialSurveyEditContent = () => {
           onChange: v => field.onChange(Number(v))
         }), React.createElement("option", {
           value: types.enums.SurveyOptionType.SelectOne,
-          children: intl.formatMessage({
+          children: intl$1.formatMessage({
             id: 'content.option.select.items.selectOne'
           })
         }), React.createElement("option", {
           value: types.enums.SurveyOptionType.SelectMultiple,
-          children: intl.formatMessage({
+          children: intl$1.formatMessage({
             id: 'content.option.select.items.selectMultiple'
           })
         }), React.createElement("option", {
           value: types.enums.SurveyOptionType.Text,
-          children: intl.formatMessage({
+          children: intl$1.formatMessage({
             id: 'content.option.select.items.text'
           })
         }))))

package/cjs/components/material-survey-edit/MaterialSurveyEditOptionSelect.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var reactHookForm = require('react-hook-form');
-var reactIntl = require('react-intl');
 var blocks = require('@elice/blocks');
 var icons = require('@elice/icons');
+var intl = require('@elice/intl');
 var styled = require('styled-components');
 var randomId = require('./utils/randomId.js');
 var context = require('./context.js');
@@ -20,7 +20,7 @@ const StyledInputGroup = styled.div.withConfig({
   componentId: "sc-1eiyk6z-1"
 })(["width:100%;.eb-input{margin-bottom:0.5rem;&:last-of-type{margin-bottom:0;}}"]);
 const OptionSelectOne = () => {
-  const intl = reactIntl.useIntl();
+  const intl$1 = intl.useRawEliceIntl();
   const {
     disabled
   } = context.useMaterialSurveyEditContext();
@@ -63,7 +63,7 @@ const OptionSelectOne = () => {
     rules: {
       required: {
         value: true,
-        message: intl.formatMessage({
+        message: intl$1.formatMessage({
           id: 'option.common.select.errorMessage.required'
         })
       }
@@ -76,11 +76,11 @@ const OptionSelectOne = () => {
       return React.createElement(blocks.Input, Object.assign({
         size: "small",
         width: "full",
-        placeholder: intl.formatMessage({
+        placeholder: intl$1.formatMessage({
           id: 'option.common.select.placeholder'
         }),
         suffix: React.createElement(blocks.Tooltip, {
-          title: optionInfoFields.length <= MIN_OPTION_INFO_COUNT ? intl.formatMessage({
+          title: optionInfoFields.length <= MIN_OPTION_INFO_COUNT ? intl$1.formatMessage({
             id: 'option.common.select.tooltip.minOptionInfoItem'
           }) : undefined,
           placement: "top-start"
@@ -101,7 +101,7 @@ const OptionSelectOne = () => {
   }))), React.createElement(blocks.Vspace, {
     height: 0.5
   }), React.createElement(blocks.Tooltip, {
-    title: optionInfoFields.length >= MAX_OPTION_INFO_COUNT ? intl.formatMessage({
+    title: optionInfoFields.length >= MAX_OPTION_INFO_COUNT ? intl$1.formatMessage({
       id: 'option.common.select.tooltip.maxOptionInfoItem'
     }) : undefined,
     placement: "bottom"
@@ -115,8 +115,8 @@ const OptionSelectOne = () => {
     }),
     disabled: optionInfoFields.length >= MAX_OPTION_INFO_COUNT || disabled,
     onClick: appendOptionInfo
-  }, React.createElement(reactIntl.FormattedMessage, {
-    id: "option.common.select.addButton"
+  }, intl$1.formatMessage({
+    id: 'option.common.select.addButton'
   })))));
 };
 

package/cjs/components/material-survey-edit/locales/en.json.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var messageEn = {"common.option":"Option {number}","common.errorMessage.range":"Please enter within {min} ~ {max} characters.","content.title":"Question","content.title.errorMessage.required":"Please fill the question.","content.title.placeholder":"Please enter question.","content.description.title":"Detailed Contents","content.description.placeholder":"Please enter a detailed question description or image, etc.","content.option.title":"Answer","content.option.tooltip.disabled":"Editing is not possible if the question is public or if there are {_termPathRoleStudent} who have submitted the question.\nYou can check the configured question in the Learner's {_termLibraryLecturePage} tab on the left.","content.option.select.items.selectOne":"Single Choice","content.option.select.items.selectMultiple":"Multiple Choice","content.option.select.items.text":"Short Answer","option.common.select.errorMessage.required":"Please enter options.","option.common.select.placeholder":"Enter options","option.common.select.tooltip.minOptionInfoItem":"You must enter at least 2 options.","option.common.select.tooltip.maxOptionInfoItem":"You cannot enter more than 20 options.","option.common.select.addButton":"Add Option"};
+
+exports.default = messageEn;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var messageKo = {"common.option":"옵션 {number}","common.errorMessage.range":"{min} ~ {max}자 이내로 입력해주세요.","content.title":"질문","content.title.errorMessage.required":"질문을 입력해주세요.","content.title.placeholder":"질문을 입력해주세요.","content.description.title":"세부 내용","content.description.placeholder":"자세한 질문 설명이나 이미지 등을 입력해주세요.","content.option.title":"답변","content.option.tooltip.disabled":"설문 조사가 공개된 상태이거나 제출한 {_termPathRoleStudent}이 존재하면\n수정이 불가능합니다.","content.option.select.items.selectOne":"객관식 (단일 답변)","content.option.select.items.selectMultiple":"객관식 (복수 답변)","content.option.select.items.text":"주관식 답변","option.common.select.errorMessage.required":"선택지를 입력해주세요.","option.common.select.placeholder":"선택지 입력","option.common.select.tooltip.minOptionInfoItem":"선택지는 2개 이상 입력해야 합니다.","option.common.select.tooltip.maxOptionInfoItem":"선택지는 20개 초과하여 입력할 수 없습니다.","option.common.select.addButton":"보기 추가"};
+
+exports.default = messageKo;

package/cjs/components/material-survey-edit/locales/th.json.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var messageTh = {"common.option":"ตัวเลือก {number}","common.errorMessage.range":"โปรดป้อนข้อความระหว่าง {min} ถึง {max} ตัวอักษร","content.title":"คำถาม","content.title.errorMessage.required":"กรุณาใส่คำถาม","content.title.placeholder":"กรุณาใส่คำถาม","content.description.title":"รายละเอียด","content.description.placeholder":"โปรดใส่คำอธิบายหรือรูปภาพสำหรับคำถามของคุณ","content.option.title":"คำตอบ","content.option.tooltip.disabled":"หากการสำรวจถูกเปิดเผยแล้วหรือมี{_termCourseRoleStudent}ที่ส่งแล้ว\nจะไม่สามารถแก้ไขได้","content.option.select.items.selectOne":"ปรนัย (เลือกหนึ่ง)","content.option.select.items.selectMultiple":"ปรนัย (เลือกหลายอย่าง)","content.option.select.items.text":"คำตอบอัตนัย","option.common.select.errorMessage.required":"กรุณาใส่ตัวเลือก","option.common.select.placeholder":"ใส่ตัวเลือก","option.common.select.tooltip.minOptionInfoItem":"ต้องใส่ตัวเลือกอย่างน้อย 2 ตัว","option.common.select.tooltip.maxOptionInfoItem":"ไม่สามารถใส่ตัวเลือกได้เกิน 20 ตัว","option.common.select.addButton":"เพิ่มตัวเลือก"};
+
+exports.default = messageTh;

package/cjs/components/shared/SurveyContentBox.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 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 MaterialSurveyContext = require('../material-survey/context/MaterialSurveyContext.js');
 
@@ -60,7 +60,7 @@ const SurveyContentBox = _a => {
       onNext
     } = _a,
     props = tslib.__rest(_a, ["children", "footerActions", "title", "submitResult", "submitStatus", "onNext"]);
-  const intl = reactIntl.useIntl();
+  const intl$1 = intl.useRawEliceIntl();
   const {
     vertical
   } = MaterialSurveyContext.useMaterialSurveyState();
@@ -86,7 +86,7 @@ const SurveyContentBox = _a => {
     transparent: false,
     role: "lightpurple",
     onClick: onNext
-  }, intl.formatMessage({
+  }, intl$1.formatMessage({
     id: 'materialSurvey.next'
   })) : null), React.createElement(StyledQuestionBoxFooterStatus, {
     vertical: vertical

package/es/components/material-survey/MaterialSurvey.d.ts

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