@pie-element/math-templated 5.3.4-next.0 → 6.0.0-beta.0

package/configure/lib/design.js

@@ -1,129 +1,146 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Design = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
+exports.default = exports.Design = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
-
-var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
-
-var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
-
-var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
-
-var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
-
+var _styles = require("@mui/material/styles");
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Select = _interopRequireDefault(require("@mui/material/Select"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _Info = _interopRequireDefault(require("@mui/icons-material/Info"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
-
 var _pick = _interopRequireDefault(require("lodash/pick"));
-
 var _throttle = _interopRequireDefault(require("lodash/throttle"));
-
 var _configUi = require("@pie-lib/config-ui");
-
 var _editableHtml = _interopRequireWildcard(require("@pie-lib/editable-html"));
-
 var _response = _interopRequireDefault(require("./response"));
-
 var _markupUtils = require("./markupUtils");
-
 var _utils = require("./utils");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var Panel = _configUi.settings.Panel,
-    toggle = _configUi.settings.toggle;
-
-var createElementFromHTML = function createElementFromHTML(htmlString) {
-  var div = document.createElement('div');
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const {
+  dropdown
+} = _configUi.settings;
+const {
+  Panel,
+  toggle
+} = _configUi.settings;
+const StyledInputContainer = (0, _styles.styled)(_configUi.InputContainer)(({
+  theme
+}) => ({
+  width: '100%',
+  paddingTop: theme.spacing(2),
+  marginBottom: theme.spacing(2)
+}));
+const StyledEditableHtml = (0, _styles.styled)(_editableHtml.default)({
+  width: '100%'
+});
+const ErrorText = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  color: theme.palette.error.main,
+  fontSize: '0.75rem',
+  marginTop: theme.spacing(1)
+}));
+const ResponseAreaError = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  color: theme.palette.error.main,
+  fontSize: '0.75rem',
+  marginBottom: theme.spacing(1)
+}));
+const StyledMarkup = (0, _styles.styled)(_editableHtml.default)(({
+  theme
+}) => ({
+  width: '100%',
+  marginTop: theme.spacing(2),
+  marginBottom: theme.spacing(3)
+}));
+const StyledSelectContainer = (0, _styles.styled)(_configUi.InputContainer)(({
+  theme
+}) => ({
+  width: '100%',
+  marginTop: theme.spacing(2),
+  '& > *:not(label)': {
+    marginTop: theme.spacing(1)
+  },
+  marginBottom: theme.spacing(2)
+}));
+const StyledSelect = (0, _styles.styled)(_Select.default)({
+  width: '100%'
+});
+const StyledTitle = (0, _styles.styled)(_Typography.default)(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize * 1.25,
+  fontWeight: 'bold'
+}));
+const TooltipContainer = (0, _styles.styled)('div')({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px'
+});
+const StyledTooltip = (0, _styles.styled)(_Tooltip.default)(({
+  theme
+}) => ({
+  '& .MuiTooltip-tooltip': {
+    fontSize: theme.typography.fontSize - 2,
+    whiteSpace: 'pre',
+    maxWidth: '500px'
+  }
+}));
+const createElementFromHTML = htmlString => {
+  const div = document.createElement('div');
   div.innerHTML = htmlString.trim();
   return div;
 };
