@pie-element/multiple-choice 9.15.6-next.0 → 9.15.6-next.3

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 (7) hide show
  1. package/lib/choice-input.js +33 -27
  2. package/lib/choice-input.js.map +1 -1
  3. package/module/configure.js +1 -1
  4. package/module/element.js +69 -61
  5. package/module/manifest.json +1 -1
  6. package/module/print.js +69 -61
  7. package/package.json +2 -2
package/lib/choice-input.js CHANGED
@@ -94,6 +94,14 @@ var styleSheet = function styleSheet(theme) {
94
94
  // visually reduce right padding, but maintain accessibility padding for checkbox indicators to be circles
95
95
  marginLeft: "-".concat(theme.spacing.unit, "px")
96
96
  }
97
+ },
98
+ srOnly: {
99
+ position: 'absolute',
100
+ left: '-10000px',
101
+ top: 'auto',
102
+ width: '1px',
103
+ height: '1px',
104
+ overflow: 'hidden'
97
105
  }
98
106
  };
99
107
  };
@@ -251,6 +259,7 @@ var ChoiceInput = /*#__PURE__*/function (_React$Component) {
251
259
  _this = _super.call(this, props);
252
260
  _this.onToggleChoice = _this.onToggleChoice.bind((0, _assertThisInitialized2["default"])(_this));
253
261
  _this.choiceId = _this.generateChoiceId();
262
+ _this.descId = "".concat(_this.choiceId, "-desc");
254
263
  return _this;
255
264
  }
256
265
 
@@ -301,6 +310,27 @@ var ChoiceInput = /*#__PURE__*/function (_React$Component) {
301
310
  tagName: "span"
302
311
  }));
303
312
 
313
+ var screenReaderLabel = /*#__PURE__*/_react["default"].createElement("span", {
314
+ id: this.descId,
315
+ className: classes.srOnly
316
+ }, choiceMode === 'checkbox' ? 'Checkbox to select the answer below' : 'Radio button to select the answer below');
317
+
318
+ var tagProps = {
319
+ disabled: disabled,
320
+ checked: checked,
321
+ correctness: correctness,
322
+ value: value,
323
+ id: this.choiceId,
324
+ onChange: this.onToggleChoice,
325
+ 'aria-describedby': this.descId
326
+ };
327
+ var control = isSelectionButtonBelow ? /*#__PURE__*/_react["default"].createElement("span", {
328
+ className: classes.belowSelectionComponent
329
+ }, screenReaderLabel, /*#__PURE__*/_react["default"].createElement(Tag, (0, _extends2["default"])({}, tagProps, {
330
+ style: {
331
+ padding: 0
332
+ }
333
+ })), displayKey ? "".concat(displayKey, ".") : '') : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, screenReaderLabel, /*#__PURE__*/_react["default"].createElement(Tag, tagProps));
304
334
  return /*#__PURE__*/_react["default"].createElement("div", {
305
335
  className: (0, _classnames["default"])(className, 'corespring-' + classSuffix, 'choice-input')
306
336
  }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -309,36 +339,12 @@ var ChoiceInput = /*#__PURE__*/function (_React$Component) {
309
339
  correctness: correctness
310
340
  }), /*#__PURE__*/_react["default"].createElement("div", {
311
341
  className: (0, _classnames["default"])(holderClassNames, 'checkbox-holder')
312
- }, isSelectionButtonBelow ? /*#__PURE__*/_react["default"].createElement(StyledFormControlLabel, {
313
- label: choicelabel,
314
- value: value,
315
- htmlFor: this.choiceId,
316
- labelPlacement: 'top',
317
- control: /*#__PURE__*/_react["default"].createElement("span", {
318
- className: classes.belowSelectionComponent
319
- }, /*#__PURE__*/_react["default"].createElement(Tag, {
320
- disabled: disabled,
321
- checked: checked,
322
- correctness: correctness,
323
- value: value,
324
- id: this.choiceId,
325
- onChange: this.onToggleChoice,
326
- style: {
327
- padding: 0
328
- }
329
- }), displayKey ? "".concat(displayKey, ".") : '')
330
- }) : /*#__PURE__*/_react["default"].createElement(StyledFormControlLabel, {
342
+ }, /*#__PURE__*/_react["default"].createElement(StyledFormControlLabel, {
331
343
  label: choicelabel,
332
344
  value: value,
333
345
  htmlFor: this.choiceId,
334
- control: /*#__PURE__*/_react["default"].createElement(Tag, {
335
- disabled: disabled,
336
- checked: checked,
337
- correctness: correctness,
338
- value: value,
339
- id: this.choiceId,
340
- onChange: this.onToggleChoice
341
- })
346
+ labelPlacement: isSelectionButtonBelow ? 'top' : undefined,
347
+ control: control
342
348
  }))), rationale && /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
343
349
  className: "rationale",
344
350
  defaultClassName: "rationale",
