@elice/material-quiz 1.220803.0

package/cjs/components/material-quiz-edit/options/OptionText.js

@@ -0,0 +1,99 @@
+'use strict';
+
+var React = require('react');
+var reactHookForm = require('react-hook-form');
+var reactIntl = require('react-intl');
+var blocks = require('@elice/blocks');
+var context = require('../context.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const MIN_TEXT_LENGTH = 1;
+const MAX_TEXT_LENGTH = 128;
+
+const OptionText = () => {
+  const intl = reactIntl.useIntl();
+  const {
+    disabled
+  } = context.useMaterialQuizEditContext();
+  const {
+    control,
+    watch
+  } = reactHookForm.useFormContext();
+  const watchedIsAutoGrade = watch('isAutoGrade'); //
+  //
+  //
+
+  return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(reactHookForm.Controller, {
+    control: control,
+    name: "answerInfo",
+    rules: {
+      required: {
+        value: watchedIsAutoGrade,
+        message: intl.formatMessage({
+          id: 'option.text.answerInfo.errorMessage.required'
+        })
+      },
+      minLength: {
+        value: MIN_TEXT_LENGTH,
+        message: intl.formatMessage({
+          id: 'common.errorMessage.range'
+        }, {
+          min: MIN_TEXT_LENGTH,
+          max: MAX_TEXT_LENGTH
+        })
+      },
+      maxLength: {
+        value: MAX_TEXT_LENGTH,
+        message: intl.formatMessage({
+          id: 'common.errorMessage.range'
+        }, {
+          min: MIN_TEXT_LENGTH,
+          max: MAX_TEXT_LENGTH
+        })
+      }
+    },
+    render: ({
+      field,
+      fieldState
+    }) => {
+      var _a;
+
+      return React__default["default"].createElement(blocks.Input, Object.assign({
+        size: "small",
+        width: "full",
+        minLength: MIN_TEXT_LENGTH,
+        maxLength: MAX_TEXT_LENGTH,
+        readOnly: disabled,
+        disabled: !watchedIsAutoGrade,
+        invalid: fieldState.invalid,
+        invalidText: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message,
+        helpText: intl.formatMessage({
+          id: 'option.text.answerInfo.hintText'
+        })
+      }, field, {
+        value: field.value
+      }));
+    }
+  }), React__default["default"].createElement(blocks.Vspace, {
+    height: 0.5
+  }), React__default["default"].createElement(reactHookForm.Controller, {
+    control: control,
+    name: "isAutoGrade",
+    render: ({
+      field
+    }) => React__default["default"].createElement(blocks.Checkbox, Object.assign({
+      size: "small"
+    }, field, {
+      value: !field.value,
+      checked: !field.value,
+      onChange: v => field.onChange(!v)
+    }), React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "option.text.isAutoGrade.checkbox.label"
+    }))
+  }));
+};
+
+module.exports = OptionText;

package/cjs/components/material-quiz-edit/utils/editValue.d.ts

@@ -0,0 +1,15 @@
+import type { MaterialQuizEditValue } from '../MaterialQuizEdit';
+export declare type _QuizEditValue = Omit<MaterialQuizEditValue, 'optionInfo'> & {
+    optionInfo: {
+        id: string;
+        value: string;
+    }[];
+};
+/**
+ *
+ */
+export declare function manipulateValue(v: MaterialQuizEditValue): _QuizEditValue;
+/**
+ * Restore manipulation from `manipulateValue()`.
+ */
+export declare function restoreValue(v: _QuizEditValue): MaterialQuizEditValue;

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

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var randomId = require('./randomId.js');
+
+/**
+ *
+ */
+
+function manipulateValue(v) {
+  var _a, _b;
+
+  return Object.assign(Object.assign({}, v), {
+    // convert string array to object array
+    // - ref: https://github.com/react-hook-form/react-hook-form/issues/7622#issuecomment-1018893318
+    optionInfo: Array.isArray(v.optionInfo) ? v.optionInfo.map(option => ({
+      id: randomId.createRandomId(),
+      value: option
+    })) : [],
+    // remove `"` mark around value
+    answerInfo: typeof v.answerInfo === 'string' ? (_b = (_a = /^"?([^"]*)"?$/.exec(v.answerInfo)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : '' : v.answerInfo
+  });
+}
+/**
+ * Restore manipulation from `manipulateValue()`.
+ */
+
+function restoreValue(v) {
+  return Object.assign(Object.assign({}, v), {
+    optionInfo: v.optionInfo.length ? v.optionInfo.map(option => option.value) : null,
+    answerInfo: Array.isArray(v.answerInfo) ? v.answerInfo : typeof v.answerInfo === 'object' || typeof v.answerInfo === 'undefined' ? undefined : `"${v.answerInfo}"`
+  });
+}
+
+exports.manipulateValue = manipulateValue;
+exports.restoreValue = restoreValue;

