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

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

@@ -2,6 +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');
@@ -13,141 +14,174 @@ var MaterialQuizContext = require('../context/MaterialQuizContext.js');
 var context = require('./context/context.js');
 var MaterialQuizGroupOptionItem = require('./MaterialQuizGroupOptionItem.js');
 
-const QUIZ_OPTIONS_CONTENT_WIDTH = 534;
-const StyledQuizAnswerWrapper = styled.div.withConfig({
+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 QUIZ_OPTIONS_CONTENT_WIDTH = 534;
+var StyledQuizAnswerWrapper = styled__default.default.div.withConfig({
   componentId: "sc-18trt81-0"
 })(["display:flex;flex-direction:column;flex:0 0 calc((100% - ", "px) / 2);"], QUIZ_OPTIONS_CONTENT_WIDTH);
-const StyledQuizAnswerDropzoneWrapper = styled.div.withConfig({
+var StyledQuizAnswerDropzoneWrapper = styled__default.default.div.withConfig({
   componentId: "sc-18trt81-1"
 })(["padding:1rem;border-radius:0.5rem;background:", ";&:not(:last-child){margin-bottom:1rem;}"], designTokens.base.color.white);
-const StyledQuizAnswerDropzone = styled(EbDroppable.default).withConfig({
+var StyledQuizAnswerDropzone = styled__default.default(EbDroppable.default).withConfig({
   componentId: "sc-18trt81-2"
-})(["display:flex;flex-wrap:wrap;gap:0.5rem;justify-content:", ";align-items:", ";min-width:12.5rem;min-height:16.25rem;padding:0.5rem;border-radius:0.5rem;background:", ";text-align:center;outline:1px dashed ", ";&.ui-droppable-hover{outline:1px dashed ", ";}"], ({
-  isGroupAnswer
-}) => isGroupAnswer ? 'flex-start' : 'center', ({
-  isGroupAnswer
-}) => isGroupAnswer ? 'flex-start' : 'center', designTokens.base.color.gray1, designTokens.base.color.gray3, designTokens.base.color.navy4);
-const StyledQuizOptions = styled.div.withConfig({
+})(["display:flex;flex-wrap:wrap;gap:0.5rem;justify-content:", ";align-items:", ";min-width:12.5rem;min-height:16.25rem;padding:0.5rem;border-radius:0.5rem;background:", ";text-align:center;outline:1px dashed ", ";&.ui-droppable-hover{outline:1px dashed ", ";}"], function (_ref) {
+  var isGroupAnswer = _ref.isGroupAnswer;
+  return isGroupAnswer ? 'flex-start' : 'center';
+}, function (_ref2) {
+  var isGroupAnswer = _ref2.isGroupAnswer;
+  return isGroupAnswer ? 'flex-start' : 'center';
+}, designTokens.base.color.gray1, designTokens.base.color.gray3, designTokens.base.color.navy4);
+var StyledQuizOptions = styled__default.default.div.withConfig({
   componentId: "sc-18trt81-3"
 })(["display:flex;flex-direction:column;width:26.125rem;height:fit-content;padding:1rem;background-color:", ";border-radius:0.5rem;outline:1px dashed ", ";"], designTokens.base.color.navy6, designTokens.base.color.navy4);
-const StyledQuizOptionsDropzone = styled(EbDroppable.default).withConfig({
+var StyledQuizOptionsDropzone = styled__default.default(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$1 = intl.useRawEliceIntl();
-  const {
-    userId
-  } = MaterialQuizContext.useMaterialQuizState();
-  const {
-    groupList,
-    currentAnswerList,
-    currentOptionList,
-    updateCurrentAnswer,
-    updateCurrentOption,
-    handleAnswerReset
-  } = React.useContext(context.default);
+var MaterialQuizGroupDesktop = function MaterialQuizGroupDesktop() {
+  var intl$1 = intl.useRawEliceIntl();
+  var _useMaterialQuizState = MaterialQuizContext.useMaterialQuizState(),
+    userId = _useMaterialQuizState.userId;
+  var _React$useContext = React__default.default.useContext(context.default),
+    groupList = _React$useContext.groupList,
+    currentAnswerList = _React$useContext.currentAnswerList,
+    currentOptionList = _React$useContext.currentOptionList,
+    updateCurrentAnswer = _React$useContext.updateCurrentAnswer,
+    updateCurrentOption = _React$useContext.updateCurrentOption,
+    handleAnswerReset = _React$useContext.handleAnswerReset;
   /**
    *
    */
-  const renderQuizContentSortation = () => {
-    return React.createElement(blocks.Flex, {
+  var renderQuizContentSortation = function renderQuizContentSortation() {
+    return jsxRuntime.jsx(blocks.Flex, {
       align: "center",
-      margin: "0 1.25rem"
-    }, React.createElement(blocks.Icon, {
-      size: "large",
-      icon: icons.eilSortItem,
-      rotate: 90,
-      color: "white"
-    }));
+      margin: "0 1.25rem",
+      children: jsxRuntime.jsx(blocks.Icon, {
+        size: "large",
+        icon: icons.eilSortItem,
+        rotate: 90,
+        color: "white"
+      })
+    });
   };
   /**
    *
    */
-  const renderQuizGroupAnswer = (title, dropzoneIndex) => {
+  var renderQuizGroupAnswer = function renderQuizGroupAnswer(title, dropzoneIndex) {
     var _a, _b;
-    const isGroupAnswer = Boolean((_a = currentAnswerList[dropzoneIndex]) === null || _a === void 0 ? void 0 : _a.length);
-    return React.createElement(StyledQuizAnswerDropzoneWrapper, null, React.createElement(blocks.Text, {
-      size: "large",
-      bold: true
-    }, title), React.createElement(blocks.Vspace, {
-      height: 1
-    }), React.createElement(StyledQuizAnswerDropzone, {
-      accept: ".quiz-answer",
-      disabled: !!userId,
-      isGroupAnswer: isGroupAnswer,
-      onDrop: (event, ui) => {
-        const targetId = Number(ui.draggable[0].id);
-        updateCurrentAnswer(targetId, dropzoneIndex);
-      }
-    }, isGroupAnswer ? (_b = currentAnswerList[dropzoneIndex]) === null || _b === void 0 ? void 0 : _b.map((answer, index) => React.createElement(MaterialQuizGroupOptionItem.default, {
-      key: index,
-      option: answer
-    })) : React.createElement(blocks.Text, {
-      role: "gray5",
-      bold: true
-    }, intl$1.formatMessage({
-      id: 'materialQuiz.dropzone.desktop.answerEmpty'
-    }))));
+    var isGroupAnswer = Boolean((_a = currentAnswerList[dropzoneIndex]) === null || _a === void 0 ? void 0 : _a.length);
+    return jsxRuntime.jsxs(StyledQuizAnswerDropzoneWrapper, {
+      children: [jsxRuntime.jsx(blocks.Text, {
+        size: "large",
+        bold: true,
+        children: title
+      }), jsxRuntime.jsx(blocks.Vspace, {
+        height: 1
+      }), jsxRuntime.jsx(StyledQuizAnswerDropzone, {
+        accept: ".quiz-answer",
+        disabled: !!userId,
+        isGroupAnswer: isGroupAnswer,
+        onDrop: function onDrop(event, ui) {
+          var targetId = Number(ui.draggable[0].id);
+          updateCurrentAnswer(targetId, dropzoneIndex);
+        },
+        children: isGroupAnswer ? (_b = currentAnswerList[dropzoneIndex]) === null || _b === void 0 ? void 0 : _b.map(function (answer, index) {
+          return jsxRuntime.jsx(MaterialQuizGroupOptionItem.default, {
+            option: answer
+          }, index);
+        }) : jsxRuntime.jsx(blocks.Text, {
+          role: "gray5",
+          bold: true,
+          children: intl$1.formatMessage({
+            id: 'materialQuiz.dropzone.desktop.answerEmpty'
+          })
+        })
+      })]
+    });
   };
   /**
    *
    */
-  const renderQuizContentLeft = () => {
-    return React.createElement(StyledQuizAnswerWrapper, null, groupList.filter((_, index) => !(index % 2)).map((group, index) => React.createElement(React.Fragment, {
-      key: index
-    }, renderQuizGroupAnswer(group, index * 2))));
+  var renderQuizContentLeft = function renderQuizContentLeft() {
+    return jsxRuntime.jsx(StyledQuizAnswerWrapper, {
+      children: groupList.filter(function (_, index) {
+        return !(index % 2);
+      }).map(function (group, index) {
+        return jsxRuntime.jsx(React__default.default.Fragment, {
+          children: renderQuizGroupAnswer(group, index * 2)
+        }, index);
+      })
+    });
   };
   /**
    *
    */
-  const renderQuizContentRight = () => {
-    return React.createElement(StyledQuizAnswerWrapper, null, groupList.filter((_, index) => index % 2).map((group, index) => React.createElement(React.Fragment, {
-      key: index
-    }, renderQuizGroupAnswer(group, index * 2 + 1))));
+  var renderQuizContentRight = function renderQuizContentRight() {
+    return jsxRuntime.jsx(StyledQuizAnswerWrapper, {
+      children: groupList.filter(function (_, index) {
+        return index % 2;
+      }).map(function (group, index) {
+        return jsxRuntime.jsx(React__default.default.Fragment, {
+          children: renderQuizGroupAnswer(group, index * 2 + 1)
+        }, index);
+      })
+    });
   };
   /**
    *
    */
-  const renderQuizContentOption = () => {
-    return React.createElement(blocks.Flex, {
-      height: "fit-content"
-    }, renderQuizContentSortation(), React.createElement(StyledQuizOptions, null, React.createElement(blocks.Button, {
-      role: "white",
-      size: "small",
-      disabled: !!userId,
-      onClick: handleAnswerReset
-    }, intl$1.formatMessage({
-      id: 'materialQuiz.dropzone.optionReset'
-    })), React.createElement(blocks.Vspace, {
-      height: 1
-    }), React.createElement(StyledQuizOptionsDropzone, {
-      accept: ".quiz-answer",
-      onDrop: (event, ui) => {
-        const targetId = Number(ui.draggable[0].id);
-        updateCurrentOption(targetId);
-      }
-    }, currentOptionList.length ? currentOptionList.map((option, index) => React.createElement(MaterialQuizGroupOptionItem.default, {
-      key: index,
-      option: option
-    })) : React.createElement(blocks.Flex, {
-      justify: "center",
-      align: "center",
-      width: "100%"
-    }, React.createElement(blocks.Text, {
-      role: "navy",
-      textAlign: "center",
-      bold: true
-    }, intl$1.formatMessage({
-      id: 'materialQuiz.dropzone.optionEmpty'
-    }))))), renderQuizContentSortation());
+  var renderQuizContentOption = function renderQuizContentOption() {
+    return jsxRuntime.jsxs(blocks.Flex, {
+      height: "fit-content",
+      children: [renderQuizContentSortation(), jsxRuntime.jsxs(StyledQuizOptions, {
+        children: [jsxRuntime.jsx(blocks.Button, {
+          role: "white",
+          size: "small",
+          disabled: !!userId,
+          onClick: handleAnswerReset,
+          children: intl$1.formatMessage({
+            id: 'materialQuiz.dropzone.optionReset'
+          })
+        }), jsxRuntime.jsx(blocks.Vspace, {
+          height: 1
+        }), jsxRuntime.jsx(StyledQuizOptionsDropzone, {
+          accept: ".quiz-answer",
+          onDrop: function onDrop(event, ui) {
+            var targetId = Number(ui.draggable[0].id);
+            updateCurrentOption(targetId);
+          },
+          children: currentOptionList.length ? currentOptionList.map(function (option, index) {
+            return jsxRuntime.jsx(MaterialQuizGroupOptionItem.default, {
+              option: option
+            }, index);
+          }) : jsxRuntime.jsx(blocks.Flex, {
+            justify: "center",
+            align: "center",
+            width: "100%",
+            children: jsxRuntime.jsx(blocks.Text, {
+              role: "navy",
+              textAlign: "center",
+              bold: true,
+              children: intl$1.formatMessage({
+                id: 'materialQuiz.dropzone.optionEmpty'
+              })
+            })
+          })
+        })]
+      }), renderQuizContentSortation()]
+    });
   };
   //
   //
   //
-  return React.createElement(blocks.Flex, {
+  return jsxRuntime.jsxs(blocks.Flex, {
     width: "100%",
-    height: "100%"
-  }, renderQuizContentLeft(), renderQuizContentOption(), renderQuizContentRight());
+    height: "100%",
+    children: [renderQuizContentLeft(), renderQuizContentOption(), renderQuizContentRight()]
+  });
 };
 
 exports.default = MaterialQuizGroupDesktop;

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

@@ -2,6 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
@@ -11,136 +13,163 @@ var MaterialQuizContext = require('../context/MaterialQuizContext.js');
 var context = require('./context/context.js');
 var MaterialQuizGroupOptionItem = require('./MaterialQuizGroupOptionItem.js');
 
-const StyledQuizGroupWrapper = styled.div.withConfig({
+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 StyledQuizGroupWrapper = styled__default.default.div.withConfig({
   componentId: "sc-bftjpj-0"
 })(["display:flex;flex-direction:column;overflow:hidden;width:100%;padding:1rem;background:", ";border-radius:0.5rem;&:hover{cursor:pointer;}&:not(:last-child){margin-bottom:1rem;}"], designTokens.base.color.white);
-const StyledQuizOptionList = styled.div.withConfig({
+var StyledQuizOptionList = styled__default.default.div.withConfig({
   componentId: "sc-bftjpj-1"
-})(["display:flex;align-items:", ";gap:0.5rem;overflow-x:auto;min-height:223px;padding:1rem;border-radius:0.5rem;background:", ";outline-color:", ";"], ({
-  isCurrentOptionList
-}) => isCurrentOptionList ? 'flex-start' : 'center', designTokens.base.color.gray1, designTokens.base.color.gray3);
-const StyledQuizOptionItem = styled.div.withConfig({
+})(["display:flex;align-items:", ";gap:0.5rem;overflow-x:auto;min-height:223px;padding:1rem;border-radius:0.5rem;background:", ";outline-color:", ";"], function (_ref) {
+  var isCurrentOptionList = _ref.isCurrentOptionList;
+  return isCurrentOptionList ? 'flex-start' : 'center';
+}, designTokens.base.color.gray1, designTokens.base.color.gray3);
+var StyledQuizOptionItem = styled__default.default.div.withConfig({
   componentId: "sc-bftjpj-2"
 })(["&:hover{cursor:pointer;}"]);
-const StyledBottomSheetWrapper = styled(StyledQuizOptionList).withConfig({
+var StyledBottomSheetWrapper = styled__default.default(StyledQuizOptionList).withConfig({
   componentId: "sc-bftjpj-3"
-})(["align-items:", ";padding:0.5rem;"], ({
-  vertical,
-  isCurrentOptionList
-}) => vertical && isCurrentOptionList ? 'flex-start' : 'center');
-const MaterialQuizGroupMobile = () => {
-  const intl$1 = intl.useRawEliceIntl();
+})(["align-items:", ";padding:0.5rem;"], function (_ref2) {
+  var vertical = _ref2.vertical,
+    isCurrentOptionList = _ref2.isCurrentOptionList;
+  return vertical && isCurrentOptionList ? 'flex-start' : 'center';
+});
+var MaterialQuizGroupMobile = function MaterialQuizGroupMobile() {
+  var intl$1 = intl.useRawEliceIntl();
   // context
-  const {
-    materialQuiz,
-    userId,
-    vertical
-  } = MaterialQuizContext.useMaterialQuizState();
-  const {
-    currentOptionList,
-    currentAnswerList,
-    updateCurrentAnswer,
-    updateCurrentOption,
-    handleAnswerReset
-  } = React.useContext(context.default);
-  const [dropzoneIndex, setDropzoneIndex] = React.useState(null);
+  var _useMaterialQuizState = MaterialQuizContext.useMaterialQuizState(),
+    materialQuiz = _useMaterialQuizState.materialQuiz,
+    userId = _useMaterialQuizState.userId,
+    vertical = _useMaterialQuizState.vertical;
+  var _React$useContext = React__default.default.useContext(context.default),
+    currentOptionList = _React$useContext.currentOptionList,
+    currentAnswerList = _React$useContext.currentAnswerList,
+    updateCurrentAnswer = _React$useContext.updateCurrentAnswer,
+    updateCurrentOption = _React$useContext.updateCurrentOption,
+    handleAnswerReset = _React$useContext.handleAnswerReset;
+  var _React$useState = React__default.default.useState(null),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    dropzoneIndex = _React$useState2[0],
+    setDropzoneIndex = _React$useState2[1];
   /**
    *
    */
-  const renderResetButton = () => {
-    return React.createElement(React.Fragment, null, React.createElement(blocks.Button, {
-      role: "white",
-      size: "small",
-      disabled: !!userId,
-      onClick: handleAnswerReset,
-      block: true
-    }, intl$1.formatMessage({
-      id: 'materialQuiz.dropzone.optionReset'
-    })), React.createElement(blocks.Vspace, {
-      height: 1
-    }));
+  var renderResetButton = function renderResetButton() {
+    return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(blocks.Button, {
+        role: "white",
+        size: "small",
+        disabled: !!userId,
+        onClick: handleAnswerReset,
+        block: true,
+        children: intl$1.formatMessage({
+          id: 'materialQuiz.dropzone.optionReset'
+        })
+      }), jsxRuntime.jsx(blocks.Vspace, {
+        height: 1
+      })]
+    });
   };
   /**
    *
    */
-  const renderGroupList = () => {
+  var renderGroupList = function renderGroupList() {
     var _a;
-    return React.createElement(React.Fragment, null, (_a = materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.groups) === null || _a === void 0 ? void 0 : _a.map((group, index) => {
-      var _a;
-      const isCurrentOptionList = Boolean((_a = currentAnswerList === null || currentAnswerList === void 0 ? void 0 : currentAnswerList[index]) === null || _a === void 0 ? void 0 : _a.length);
-      return React.createElement(StyledQuizGroupWrapper, {
-        key: index,
-        onClick: () => setDropzoneIndex(index)
-      }, React.createElement(blocks.Text, {
-        size: "small",
-        bold: true
-      }, group), React.createElement(blocks.Vspace, {
-        height: 0.5
-      }), React.createElement(StyledQuizOptionList, {
-        isCurrentOptionList: isCurrentOptionList
-      }, isCurrentOptionList ? currentAnswerList[index].map(answer => React.createElement(MaterialQuizGroupOptionItem.default, {
-        key: answer.order,
-        option: answer,
-        onClose: () => {
-          const targetId = answer.order;
-          updateCurrentOption(targetId);
-        }
-      })) : React.createElement(blocks.Text, {
-        role: "gray6",
-        size: "small",
-        textAlign: "center",
-        bold: true,
-        block: true
-      }, intl$1.formatMessage({
-        id: 'materialQuiz.dropzone.mobile.answerEmpty'
-      }))));
-    }));
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: (_a = materialQuiz === null || materialQuiz === void 0 ? void 0 : materialQuiz.groups) === null || _a === void 0 ? void 0 : _a.map(function (group, index) {
+        var _a;
+        var isCurrentOptionList = Boolean((_a = currentAnswerList === null || currentAnswerList === void 0 ? void 0 : currentAnswerList[index]) === null || _a === void 0 ? void 0 : _a.length);
+        return jsxRuntime.jsxs(StyledQuizGroupWrapper, {
+          onClick: function onClick() {
+            return setDropzoneIndex(index);
+          },
+          children: [jsxRuntime.jsx(blocks.Text, {
+            size: "small",
+            bold: true,
+            children: group
+          }), jsxRuntime.jsx(blocks.Vspace, {
+            height: 0.5
+          }), jsxRuntime.jsx(StyledQuizOptionList, {
+            isCurrentOptionList: isCurrentOptionList,
+            children: isCurrentOptionList ? currentAnswerList[index].map(function (answer) {
+              return jsxRuntime.jsx(MaterialQuizGroupOptionItem.default, {
+                option: answer,
+                onClose: function onClose() {
+                  var targetId = answer.order;
+                  updateCurrentOption(targetId);
+                }
+              }, answer.order);
+            }) : jsxRuntime.jsx(blocks.Text, {
+              role: "gray6",
+              size: "small",
+              textAlign: "center",
+              bold: true,
+              block: true,
+              children: intl$1.formatMessage({
+                id: 'materialQuiz.dropzone.mobile.answerEmpty'
+              })
+            })
+          })]
+        }, index);
+      })
+    });
   };
   /**
    *
    */
-  const renderOptionListBottomSheet = () => {
-    const isCurrentOptionList = Boolean(currentOptionList.length);
-    return React.createElement(blocks.BottomSheet, {
+  var renderOptionListBottomSheet = function renderOptionListBottomSheet() {
+    var isCurrentOptionList = Boolean(currentOptionList.length);
+    return jsxRuntime.jsx(blocks.BottomSheet, {
       show: dropzoneIndex !== null,
       title: intl$1.formatMessage({
         id: 'materialQuiz.bottomSheet.title'
       }),
       contentsText: "",
       disableSwipeGesture: true,
-      onClose: () => setDropzoneIndex(null)
-    }, React.createElement(StyledBottomSheetWrapper, {
-      vertical: vertical,
-      isCurrentOptionList: isCurrentOptionList
-    }, isCurrentOptionList ? currentOptionList === null || currentOptionList === void 0 ? void 0 : currentOptionList.map((option, index) => React.createElement(StyledQuizOptionItem, {
-      key: index,
-      onClick: () => {
-        const targetId = option.order;
-        if (dropzoneIndex === null) {
-          return;
-        }
-        if (!!userId) {
-          return;
-        }
-        updateCurrentAnswer(targetId, dropzoneIndex);
-      }
-    }, React.createElement(MaterialQuizGroupOptionItem.default, {
-      key: index,
-      option: option
-    }))) : React.createElement(blocks.Text, {
-      role: "gray6",
-      size: "small",
-      textAlign: "center",
-      bold: true,
-      block: true
-    }, intl$1.formatMessage({
-      id: 'materialQuiz.bottomSheet.optionEmpty'
-    }))));
+      onClose: function onClose() {
+        return setDropzoneIndex(null);
+      },
+      children: jsxRuntime.jsx(StyledBottomSheetWrapper, {
+        vertical: vertical,
+        isCurrentOptionList: isCurrentOptionList,
+        children: isCurrentOptionList ? currentOptionList === null || currentOptionList === void 0 ? void 0 : currentOptionList.map(function (option, index) {
+          return jsxRuntime.jsx(StyledQuizOptionItem, {
+            onClick: function onClick() {
+              var targetId = option.order;
+              if (dropzoneIndex === null) {
+                return;
+              }
+              if (!!userId) {
+                return;
+              }
+              updateCurrentAnswer(targetId, dropzoneIndex);
+            },
+            children: jsxRuntime.jsx(MaterialQuizGroupOptionItem.default, {
+              option: option
+            }, index)
+          }, index);
+        }) : jsxRuntime.jsx(blocks.Text, {
+          role: "gray6",
+          size: "small",
+          textAlign: "center",
+          bold: true,
+          block: true,
+          children: intl$1.formatMessage({
+            id: 'materialQuiz.bottomSheet.optionEmpty'
+          })
+        })
+      })
+    });
   };
   //
   //
   //
-  return React.createElement(React.Fragment, null, renderResetButton(), renderGroupList(), renderOptionListBottomSheet());
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [renderResetButton(), renderGroupList(), renderOptionListBottomSheet()]
+  });
 };
 
 exports.default = MaterialQuizGroupMobile;