@pie-element/explicit-constructed-response 3.9.3-next.474 → 3.9.3-next.483

package/docs/pie-schema.json

@@ -34,6 +34,11 @@
       },
       "title": "choices"
     },
+    "displayType": {
+      "description": "The type of display the container of the pie-ui element will be used",
+      "type": "string",
+      "title": "displayType"
+    },
     "markup": {
       "description": "The markup for the pie-ui element",
       "type": "string",
@@ -130,6 +135,7 @@
   "required": [
     "autoScoring",
     "choices",
+    "displayType",
     "element",
     "id",
     "markup",

package/docs/pie-schema.json.md

@@ -7,6 +7,10 @@ The schema defines the following properties:
 * Object with all the available choices for each response area.
 * Keys need to be integers from 0 to n - 1 (where n is the number of areas)
 
+# `displayType` (string, required)
+
+The type of display the container of the pie-ui element will be used
+
 # `markup` (string, required)
 
 The markup for the pie-ui element

package/lib/main.js

@@ -137,18 +137,13 @@ var Main = /*#__PURE__*/function (_React$Component) {
       var displayNote = (showCorrectAnswer || mode === 'view' && role === 'instructor') && showNote && note;
       var mainClasses = (0, _classnames["default"])([classes.mainContainer, (0, _defineProperty2["default"])({}, classes.noBorderColor, alwaysShowCorrect)]);
 
-      var teacherInstructionsDiv = /*#__PURE__*/_react["default"].createElement("div", {
-        className: "teacher-instructions",
-        dangerouslySetInnerHTML: {
-          __html: teacherInstructions
-        }
+      var teacherInstructionsDiv = /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        defaultClassName: "teacher-instructions",
+        prompt: teacherInstructions
       });
 
-      var rationaleDiv = /*#__PURE__*/_react["default"].createElement("div", {
-        className: "rationale",
-        dangerouslySetInnerHTML: {
-          __html: rationale
-        }
+      var rationaleDiv = /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        prompt: rationale
       });
 
       return /*#__PURE__*/_react["default"].createElement("div", {
@@ -167,11 +162,8 @@ var Main = /*#__PURE__*/function (_React$Component) {
         show: mode === 'evaluate',
         toggled: showCorrectAnswer,
         onToggle: this.toggleShowCorrect
-      }), prompt && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "prompt",
-        dangerouslySetInnerHTML: {
-          __html: prompt
-        }
+      }), prompt && /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+        prompt: prompt
       }), /*#__PURE__*/_react["default"].createElement(_maskMarkup.ConstructedResponse, (0, _extends2["default"])({}, this.props, {
         onChange: this.onChange,
         showCorrectAnswer: showCorrectAnswer,

package/lib/main.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/main.js"],"names":["Main","showCorrectAnswer","props","alwaysShowCorrect","value","maxLengthPerChoice","every","val","i","arr","onChange","maxWait","setState","state","getChangeSession","changeSession","nextProps","feedback","classes","mode","prompt","rationale","teacherInstructions","note","showNote","env","animationsDisabled","maxLengthPerChoiceEnabled","displayType","role","displayNote","mainClasses","mainContainer","noBorderColor","teacherInstructionsDiv","__html","rationaleDiv","display","collapsible","hidden","visible","toggleShowCorrect","React","Component","PropTypes","object","isRequired","string","bool","disabled","markup","func","array","styles","theme","padding","spacing","unit","color","text","backgroundColor","background","inlineDisplay","blockDisplay","margin","borderColor"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport debounce from 'lodash/debounce';\nimport isEmpty from 'lodash/isEmpty';\nimport isEqual from 'lodash/isEqual';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport { ConstructedResponse } from '@pie-lib/mask-markup';\nimport { color, Collapsible, hasText } from '@pie-lib/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\n\nexport class Main extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    prompt: PropTypes.string,\n    note: PropTypes.string,\n    showNote: PropTypes.bool,\n    env: PropTypes.object,\n    rationale: PropTypes.string,\n    disabled: PropTypes.bool,\n    markup: PropTypes.string,\n    mode: PropTypes.string,\n    teacherInstructions: PropTypes.string,\n    value: PropTypes.object,\n    feedback: PropTypes.object,\n    onChange: PropTypes.func,\n    alwaysShowCorrect: PropTypes.bool,\n    animationsDisabled: PropTypes.bool,\n    maxLengthPerChoice: PropTypes.array\n  };\n\n  static defaultProps = {\n    value: {}\n  };\n\n  state = {\n    showCorrectAnswer: this.props.alwaysShowCorrect || false,\n    value: this.props.value\n  };\n\n  // if for all responses max length is 1, call onChange for each keystroke\n  getChangeSession = maxLengthPerChoice =>\n    maxLengthPerChoice && maxLengthPerChoice.every((val, i, arr) => val === arr[0] && val === 1) ? this.props.onChange\n      : debounce(this.props.onChange, 1500, { maxWait: 1500 });\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    const { maxLengthPerChoice } = this.props;\n\n    if (isEmpty(nextProps.feedback)) {\n      this.setState({ showCorrectAnswer: false });\n    }\n\n    if (nextProps.alwaysShowCorrect) {\n      this.setState({ showCorrectAnswer: true });\n    }\n\n    if (maxLengthPerChoice && !isEqual(maxLengthPerChoice, nextProps.maxLengthPerChoice)) {\n      this.changeSession = this.getChangeSession(nextProps.maxLengthPerChoice);\n    }\n  }\n\n  toggleShowCorrect = () => {\n    this.setState({ showCorrectAnswer: !this.state.showCorrectAnswer });\n  };\n\n  changeSession = this.getChangeSession(this.props.maxLengthPerChoice);\n\n  onChange = value => {\n    this.setState({ value });\n\n    this.changeSession(value);\n  };\n\n  render() {\n    const { showCorrectAnswer, value } = this.state;\n    const {\n      classes,\n      mode,\n      prompt,\n      rationale,\n      teacherInstructions,\n      note,\n      showNote,\n      env,\n      animationsDisabled,\n      alwaysShowCorrect,\n      maxLengthPerChoice,\n      maxLengthPerChoiceEnabled,\n      displayType\n    } = this.props;\n    const { role } = env || {};\n    const displayNote = (showCorrectAnswer || mode === 'view' && role === 'instructor') && showNote && note;\n    const mainClasses = classNames([classes.mainContainer, {\n      [classes.noBorderColor]: alwaysShowCorrect\n    }]);\n\n    const teacherInstructionsDiv = <div\n      className=\"teacher-instructions\"\n      dangerouslySetInnerHTML={{ __html: teacherInstructions }}\n    />;\n\n    const rationaleDiv = <div className=\"rationale\" dangerouslySetInnerHTML={{ __html: rationale }}/>;\n\n    return (\n      <div className={mainClasses} style={{ display: `${displayType}` }}>\n        {\n          teacherInstructions && hasText(teacherInstructions) && (\n            <div className={classes.collapsible}>\n              {!animationsDisabled ? <Collapsible\n                  labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n                >\n                  {teacherInstructionsDiv}\n                </Collapsible>\n                : teacherInstructionsDiv}\n            </div>\n          )\n        }\n        {!alwaysShowCorrect && <CorrectAnswerToggle\n          show={mode === 'evaluate'}\n          toggled={showCorrectAnswer}\n          onToggle={this.toggleShowCorrect}\n        />}\n        {prompt && <div className=\"prompt\" dangerouslySetInnerHTML={{ __html: prompt }}/>}\n        <ConstructedResponse\n          {...this.props}\n          onChange={this.onChange}\n          showCorrectAnswer={showCorrectAnswer}\n          value={value}\n          maxLength={maxLengthPerChoice}\n          adjustedLimit={maxLengthPerChoiceEnabled}\n        />\n        {displayNote && (\n          <div\n            className={classNames(classes.note, 'note')}\n            dangerouslySetInnerHTML={{ __html: `<strong>Note:</strong> ${note}` }}\n          />\n        )}\n        {rationale && hasText(rationale) && (\n          <div className={classes.collapsible}>\n            {!animationsDisabled ? <Collapsible\n                labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}\n              >\n                {rationaleDiv}\n              </Collapsible>\n              : rationaleDiv}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\nconst styles = theme => ({\n  mainContainer: {\n    padding: theme.spacing.unit,\n    color: color.text(),\n    backgroundColor: color.background()\n  },\n  inlineDisplay: {\n    display: 'inline-block'\n  },\n  blockDisplay: {\n    display: 'block'\n  },\n  note: {\n    padding: '5px 0'\n  },\n  collapsible: {\n    margin: `${theme.spacing.unit * 2}px 0`\n  },\n  noBorderColor: {\n    '& *': {\n      borderColor: `${color.text()} !important`\n    }\n  }\n});\n\nexport default withStyles(styles)(Main);\n"],"file":"main.js"}
+{"version":3,"sources":["../src/main.js"],"names":["Main","showCorrectAnswer","props","alwaysShowCorrect","value","maxLengthPerChoice","every","val","i","arr","onChange","maxWait","setState","state","getChangeSession","changeSession","nextProps","feedback","classes","mode","prompt","rationale","teacherInstructions","note","showNote","env","animationsDisabled","maxLengthPerChoiceEnabled","displayType","role","displayNote","mainClasses","mainContainer","noBorderColor","teacherInstructionsDiv","rationaleDiv","display","collapsible","hidden","visible","toggleShowCorrect","__html","React","Component","PropTypes","object","isRequired","string","bool","disabled","markup","func","array","styles","theme","padding","spacing","unit","color","text","backgroundColor","background","inlineDisplay","blockDisplay","margin","borderColor"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport debounce from 'lodash/debounce';\nimport isEmpty from 'lodash/isEmpty';\nimport isEqual from 'lodash/isEqual';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport { ConstructedResponse } from '@pie-lib/mask-markup';\nimport {color, Collapsible, hasText, PreviewPrompt} from '@pie-lib/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\n\nexport class Main extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    prompt: PropTypes.string,\n    note: PropTypes.string,\n    showNote: PropTypes.bool,\n    env: PropTypes.object,\n    rationale: PropTypes.string,\n    disabled: PropTypes.bool,\n    markup: PropTypes.string,\n    mode: PropTypes.string,\n    teacherInstructions: PropTypes.string,\n    value: PropTypes.object,\n    feedback: PropTypes.object,\n    onChange: PropTypes.func,\n    alwaysShowCorrect: PropTypes.bool,\n    animationsDisabled: PropTypes.bool,\n    maxLengthPerChoice: PropTypes.array\n  };\n\n  static defaultProps = {\n    value: {}\n  };\n\n  state = {\n    showCorrectAnswer: this.props.alwaysShowCorrect || false,\n    value: this.props.value\n  };\n\n  // if for all responses max length is 1, call onChange for each keystroke\n  getChangeSession = maxLengthPerChoice =>\n    maxLengthPerChoice && maxLengthPerChoice.every((val, i, arr) => val === arr[0] && val === 1) ? this.props.onChange\n      : debounce(this.props.onChange, 1500, { maxWait: 1500 });\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    const { maxLengthPerChoice } = this.props;\n\n    if (isEmpty(nextProps.feedback)) {\n      this.setState({ showCorrectAnswer: false });\n    }\n\n    if (nextProps.alwaysShowCorrect) {\n      this.setState({ showCorrectAnswer: true });\n    }\n\n    if (maxLengthPerChoice && !isEqual(maxLengthPerChoice, nextProps.maxLengthPerChoice)) {\n      this.changeSession = this.getChangeSession(nextProps.maxLengthPerChoice);\n    }\n  }\n\n  toggleShowCorrect = () => {\n    this.setState({ showCorrectAnswer: !this.state.showCorrectAnswer });\n  };\n\n  changeSession = this.getChangeSession(this.props.maxLengthPerChoice);\n\n  onChange = value => {\n    this.setState({ value });\n\n    this.changeSession(value);\n  };\n\n  render() {\n    const { showCorrectAnswer, value } = this.state;\n    const {\n      classes,\n      mode,\n      prompt,\n      rationale,\n      teacherInstructions,\n      note,\n      showNote,\n      env,\n      animationsDisabled,\n      alwaysShowCorrect,\n      maxLengthPerChoice,\n      maxLengthPerChoiceEnabled,\n      displayType\n    } = this.props;\n    const { role } = env || {};\n    const displayNote = (showCorrectAnswer || mode === 'view' && role === 'instructor') && showNote && note;\n    const mainClasses = classNames([classes.mainContainer, {\n      [classes.noBorderColor]: alwaysShowCorrect\n    }]);\n\n    const teacherInstructionsDiv = <PreviewPrompt defaultClassName=\"teacher-instructions\" prompt={teacherInstructions} />;\n\n    const rationaleDiv = <PreviewPrompt prompt={rationale} />;\n\n    return (\n      <div className={mainClasses} style={{ display: `${displayType}` }}>\n        {\n          teacherInstructions && hasText(teacherInstructions) && (\n            <div className={classes.collapsible}>\n              {!animationsDisabled ? <Collapsible\n                  labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n                >\n                  {teacherInstructionsDiv}\n                </Collapsible>\n                : teacherInstructionsDiv}\n            </div>\n          )\n        }\n        {!alwaysShowCorrect && <CorrectAnswerToggle\n          show={mode === 'evaluate'}\n          toggled={showCorrectAnswer}\n          onToggle={this.toggleShowCorrect}\n        />}\n        {prompt && <PreviewPrompt prompt={prompt} />}\n        <ConstructedResponse\n          {...this.props}\n          onChange={this.onChange}\n          showCorrectAnswer={showCorrectAnswer}\n          value={value}\n          maxLength={maxLengthPerChoice}\n          adjustedLimit={maxLengthPerChoiceEnabled}\n        />\n        {displayNote && (\n          <div\n            className={classNames(classes.note, 'note')}\n            dangerouslySetInnerHTML={{ __html: `<strong>Note:</strong> ${note}` }}\n          />\n        )}\n        {rationale && hasText(rationale) && (\n          <div className={classes.collapsible}>\n            {!animationsDisabled ? <Collapsible\n                labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}\n              >\n                {rationaleDiv}\n              </Collapsible>\n              : rationaleDiv}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\nconst styles = theme => ({\n  mainContainer: {\n    padding: theme.spacing.unit,\n    color: color.text(),\n    backgroundColor: color.background()\n  },\n  inlineDisplay: {\n    display: 'inline-block'\n  },\n  blockDisplay: {\n    display: 'block'\n  },\n  note: {\n    padding: '5px 0'\n  },\n  collapsible: {\n    margin: `${theme.spacing.unit * 2}px 0`\n  },\n  noBorderColor: {\n    '& *': {\n      borderColor: `${color.text()} !important`\n    }\n  }\n});\n\nexport default withStyles(styles)(Main);\n"],"file":"main.js"}

package/module/element.js

@@ -14093,6 +14093,7 @@ const CorrectAnswerToggle = _dll_pie_lib__correct_answer_toggle;
 const {color: color} = _dll_pie_lib__render_ui;
 const {Collapsible: Collapsible} = _dll_pie_lib__render_ui;
 const {hasText: hasText} = _dll_pie_lib__render_ui;
+const {PreviewPrompt: PreviewPrompt} = _dll_pie_lib__render_ui;
 const {withStyles: withStyles} = _dll_material_ui__core_styles;
 const classNames = _dll_classnames;
 const _jsxFileName = "/home/circleci/repo/packages/explicit-constructed-response/src/main.js";
@@ -14183,26 +14184,21 @@ class Main extends React$1.Component {
     const mainClasses = classNames([classes.mainContainer, {
       [classes.noBorderColor]: alwaysShowCorrect
     }]);
-    const teacherInstructionsDiv = React$1.createElement('div', {
-      className: "teacher-instructions",
-      dangerouslySetInnerHTML: {
-        __html: teacherInstructions
-      },
+    const teacherInstructionsDiv = React$1.createElement(PreviewPrompt, {
+      defaultClassName: "teacher-instructions",
+      prompt: teacherInstructions,
       __self: this,
       __source: {
         fileName: _jsxFileName,
         lineNumber: 97
       }
     });
-    const rationaleDiv = React$1.createElement('div', {
-      className: "rationale",
-      dangerouslySetInnerHTML: {
-        __html: rationale
-      },
+    const rationaleDiv = React$1.createElement(PreviewPrompt, {
+      prompt: rationale,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 102
+        lineNumber: 99
       }
     });
     return React$1.createElement('div', {
@@ -14213,14 +14209,14 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 105
+        lineNumber: 102
       }
     }, teacherInstructions && hasText(teacherInstructions) && React$1.createElement('div', {
       className: classes.collapsible,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 108
+        lineNumber: 105
       }
     }, !animationsDisabled ? React$1.createElement(Collapsible, {
       labels: {
@@ -14230,7 +14226,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 109
+        lineNumber: 106
       }
     }, teacherInstructionsDiv) : teacherInstructionsDiv), !alwaysShowCorrect && React$1.createElement(CorrectAnswerToggle, {
       show: mode === 'evaluate',
@@ -14239,17 +14235,14 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 118
+        lineNumber: 115
       }
-    }), prompt && React$1.createElement('div', {
-      className: "prompt",
-      dangerouslySetInnerHTML: {
-        __html: prompt
-      },
+    }), prompt && React$1.createElement(PreviewPrompt, {
+      prompt: prompt,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 123
+        lineNumber: 120
       }
     }), React$1.createElement(ConstructedResponse, {
       ...this.props,
@@ -14261,7 +14254,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 124
+        lineNumber: 121
       }
     }), displayNote && React$1.createElement('div', {
       className: classNames(classes.note, 'note'),
@@ -14271,14 +14264,14 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 133
+        lineNumber: 130
       }
     }), rationale && hasText(rationale) && React$1.createElement('div', {
       className: classes.collapsible,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 139
+        lineNumber: 136
       }
     }, !animationsDisabled ? React$1.createElement(Collapsible, {
       labels: {
@@ -14288,7 +14281,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 140
+        lineNumber: 137
       }
     }, rationaleDiv) : rationaleDiv));
   }