package/cjs/components/material-quiz-edit/utils/randomId.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Create random ID.
+ */
+export declare function createRandomId(): string;

package/cjs/components/material-quiz-edit/utils/randomId.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * Create random ID.
+ */
+function createRandomId() {
+  return Math.random().toString(36).substring(2);
+}
+
+exports.createRandomId = createRandomId;

package/cjs/components/shared/QuestionBox.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { ButtonProps } from '@elice/blocks';
+interface QuestionBoxProps {
+    footerActions?: ButtonProps[];
+    title?: string;
+    submitResult?: React.ReactNode;
+    submitStatus?: React.ReactNode;
+    onNext?: () => void;
+    isNextActive?: boolean;
+}
+export declare const StyledQuestionBox: import("styled-components").StyledComponent<"div", any, {
+    vertical: boolean;
+    hasFooter: boolean;
+}, never>;
+declare const QuestionBox: React.FC<QuestionBoxProps>;
+export default QuestionBox;

package/cjs/components/shared/QuestionBox.js

@@ -0,0 +1,111 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var reactIntl = require('react-intl');
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var styled = require('styled-components');
+var MaterialQuizContext = require('../material-quiz/context/MaterialQuizContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledQuestionBox = styled__default["default"].div.withConfig({
+  componentId: "sc-6qfyxj-0"
+})(["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__default["default"].div.withConfig({
+  componentId: "sc-6qfyxj-1"
+})(["display:flex;justify-content:space-between;background-color:", ";padding:1rem 1.5rem;flex:none;height:3.5rem;"], designTokens.base.color.navy6);
+const StyledQuestionBoxBody = styled__default["default"].div.withConfig({
+  componentId: "sc-6qfyxj-2"
+})(["padding:1.5rem;background-color:", ";flex:auto;", ""], designTokens.base.color.navy7, ({
+  hasFooter
+}) => hasFooter ? 'height: 100%; overflow-y: auto;' : '');
+const StyledQuestionBoxFooter = styled__default["default"].div.withConfig({
+  componentId: "sc-6qfyxj-3"
+})(["flex:none;display:flex;justify-content:space-between;align-items:center;padding:0.75rem 1.5rem;background-color:", ";", ""], designTokens.base.color.navy6, ({
+  vertical
+}) => {
+  return vertical ? `
+          flex-direction: column;
+          align-items: flex-start;
+        ` : '';
+});
+const StyledQuestionBoxFooterActions = styled__default["default"].div.withConfig({
+  componentId: "sc-6qfyxj-4"
+})(["display:flex;"]);
+const StyledQuestionBoxFooterStatus = styled__default["default"].div.withConfig({
+  componentId: "sc-6qfyxj-5"
+})(["margin-left:0.75rem;", ""], ({
+  vertical
+}) => {
+  return vertical ? `
+          margin-left: 0;
+          margin-top: 0.75rem;
+        ` : '';
+});
+
+const QuestionBox = _a => {
+  var {
+    children,
+    footerActions = [],
+    title,
+    submitResult,
+    submitStatus,
+    onNext,
+    isNextActive
+  } = _a,
+      props = tslib.__rest(_a, ["children", "footerActions", "title", "submitResult", "submitStatus", "onNext", "isNextActive"]);
+
+  const intl = reactIntl.useIntl();
+  const {
+    vertical
+  } = MaterialQuizContext.useMaterialQuizState();
+  const hasFooter = footerActions.length > 0;
+  const header = React__default["default"].createElement(StyledQuestionBoxHeader, null, React__default["default"].createElement(blocks.Text, {
+    bold: true,
+    customStyles: {
+      color: designTokens.base.color.navy0
+    }
+  }, title || ' '), submitResult ? submitResult : null);
+  const body = React__default["default"].createElement(StyledQuestionBoxBody, {
+    hasFooter: hasFooter
+  }, children);
+  const footer = React__default["default"].createElement(StyledQuestionBoxFooter, {
+    vertical: vertical
+  }, React__default["default"].createElement(StyledQuestionBoxFooterActions, null, footerActions.map((action, index) => React__default["default"].createElement(blocks.Button, Object.assign({
+    key: index,
+    size: "small"
+  }, action), action.children)), isNextActive ? React__default["default"].createElement(blocks.Box, {
+    marginleft: "0.75rem"
+  }, React__default["default"].createElement(blocks.Button, {
+    size: "small",
+    border: true,
+    tabIndex: 0,
+    transparent: false,
+    role: "lightpurple",
+    onClick: onNext
+  }, intl.formatMessage({
+    id: 'materialQuiz.next'
+  }))) : null), React__default["default"].createElement(StyledQuestionBoxFooterStatus, {
+    vertical: vertical
+  }, submitStatus));
+  return React__default["default"].createElement(StyledQuestionBox, Object.assign({}, props, {
+    hasFooter: hasFooter,
+    vertical: vertical
+  }), header, body, footerActions.length > 0 ? footer : null);
+};
+
+exports.StyledQuestionBox = StyledQuestionBox;
+exports["default"] = QuestionBox;

