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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/cjs/_virtual/_rollupPluginBabelHelpers.js +399 -0
  2. package/cjs/components/markdown-editor/index.d.ts +1 -2
  3. package/cjs/components/markdown-editor/index.js +19 -10
  4. package/cjs/components/material-survey/MaterialSurvey.js +82 -57
  5. package/cjs/components/material-survey/MaterialSurveyInfo.js +69 -59
  6. package/cjs/components/material-survey/MaterialSurveySelectMultiple.js +131 -90
  7. package/cjs/components/material-survey/MaterialSurveySelectOne.js +125 -86
  8. package/cjs/components/material-survey/MaterialSurveyShimmer.js +47 -40
  9. package/cjs/components/material-survey/MaterialSurveyText.js +114 -75
  10. package/cjs/components/material-survey/SurveyResultBadge.js +17 -10
  11. package/cjs/components/material-survey/SurveySubmitStatusText.js +21 -16
  12. package/cjs/components/material-survey/context/MaterialSurveyContext.d.ts +1 -1
  13. package/cjs/components/material-survey/context/MaterialSurveyContext.js +115 -74
  14. package/cjs/components/material-survey/index.js +9 -0
  15. package/cjs/components/material-survey/locales/index.js +13 -0
  16. package/cjs/components/material-survey-edit/MaterialSurveyEdit.js +49 -36
  17. package/cjs/components/material-survey-edit/MaterialSurveyEditContent.js +113 -91
  18. package/cjs/components/material-survey-edit/MaterialSurveyEditOptionSelect.js +100 -87
  19. package/cjs/components/material-survey-edit/context.js +8 -2
  20. package/cjs/components/material-survey-edit/index.js +7 -0
  21. package/cjs/components/material-survey-edit/locales/index.js +13 -0
  22. package/cjs/components/material-survey-edit/utils/editValue.js +17 -11
  23. package/cjs/components/shared/StyledMarkdown.js +5 -1
  24. package/cjs/components/shared/SurveyContentBox.js +85 -74
  25. package/cjs/components/shared/index.js +13 -0
  26. package/cjs/components/shared/question-checkbox/QuestionCheckbox.js +13 -7
  27. package/cjs/components/shared/question-checkbox/QuestionCheckboxContext.d.ts +1 -1
  28. package/cjs/components/shared/question-checkbox/QuestionCheckboxContext.js +24 -17
  29. package/cjs/components/shared/question-checkbox/QuestionCheckboxOption.js +66 -89
  30. package/cjs/components/shared/question-radio/QuestionRadio.js +13 -7
  31. package/cjs/components/shared/question-radio/QuestionRadioContext.d.ts +1 -1
  32. package/cjs/components/shared/question-radio/QuestionRadioContext.js +24 -17
  33. package/cjs/components/shared/question-radio/QuestionRadioOption.js +59 -80
  34. package/es/_virtual/_rollupPluginBabelHelpers.js +386 -0
  35. package/es/components/markdown-editor/index.d.ts +1 -2
  36. package/es/components/markdown-editor/index.js +15 -10
  37. package/es/components/material-survey/MaterialSurvey.js +77 -57
  38. package/es/components/material-survey/MaterialSurveyInfo.js +65 -59
  39. package/es/components/material-survey/MaterialSurveySelectMultiple.js +127 -90
  40. package/es/components/material-survey/MaterialSurveySelectOne.js +121 -86
  41. package/es/components/material-survey/MaterialSurveyShimmer.js +43 -40
  42. package/es/components/material-survey/MaterialSurveyText.js +109 -75
  43. package/es/components/material-survey/SurveyResultBadge.js +13 -10
  44. package/es/components/material-survey/SurveySubmitStatusText.js +17 -16
  45. package/es/components/material-survey/context/MaterialSurveyContext.d.ts +1 -1
  46. package/es/components/material-survey/context/MaterialSurveyContext.js +112 -75
  47. package/es/components/material-survey/index.js +2 -0
  48. package/es/components/material-survey/locales/index.js +4 -0
  49. package/es/components/material-survey-edit/MaterialSurveyEdit.js +45 -36
  50. package/es/components/material-survey-edit/MaterialSurveyEditContent.js +107 -90
  51. package/es/components/material-survey-edit/MaterialSurveyEditOptionSelect.js +96 -87
  52. package/es/components/material-survey-edit/context.js +4 -2
  53. package/es/components/material-survey-edit/index.js +1 -0
  54. package/es/components/material-survey-edit/locales/index.js +4 -0
  55. package/es/components/material-survey-edit/utils/editValue.js +17 -11
  56. package/es/components/shared/StyledMarkdown.js +1 -1
  57. package/es/components/shared/SurveyContentBox.js +81 -74
  58. package/es/components/shared/index.js +4 -0
  59. package/es/components/shared/question-checkbox/QuestionCheckbox.js +9 -7
  60. package/es/components/shared/question-checkbox/QuestionCheckboxContext.d.ts +1 -1
  61. package/es/components/shared/question-checkbox/QuestionCheckboxContext.js +20 -17
  62. package/es/components/shared/question-checkbox/QuestionCheckboxOption.js +61 -89
  63. package/es/components/shared/question-radio/QuestionRadio.js +9 -7
  64. package/es/components/shared/question-radio/QuestionRadioContext.d.ts +1 -1
  65. package/es/components/shared/question-radio/QuestionRadioContext.js +20 -17
  66. package/es/components/shared/question-radio/QuestionRadioOption.js +54 -80
  67. package/package.json +9 -12
