@instructure/quiz-core 20.11.1 → 20.11.2-rc.0

package/es/common/components/resources/WarningWrapper/index.js

@@ -5,25 +5,17 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
-import React, { Component } from 'react';
+/** @jsx jsx */
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Alert } from '@instructure/ui-alerts';
 import { Button } from '@instructure/ui-buttons';
 import { Text } from '@instructure/ui-text';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
-var styles = {
-  componentId: 'epout',
-  template: function template(theme) {
-    return "\n\n.epout_bgqc{padding-bottom:".concat(theme.alertPadding || 'inherit', ";position:inherit;z-index:").concat(theme.alertZIndex || 'inherit', "}\n\n.epout_etBv{display:block}\n\n.epout_crZr{padding:").concat(theme.containerPadding || 'inherit', ";position:relative}\n\n.epout_oqJC{background-color:").concat(theme.disabledChildrenBackgroundColor || 'inherit', ";bottom:0;left:0;opacity:").concat(theme.disabledChildrenOpacity || 'inherit', ";position:absolute;right:0;top:0;z-index:").concat(theme.disabledChildrenZIndex || 'inherit', "}");
-  },
-  'alert': 'epout_bgqc',
-  'alertContent': 'epout_etBv',
-  'container': 'epout_crZr',
-  'disabledChildren': 'epout_oqJC'
-};
-import theme from "./theme.js";
-export var WarningWrapper = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var WarningWrapper = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(WarningWrapper, _Component);
 
   var _super = _createSuper(WarningWrapper);