package/cjs/components/shared/QuizDraggbleDroppedOption.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { QuizDraggbleOptionRole } from './QuizDraggbleOption';
+interface QuizDraggbleDroppedOptionProps {
+    id: string;
+    content: string;
+    disabled: boolean;
+    role: QuizDraggbleOptionRole;
+    indexOrder?: number;
+    isMarkdown?: boolean;
+}
+declare const QuizDraggbleDroppedOption: React.FC<QuizDraggbleDroppedOptionProps>;
+export default QuizDraggbleDroppedOption;

package/cjs/components/shared/QuizDraggbleDroppedOption.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var React = require('react');
+var QuizDraggbleOption = require('./QuizDraggbleOption.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const QuizDraggbleDroppedOption = ({
+  id,
+  content,
+  disabled = false,
+  role,
+  indexOrder,
+  isMarkdown
+}) => {
+  return React__default["default"].createElement(QuizDraggbleOption, {
+    id: id,
+    key: id,
+    content: content,
+    className: "quiz-answer",
+    disabled: disabled,
+    role: role,
+    indexOrder: indexOrder,
+    clone: true,
+    isMarkdown: isMarkdown
+  });
+};
+
+module.exports = QuizDraggbleDroppedOption;

package/cjs/components/shared/QuizDraggbleDummyOption.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { EbDroppableProps } from '../eb-sortable/EbDroppable';
+interface QuizDraggbleDummyOptionProps {
+    indexOrder: number;
+    onDrop: EbDroppableProps['onDrop'];
+}
+declare const QuizDraggbleDummyOption: React.FC<QuizDraggbleDummyOptionProps>;
+export default QuizDraggbleDummyOption;

package/cjs/components/shared/QuizDraggbleDummyOption.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var React = require('react');
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var styled = require('styled-components');
+var EbDroppable = require('../eb-sortable/EbDroppable.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledQuizDraggbleDummyOption = styled__default["default"](EbDroppable).withConfig({
+  componentId: "sc-1ayp8c1-0"
+})(["display:flex;justify-content:space-between;align-items:center;border:1px dashed ", ";border-radius:8px;overflow:hidden;background-color:", ";padding:0.875rem;color:", ";font-size:0.875rem;&.ui-droppable-hover{outline:1px dashed ", ";}"], designTokens.base.color.navy4, designTokens.base.color.navy5, designTokens.base.color.navy0, designTokens.base.color.navy0);
+const StyledOrder = styled__default["default"].div.withConfig({
+  componentId: "sc-1ayp8c1-1"
+})(["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;"], designTokens.base.color.navy0, designTokens.base.color.navy4);
+
+const QuizDraggbleDummyOption = ({
+  indexOrder,
+  onDrop
+}) => {
+  return React__default["default"].createElement(StyledQuizDraggbleDummyOption, {
+    onDrop: onDrop
+  }, React__default["default"].createElement(blocks.Text, {
+    size: "small",
+    wordBreak: "break-all",
+    customStyles: {
+      color: designTokens.base.color.navy0
+    }
+  }, '답안을 드래그 앤 드롭하세요.'), React__default["default"].createElement(StyledOrder, null, indexOrder));
+};
+
+module.exports = QuizDraggbleDummyOption;

