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

package/es/components/shared/QuizDraggbleOption.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Icon, Text } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { eilDraggableVertical } from '@elice/icons';
@@ -7,25 +7,23 @@ import EbDraggable from '../eb-sortable/EbDraggable.js';
 import { useMaterialQuizState } from '../material-quiz/context/MaterialQuizContext.js';
 import StyledMarkdown from './StyledMarkdown.js';
 
-const StyledQuizDraggbleOptionHandle = styled.div.withConfig({
+var StyledQuizDraggbleOptionHandle = styled.div.withConfig({
   componentId: "sc-19b0zkq-0"
 })(["display:flex;align-items:center;justify-content:center;background-color:", ";width:1.5rem;flex:none;"], base.color.navy5);
-const StyledQuizDraggbleOptionContent = styled.div.withConfig({
+var StyledQuizDraggbleOptionContent = styled.div.withConfig({
   componentId: "sc-19b0zkq-1"
-})(["display:flex;justify-content:space-between;min-width:0;align-items:center;flex:auto;padding:0.875rem 1rem;line-height:24px;border:", ";background-color:", ";"], ({
-  role
-}) => {
+})(["display:flex;justify-content:space-between;min-width:0;align-items:center;flex:auto;padding:0.875rem 1rem;line-height:24px;border:", ";background-color:", ";"], function (_ref) {
+  var role = _ref.role;
   switch (role) {
     case 'correct':
-      return `1px solid ${base.color.primary6}`;
+      return "1px solid ".concat(base.color.primary6);
     case 'wrong':
-      return `1px solid ${base.color.red6}`;
+      return "1px solid ".concat(base.color.red6);
     default:
       return '';
   }
-}, ({
-  role
-}) => {
+}, function (_ref2) {
+  var role = _ref2.role;
   switch (role) {
     case 'answer':
       return base.color.primary6;
@@ -33,14 +31,13 @@ const StyledQuizDraggbleOptionContent = styled.div.withConfig({
       return '';
   }
 });
-const StyledOrder = styled.div.withConfig({
+var StyledOrder = styled.div.withConfig({
   componentId: "sc-19b0zkq-2"
 })(["width:1.5rem;height:1.5rem;display:flex;border-radius:4px;align-items:center;justify-content:center;color:", ";background-color:", ";flex:none;margin-left:0.5rem;"], base.color.navy0, base.color.navy4);
-const StyledQuizDraggbleOption = styled(EbDraggable).withConfig({
+var StyledQuizDraggbleOption = styled(EbDraggable).withConfig({
   componentId: "sc-19b0zkq-3"
-})(["display:flex;border-radius:8px;border:1px solid ", ";background-color:", ";overflow:hidden;z-index:980 !important;&:not(:last-of-type){margin-bottom:1rem;}", "{background-color:", ";color:", ";}", "{background-color:", ";& *{color:", ";}}", "{background-color:", ";color:", ";}&.ui-draggable-dragging{z-index:1000 !important;color:", " !important;border:none !important;", "{background-color:", ";}", "{background-color:", ";border:1px solid ", " !important;}", "{color:", ";background-color:", ";}& *{color:", " !important;}}&.ui-draggable-dragging.quiz-answer{width:calc(100% - 1rem * 2);}"], base.color.navy4, base.color.navy5, StyledQuizDraggbleOptionHandle, ({
-  role
-}) => {
+})(["display:flex;border-radius:8px;border:1px solid ", ";background-color:", ";overflow:hidden;z-index:980 !important;&:not(:last-of-type){margin-bottom:1rem;}", "{background-color:", ";color:", ";}", "{background-color:", ";& *{color:", ";}}", "{background-color:", ";color:", ";}&.ui-draggable-dragging{z-index:1000 !important;color:", " !important;border:none !important;", "{background-color:", ";}", "{background-color:", ";border:1px solid ", " !important;}", "{color:", ";background-color:", ";}& *{color:", " !important;}}&.ui-draggable-dragging.quiz-answer{width:calc(100% - 1rem * 2);}"], base.color.navy4, base.color.navy5, StyledQuizDraggbleOptionHandle, function (_ref3) {
+  var role = _ref3.role;
   switch (role) {
     case 'answer':
       return base.color.primary4;
@@ -52,9 +49,8 @@ const StyledQuizDraggbleOption = styled(EbDraggable).withConfig({
     default:
       return base.color.navy3;
   }
-}, ({
-  role
-}) => {
+}, function (_ref4) {
+  var role = _ref4.role;
   switch (role) {
     case 'answer':
       return base.color.primary9;
@@ -66,9 +62,8 @@ const StyledQuizDraggbleOption = styled(EbDraggable).withConfig({
     default:
       return base.color.navy5;
   }
-}, StyledQuizDraggbleOptionContent, ({
-  role
-}) => {
+}, StyledQuizDraggbleOptionContent, function (_ref5) {
+  var role = _ref5.role;
   switch (role) {
     case 'answer':
       return base.color.primary1;
@@ -80,9 +75,8 @@ const StyledQuizDraggbleOption = styled(EbDraggable).withConfig({
     default:
       return base.color.navy5;
   }
-}, ({
-  role
-}) => {
+}, function (_ref6) {
+  var role = _ref6.role;
   switch (role) {
     case 'answer':
       return base.color.primary9;
@@ -94,9 +88,8 @@ const StyledQuizDraggbleOption = styled(EbDraggable).withConfig({
     default:
       return base.color.navy0;
   }
-}, StyledOrder, ({
-  role
-}) => {
+}, StyledOrder, function (_ref7) {
+  var role = _ref7.role;
   switch (role) {
     case 'answer':
       return base.color.primary3;
@@ -108,9 +101,8 @@ const StyledQuizDraggbleOption = styled(EbDraggable).withConfig({
     default:
       return base.color.navy4;
   }
-}, ({
-  role
-}) => {
+}, function (_ref8) {
+  var role = _ref8.role;
   switch (role) {
     case 'answer':
       return base.color.primary9;
@@ -123,39 +115,49 @@ const StyledQuizDraggbleOption = styled(EbDraggable).withConfig({
       return base.color.navy0;
   }
 }, base.color.navy0, StyledQuizDraggbleOptionHandle, base.color.navy5, StyledQuizDraggbleOptionContent, base.color.navy4, base.color.navy4, StyledOrder, base.color.navy0, base.color.navy5, base.color.navy0);
-const QuizDraggbleOption = ({
-  id,
-  className,
-  content,
-  disabled = false,
-  role = 'default',
-  indexOrder,
-  clone = false,
-  isMarkdown = false
-}) => {
-  const {
-    vertical
-  } = useMaterialQuizState();
-  return React.createElement(StyledQuizDraggbleOption, {
+var QuizDraggbleOption = function QuizDraggbleOption(_ref9) {
+  var id = _ref9.id,
+    className = _ref9.className,
+    content = _ref9.content,
+    _ref9$disabled = _ref9.disabled,
+    disabled = _ref9$disabled === void 0 ? false : _ref9$disabled,
+    _ref9$role = _ref9.role,
+    role = _ref9$role === void 0 ? 'default' : _ref9$role,
+    indexOrder = _ref9.indexOrder,
+    _ref9$clone = _ref9.clone,
+    clone = _ref9$clone === void 0 ? false : _ref9$clone,
+    _ref9$isMarkdown = _ref9.isMarkdown,
+    isMarkdown = _ref9$isMarkdown === void 0 ? false : _ref9$isMarkdown;
+  var _useMaterialQuizState = useMaterialQuizState(),
+    vertical = _useMaterialQuizState.vertical;
+  return jsxs(StyledQuizDraggbleOption, {
     id: id,
     className: className,
     disabled: disabled,
     role: role,
     clone: clone,
-    vertical: vertical
-  }, React.createElement(StyledQuizDraggbleOptionHandle, null, React.createElement(Icon, {
-    size: "large",
-    icon: eilDraggableVertical
-  })), React.createElement(StyledQuizDraggbleOptionContent, null, isMarkdown ? React.createElement(StyledMarkdown, {
-    children: content,
-    dark: true,
-    paddingx: 0,
-    paddingy: 0
-  }) : React.createElement(Text, {
-    userSelect: "none",
-    wordBreak: "break-all",
-    role: role === 'answer' ? 'white' : 'default'
-  }, content), indexOrder ? React.createElement(StyledOrder, null, indexOrder) : null));
+    vertical: vertical,
+    children: [jsx(StyledQuizDraggbleOptionHandle, {
+      children: jsx(Icon, {
+        size: "large",
+        icon: eilDraggableVertical
+      })
+    }), jsxs(StyledQuizDraggbleOptionContent, {
+      children: [isMarkdown ? jsx(StyledMarkdown, {
+        children: content,
+        dark: true,
+        paddingx: 0,
+        paddingy: 0
+      }) : jsx(Text, {
+        userSelect: "none",
+        wordBreak: "break-all",
+        role: role === 'answer' ? 'white' : 'default',
+        children: content
+      }), indexOrder ? jsx(StyledOrder, {
+        children: indexOrder
+      }) : null]
+    })]
+  });
 };
 
 export { QuizDraggbleOption as default };

package/es/components/shared/StyledMarkdown.js

@@ -1,7 +1,7 @@
 import { Markdown } from '@elice/markdown';
 import styled from 'styled-components';
 
-const StyledMarkdown = styled(Markdown).withConfig({
+var StyledMarkdown = styled(Markdown).withConfig({
   componentId: "sc-l6r531-0"
 })(["p{margin:0 !important;}code{white-space:pre-wrap;word-break:break-all;}"]);
 

package/es/components/shared/index.js

@@ -0,0 +1,7 @@
+export { default as QuizDraggbleDroppedOption } from './QuizDraggbleDroppedOption.js';
+export { default as QuizDraggbleDummyOption } from './QuizDraggbleDummyOption.js';
+export { default as QuizDraggbleOption } from './QuizDraggbleOption.js';
+export { default as QuestionRadio } from './question-radio/QuestionRadio.js';
+export { default as QuestionRadioOption } from './question-radio/QuestionRadioOption.js';
+export { default as QuestionCheckbox } from './question-checkbox/QuestionCheckbox.js';
+export { default as QuestionCheckboxOption } from './question-checkbox/QuestionCheckboxOption.js';

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

@@ -1,17 +1,19 @@
 import { __rest } from 'tslib';
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import styled from 'styled-components';
 import { QuestionCheckboxContextProvider } from './QuestionCheckboxContext.js';
 
-const StyledQuestionCheckbox = styled.div.withConfig({
+var StyledQuestionCheckbox = styled.div.withConfig({
   componentId: "sc-1jgy6x5-0"
 })(["display:flex;flex-direction:column;"]);
-const QuestionCheckbox = _a => {
-  var {
-      children
-    } = _a,
+var QuestionCheckbox = function QuestionCheckbox(_a) {
+  var children = _a.children,
     props = __rest(_a, ["children"]);
-  return React.createElement(QuestionCheckboxContextProvider, Object.assign({}, props), React.createElement(StyledQuestionCheckbox, null, children));
+  return jsx(QuestionCheckboxContextProvider, Object.assign({}, props, {
+    children: jsx(StyledQuestionCheckbox, {
+      children: children
+    })
+  }));
 };
 
 export { QuestionCheckbox as default };

package/es/components/shared/question-checkbox/QuestionCheckboxContext.d.ts

@@ -4,6 +4,6 @@ type Value = Pick<QuestionCheckboxProps, 'selectedOptions' | 'disabled' | 'onSel
 interface QuestionCheckboxProviderProps extends QuestionCheckboxProps {
     children: React.ReactNode;
 }
-declare function QuestionCheckboxContextProvider({ selectedOptions, onSelect, disabled, children, }: QuestionCheckboxProviderProps): React.JSX.Element;
+declare function QuestionCheckboxContextProvider({ selectedOptions, onSelect, disabled, children, }: QuestionCheckboxProviderProps): JSX.Element;
 declare function useQuestionCheckboxContext(): Value;
 export { QuestionCheckboxContextProvider, useQuestionCheckboxContext };

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

@@ -1,26 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 
-const QuestionCheckboxContext = React.createContext(undefined);
+var QuestionCheckboxContext = React.createContext(undefined);
 QuestionCheckboxContext.displayName = 'QuestionCheckboxContext';
-function QuestionCheckboxContextProvider({
-  selectedOptions,
-  onSelect,
-  disabled,
-  children
-}) {
+function QuestionCheckboxContextProvider(_ref) {
+  var selectedOptions = _ref.selectedOptions,
+    onSelect = _ref.onSelect,
+    disabled = _ref.disabled,
+    children = _ref.children;
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const onSelectValue = React.useCallback(onSelect, []);
-  const value = React.useMemo(() => ({
-    selectedOptions,
-    disabled,
-    onSelect: onSelectValue
-  }), [selectedOptions, disabled, onSelectValue]);
-  return React.createElement(QuestionCheckboxContext.Provider, {
-    value: value
-  }, children);
+  var onSelectValue = React.useCallback(onSelect, []);
+  var value = React.useMemo(function () {
+    return {
+      selectedOptions: selectedOptions,
+      disabled: disabled,
+      onSelect: onSelectValue
+    };
+  }, [selectedOptions, disabled, onSelectValue]);
+  return jsx(QuestionCheckboxContext.Provider, {
+    value: value,
+    children: children
+  });
 }
 function useQuestionCheckboxContext() {
-  const context = React.useContext(QuestionCheckboxContext);
+  var context = React.useContext(QuestionCheckboxContext);
   if (context === undefined) {
     throw new Error('useQuestionCheckboxContext must be used within a QuestionCheckboxContextProvider');
   }

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

@@ -1,15 +1,15 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 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';
 
-const StyledQuestionCheckboxOption = styled.div.withConfig({
+var StyledQuestionCheckboxOption = styled.div.withConfig({
   componentId: "sc-1erloup-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:", ";}", ""], ({
-  checked,
-  status
-}) => {
+})(["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) {
+  var checked = _ref.checked,
+    status = _ref.status;
   switch (status) {
     case 'correct':
       return base.color.green1;
@@ -18,20 +18,21 @@ const StyledQuestionCheckboxOption = styled.div.withConfig({
     default:
       return checked ? base.color.primary1 : base.color.navy6;
   }
-}, ({
-  disabled
-}) => disabled ? 'not-allowed' : 'pointer', ({
-  isAnswer
-}) => isAnswer ? `border: 3px solid ${base.color.green5}` : '');
-const StyledCustomCheckboxButton = styled.span.withConfig({
+}, function (_ref2) {
+  var disabled = _ref2.disabled;
+  return disabled ? 'not-allowed' : 'pointer';
+}, function (_ref3) {
+  var isAnswer = _ref3.isAnswer;
+  return isAnswer ? "border: 3px solid ".concat(base.color.green5) : '';
+});
+var StyledCustomCheckboxButton = styled.span.withConfig({
   componentId: "sc-1erloup-1"
 })([""]);
-const StyledQuestionCheckboxInput = styled.input.withConfig({
+var StyledQuestionCheckboxInput = styled.input.withConfig({
   componentId: "sc-1erloup-2"
-})(["flex:none;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;width:1rem;height:1rem;margin-right:0.875rem;background-color:", ";border:", ";", ""], ({
-  checked,
-  status
-}) => {
+})(["flex:none;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;width:1rem;height:1rem;margin-right:0.875rem;background-color:", ";border:", ";", ""], function (_ref4) {
+  var checked = _ref4.checked,
+    status = _ref4.status;
   switch (status) {
     case 'correct':
       return base.color.green9;
@@ -40,23 +41,21 @@ const StyledQuestionCheckboxInput = styled.input.withConfig({
     default:
       return checked ? base.color.primary6 : 'transparent';
   }
-}, ({
-  checked,
-  status
-}) => {
+}, function (_ref5) {
+  var checked = _ref5.checked,
+    status = _ref5.status;
   switch (status) {
     case 'correct':
       return base.color.green9;
     case 'wrong':
       return base.color.red9;
     default:
-      return checked ? base.color.primary6 : `1px solid ${base.color.gray3}`;
+      return checked ? base.color.primary6 : "1px solid ".concat(base.color.gray3);
   }
-}, ({
-  status,
-  checked
-}) => {
-  let bgColor;
+}, function (_ref6) {
+  var status = _ref6.status,
+    checked = _ref6.checked;
+  var bgColor;
   switch (status) {
     case 'correct':
       bgColor = base.color.green9;
@@ -68,7 +67,7 @@ const StyledQuestionCheckboxInput = styled.input.withConfig({
       bgColor = 'transparent';
       break;
   }
-  let borderColor;
+  var borderColor;
   switch (status) {
     case 'correct':
       borderColor = base.color.green1;
@@ -80,59 +79,46 @@ const StyledQuestionCheckboxInput = styled.input.withConfig({
       borderColor = checked ? base.color.primary1 : status ? base.color.navy5 : 'transparent';
       break;
   }
-  return `
-          &:after {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            width: 3px;
-            height: 7px;
-            border: solid ${borderColor};
-            transform: translate(-50%, -50%) rotate(45deg);
-            border-width: 0 2px 2px 0;
-            background-color: ${bgColor};
-          }
-        `;
+  return "\n          &:after {\n            content: '';\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            width: 3px;\n            height: 7px;\n            border: solid ".concat(borderColor, ";\n            transform: translate(-50%, -50%) rotate(45deg);\n            border-width: 0 2px 2px 0;\n            background-color: ").concat(bgColor, ";\n          }\n        ");
 });
-const StyledLabel = styled.label.withConfig({
+var StyledLabel = styled.label.withConfig({
   componentId: "sc-1erloup-3"
 })(["word-break:break-all;margin-right:0.875rem;font-size:", ";line-height:24px;", ""], base.size.body3, getQuestionStatusStyle());
-const QuestionCheckboxOption = React.memo(({
-  value,
-  status,
-  isAnswer,
-  children
-}) => {
-  const {
-    selectedOptions,
-    disabled,
-    onSelect
-  } = useQuestionCheckboxContext();
-  const checked = selectedOptions.includes(value);
-  return React.createElement(StyledQuestionCheckboxOption, {
+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,
+    onSelect = _useQuestionCheckboxC.onSelect;
+  var checked = selectedOptions.includes(value);
+  return jsxs(StyledQuestionCheckboxOption, {
     isAnswer: isAnswer,
     disabled: disabled,
     checked: checked,
-    onClick: e => {
+    onClick: function onClick(e) {
       e.preventDefault();
       if (disabled) {
         return;
       }
       onSelect(value);
     },
-    status: status
-  }, React.createElement(StyledCustomCheckboxButton, null), React.createElement(StyledQuestionCheckboxInput, {
-    id: value,
-    readOnly: true,
-    type: "checkbox",
-    checked: checked,
-    status: status
-  }), React.createElement(StyledLabel, {
-    htmlFor: value,
-    checked: checked,
-    status: status
-  }, children));
+    status: status,
+    children: [jsx(StyledCustomCheckboxButton, {}), jsx(StyledQuestionCheckboxInput, {
+      id: value,
+      readOnly: true,
+      type: "checkbox",
+      checked: checked,
+      status: status
+    }), jsx(StyledLabel, {
+      htmlFor: value,
+      checked: checked,
+      status: status,
+      children: children
+    })]
+  });
 });
 
 export { QuestionCheckboxOption as default };

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

@@ -1,17 +1,19 @@
 import { __rest } from 'tslib';
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import styled from 'styled-components';
 import { QuestionRadioContextProvider } from './QuestionRadioContext.js';
 
-const StyledQuestionRadio = styled.div.withConfig({
+var StyledQuestionRadio = styled.div.withConfig({
   componentId: "sc-s7wqiy-0"
 })(["display:flex;flex-direction:column;"]);
-const QuestionRadio = _a => {
-  var {
-      children
-    } = _a,
+var QuestionRadio = function QuestionRadio(_a) {
+  var children = _a.children,
     props = __rest(_a, ["children"]);
-  return React.createElement(QuestionRadioContextProvider, Object.assign({}, props), React.createElement(StyledQuestionRadio, null, children));
+  return jsx(QuestionRadioContextProvider, Object.assign({}, props, {
+    children: jsx(StyledQuestionRadio, {
+      children: children
+    })
+  }));
 };
 
 export { QuestionRadio as default };

package/es/components/shared/question-radio/QuestionRadioContext.d.ts

@@ -4,6 +4,6 @@ type Value = Pick<QuestionRadioProps, 'selectedValue' | 'disabled' | 'onSelect'>
 interface QuestionRadioProviderProps extends QuestionRadioProps {
     children: React.ReactNode;
 }
-declare function QuestionRadioContextProvider({ selectedValue, onSelect, disabled, children, }: QuestionRadioProviderProps): React.JSX.Element;
+declare function QuestionRadioContextProvider({ selectedValue, onSelect, disabled, children, }: QuestionRadioProviderProps): JSX.Element;
 declare function useQuestionRadioContext(): Value;
 export { QuestionRadioContextProvider, useQuestionRadioContext };

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

@@ -1,26 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 
-const QuestionRadioContext = React.createContext(undefined);
+var QuestionRadioContext = React.createContext(undefined);
 QuestionRadioContext.displayName = 'QuestionRadioContext';
-function QuestionRadioContextProvider({
-  selectedValue,
-  onSelect,
-  disabled,
-  children
-}) {
+function QuestionRadioContextProvider(_ref) {
+  var selectedValue = _ref.selectedValue,
+    onSelect = _ref.onSelect,
+    disabled = _ref.disabled,
+    children = _ref.children;
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const onSelectValue = React.useCallback(onSelect, []);
-  const value = React.useMemo(() => ({
-    selectedValue,
-    disabled,
-    onSelect: onSelectValue
-  }), [selectedValue, disabled, onSelectValue]);
-  return React.createElement(QuestionRadioContext.Provider, {
-    value: value
-  }, children);
+  var onSelectValue = React.useCallback(onSelect, []);
+  var value = React.useMemo(function () {
+    return {
+      selectedValue: selectedValue,
+      disabled: disabled,
+      onSelect: onSelectValue
+    };
+  }, [selectedValue, disabled, onSelectValue]);
+  return jsx(QuestionRadioContext.Provider, {
+    value: value,
+    children: children
+  });
 }
 function useQuestionRadioContext() {
-  const context = React.useContext(QuestionRadioContext);
+  var context = React.useContext(QuestionRadioContext);
   if (context === undefined) {
     throw new Error('useQuestionRadioContext must be used within a QuestionRadioContextProvider');
   }