-
-var Design = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Design, _React$Component);
-
-  var _super = _createSuper(Design);
-
-  function Design() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Design);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {});
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleChange", function (key, value) {
-      var _this$props = _this.props,
-          onModelChanged = _this$props.onModelChanged,
-          model = _this$props.model;
-      var updatedModel = (0, _cloneDeep["default"])(model);
+class Design extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "state", {});
+    (0, _defineProperty2.default)(this, "handleChange", (key, value) => {
+      const {
+        onModelChanged,
+        model
+      } = this.props;
+      const updatedModel = (0, _cloneDeep.default)(model);
       updatedModel[key] = value;
       onModelChanged(updatedModel);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onResponseChange", function (response, index) {
-      var _this$props2 = _this.props,
-          model = _this$props2.model,
-          onModelChanged = _this$props2.onModelChanged;
-
-      var newModel = _objectSpread({}, model);
-
+    (0, _defineProperty2.default)(this, "onResponseChange", (response, index) => {
+      const {
+        model,
+        onModelChanged
+      } = this.props;
+      const newModel = {
+        ...model
+      };
       newModel.responses[index] = response;
       onModelChanged(newModel);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onResponseDone", function () {
-      var _this$props3 = _this.props,
-          model = _this$props3.model,
-          onModelChanged = _this$props3.onModelChanged;
-      onModelChanged(_objectSpread(_objectSpread({}, model), {}, {
+    (0, _defineProperty2.default)(this, "onResponseDone", () => {
+      const {
+        model,
+        onModelChanged
+      } = this.props;
+      onModelChanged({
+        ...model,
         slateMarkup: (0, _markupUtils.createSlateMarkup)(model.markup, model.responses)
-      }));
+      });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChangeResponse", function (index, newVal) {
-      var _this$props4 = _this.props,
-          model = _this$props4.model,
-          onModelChanged = _this$props4.onModelChanged;
-      var responses = model.responses;
-
+    (0, _defineProperty2.default)(this, "onChangeResponse", (index, newVal) => {
+      const {
+        model,
+        onModelChanged
+      } = this.props;
+      const {
+        responses
+      } = model;
       if (!responses[index]) {
         responses[index] = [{
           answer: newVal || '',
@@ -133,36 +150,38 @@ var Design = /*#__PURE__*/function (_React$Component) {
       } else {
         responses[index][0].answer = newVal || '';
       }
-
-      onModelChanged(_objectSpread(_objectSpread({}, model), {}, {
-        responses: responses
-      }));
+      onModelChanged({
+        ...model,
+        responses
+      });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onResponsesChanged", function (responses) {
-      _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
-        responses: responses
-      }));
+    (0, _defineProperty2.default)(this, "onResponsesChanged", responses => {
+      this.props.onModelChanged({
+        ...this.props.model,
+        responses
+      });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (markup) {
-      var _this$props5 = _this.props,
-          _this$props5$model = _this$props5.model,
-          responses = _this$props5$model.responses,
-          validationDefault = _this$props5$model.validationDefault,
-          allowTrailingZerosDefault = _this$props5$model.allowTrailingZerosDefault,
-          ignoreOrderDefault = _this$props5$model.ignoreOrderDefault,
-          onModelChanged = _this$props5.onModelChanged;
-      var newResponses = {};
-      var domMarkup = createElementFromHTML(markup);
-      var responseAreas = domMarkup.querySelectorAll('[data-type="math_templated"]');
-      responseAreas.forEach(function (element, index) {
-        var _element$dataset = element.dataset,
-            value = _element$dataset.value,
-            dataIndex = _element$dataset.index;
-
+    (0, _defineProperty2.default)(this, "onChange", markup => {
+      const {
+        model: {
+          responses,
+          validationDefault,
+          allowTrailingZerosDefault,
+          ignoreOrderDefault
+        },
+        onModelChanged
+      } = this.props;
+      const newResponses = {};
+      const domMarkup = createElementFromHTML(markup);
+      const responseAreas = domMarkup.querySelectorAll('[data-type="math_templated"]');
+      responseAreas.forEach((element, index) => {
+        const {
+          value,
+          index: dataIndex
+        } = element.dataset;
         if (!value) {
           element.dataset.value = '';
         }
-
         newResponses[index] = responses[dataIndex] || {
           allowSpaces: true,
           validation: validationDefault || 'symbolic',
@@ -173,487 +192,357 @@ var Design = /*#__PURE__*/function (_React$Component) {
         };
         element.dataset.index = index.toString();
       });
-      console.log('newResponses', newResponses);
-      var processedMarkup = (0, _markupUtils.processMarkup)(markup);
-
-      var callback = function callback() {
-        return onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
-          slateMarkup: domMarkup.innerHTML,
-          responses: newResponses,
-          markup: processedMarkup
-        }));
-      };
-
-      _this.setState({
+      const processedMarkup = (0, _markupUtils.processMarkup)(markup);
+      const callback = () => onModelChanged({
+        ...this.props.model,
+        slateMarkup: domMarkup.innerHTML,
+        responses: newResponses,
+        markup: processedMarkup
+      });
+      this.setState({
         cachedResponses: undefined
       }, callback);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onHandleAreaChange", (0, _throttle["default"])(function (nodes) {
-      var _this$props6 = _this.props,
-          responses = _this$props6.model.responses,
-          onModelChanged = _this$props6.onModelChanged;
-      var cachedResponses = _this.state.cachedResponses;
-
+    (0, _defineProperty2.default)(this, "onHandleAreaChange", (0, _throttle.default)(nodes => {
+      const {
+        model: {
+          responses
+        },
+        onModelChanged
+      } = this.props;
+      const {
+        cachedResponses
+      } = this.state;
       if (!nodes) {
         return;
       }
-
-      var newChoices = responses ? (0, _cloneDeep["default"])(responses) : {};
-      var newCachedResponses = cachedResponses ? (0, _cloneDeep["default"])(cachedResponses) : {};
-      nodes.forEach(function (node) {
-        var keyForNode = node.data.get('index');
-
+      const newChoices = responses ? (0, _cloneDeep.default)(responses) : {};
+      const newCachedResponses = cachedResponses ? (0, _cloneDeep.default)(cachedResponses) : {};
+      nodes.forEach(node => {
+        const keyForNode = node.data.get('index');
         if (!newChoices[keyForNode] && newCachedResponses[keyForNode]) {
-          Object.assign(newChoices, (0, _pick["default"])(newCachedResponses, keyForNode));
-
-          if (newCachedResponses.hasOwnProperty(keyForNode)) {
+          Object.assign(newChoices, (0, _pick.default)(newCachedResponses, keyForNode));
+          if (Object.prototype.hasOwnProperty.call(newCachedResponses, keyForNode)) {
             delete newCachedResponses[keyForNode];
           }
         } else {
-          Object.assign(newCachedResponses, (0, _pick["default"])(newChoices, keyForNode));
-
-          if (newChoices.hasOwnProperty(keyForNode)) {
+          Object.assign(newCachedResponses, (0, _pick.default)(newChoices, keyForNode));
+          if (Object.prototype.hasOwnProperty.call(newChoices, keyForNode)) {
             delete newChoices[keyForNode];
           }
         }
       });
-
-      var callback = function callback() {
-        return onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
-          responses: newChoices
-        }));
-      };
-
-      _this.setState({
+      const callback = () => onModelChanged({
+        ...this.props.model,
+        responses: newChoices
+      });
+      this.setState({
         cachedResponses: newCachedResponses
       }, callback);
     }, 500, {
       trailing: false,
       leading: true
     }));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onBlur", function (e) {
-      var _ref = e || {},
-          relatedTarget = _ref.relatedTarget,
-          currentTarget = _ref.currentTarget;
-
-      function getParentWithRoleTooltip(element) {
-        var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    (0, _defineProperty2.default)(this, "onBlur", e => {
+      const {
+        relatedTarget,
+        currentTarget
+      } = e || {};
+      function getParentWithRoleTooltip(element, depth = 0) {
         // only run this max 16 times
         if (!element || depth >= 16) return null;
-        var parent = element.offsetParent;
+        const parent = element.offsetParent;
         if (!parent) return null;
-
         if (parent.getAttribute('role') === 'tooltip') {
           return parent;
         }
-
         return getParentWithRoleTooltip(parent, depth + 1);
       }
-
-      function getDeepChildDataKeypad(element) {
-        var _element$children;
-
-        var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      function getDeepChildDataKeypad(element, depth = 0) {
         // only run this max 4 times
         if (!element || depth >= 4) return null;
-        var child = element === null || element === void 0 ? void 0 : (_element$children = element.children) === null || _element$children === void 0 ? void 0 : _element$children[0];
+        const child = element?.children?.[0];
         if (!child) return null;
-
         if (child.attributes && child.attributes['data-keypad']) {
           return child;
         }
-
         return getDeepChildDataKeypad(child, depth + 1);
       }
-
-      var parentWithTooltipRole = getParentWithRoleTooltip(relatedTarget);
-      var childWithDataKeypad = parentWithTooltipRole ? getDeepChildDataKeypad(parentWithTooltipRole) : null;
-
-      if (!relatedTarget || !currentTarget || !(childWithDataKeypad !== null && childWithDataKeypad !== void 0 && childWithDataKeypad.attributes['data-keypad'])) {
-        _this.setState({
+      const parentWithTooltipRole = getParentWithRoleTooltip(relatedTarget);
+      const childWithDataKeypad = parentWithTooltipRole ? getDeepChildDataKeypad(parentWithTooltipRole) : null;
+      if (!relatedTarget || !currentTarget || !childWithDataKeypad?.attributes['data-keypad']) {
+        this.setState({
           activeAnswerBlock: ''
         });
       }
     });
-    return _this;
   }
-
-  (0, _createClass2["default"])(Design, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var slateMarkup = this.props.model.slateMarkup;
-      this.setState({
-        markup: slateMarkup
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props7 = this.props,
-          classes = _this$props7.classes,
-          configuration = _this$props7.configuration,
-          imageSupport = _this$props7.imageSupport,
-          model = _this$props7.model,
-          onConfigurationChanged = _this$props7.onConfigurationChanged,
-          onModelChanged = _this$props7.onModelChanged,
-          uploadSoundSupport = _this$props7.uploadSoundSupport;
-
-      var _ref2 = configuration || {},
-          _ref2$baseInputConfig = _ref2.baseInputConfiguration,
-          baseInputConfiguration = _ref2$baseInputConfig === void 0 ? {} : _ref2$baseInputConfig,
-          _ref2$contentDimensio = _ref2.contentDimensions,
-          contentDimensions = _ref2$contentDimensio === void 0 ? {} : _ref2$contentDimensio,
-          _ref2$prompt = _ref2.prompt,
-          prompt = _ref2$prompt === void 0 ? {} : _ref2$prompt,
-          _ref2$rationale = _ref2.rationale,
-          rationale = _ref2$rationale === void 0 ? {} : _ref2$rationale,
-          settingsPanelDisabled = _ref2.settingsPanelDisabled,
-          _ref2$teacherInstruct = _ref2.teacherInstructions,
-          teacherInstructions = _ref2$teacherInstruct === void 0 ? {} : _ref2$teacherInstruct,
-          _ref2$language = _ref2.language,
-          language = _ref2$language === void 0 ? {} : _ref2$language,
-          _ref2$languageChoices = _ref2.languageChoices,
-          languageChoices = _ref2$languageChoices === void 0 ? {} : _ref2$languageChoices,
-          _ref2$spellCheck = _ref2.spellCheck,
-          spellCheck = _ref2$spellCheck === void 0 ? {} : _ref2$spellCheck,
-          _ref2$playerSpellChec = _ref2.playerSpellCheck,
-          playerSpellCheck = _ref2$playerSpellChec === void 0 ? {} : _ref2$playerSpellChec,
-          _ref2$maxImageWidth = _ref2.maxImageWidth,
-          maxImageWidth = _ref2$maxImageWidth === void 0 ? {} : _ref2$maxImageWidth,
-          _ref2$maxImageHeight = _ref2.maxImageHeight,
-          maxImageHeight = _ref2$maxImageHeight === void 0 ? {} : _ref2$maxImageHeight,
-          _ref2$mathMlOptions = _ref2.mathMlOptions,
-          mathMlOptions = _ref2$mathMlOptions === void 0 ? {} : _ref2$mathMlOptions,
-          _ref2$template = _ref2.template,
-          template = _ref2$template === void 0 ? {} : _ref2$template,
-          _ref2$editSource = _ref2.editSource,
-          editSource = _ref2$editSource === void 0 ? {} : _ref2$editSource,
-          _ref2$ignoreOrder = _ref2.ignoreOrder,
-          cIgnoreOrder = _ref2$ignoreOrder === void 0 ? {} : _ref2$ignoreOrder,
-          _ref2$allowTrailingZe = _ref2.allowTrailingZeros,
-          cAllowTrailingZeros = _ref2$allowTrailingZe === void 0 ? {} : _ref2$allowTrailingZe,
-          _ref2$partialScoring = _ref2.partialScoring,
-          partialScoring = _ref2$partialScoring === void 0 ? {} : _ref2$partialScoring,
-          maxResponseAreas = _ref2.maxResponseAreas;
-
-      var _ref3 = model || {},
-          errors = _ref3.errors,
-          extraCSSRules = _ref3.extraCSSRules,
-          promptEnabled = _ref3.promptEnabled,
-          rationaleEnabled = _ref3.rationaleEnabled,
-          spellCheckEnabled = _ref3.spellCheckEnabled,
-          teacherInstructionsEnabled = _ref3.teacherInstructionsEnabled,
-          toolbarEditorPosition = _ref3.toolbarEditorPosition,
-          responses = _ref3.responses,
-          equationEditor = _ref3.equationEditor;
-
-      var _ref4 = errors || {},
-          promptError = _ref4.prompt,
-          rationaleError = _ref4.rationale,
-          responseAreasError = _ref4.responseAreas,
-          teacherInstructionsError = _ref4.teacherInstructions,
-          _ref4$responses = _ref4.responses,
-          responsesErrors = _ref4$responses === void 0 ? {} : _ref4$responses;
-
-      var validationMessage = (0, _utils.generateValidationMessage)(configuration);
-      var panelSettings = {
-        'language.enabled': language.settings && toggle(language.label, true),
-        language: language.settings && language.enabled && (0, _configUi.dropdown)(languageChoices.label, languageChoices.options)
-      };
-      var panelProperties = {
-        teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
-        rationaleEnabled: rationale.settings && toggle(rationale.label),
-        promptEnabled: prompt.settings && toggle(prompt.label),
-        spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
-        playerSpellCheckEnabled: playerSpellCheck.settings && toggle(playerSpellCheck.label),
-        'editSource.enabled': (editSource === null || editSource === void 0 ? void 0 : editSource.settings) && toggle(editSource.label, true),
-        partialScoring: partialScoring.settings && toggle(partialScoring.label)
-      };
-      var defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
-      var defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
-      var toolbarOpts = {
-        position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
-      };
-
-      var getPluginProps = function getPluginProps() {
-        var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-        var baseInputConfiguration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-        return _objectSpread(_objectSpread({}, baseInputConfiguration), props);
-      };
-
-      return /*#__PURE__*/_react["default"].createElement(_configUi.layout.ConfigLayout, {
-        extraCSSRules: extraCSSRules,
-        dimensions: contentDimensions,
-        hideSettings: settingsPanelDisabled,
-        settings: /*#__PURE__*/_react["default"].createElement(Panel, {
-          model: model,
-          configuration: configuration,
-          onChangeModel: function onChangeModel(updatedModel) {
-            return onModelChanged(updatedModel);
-          },
-          onChangeConfiguration: onConfigurationChanged,
-          groups: {
-            Settings: panelSettings,
-            Properties: panelProperties
-          }
-        })
-      }, teacherInstructionsEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
-        label: teacherInstructions.label,
-        className: classes.promptHolder
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        className: classes.prompt,
-        markup: model.teacherInstructions || '',
-        onChange: function onChange(value) {
-          return _this2.handleChange('teacherInstructions', value);
-        },
-        imageSupport: imageSupport,
-        nonEmpty: false,
-        error: teacherInstructionsError,
-        toolbarOpts: toolbarOpts,
-        pluginProps: getPluginProps(teacherInstructions === null || teacherInstructions === void 0 ? void 0 : teacherInstructions.inputConfiguration, baseInputConfiguration),
-        spellCheck: spellCheckEnabled,
-        maxImageWidth: maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth,
-        maxImageHeight: maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight,
-        uploadSoundSupport: uploadSoundSupport,
-        languageCharactersProps: [{
-          language: 'spanish'
-        }, {
-          language: 'special'
-        }],
-        mathMlOptions: mathMlOptions
-      }), teacherInstructionsError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, teacherInstructionsError)), promptEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
-        label: prompt.label,
-        className: classes.promptHolder
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        className: classes.prompt,
-        markup: model.prompt,
-        onChange: function onChange(value) {
-          return _this2.handleChange('prompt', value);
-        },
-        imageSupport: imageSupport,
-        nonEmpty: false,
-        disableUnderline: true,
-        error: promptError,
-        toolbarOpts: toolbarOpts,
-        pluginProps: getPluginProps(teacherInstructions === null || teacherInstructions === void 0 ? void 0 : teacherInstructions.inputConfiguration, baseInputConfiguration),
-        spellCheck: spellCheckEnabled,
-        maxImageWidth: defaultImageMaxWidth,
-        maxImageHeight: defaultImageMaxHeight,
-        uploadSoundSupport: uploadSoundSupport,
-        languageCharactersProps: [{
-          language: 'spanish'
-        }, {
-          language: 'special'
-        }],
-        mathMlOptions: mathMlOptions
-      }), promptError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, promptError)), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.tooltipContainer
-      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-        className: classes.title,
-        component: 'div'
-      }, "Response Template"), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
-        classes: {
-          tooltip: classes.tooltip
-        },
-        disableFocusListener: true,
-        disableTouchListener: true,
-        placement: 'right',
-        title: validationMessage
-      }, /*#__PURE__*/_react["default"].createElement(_Info["default"], {
-        fontSize: 'small',
-        color: 'primary'
-      }))), /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        activePlugins: _editableHtml.ALL_PLUGINS,
-        toolbarOpts: {
-          position: 'top'
-        },
-        spellCheck: spellCheckEnabled,
-        pluginProps: getPluginProps(template === null || template === void 0 ? void 0 : template.inputConfiguration, baseInputConfiguration),
-        responseAreaProps: {
-          type: 'math-templated',
-          respAreaToolbar: null,
-          error: function error() {
-            return responsesErrors;
-          },
-          onHandleAreaChange: this.onHandleAreaChange,
-          maxResponseAreas: maxResponseAreas
-        },
-        className: classes.markup,
-        markup: model.slateMarkup,
-        onChange: this.onChange,
-        imageSupport: imageSupport,
-        disableImageAlignmentButtons: true,
-        onBlur: this.onBlur,
-        disabled: false,
-        highlightShape: false,
-        error: responseAreasError,
-        uploadSoundSupport: uploadSoundSupport,
-        languageCharactersProps: [{
-          language: 'spanish'
-        }, {
-          language: 'special'
-        }],
-        mathMlOptions: mathMlOptions
-      }), responseAreasError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.responseAreaError
-      }, responseAreasError), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-        className: classes.title
-      }, "Define Response"), /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
-        label: "Response Template Equation Editor",
-        className: classes.selectContainer
-      }, /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        className: classes.select,
-        onChange: function onChange(event) {
-          return _this2.handleChange('equationEditor', event.target.value);
-        },
-        value: equationEditor
-      }, /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
-        value: "non-negative-integers"
-      }, "Numeric - Non-Negative Integers"), /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
-        value: "integers"
-      }, "Numeric - Integers"), /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
-        value: "decimals"
-      }, "Numeric - Decimals"), /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
-        value: "fractions"
-      }, "Numeric - Fractions"), /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
-        value: 1
-      }, "Grade 1 - 2"), /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
-        value: 3
-      }, "Grade 3 - 5"), /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
-        value: 6
-      }, "Grade 6 - 7"), /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
-        value: 8
-      }, "Grade 8 - HS"), /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
-        value: 'geometry'
-      }, "Geometry"), /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
-        value: 'advanced-algebra'
-      }, "Advanced Algebra"), /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
-        value: 'statistics'
-      }, "Statistics"), /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
-        value: 'item-authoring'
-      }, "Item Authoring"))), Object.keys(responses || {}).map(function (responseKey, idx) {
-        var response = responses[idx];
-
-        if (response) {
-          return /*#__PURE__*/_react["default"].createElement(_response["default"], {
-            key: idx,
-            responseKey: idx,
-            mode: equationEditor,
-            response: response,
-            onResponseChange: _this2.onResponseChange,
-            onResponseDone: _this2.onResponseDone,
-            index: idx,
-            cIgnoreOrder: cIgnoreOrder,
-            cAllowTrailingZeros: cAllowTrailingZeros,
-            error: responsesErrors && responsesErrors[idx]
-          });
+  componentDidMount() {
+    const {
+      model: {
+        slateMarkup
+      }
+    } = this.props;
+    this.setState({
+      markup: slateMarkup
+    });
+  }
+  render() {
+    const {
+      configuration,
+      imageSupport,
+      model,
+      onConfigurationChanged,
+      onModelChanged,
+      uploadSoundSupport
+    } = this.props;
+    const {
+      baseInputConfiguration = {},
+      contentDimensions = {},
+      prompt = {},
+      rationale = {},
+      settingsPanelDisabled,
+      teacherInstructions = {},
+      language = {},
+      languageChoices = {},
+      spellCheck = {},
+      playerSpellCheck = {},
+      maxImageWidth = {},
+      maxImageHeight = {},
+      mathMlOptions = {},
+      template = {},
+      editSource = {},
+      ignoreOrder: cIgnoreOrder = {},
+      allowTrailingZeros: cAllowTrailingZeros = {},
+      partialScoring = {},
+      maxResponseAreas
+    } = configuration || {};
+    const {
+      errors,
+      extraCSSRules,
+      promptEnabled,
+      rationaleEnabled,
+      spellCheckEnabled,
+      teacherInstructionsEnabled,
+      toolbarEditorPosition,
+      responses,
+      equationEditor
+    } = model || {};
+    const {
+      prompt: promptError,
+      rationale: rationaleError,
+      responseAreas: responseAreasError,
+      teacherInstructions: teacherInstructionsError,
+      responses: responsesErrors = {}
+    } = errors || {};
+    const validationMessage = (0, _utils.generateValidationMessage)(configuration);
+    const panelSettings = {
+      'language.enabled': language.settings && toggle(language.label, true),
+      language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options)
+    };
+    const panelProperties = {
+      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+      rationaleEnabled: rationale.settings && toggle(rationale.label),
+      promptEnabled: prompt.settings && toggle(prompt.label),
+      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+      playerSpellCheckEnabled: playerSpellCheck.settings && toggle(playerSpellCheck.label),
+      'editSource.enabled': editSource?.settings && toggle(editSource.label, true),
+      partialScoring: partialScoring.settings && toggle(partialScoring.label)
+    };
+    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+    const toolbarOpts = {
+      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
+    };
+    const getPluginProps = (props = {}, baseInputConfiguration = {}) => ({
+      ...baseInputConfiguration,
+      ...props
+    });
+    return /*#__PURE__*/_react.default.createElement(_configUi.layout.ConfigLayout, {
+      extraCSSRules: extraCSSRules,
+      dimensions: contentDimensions,
+      hideSettings: settingsPanelDisabled,
+      settings: /*#__PURE__*/_react.default.createElement(Panel, {
+        model: model,
+        configuration: configuration,
+        onChangeModel: updatedModel => onModelChanged(updatedModel),
+        onChangeConfiguration: onConfigurationChanged,
+        groups: {
+          Settings: panelSettings,
+          Properties: panelProperties
         }
-
-        return null;
-      }), rationaleEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
-        label: rationale.label,
-        className: classes.promptHolder
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        className: classes.prompt,
-        markup: model.rationale || '',
-        onChange: function onChange(value) {
-          return _this2.handleChange('rationale', value);
-        },
-        imageSupport: imageSupport,
-        nonEmpty: false,
-        error: rationaleError,
-        toolbarOpts: toolbarOpts,
-        pluginProps: getPluginProps(rationale === null || rationale === void 0 ? void 0 : rationale.inputConfiguration, _objectSpread(_objectSpread({}, baseInputConfiguration), {}, {
-          math: {
-            controlledKeypadMode: false
-          }
-        })),
-        spellCheck: spellCheckEnabled,
-        maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
-        maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
-        uploadSoundSupport: uploadSoundSupport,
-        languageCharactersProps: [{
-          language: 'spanish'
-        }, {
-          language: 'special'
-        }],
-        mathMlOptions: mathMlOptions
-      }), rationaleError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, rationaleError)));
-    }
-  }]);
-  return Design;
-}(_react["default"].Component);
-
+      })
+    }, teacherInstructionsEnabled && /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: teacherInstructions.label
+    }, /*#__PURE__*/_react.default.createElement(StyledEditableHtml, {
+      markup: model.teacherInstructions || '',
+      onChange: value => this.handleChange('teacherInstructions', value),
+      imageSupport: imageSupport,
+      nonEmpty: false,
+      error: teacherInstructionsError,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(teacherInstructions?.inputConfiguration, baseInputConfiguration),
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth,
+      maxImageHeight: maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), teacherInstructionsError && /*#__PURE__*/_react.default.createElement(ErrorText, null, teacherInstructionsError)), promptEnabled && /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: prompt.label
+    }, /*#__PURE__*/_react.default.createElement(StyledEditableHtml, {
+      markup: model.prompt,
+      onChange: value => this.handleChange('prompt', value),
+      imageSupport: imageSupport,
+      nonEmpty: false,
+      disableUnderline: true,
+      error: promptError,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(teacherInstructions?.inputConfiguration, baseInputConfiguration),
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: defaultImageMaxWidth,
+      maxImageHeight: defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), promptError && /*#__PURE__*/_react.default.createElement(ErrorText, null, promptError)), /*#__PURE__*/_react.default.createElement(TooltipContainer, null, /*#__PURE__*/_react.default.createElement(StyledTitle, {
+      component: 'div'
+    }, "Response Template"), /*#__PURE__*/_react.default.createElement(StyledTooltip, {
+      disableFocusListener: true,
+      disableTouchListener: true,
+      placement: 'right',
+      title: validationMessage
+    }, /*#__PURE__*/_react.default.createElement(_Info.default, {
+      fontSize: 'small',
+      color: 'primary'
+    }))), /*#__PURE__*/_react.default.createElement(StyledMarkup, {
+      activePlugins: _editableHtml.ALL_PLUGINS,
+      toolbarOpts: {
+        position: 'top'
+      },
+      spellCheck: spellCheckEnabled,
+      pluginProps: getPluginProps(template?.inputConfiguration, baseInputConfiguration),
+      responseAreaProps: {
+        type: 'math-templated',
+        respAreaToolbar: null,
+        error: () => responsesErrors,
+        onHandleAreaChange: this.onHandleAreaChange,
+        maxResponseAreas: maxResponseAreas
+      },
+      markup: model.slateMarkup,
+      onChange: this.onChange,
+      imageSupport: imageSupport,
+      disableImageAlignmentButtons: true,
+      onBlur: this.onBlur,
+      disabled: false,
+      highlightShape: false,
+      error: responseAreasError,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), responseAreasError && /*#__PURE__*/_react.default.createElement(ResponseAreaError, null, responseAreasError), /*#__PURE__*/_react.default.createElement(StyledTitle, null, "Define Response"), /*#__PURE__*/_react.default.createElement(StyledSelectContainer, {
+      label: "Response Template Equation Editor"
+    }, /*#__PURE__*/_react.default.createElement(StyledSelect, {
+      MenuProps: {
+        transitionDuration: {
+          enter: 225,
+          exit: 195
+        }
+      },
+      onChange: event => this.handleChange('equationEditor', event.target.value),
+      value: equationEditor
+    }, /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+      value: "non-negative-integers"
+    }, "Numeric - Non-Negative Integers"), /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+      value: "integers"
+    }, "Numeric - Integers"), /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+      value: "decimals"
+    }, "Numeric - Decimals"), /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+      value: "fractions"
+    }, "Numeric - Fractions"), /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+      value: 1
+    }, "Grade 1 - 2"), /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+      value: 3
+    }, "Grade 3 - 5"), /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+      value: 6
+    }, "Grade 6 - 7"), /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+      value: 8
+    }, "Grade 8 - HS"), /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+      value: 'geometry'
+    }, "Geometry"), /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+      value: 'advanced-algebra'
+    }, "Advanced Algebra"), /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+      value: 'statistics'
+    }, "Statistics"), /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+      value: 'item-authoring'
+    }, "Item Authoring"))), Object.keys(responses || {}).map((responseKey, idx) => {
+      const response = responses[idx];
+      if (response) {
+        return /*#__PURE__*/_react.default.createElement(_response.default, {
+          key: idx,
+          responseKey: idx,
+          mode: equationEditor,
+          response: response,
+          onResponseChange: this.onResponseChange,
+          onResponseDone: this.onResponseDone,
+          index: idx,
+          cIgnoreOrder: cIgnoreOrder,
+          cAllowTrailingZeros: cAllowTrailingZeros,
+          error: responsesErrors && responsesErrors[idx]
+        });
+      }
+      return null;
+    }), rationaleEnabled && /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: rationale.label
+    }, /*#__PURE__*/_react.default.createElement(StyledEditableHtml, {
+      markup: model.rationale || '',
+      onChange: value => this.handleChange('rationale', value),
+      imageSupport: imageSupport,
+      nonEmpty: false,
+      error: rationaleError,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(rationale?.inputConfiguration, {
+        ...baseInputConfiguration,
+        math: {
+          controlledKeypadMode: false
+        }
+      }),
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
+      maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), rationaleError && /*#__PURE__*/_react.default.createElement(ErrorText, null, rationaleError)));
+  }
+}
 exports.Design = Design;