@@ -62,13 +54,11 @@ export var WarningWrapper = (_dec = themeable(theme, styles), _dec(_class = (_te
     key: "renderActionButtons",
     value: function renderActionButtons() {
       if (this.props.hideActions) return;
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.alertContentRow
-      }, /*#__PURE__*/React.createElement(Button, {
+      return jsx("div", null, jsx(Button, {
         size: "small",
         onClick: this.props.cancelActionCallback,
         ref: this.setFocusRef
-      }, this.props.cancelActionText), /*#__PURE__*/React.createElement(Button, {
+      }, this.props.cancelActionText), jsx(Button, {
         size: "small",
         margin: "x-small",
         color: "primary",
@@ -78,25 +68,23 @@ export var WarningWrapper = (_dec = themeable(theme, styles), _dec(_class = (_te
   }, {
     key: "renderDescription",
     value: function renderDescription() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.alertContentRow
-      }, /*#__PURE__*/React.createElement(Text, {
+      return jsx("div", null, jsx(Text, {
         color: "primary"
       }, this.props.description));
     }
   }, {
     key: "renderAlertContent",
     value: function renderAlertContent() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.alertContent
+      return jsx("div", {
+        css: this.props.styles.alertContent
       }, this.renderDescription(), this.renderActionButtons());
     }
   }, {
     key: "renderAlert",
     value: function renderAlert() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.alert
-      }, /*#__PURE__*/React.createElement(Alert, {
+      return jsx("div", {
+        css: this.props.styles.alert
+      }, jsx(Alert, {
         variant: this.props.alertType
       }, this.renderAlertContent()));
     }
@@ -104,15 +92,16 @@ export var WarningWrapper = (_dec = themeable(theme, styles), _dec(_class = (_te
     key: "renderDisableOverlay",
     value: function renderDisableOverlay() {
       if (!this.props.disableChildren) return;
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.disabledChildren
+      return jsx("div", {
+        css: this.props.styles.disabledChildren,
+        "data-testid": "disabled-children"
       });
     }
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.container
+      return jsx("div", {
+        css: this.props.styles.container
       }, this.renderMessage(), this.renderDisableOverlay(), this.props.children);
     }
   }]);
@@ -129,7 +118,8 @@ export var WarningWrapper = (_dec = themeable(theme, styles), _dec(_class = (_te
   description: PropTypes.node,
   disableChildren: PropTypes.bool,
   hideActions: PropTypes.bool,
-  showAlert: PropTypes.bool
+  showAlert: PropTypes.bool,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   alertType: 'info',
   cancelActionCallback: void 0,

package/es/common/components/resources/WarningWrapper/styles.js

@@ -0,0 +1,28 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    alert: {
+      paddingBottom: componentTheme.alertPadding,
+      zIndex: componentTheme.alertZIndex,
+      position: 'inherit'
+    },
+    alertContent: {
+      display: 'block'
+    },
+    container: {
+      position: 'relative',
+      padding: componentTheme.containerPadding
+    },
+    disabledChildren: {
+      backgroundColor: componentTheme.disabledChildrenBackgroundColor,
+      opacity: componentTheme.disabledChildrenOpacity,
+      position: 'absolute',
+      zIndex: componentTheme.disabledChildrenZIndex,
+      top: '0',
+      bottom: '0',
+      left: '0',
+      right: '0'
+    }
+  };
+};
+
+export default generateStyle;

package/es/common/components/resources/WarningWrapper/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       typography = _ref.typography,
       colors = _ref.colors;
@@ -10,4 +10,6 @@ export default function generator(_ref) {
     disabledChildrenOpacity: '0.6',
     disabledChildrenZIndex: '7777'
   };
-}
+};
+
+export default generateComponentTheme;

package/es/common/components/resources/stimulus/StimulusEditInfo/presenter.js

@@ -5,13 +5,14 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
-import React, { Component } from 'react';
+/** @jsx jsx */
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { TextInput } from '@instructure/ui-text-input';
 import { FormField, FormFieldGroup } from '@instructure/ui-form-field';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import { Heading } from '@instructure/ui-heading';
 import { RichContentInput, RCE_SINGLE_LINE_HEIGHT } from '@instructure/quiz-rce';
 import { toErrors } from "../../../../util/instUIMessages.js";
@@ -20,23 +21,16 @@ import { IconUpdownLine } from '@instructure/ui-icons';
 import { ToggleDetails } from '@instructure/ui-toggle-details';
 import { TOP } from '@instructure/quiz-common';
 import t from '@instructure/quiz-i18n/es/format-message';
-var styles = {
-  componentId: 'doNBF',
-  template: function template(theme) {
-    return "\n\n.doNBF_daCg{padding-bottom:".concat(theme.sectionPadding || 'inherit', "}\n\n.doNBF_fvFs{color:").concat(theme.optionalLabelColor || 'inherit', ";font-size:").concat(theme.optionalLabelFontSize || 'inherit', ";margin-left:").concat(theme.urlLabelMargin || 'inherit', "}");
-  },
-  'section': 'doNBF_daCg',
-  'optionalLabel': 'doNBF_fvFs'
-};
-import theme from "./theme.js";
-
-var _ref3 = /*#__PURE__*/React.createElement(IconUpdownLine, {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+
+var _ref3 = jsx(IconUpdownLine, {
   rotate: "90"
 });
 
-var _ref4 = /*#__PURE__*/React.createElement(IconUpdownLine, null);
+var _ref4 = jsx(IconUpdownLine, null);
 
-export var StimulusEditInfo = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var StimulusEditInfo = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(StimulusEditInfo, _Component);
 
   var _super = _createSuper(StimulusEditInfo);
@@ -95,28 +89,28 @@ export var StimulusEditInfo = (_dec = themeable(theme, styles), _dec(_class = (_
     key: "renderOptionalLabel",
     value: function renderOptionalLabel(labelName) {
       var optionalText = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : t('(optional)');
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, labelName), /*#__PURE__*/React.createElement("span", {
-        className: styles.optionalLabel
+      return jsx("div", null, jsx("span", null, labelName), jsx("span", {
+        css: this.props.styles.optionalLabel
       }, optionalText));
     }
   }, {
     key: "renderStimulusOrientationSelect",
     value: function renderStimulusOrientationSelect() {
       var stimulusOrientation = this.props.workingStimulus.get('orientation');
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.section
-      }, /*#__PURE__*/React.createElement(SimpleSelect, {
+      return jsx("div", {
+        css: this.props.styles.section
+      }, jsx(SimpleSelect, {
         renderLabel: t('Orientation'),
         onChange: this.onOrientationChange,
         value: stimulusOrientation,
-        renderBeforeInput: /*#__PURE__*/React.createElement(IconUpdownLine, {
+        renderBeforeInput: jsx(IconUpdownLine, {
           rotate: stimulusOrientation === TOP ? '0' : '90'
         })
-      }, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+      }, jsx(SimpleSelect.Option, {
         renderBeforeLabel: _ref3,
         id: "stimulus-orientation-select-option-left",
         value: "left"
-      }, t('Questions to the right')), /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+      }, t('Questions to the right')), jsx(SimpleSelect.Option, {
         renderBeforeLabel: _ref4,
         id: "stimulus-orientation-select-option-top",
         value: "top"
@@ -128,35 +122,35 @@ export var StimulusEditInfo = (_dec = themeable(theme, styles), _dec(_class = (_
       var stimulus = this.props.workingStimulus;
       var textAreaId = "stimulusBodyEdit_".concat(stimulus.id, "_").concat(this.props.isBankedContent);
       var stimulusBodyId = "stimulusBodyEdit_".concat(stimulus.id, "_body");
-      return /*#__PURE__*/React.createElement(FormFieldGroup, {
+      return jsx(FormFieldGroup, {
         messages: this.inputErrors('onSelf'),
-        description: /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Edit Stimulus'))
-      }, /*#__PURE__*/React.createElement(Heading, {
+        description: jsx(ScreenReaderContent, null, t('Edit Stimulus'))
+      }, jsx(Heading, {
         level: "h3",
         as: "h2"
-      }, this.headerText()), /*#__PURE__*/React.createElement("div", {
-        className: styles.section
-      }, /*#__PURE__*/React.createElement(TextInput, {
+      }, this.headerText()), jsx("div", {
+        css: this.props.styles.section
+      }, jsx(TextInput, {
         messages: this.inputErrors('title'),
         renderLabel: t('Title'),
         type: "text",
         ref: this.props.setTitleRef,
         onChange: this.onTextInputChange('title'),
         value: stimulus.get('title')
-      })), /*#__PURE__*/React.createElement("div", {
-        className: styles.section
-      }, /*#__PURE__*/React.createElement(TextInput, {
+      })), jsx("div", {
+        css: this.props.styles.section
+      }, jsx(TextInput, {
         renderLabel: this.renderOptionalLabel(t('Instructions')),
         type: "text",
         onChange: this.onTextInputChange('instructions'),
         value: stimulus.get('instructions')
-      })), /*#__PURE__*/React.createElement("div", {
-        className: styles.section
-      }, /*#__PURE__*/React.createElement(FormField, {
+      })), jsx("div", {
+        css: this.props.styles.section
+      }, jsx(FormField, {
         id: stimulusBodyId,
         label: t('Content'),
         messages: this.inputErrors('body')
-      }, /*#__PURE__*/React.createElement(RichContentInput, {
+      }, jsx(RichContentInput, {
         actsAsInput: true,
         label: "",
         placeholder: t('Add Stimulus Content...'),
@@ -166,16 +160,16 @@ export var StimulusEditInfo = (_dec = themeable(theme, styles), _dec(_class = (_
         onBlur: this.onBodyChange,
         onChange: this.onBodyChange,
         height: RCE_SINGLE_LINE_HEIGHT
-      }))), /*#__PURE__*/React.createElement("div", {
-        className: styles.section
-      }, /*#__PURE__*/React.createElement(ToggleDetails, {
+      }))), jsx("div", {
+        css: this.props.styles.section
+      }, jsx(ToggleDetails, {
         defaultExpanded: true,
         variant: "filled",
         key: "options",
         summary: t('Options')
-      }, this.props.stimulusOrientationEnabled ? this.renderStimulusOrientationSelect() : null, /*#__PURE__*/React.createElement("div", {
-        className: styles.section
-      }, /*#__PURE__*/React.createElement(TextInput, {
+      }, this.props.stimulusOrientationEnabled ? this.renderStimulusOrientationSelect() : null, jsx("div", {
+        css: this.props.styles.section
+      }, jsx(TextInput, {
         renderLabel: this.renderOptionalLabel(t('Source URL'), t('(optional - not visible to students)')),
         type: "text",
         onChange: this.onTextInputChange('sourceUrl'),
@@ -193,7 +187,8 @@ export var StimulusEditInfo = (_dec = themeable(theme, styles), _dec(_class = (_
   errorsShowing: PropTypes.bool.isRequired,
   modifyStimulus: PropTypes.func.isRequired,
   setTitleRef: PropTypes.func,
-  stimulusOrientationEnabled: PropTypes.bool.isRequired
+  stimulusOrientationEnabled: PropTypes.bool.isRequired,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   isBankedContent: false,
   setTitleRef: function setTitleRef() {}

package/es/common/components/resources/stimulus/StimulusEditInfo/styles.js

@@ -0,0 +1,14 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    section: {
+      paddingBottom: componentTheme.sectionPadding
+    },
+    optionalLabel: {
+      color: componentTheme.optionalLabelColor,
+      fontSize: componentTheme.optionalLabelFontSize,
+      marginLeft: componentTheme.urlLabelMargin
+    }
+  };
+};
+
+export default generateStyle;

package/es/common/components/resources/stimulus/StimulusEditInfo/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       typography = _ref.typography,
       colors = _ref.colors;
@@ -8,4 +8,6 @@ export default function generator(_ref) {
     optionalLabelFontSize: typography.fontSizeXSmall,
     urlLabelMargin: spacing.xSmall
   };
-}
+};
+
+export default generateComponentTheme;

package/es/moderating/components/events/ResponseEvent.js

@@ -5,27 +5,21 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
-import React, { Component } from 'react';
+/** @jsx jsx */
+import { Component } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import PropTypes from 'prop-types';
 import { IconImageSolid } from '@instructure/ui-icons';
 import { Text } from '@instructure/ui-text';
 import { Img } from '@instructure/ui-img';
 import { ToggleDetails } from '@instructure/ui-toggle-details';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { extractTextFromHtml } from '@instructure/quiz-interactions';
-var styles = {
-  componentId: 'dlXUv',
-  template: function template(theme) {
-    return "\n\n.dlXUv_bEcb{margin-right:".concat(theme.answerMediaIconMargin || 'inherit', "}\n\n.dlXUv_cPVv>img{margin:").concat(theme.embeddedImageMargin || 'inherit', ";max-height:400px;max-width:400px;padding-right:").concat(theme.embeddedImagePadding || 'inherit', "}\n\n.dlXUv_cYzF{border-bottom:1px solid ").concat(theme.mediaToggleColor || 'inherit', ";border-left:1px solid ").concat(theme.mediaToggleColor || 'inherit', ";border-radius:5px;border-right:1px solid ").concat(theme.mediaToggleColor || 'inherit', ";margin:").concat(theme.mediaToggleMargin || 'inherit', ";text-align:left}\n\n[dir=ltr] .dlXUv_cYzF,[dir=rtl] .dlXUv_cYzF{text-align:left}");
-  },
-  'answerMediaIcon': 'dlXUv_bEcb',
-  'embeddedImage': 'dlXUv_cPVv',
-  'mediaToggle': 'dlXUv_cYzF'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 var imgRegex = /<img.*?src=['"](.+)['"]/g;
-export var ResponseEvent = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var ResponseEvent = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(ResponseEvent, _Component);
 
   var _super = _createSuper(ResponseEvent);
@@ -58,8 +52,8 @@ export var ResponseEvent = (_dec = themeable(theme, styles), _dec(_class = (_tem
     key: "renderTextSummary",
     value: function renderTextSummary() {
       var strippedItemBody = extractTextFromHtml(this.itemBody);
-      return /*#__PURE__*/React.createElement("span", null, this.hasMedia() && /*#__PURE__*/React.createElement(IconImageSolid, {
-        className: styles.answerMediaIcon
+      return jsx("span", null, this.hasMedia() && jsx(IconImageSolid, {
+        css: this.props.styles.answerMediaIcon
       }), t('Answered question {position}: {question}', {
         position: this.props.event.getIn(['eventData', 'position']),
         question: strippedItemBody
@@ -68,6 +62,8 @@ export var ResponseEvent = (_dec = themeable(theme, styles), _dec(_class = (_tem
   }, {
     key: "renderMedia",
     value: function renderMedia() {
+      var _this = this;
+
       if (!this.hasMedia()) {
         return;
       }
@@ -75,15 +71,15 @@ export var ResponseEvent = (_dec = themeable(theme, styles), _dec(_class = (_tem
       var mediaUrls = this.itemBody.match(imgRegex);
       return mediaUrls.map(function (mediaUrl) {
         var s3Url = mediaUrl.match(/src=['"](.+)['"]/)[1];
-        return /*#__PURE__*/React.createElement("div", {
-          className: styles.mediaToggle,
+        return jsx("div", {
+          css: _this.props.styles.mediaToggle,
           key: s3Url
-        }, /*#__PURE__*/React.createElement(ToggleDetails, {
+        }, jsx(ToggleDetails, {
           summary: t('Included Media'),
           variant: "filled"
-        }, /*#__PURE__*/React.createElement("div", {
-          className: styles.embeddedImage
-        }, /*#__PURE__*/React.createElement(Img, {
+        }, jsx("div", {
+          css: _this.props.styles.embeddedImage
+        }, jsx(Img, {
           src: s3Url
         }))));
       });
@@ -95,11 +91,11 @@ export var ResponseEvent = (_dec = themeable(theme, styles), _dec(_class = (_tem
 
       if (responseText) {
         // If this returns falsey, then we know to just display the stem
-        return /*#__PURE__*/React.createElement(ToggleDetails, {
+        return jsx(ToggleDetails, {
           summary: this.renderTextSummary()
         }, this.renderMedia(), responseText);
       } else {
-        return /*#__PURE__*/React.createElement(Text, {
+        return jsx(Text, {
           size: "small"
         }, this.renderTextSummary(), this.renderMedia());
       }
@@ -115,6 +111,7 @@ export var ResponseEvent = (_dec = themeable(theme, styles), _dec(_class = (_tem
   return ResponseEvent;
 }(Component), _class2.propTypes = {
   event: ImmutablePropTypes.record.isRequired,
-  item: ImmutablePropTypes.record.isRequired
+  item: ImmutablePropTypes.record.isRequired,
+  styles: PropTypes.object
 }, _temp)) || _class);
 export default ResponseEvent;

package/es/moderating/components/events/styles.js

@@ -0,0 +1,25 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    answerMediaIcon: {
+      marginRight: componentTheme.answerMediaIconMargin
+    },
+    embeddedImage: {
+      '>img': {
+        maxHeight: '400px',
+        maxWidth: '400px',
+        margin: componentTheme.embeddedImageMargin,
+        paddingRight: componentTheme.embeddedImagePadding
+      }
+    },
+    mediaToggle: {
+      margin: componentTheme.mediaToggleMargin,
+      textAlign: 'left',
+      borderBottom: "1px solid ".concat(componentTheme.mediaToggleColor),
+      borderLeft: "1px solid ".concat(componentTheme.mediaToggleColor),
+      borderRight: "1px solid ".concat(componentTheme.mediaToggleColor),
+      borderRadius: '5px'
+    }
+  };
+};
+
+export default generateStyle;

package/es/moderating/components/events/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       colors = _ref.colors;
   return {
@@ -8,4 +8,6 @@ export default function generator(_ref) {
     mediaToggleMargin: spacing.xSmall,
     mediaToggleColor: colors.tiara
   };
-}
+};
+
+export default generateComponentTheme;

package/lib/common/components/resources/WarningWrapper/index.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,7 +15,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -27,25 +25,17 @@ var _uiButtons = require("@instructure/ui-buttons");
 
 var _uiText = require("@instructure/ui-text");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'epout',
-  template: function template(theme) {
-    return "\n\n.epout_bgqc{padding-bottom:".concat(theme.alertPadding || 'inherit', ";position:inherit;z-index:").concat(theme.alertZIndex || 'inherit', "}\n\n.epout_etBv{display:block}\n\n.epout_crZr{padding:").concat(theme.containerPadding || 'inherit', ";position:relative}\n\n.epout_oqJC{background-color:").concat(theme.disabledChildrenBackgroundColor || 'inherit', ";bottom:0;left:0;opacity:").concat(theme.disabledChildrenOpacity || 'inherit', ";position:absolute;right:0;top:0;z-index:").concat(theme.disabledChildrenZIndex || 'inherit', "}");
-  },
-  'alert': 'epout_bgqc',
-  'alertContent': 'epout_etBv',
-  'container': 'epout_crZr',
-  'disabledChildren': 'epout_oqJC'
-};
-var WarningWrapper = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var WarningWrapper = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(WarningWrapper, _Component);
 
   var _super = (0, _createSuper2.default)(WarningWrapper);
@@ -84,13 +74,11 @@ var WarningWrapper = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles)
     key: "renderActionButtons",
     value: function renderActionButtons() {
       if (this.props.hideActions) return;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.alertContentRow
-      }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_uiButtons.Button, {
         size: "small",
         onClick: this.props.cancelActionCallback,
         ref: this.setFocusRef
-      }, this.props.cancelActionText), /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      }, this.props.cancelActionText), (0, _emotion.jsx)(_uiButtons.Button, {
         size: "small",
         margin: "x-small",
         color: "primary",
@@ -100,25 +88,23 @@ var WarningWrapper = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles)
   }, {
     key: "renderDescription",
     value: function renderDescription() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.alertContentRow
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_uiText.Text, {
         color: "primary"
       }, this.props.description));
     }
   }, {
     key: "renderAlertContent",
     value: function renderAlertContent() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.alertContent
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.alertContent
       }, this.renderDescription(), this.renderActionButtons());
     }
   }, {
     key: "renderAlert",
     value: function renderAlert() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.alert
-      }, /*#__PURE__*/_react.default.createElement(_uiAlerts.Alert, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.alert
+      }, (0, _emotion.jsx)(_uiAlerts.Alert, {
         variant: this.props.alertType
       }, this.renderAlertContent()));
     }
@@ -126,15 +112,16 @@ var WarningWrapper = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles)
     key: "renderDisableOverlay",
     value: function renderDisableOverlay() {
       if (!this.props.disableChildren) return;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.disabledChildren
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.disabledChildren,
+        "data-testid": "disabled-children"
       });
     }
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.container
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.container
       }, this.renderMessage(), this.renderDisableOverlay(), this.props.children);
     }
   }]);
@@ -150,7 +137,8 @@ var WarningWrapper = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles)
   description: _propTypes.default.node,
   disableChildren: _propTypes.default.bool,
   hideActions: _propTypes.default.bool,
-  showAlert: _propTypes.default.bool
+  showAlert: _propTypes.default.bool,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   alertType: 'info',
   cancelActionCallback: void 0,

package/lib/common/components/resources/WarningWrapper/styles.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    alert: {
+      paddingBottom: componentTheme.alertPadding,
+      zIndex: componentTheme.alertZIndex,
+      position: 'inherit'
+    },
+    alertContent: {
+      display: 'block'
+    },
+    container: {
+      position: 'relative',
+      padding: componentTheme.containerPadding
+    },
+    disabledChildren: {
+      backgroundColor: componentTheme.disabledChildrenBackgroundColor,
+      opacity: componentTheme.disabledChildrenOpacity,
+      position: 'absolute',
+      zIndex: componentTheme.disabledChildrenZIndex,
+      top: '0',
+      bottom: '0',
+      left: '0',
+      right: '0'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/common/components/resources/WarningWrapper/theme.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       typography = _ref.typography,
       colors = _ref.colors;
@@ -17,4 +17,7 @@ function generator(_ref) {
     disabledChildrenOpacity: '0.6',
     disabledChildrenZIndex: '7777'
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/common/components/resources/stimulus/StimulusEditInfo/presenter.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,7 +15,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -29,7 +27,7 @@ var _uiTextInput = require("@instructure/ui-text-input");
 
 var _uiFormField = require("@instructure/ui-form-field");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _uiHeading = require("@instructure/ui-heading");
 
@@ -47,26 +45,19 @@ var _quizCommon = require("@instructure/quiz-common");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'doNBF',
-  template: function template(theme) {
-    return "\n\n.doNBF_daCg{padding-bottom:".concat(theme.sectionPadding || 'inherit', "}\n\n.doNBF_fvFs{color:").concat(theme.optionalLabelColor || 'inherit', ";font-size:").concat(theme.optionalLabelFontSize || 'inherit', ";margin-left:").concat(theme.urlLabelMargin || 'inherit', "}");
-  },
-  'section': 'doNBF_daCg',
-  'optionalLabel': 'doNBF_fvFs'
-};
-
-var _ref3 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconUpdownLine, {
+var _ref3 = (0, _emotion.jsx)(_uiIcons.IconUpdownLine, {
   rotate: "90"
 });
 
-var _ref4 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconUpdownLine, null);
+var _ref4 = (0, _emotion.jsx)(_uiIcons.IconUpdownLine, null);
 
-var StimulusEditInfo = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var StimulusEditInfo = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(StimulusEditInfo, _Component);
 
   var _super = (0, _createSuper2.default)(StimulusEditInfo);
@@ -125,28 +116,28 @@ var StimulusEditInfo = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
     key: "renderOptionalLabel",
     value: function renderOptionalLabel(labelName) {
       var optionalText = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : (0, _formatMessage.default)('(optional)');
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", null, labelName), /*#__PURE__*/_react.default.createElement("span", {
-        className: styles.optionalLabel
+      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)("span", null, labelName), (0, _emotion.jsx)("span", {
+        css: this.props.styles.optionalLabel
       }, optionalText));
     }
   }, {
     key: "renderStimulusOrientationSelect",
     value: function renderStimulusOrientationSelect() {
       var stimulusOrientation = this.props.workingStimulus.get('orientation');
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.section
-      }, /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.section
+      }, (0, _emotion.jsx)(_uiSimpleSelect.SimpleSelect, {
         renderLabel: (0, _formatMessage.default)('Orientation'),
         onChange: this.onOrientationChange,
         value: stimulusOrientation,
-        renderBeforeInput: /*#__PURE__*/_react.default.createElement(_uiIcons.IconUpdownLine, {
+        renderBeforeInput: (0, _emotion.jsx)(_uiIcons.IconUpdownLine, {
           rotate: stimulusOrientation === _quizCommon.TOP ? '0' : '90'
         })
-      }, /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect.Option, {
+      }, (0, _emotion.jsx)(_uiSimpleSelect.SimpleSelect.Option, {
         renderBeforeLabel: _ref3,
         id: "stimulus-orientation-select-option-left",
         value: "left"
-      }, (0, _formatMessage.default)('Questions to the right')), /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect.Option, {
+      }, (0, _formatMessage.default)('Questions to the right')), (0, _emotion.jsx)(_uiSimpleSelect.SimpleSelect.Option, {
         renderBeforeLabel: _ref4,
         id: "stimulus-orientation-select-option-top",
         value: "top"
@@ -158,35 +149,35 @@ var StimulusEditInfo = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
       var stimulus = this.props.workingStimulus;
       var textAreaId = "stimulusBodyEdit_".concat(stimulus.id, "_").concat(this.props.isBankedContent);
       var stimulusBodyId = "stimulusBodyEdit_".concat(stimulus.id, "_body");
-      return /*#__PURE__*/_react.default.createElement(_uiFormField.FormFieldGroup, {
+      return (0, _emotion.jsx)(_uiFormField.FormFieldGroup, {
         messages: this.inputErrors('onSelf'),
-        description: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Edit Stimulus'))
-      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+        description: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Edit Stimulus'))
+      }, (0, _emotion.jsx)(_uiHeading.Heading, {
         level: "h3",
         as: "h2"
-      }, this.headerText()), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.section
-      }, /*#__PURE__*/_react.default.createElement(_uiTextInput.TextInput, {
+      }, this.headerText()), (0, _emotion.jsx)("div", {
+        css: this.props.styles.section
+      }, (0, _emotion.jsx)(_uiTextInput.TextInput, {
         messages: this.inputErrors('title'),
         renderLabel: (0, _formatMessage.default)('Title'),
         type: "text",
         ref: this.props.setTitleRef,
         onChange: this.onTextInputChange('title'),
         value: stimulus.get('title')
-      })), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.section
-      }, /*#__PURE__*/_react.default.createElement(_uiTextInput.TextInput, {
+      })), (0, _emotion.jsx)("div", {
+        css: this.props.styles.section
+      }, (0, _emotion.jsx)(_uiTextInput.TextInput, {
         renderLabel: this.renderOptionalLabel((0, _formatMessage.default)('Instructions')),
         type: "text",
         onChange: this.onTextInputChange('instructions'),
         value: stimulus.get('instructions')
-      })), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.section
-      }, /*#__PURE__*/_react.default.createElement(_uiFormField.FormField, {
+      })), (0, _emotion.jsx)("div", {
+        css: this.props.styles.section
+      }, (0, _emotion.jsx)(_uiFormField.FormField, {
         id: stimulusBodyId,
         label: (0, _formatMessage.default)('Content'),
         messages: this.inputErrors('body')
-      }, /*#__PURE__*/_react.default.createElement(_quizRce.RichContentInput, {
+      }, (0, _emotion.jsx)(_quizRce.RichContentInput, {
         actsAsInput: true,
         label: "",
         placeholder: (0, _formatMessage.default)('Add Stimulus Content...'),
@@ -196,16 +187,16 @@ var StimulusEditInfo = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
         onBlur: this.onBodyChange,
         onChange: this.onBodyChange,
         height: _quizRce.RCE_SINGLE_LINE_HEIGHT
-      }))), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.section
-      }, /*#__PURE__*/_react.default.createElement(_uiToggleDetails.ToggleDetails, {
+      }))), (0, _emotion.jsx)("div", {
+        css: this.props.styles.section
+      }, (0, _emotion.jsx)(_uiToggleDetails.ToggleDetails, {
         defaultExpanded: true,
         variant: "filled",
         key: "options",
         summary: (0, _formatMessage.default)('Options')
-      }, this.props.stimulusOrientationEnabled ? this.renderStimulusOrientationSelect() : null, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.section
-      }, /*#__PURE__*/_react.default.createElement(_uiTextInput.TextInput, {
+      }, this.props.stimulusOrientationEnabled ? this.renderStimulusOrientationSelect() : null, (0, _emotion.jsx)("div", {
+        css: this.props.styles.section
+      }, (0, _emotion.jsx)(_uiTextInput.TextInput, {
         renderLabel: this.renderOptionalLabel((0, _formatMessage.default)('Source URL'), (0, _formatMessage.default)('(optional - not visible to students)')),
         type: "text",
         onChange: this.onTextInputChange('sourceUrl'),
@@ -222,7 +213,8 @@ var StimulusEditInfo = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
   errorsShowing: _propTypes.default.bool.isRequired,
   modifyStimulus: _propTypes.default.func.isRequired,
   setTitleRef: _propTypes.default.func,
-  stimulusOrientationEnabled: _propTypes.default.bool.isRequired
+  stimulusOrientationEnabled: _propTypes.default.bool.isRequired,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   isBankedContent: false,
   setTitleRef: function setTitleRef() {}

package/lib/common/components/resources/stimulus/StimulusEditInfo/styles.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    section: {
+      paddingBottom: componentTheme.sectionPadding
+    },
+    optionalLabel: {
+      color: componentTheme.optionalLabelColor,
+      fontSize: componentTheme.optionalLabelFontSize,
+      marginLeft: componentTheme.urlLabelMargin
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/common/components/resources/stimulus/StimulusEditInfo/theme.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       typography = _ref.typography,
       colors = _ref.colors;
@@ -15,4 +15,7 @@ function generator(_ref) {
     optionalLabelFontSize: typography.fontSizeXSmall,
     urlLabelMargin: spacing.xSmall
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/moderating/components/events/ResponseEvent.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,10 +15,12 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _uiIcons = require("@instructure/ui-icons");
 
 var _uiText = require("@instructure/ui-text");
@@ -29,27 +29,20 @@ var _uiImg = require("@instructure/ui-img");
 
 var _uiToggleDetails = require("@instructure/ui-toggle-details");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
 var _quizInteractions = require("@instructure/quiz-interactions");
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'dlXUv',
-  template: function template(theme) {
-    return "\n\n.dlXUv_bEcb{margin-right:".concat(theme.answerMediaIconMargin || 'inherit', "}\n\n.dlXUv_cPVv>img{margin:").concat(theme.embeddedImageMargin || 'inherit', ";max-height:400px;max-width:400px;padding-right:").concat(theme.embeddedImagePadding || 'inherit', "}\n\n.dlXUv_cYzF{border-bottom:1px solid ").concat(theme.mediaToggleColor || 'inherit', ";border-left:1px solid ").concat(theme.mediaToggleColor || 'inherit', ";border-radius:5px;border-right:1px solid ").concat(theme.mediaToggleColor || 'inherit', ";margin:").concat(theme.mediaToggleMargin || 'inherit', ";text-align:left}\n\n[dir=ltr] .dlXUv_cYzF,[dir=rtl] .dlXUv_cYzF{text-align:left}");
-  },
-  'answerMediaIcon': 'dlXUv_bEcb',
-  'embeddedImage': 'dlXUv_cPVv',
-  'mediaToggle': 'dlXUv_cYzF'
-};
 var imgRegex = /<img.*?src=['"](.+)['"]/g;
-var ResponseEvent = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var ResponseEvent = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ResponseEvent, _Component);
 
   var _super = (0, _createSuper2.default)(ResponseEvent);
@@ -81,8 +74,8 @@ var ResponseEvent = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
     key: "renderTextSummary",
     value: function renderTextSummary() {
       var strippedItemBody = (0, _quizInteractions.extractTextFromHtml)(this.itemBody);
-      return /*#__PURE__*/_react.default.createElement("span", null, this.hasMedia() && /*#__PURE__*/_react.default.createElement(_uiIcons.IconImageSolid, {
-        className: styles.answerMediaIcon
+      return (0, _emotion.jsx)("span", null, this.hasMedia() && (0, _emotion.jsx)(_uiIcons.IconImageSolid, {
+        css: this.props.styles.answerMediaIcon
       }), (0, _formatMessage.default)('Answered question {position}: {question}', {
         position: this.props.event.getIn(['eventData', 'position']),
         question: strippedItemBody
@@ -91,6 +84,8 @@ var ResponseEvent = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   }, {
     key: "renderMedia",
     value: function renderMedia() {
+      var _this = this;
+
       if (!this.hasMedia()) {
         return;
       }
@@ -98,15 +93,15 @@ var ResponseEvent = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
       var mediaUrls = this.itemBody.match(imgRegex);
       return mediaUrls.map(function (mediaUrl) {
         var s3Url = mediaUrl.match(/src=['"](.+)['"]/)[1];
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.mediaToggle,
+        return (0, _emotion.jsx)("div", {
+          css: _this.props.styles.mediaToggle,
           key: s3Url
-        }, /*#__PURE__*/_react.default.createElement(_uiToggleDetails.ToggleDetails, {
+        }, (0, _emotion.jsx)(_uiToggleDetails.ToggleDetails, {
           summary: (0, _formatMessage.default)('Included Media'),
           variant: "filled"
-        }, /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.embeddedImage
-        }, /*#__PURE__*/_react.default.createElement(_uiImg.Img, {
+        }, (0, _emotion.jsx)("div", {
+          css: _this.props.styles.embeddedImage
+        }, (0, _emotion.jsx)(_uiImg.Img, {
           src: s3Url
         }))));
       });
@@ -118,11 +113,11 @@ var ResponseEvent = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
 
       if (responseText) {
         // If this returns falsey, then we know to just display the stem
-        return /*#__PURE__*/_react.default.createElement(_uiToggleDetails.ToggleDetails, {
+        return (0, _emotion.jsx)(_uiToggleDetails.ToggleDetails, {
           summary: this.renderTextSummary()
         }, this.renderMedia(), responseText);
       } else {
-        return /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        return (0, _emotion.jsx)(_uiText.Text, {
           size: "small"
         }, this.renderTextSummary(), this.renderMedia());
       }
@@ -137,7 +132,8 @@ var ResponseEvent = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   return ResponseEvent;
 }(_react.Component), _class2.propTypes = {
   event: _reactImmutableProptypes.default.record.isRequired,
-  item: _reactImmutableProptypes.default.record.isRequired
+  item: _reactImmutableProptypes.default.record.isRequired,
+  styles: _propTypes.default.object
 }, _temp)) || _class);
 exports.ResponseEvent = ResponseEvent;
 var _default = ResponseEvent;

package/lib/moderating/components/events/styles.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    answerMediaIcon: {
+      marginRight: componentTheme.answerMediaIconMargin
+    },
+    embeddedImage: {
+      '>img': {
+        maxHeight: '400px',
+        maxWidth: '400px',
+        margin: componentTheme.embeddedImageMargin,
+        paddingRight: componentTheme.embeddedImagePadding
+      }
+    },
+    mediaToggle: {
+      margin: componentTheme.mediaToggleMargin,
+      textAlign: 'left',
+      borderBottom: "1px solid ".concat(componentTheme.mediaToggleColor),
+      borderLeft: "1px solid ".concat(componentTheme.mediaToggleColor),
+      borderRight: "1px solid ".concat(componentTheme.mediaToggleColor),
+      borderRadius: '5px'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/moderating/components/events/theme.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       colors = _ref.colors;
   return {
@@ -15,4 +15,7 @@ function generator(_ref) {
     mediaToggleMargin: spacing.xSmall,
     mediaToggleColor: colors.tiara
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "20.11.1",
+  "version": "20.11.2-rc.0+51ecaccdf",
   "license": "MIT",
   "description": "The Quiz React SDK by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
@@ -44,11 +44,11 @@
     "@instructure/emotion": "^8.51.0",
     "@instructure/grading-utils": "^1.0.0",
     "@instructure/outcomes-ui": "^3.2.0",
-    "@instructure/quiz-common": "^20.11.1",
-    "@instructure/quiz-i18n": "^20.11.1",
-    "@instructure/quiz-interactions": "^20.11.1",
-    "@instructure/quiz-number-input": "^20.11.1",
-    "@instructure/quiz-rce": "^20.11.1",
+    "@instructure/quiz-common": "20.11.2-rc.0+51ecaccdf",
+    "@instructure/quiz-i18n": "20.11.2-rc.0+51ecaccdf",
+    "@instructure/quiz-interactions": "20.11.2-rc.0+51ecaccdf",
+    "@instructure/quiz-number-input": "20.11.2-rc.0+51ecaccdf",
+    "@instructure/quiz-rce": "20.11.2-rc.0+51ecaccdf",
     "@instructure/ui-a11y-content": "^8.51.0",
     "@instructure/ui-alerts": "^8.51.0",
     "@instructure/ui-avatar": "^8.51.0",
@@ -112,7 +112,7 @@
     "file-saver": "~2.0.5",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "^20.11.1",
+    "instructure-validations": "20.11.2-rc.0+51ecaccdf",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -143,7 +143,7 @@
     "uuid": "^3.2.1"
   },
   "devDependencies": {
-    "@instructure/quiz-scripts": "^20.11.1",
+    "@instructure/quiz-scripts": "20.11.1",
     "@instructure/ui-axe-check": "^8.51.0",
     "@instructure/ui-babel-preset": "^7.22.1",
     "@instructure/ui-karma-config": "^7.22.1",
@@ -163,7 +163,7 @@
     "intl": "^1.2.4",
     "jquery": "^2.2.3",
     "most-subject": "^5.3.0",
-    "quiz-presets": "^20.11.1",
+    "quiz-presets": "20.11.2-rc.0+51ecaccdf",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -179,5 +179,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e4c306026ad5c305c5640a923bee787882981ca4"
+  "gitHead": "51ecaccdfac271d22bb45c11518dc958a61cca1e"
 }