@elice/material-survey 1.240718.0-trasncript.0 → 1.240718.0-trasncript.2

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

@@ -1,14 +1,14 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
 import { useQuestionCheckboxContext } from './QuestionCheckboxContext.js';
 
-const StyledQuestionCheckboxOption = styled.div.withConfig({
+var StyledQuestionCheckboxOption = styled.div.withConfig({
   componentId: "sc-em5vxx-0"
-})(["display:flex;align-items:center;padding:1.125rem;border-radius:8px;background-color:", ";&:not(:last-of-type){margin-bottom:1rem;}&:hover,& *:hover{cursor:", ";}", ""], ({
-  checked,
-  status
-}) => {
+})(["display:flex;align-items:center;padding:1.125rem;border-radius:8px;background-color:", ";&:not(:last-of-type){margin-bottom:1rem;}&:hover,& *:hover{cursor:", ";}", ""], function (_ref) {
+  var checked = _ref.checked,
+    status = _ref.status;
   if (checked) {
     return base.color.primary1;
   }
@@ -20,20 +20,21 @@ const StyledQuestionCheckboxOption = styled.div.withConfig({
     default:
       return base.color.navy5;
   }
-}, ({
-  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-em5vxx-1"
 })([""]);
-const StyledQuestionCheckboxInput = styled.input.withConfig({
+var StyledQuestionCheckboxInput = styled.input.withConfig({
   componentId: "sc-em5vxx-2"
-})(["flex:none;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;width:1.25rem;height:1.25rem;margin-right:0.875rem;background-color:", ";border:", ";", ""], ({
-  checked,
-  status
-}) => {
+})(["flex:none;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;width:1.25rem;height:1.25rem;margin-right:0.875rem;background-color:", ";border:", ";", ""], function (_ref4) {
+  var checked = _ref4.checked,
+    status = _ref4.status;
   if (checked) {
     return base.color.primary6;
   }
@@ -45,10 +46,9 @@ const StyledQuestionCheckboxInput = styled.input.withConfig({
     default:
       return 'transparent';
   }
-}, ({
-  checked,
-  status
-}) => {
+}, function (_ref5) {
+  var checked = _ref5.checked,
+    status = _ref5.status;
   if (checked) {
     return base.color.primary6;
   }
@@ -58,29 +58,16 @@ const StyledQuestionCheckboxInput = styled.input.withConfig({
     case 'wrong':
       return base.color.red9;
     default:
-      return `1px solid ${base.color.gray3}`;
+      return "1px solid ".concat(base.color.gray3);
   }
-}, ({
-  status,
-  checked
-}) => {
+}, function (_ref6) {
+  var status = _ref6.status,
+    checked = _ref6.checked;
   if (checked) {
-    return `
-        &:after {
-          content: '';
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          width: 5px;
-          height: 10px;
-          border: solid ${base.color.primary1};
-          transform: translate(-50%, -50%) rotate(45deg);
-          border-width: 0 3px 3px 0;
-        }
-      `;
+    return "\n        &:after {\n          content: '';\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          width: 5px;\n          height: 10px;\n          border: solid ".concat(base.color.primary1, ";\n          transform: translate(-50%, -50%) rotate(45deg);\n          border-width: 0 3px 3px 0;\n        }\n      ");
   }
   if (status) {
-    let bgColor;
+    var bgColor;
     switch (status) {
       case 'correct':
         bgColor = base.color.green9;
@@ -92,7 +79,7 @@ const StyledQuestionCheckboxInput = styled.input.withConfig({
         bgColor = 'transparent';
         break;
     }
-    let borderColor;
+    var borderColor;
     switch (status) {
       case 'correct':
         borderColor = base.color.green1;
@@ -104,28 +91,14 @@ const StyledQuestionCheckboxInput = styled.input.withConfig({
         borderColor = base.color.navy5;
         break;
     }
-    return `
-          &:after {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            width: 5px;
-            height: 10px;
-            border: solid ${borderColor};
-            transform: translate(-50%, -50%) rotate(45deg);
-            border-width: 0 3px 3px 0;
-            background-color: ${bgColor};
-          }
-        `;
+    return "\n          &:after {\n            content: '';\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            width: 5px;\n            height: 10px;\n            border: solid ".concat(borderColor, ";\n            transform: translate(-50%, -50%) rotate(45deg);\n            border-width: 0 3px 3px 0;\n            background-color: ").concat(bgColor, ";\n          }\n        ");
   }
 });
-const StyledLabel = styled.label.withConfig({
+var StyledLabel = styled.label.withConfig({
   componentId: "sc-em5vxx-3"
-})(["word-break:break-all;margin-right:0.875rem;font-size:", ";color:", ";& p{color:", ";}"], base.size.body3, ({
-  checked,
-  status
-}) => {
+})(["word-break:break-all;margin-right:0.875rem;font-size:", ";color:", ";& p{color:", ";}"], base.size.body3, function (_ref7) {
+  var checked = _ref7.checked,
+    status = _ref7.status;
   if (checked) {
     return base.color.primary6;
   }
@@ -137,10 +110,9 @@ const StyledLabel = styled.label.withConfig({
     default:
       return base.color.navy0;
   }
-}, ({
-  checked,
-  status
-}) => {
+}, function (_ref8) {
+  var checked = _ref8.checked,
+    status = _ref8.status;
   if (checked) {
     return base.color.primary6;
   }
@@ -153,41 +125,41 @@ const StyledLabel = styled.label.withConfig({
       return base.color.navy0;
   }
 });
-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 (_ref9) {
+  var value = _ref9.value,
+    status = _ref9.status,
+    isAnswer = _ref9.isAnswer,
+    children = _ref9.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-4da40f-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');
   }

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

@@ -1,14 +1,14 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
 import { useQuestionRadioContext } from './QuestionRadioContext.js';
 
-const StyledQuestionRadioOption = styled.div.withConfig({
+var StyledQuestionRadioOption = styled.div.withConfig({
   componentId: "sc-zgbv8k-0"
-})(["display:flex;align-items:center;padding:1.125rem;border-radius:8px;background-color:", ";&:not(:last-of-type){margin-bottom:1rem;}&:hover,& *:hover{cursor:", ";}", ""], ({
-  checked,
-  status
-}) => {
+})(["display:flex;align-items:center;padding:1.125rem;border-radius:8px;background-color:", ";&:not(:last-of-type){margin-bottom:1rem;}&:hover,& *:hover{cursor:", ";}", ""], function (_ref) {
+  var checked = _ref.checked,
+    status = _ref.status;
   if (checked) {
     return base.color.primary1;
   }
@@ -20,17 +20,18 @@ const StyledQuestionRadioOption = styled.div.withConfig({
     default:
       return base.color.navy5;
   }
-}, ({
-  disabled
-}) => disabled ? 'not-allowed' : 'pointer', ({
-  isAnswer
-}) => isAnswer ? `border: 3px solid ${base.color.green5}` : '');
-const StyledQuestionRadioInput = styled.input.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 StyledQuestionRadioInput = styled.input.withConfig({
   componentId: "sc-zgbv8k-1"
-})(["flex:none;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;border-radius:50%;width:1.25rem;height:1.25rem;margin-right:0.875rem;border:2px solid ", ";", ""], ({
-  checked,
-  status
-}) => {
+})(["flex:none;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;border-radius:50%;width:1.25rem;height:1.25rem;margin-right:0.875rem;border:2px solid ", ";", ""], function (_ref4) {
+  var checked = _ref4.checked,
+    status = _ref4.status;
   if (checked) {
     return base.color.primary6;
   }
@@ -42,27 +43,14 @@ const StyledQuestionRadioInput = styled.input.withConfig({
     default:
       return base.color.gray3;
   }
-}, ({
-  status,
-  checked
-}) => {
+}, function (_ref5) {
+  var status = _ref5.status,
+    checked = _ref5.checked;
   if (checked) {
-    return `
-        &:after {
-          content: '';
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          width: 70%;
-          height: 70%;
-          border-radius: 50%;
-          background-color: ${base.color.primary6};
-        }
-      `;
+    return "\n        &:after {\n          content: '';\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          transform: translate(-50%, -50%);\n          width: 70%;\n          height: 70%;\n          border-radius: 50%;\n          background-color: ".concat(base.color.primary6, ";\n        }\n      ");
   }
   if (status) {
-    let bgColor;
+    var bgColor;
     switch (status) {
       case 'correct':
         bgColor = base.color.green9;
@@ -74,27 +62,14 @@ const StyledQuestionRadioInput = styled.input.withConfig({
         bgColor = base.color.gray3;
         break;
     }
-    return `
-          &:after {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 70%;
-            height: 70%;
-            border-radius: 50%;
-            background-color: ${bgColor};
-          }
-        `;
+    return "\n          &:after {\n            content: '';\n            position: absolute;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            width: 70%;\n            height: 70%;\n            border-radius: 50%;\n            background-color: ".concat(bgColor, ";\n          }\n        ");
   }
 });
-const StyledLabel = styled.label.withConfig({
+var StyledLabel = styled.label.withConfig({
   componentId: "sc-zgbv8k-2"
-})(["word-break:break-all;margin-right:0.875rem;font-size:", ";color:", ";& p{color:", ";}"], base.size.body3, ({
-  checked,
-  status
-}) => {
+})(["word-break:break-all;margin-right:0.875rem;font-size:", ";color:", ";& p{color:", ";}"], base.size.body3, function (_ref6) {
+  var checked = _ref6.checked,
+    status = _ref6.status;
   if (checked) {
     return base.color.primary6;
   }
@@ -106,10 +81,9 @@ const StyledLabel = styled.label.withConfig({
     default:
       return base.color.navy0;
   }
-}, ({
-  checked,
-  status
-}) => {
+}, function (_ref7) {
+  var checked = _ref7.checked,
+    status = _ref7.status;
   if (checked) {
     return base.color.primary6;
   }
@@ -122,40 +96,40 @@ const StyledLabel = styled.label.withConfig({
       return base.color.navy0;
   }
 });
-const QuestionRadioOption = React.memo(({
-  value,
-  status,
-  isAnswer,
-  children
-}) => {
-  const {
-    selectedValue,
-    disabled,
-    onSelect
-  } = useQuestionRadioContext();
-  return React.createElement(StyledQuestionRadioOption, {
+var QuestionRadioOption = React.memo(function (_ref8) {
+  var value = _ref8.value,
+    status = _ref8.status,
+    isAnswer = _ref8.isAnswer,
+    children = _ref8.children;
+  var _useQuestionRadioCont = useQuestionRadioContext(),
+    selectedValue = _useQuestionRadioCont.selectedValue,
+    disabled = _useQuestionRadioCont.disabled,
+    onSelect = _useQuestionRadioCont.onSelect;
+  return jsxs(StyledQuestionRadioOption, {
     isAnswer: isAnswer,
     disabled: disabled,
     checked: selectedValue === value,
-    onClick: e => {
+    onClick: function onClick(e) {
       e.preventDefault();
       if (disabled) {
         return;
       }
       onSelect(value);
     },
-    status: status
-  }, React.createElement(StyledQuestionRadioInput, {
-    id: value,
-    type: "radio",
-    readOnly: true,
-    checked: selectedValue === value,
-    status: status
-  }), React.createElement(StyledLabel, {
-    htmlFor: value,
-    checked: selectedValue === value,
-    status: status
-  }, children));
+    status: status,
+    children: [jsx(StyledQuestionRadioInput, {
+      id: value,
+      type: "radio",
+      readOnly: true,
+      checked: selectedValue === value,
+      status: status
+    }), jsx(StyledLabel, {
+      htmlFor: value,
+      checked: selectedValue === value,
+      status: status,
+      children: children
+    })]
+  });
 });
 
 export { QuestionRadioOption as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-survey",
-  "version": "1.240718.0-trasncript.0",
+  "version": "1.240718.0-trasncript.2",
   "description": "User view and editing components of Elice material survey",
   "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
   "license": "UNLICENSED",
@@ -17,10 +17,8 @@
   "scripts": {
     "start": "run-s watch",
     "prebuild": "run-s clean",
-    "build": "run-p build:es build:cjs",
-    "build:es": "rollup -c ../../rollup.config.ts --configPlugin typescript -f es",
-    "build:cjs": "rollup -c ../../rollup.config.ts --configPlugin typescript -f cjs",
-    "watch": "rollup -c ../../rollup.config.ts --configPlugin typescript -f es -w",
+    "build": "cross-env NODE_ENV=production rollup -c ../../rollup.config.ts --configPlugin typescript -f es -f cjs",
+    "watch": "rollup -c ../../rollup.config.ts --configPlugin typescript -f es -f cjs -w",
     "lint": "eslint --ext .ts,.tsx ./src --max-warnings=0",
     "clean": "del-cli \"es/*\" \"cjs/*\" \"dist/*\""
   },
@@ -47,15 +45,15 @@
   },
   "devDependencies": {
     "@elice/api-client": "^1.240619.0",
-    "@elice/blocks": "^1.240514.0",
+    "@elice/blocks": "^1.240529.0",
     "@elice/design-tokens": "^1.220803.0",
     "@elice/icons": "^1.230814.0",
     "@elice/icons-legacy": "npm:@elice/icons@0.230814.0",
     "@elice/intl": "0.240425.0-rc.2",
-    "@elice/markdown": "^1.220815.0",
-    "@elice/material-shared-types": "1.240718.0-trasncript.0",
-    "@elice/material-shared-utils": "1.240718.0-trasncript.0",
-    "@elice/types": "^1.240619.0",
+    "@elice/markdown": "^1.240124.0",
+    "@elice/material-shared-types": "1.240718.0-trasncript.2",
+    "@elice/material-shared-utils": "1.240718.0-trasncript.2",
+    "@elice/types": "1.240709.0",
     "@elice/wysiwyg": "1.240716.1",
     "@types/classnames": "^2.3.1",
     "@types/react": "~17.0.9",
@@ -64,6 +62,5 @@
     "react": "^17.0.2",
     "react-use": "^17.2.4",
     "styled-components": "^5.3.0"
-  },
-  "gitHead": "832dc77a5e38ff02e0bfec8905a3a9706b9b9593"
+  }
 }