-(0, _defineProperty2["default"])(Design, "propTypes", {
-  model: _propTypes["default"].object.isRequired,
-  configuration: _propTypes["default"].object.isRequired,
-  classes: _propTypes["default"].object.isRequired,
-  onModelChanged: _propTypes["default"].func.isRequired,
-  onConfigurationChanged: _propTypes["default"].func.isRequired,
-  imageSupport: _propTypes["default"].shape({
-    add: _propTypes["default"].func.isRequired,
-    "delete": _propTypes["default"].func.isRequired
+(0, _defineProperty2.default)(Design, "propTypes", {
+  model: _propTypes.default.object.isRequired,
+  configuration: _propTypes.default.object.isRequired,
+  onModelChanged: _propTypes.default.func.isRequired,
+  onConfigurationChanged: _propTypes.default.func.isRequired,
+  imageSupport: _propTypes.default.shape({
+    add: _propTypes.default.func.isRequired,
+    delete: _propTypes.default.func.isRequired
   }),
-  uploadSoundSupport: _propTypes["default"].object
+  uploadSoundSupport: _propTypes.default.object
 });
-
-var _default = (0, _styles.withStyles)(function (theme) {
-  return {
-    promptHolder: {
-      width: '100%',
-      paddingTop: theme.spacing.unit * 2,
-      marginBottom: theme.spacing.unit * 2
-    },
-    prompt: {
-      width: '100%'
-    },
-    errorText: {
-      color: theme.palette.error.main,
-      fontSize: '0.75rem',
-      marginTop: theme.spacing.unit
-    },
-    responseAreaError: {
-      color: theme.palette.error.main,
-      fontSize: '0.75rem',
-      marginBottom: theme.spacing.unit
-    },
-    markup: {
-      width: '100%',
-      marginTop: theme.spacing.unit * 2,
-      marginBottom: theme.spacing.unit * 3
-    },
-    selectContainer: {
-      width: '100%',
-      marginTop: theme.spacing.unit * 2
-    },
-    select: {
-      width: '100%'
-    },
-    title: {
-      fontSize: theme.typography.fontSize * 1.25,
-      fontWeight: 'bold'
-    },
-    tooltipContainer: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: '8px'
-    },
-    tooltip: {
-      fontSize: theme.typography.fontSize - 2,
-      whiteSpace: 'pre',
-      maxWidth: '500px'
-    }
-  };
-})(Design);
-
-exports["default"] = _default;
+var _default = exports.default = Design;
 //# sourceMappingURL=design.js.map