@@ -3,98 +3,109 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var tslib = require('tslib');
6
- var React = require('react');
6
+ var jsxRuntime = require('react/jsx-runtime');
7
7
  var blocks = require('@elice/blocks');
8
8
  var designTokens = require('@elice/design-tokens');
9
9
  var intl = require('@elice/intl');
10
10
  var styled = require('styled-components');
11
11
  var MaterialSurveyContext = require('../material-survey/context/MaterialSurveyContext.js');
12
12
 
13
- const StyledQuestionBox = styled.div.withConfig({
13
+ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
14
+
15
+ var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
16
+
17
+ var StyledQuestionBox = styled__default.default.div.withConfig({
14
18
  componentId: "sc-h8ztvr-0"
15
- })(["display:flex;flex-direction:column;border-radius:", ";overflow:hidden;width:100%;max-height:", ";min-height:", ";"], ({
16
- vertical
17
- }) => vertical ? '0' : '8px', ({
18
- hasFooter
19
- }) => hasFooter ? '100%' : '', ({
20
- hasFooter
21
- }) => hasFooter ? '' : '100%');
22
- const StyledQuestionBoxHeader = styled.div.withConfig({
19
+ })(["display:flex;flex-direction:column;border-radius:", ";overflow:hidden;width:100%;max-height:", ";min-height:", ";"], function (_ref) {
20
+ var vertical = _ref.vertical;
21
+ return vertical ? '0' : '8px';
22
+ }, function (_ref2) {
23
+ var hasFooter = _ref2.hasFooter;
24
+ return hasFooter ? '100%' : '';
25
+ }, function (_ref3) {
26
+ var hasFooter = _ref3.hasFooter;
27
+ return hasFooter ? '' : '100%';
28
+ });
29
+ var StyledQuestionBoxHeader = styled__default.default.div.withConfig({
23
30
  componentId: "sc-h8ztvr-1"
24
31
  })(["display:flex;justify-content:space-between;background-color:", ";padding:1rem 1.5rem;flex:none;height:3.5rem;"], designTokens.base.color.navy6);
25
- const StyledQuestionBoxBody = styled.div.withConfig({
32
+ var StyledQuestionBoxBody = styled__default.default.div.withConfig({
26
33
  componentId: "sc-h8ztvr-2"
27
- })(["padding:1.5rem;background-color:", ";flex:auto;", "})"], designTokens.base.color.navy7, ({
28
- hasFooter
29
- }) => hasFooter ? 'height: 100%; overflow-y: auto;' : '');
30
- const StyledQuestionBoxFooter = styled.div.withConfig({
34
+ })(["padding:1.5rem;background-color:", ";flex:auto;", "})"], designTokens.base.color.navy7, function (_ref4) {
35
+ var hasFooter = _ref4.hasFooter;
36
+ return hasFooter ? 'height: 100%; overflow-y: auto;' : '';
37
+ });
38
+ var StyledQuestionBoxFooter = styled__default.default.div.withConfig({
31
39
  componentId: "sc-h8ztvr-3"
32
- })(["flex:none;display:flex;justify-content:space-between;align-items:center;padding:0.75rem 1.5rem;background-color:", ";", ""], designTokens.base.color.navy8, ({
33
- vertical
34
- }) => {
35
- return vertical ? `
36
- flex-direction: column;
37
- align-items: flex-start;
38
- ` : '';
40
+ })(["flex:none;display:flex;justify-content:space-between;align-items:center;padding:0.75rem 1.5rem;background-color:", ";", ""], designTokens.base.color.navy8, function (_ref5) {
41
+ var vertical = _ref5.vertical;
42
+ return vertical ? "\n flex-direction: column;\n align-items: flex-start;\n " : '';
39
43
  });
40
- const StyledQuestionBoxFooterActions = styled.div.withConfig({
44
+ var StyledQuestionBoxFooterActions = styled__default.default.div.withConfig({
41
45
  componentId: "sc-h8ztvr-4"
42
46
  })(["display:flex;> *:not(:last-child){margin-right:0.75rem;}"]);
43
- const StyledQuestionBoxFooterStatus = styled.div.withConfig({
47
+ var StyledQuestionBoxFooterStatus = styled__default.default.div.withConfig({
44
48
  componentId: "sc-h8ztvr-5"
45
- })(["margin-left:0.75rem;", ""], ({
46
- vertical
47
- }) => {
48
- return vertical ? `
49
- margin-left: 0;
50
- margin-top: 0.75rem;
51
- ` : '';
49
+ })(["margin-left:0.75rem;", ""], function (_ref6) {
50
+ var vertical = _ref6.vertical;
51
+ return vertical ? "\n margin-left: 0;\n margin-top: 0.75rem;\n " : '';
52
52
  });
53
- const SurveyContentBox = _a => {
54
- var {
55
- children,
56
- footerActions = [],
57
- title,
58
- submitResult,
59
- submitStatus,
60
- onNext
61
- } = _a,
53
+ var SurveyContentBox = function SurveyContentBox(_a) {
54
+ var children = _a.children,
55
+ _a$footerActions = _a.footerActions,
56
+ footerActions = _a$footerActions === void 0 ? [] : _a$footerActions,
57
+ title = _a.title,
58
+ submitResult = _a.submitResult,
59
+ submitStatus = _a.submitStatus,
60
+ onNext = _a.onNext,
62
61
  props = tslib.__rest(_a, ["children", "footerActions", "title", "submitResult", "submitStatus", "onNext"]);
63
- const intl$1 = intl.useRawEliceIntl();
64
- const {
65
- vertical
66
- } = MaterialSurveyContext.useMaterialSurveyState();
67
- const hasFooter = footerActions.length > 0;
68
- const header = React.createElement(StyledQuestionBoxHeader, null, React.createElement(blocks.Text, {
69
- bold: true,
70
- customStyles: {
71
- color: designTokens.base.color.navy0
72
- }
73
- }, title), submitResult ? submitResult : null);
74
- const body = React.createElement(StyledQuestionBoxBody, {
75
- hasFooter: hasFooter
76
- }, children);
77
- const footer = React.createElement(StyledQuestionBoxFooter, {
78
- vertical: vertical
79
- }, React.createElement(StyledQuestionBoxFooterActions, null, footerActions.map((action, index) => React.createElement(blocks.Button, Object.assign({
80
- key: index,
81
- size: "small"
82
- }, action), action.children)), typeof onNext === 'function' ? React.createElement(blocks.Button, {
83
- size: "small",
84
- border: true,
85
- tabIndex: 0,
86
- transparent: false,
87
- role: "lightpurple",
88
- onClick: onNext
89
- }, intl$1.formatMessage({
90
- id: 'materialSurvey.next'
91
- })) : null), React.createElement(StyledQuestionBoxFooterStatus, {
92
- vertical: vertical
93
- }, submitStatus));
94
- return React.createElement(StyledQuestionBox, Object.assign({}, props, {
62
+ var intl$1 = intl.useRawEliceIntl();
63
+ var _useMaterialSurveySta = MaterialSurveyContext.useMaterialSurveyState(),
64
+ vertical = _useMaterialSurveySta.vertical;
65
+ var hasFooter = footerActions.length > 0;
66
+ var header = jsxRuntime.jsxs(StyledQuestionBoxHeader, {
67
+ children: [jsxRuntime.jsx(blocks.Text, {
68
+ bold: true,
69
+ customStyles: {
70
+ color: designTokens.base.color.navy0
71
+ },
72
+ children: title
73
+ }), submitResult ? submitResult : null]
74
+ });
75
+ var body = jsxRuntime.jsx(StyledQuestionBoxBody, {
76
+ hasFooter: hasFooter,
77
+ children: children
78
+ });
79
+ var footer = jsxRuntime.jsxs(StyledQuestionBoxFooter, {
80
+ vertical: vertical,
81
+ children: [jsxRuntime.jsxs(StyledQuestionBoxFooterActions, {
82
+ children: [footerActions.map(function (action, index) {
83
+ return jsxRuntime.jsx(blocks.Button, Object.assign({
84
+ size: "small"
85
+ }, action, {
86
+ children: action.children
87
+ }), index);
88
+ }), typeof onNext === 'function' ? jsxRuntime.jsx(blocks.Button, {
89
+ size: "small",
90
+ border: true,
91
+ tabIndex: 0,
92
+ transparent: false,
93
+ role: "lightpurple",
94
+ onClick: onNext,
95
+ children: intl$1.formatMessage({
96
+ id: 'materialSurvey.next'
97
+ })
98
+ }) : null]
99
+ }), jsxRuntime.jsx(StyledQuestionBoxFooterStatus, {
100
+ vertical: vertical,
101
+ children: submitStatus
102
+ })]
103
+ });
104
+ return jsxRuntime.jsxs(StyledQuestionBox, Object.assign({}, props, {
95
105
  vertical: vertical,
96
- hasFooter: hasFooter
97
- }), header, body, footerActions.length > 0 ? footer : null);
106
+ hasFooter: hasFooter,
107
+ children: [header, body, footerActions.length > 0 ? footer : null]
108
+ }));
98
109
  };
99
110
 
100
111
  exports.StyledQuestionBox = StyledQuestionBox;
@@ -0,0 +1,13 @@
1
+ 'use strict';
2
+
3
+ var QuestionRadio = require('./question-radio/QuestionRadio.js');
4
+ var QuestionRadioOption = require('./question-radio/QuestionRadioOption.js');
5
+ var QuestionCheckbox = require('./question-checkbox/QuestionCheckbox.js');
6
+ var QuestionCheckboxOption = require('./question-checkbox/QuestionCheckboxOption.js');
7
+
8
+
9
+
10
+ exports.QuestionRadio = QuestionRadio.default;
11
+ exports.QuestionRadioOption = QuestionRadioOption.default;
12
+ exports.QuestionCheckbox = QuestionCheckbox.default;
13
+ exports.QuestionCheckboxOption = QuestionCheckboxOption.default;
@@ -3,19 +3,25 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var tslib = require('tslib');
6
- var React = require('react');
6
+ var jsxRuntime = require('react/jsx-runtime');
7
7
  var styled = require('styled-components');
8
8
  var QuestionCheckboxContext = require('./QuestionCheckboxContext.js');
9
9
 
10
- const StyledQuestionCheckbox = styled.div.withConfig({
10
+ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
11
+
12
+ var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
13
+
14
+ var StyledQuestionCheckbox = styled__default.default.div.withConfig({
11
15
  componentId: "sc-1ovh9lp-0"
12
16
  })(["display:flex;flex-direction:column;"]);
13
- const QuestionCheckbox = _a => {
14
- var {
15
- children
16
- } = _a,
17
+ var QuestionCheckbox = function QuestionCheckbox(_a) {
18
+ var children = _a.children,
17
19
  props = tslib.__rest(_a, ["children"]);
18
- return React.createElement(QuestionCheckboxContext.QuestionCheckboxContextProvider, Object.assign({}, props), React.createElement(StyledQuestionCheckbox, null, children));
20
+ return jsxRuntime.jsx(QuestionCheckboxContext.QuestionCheckboxContextProvider, Object.assign({}, props, {
21
+ children: jsxRuntime.jsx(StyledQuestionCheckbox, {
22
+ children: children
23
+ })
24
+ }));
19
25
  };
20
26
 
21
27
  exports.default = QuestionCheckbox;
@@ -4,6 +4,6 @@ type Value = Pick<QuestionCheckboxProps, 'selectedOptions' | 'disabled' | 'onSel
4
4
  interface QuestionCheckboxProviderProps extends QuestionCheckboxProps {
5
5
  children: React.ReactNode;
6
6
  }
7
- declare function QuestionCheckboxContextProvider({ selectedOptions, onSelect, disabled, children, }: QuestionCheckboxProviderProps): React.JSX.Element;
7
+ declare function QuestionCheckboxContextProvider({ selectedOptions, onSelect, disabled, children, }: QuestionCheckboxProviderProps): JSX.Element;
8
8
  declare function useQuestionCheckboxContext(): Value;
9
9
  export { QuestionCheckboxContextProvider, useQuestionCheckboxContext };
@@ -1,28 +1,35 @@
1
1
  'use strict';
2
2
 
3
+ var jsxRuntime = require('react/jsx-runtime');
3
4
  var React = require('react');
4
5
 
5
- const QuestionCheckboxContext = React.createContext(undefined);
6
+ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
7
+
8
+ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
9
+
10
+ var QuestionCheckboxContext = React__default.default.createContext(undefined);
6
11
  QuestionCheckboxContext.displayName = 'QuestionCheckboxContext';
7
- function QuestionCheckboxContextProvider({
8
- selectedOptions,
9
- onSelect,
10
- disabled,
11
- children
12
- }) {
12
+ function QuestionCheckboxContextProvider(_ref) {
13
+ var selectedOptions = _ref.selectedOptions,
14
+ onSelect = _ref.onSelect,
15
+ disabled = _ref.disabled,
16
+ children = _ref.children;
13
17
  // eslint-disable-next-line react-hooks/exhaustive-deps
14
- const onSelectValue = React.useCallback(onSelect, []);
15
- const value = React.useMemo(() => ({
16
- selectedOptions,
17
- disabled,
18
- onSelect: onSelectValue
19
- }), [selectedOptions, disabled, onSelectValue]);
20
- return React.createElement(QuestionCheckboxContext.Provider, {
21
- value: value
22
- }, children);
18
+ var onSelectValue = React__default.default.useCallback(onSelect, []);
19
+ var value = React__default.default.useMemo(function () {
20
+ return {
21
+ selectedOptions: selectedOptions,
22
+ disabled: disabled,
23
+ onSelect: onSelectValue
24
+ };
25
+ }, [selectedOptions, disabled, onSelectValue]);
26
+ return jsxRuntime.jsx(QuestionCheckboxContext.Provider, {
27
+ value: value,
28
+ children: children
29
+ });
23
30
  }
24
31
  function useQuestionCheckboxContext() {
25
- const context = React.useContext(QuestionCheckboxContext);
32
+ var context = React__default.default.useContext(QuestionCheckboxContext);
26
33
  if (context === undefined) {
27
34
  throw new Error('useQuestionCheckboxContext must be used within a QuestionCheckboxContextProvider');
28
35
  }
@@ -2,17 +2,22 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var jsxRuntime = require('react/jsx-runtime');
5
6
  var React = require('react');
6
7
  var designTokens = require('@elice/design-tokens');
7
8
  var styled = require('styled-components');
8
9
  var QuestionCheckboxContext = require('./QuestionCheckboxContext.js');
9
10
 
10
- const StyledQuestionCheckboxOption = styled.div.withConfig({
11
+ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
12
+
13
+ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
14
+ var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
15
+
16
+ var StyledQuestionCheckboxOption = styled__default.default.div.withConfig({
11
17
  componentId: "sc-em5vxx-0"
12
- })(["display:flex;align-items:center;padding:1.125rem;border-radius:8px;background-color:", ";&:not(:last-of-type){margin-bottom:1rem;}&:hover,& *:hover{cursor:", ";}", ""], ({
13
- checked,
14
- status
15
- }) => {
18
+ })(["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) {
19
+ var checked = _ref.checked,
20
+ status = _ref.status;
16
21
  if (checked) {
17
22
  return designTokens.base.color.primary1;
18
23
  }
@@ -24,20 +29,21 @@ const StyledQuestionCheckboxOption = styled.div.withConfig({
24
29
  default:
25
30
  return designTokens.base.color.navy5;
26
31
  }
27
- }, ({
28
- disabled
29
- }) => disabled ? 'not-allowed' : 'pointer', ({
30
- isAnswer
31
- }) => isAnswer ? `border: 3px solid ${designTokens.base.color.green5}` : '');
32
- const StyledCustomCheckboxButton = styled.span.withConfig({
32
+ }, function (_ref2) {
33
+ var disabled = _ref2.disabled;
34
+ return disabled ? 'not-allowed' : 'pointer';
35
+ }, function (_ref3) {
36
+ var isAnswer = _ref3.isAnswer;
37
+ return isAnswer ? "border: 3px solid ".concat(designTokens.base.color.green5) : '';
38
+ });
39
+ var StyledCustomCheckboxButton = styled__default.default.span.withConfig({
33
40
  componentId: "sc-em5vxx-1"
34
41
  })([""]);
35
- const StyledQuestionCheckboxInput = styled.input.withConfig({
42
+ var StyledQuestionCheckboxInput = styled__default.default.input.withConfig({
36
43
  componentId: "sc-em5vxx-2"
37
- })(["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:", ";", ""], ({
38
- checked,
39
- status
40
- }) => {
44
+ })(["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) {
45
+ var checked = _ref4.checked,
46
+ status = _ref4.status;
41
47
  if (checked) {
42
48
  return designTokens.base.color.primary6;
43
49
  }
@@ -49,10 +55,9 @@ const StyledQuestionCheckboxInput = styled.input.withConfig({
49
55
  default:
50
56
  return 'transparent';
51
57
  }
52
- }, ({
53
- checked,
54
- status
55
- }) => {
58
+ }, function (_ref5) {
59
+ var checked = _ref5.checked,
60
+ status = _ref5.status;
56
61
  if (checked) {
57
62
  return designTokens.base.color.primary6;
58
63
  }
@@ -62,29 +67,16 @@ const StyledQuestionCheckboxInput = styled.input.withConfig({
62
67
  case 'wrong':
63
68
  return designTokens.base.color.red9;
64
69
  default:
65
- return `1px solid ${designTokens.base.color.gray3}`;
70
+ return "1px solid ".concat(designTokens.base.color.gray3);
66
71
  }
67
- }, ({
68
- status,
69
- checked
70
- }) => {
72
+ }, function (_ref6) {
73
+ var status = _ref6.status,
74
+ checked = _ref6.checked;
71
75
  if (checked) {
72
- return `
73
- &:after {
74
- content: '';
75
- position: absolute;
76
- top: 50%;
77
- left: 50%;
78
- width: 5px;
79
- height: 10px;
80
- border: solid ${designTokens.base.color.primary1};
81
- transform: translate(-50%, -50%) rotate(45deg);
82
- border-width: 0 3px 3px 0;
83
- }
84
- `;
76
+ return "\n &:after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 5px;\n height: 10px;\n border: solid ".concat(designTokens.base.color.primary1, ";\n transform: translate(-50%, -50%) rotate(45deg);\n border-width: 0 3px 3px 0;\n }\n ");
85
77
  }
86
78
  if (status) {
87
- let bgColor;
79
+ var bgColor;
88
80
  switch (status) {
89
81
  case 'correct':
90
82
  bgColor = designTokens.base.color.green9;
@@ -96,7 +88,7 @@ const StyledQuestionCheckboxInput = styled.input.withConfig({
96
88
  bgColor = 'transparent';
97
89
  break;
98
90
  }
99
- let borderColor;
91
+ var borderColor;
100
92
  switch (status) {
101
93
  case 'correct':
102
94
  borderColor = designTokens.base.color.green1;
@@ -108,28 +100,14 @@ const StyledQuestionCheckboxInput = styled.input.withConfig({
108
100
  borderColor = designTokens.base.color.navy5;
109
101
  break;
110
102
  }
111
- return `
112
- &:after {
113
- content: '';
114
- position: absolute;
115
- top: 50%;
116
- left: 50%;
117
- width: 5px;
118
- height: 10px;
119
- border: solid ${borderColor};
120
- transform: translate(-50%, -50%) rotate(45deg);
121
- border-width: 0 3px 3px 0;
122
- background-color: ${bgColor};
123
- }
124
- `;
103
+ 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 ");
125
104
  }
126
105
  });
127
- const StyledLabel = styled.label.withConfig({
106
+ var StyledLabel = styled__default.default.label.withConfig({
128
107
  componentId: "sc-em5vxx-3"
129
- })(["word-break:break-all;margin-right:0.875rem;font-size:", ";color:", ";& p{color:", ";}"], designTokens.base.size.body3, ({
130
- checked,
131
- status
132
- }) => {
108
+ })(["word-break:break-all;margin-right:0.875rem;font-size:", ";color:", ";& p{color:", ";}"], designTokens.base.size.body3, function (_ref7) {
109
+ var checked = _ref7.checked,
110
+ status = _ref7.status;
133
111
  if (checked) {
134
112
  return designTokens.base.color.primary6;
135
113
  }
@@ -141,10 +119,9 @@ const StyledLabel = styled.label.withConfig({
141
119
  default:
142
120
  return designTokens.base.color.navy0;
143
121
  }
144
- }, ({
145
- checked,
146
- status
147
- }) => {
122
+ }, function (_ref8) {
123
+ var checked = _ref8.checked,
124
+ status = _ref8.status;
148
125
  if (checked) {
149
126
  return designTokens.base.color.primary6;
150
127
  }
@@ -157,41 +134,41 @@ const StyledLabel = styled.label.withConfig({
157
134
  return designTokens.base.color.navy0;
158
135
  }
159
136
  });
160
- const QuestionCheckboxOption = React.memo(({
161
- value,
162
- status,
163
- isAnswer,
164
- children
165
- }) => {
166
- const {
167
- selectedOptions,
168
- disabled,
169
- onSelect
170
- } = QuestionCheckboxContext.useQuestionCheckboxContext();
171
- const checked = selectedOptions.includes(value);
172
- return React.createElement(StyledQuestionCheckboxOption, {
137
+ var QuestionCheckboxOption = React__default.default.memo(function (_ref9) {
138
+ var value = _ref9.value,
139
+ status = _ref9.status,
140
+ isAnswer = _ref9.isAnswer,
141
+ children = _ref9.children;
142
+ var _useQuestionCheckboxC = QuestionCheckboxContext.useQuestionCheckboxContext(),
143
+ selectedOptions = _useQuestionCheckboxC.selectedOptions,
144
+ disabled = _useQuestionCheckboxC.disabled,
145
+ onSelect = _useQuestionCheckboxC.onSelect;
146
+ var checked = selectedOptions.includes(value);
147
+ return jsxRuntime.jsxs(StyledQuestionCheckboxOption, {
173
148
  isAnswer: isAnswer,
174
149
  disabled: disabled,
175
150
  checked: checked,
176
- onClick: e => {
151
+ onClick: function onClick(e) {
177
152
  e.preventDefault();
178
153
  if (disabled) {
179
154
  return;
180
155
  }
181
156
  onSelect(value);
182
157
  },
183
- status: status
184
- }, React.createElement(StyledCustomCheckboxButton, null), React.createElement(StyledQuestionCheckboxInput, {
185
- id: value,
186
- readOnly: true,
187
- type: "checkbox",
188
- checked: checked,
189
- status: status
190
- }), React.createElement(StyledLabel, {
191
- htmlFor: value,
192
- checked: checked,
193
- status: status
194
- }, children));
158
+ status: status,
159
+ children: [jsxRuntime.jsx(StyledCustomCheckboxButton, {}), jsxRuntime.jsx(StyledQuestionCheckboxInput, {
160
+ id: value,
161
+ readOnly: true,
162
+ type: "checkbox",
163
+ checked: checked,
164
+ status: status
165
+ }), jsxRuntime.jsx(StyledLabel, {
166
+ htmlFor: value,
167
+ checked: checked,
168
+ status: status,
169
+ children: children
170
+ })]
171
+ });
195
172
  });
196
173
 
197
174
  exports.default = QuestionCheckboxOption;
@@ -3,19 +3,25 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var tslib = require('tslib');
6
- var React = require('react');
6
+ var jsxRuntime = require('react/jsx-runtime');
7
7
  var styled = require('styled-components');
8
8
  var QuestionRadioContext = require('./QuestionRadioContext.js');
9
9
 
10
- const StyledQuestionRadio = styled.div.withConfig({
10
+ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
11
+
12
+ var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
13
+
14
+ var StyledQuestionRadio = styled__default.default.div.withConfig({
11
15
  componentId: "sc-4da40f-0"
12
16
  })(["display:flex;flex-direction:column;"]);
13
- const QuestionRadio = _a => {
14
- var {
15
- children
16
- } = _a,
17
+ var QuestionRadio = function QuestionRadio(_a) {
18
+ var children = _a.children,
17
19
  props = tslib.__rest(_a, ["children"]);
18
- return React.createElement(QuestionRadioContext.QuestionRadioContextProvider, Object.assign({}, props), React.createElement(StyledQuestionRadio, null, children));
20
+ return jsxRuntime.jsx(QuestionRadioContext.QuestionRadioContextProvider, Object.assign({}, props, {
21
+ children: jsxRuntime.jsx(StyledQuestionRadio, {
22
+ children: children
23
+ })
24
+ }));
19
25
  };
20
26
 
21
27
  exports.default = QuestionRadio;
@@ -4,6 +4,6 @@ type Value = Pick<QuestionRadioProps, 'selectedValue' | 'disabled' | 'onSelect'>
4
4
  interface QuestionRadioProviderProps extends QuestionRadioProps {
5
5
  children: React.ReactNode;
6
6
  }
7
- declare function QuestionRadioContextProvider({ selectedValue, onSelect, disabled, children, }: QuestionRadioProviderProps): React.JSX.Element;
7
+ declare function QuestionRadioContextProvider({ selectedValue, onSelect, disabled, children, }: QuestionRadioProviderProps): JSX.Element;
8
8
  declare function useQuestionRadioContext(): Value;
9
9
  export { QuestionRadioContextProvider, useQuestionRadioContext };
@@ -1,28 +1,35 @@
1
1
  'use strict';
2
2
 
3
+ var jsxRuntime = require('react/jsx-runtime');
3
4
  var React = require('react');
4
5
 
5
- const QuestionRadioContext = React.createContext(undefined);
6
+ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
7
+
8
+ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
9
+
10
+ var QuestionRadioContext = React__default.default.createContext(undefined);
6
11
  QuestionRadioContext.displayName = 'QuestionRadioContext';
7
- function QuestionRadioContextProvider({
8
- selectedValue,
9
- onSelect,
10
- disabled,
11
- children
12
- }) {
12
+ function QuestionRadioContextProvider(_ref) {
13
+ var selectedValue = _ref.selectedValue,
14
+ onSelect = _ref.onSelect,
15
+ disabled = _ref.disabled,
16
+ children = _ref.children;
13
17
  // eslint-disable-next-line react-hooks/exhaustive-deps
14
- const onSelectValue = React.useCallback(onSelect, []);
15
- const value = React.useMemo(() => ({
16
- selectedValue,
17
- disabled,
18
- onSelect: onSelectValue
19
- }), [selectedValue, disabled, onSelectValue]);
20
- return React.createElement(QuestionRadioContext.Provider, {
21
- value: value
22
- }, children);
18
+ var onSelectValue = React__default.default.useCallback(onSelect, []);
19
+ var value = React__default.default.useMemo(function () {
20
+ return {
21
+ selectedValue: selectedValue,
22
+ disabled: disabled,
23
+ onSelect: onSelectValue
24
+ };
25
+ }, [selectedValue, disabled, onSelectValue]);
26
+ return jsxRuntime.jsx(QuestionRadioContext.Provider, {
27
+ value: value,
28
+ children: children
29
+ });
23
30
  }
24
31
  function useQuestionRadioContext() {
25
- const context = React.useContext(QuestionRadioContext);
32
+ var context = React__default.default.useContext(QuestionRadioContext);
26
33
  if (context === undefined) {
27
34
  throw new Error('useQuestionRadioContext must be used within a QuestionRadioContextProvider');
28
35
  }