package/lib/choice-input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/choice-input.jsx"],"names":["CLASS_NAME","styleSheet","theme","row","display","alignItems","backgroundColor","color","background","checkboxHolder","flex","text","fontSize","horizontalLayout","padding","spacing","unit","margin","belowLayout","belowLayoutCenter","justifyContent","belowSelectionComponent","marginLeft","formStyleSheet","label","letterSpacing","disabled","cursor","StyledFormControlLabel","name","props","classes","colorStyle","varName","fallback","inputStyles","correct","incorrect","root","primaryLight","checked","primary","opacity","pointerEvents","focusVisibleUnchecked","outline","focusUncheckedBorder","focusUnchecked","focusVisibleChecked","focusCheckedBorder","focusChecked","StyledCheckbox","correctness","onChange","value","id","key","k","resolved","miniProps","StyledRadio","ChoiceInput","onToggleChoice","bind","choiceId","generateChoiceId","event","Math","random","toFixed","choiceMode","displayKey","feedback","className","rationale","hideTick","isEvaluateMode","choicesLayout","isSelectionButtonBelow","Tag","classSuffix","holderClassNames","choicelabel","React","Component","PropTypes","oneOf","string","bool","isRequired","func","object"],"mappings":"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","sourcesContent":["import FormControlLabel from '@material-ui/core/FormControlLabel';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport { Feedback, color, PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';\nimport Radio from '@material-ui/core/Radio';\nimport classNames from 'classnames';\n\nimport FeedbackTick from './feedback-tick';\n\nconst CLASS_NAME = 'multiple-choice-component';\n\nconst styleSheet = (theme) => ({\n row: {\n display: 'flex',\n alignItems: 'center',\n backgroundColor: color.background(),\n },\n checkboxHolder: {\n display: 'flex',\n alignItems: 'center',\n backgroundColor: color.background(),\n flex: 1,\n '& label': {\n color: color.text(),\n '& > span': {\n fontSize: 'inherit',\n },\n },\n },\n horizontalLayout: {\n [`& .${CLASS_NAME}`]: {\n // visually reduce right padding, but maintain accessibility padding for checkbox indicators to be circles\n // add margin to the top, left and bottom of the checkbox to keep the same spacing as before\n padding: theme.spacing.unit,\n margin: `${theme.spacing.unit / 2 }px 0 ${theme.spacing.unit / 2}px ${theme.spacing.unit/ 2}px`,\n },\n },\n belowLayout: {\n '& > label': {\n alignItems: 'flex-start',\n },\n },\n belowLayoutCenter: {\n justifyContent: 'center',\n '& > label': {\n alignItems: 'center',\n },\n },\n belowSelectionComponent: {\n display: 'flex',\n alignItems: 'center',\n '& > span': {\n // visually reduce right padding, but maintain accessibility padding for checkbox indicators to be circles\n marginLeft: `-${theme.spacing.unit}px`,\n },\n },\n});\n\nconst formStyleSheet = {\n label: {\n color: `${color.text()} !important`, //'var(--choice-input-color, black)'\n backgroundColor: color.background(),\n letterSpacing: 'normal',\n },\n disabled: {\n // apply to all children\n '& *': {\n cursor: 'not-allowed !important',\n },\n },\n};\n\nexport const StyledFormControlLabel = withStyles(formStyleSheet, {\n name: 'FormControlLabel',\n})((props) => (\n <FormControlLabel {...props} classes={{ label: props.classes.label, disabled: props.classes.disabled }} />\n));\n\nconst colorStyle = (varName, fallback) => ({\n [`&.${CLASS_NAME}`]: {\n color: `var(--choice-input-${varName}, ${fallback}) !important`,\n },\n});\n\nconst inputStyles = {\n 'correct-root': colorStyle('correct-color', color.text()),\n 'correct-checked': colorStyle('correct-selected-color', color.correct()), //green[500]),\n 'correct-disabled': colorStyle('correct-disabled-color', color.disabled()), //'grey'),\n 'incorrect-root': colorStyle('incorrect-color', color.incorrect()),\n 'incorrect-checked': colorStyle('incorrect-checked', color.incorrect()), //orange[500]),\n 'incorrect-disabled': colorStyle('incorrect-disabled-color', color.disabled()),\n root: {\n ...colorStyle('color', color.text()),\n '&:hover': { color: `${color.primaryLight()} !important` },\n },\n checked: colorStyle('selected-color', color.primary()),\n disabled: {\n ...colorStyle('disabled-color', color.text()),\n opacity: 0.6,\n cursor: 'not-allowed !important',\n pointerEvents: 'initial !important',\n },\n focusVisibleUnchecked: {\n outline: `1px solid ${color.focusUncheckedBorder()}`,\n backgroundColor: color.focusUnchecked(),\n },\n focusVisibleChecked: {\n outline: `1px solid ${color.focusCheckedBorder()}`,\n backgroundColor: color.focusChecked(),\n },\n};\n\nexport const StyledCheckbox = withStyles(inputStyles)((props) => {\n const { correctness, classes, checked, onChange, disabled, value, id } = props;\n const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n const resolved = {\n root: classes[key('root')],\n checked: classes[key('checked')],\n disabled: classes[key('disabled')],\n };\n\n const miniProps = { checked, onChange, disabled, value };\n\n return (\n <Checkbox\n id={id}\n aria-checked={checked}\n focusVisibleClassName={checked ? classes.focusVisibleChecked : classes.focusVisibleUnchecked}\n disableRipple\n {...miniProps}\n className={CLASS_NAME}\n classes={{\n root: resolved.root,\n checked: resolved.checked,\n disabled: `${correctness ? '' : resolved.disabled}`,\n }}\n />\n );\n});\n\nexport const StyledRadio = withStyles(inputStyles)((props) => {\n const { correctness, classes, checked, onChange, disabled, value, id } = props;\n const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n const resolved = {\n root: classes[key('root')],\n checked: classes[key('checked')],\n disabled: classes[key('disabled')],\n };\n\n const miniProps = { checked, onChange, disabled, value };\n\n return (\n <Radio\n id={id}\n aria-checked={checked}\n focusVisibleClassName={checked ? classes.focusVisibleChecked : classes.focusVisibleUnchecked}\n disableRipple\n {...miniProps}\n className={CLASS_NAME}\n classes={{\n root: resolved.root,\n checked: resolved.checked,\n disabled: `${correctness ? '' : resolved.disabled}`,\n }}\n />\n );\n});\n\nexport class ChoiceInput extends React.Component {\n static propTypes = {\n choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n displayKey: PropTypes.string,\n checked: PropTypes.bool.isRequired,\n correctness: PropTypes.string,\n disabled: PropTypes.bool.isRequired,\n feedback: PropTypes.string,\n label: PropTypes.string.isRequired,\n rationale: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n value: PropTypes.string.isRequired,\n classes: PropTypes.object,\n className: PropTypes.string,\n hideTick: PropTypes.bool,\n isEvaluateMode: PropTypes.bool,\n choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n isSelectionButtonBelow: PropTypes.bool,\n };\n\n static defaultProps = {\n rationale: null,\n checked: false,\n isEvaluateMode: false,\n };\n\n constructor(props) {\n super(props);\n this.onToggleChoice = this.onToggleChoice.bind(this);\n this.choiceId = this.generateChoiceId();\n }\n\n onToggleChoice(event) {\n this.props.onChange(event);\n }\n\n generateChoiceId() {\n return 'choice-' + (Math.random() * 10000).toFixed();\n }\n\n render() {\n const {\n choiceMode,\n disabled,\n displayKey,\n feedback,\n label,\n correctness,\n classes,\n className,\n rationale,\n hideTick,\n isEvaluateMode,\n choicesLayout,\n value,\n checked,\n isSelectionButtonBelow,\n } = this.props;\n\n const Tag = choiceMode === 'checkbox' ? StyledCheckbox : StyledRadio;\n const classSuffix = choiceMode === 'checkbox' ? 'checkbox' : 'radio-button';\n\n const holderClassNames = classNames(classes.checkboxHolder, {\n [classes.horizontalLayout]: choicesLayout === 'horizontal',\n [classes.belowLayout]: isSelectionButtonBelow && choicesLayout !== 'grid',\n [classes.belowLayoutCenter]: isSelectionButtonBelow && choicesLayout === 'grid',\n });\n\n const choicelabel = (\n <>{displayKey && !isSelectionButtonBelow ? (\n <span className={classes.row}>\n {displayKey}.{'\\u00A0'}\n <PreviewPrompt className=\"label\" prompt={label} tagName=\"span\" />\n </span>\n ) : (\n <PreviewPrompt className=\"label\" prompt={label} tagName=\"span\" />)}</>\n );\n\n return (\n <div className={classNames(className, 'corespring-' + classSuffix, 'choice-input')}>\n <div className={classes.row}>\n {!hideTick && isEvaluateMode && <FeedbackTick correctness={correctness} />}\n <div className={classNames(holderClassNames, 'checkbox-holder')}>\n {isSelectionButtonBelow ? (\n <StyledFormControlLabel\n label={choicelabel}\n value={value}\n htmlFor={this.choiceId}\n labelPlacement={'top'}\n control={\n <span className={classes.belowSelectionComponent}>\n <Tag\n disabled={disabled}\n checked={checked}\n correctness={correctness}\n value={value}\n id={this.choiceId}\n onChange={this.onToggleChoice}\n style={{ padding: 0 }}\n />\n {displayKey ? `${displayKey}.` : ''}\n </span>\n }\n />\n ) : (\n <StyledFormControlLabel\n label={choicelabel}\n value={value}\n htmlFor={this.choiceId}\n control={\n <Tag\n disabled={disabled}\n checked={checked}\n correctness={correctness}\n value={value}\n id={this.choiceId}\n onChange={this.onToggleChoice}\n />\n }\n />\n )}\n </div>\n </div>\n {rationale && <PreviewPrompt className=\"rationale\" defaultClassName=\"rationale\" prompt={rationale} />}\n <Feedback feedback={feedback} correctness={correctness} />\n </div>\n );\n }\n}\n\nexport default withStyles(styleSheet)(ChoiceInput);\n"],"file":"choice-input.js"}
1
+ {"version":3,"sources":["../src/choice-input.jsx"],"names":["CLASS_NAME","styleSheet","theme","row","display","alignItems","backgroundColor","color","background","checkboxHolder","flex","text","fontSize","horizontalLayout","padding","spacing","unit","margin","belowLayout","belowLayoutCenter","justifyContent","belowSelectionComponent","marginLeft","srOnly","position","left","top","width","height","overflow","formStyleSheet","label","letterSpacing","disabled","cursor","StyledFormControlLabel","name","props","classes","colorStyle","varName","fallback","inputStyles","correct","incorrect","root","primaryLight","checked","primary","opacity","pointerEvents","focusVisibleUnchecked","outline","focusUncheckedBorder","focusUnchecked","focusVisibleChecked","focusCheckedBorder","focusChecked","StyledCheckbox","correctness","onChange","value","id","key","k","resolved","miniProps","StyledRadio","ChoiceInput","onToggleChoice","bind","choiceId","generateChoiceId","descId","event","Math","random","toFixed","choiceMode","displayKey","feedback","className","rationale","hideTick","isEvaluateMode","choicesLayout","isSelectionButtonBelow","Tag","classSuffix","holderClassNames","choicelabel","screenReaderLabel","tagProps","control","undefined","React","Component","PropTypes","oneOf","string","bool","isRequired","func","object"],"mappings":"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","sourcesContent":["import FormControlLabel from '@material-ui/core/FormControlLabel';\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport { Feedback, color, PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';\nimport Radio from '@material-ui/core/Radio';\nimport classNames from 'classnames';\n\nimport FeedbackTick from './feedback-tick';\n\nconst CLASS_NAME = 'multiple-choice-component';\n\nconst styleSheet = (theme) => ({\n row: {\n display: 'flex',\n alignItems: 'center',\n backgroundColor: color.background(),\n },\n checkboxHolder: {\n display: 'flex',\n alignItems: 'center',\n backgroundColor: color.background(),\n flex: 1,\n '& label': {\n color: color.text(),\n '& > span': {\n fontSize: 'inherit',\n },\n },\n },\n horizontalLayout: {\n [`& .${CLASS_NAME}`]: {\n // visually reduce right padding, but maintain accessibility padding for checkbox indicators to be circles\n // add margin to the top, left and bottom of the checkbox to keep the same spacing as before\n padding: theme.spacing.unit,\n margin: `${theme.spacing.unit / 2}px 0 ${theme.spacing.unit / 2}px ${theme.spacing.unit / 2}px`,\n },\n },\n belowLayout: {\n '& > label': {\n alignItems: 'flex-start',\n },\n },\n belowLayoutCenter: {\n justifyContent: 'center',\n '& > label': {\n alignItems: 'center',\n },\n },\n belowSelectionComponent: {\n display: 'flex',\n alignItems: 'center',\n '& > span': {\n // visually reduce right padding, but maintain accessibility padding for checkbox indicators to be circles\n marginLeft: `-${theme.spacing.unit}px`,\n },\n },\n srOnly: {\n position: 'absolute',\n left: '-10000px',\n top: 'auto',\n width: '1px',\n height: '1px',\n overflow: 'hidden',\n },\n});\n\nconst formStyleSheet = {\n label: {\n color: `${color.text()} !important`, //'var(--choice-input-color, black)'\n backgroundColor: color.background(),\n letterSpacing: 'normal',\n },\n disabled: {\n // apply to all children\n '& *': {\n cursor: 'not-allowed !important',\n },\n },\n};\n\nexport const StyledFormControlLabel = withStyles(formStyleSheet, {\n name: 'FormControlLabel',\n})((props) => (\n <FormControlLabel {...props} classes={{ label: props.classes.label, disabled: props.classes.disabled }} />\n));\n\nconst colorStyle = (varName, fallback) => ({\n [`&.${CLASS_NAME}`]: {\n color: `var(--choice-input-${varName}, ${fallback}) !important`,\n },\n});\n\nconst inputStyles = {\n 'correct-root': colorStyle('correct-color', color.text()),\n 'correct-checked': colorStyle('correct-selected-color', color.correct()), //green[500]),\n 'correct-disabled': colorStyle('correct-disabled-color', color.disabled()), //'grey'),\n 'incorrect-root': colorStyle('incorrect-color', color.incorrect()),\n 'incorrect-checked': colorStyle('incorrect-checked', color.incorrect()), //orange[500]),\n 'incorrect-disabled': colorStyle('incorrect-disabled-color', color.disabled()),\n root: {\n ...colorStyle('color', color.text()),\n '&:hover': { color: `${color.primaryLight()} !important` },\n },\n checked: colorStyle('selected-color', color.primary()),\n disabled: {\n ...colorStyle('disabled-color', color.text()),\n opacity: 0.6,\n cursor: 'not-allowed !important',\n pointerEvents: 'initial !important',\n },\n focusVisibleUnchecked: {\n outline: `1px solid ${color.focusUncheckedBorder()}`,\n backgroundColor: color.focusUnchecked(),\n },\n focusVisibleChecked: {\n outline: `1px solid ${color.focusCheckedBorder()}`,\n backgroundColor: color.focusChecked(),\n },\n};\n\nexport const StyledCheckbox = withStyles(inputStyles)((props) => {\n const { correctness, classes, checked, onChange, disabled, value, id } = props;\n const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n const resolved = {\n root: classes[key('root')],\n checked: classes[key('checked')],\n disabled: classes[key('disabled')],\n };\n\n const miniProps = { checked, onChange, disabled, value };\n\n return (\n <Checkbox\n id={id}\n aria-checked={checked}\n focusVisibleClassName={checked ? classes.focusVisibleChecked : classes.focusVisibleUnchecked}\n disableRipple\n {...miniProps}\n className={CLASS_NAME}\n classes={{\n root: resolved.root,\n checked: resolved.checked,\n disabled: `${correctness ? '' : resolved.disabled}`,\n }}\n />\n );\n});\n\nexport const StyledRadio = withStyles(inputStyles)((props) => {\n const { correctness, classes, checked, onChange, disabled, value, id } = props;\n const key = (k) => (correctness ? `${correctness}-${k}` : k);\n\n const resolved = {\n root: classes[key('root')],\n checked: classes[key('checked')],\n disabled: classes[key('disabled')],\n };\n\n const miniProps = { checked, onChange, disabled, value };\n\n return (\n <Radio\n id={id}\n aria-checked={checked}\n focusVisibleClassName={checked ? classes.focusVisibleChecked : classes.focusVisibleUnchecked}\n disableRipple\n {...miniProps}\n className={CLASS_NAME}\n classes={{\n root: resolved.root,\n checked: resolved.checked,\n disabled: `${correctness ? '' : resolved.disabled}`,\n }}\n />\n );\n});\n\nexport class ChoiceInput extends React.Component {\n static propTypes = {\n choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n displayKey: PropTypes.string,\n checked: PropTypes.bool.isRequired,\n correctness: PropTypes.string,\n disabled: PropTypes.bool.isRequired,\n feedback: PropTypes.string,\n label: PropTypes.string.isRequired,\n rationale: PropTypes.string,\n onChange: PropTypes.func.isRequired,\n value: PropTypes.string.isRequired,\n classes: PropTypes.object,\n className: PropTypes.string,\n hideTick: PropTypes.bool,\n isEvaluateMode: PropTypes.bool,\n choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n isSelectionButtonBelow: PropTypes.bool,\n };\n\n static defaultProps = {\n rationale: null,\n checked: false,\n isEvaluateMode: false,\n };\n\n constructor(props) {\n super(props);\n this.onToggleChoice = this.onToggleChoice.bind(this);\n this.choiceId = this.generateChoiceId();\n this.descId = `${this.choiceId}-desc`;\n }\n\n onToggleChoice(event) {\n this.props.onChange(event);\n }\n\n generateChoiceId() {\n return 'choice-' + (Math.random() * 10000).toFixed();\n }\n\n render() {\n const {\n choiceMode,\n disabled,\n displayKey,\n feedback,\n label,\n correctness,\n classes,\n className,\n rationale,\n hideTick,\n isEvaluateMode,\n choicesLayout,\n value,\n checked,\n isSelectionButtonBelow,\n } = this.props;\n\n const Tag = choiceMode === 'checkbox' ? StyledCheckbox : StyledRadio;\n const classSuffix = choiceMode === 'checkbox' ? 'checkbox' : 'radio-button';\n\n const holderClassNames = classNames(classes.checkboxHolder, {\n [classes.horizontalLayout]: choicesLayout === 'horizontal',\n [classes.belowLayout]: isSelectionButtonBelow && choicesLayout !== 'grid',\n [classes.belowLayoutCenter]: isSelectionButtonBelow && choicesLayout === 'grid',\n });\n\n const choicelabel = (\n <>\n {displayKey && !isSelectionButtonBelow ? (\n <span className={classes.row}>\n {displayKey}.{'\\u00A0'}\n <PreviewPrompt className=\"label\" prompt={label} tagName=\"span\" />\n </span>\n ) : (\n <PreviewPrompt className=\"label\" prompt={label} tagName=\"span\" />\n )}\n </>\n );\n\n const screenReaderLabel = (\n <span id={this.descId} className={classes.srOnly}>\n {choiceMode === 'checkbox' ? 'Checkbox to select the answer below' : 'Radio button to select the answer below'}\n </span>\n );\n\n const tagProps = {\n disabled,\n checked,\n correctness,\n value,\n id: this.choiceId,\n onChange: this.onToggleChoice,\n 'aria-describedby': this.descId,\n };\n\n const control = isSelectionButtonBelow ? (\n <span className={classes.belowSelectionComponent}>\n {screenReaderLabel}\n <Tag {...tagProps} style={{ padding: 0 }} />\n {displayKey ? `${displayKey}.` : ''}\n </span>\n ) : (\n <>\n {screenReaderLabel}\n <Tag {...tagProps} />\n </>\n );\n\n return (\n <div className={classNames(className, 'corespring-' + classSuffix, 'choice-input')}>\n <div className={classes.row}>\n {!hideTick && isEvaluateMode && <FeedbackTick correctness={correctness} />}\n <div className={classNames(holderClassNames, 'checkbox-holder')}>\n <StyledFormControlLabel\n label={choicelabel}\n value={value}\n htmlFor={this.choiceId}\n labelPlacement={isSelectionButtonBelow ? 'top' : undefined}\n control={control}\n />\n </div>\n </div>\n {rationale && <PreviewPrompt className=\"rationale\" defaultClassName=\"rationale\" prompt={rationale} />}\n <Feedback feedback={feedback} correctness={correctness} />\n </div>\n );\n }\n}\n\nexport default withStyles(styleSheet)(ChoiceInput);\n"],"file":"choice-input.js"}
package/module/configure.js CHANGED
@@ -1,4 +1,4 @@
1
- import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_lodash, _dll_debug} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.8.6/module/index.js";
1
+ import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_lodash, _dll_debug} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.8.7/module/index.js";
2
2
  import {_dll_pie_lib__pie_toolbox_editable_html, _dll_pie_lib__pie_toolbox_config_ui, _dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@6.1.1/module/index.js";
3
3
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
4
4
  function getDefaultExportFromCjs(x) {
package/module/element.js CHANGED
@@ -1,4 +1,4 @@
1
- import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_debug, _dll_pie_lib__pie_toolbox_math_rendering} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.8.6/module/index.js";
1
+ import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_debug, _dll_pie_lib__pie_toolbox_math_rendering} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.8.7/module/index.js";
2
2
  import {_dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@6.1.1/module/index.js";
3
3
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
4
4
  function getDefaultExportFromCjs(x) {
@@ -12168,6 +12168,14 @@ const styleSheet = theme => ({
12168
12168
  '& > span': {
12169
12169
  marginLeft: `-${theme.spacing.unit}px`
12170
12170
  }
12171
+ },
12172
+ srOnly: {
12173
+ position: 'absolute',
12174
+ left: '-10000px',
12175
+ top: 'auto',
12176
+ width: '1px',
12177
+ height: '1px',
12178
+ overflow: 'hidden'
12171
12179
  }
12172
12180
  });
12173
12181
  const formStyleSheet = {
@@ -12193,7 +12201,7 @@ const StyledFormControlLabel = styles$b.withStyles(formStyleSheet, {
12193
12201
  __self: undefined,
12194
12202
  __source: {
12195
12203
  fileName: _jsxFileName$3,
12196
- lineNumber: 78
12204
+ lineNumber: 86
12197
12205
  }
12198
12206
  }));
12199
12207
  const colorStyle = (varName, fallback) => ({
@@ -12259,7 +12267,7 @@ const StyledCheckbox = styles$b.withStyles(inputStyles)(props => {
12259
12267
  __self: undefined,
12260
12268
  __source: {
12261
12269
  fileName: _jsxFileName$3,
12262
- lineNumber: 128
12270
+ lineNumber: 136
12263
12271
  }
12264
12272
  });
12265
12273
  });
@@ -12292,7 +12300,7 @@ const StyledRadio = styles$b.withStyles(inputStyles)(props => {
12292
12300
  __self: undefined,
12293
12301
  __source: {
12294
12302
  fileName: _jsxFileName$3,
12295
- lineNumber: 157
12303
+ lineNumber: 165
12296
12304
  }
12297
12305
  });
12298
12306
  });