package/cjs/components/shared/QuizDraggbleOption.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export declare type QuizDraggbleOptionRole = 'default' | 'correct' | 'wrong' | 'answer';
+export interface QuizDraggbleOptionProps {
+    id: string;
+    className: string;
+    content: string;
+    disabled?: boolean;
+    role?: QuizDraggbleOptionRole;
+    indexOrder?: number;
+    clone?: boolean;
+    isMarkdown?: boolean;
+}
+declare const QuizDraggbleOption: React.FC<QuizDraggbleOptionProps>;
+export default QuizDraggbleOption;

package/cjs/components/shared/QuizDraggbleOption.js

@@ -0,0 +1,191 @@
+'use strict';
+
+var React = require('react');
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var icons = require('@elice/icons');
+var styled = require('styled-components');
+var EbDraggable = require('../eb-sortable/EbDraggable.js');
+var MaterialQuizContext = require('../material-quiz/context/MaterialQuizContext.js');
+var StyledMarkdown = require('./StyledMarkdown.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledQuizDraggbleOptionHandle = styled__default["default"].div.withConfig({
+  componentId: "sc-19b0zkq-0"
+})(["display:flex;align-items:center;justify-content:center;background-color:", ";width:1.5rem;flex:none;"], designTokens.base.color.navy3);
+const StyledQuizDraggbleOptionContent = styled__default["default"].div.withConfig({
+  componentId: "sc-19b0zkq-1"
+})(["display:flex;justify-content:space-between;min-width:0;align-items:center;flex:auto;padding:0.875rem;border:", ";background-color:", ";"], ({
+  role
+}) => {
+  switch (role) {
+    case 'correct':
+      return `1px solid ${designTokens.base.color.primary6}`;
+
+    case 'wrong':
+      return `1px solid ${designTokens.base.color.red6}`;
+
+    default:
+      return '';
+  }
+}, ({
+  role
+}) => {
+  switch (role) {
+    case 'answer':
+      return designTokens.base.color.primary6;
+
+    default:
+      return '';
+  }
+});
+const StyledOrder = styled__default["default"].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;"], designTokens.base.color.navy0, designTokens.base.color.navy4);
+const StyledQuizDraggbleOption = styled__default["default"](EbDraggable).withConfig({
+  componentId: "sc-19b0zkq-3"
+})(["display:flex;border-radius:8px;border:1px solid ", ";background-color:", ";overflow:hidden;z-index:999 !important;", "{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);}"], designTokens.base.color.navy4, designTokens.base.color.navy5, StyledQuizDraggbleOptionHandle, ({
+  role
+}) => {
+  switch (role) {
+    case 'answer':
+      return designTokens.base.color.primary4;
+    // todos
+
+    case 'correct':
+      return designTokens.base.color.green4;
+
+    case 'wrong':
+      return designTokens.base.color.red4;
+
+    default:
+      return designTokens.base.color.navy3;
+  }
+}, ({
+  role
+}) => {
+  switch (role) {
+    case 'answer':
+      return designTokens.base.color.primary9;
+    // todos
+
+    case 'correct':
+      return designTokens.base.color.green9;
+
+    case 'wrong':
+      return designTokens.base.color.red9;
+
+    default:
+      return designTokens.base.color.navy5;
+  }
+}, StyledQuizDraggbleOptionContent, ({
+  role
+}) => {
+  switch (role) {
+    case 'answer':
+      return designTokens.base.color.primary1;
+    // todos
+
+    case 'correct':
+      return designTokens.base.color.green1;
+
+    case 'wrong':
+      return designTokens.base.color.red1;
+
+    default:
+      return designTokens.base.color.navy5;
+  }
+}, ({
+  role
+}) => {
+  switch (role) {
+    case 'answer':
+      return designTokens.base.color.primary9;
+    // todos
+
+    case 'correct':
+      return designTokens.base.color.green9;
+
+    case 'wrong':
+      return designTokens.base.color.red9;
+
+    default:
+      return designTokens.base.color.navy0;
+  }
+}, StyledOrder, ({
+  role
+}) => {
+  switch (role) {
+    case 'answer':
+      return designTokens.base.color.primary3;
+    // todos
+
+    case 'correct':
+      return designTokens.base.color.green3;
+
+    case 'wrong':
+      return designTokens.base.color.red3;
+
+    default:
+      return designTokens.base.color.navy4;
+  }
+}, ({
+  role
+}) => {
+  switch (role) {
+    case 'answer':
+      return designTokens.base.color.primary9;
+    // todos
+
+    case 'correct':
+      return designTokens.base.color.green9;
+
+    case 'wrong':
+      return designTokens.base.color.red9;
+
+    default:
+      return designTokens.base.color.navy0;
+  }
+}, designTokens.base.color.navy0, StyledQuizDraggbleOptionHandle, designTokens.base.color.navy5, StyledQuizDraggbleOptionContent, designTokens.base.color.navy4, designTokens.base.color.navy4, StyledOrder, designTokens.base.color.navy0, designTokens.base.color.navy5, designTokens.base.color.navy0);
+
+const QuizDraggbleOption = ({
+  id,
+  className,
+  content,
+  disabled = false,
+  role = 'default',
+  indexOrder,
+  clone = false,
+  isMarkdown = false
+}) => {
+  const {
+    vertical
+  } = MaterialQuizContext.useMaterialQuizState();
+  return React__default["default"].createElement(StyledQuizDraggbleOption, {
+    id: id,
+    className: className,
+    disabled: disabled,
+    role: role,
+    clone: clone,
+    vertical: vertical
+  }, React__default["default"].createElement(StyledQuizDraggbleOptionHandle, null, React__default["default"].createElement(blocks.Icon, {
+    size: "large",
+    icon: icons.eilDraggableVertical
+  })), React__default["default"].createElement(StyledQuizDraggbleOptionContent, null, isMarkdown ? React__default["default"].createElement(StyledMarkdown, {
+    children: content,
+    dark: true,
+    paddingx: 0,
+    paddingy: 0
+  }) : React__default["default"].createElement(blocks.Text, {
+    size: "small",
+    userSelect: "none",
+    wordBreak: "break-all",
+    role: role === 'answer' ? 'white' : 'default'
+  }, content), indexOrder ? React__default["default"].createElement(StyledOrder, null, indexOrder) : null));
+};
+
+module.exports = QuizDraggbleOption;

