@elice/material-quiz 1.230629.1 → 1.230705.1

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

@@ -64,7 +64,8 @@ var StyledMaterialQuizWrapper = styled__default["default"].div.withConfig({
 var MaterialQuiz = function MaterialQuiz() {
   var _useMaterialQuizState = MaterialQuizContext.useMaterialQuizState(),
     materialQuiz = _useMaterialQuizState.materialQuiz,
-    vertical = _useMaterialQuizState.vertical;
+    vertical = _useMaterialQuizState.vertical,
+    course = _useMaterialQuizState.course;
   var _useMaterialQuizDispa = MaterialQuizContext.useMaterialQuizDispatch(),
     setVertical = _useMaterialQuizDispa.setVertical;
   var _useMeasure = reactUse.useMeasure(),
@@ -77,33 +78,29 @@ var MaterialQuiz = function MaterialQuiz() {
       setVertical(width <= designTokens.base.screen.medium);
     }
   }, [width, setVertical]);
-  var Component = null;
-  switch (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.optionType) {
-    case types.enums.QuizOptionType.SelectOne:
-      Component = React__default["default"].createElement(AsyncMaterialQuizSelectOne, null);
-      break;
-    case types.enums.QuizOptionType.SelectMultiple:
-      Component = React__default["default"].createElement(AsyncMaterialQuizSelectMultiple, null);
-      break;
-    case types.enums.QuizOptionType.Text:
-      Component = React__default["default"].createElement(AsyncMaterialQuizText, null);
-      break;
-    case types.enums.QuizOptionType.SelectMultipleOrder:
-      Component = React__default["default"].createElement(AsyncMaterialQuizSelectMultipleOrder, null);
-      break;
-    case types.enums.QuizOptionType.Group:
-      Component = React__default["default"].createElement(AsyncMaterialQuizGroup, null);
-      break;
-    default:
-      Component = React__default["default"].createElement(MaterialQuizShimmer["default"], null);
-      break;
-  }
+  var renderQuestionOption = function renderQuestionOption() {
+    if (!materialQuiz || !course) {
+      return React__default["default"].createElement(MaterialQuizShimmer["default"], null);
+    }
+    switch (materialQuiz.optionType) {
+      case types.enums.QuizOptionType.SelectOne:
+        return React__default["default"].createElement(AsyncMaterialQuizSelectOne, null);
+      case types.enums.QuizOptionType.SelectMultiple:
+        return React__default["default"].createElement(AsyncMaterialQuizSelectMultiple, null);
+      case types.enums.QuizOptionType.Text:
+        return React__default["default"].createElement(AsyncMaterialQuizText, null);
+      case types.enums.QuizOptionType.SelectMultipleOrder:
+        return React__default["default"].createElement(AsyncMaterialQuizSelectMultipleOrder, null);
+      case types.enums.QuizOptionType.Group:
+        return React__default["default"].createElement(AsyncMaterialQuizGroup, null);
+    }
+  };
   return React__default["default"].createElement(React__default["default"].Suspense, {
     fallback: null
   }, React__default["default"].createElement(StyledMaterialQuizWrapper, {
     ref: ref,
     vertical: vertical
-  }, isQuizGroupType ? null : React__default["default"].createElement(StyledMaterialQuizInfo, null, React__default["default"].createElement(MaterialQuizInfo["default"], null)), React__default["default"].createElement(StyledMaterialQuizContent, null, Component)));
+  }, isQuizGroupType ? null : React__default["default"].createElement(StyledMaterialQuizInfo, null, React__default["default"].createElement(MaterialQuizInfo["default"], null)), React__default["default"].createElement(StyledMaterialQuizContent, null, renderQuestionOption())));
 };
 var MaterialQuizContainer = function MaterialQuizContainer(_ref7) {
   var materialQuizId = _ref7.materialQuizId,

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

@@ -211,7 +211,7 @@ var MaterialQuizSelectMultiple = function MaterialQuizSelectMultiple() {
     onSelect: handleAnswerSelect,
     selectedOptions: selectedAnswer,
     disabled: submitStatus === 'pending' || index.checkUserLectureTestEnded(lecture) || !!userId
-  }, (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.options) ? materialQuiz.options.map(function (option, index$1) {
+  }, (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.options) && course ? materialQuiz.options.map(function (option, index$1) {
     var _a;
     var getIsSelected = function getIsSelected(index, materialQuizResponse) {
       var _a;
@@ -232,11 +232,11 @@ var MaterialQuizSelectMultiple = function MaterialQuizSelectMultiple() {
       value: index$1,
       status: status,
       isAnswer: !!userId && Array.isArray(materialQuizAnswerInfo) && materialQuizAnswerInfo.includes(index$1)
-    }, (course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions) ? React__default["default"].createElement(StyledMarkdown["default"], {
+    }, course.preference.renderMarkdownInQuizOptions ? React__default["default"].createElement(StyledMarkdown["default"], {
       children: (_a = option === null || option === void 0 ? void 0 : option.content) !== null && _a !== void 0 ? _a : '',
       paddingx: 0,
       paddingy: 0,
-      dark: false
+      dark: true
     }) : option === null || option === void 0 ? void 0 : option.content);
   }) : null));
 };

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

