@elice/material-quiz 1.240718.0-trasncript.2 → 1.240718.1

package/cjs/components/eb-sortable/EbDraggable.js

@@ -2,114 +2,105 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var $ = require('jquery');
 require('jquery-ui/ui/widgets/draggable');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var $__default = /*#__PURE__*/_interopDefaultCompat($);
-
-var EbDraggable = function EbDraggable(_ref) {
-  var children = _ref.children,
-    id = _ref.id,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$revert = _ref.revert,
-    revert = _ref$revert === void 0 ? true : _ref$revert,
-    _ref$clone = _ref.clone,
-    clone = _ref$clone === void 0 ? false : _ref$clone,
-    className = _ref.className,
-    onStart = _ref.onStart,
-    onStop = _ref.onStop,
-    onDrag = _ref.onDrag,
-    onCreate = _ref.onCreate;
-  var rootEl = React__default.default.useRef(null);
-  var onStartCallback = React__default.default.useCallback(function (event, ui) {
+const EbDraggable = ({
+  children,
+  id,
+  disabled = false,
+  revert = true,
+  clone = false,
+  className,
+  onStart,
+  onStop,
+  onDrag,
+  onCreate
+}) => {
+  const rootEl = React.useRef(null);
+  const onStartCallback = React.useCallback((event, ui) => {
     if (onStart) {
       return onStart(event, ui);
     } else {
-      return function () {
+      return () => {
         return;
       };
     }
   }, [onStart]);
-  var onStopCallback = React__default.default.useCallback(function (event, ui) {
+  const onStopCallback = React.useCallback((event, ui) => {
     if (onStop) {
       return onStop(event, ui);
     } else {
-      return function () {
+      return () => {
         return;
       };
     }
   }, [onStop]);
-  var onDragCallback = React__default.default.useCallback(function (event, ui) {
+  const onDragCallback = React.useCallback((event, ui) => {
     if (onDrag) {
       return onDrag(event, ui);
     } else {
-      return function () {
+      return () => {
         return;
       };
     }
   }, [onDrag]);
-  var onCreateCallback = React__default.default.useCallback(function (event, ui) {
+  const onCreateCallback = React.useCallback((event, ui) => {
     if (onCreate) {
       return onCreate(event, ui);
     } else {
-      return function () {
+      return () => {
         return;
       };
     }
   }, [onCreate]);
-  React__default.default.useEffect(function () {
+  React.useEffect(() => {
     if (!rootEl.current) {
       return;
     }
-    var draggableEl = $__default.default(rootEl.current);
+    const draggableEl = $(rootEl.current);
     draggableEl.draggable(Object.assign(Object.assign(Object.assign(Object.assign({}, disabled ? {
-      disabled: disabled
+      disabled
     } : null), revert ? {
-      revert: revert
+      revert
     } : null), clone ? {
       helper: 'clone'
     } : null), {
       zIndex: 200,
       revertDuration: 0,
-      start: function start(event, ui) {
+      start: (event, ui) => {
         if (!onStartCallback) {
           return;
         }
         onStartCallback(event, ui);
       },
-      stop: function stop(event, ui) {
+      stop: (event, ui) => {
         if (!onStopCallback) {
           return;
         }
         // draggableEl.draggable('cancel');
         onStopCallback(event, ui);
       },
-      drag: function drag(event, ui) {
+      drag: (event, ui) => {
         onDragCallback(event, ui);
       },
-      create: function create(event, ui) {
+      create: (event, ui) => {
         onCreateCallback(event, ui);
       }
     }));
-    return function () {
+    return () => {
       draggableEl.draggable('destroy');
     };
   }, [clone, disabled, onCreateCallback, onDragCallback, onStartCallback, onStopCallback, revert]);
-  return jsxRuntime.jsx("div", {
+  return React.createElement("div", {
     ref: rootEl,
     id: id,
     className: className,
     style: {
       cursor: disabled ? 'auto' : 'move'
-    },
-    children: children
-  });
+    }
+  }, children);
 };
 
 exports.default = EbDraggable;

package/cjs/components/eb-sortable/EbDroppable.js

@@ -2,61 +2,54 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var $ = require('jquery');
 require('jquery-ui/ui/widgets/droppable');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var $__default = /*#__PURE__*/_interopDefaultCompat($);
-
-var EbDroppable = function EbDroppable(_ref) {
-  var children = _ref.children,
-    id = _ref.id,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    accept = _ref.accept,
-    className = _ref.className,
-    onDrop = _ref.onDrop;
-  var rootEl = React__default.default.useRef(null);
-  var onDropCallback = React__default.default.useCallback(function (event, ui) {
+const EbDroppable = ({
+  children,
+  id,
+  disabled = false,
+  accept,
+  className,
+  onDrop
+}) => {
+  const rootEl = React.useRef(null);
+  const onDropCallback = React.useCallback((event, ui) => {
     if (onDrop) {
       return onDrop(event, ui);
     } else {
-      return function () {
+      return () => {
         return;
       };
     }
   }, [onDrop]);
-  React__default.default.useEffect(function () {
+  React.useEffect(() => {
     if (!rootEl.current) {
       return;
     }
-    var draggableEl = $__default.default(rootEl.current);
+    const draggableEl = $(rootEl.current);
     draggableEl.droppable(Object.assign(Object.assign(Object.assign({}, disabled ? {
-      disabled: disabled
+      disabled
     } : null), accept ? {
-      accept: accept
+      accept
     } : null), {
-      drop: function drop(event, ui) {
+      drop: (event, ui) => {
         if (!onDropCallback) {
           return;
         }
         onDropCallback(event, ui);
       }
     }));
-    return function () {
+    return () => {
       draggableEl.droppable('destroy');
     };
   }, [accept, disabled, onDropCallback]);
-  return jsxRuntime.jsx("div", {
+  return React.createElement("div", {
     ref: rootEl,
     id: id,
-    className: className,
-    children: children
-  });
+    className: className
+  }, children);
 };
 
 exports.default = EbDroppable;

package/cjs/components/markdown-editor/index.d.ts

@@ -1,2 +1,3 @@
+import React from 'react';
 import type { EliceWysiwygEditorProps } from '@elice/wysiwyg';
-export declare const MarkdownEditor: ({ value, onChange, ...props }: EliceWysiwygEditorProps) => JSX.Element;
+export declare const MarkdownEditor: ({ value, onChange, ...props }: EliceWysiwygEditorProps) => React.JSX.Element;

package/cjs/components/markdown-editor/index.js

@@ -1,34 +1,25 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactUse = require('react-use');
 var wysiwyg = require('@elice/wysiwyg');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-var STATE_SYNC_DEBOUNCE_TIME = 50;
-var MarkdownEditor = function MarkdownEditor(_a) {
-  var value = _a.value,
-    onChange = _a.onChange,
+const STATE_SYNC_DEBOUNCE_TIME = 50;
+const MarkdownEditor = _a => {
+  var {
+      value,
+      onChange
+    } = _a,
     props = tslib.__rest(_a, ["value", "onChange"]);
-  var _React$useState = React__default.default.useState(value),
-    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
-    __value = _React$useState2[0],
-    __setValue = _React$useState2[1];
-  reactUse.useDebounce(function () {
-    return __setValue(value);
-  }, STATE_SYNC_DEBOUNCE_TIME, [value]);
-  reactUse.useDebounce(function () {
+  const [__value, __setValue] = React.useState(value);
+  reactUse.useDebounce(() => __setValue(value), STATE_SYNC_DEBOUNCE_TIME, [value]);
+  reactUse.useDebounce(() => {
     if (__value !== value && typeof onChange === 'function') {
       onChange(__value !== null && __value !== void 0 ? __value : '');
     }
   }, STATE_SYNC_DEBOUNCE_TIME, [__value]);
-  return jsxRuntime.jsx(wysiwyg.EliceWysiwygEditor, Object.assign({
+  return React.createElement(wysiwyg.EliceWysiwygEditor, Object.assign({
     value: value,
     onChange: __setValue
   }, props));

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

@@ -2,8 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactUse = require('react-use');
 var designTokens = require('@elice/design-tokens');
@@ -19,152 +17,123 @@ var ko = require('./locales/ko.json.js');
 var MaterialQuizShimmer = require('./MaterialQuizShimmer.js');
 var MaterialQuizInfo = require('./MaterialQuizInfo.js');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-var eliceTheme = muiSystem.createEliceTheme({
+const eliceTheme = muiSystem.createEliceTheme({
   paletteMode: 'dark',
   paletteName: 'purple'
 });
-var AsyncMaterialQuizSelectMultiple = React__default.default.lazy(function () {
-  return Promise.resolve().then(function () { return require('./MaterialQuizSelectMultiple.js'); });
-});
-var AsyncMaterialQuizSelectMultipleOrder = React__default.default.lazy(function () {
-  return Promise.resolve().then(function () { return require('./MaterialQuizSelectMultipleOrder.js'); });
-});
-var AsyncMaterialQuizText = React__default.default.lazy(function () {
-  return Promise.resolve().then(function () { return require('./MaterialQuizText.js'); });
-});
-var AsyncMaterialQuizSelectOne = React__default.default.lazy(function () {
-  return Promise.resolve().then(function () { return require('./MaterialQuizSelectOne.js'); });
-});
-var AsyncMaterialQuizGroup = React__default.default.lazy(function () {
-  return Promise.resolve().then(function () { return require('./material-quiz-group/index.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'); }));
+const AsyncMaterialQuizText = React.lazy(() => Promise.resolve().then(function () { return require('./MaterialQuizText.js'); }));
+const AsyncMaterialQuizSelectOne = React.lazy(() => Promise.resolve().then(function () { return require('./MaterialQuizSelectOne.js'); }));
+const AsyncMaterialQuizGroup = React.lazy(() => Promise.resolve().then(function () { return require('./material-quiz-group/index.js'); }));
 // 746px
-var MAX_CONTENT_WIDTH = '46.625rem';
-var StyledMaterialQuizInfo = styled__default.default.div.withConfig({
+const MAX_CONTENT_WIDTH = '46.625rem';
+const StyledMaterialQuizInfo = styled.div.withConfig({
   componentId: "sc-1eyn8fb-0"
 })([""]);
-var StyledMaterialQuizContent = styled__default.default.div.withConfig({
+const StyledMaterialQuizContent = styled.div.withConfig({
   componentId: "sc-1eyn8fb-1"
-})(["position:relative;z-index:0;min-width:0;margin:", ";height:100%;"], function (_ref) {
-  var vertical = _ref.vertical;
-  return vertical ? 'unset' : 'auto';
-});
-var LoadingContainer = styled__default.default.div.withConfig({
+})(["position:relative;z-index:0;min-width:0;margin:", ";height:100%;"], ({
+  vertical
+}) => vertical ? 'unset' : 'auto');
+const LoadingContainer = styled.div.withConfig({
   componentId: "sc-1eyn8fb-2"
 })(["position:absolute;width:100%;height:100%;top:0;left:0;z-index:1;max-width:none !important;background-color:", ";"], designTokens.base.color.navy8);
-var StyledMaterialQuizWrapper = styled__default.default.div.withConfig({
+const StyledMaterialQuizWrapper = styled.div.withConfig({
   componentId: "sc-1eyn8fb-3"
-})(["-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;width:100%;height:100%;flex-direction:", ";position:relative;& > *{flex:", ";max-width:", ";}gap:1rem;", "{height:", ";overflow-y:", ";& > div{max-height:unset;}}"], function (_ref2) {
-  var vertical = _ref2.vertical;
-  return vertical ? 'column' : 'row';
-}, function (_ref3) {
-  var vertical = _ref3.vertical;
-  return vertical ? 'auto' : '1';
-}, function (_ref4) {
-  var vertical = _ref4.vertical,
-    isQuizGroupType = _ref4.isQuizGroupType,
-    isLongPassage = _ref4.isLongPassage;
-  return !isLongPassage && !vertical && !isQuizGroupType ? "".concat(MAX_CONTENT_WIDTH) : 'unset';
-}, StyledMaterialQuizInfo, function (_ref5) {
-  var vertical = _ref5.vertical;
-  return vertical ? 'auto' : '100%';
-}, function (_ref6) {
-  var vertical = _ref6.vertical;
-  return vertical ? 'intial' : 'auto';
-});
-var MaterialQuiz = function MaterialQuiz() {
-  var _useMaterialQuizState = MaterialQuizContext.useMaterialQuizState(),
-    materialQuiz = _useMaterialQuizState.materialQuiz,
-    vertical = _useMaterialQuizState.vertical,
-    course = _useMaterialQuizState.course,
-    isLongPassage = _useMaterialQuizState.isLongPassage,
-    isInitialLoading = _useMaterialQuizState.isInitialLoading;
-  var _useMaterialQuizDispa = MaterialQuizContext.useMaterialQuizDispatch(),
-    setVertical = _useMaterialQuizDispa.setVertical;
-  var _useMeasure = reactUse.useMeasure(),
-    _useMeasure2 = _rollupPluginBabelHelpers.slicedToArray(_useMeasure, 2),
-    ref = _useMeasure2[0],
-    width = _useMeasure2[1].width;
-  var isQuizGroupType = Boolean((materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.optionType) === types.enums.QuizOptionType.Group);
-  var isFetchingData = !materialQuiz || !course;
-  var isLoadingLayout = isFetchingData || isInitialLoading;
-  var isVisibleSideBySide = !vertical && isLongPassage;
-  var isRenderQuestionWithPassage = (vertical || !isLongPassage || isQuizGroupType) && !!materialQuiz;
-  React__default.default.useEffect(function () {
+})(["-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;width:100%;height:100%;flex-direction:", ";position:relative;& > *{flex:", ";max-width:", ";}gap:1rem;", "{height:", ";overflow-y:", ";& > div{max-height:unset;}}"], ({
+  vertical
+}) => vertical ? 'column' : 'row', ({
+  vertical
+}) => vertical ? 'auto' : '1', ({
+  vertical,
+  isQuizGroupType,
+  isLongPassage
+}) => !isLongPassage && !vertical && !isQuizGroupType ? `${MAX_CONTENT_WIDTH}` : 'unset', StyledMaterialQuizInfo, ({
+  vertical
+}) => vertical ? 'auto' : '100%', ({
+  vertical
+}) => vertical ? 'intial' : 'auto');
+const MaterialQuiz = () => {
+  const {
+    materialQuiz,
+    vertical,
+    course,
+    isLongPassage,
+    isInitialLoading
+  } = MaterialQuizContext.useMaterialQuizState();
+  const {
+    setVertical
+  } = MaterialQuizContext.useMaterialQuizDispatch();
+  const [ref, {
+    width
+  }] = reactUse.useMeasure();
+  const isQuizGroupType = Boolean((materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.optionType) === types.enums.QuizOptionType.Group);
+  const isFetchingData = !materialQuiz || !course;
+  const isLoadingLayout = isFetchingData || isInitialLoading;
+  const isVisibleSideBySide = !vertical && isLongPassage;
+  const isRenderQuestionWithPassage = (vertical || !isLongPassage || isQuizGroupType) && !!materialQuiz;
+  React.useEffect(() => {
     if (width > 0) {
       setVertical(width <= designTokens.base.screen.medium);
     }
   }, [width, setVertical]);
-  var renderQuestionOption = function renderQuestionOption() {
+  const renderQuestionOption = () => {
     if (isFetchingData) {
       return null;
     }
     switch (materialQuiz.optionType) {
       case types.enums.QuizOptionType.SelectOne:
-        return jsxRuntime.jsx(AsyncMaterialQuizSelectOne, {
+        return React.createElement(AsyncMaterialQuizSelectOne, {
           hasInlinePassage: isRenderQuestionWithPassage
         });
       case types.enums.QuizOptionType.SelectMultiple:
-        return jsxRuntime.jsx(AsyncMaterialQuizSelectMultiple, {
+        return React.createElement(AsyncMaterialQuizSelectMultiple, {
           hasInlinePassage: isRenderQuestionWithPassage
         });
       case types.enums.QuizOptionType.Text:
-        return jsxRuntime.jsx(AsyncMaterialQuizText, {
+        return React.createElement(AsyncMaterialQuizText, {
           hasInlinePassage: isRenderQuestionWithPassage
         });
       case types.enums.QuizOptionType.SelectMultipleOrder:
-        return jsxRuntime.jsx(AsyncMaterialQuizSelectMultipleOrder, {
+        return React.createElement(AsyncMaterialQuizSelectMultipleOrder, {
           hasInlinePassage: isRenderQuestionWithPassage
         });
       case types.enums.QuizOptionType.Group:
-        return jsxRuntime.jsx(AsyncMaterialQuizGroup, {});
+        return React.createElement(AsyncMaterialQuizGroup, null);
     }
   };
-  return jsxRuntime.jsx(React__default.default.Suspense, {
-    fallback: null,
-    children: jsxRuntime.jsxs(StyledMaterialQuizWrapper, {
-      ref: ref,
-      vertical: vertical,
-      isQuizGroupType: isQuizGroupType,
-      isLongPassage: isLongPassage,
-      children: [isLoadingLayout && jsxRuntime.jsx(LoadingContainer, {
-        children: jsxRuntime.jsx(MaterialQuizShimmer.default, {})
-      }), isVisibleSideBySide && jsxRuntime.jsx(StyledMaterialQuizInfo, {
-        children: jsxRuntime.jsx(MaterialQuizInfo.default, {})
-      }), jsxRuntime.jsx(StyledMaterialQuizContent, {
-        id: element.MATERIAL_QUIZ_CONTAINER_ID,
-        vertical: vertical,
-        children: renderQuestionOption()
-      })]
-    })
-  });
+  return React.createElement(React.Suspense, {
+    fallback: null
+  }, React.createElement(StyledMaterialQuizWrapper, {
+    ref: ref,
+    vertical: vertical,
+    isQuizGroupType: isQuizGroupType,
+    isLongPassage: isLongPassage
+  }, isLoadingLayout && React.createElement(LoadingContainer, null, React.createElement(MaterialQuizShimmer.default, null)), isVisibleSideBySide && React.createElement(StyledMaterialQuizInfo, null, React.createElement(MaterialQuizInfo.default, null)), React.createElement(StyledMaterialQuizContent, {
+    id: element.MATERIAL_QUIZ_CONTAINER_ID,
+    vertical: vertical
+  }, renderQuestionOption())));
 };
-var MaterialQuizContainer = function MaterialQuizContainer(_ref7) {
-  var materialQuizId = _ref7.materialQuizId,
-    userId = _ref7.userId,
-    onDirty = _ref7.onDirty,
-    onSubmit = _ref7.onSubmit,
-    onNext = _ref7.onNext,
-    __intl = _ref7.__intl;
-  return jsxRuntime.jsx(intl.RawEliceIntlProvider, {
-    value: __intl,
-    children: jsxRuntime.jsx(material.ThemeProvider, {
-      theme: eliceTheme,
-      children: jsxRuntime.jsx(MaterialQuizContext.MaterialQuizProvider, {
-        materialQuizId: materialQuizId,
-        userId: userId,
-        onDirty: onDirty,
-        onSubmit: onSubmit,
-        onNext: onNext,
-        children: jsxRuntime.jsx(MaterialQuiz, {})
-      })
-    })
-  });
+const MaterialQuizContainer = ({
+  materialQuizId,
+  userId,
+  onDirty,
+  onSubmit,
+  onNext,
+  __intl
+}) => {
+  return React.createElement(intl.RawEliceIntlProvider, {
+    value: __intl
+  }, React.createElement(material.ThemeProvider, {
+    theme: eliceTheme
+  }, React.createElement(MaterialQuizContext.MaterialQuizProvider, {
+    materialQuizId: materialQuizId,
+    userId: userId,
+    onDirty: onDirty,
+    onSubmit: onSubmit,
+    onNext: onNext
+  }, React.createElement(MaterialQuiz, null))));
 };
 var MaterialQuiz$1 = new intl.IntlComponentBuilder(MaterialQuizContainer).add('en', en.default).add('ko', ko.default).addAsync('th', Promise.resolve().then(function () { return require('./locales/th.json.js'); })).addAsync('ja', Promise.resolve().then(function () { return require('./locales/ja.json.js'); })).build();
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
 var intl = require('@elice/intl');
@@ -12,49 +12,42 @@ var wysiwyg = require('@elice/wysiwyg');
 var styled = require('styled-components');
 var MaterialQuizContext = require('./context/MaterialQuizContext.js');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-var StyledMarkdownSSR = styled__default.default(markdown.MarkdownSSR).withConfig({
+const StyledMarkdownSSR = styled(markdown.MarkdownSSR).withConfig({
   componentId: "sc-18kg5i5-0"
 })(["p{margin:0 !important;}", ""], wysiwyg.EliceWysiwygEditorTheme.resetMarkdownSSR);
-var StyledAccordion = styled__default.default(blocks.Accordion).withConfig({
+const StyledAccordion = styled(blocks.Accordion).withConfig({
   componentId: "sc-18kg5i5-1"
 })(["border-radius:8px;overflow:hidden;background-color:", " !important;border-radius:8px;overflow:hidden;& > *:first-child{background-color:", " !important;}& > *:last-child{background-color:", " !important;}"], designTokens.base.color.navy5, designTokens.base.color.navy7, designTokens.base.color.navy7);
-var MaterialQuizAnswerExplanation = function MaterialQuizAnswerExplanation() {
-  var _useMaterialQuizState = MaterialQuizContext.useMaterialQuizState(),
-    lecture = _useMaterialQuizState.lecture,
-    materialQuiz = _useMaterialQuizState.materialQuiz;
-  var intl$1 = intl.useRawEliceIntl();
+const MaterialQuizAnswerExplanation = () => {
+  const {
+    lecture,
+    materialQuiz
+  } = MaterialQuizContext.useMaterialQuizState();
+  const 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;
   }
-  return jsxRuntime.jsx(blocks.Flex, {
+  return React.createElement(blocks.Flex, {
     column: true,
-    margintop: "1rem",
-    children: jsxRuntime.jsx(StyledAccordion, {
-      dark: true,
-      header: jsxRuntime.jsx(blocks.Text, {
-        bold: true,
-        role: "navy0",
-        children: intl$1.formatMessage({
-          id: 'materialQuiz.explanation.show'
-        })
-      }),
-      children: materialQuiz.explanationInfo.isEnabled ? jsxRuntime.jsx(StyledMarkdownSSR, {
-        dark: true,
-        children: materialQuiz.explanationInfo.value
-      }) : jsxRuntime.jsx(blocks.Text, {
-        role: "info",
-        lineHeight: 1.4,
-        userSelect: "none",
-        children: intl$1.formatMessage({
-          id: 'materialQuiz.explanation.empty'
-        })
-      })
-    })
-  });
+    margintop: "1rem"
+  }, React.createElement(StyledAccordion, {
+    dark: true,
+    header: React.createElement(blocks.Text, {
+      bold: true,
+      role: "navy0"
+    }, intl$1.formatMessage({
+      id: 'materialQuiz.explanation.show'
+    }))
+  }, materialQuiz.explanationInfo.isEnabled ? React.createElement(StyledMarkdownSSR, {
+    dark: true,
+    children: materialQuiz.explanationInfo.value
+  }) : React.createElement(blocks.Text, {
+    role: "info",
+    lineHeight: 1.4,
+    userSelect: "none"
+  }, intl$1.formatMessage({
+    id: 'materialQuiz.explanation.empty'
+  }))));
 };
 
 exports.default = MaterialQuizAnswerExplanation;