package/cjs/components/shared/StyledMarkdown.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const StyledMarkdown: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/markdown").MarkdownProps & import("react").RefAttributes<HTMLParagraphElement>>, any, {}, never>;
+export default StyledMarkdown;

package/cjs/components/shared/StyledMarkdown.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var markdown = require('@elice/markdown');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledMarkdown = styled__default["default"](markdown.Markdown).withConfig({
+  componentId: "sc-l6r531-0"
+})(["p{margin:0 !important;}"]);
+
+module.exports = StyledMarkdown;

package/cjs/components/shared/index.d.ts

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

package/cjs/components/shared/question-checkbox/QuestionCheckbox.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface QuestionCheckboxProps {
+    selectedOptions: any[];
+    onSelect: (index: number) => void;
+    disabled: boolean;
+}
+declare const QuestionCheckbox: React.FC<QuestionCheckboxProps>;
+export default QuestionCheckbox;

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

@@ -0,0 +1,26 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var styled = require('styled-components');
+var QuestionCheckboxContext = require('./QuestionCheckboxContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledQuestionCheckbox = styled__default["default"].div.withConfig({
+  componentId: "sc-1jgy6x5-0"
+})(["display:flex;flex-direction:column;"]);
+
+const QuestionCheckbox = _a => {
+  var {
+    children
+  } = _a,
+      props = tslib.__rest(_a, ["children"]);
+
+  return React__default["default"].createElement(QuestionCheckboxContext.QuestionCheckboxContextProvider, Object.assign({}, props), React__default["default"].createElement(StyledQuestionCheckbox, null, children));
+};
+
+module.exports = QuestionCheckbox;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { QuestionCheckboxProps } from './QuestionCheckbox';
+declare type Value = Pick<QuestionCheckboxProps, 'selectedOptions' | 'disabled' | 'onSelect'>;
+interface QuestionCheckboxProviderProps extends QuestionCheckboxProps {
+    children: React.ReactNode;
+}
+declare function QuestionCheckboxContextProvider({ selectedOptions, onSelect, disabled, children, }: QuestionCheckboxProviderProps): JSX.Element;
+declare function useQuestionCheckboxContext(): Value;
+export { QuestionCheckboxContextProvider, useQuestionCheckboxContext };