@@ -200,7 +200,7 @@ var MaterialQuizSelectOne = function MaterialQuizSelectOne() {
     selectedValue: selectedAnswer,
     onSelect: handleAnswerSelect,
     disabled: submitStatus === 'pending' || index.checkUserLectureTestEnded(lecture) || !!userId
-  }, materialQuiz.options ? materialQuiz.options.map(function (option, index$1) {
+  }, materialQuiz.options && course ? materialQuiz.options.map(function (option, index$1) {
     var _a, _b;
     var getIsSelected = function getIsSelected(index, materialQuizResponse) {
       var _a;
@@ -221,11 +221,11 @@ var MaterialQuizSelectOne = function MaterialQuizSelectOne() {
       value: index$1,
       status: status,
       isAnswer: (_a = !!userId && Array.isArray(materialQuizAnswerInfo) && materialQuizAnswerInfo.includes(index$1)) !== null && _a !== void 0 ? _a : false
-    }, (course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions) ? React__default["default"].createElement(StyledMarkdown["default"], {
+    }, course.preference.renderMarkdownInQuizOptions ? React__default["default"].createElement(StyledMarkdown["default"], {
       children: (_b = option === null || option === void 0 ? void 0 : option.content) !== null && _b !== void 0 ? _b : '',
       paddingx: 0,
       paddingy: 0,
-      dark: false
+      dark: true
     }) : option === null || option === void 0 ? void 0 : option.content);
   }) : null) : null);
 };

package/cjs/components/shared/question-checkbox/QuestionCheckboxOption.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var designTokens = require('@elice/design-tokens');
 var styled = require('styled-components');