@@ -12328,6 +12336,7 @@ class ChoiceInput extends React$4.Component {
12328
12336
  super(props);
12329
12337
  this.onToggleChoice = this.onToggleChoice.bind(this);
12330
12338
  this.choiceId = this.generateChoiceId();
12339
+ this.descId = `${this.choiceId}-desc`;
12331
12340
  }
12332
12341
  onToggleChoice(event) {
12333
12342
  this.props.onChange(event);
@@ -12349,7 +12358,7 @@ class ChoiceInput extends React$4.Component {
12349
12358
  __self: this,
12350
12359
  __source: {
12351
12360
  fileName: _jsxFileName$3,
12352
- lineNumber: 243
12361
+ lineNumber: 253
12353
12362
  }
12354
12363
  }, displayKey, ".", '\u00A0', React$4.createElement(PreviewPrompt$1, {
12355
12364
  className: "label",
@@ -12358,7 +12367,7 @@ class ChoiceInput extends React$4.Component {
12358
12367
  __self: this,
12359
12368
  __source: {
12360
12369
  fileName: _jsxFileName$3,
12361
- lineNumber: 245
12370
+ lineNumber: 255
12362
12371
  }
12363
12372
  })) : React$4.createElement(PreviewPrompt$1, {
12364
12373
  className: "label",
@@ -12367,7 +12376,50 @@ class ChoiceInput extends React$4.Component {
12367
12376
  __self: this,
12368
12377
  __source: {
12369
12378
  fileName: _jsxFileName$3,
12370
- lineNumber: 248
12379
+ lineNumber: 258
12380
+ }
12381
+ }));
12382
+ const screenReaderLabel = React$4.createElement('span', {
12383
+ id: this.descId,
12384
+ className: classes.srOnly,
12385
+ __self: this,
12386
+ __source: {
12387
+ fileName: _jsxFileName$3,
12388
+ lineNumber: 264
12389
+ }
12390
+ }, choiceMode === 'checkbox' ? 'Checkbox to select the answer below' : 'Radio button to select the answer below');
12391
+ const tagProps = {
12392
+ disabled,
12393
+ checked,
12394
+ correctness,
12395
+ value,
12396
+ id: this.choiceId,
12397
+ onChange: this.onToggleChoice,
12398
+ 'aria-describedby': this.descId
12399
+ };
12400
+ const control = isSelectionButtonBelow ? React$4.createElement('span', {
12401
+ className: classes.belowSelectionComponent,
12402
+ __self: this,
12403
+ __source: {
12404
+ fileName: _jsxFileName$3,
12405
+ lineNumber: 280
12406
+ }
12407
+ }, screenReaderLabel, React$4.createElement(Tag, {
12408
+ ...tagProps,
12409
+ style: {
12410
+ padding: 0
12411
+ },
12412
+ __self: this,
12413
+ __source: {
12414
+ fileName: _jsxFileName$3,
12415
+ lineNumber: 282
12416
+ }
12417
+ }), displayKey ? `${displayKey}.` : '') : React$4.createElement(React$4.Fragment, null, screenReaderLabel, React$4.createElement(Tag, {
12418
+ ...tagProps,
12419
+ __self: this,
12420
+ __source: {
12421
+ fileName: _jsxFileName$3,
12422
+ lineNumber: 288
12371
12423
  }
12372
12424
  }));
12373
12425
  return React$4.createElement('div', {
@@ -12375,83 +12427,39 @@ class ChoiceInput extends React$4.Component {
12375
12427
  __self: this,
12376
12428
  __source: {
12377
12429
  fileName: _jsxFileName$3,
12378
- lineNumber: 252
12430
+ lineNumber: 293
12379
12431
  }
12380
12432
  }, React$4.createElement('div', {
12381
12433
  className: classes.row,
12382
12434
  __self: this,
12383
12435
  __source: {
12384
12436
  fileName: _jsxFileName$3,
12385
- lineNumber: 253
12437
+ lineNumber: 294
12386
12438
  }
12387
12439
  }, !hideTick && isEvaluateMode && React$4.createElement(FeedbackTick$1, {
12388
12440
  correctness: correctness,
12389
12441
  __self: this,
12390
12442
  __source: {
12391
12443
  fileName: _jsxFileName$3,
12392
- lineNumber: 254
12444
+ lineNumber: 295
12393
12445
  }
12394
12446
  }), React$4.createElement('div', {
12395
12447
  className: classNames$2(holderClassNames, 'checkbox-holder'),
12396
12448
  __self: this,
12397
12449
  __source: {
12398
12450
  fileName: _jsxFileName$3,
12399
- lineNumber: 255
12400
- }
12401
- }, isSelectionButtonBelow ? React$4.createElement(StyledFormControlLabel, {
12402
- label: choicelabel,
12403
- value: value,
12404
- htmlFor: this.choiceId,
12405
- labelPlacement: 'top',
12406
- control: React$4.createElement('span', {
12407
- className: classes.belowSelectionComponent,
12408
- __self: this,
12409
- __source: {
12410
- fileName: _jsxFileName$3,
12411
- lineNumber: 263
12412
- }
12413
- }, React$4.createElement(Tag, {
12414
- disabled: disabled,
12415
- checked: checked,
12416
- correctness: correctness,
12417
- value: value,
12418
- id: this.choiceId,
12419
- onChange: this.onToggleChoice,
12420
- style: {
12421
- padding: 0
12422
- },
12423
- __self: this,
12424
- __source: {
12425
- fileName: _jsxFileName$3,
12426
- lineNumber: 264
12427
- }
12428
- }), displayKey ? `${displayKey}.` : ''),
12429
- __self: this,
12430
- __source: {
12431
- fileName: _jsxFileName$3,
12432
- lineNumber: 257
12451
+ lineNumber: 296
12433
12452
  }
12434
- }) : React$4.createElement(StyledFormControlLabel, {
12453
+ }, React$4.createElement(StyledFormControlLabel, {
12435
12454
  label: choicelabel,
12436
12455
  value: value,
12437
12456
  htmlFor: this.choiceId,
12438
- control: React$4.createElement(Tag, {
12439
- disabled: disabled,
12440
- checked: checked,
12441
- correctness: correctness,
12442
- value: value,
12443
- id: this.choiceId,
12444
- onChange: this.onToggleChoice,
12445
- __self: this,
12446
- __source: {
12447
- fileName: _jsxFileName$3,
12448
- lineNumber: 283
12449
- }
12450
- }),
12457
+ labelPlacement: isSelectionButtonBelow ? 'top' : undefined,
12458
+ control: control,
12451
12459
  __self: this,
12452
12460
  __source: {
12453
12461
  fileName: _jsxFileName$3,
12454
- lineNumber: 278
12462
+ lineNumber: 297
12455
12463
  }
12456
12464
  }))), rationale && React$4.createElement(PreviewPrompt$1, {
12457
12465
  className: "rationale",
@@ -12460,7 +12468,7 @@ class ChoiceInput extends React$4.Component {
12460
12468
  __self: this,
12461
12469
  __source: {
12462
12470
  fileName: _jsxFileName$3,
12463
- lineNumber: 296
12471
+ lineNumber: 306
12464
12472
  }
12465
12473
  }), React$4.createElement(Feedback, {
12466
12474
  feedback: feedback,
@@ -12468,7 +12476,7 @@ class ChoiceInput extends React$4.Component {
12468
12476
  __self: this,
12469
12477
  __source: {
12470
12478
  fileName: _jsxFileName$3,
12471
- lineNumber: 297
12479
+ lineNumber: 307
12472
12480
  }
12473
12481
  }));
12474
12482
  }
package/module/manifest.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "modules": [
5
5
  {
6
6
  "name": "@pie-lib/pie-toolbox-math-rendering-module",
7
- "version": "3.8.6"
7
+ "version": "3.8.7"
8
8
  },
9
9
  {
10
10
  "name": "@pie-lib/pie-toolbox-module",
package/module/print.js CHANGED
@@ -1,4 +1,4 @@
1
- import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_pie_lib__pie_toolbox_math_rendering, _dll_debug} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.8.6/module/index.js";
1
+ import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_pie_lib__pie_toolbox_math_rendering, _dll_debug} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.8.7/module/index.js";
2
2
  import {_dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@6.1.1/module/index.js";
3
3
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
4
4
  function getDefaultExportFromCjs(x) {
@@ -12168,6 +12168,14 @@ const styleSheet = theme => ({
12168
12168
  '& > span': {
12169
12169
  marginLeft: `-${theme.spacing.unit}px`
12170
12170
  }
12171
+ },
12172
+ srOnly: {
12173
+ position: 'absolute',
12174
+ left: '-10000px',
12175
+ top: 'auto',
12176
+ width: '1px',
12177
+ height: '1px',
12178
+ overflow: 'hidden'
12171
12179
  }
12172
12180
  });
12173
12181
  const formStyleSheet = {
@@ -12193,7 +12201,7 @@ const StyledFormControlLabel = styles$b.withStyles(formStyleSheet, {
12193
12201
  __self: undefined,
12194
12202
  __source: {
12195
12203
  fileName: _jsxFileName$3,
12196
- lineNumber: 78
12204
+ lineNumber: 86
12197
12205
  }
12198
12206
  }));
12199
12207
  const colorStyle = (varName, fallback) => ({
@@ -12259,7 +12267,7 @@ const StyledCheckbox = styles$b.withStyles(inputStyles)(props => {
12259
12267
  __self: undefined,
12260
12268
  __source: {
12261
12269
  fileName: _jsxFileName$3,
12262
- lineNumber: 128
12270
+ lineNumber: 136
12263
12271
  }
12264
12272
  });
12265
12273
  });
@@ -12292,7 +12300,7 @@ const StyledRadio = styles$b.withStyles(inputStyles)(props => {
12292
12300
  __self: undefined,
12293
12301
  __source: {
12294
12302
  fileName: _jsxFileName$3,
12295
- lineNumber: 157
12303
+ lineNumber: 165
12296
12304
  }
12297
12305
  });
12298
12306
  });
@@ -12328,6 +12336,7 @@ class ChoiceInput extends React$4.Component {
12328
12336
  super(props);
12329
12337
  this.onToggleChoice = this.onToggleChoice.bind(this);
12330
12338
  this.choiceId = this.generateChoiceId();
12339
+ this.descId = `${this.choiceId}-desc`;
12331
12340
  }
12332
12341
  onToggleChoice(event) {
12333
12342
  this.props.onChange(event);
@@ -12349,7 +12358,7 @@ class ChoiceInput extends React$4.Component {
12349
12358
  __self: this,
12350
12359
  __source: {
12351
12360
  fileName: _jsxFileName$3,
12352
- lineNumber: 243
12361
+ lineNumber: 253
12353
12362
  }
12354
12363
  }, displayKey, ".", '\u00A0', React$4.createElement(PreviewPrompt$1, {
12355
12364
  className: "label",
@@ -12358,7 +12367,7 @@ class ChoiceInput extends React$4.Component {
12358
12367
  __self: this,
12359
12368
  __source: {
12360
12369
  fileName: _jsxFileName$3,
12361
- lineNumber: 245
12370
+ lineNumber: 255
12362
12371
  }
12363
12372
  })) : React$4.createElement(PreviewPrompt$1, {
12364
12373
  className: "label",
@@ -12367,7 +12376,50 @@ class ChoiceInput extends React$4.Component {
12367
12376
  __self: this,
12368
12377
  __source: {
12369
12378
  fileName: _jsxFileName$3,
12370
- lineNumber: 248
12379
+ lineNumber: 258
12380
+ }
12381
+ }));
12382
+ const screenReaderLabel = React$4.createElement('span', {
12383
+ id: this.descId,
12384
+ className: classes.srOnly,
12385
+ __self: this,
12386
+ __source: {
12387
+ fileName: _jsxFileName$3,
12388
+ lineNumber: 264
12389
+ }
12390
+ }, choiceMode === 'checkbox' ? 'Checkbox to select the answer below' : 'Radio button to select the answer below');
12391
+ const tagProps = {
12392
+ disabled,
12393
+ checked,
12394
+ correctness,
12395
+ value,
12396
+ id: this.choiceId,
12397
+ onChange: this.onToggleChoice,
12398
+ 'aria-describedby': this.descId
12399
+ };
12400
+ const control = isSelectionButtonBelow ? React$4.createElement('span', {
12401
+ className: classes.belowSelectionComponent,
12402
+ __self: this,
12403
+ __source: {
12404
+ fileName: _jsxFileName$3,
12405
+ lineNumber: 280
12406
+ }
12407
+ }, screenReaderLabel, React$4.createElement(Tag, {
12408
+ ...tagProps,
12409
+ style: {
12410
+ padding: 0
12411
+ },
12412
+ __self: this,
12413
+ __source: {
12414
+ fileName: _jsxFileName$3,
12415
+ lineNumber: 282
12416
+ }
12417
+ }), displayKey ? `${displayKey}.` : '') : React$4.createElement(React$4.Fragment, null, screenReaderLabel, React$4.createElement(Tag, {
12418
+ ...tagProps,
12419
+ __self: this,
12420
+ __source: {
12421
+ fileName: _jsxFileName$3,
12422
+ lineNumber: 288
12371
12423
  }
12372
12424
  }));
12373
12425
  return React$4.createElement('div', {
@@ -12375,83 +12427,39 @@ class ChoiceInput extends React$4.Component {
12375
12427
  __self: this,
12376
12428
  __source: {
12377
12429
  fileName: _jsxFileName$3,
12378
- lineNumber: 252
12430
+ lineNumber: 293
12379
12431
  }
12380
12432
  }, React$4.createElement('div', {
12381
12433
  className: classes.row,
12382
12434
  __self: this,
12383
12435
  __source: {
12384
12436
  fileName: _jsxFileName$3,
12385
- lineNumber: 253
12437
+ lineNumber: 294
12386
12438
  }
12387
12439
  }, !hideTick && isEvaluateMode && React$4.createElement(FeedbackTick$1, {
12388
12440
  correctness: correctness,
12389
12441
  __self: this,
12390
12442
  __source: {
12391
12443
  fileName: _jsxFileName$3,
12392
- lineNumber: 254
12444
+ lineNumber: 295
12393
12445
  }
12394
12446
  }), React$4.createElement('div', {
12395
12447
  className: classNames$2(holderClassNames, 'checkbox-holder'),
12396
12448
  __self: this,
12397
12449
  __source: {
12398
12450
  fileName: _jsxFileName$3,
12399
- lineNumber: 255
12400
- }
12401
- }, isSelectionButtonBelow ? React$4.createElement(StyledFormControlLabel, {
12402
- label: choicelabel,
12403
- value: value,
12404
- htmlFor: this.choiceId,
12405
- labelPlacement: 'top',
12406
- control: React$4.createElement('span', {
12407
- className: classes.belowSelectionComponent,
12408
- __self: this,
12409
- __source: {
12410
- fileName: _jsxFileName$3,
12411
- lineNumber: 263
12412
- }
12413
- }, React$4.createElement(Tag, {
12414
- disabled: disabled,
12415
- checked: checked,
12416
- correctness: correctness,
12417
- value: value,
12418
- id: this.choiceId,
12419
- onChange: this.onToggleChoice,
12420
- style: {
12421
- padding: 0
12422
- },
12423
- __self: this,
12424
- __source: {
12425
- fileName: _jsxFileName$3,
12426
- lineNumber: 264
12427
- }
12428
- }), displayKey ? `${displayKey}.` : ''),
12429
- __self: this,
12430
- __source: {
12431
- fileName: _jsxFileName$3,
12432
- lineNumber: 257
12451
+ lineNumber: 296
12433
12452
  }
12434
- }) : React$4.createElement(StyledFormControlLabel, {
12453
+ }, React$4.createElement(StyledFormControlLabel, {
12435
12454
  label: choicelabel,
12436
12455
  value: value,
12437
12456
  htmlFor: this.choiceId,
12438
- control: React$4.createElement(Tag, {
12439
- disabled: disabled,
12440
- checked: checked,
12441
- correctness: correctness,
12442
- value: value,
12443
- id: this.choiceId,
12444
- onChange: this.onToggleChoice,
12445
- __self: this,
12446
- __source: {
12447
- fileName: _jsxFileName$3,
12448
- lineNumber: 283
12449
- }
12450
- }),
12457
+ labelPlacement: isSelectionButtonBelow ? 'top' : undefined,
12458
+ control: control,
12451
12459
  __self: this,
12452
12460
  __source: {
12453
12461
  fileName: _jsxFileName$3,
12454
- lineNumber: 278
12462
+ lineNumber: 297
12455
12463
  }
12456
12464
  }))), rationale && React$4.createElement(PreviewPrompt$1, {
12457
12465
  className: "rationale",
@@ -12460,7 +12468,7 @@ class ChoiceInput extends React$4.Component {
12460
12468
  __self: this,
12461
12469
  __source: {
12462
12470
  fileName: _jsxFileName$3,
12463
- lineNumber: 296
12471
+ lineNumber: 306
12464
12472
  }
12465
12473
  }), React$4.createElement(Feedback, {
12466
12474
  feedback: feedback,
@@ -12468,7 +12476,7 @@ class ChoiceInput extends React$4.Component {
12468
12476
  __self: this,
12469
12477
  __source: {
12470
12478
  fileName: _jsxFileName$3,
12471
- lineNumber: 297
12479
+ lineNumber: 307
12472
12480
  }
12473
12481
  }));
12474
12482
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pie-element/multiple-choice",
3
3
  "repository": "pie-framework/pie-elements",
4
- "version": "9.15.6-next.0+10ccc73d4",
4
+ "version": "9.15.6-next.3+227227454",
5
5
  "publishConfig": {
6
6
  "access": "public"
7
7
  },
@@ -19,7 +19,7 @@
19
19
  "react-test-renderer": "^16.3.2",
20
20
  "react-transition-group": "^2.3.1"
21
21
  },
22
- "gitHead": "10ccc73d42955aab2809fcf152bf63f31303e521",
22
+ "gitHead": "22722745439ac4a923b89dac36f96a9fc2cb4188",
23
23
  "scripts": {
24
24
  "postpublish": "../../scripts/postpublish"
25
25
  },