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

package/cjs/components/material-survey-edit/utils/editValue.js

@@ -7,18 +7,14 @@ var randomId = require('./randomId.js');
  */
 function manipulateValue(v) {
   return Object.assign(Object.assign({}, v), {
-    questionInfoList: v.questionInfoList.map(function (questionInfo) {
-      return Object.assign(Object.assign({}, questionInfo), {
-        // convert string array to object array
-        // - ref: https://github.com/react-hook-form/react-hook-form/issues/7622#issuecomment-1018893318
-        optionInfo: Array.isArray(questionInfo.optionInfo) ? questionInfo.optionInfo.map(function (option) {
-          return {
-            id: randomId.createRandomId(),
-            value: option
-          };
-        }) : []
-      });
-    })
+    questionInfoList: v.questionInfoList.map(questionInfo => Object.assign(Object.assign({}, questionInfo), {
+      // convert string array to object array
+      // - ref: https://github.com/react-hook-form/react-hook-form/issues/7622#issuecomment-1018893318
+      optionInfo: Array.isArray(questionInfo.optionInfo) ? questionInfo.optionInfo.map(option => ({
+        id: randomId.createRandomId(),
+        value: option
+      })) : []
+    }))
   });
 }
 /**
@@ -26,12 +22,10 @@ function manipulateValue(v) {
  */
 function restoreValue(v) {
   return Object.assign(Object.assign({}, v), {
-    questionInfoList: v.questionInfoList.map(function (questionInfo) {
+    questionInfoList: v.questionInfoList.map(questionInfo => {
       var _a;
-      var newQuestionInfo = Object.assign(Object.assign({}, questionInfo), {
-        optionInfo: ((_a = questionInfo.optionInfo) === null || _a === void 0 ? void 0 : _a.length) ? questionInfo.optionInfo.map(function (option) {
-          return option.value;
-        }) : null
+      const newQuestionInfo = Object.assign(Object.assign({}, questionInfo), {
+        optionInfo: ((_a = questionInfo.optionInfo) === null || _a === void 0 ? void 0 : _a.length) ? questionInfo.optionInfo.map(option => option.value) : null
       });
       if (!newQuestionInfo.optionInfo) {
         delete newQuestionInfo.optionInfo;

package/cjs/components/shared/StyledMarkdown.js

@@ -5,11 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var markdown = require('@elice/markdown');
 var styled = require('styled-components');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-var StyledMarkdown = styled__default.default(markdown.Markdown).withConfig({
+const StyledMarkdown = styled(markdown.Markdown).withConfig({
   componentId: "sc-h8kc9g-0"
 })(["p{margin:0 !important;}"]);
 

package/cjs/components/shared/SurveyContentBox.js

@@ -3,109 +3,98 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
 var intl = require('@elice/intl');
 var styled = require('styled-components');
 var MaterialSurveyContext = require('../material-survey/context/MaterialSurveyContext.js');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-var StyledQuestionBox = styled__default.default.div.withConfig({
+const StyledQuestionBox = styled.div.withConfig({
   componentId: "sc-h8ztvr-0"
-})(["display:flex;flex-direction:column;border-radius:", ";overflow:hidden;width:100%;max-height:", ";min-height:", ";"], function (_ref) {
-  var vertical = _ref.vertical;
-  return vertical ? '0' : '8px';
-}, function (_ref2) {
-  var hasFooter = _ref2.hasFooter;
-  return hasFooter ? '100%' : '';
-}, function (_ref3) {
-  var hasFooter = _ref3.hasFooter;
-  return hasFooter ? '' : '100%';
-});
-var StyledQuestionBoxHeader = styled__default.default.div.withConfig({
+})(["display:flex;flex-direction:column;border-radius:", ";overflow:hidden;width:100%;max-height:", ";min-height:", ";"], ({
+  vertical
+}) => vertical ? '0' : '8px', ({
+  hasFooter
+}) => hasFooter ? '100%' : '', ({
+  hasFooter
+}) => hasFooter ? '' : '100%');
+const StyledQuestionBoxHeader = styled.div.withConfig({
   componentId: "sc-h8ztvr-1"
 })(["display:flex;justify-content:space-between;background-color:", ";padding:1rem 1.5rem;flex:none;height:3.5rem;"], designTokens.base.color.navy6);
-var StyledQuestionBoxBody = styled__default.default.div.withConfig({
+const StyledQuestionBoxBody = styled.div.withConfig({
   componentId: "sc-h8ztvr-2"
-})(["padding:1.5rem;background-color:", ";flex:auto;", "})"], designTokens.base.color.navy7, function (_ref4) {
-  var hasFooter = _ref4.hasFooter;
-  return hasFooter ? 'height: 100%; overflow-y: auto;' : '';
-});
-var StyledQuestionBoxFooter = styled__default.default.div.withConfig({
+})(["padding:1.5rem;background-color:", ";flex:auto;", "})"], designTokens.base.color.navy7, ({
+  hasFooter
+}) => hasFooter ? 'height: 100%; overflow-y: auto;' : '');
+const StyledQuestionBoxFooter = styled.div.withConfig({
   componentId: "sc-h8ztvr-3"
-})(["flex:none;display:flex;justify-content:space-between;align-items:center;padding:0.75rem 1.5rem;background-color:", ";", ""], designTokens.base.color.navy8, function (_ref5) {
-  var vertical = _ref5.vertical;
-  return vertical ? "\n          flex-direction: column;\n          align-items: flex-start;\n        " : '';
+})(["flex:none;display:flex;justify-content:space-between;align-items:center;padding:0.75rem 1.5rem;background-color:", ";", ""], designTokens.base.color.navy8, ({
+  vertical
+}) => {
+  return vertical ? `
+          flex-direction: column;
+          align-items: flex-start;
+        ` : '';
 });
-var StyledQuestionBoxFooterActions = styled__default.default.div.withConfig({
+const StyledQuestionBoxFooterActions = styled.div.withConfig({
   componentId: "sc-h8ztvr-4"
 })(["display:flex;> *:not(:last-child){margin-right:0.75rem;}"]);
-var StyledQuestionBoxFooterStatus = styled__default.default.div.withConfig({
+const StyledQuestionBoxFooterStatus = styled.div.withConfig({
   componentId: "sc-h8ztvr-5"
-})(["margin-left:0.75rem;", ""], function (_ref6) {
-  var vertical = _ref6.vertical;
-  return vertical ? "\n          margin-left: 0;\n          margin-top: 0.75rem;\n        " : '';
+})(["margin-left:0.75rem;", ""], ({
+  vertical
+}) => {
+  return vertical ? `
+          margin-left: 0;
+          margin-top: 0.75rem;
+        ` : '';
 });
-var SurveyContentBox = function SurveyContentBox(_a) {
-  var children = _a.children,
-    _a$footerActions = _a.footerActions,
-    footerActions = _a$footerActions === void 0 ? [] : _a$footerActions,
-    title = _a.title,
-    submitResult = _a.submitResult,
-    submitStatus = _a.submitStatus,
-    onNext = _a.onNext,
+const SurveyContentBox = _a => {
+  var {
+      children,
+      footerActions = [],
+      title,
+      submitResult,
+      submitStatus,
+      onNext
+    } = _a,
     props = tslib.__rest(_a, ["children", "footerActions", "title", "submitResult", "submitStatus", "onNext"]);
-  var intl$1 = intl.useRawEliceIntl();
-  var _useMaterialSurveySta = MaterialSurveyContext.useMaterialSurveyState(),
-    vertical = _useMaterialSurveySta.vertical;
-  var hasFooter = footerActions.length > 0;
-  var header = jsxRuntime.jsxs(StyledQuestionBoxHeader, {
-    children: [jsxRuntime.jsx(blocks.Text, {
-      bold: true,
-      customStyles: {
-        color: designTokens.base.color.navy0
-      },
-      children: title
-    }), submitResult ? submitResult : null]
-  });
-  var body = jsxRuntime.jsx(StyledQuestionBoxBody, {
-    hasFooter: hasFooter,
-    children: children
-  });
-  var footer = jsxRuntime.jsxs(StyledQuestionBoxFooter, {
-    vertical: vertical,
-    children: [jsxRuntime.jsxs(StyledQuestionBoxFooterActions, {
-      children: [footerActions.map(function (action, index) {
-        return jsxRuntime.jsx(blocks.Button, Object.assign({
-          size: "small"
-        }, action, {
-          children: action.children
-        }), index);
-      }), typeof onNext === 'function' ? jsxRuntime.jsx(blocks.Button, {
-        size: "small",
-        border: true,
-        tabIndex: 0,
-        transparent: false,
-        role: "lightpurple",
-        onClick: onNext,
-        children: intl$1.formatMessage({
-          id: 'materialSurvey.next'
-        })
-      }) : null]
-    }), jsxRuntime.jsx(StyledQuestionBoxFooterStatus, {
-      vertical: vertical,
-      children: submitStatus
-    })]
-  });
-  return jsxRuntime.jsxs(StyledQuestionBox, Object.assign({}, props, {
+  const intl$1 = intl.useRawEliceIntl();
+  const {
+    vertical
+  } = MaterialSurveyContext.useMaterialSurveyState();
+  const hasFooter = footerActions.length > 0;
+  const header = React.createElement(StyledQuestionBoxHeader, null, React.createElement(blocks.Text, {
+    bold: true,
+    customStyles: {
+      color: designTokens.base.color.navy0
+    }
+  }, title), submitResult ? submitResult : null);
+  const body = React.createElement(StyledQuestionBoxBody, {
+    hasFooter: hasFooter
+  }, children);
+  const footer = React.createElement(StyledQuestionBoxFooter, {
+    vertical: vertical
+  }, React.createElement(StyledQuestionBoxFooterActions, null, footerActions.map((action, index) => React.createElement(blocks.Button, Object.assign({
+    key: index,
+    size: "small"
+  }, action), action.children)), typeof onNext === 'function' ? React.createElement(blocks.Button, {
+    size: "small",
+    border: true,
+    tabIndex: 0,
+    transparent: false,
+    role: "lightpurple",
+    onClick: onNext
+  }, intl$1.formatMessage({
+    id: 'materialSurvey.next'
+  })) : null), React.createElement(StyledQuestionBoxFooterStatus, {
+    vertical: vertical
+  }, submitStatus));
+  return React.createElement(StyledQuestionBox, Object.assign({}, props, {
     vertical: vertical,
-    hasFooter: hasFooter,
-    children: [header, body, footerActions.length > 0 ? footer : null]
-  }));
+    hasFooter: hasFooter
+  }), header, body, footerActions.length > 0 ? footer : null);
 };
 
 exports.StyledQuestionBox = StyledQuestionBox;

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

@@ -3,25 +3,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var styled = require('styled-components');
 var QuestionCheckboxContext = require('./QuestionCheckboxContext.js');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-var StyledQuestionCheckbox = styled__default.default.div.withConfig({
+const StyledQuestionCheckbox = styled.div.withConfig({
   componentId: "sc-1ovh9lp-0"
 })(["display:flex;flex-direction:column;"]);
-var QuestionCheckbox = function QuestionCheckbox(_a) {
-  var children = _a.children,
+const QuestionCheckbox = _a => {
+  var {
+      children
+    } = _a,
     props = tslib.__rest(_a, ["children"]);
-  return jsxRuntime.jsx(QuestionCheckboxContext.QuestionCheckboxContextProvider, Object.assign({}, props, {
-    children: jsxRuntime.jsx(StyledQuestionCheckbox, {
-      children: children
-    })
-  }));
+  return React.createElement(QuestionCheckboxContext.QuestionCheckboxContextProvider, Object.assign({}, props), React.createElement(StyledQuestionCheckbox, null, children));
 };
 
 exports.default = QuestionCheckbox;

package/cjs/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): JSX.Element;
+declare function QuestionCheckboxContextProvider({ selectedOptions, onSelect, disabled, children, }: QuestionCheckboxProviderProps): React.JSX.Element;
 declare function useQuestionCheckboxContext(): Value;
 export { QuestionCheckboxContextProvider, useQuestionCheckboxContext };

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

@@ -1,35 +1,28 @@
 'use strict';
 
-var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-var QuestionCheckboxContext = React__default.default.createContext(undefined);
+const QuestionCheckboxContext = React.createContext(undefined);
 QuestionCheckboxContext.displayName = 'QuestionCheckboxContext';
-function QuestionCheckboxContextProvider(_ref) {
-  var selectedOptions = _ref.selectedOptions,
-    onSelect = _ref.onSelect,
-    disabled = _ref.disabled,
-    children = _ref.children;
+function QuestionCheckboxContextProvider({
+  selectedOptions,
+  onSelect,
+  disabled,
+  children
+}) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  var onSelectValue = React__default.default.useCallback(onSelect, []);
-  var value = React__default.default.useMemo(function () {
-    return {
-      selectedOptions: selectedOptions,
-      disabled: disabled,
-      onSelect: onSelectValue
-    };
-  }, [selectedOptions, disabled, onSelectValue]);
-  return jsxRuntime.jsx(QuestionCheckboxContext.Provider, {
-    value: value,
-    children: children
-  });
+  const onSelectValue = React.useCallback(onSelect, []);
+  const value = React.useMemo(() => ({
+    selectedOptions,
+    disabled,
+    onSelect: onSelectValue
+  }), [selectedOptions, disabled, onSelectValue]);
+  return React.createElement(QuestionCheckboxContext.Provider, {
+    value: value
+  }, children);
 }
 function useQuestionCheckboxContext() {
-  var context = React__default.default.useContext(QuestionCheckboxContext);
+  const context = React.useContext(QuestionCheckboxContext);
   if (context === undefined) {
     throw new Error('useQuestionCheckboxContext must be used within a QuestionCheckboxContextProvider');
   }

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

@@ -2,22 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var designTokens = require('@elice/design-tokens');
 var styled = require('styled-components');
 var QuestionCheckboxContext = require('./QuestionCheckboxContext.js');
 
-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 StyledQuestionCheckboxOption = styled__default.default.div.withConfig({
+const 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:", ";}", ""], function (_ref) {
-  var checked = _ref.checked,
-    status = _ref.status;
+})(["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
+}) => {
   if (checked) {
     return designTokens.base.color.primary1;
   }
@@ -29,21 +24,20 @@ var StyledQuestionCheckboxOption = styled__default.default.div.withConfig({
     default:
       return designTokens.base.color.navy5;
   }
-}, function (_ref2) {
-  var disabled = _ref2.disabled;
-  return disabled ? 'not-allowed' : 'pointer';
-}, function (_ref3) {
-  var isAnswer = _ref3.isAnswer;
-  return isAnswer ? "border: 3px solid ".concat(designTokens.base.color.green5) : '';
-});
-var StyledCustomCheckboxButton = styled__default.default.span.withConfig({
+}, ({
+  disabled
+}) => disabled ? 'not-allowed' : 'pointer', ({
+  isAnswer
+}) => isAnswer ? `border: 3px solid ${designTokens.base.color.green5}` : '');
+const StyledCustomCheckboxButton = styled.span.withConfig({
   componentId: "sc-em5vxx-1"
 })([""]);
-var StyledQuestionCheckboxInput = styled__default.default.input.withConfig({
+const 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:", ";", ""], function (_ref4) {
-  var checked = _ref4.checked,
-    status = _ref4.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:", ";", ""], ({
+  checked,
+  status
+}) => {
   if (checked) {
     return designTokens.base.color.primary6;
   }
@@ -55,9 +49,10 @@ var StyledQuestionCheckboxInput = styled__default.default.input.withConfig({
     default:
       return 'transparent';
   }
-}, function (_ref5) {
-  var checked = _ref5.checked,
-    status = _ref5.status;
+}, ({
+  checked,
+  status
+}) => {
   if (checked) {
     return designTokens.base.color.primary6;
   }
@@ -67,16 +62,29 @@ var StyledQuestionCheckboxInput = styled__default.default.input.withConfig({
     case 'wrong':
       return designTokens.base.color.red9;
     default:
-      return "1px solid ".concat(designTokens.base.color.gray3);
+      return `1px solid ${designTokens.base.color.gray3}`;
   }
-}, function (_ref6) {
-  var status = _ref6.status,
-    checked = _ref6.checked;
+}, ({
+  status,
+  checked
+}) => {
   if (checked) {
-    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      ");
+    return `
+        &:after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          width: 5px;
+          height: 10px;
+          border: solid ${designTokens.base.color.primary1};
+          transform: translate(-50%, -50%) rotate(45deg);
+          border-width: 0 3px 3px 0;
+        }
+      `;
   }
   if (status) {
-    var bgColor;
+    let bgColor;
     switch (status) {
       case 'correct':
         bgColor = designTokens.base.color.green9;
@@ -88,7 +96,7 @@ var StyledQuestionCheckboxInput = styled__default.default.input.withConfig({
         bgColor = 'transparent';
         break;
     }
-    var borderColor;
+    let borderColor;
     switch (status) {
       case 'correct':
         borderColor = designTokens.base.color.green1;
@@ -100,14 +108,28 @@ var StyledQuestionCheckboxInput = styled__default.default.input.withConfig({
         borderColor = designTokens.base.color.navy5;
         break;
     }
-    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        ");
+    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};
+          }
+        `;
   }
 });
-var StyledLabel = styled__default.default.label.withConfig({
+const StyledLabel = styled.label.withConfig({
   componentId: "sc-em5vxx-3"
-})(["word-break:break-all;margin-right:0.875rem;font-size:", ";color:", ";& p{color:", ";}"], designTokens.base.size.body3, function (_ref7) {
-  var checked = _ref7.checked,
-    status = _ref7.status;
+})(["word-break:break-all;margin-right:0.875rem;font-size:", ";color:", ";& p{color:", ";}"], designTokens.base.size.body3, ({
+  checked,
+  status
+}) => {
   if (checked) {
     return designTokens.base.color.primary6;
   }
@@ -119,9 +141,10 @@ var StyledLabel = styled__default.default.label.withConfig({
     default:
       return designTokens.base.color.navy0;
   }
-}, function (_ref8) {
-  var checked = _ref8.checked,
-    status = _ref8.status;
+}, ({
+  checked,
+  status
+}) => {
   if (checked) {
     return designTokens.base.color.primary6;
   }
@@ -134,41 +157,41 @@ var StyledLabel = styled__default.default.label.withConfig({
       return designTokens.base.color.navy0;
   }
 });
-var QuestionCheckboxOption = React__default.default.memo(function (_ref9) {
-  var value = _ref9.value,
-    status = _ref9.status,
-    isAnswer = _ref9.isAnswer,
-    children = _ref9.children;
-  var _useQuestionCheckboxC = QuestionCheckboxContext.useQuestionCheckboxContext(),
-    selectedOptions = _useQuestionCheckboxC.selectedOptions,
-    disabled = _useQuestionCheckboxC.disabled,
-    onSelect = _useQuestionCheckboxC.onSelect;
-  var checked = selectedOptions.includes(value);
-  return jsxRuntime.jsxs(StyledQuestionCheckboxOption, {
+const QuestionCheckboxOption = React.memo(({
+  value,
+  status,
+  isAnswer,
+  children
+}) => {
+  const {
+    selectedOptions,
+    disabled,
+    onSelect
+  } = QuestionCheckboxContext.useQuestionCheckboxContext();
+  const checked = selectedOptions.includes(value);
+  return React.createElement(StyledQuestionCheckboxOption, {
     isAnswer: isAnswer,
     disabled: disabled,
     checked: checked,
-    onClick: function onClick(e) {
+    onClick: e => {
       e.preventDefault();
       if (disabled) {
         return;
       }
       onSelect(value);
     },
-    status: status,
-    children: [jsxRuntime.jsx(StyledCustomCheckboxButton, {}), jsxRuntime.jsx(StyledQuestionCheckboxInput, {
-      id: value,
-      readOnly: true,
-      type: "checkbox",
-      checked: checked,
-      status: status
-    }), jsxRuntime.jsx(StyledLabel, {
-      htmlFor: value,
-      checked: checked,
-      status: status,
-      children: children
-    })]
-  });
+    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));
 });
 
 exports.default = QuestionCheckboxOption;

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

@@ -3,25 +3,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var styled = require('styled-components');
 var QuestionRadioContext = require('./QuestionRadioContext.js');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-
-var StyledQuestionRadio = styled__default.default.div.withConfig({
+const StyledQuestionRadio = styled.div.withConfig({
   componentId: "sc-4da40f-0"
 })(["display:flex;flex-direction:column;"]);
-var QuestionRadio = function QuestionRadio(_a) {
-  var children = _a.children,
+const QuestionRadio = _a => {
+  var {
+      children
+    } = _a,
     props = tslib.__rest(_a, ["children"]);
-  return jsxRuntime.jsx(QuestionRadioContext.QuestionRadioContextProvider, Object.assign({}, props, {
-    children: jsxRuntime.jsx(StyledQuestionRadio, {
-      children: children
-    })
-  }));
+  return React.createElement(QuestionRadioContext.QuestionRadioContextProvider, Object.assign({}, props), React.createElement(StyledQuestionRadio, null, children));
 };
 
 exports.default = QuestionRadio;

package/cjs/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): JSX.Element;
+declare function QuestionRadioContextProvider({ selectedValue, onSelect, disabled, children, }: QuestionRadioProviderProps): React.JSX.Element;
 declare function useQuestionRadioContext(): Value;
 export { QuestionRadioContextProvider, useQuestionRadioContext };