package/module/print.js

@@ -14056,6 +14056,7 @@ const CorrectAnswerToggle = _dll_pie_lib__correct_answer_toggle;
 const {color: color} = _dll_pie_lib__render_ui;
 const {Collapsible: Collapsible} = _dll_pie_lib__render_ui;
 const {hasText: hasText} = _dll_pie_lib__render_ui;
+const {PreviewPrompt: PreviewPrompt} = _dll_pie_lib__render_ui;
 const {withStyles: withStyles} = _dll_material_ui__core_styles;
 const classNames = _dll_classnames;
 const _jsxFileName = "/home/circleci/repo/packages/explicit-constructed-response/src/main.js";
@@ -14146,26 +14147,21 @@ class Main extends React$1.Component {
     const mainClasses = classNames([classes.mainContainer, {
       [classes.noBorderColor]: alwaysShowCorrect
     }]);
-    const teacherInstructionsDiv = React$1.createElement('div', {
-      className: "teacher-instructions",
-      dangerouslySetInnerHTML: {
-        __html: teacherInstructions
-      },
+    const teacherInstructionsDiv = React$1.createElement(PreviewPrompt, {
+      defaultClassName: "teacher-instructions",
+      prompt: teacherInstructions,
       __self: this,
       __source: {
         fileName: _jsxFileName,
         lineNumber: 97
       }
     });
-    const rationaleDiv = React$1.createElement('div', {
-      className: "rationale",
-      dangerouslySetInnerHTML: {
-        __html: rationale
-      },
+    const rationaleDiv = React$1.createElement(PreviewPrompt, {
+      prompt: rationale,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 102
+        lineNumber: 99
       }
     });
     return React$1.createElement('div', {
@@ -14176,14 +14172,14 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 105
+        lineNumber: 102
       }
     }, teacherInstructions && hasText(teacherInstructions) && React$1.createElement('div', {
       className: classes.collapsible,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 108
+        lineNumber: 105
       }
     }, !animationsDisabled ? React$1.createElement(Collapsible, {
       labels: {
@@ -14193,7 +14189,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 109
+        lineNumber: 106
       }
     }, teacherInstructionsDiv) : teacherInstructionsDiv), !alwaysShowCorrect && React$1.createElement(CorrectAnswerToggle, {
       show: mode === 'evaluate',
@@ -14202,17 +14198,14 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 118
+        lineNumber: 115
       }
-    }), prompt && React$1.createElement('div', {
-      className: "prompt",
-      dangerouslySetInnerHTML: {
-        __html: prompt
-      },
+    }), prompt && React$1.createElement(PreviewPrompt, {
+      prompt: prompt,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 123
+        lineNumber: 120
       }
     }), React$1.createElement(ConstructedResponse, {
       ...this.props,
@@ -14224,7 +14217,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 124
+        lineNumber: 121
       }
     }), displayNote && React$1.createElement('div', {
       className: classNames(classes.note, 'note'),
@@ -14234,14 +14227,14 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 133
+        lineNumber: 130
       }
     }), rationale && hasText(rationale) && React$1.createElement('div', {
       className: classes.collapsible,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 139
+        lineNumber: 136
       }
     }, !animationsDisabled ? React$1.createElement(Collapsible, {
       labels: {
@@ -14251,7 +14244,7 @@ class Main extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 140
+        lineNumber: 137
       }
     }, rationaleDiv) : rationaleDiv));
   }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "repository": "pie-framework/pie-elements",
-  "version": "3.9.3-next.474+ca2c3b929",
+  "version": "3.9.3-next.483+bbb1ff031",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -25,7 +25,7 @@
   },
   "author": "",
   "license": "ISC",
-  "gitHead": "ca2c3b929014b7218cf81a4ee569585a66d13ebc",
+  "gitHead": "bbb1ff031db7ab593635e64ef2201486360283d8",
   "main": "lib/index.js",
   "module": "src/index.js",
   "exports": {