+var getQuestionStatusStyle = require('../utils/getQuestionStatusStyle.js');
 var QuestionCheckboxContext = require('./QuestionCheckboxContext.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -90,34 +91,12 @@ var StyledQuestionCheckboxInput = styled__default["default"].input.withConfig({
 });
 var StyledLabel = styled__default["default"].label.withConfig({
   componentId: "sc-1erloup-3"
-})(["word-break:break-all;margin-right:0.875rem;font-size:", ";line-height:24px;color:", ";& p{color:", ";}"], designTokens.base.size.body3, function (_ref7) {
-  var checked = _ref7.checked,
-    status = _ref7.status;
-  switch (status) {
-    case 'correct':
-      return designTokens.base.color.green9;
-    case 'wrong':
-      return designTokens.base.color.red9;
-    default:
-      return checked ? designTokens.base.color.primary6 : designTokens.base.color.navy0;
-  }
-}, function (_ref8) {
-  var checked = _ref8.checked,
-    status = _ref8.status;
-  switch (status) {
-    case 'correct':
-      return designTokens.base.color.green9;
-    case 'wrong':
-      return designTokens.base.color.red9;
-    default:
-      return checked ? designTokens.base.color.primary6 : designTokens.base.color.navy0;
-  }
-});
-var QuestionCheckboxOption = React__default["default"].memo(function (_ref9) {
-  var value = _ref9.value,
-    status = _ref9.status,
-    isAnswer = _ref9.isAnswer,
-    children = _ref9.children;
+})(["word-break:break-all;margin-right:0.875rem;font-size:", ";line-height:24px;", ""], designTokens.base.size.body3, getQuestionStatusStyle.getQuestionStatusStyle());
+var QuestionCheckboxOption = React__default["default"].memo(function (_ref7) {
+  var value = _ref7.value,
+    status = _ref7.status,
+    isAnswer = _ref7.isAnswer,
+    children = _ref7.children;
   var _useQuestionCheckboxC = QuestionCheckboxContext.useQuestionCheckboxContext(),
     selectedOptions = _useQuestionCheckboxC.selectedOptions,
     disabled = _useQuestionCheckboxC.disabled,

package/cjs/components/shared/question-radio/QuestionRadioOption.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var designTokens = require('@elice/design-tokens');
 var styled = require('styled-components');
+var getQuestionStatusStyle = require('../utils/getQuestionStatusStyle.js');
 var QuestionRadioContext = require('./QuestionRadioContext.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -14,7 +15,7 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var StyledQuestionRadioOption = styled__default["default"].div.withConfig({
   componentId: "sc-cy66me-0"
-})(["display:flex;align-items:center;padding:0.875rem 1rem;border-radius:8px;background-color:", ";&:not(:last-of-type){margin-bottom:1rem;}&:hover,& *:hover{cursor:", ";}", ""], function (_ref) {
+})(["display:flex;align-items:center;padding:0.875rem 1rem;border-radius:8px;background-color:", ";overflow-x:auto;&:not(:last-of-type){margin-bottom:1rem;}&:hover,& *:hover{cursor:", ";}", ""], function (_ref) {
   var checked = _ref.checked,
     status = _ref.status;
   switch (status) {
@@ -66,34 +67,12 @@ var StyledQuestionRadioInput = styled__default["default"].input.withConfig({
 });
 var StyledLabel = styled__default["default"].label.withConfig({
   componentId: "sc-cy66me-2"
-})(["word-break:break-all;margin-right:0.875rem;font-size:", ";line-height:24px;color:", ";& p{color:", ";}"], designTokens.base.size.body3, function (_ref6) {
-  var checked = _ref6.checked,
-    status = _ref6.status;
-  switch (status) {
-    case 'correct':
-      return designTokens.base.color.green9;
-    case 'wrong':
-      return designTokens.base.color.red9;
-    default:
-      return checked ? designTokens.base.color.primary6 : designTokens.base.color.navy0;
-  }
-}, function (_ref7) {
-  var checked = _ref7.checked,
-    status = _ref7.status;
-  switch (status) {
-    case 'correct':
-      return designTokens.base.color.green9;
-    case 'wrong':
-      return designTokens.base.color.red9;
-    default:
-      return checked ? designTokens.base.color.primary6 : designTokens.base.color.navy0;
-  }
-});
-var QuestionRadioOption = React__default["default"].memo(function (_ref8) {
-  var value = _ref8.value,
-    status = _ref8.status,
-    isAnswer = _ref8.isAnswer,
-    children = _ref8.children;
+})(["word-break:break-all;margin-right:0.875rem;font-size:", ";line-height:24px;", ""], designTokens.base.size.body3, getQuestionStatusStyle.getQuestionStatusStyle());
+var QuestionRadioOption = React__default["default"].memo(function (_ref6) {
+  var value = _ref6.value,
+    status = _ref6.status,
+    isAnswer = _ref6.isAnswer,
+    children = _ref6.children;
   var _useQuestionRadioCont = QuestionRadioContext.useQuestionRadioContext(),
     selectedValue = _useQuestionRadioCont.selectedValue,
     disabled = _useQuestionRadioCont.disabled,

package/cjs/components/shared/utils/getQuestionStatusStyle.d.ts

@@ -0,0 +1,10 @@
+declare type Status = 'correct' | 'wrong' | 'answer';
+interface QuestionValues {
+    checked: boolean;
+    status?: Status;
+}
+/**
+ * Get shared question custom style depend on checked, status values.
+ */
+export declare function getQuestionStatusStyle(): import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<QuestionValues, any>>;
+export {};

package/cjs/components/shared/utils/getQuestionStatusStyle.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var designTokens = require('@elice/design-tokens');
+var styled = require('styled-components');
+
+/**
+ * Get shared question custom style depend on checked, status values.
+ */
+function getQuestionStatusStyle() {
+  return styled.css(["&,& p,& p.elicemd.elicemd--theme-dark{color:", ";}"], function (_ref) {
+    var checked = _ref.checked,
+      status = _ref.status;
+    switch (status) {
+      case 'correct':
+        return designTokens.base.color.green9;
+      case 'wrong':
+        return designTokens.base.color.red9;
+      default:
+        return checked ? designTokens.base.color.primary6 : designTokens.base.color.navy0;
+    }
+  });
+}
+
+exports.getQuestionStatusStyle = getQuestionStatusStyle;

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

@@ -56,7 +56,8 @@ var StyledMaterialQuizWrapper = styled.div.withConfig({
 var MaterialQuiz = function MaterialQuiz() {
   var _useMaterialQuizState = useMaterialQuizState(),
     materialQuiz = _useMaterialQuizState.materialQuiz,
-    vertical = _useMaterialQuizState.vertical;
+    vertical = _useMaterialQuizState.vertical,
+    course = _useMaterialQuizState.course;
   var _useMaterialQuizDispa = useMaterialQuizDispatch(),
     setVertical = _useMaterialQuizDispa.setVertical;
   var _useMeasure = useMeasure(),
@@ -69,33 +70,29 @@ var MaterialQuiz = function MaterialQuiz() {
       setVertical(width <= base.screen.medium);
     }
   }, [width, setVertical]);
-  var Component = null;
-  switch (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.optionType) {
-    case enums.QuizOptionType.SelectOne:
-      Component = React.createElement(AsyncMaterialQuizSelectOne, null);
-      break;
-    case enums.QuizOptionType.SelectMultiple:
-      Component = React.createElement(AsyncMaterialQuizSelectMultiple, null);
-      break;
-    case enums.QuizOptionType.Text:
-      Component = React.createElement(AsyncMaterialQuizText, null);
-      break;
-    case enums.QuizOptionType.SelectMultipleOrder:
-      Component = React.createElement(AsyncMaterialQuizSelectMultipleOrder, null);
-      break;
-    case enums.QuizOptionType.Group:
-      Component = React.createElement(AsyncMaterialQuizGroup, null);
-      break;
-    default:
-      Component = React.createElement(MaterialQuizShimmer, null);
-      break;
-  }
+  var renderQuestionOption = function renderQuestionOption() {
+    if (!materialQuiz || !course) {
+      return React.createElement(MaterialQuizShimmer, null);
+    }
+    switch (materialQuiz.optionType) {
+      case enums.QuizOptionType.SelectOne:
+        return React.createElement(AsyncMaterialQuizSelectOne, null);
+      case enums.QuizOptionType.SelectMultiple:
+        return React.createElement(AsyncMaterialQuizSelectMultiple, null);
+      case enums.QuizOptionType.Text:
+        return React.createElement(AsyncMaterialQuizText, null);
+      case enums.QuizOptionType.SelectMultipleOrder:
+        return React.createElement(AsyncMaterialQuizSelectMultipleOrder, null);
+      case enums.QuizOptionType.Group:
+        return React.createElement(AsyncMaterialQuizGroup, null);
+    }
+  };
   return React.createElement(React.Suspense, {
     fallback: null
   }, React.createElement(StyledMaterialQuizWrapper, {
     ref: ref,
     vertical: vertical
-  }, isQuizGroupType ? null : React.createElement(StyledMaterialQuizInfo, null, React.createElement(MaterialQuizInfo, null)), React.createElement(StyledMaterialQuizContent, null, Component)));
+  }, isQuizGroupType ? null : React.createElement(StyledMaterialQuizInfo, null, React.createElement(MaterialQuizInfo, null)), React.createElement(StyledMaterialQuizContent, null, renderQuestionOption())));
 };
 var MaterialQuizContainer = function MaterialQuizContainer(_ref7) {
   var materialQuizId = _ref7.materialQuizId,

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

@@ -203,7 +203,7 @@ var MaterialQuizSelectMultiple = function MaterialQuizSelectMultiple() {
     onSelect: handleAnswerSelect,
     selectedOptions: selectedAnswer,
     disabled: submitStatus === 'pending' || checkUserLectureTestEnded(lecture) || !!userId
-  }, (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.options) ? materialQuiz.options.map(function (option, index) {
+  }, (materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.options) && course ? materialQuiz.options.map(function (option, index) {
     var _a;
     var getIsSelected = function getIsSelected(index, materialQuizResponse) {
       var _a;
@@ -224,11 +224,11 @@ var MaterialQuizSelectMultiple = function MaterialQuizSelectMultiple() {
       value: index,
       status: status,
       isAnswer: !!userId && Array.isArray(materialQuizAnswerInfo) && materialQuizAnswerInfo.includes(index)
-    }, (course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions) ? React.createElement(StyledMarkdown, {
+    }, course.preference.renderMarkdownInQuizOptions ? React.createElement(StyledMarkdown, {
       children: (_a = option === null || option === void 0 ? void 0 : option.content) !== null && _a !== void 0 ? _a : '',
       paddingx: 0,
       paddingy: 0,
-      dark: false
+      dark: true
     }) : option === null || option === void 0 ? void 0 : option.content);
   }) : null));
 };

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

@@ -192,7 +192,7 @@ var MaterialQuizSelectOne = function MaterialQuizSelectOne() {
     selectedValue: selectedAnswer,
     onSelect: handleAnswerSelect,
     disabled: submitStatus === 'pending' || checkUserLectureTestEnded(lecture) || !!userId
-  }, materialQuiz.options ? materialQuiz.options.map(function (option, index) {
+  }, materialQuiz.options && course ? materialQuiz.options.map(function (option, index) {
     var _a, _b;
     var getIsSelected = function getIsSelected(index, materialQuizResponse) {
       var _a;
@@ -213,11 +213,11 @@ var MaterialQuizSelectOne = function MaterialQuizSelectOne() {
       value: index,
       status: status,
       isAnswer: (_a = !!userId && Array.isArray(materialQuizAnswerInfo) && materialQuizAnswerInfo.includes(index)) !== null && _a !== void 0 ? _a : false
-    }, (course === null || course === void 0 ? void 0 : course.preference.renderMarkdownInQuizOptions) ? React.createElement(StyledMarkdown, {
+    }, course.preference.renderMarkdownInQuizOptions ? React.createElement(StyledMarkdown, {
       children: (_b = option === null || option === void 0 ? void 0 : option.content) !== null && _b !== void 0 ? _b : '',
       paddingx: 0,
       paddingy: 0,
-      dark: false
+      dark: true
     }) : option === null || option === void 0 ? void 0 : option.content);
   }) : null) : null);
 };

package/es/components/shared/question-checkbox/QuestionCheckboxOption.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
+import { getQuestionStatusStyle } from '../utils/getQuestionStatusStyle.js';
 import { useQuestionCheckboxContext } from './QuestionCheckboxContext.js';
 
 var StyledQuestionCheckboxOption = styled.div.withConfig({
@@ -81,34 +82,12 @@ var StyledQuestionCheckboxInput = styled.input.withConfig({
 });
 var StyledLabel = styled.label.withConfig({
   componentId: "sc-1erloup-3"
-})(["word-break:break-all;margin-right:0.875rem;font-size:", ";line-height:24px;color:", ";& p{color:", ";}"], base.size.body3, function (_ref7) {
-  var checked = _ref7.checked,
-    status = _ref7.status;
-  switch (status) {
-    case 'correct':
-      return base.color.green9;
-    case 'wrong':
-      return base.color.red9;
-    default:
-      return checked ? base.color.primary6 : base.color.navy0;
-  }
-}, function (_ref8) {
-  var checked = _ref8.checked,
-    status = _ref8.status;
-  switch (status) {
-    case 'correct':
-      return base.color.green9;
-    case 'wrong':
-      return base.color.red9;
-    default:
-      return checked ? base.color.primary6 : base.color.navy0;
-  }
-});
-var QuestionCheckboxOption = React.memo(function (_ref9) {
-  var value = _ref9.value,
-    status = _ref9.status,
-    isAnswer = _ref9.isAnswer,
-    children = _ref9.children;
+})(["word-break:break-all;margin-right:0.875rem;font-size:", ";line-height:24px;", ""], base.size.body3, getQuestionStatusStyle());
+var QuestionCheckboxOption = React.memo(function (_ref7) {
+  var value = _ref7.value,
+    status = _ref7.status,
+    isAnswer = _ref7.isAnswer,
+    children = _ref7.children;
   var _useQuestionCheckboxC = useQuestionCheckboxContext(),
     selectedOptions = _useQuestionCheckboxC.selectedOptions,
     disabled = _useQuestionCheckboxC.disabled,

package/es/components/shared/question-radio/QuestionRadioOption.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
+import { getQuestionStatusStyle } from '../utils/getQuestionStatusStyle.js';
 import { useQuestionRadioContext } from './QuestionRadioContext.js';
 
 var StyledQuestionRadioOption = styled.div.withConfig({
   componentId: "sc-cy66me-0"
-})(["display:flex;align-items:center;padding:0.875rem 1rem;border-radius:8px;background-color:", ";&:not(:last-of-type){margin-bottom:1rem;}&:hover,& *:hover{cursor:", ";}", ""], function (_ref) {
+})(["display:flex;align-items:center;padding:0.875rem 1rem;border-radius:8px;background-color:", ";overflow-x:auto;&:not(:last-of-type){margin-bottom:1rem;}&:hover,& *:hover{cursor:", ";}", ""], function (_ref) {
   var checked = _ref.checked,
     status = _ref.status;
   switch (status) {
@@ -57,34 +58,12 @@ var StyledQuestionRadioInput = styled.input.withConfig({
 });
 var StyledLabel = styled.label.withConfig({
   componentId: "sc-cy66me-2"
-})(["word-break:break-all;margin-right:0.875rem;font-size:", ";line-height:24px;color:", ";& p{color:", ";}"], base.size.body3, function (_ref6) {
-  var checked = _ref6.checked,
-    status = _ref6.status;
-  switch (status) {
-    case 'correct':
-      return base.color.green9;
-    case 'wrong':
-      return base.color.red9;
-    default:
-      return checked ? base.color.primary6 : base.color.navy0;
-  }
-}, function (_ref7) {
-  var checked = _ref7.checked,
-    status = _ref7.status;
-  switch (status) {
-    case 'correct':
-      return base.color.green9;
-    case 'wrong':
-      return base.color.red9;
-    default:
-      return checked ? base.color.primary6 : base.color.navy0;
-  }
-});
-var QuestionRadioOption = React.memo(function (_ref8) {
-  var value = _ref8.value,
-    status = _ref8.status,
-    isAnswer = _ref8.isAnswer,
-    children = _ref8.children;
+})(["word-break:break-all;margin-right:0.875rem;font-size:", ";line-height:24px;", ""], base.size.body3, getQuestionStatusStyle());
+var QuestionRadioOption = React.memo(function (_ref6) {
+  var value = _ref6.value,
+    status = _ref6.status,
+    isAnswer = _ref6.isAnswer,
+    children = _ref6.children;
   var _useQuestionRadioCont = useQuestionRadioContext(),
     selectedValue = _useQuestionRadioCont.selectedValue,
     disabled = _useQuestionRadioCont.disabled,

package/es/components/shared/utils/getQuestionStatusStyle.d.ts

@@ -0,0 +1,10 @@
+declare type Status = 'correct' | 'wrong' | 'answer';
+interface QuestionValues {
+    checked: boolean;
+    status?: Status;
+}
+/**
+ * Get shared question custom style depend on checked, status values.
+ */
+export declare function getQuestionStatusStyle(): import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<QuestionValues, any>>;
+export {};

package/es/components/shared/utils/getQuestionStatusStyle.js

@@ -0,0 +1,22 @@
+import { base } from '@elice/design-tokens';
+import { css } from 'styled-components';
+
+/**
+ * Get shared question custom style depend on checked, status values.
+ */
+function getQuestionStatusStyle() {
+  return css(["&,& p,& p.elicemd.elicemd--theme-dark{color:", ";}"], function (_ref) {
+    var checked = _ref.checked,
+      status = _ref.status;
+    switch (status) {
+      case 'correct':
+        return base.color.green9;
+      case 'wrong':
+        return base.color.red9;
+      default:
+        return checked ? base.color.primary6 : base.color.navy0;
+    }
+  });
+}
+
+export { getQuestionStatusStyle };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-quiz",
-  "version": "1.230629.1",
+  "version": "1.230705.1",
   "description": "User view and editing components of Elice material quiz",
   "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
   "license": "UNLICENSED",
@@ -58,8 +58,8 @@
     "@elice/icons": "^1.220803.0",
     "@elice/icons-legacy": "npm:@elice/icons@0.220803.1",
     "@elice/markdown": "^1.220803.0",
-    "@elice/material-shared-types": "1.230629.1",
-    "@elice/material-shared-utils": "1.230629.1",
+    "@elice/material-shared-types": "1.230705.1",
+    "@elice/material-shared-utils": "1.230705.1",
     "@elice/types": "^1.230629.0",
     "@types/classnames": "^2.3.1",
     "@types/jquery": "^3.5.13",
@@ -73,5 +73,5 @@
     "react-use": "^17.2.4",
     "styled-components": "^5.3.0"
   },
-  "gitHead": "61c8c138a1361e5e8a081157fd2e7837fc39fbf3"
+  "gitHead": "4660ca8beabc64bd82b64187ab5e684a1d5eeb11"
 }