@instructure/quiz-core 20.3.1-rc.0 → 20.3.1-rc.2

package/es/common/components/PrintFontSizeModal/presenter.js

@@ -5,24 +5,19 @@ 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 { Modal, ModalHeader, ModalBody, ModalFooter } from '@instructure/quiz-common';
 import { Heading } from '@instructure/ui-heading';
 import { Button, CloseButton } from '@instructure/ui-buttons';
-import { themeable } from '@instructure/ui-themeable';
-var styles = {
-  componentId: 'ccksF',
-  template: function template(theme) {
-    return "\n\n.ccksF_fatK{border-bottom:solid ".concat(theme.separatorBorderWidth || 'inherit', ";border-color:").concat(theme.separatorColor || 'inherit', ";margin:").concat(theme.separatorMargin || 'inherit', " 0;padding:0;width:100%}");
-  },
-  'separator': 'ccksF_fatK'
-};
-import theme from "./theme.js";
+import { withStyle, jsx } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 import t from '@instructure/quiz-i18n/es/format-message';
 import { RadioInputGroup, RadioInput } from '@instructure/ui-radio-input';
 import { Checkbox } from '@instructure/ui-checkbox';
-export var PrintFontSizeModal = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var PrintFontSizeModal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(PrintFontSizeModal, _Component);
 
   var _super = _createSuper(PrintFontSizeModal);
@@ -109,18 +104,18 @@ export var PrintFontSizeModal = (_dec = themeable(theme, styles), _dec(_class =
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(Modal, {
+      return jsx(Modal, {
         open: this.props.isOpen,
         onDismiss: this.props.onCancel,
         onExited: this.props.onExited,
         size: "small",
         label: this.text.printQuiz
-      }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(Heading, null, this.text.printQuiz), /*#__PURE__*/React.createElement(CloseButton, {
+      }, jsx(ModalHeader, null, jsx(Heading, null, this.text.printQuiz), jsx(CloseButton, {
         onClick: this.props.onCancel,
         placement: "end",
         offset: "medium",
         screenReaderLabel: this.text.close
-      })), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(RadioInputGroup, {
+      })), jsx(ModalBody, null, jsx(RadioInputGroup, {
         onChange: this.handleFontSizeChange,
         name: "print-font-size",
         value: this.state.selectedFontSize,
@@ -128,7 +123,7 @@ export var PrintFontSizeModal = (_dec = themeable(theme, styles), _dec(_class =
         description: t('Text size'),
         "data-automation": "print-font-size-modal-radio-group"
       }, this.sizes.map(function (size) {
-        var label = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, size.label), " ", /*#__PURE__*/React.createElement("p", {
+        var label = jsx("div", null, jsx("span", null, size.label), " ", jsx("p", {
           "aria-hidden": "true",
           style: {
             fontSize: "".concat(size.size, "rem"),
@@ -138,25 +133,25 @@ export var PrintFontSizeModal = (_dec = themeable(theme, styles), _dec(_class =
         }, t('Printed quiz question')));
         var key = "print-font-size-modal-radio-button-key-".concat(size.value);
         var dataAutomation = "print-font-size-modal-radio-button-".concat(size.value);
-        return /*#__PURE__*/React.createElement(RadioInput, {
+        return jsx(RadioInput, {
           key: key,
           "data-automation": dataAutomation,
           inline: true,
           label: label,
           value: size.value
         });
-      })), /*#__PURE__*/React.createElement("div", {
-        className: styles.separator
-      }), /*#__PURE__*/React.createElement(Checkbox, {
+      })), jsx("div", {
+        css: this.props.styles.separator
+      }), jsx(Checkbox, {
         label: this.text.rememberTextSizeSetting,
         checked: this.state.rememberTextSizeSetting,
         onChange: this.handleRememberFontSize
-      })), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+      })), jsx(ModalFooter, null, jsx(Button, {
         "data-automation": "sdk-print-font-size-cancel-button",
         color: "primary-inverse",
         onClick: this.props.onCancel,
         margin: "0 x-small 0 0"
-      }, this.text.cancel), /*#__PURE__*/React.createElement(Button, {
+      }, this.text.cancel), jsx(Button, {
         "data-automation": "sdk-print-font-size-print-preview-button",
         color: "primary",
         onClick: this.handleSubmit,
@@ -172,7 +167,9 @@ export var PrintFontSizeModal = (_dec = themeable(theme, styles), _dec(_class =
   persistedPrintFontSize: PropTypes.string,
   onSubmit: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
-  onExited: PropTypes.func.isRequired
+  onExited: PropTypes.func.isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   isOpen: false,
   persistedPrintFontSize: 'medium'

package/es/common/components/PrintFontSizeModal/styles.js

@@ -0,0 +1,13 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    separator: {
+      width: '100%',
+      margin: "".concat(componentTheme.separatorMargin, " 0"),
+      padding: 0,
+      borderBottom: "solid ".concat(componentTheme.separatorBorderWidth),
+      borderColor: componentTheme.separatorColor
+    }
+  };
+};
+
+export default generateStyle;

package/es/common/components/PrintFontSizeModal/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
       borders = _ref.borders,
       spacing = _ref.spacing;
@@ -7,4 +7,6 @@ export default function generator(_ref) {
     separatorBorderWidth: borders.widthSmall,
     separatorMargin: spacing.medium
   };
-}
+};
+
+export default generateComponentTheme;

package/es/common/components/alerts/presenter.js

@@ -5,24 +5,18 @@ 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 partial from 'lodash/partial';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { Alert } from '@instructure/ui-alerts';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
-var styles = {
-  componentId: 'cYPGH',
-  template: function template(theme) {
-    return "\n\n.cYPGH_ddjo{box-sizing:border-box;padding-left:".concat(theme.alertsPadding || 'inherit', ";padding-right:").concat(theme.alertsPadding || 'inherit', ";padding-top:").concat(theme.alertsTopPadding || 'inherit', ";pointer-events:none;position:fixed;width:100%;z-index:").concat(theme.alertsZIndex || 'inherit', "}\n\n.cYPGH_eVxh{pointer-events:auto}\n\n@media screen and (--phoneBreakPoint){.cYPGH_ddjo{padding:").concat(theme.alertsMobilePadding || 'inherit', "}}");
-  },
-  'alerts': 'cYPGH_ddjo',
-  'alertHolder': 'cYPGH_eVxh'
-};
-import theme from "./theme.js";
-export var Alerts = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var Alerts = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(Alerts, _Component);
 
   var _super = _createSuper(Alerts);
@@ -46,10 +40,10 @@ export var Alerts = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
       }
 
       if (alert.variant === 'stickyerror') {
-        return /*#__PURE__*/React.createElement("div", {
+        return jsx("div", {
           key: alert.uuid,
-          className: styles.alertHolder
-        }, /*#__PURE__*/React.createElement(Alert, {
+          css: _this.props.styles.alertHolder
+        }, jsx(Alert, {
           variant: "error",
           onDismiss: closeAlert,
           renderCloseButtonLabel: t('Close'),
@@ -57,10 +51,10 @@ export var Alerts = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
         }, alert.message));
       }
 
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         key: alert.uuid,
-        className: styles.alertHolder
-      }, /*#__PURE__*/React.createElement(Alert, {
+        css: _this.props.styles.alertHolder
+      }, jsx(Alert, {
         variant: alert.variant,
         onDismiss: closeAlert,
         renderCloseButtonLabel: t('Close'),
@@ -74,7 +68,7 @@ export var Alerts = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
   _createClass(Alerts, [{
     key: "renderScreenreaderAlert",
     value: function renderScreenreaderAlert(alert) {
-      return /*#__PURE__*/React.createElement(ScreenReaderContent, {
+      return jsx(ScreenReaderContent, {
         key: alert.uuid
       }, alert.message);
     }
@@ -91,16 +85,16 @@ export var Alerts = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
       });
 
       if (hasStickyErrors) {
-        return /*#__PURE__*/React.createElement("div", {
-          className: styles.alerts,
+        return jsx("div", {
+          css: this.props.styles.alerts,
           style: {
             zIndex: '99999'
           }
         }, this.renderAlerts());
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.alerts
+      return jsx("div", {
+        css: this.props.styles.alerts
       }, this.renderAlerts());
     }
   }]);
@@ -109,7 +103,9 @@ export var Alerts = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
   return Alerts;
 }(Component), _class2.propTypes = {
   removeAlert: PropTypes.func.isRequired,
-  alerts: ImmutablePropTypes.list.isRequired
+  alerts: ImmutablePropTypes.list.isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   sidebarOpen: false
 }, _temp)) || _class);

package/es/common/components/alerts/styles.js

@@ -0,0 +1,24 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+var generateStyle = function generateStyle(componentTheme) {
+  var mq = "@media screen and (".concat(componentTheme.phoneBreakPoint, ")");
+  return {
+    alerts: _defineProperty({
+      position: 'fixed',
+      pointerEvents: 'none',
+      width: '100%',
+      boxSizing: 'border-box',
+      zIndex: componentTheme.alertsZIndex,
+      paddingLeft: componentTheme.alertsPadding,
+      paddingRight: componentTheme.alertsPadding,
+      paddingTop: componentTheme.alertsTopPadding
+    }, mq, {
+      padding: componentTheme.alertsMobilePadding
+    }),
+    alertHolder: {
+      pointerEvents: 'auto'
+    }
+  };
+};
+
+export default generateStyle;

package/es/common/components/alerts/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var breakpoints = _ref.breakpoints,
       spacing = _ref.spacing;
   return {
@@ -8,4 +8,6 @@ export default function generator(_ref) {
     alertsZIndex: '7777',
     phoneBreakPoint: "max-width: ".concat(breakpoints.medium)
   };
-}
+};
+
+export default generateComponentTheme;

package/lib/common/components/PrintFontSizeModal/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"));
 
@@ -27,7 +25,9 @@ var _uiHeading = require("@instructure/ui-heading");
 
 var _uiButtons = require("@instructure/ui-buttons");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
+
+var _styles = _interopRequireDefault(require("./styles.js"));
 
 var _theme = _interopRequireDefault(require("./theme.js"));
 
@@ -39,14 +39,7 @@ var _uiCheckbox = require("@instructure/ui-checkbox");
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'ccksF',
-  template: function template(theme) {
-    return "\n\n.ccksF_fatK{border-bottom:solid ".concat(theme.separatorBorderWidth || 'inherit', ";border-color:").concat(theme.separatorColor || 'inherit', ";margin:").concat(theme.separatorMargin || 'inherit', " 0;padding:0;width:100%}");
-  },
-  'separator': 'ccksF_fatK'
-};
-var PrintFontSizeModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var PrintFontSizeModal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(PrintFontSizeModal, _Component);
 
   var _super = (0, _createSuper2.default)(PrintFontSizeModal);
@@ -133,18 +126,18 @@ var PrintFontSizeModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, sty
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_quizCommon.Modal, {
+      return (0, _emotion.jsx)(_quizCommon.Modal, {
         open: this.props.isOpen,
         onDismiss: this.props.onCancel,
         onExited: this.props.onExited,
         size: "small",
         label: this.text.printQuiz
-      }, /*#__PURE__*/_react.default.createElement(_quizCommon.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, null, this.text.printQuiz), /*#__PURE__*/_react.default.createElement(_uiButtons.CloseButton, {
+      }, (0, _emotion.jsx)(_quizCommon.ModalHeader, null, (0, _emotion.jsx)(_uiHeading.Heading, null, this.text.printQuiz), (0, _emotion.jsx)(_uiButtons.CloseButton, {
         onClick: this.props.onCancel,
         placement: "end",
         offset: "medium",
         screenReaderLabel: this.text.close
-      })), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalBody, null, /*#__PURE__*/_react.default.createElement(_uiRadioInput.RadioInputGroup, {
+      })), (0, _emotion.jsx)(_quizCommon.ModalBody, null, (0, _emotion.jsx)(_uiRadioInput.RadioInputGroup, {
         onChange: this.handleFontSizeChange,
         name: "print-font-size",
         value: this.state.selectedFontSize,
@@ -152,7 +145,7 @@ var PrintFontSizeModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, sty
         description: (0, _formatMessage.default)('Text size'),
         "data-automation": "print-font-size-modal-radio-group"
       }, this.sizes.map(function (size) {
-        var label = /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", null, size.label), " ", /*#__PURE__*/_react.default.createElement("p", {
+        var label = (0, _emotion.jsx)("div", null, (0, _emotion.jsx)("span", null, size.label), " ", (0, _emotion.jsx)("p", {
           "aria-hidden": "true",
           style: {
             fontSize: "".concat(size.size, "rem"),
@@ -160,28 +153,27 @@ var PrintFontSizeModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, sty
             margin: '1rem 0'
           }
         }, (0, _formatMessage.default)('Printed quiz question')));
-
         var key = "print-font-size-modal-radio-button-key-".concat(size.value);
         var dataAutomation = "print-font-size-modal-radio-button-".concat(size.value);
-        return /*#__PURE__*/_react.default.createElement(_uiRadioInput.RadioInput, {
+        return (0, _emotion.jsx)(_uiRadioInput.RadioInput, {
           key: key,
           "data-automation": dataAutomation,
           inline: true,
           label: label,
           value: size.value
         });
-      })), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.separator
-      }), /*#__PURE__*/_react.default.createElement(_uiCheckbox.Checkbox, {
+      })), (0, _emotion.jsx)("div", {
+        css: this.props.styles.separator
+      }), (0, _emotion.jsx)(_uiCheckbox.Checkbox, {
         label: this.text.rememberTextSizeSetting,
         checked: this.state.rememberTextSizeSetting,
         onChange: this.handleRememberFontSize
-      })), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      })), (0, _emotion.jsx)(_quizCommon.ModalFooter, null, (0, _emotion.jsx)(_uiButtons.Button, {
         "data-automation": "sdk-print-font-size-cancel-button",
         color: "primary-inverse",
         onClick: this.props.onCancel,
         margin: "0 x-small 0 0"
-      }, this.text.cancel), /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      }, this.text.cancel), (0, _emotion.jsx)(_uiButtons.Button, {
         "data-automation": "sdk-print-font-size-print-preview-button",
         color: "primary",
         onClick: this.handleSubmit,
@@ -196,7 +188,9 @@ var PrintFontSizeModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, sty
   persistedPrintFontSize: _propTypes.default.string,
   onSubmit: _propTypes.default.func.isRequired,
   onCancel: _propTypes.default.func.isRequired,
-  onExited: _propTypes.default.func.isRequired
+  onExited: _propTypes.default.func.isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   isOpen: false,
   persistedPrintFontSize: 'medium'

package/lib/common/components/PrintFontSizeModal/styles.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    separator: {
+      width: '100%',
+      margin: "".concat(componentTheme.separatorMargin, " 0"),
+      padding: 0,
+      borderBottom: "solid ".concat(componentTheme.separatorBorderWidth),
+      borderColor: componentTheme.separatorColor
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/common/components/PrintFontSizeModal/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 colors = _ref.colors,
       borders = _ref.borders,
       spacing = _ref.spacing;
@@ -14,4 +14,7 @@ function generator(_ref) {
     separatorBorderWidth: borders.widthSmall,
     separatorMargin: spacing.medium
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/common/components/alerts/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,23 +27,17 @@ var _uiA11yContent = require("@instructure/ui-a11y-content");
 
 var _uiAlerts = require("@instructure/ui-alerts");
 
-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: 'cYPGH',
-  template: function template(theme) {
-    return "\n\n.cYPGH_ddjo{box-sizing:border-box;padding-left:".concat(theme.alertsPadding || 'inherit', ";padding-right:").concat(theme.alertsPadding || 'inherit', ";padding-top:").concat(theme.alertsTopPadding || 'inherit', ";pointer-events:none;position:fixed;width:100%;z-index:").concat(theme.alertsZIndex || 'inherit', "}\n\n.cYPGH_eVxh{pointer-events:auto}\n\n@media screen and (--phoneBreakPoint){.cYPGH_ddjo{padding:").concat(theme.alertsMobilePadding || 'inherit', "}}");
-  },
-  'alerts': 'cYPGH_ddjo',
-  'alertHolder': 'cYPGH_eVxh'
-};
-var Alerts = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var Alerts = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(Alerts, _Component);
 
   var _super = (0, _createSuper2.default)(Alerts);
@@ -69,10 +61,10 @@ var Alerts = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_
       }
 
       if (alert.variant === 'stickyerror') {
-        return /*#__PURE__*/_react.default.createElement("div", {
+        return (0, _emotion.jsx)("div", {
           key: alert.uuid,
-          className: styles.alertHolder
-        }, /*#__PURE__*/_react.default.createElement(_uiAlerts.Alert, {
+          css: _this.props.styles.alertHolder
+        }, (0, _emotion.jsx)(_uiAlerts.Alert, {
           variant: "error",
           onDismiss: closeAlert,
           renderCloseButtonLabel: (0, _formatMessage.default)('Close'),
@@ -80,10 +72,10 @@ var Alerts = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_
         }, alert.message));
       }
 
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _emotion.jsx)("div", {
         key: alert.uuid,
-        className: styles.alertHolder
-      }, /*#__PURE__*/_react.default.createElement(_uiAlerts.Alert, {
+        css: _this.props.styles.alertHolder
+      }, (0, _emotion.jsx)(_uiAlerts.Alert, {
         variant: alert.variant,
         onDismiss: closeAlert,
         renderCloseButtonLabel: (0, _formatMessage.default)('Close'),
@@ -97,7 +89,7 @@ var Alerts = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_
   (0, _createClass2.default)(Alerts, [{
     key: "renderScreenreaderAlert",
     value: function renderScreenreaderAlert(alert) {
-      return /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, {
+      return (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, {
         key: alert.uuid
       }, alert.message);
     }
@@ -114,16 +106,16 @@ var Alerts = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_
       });
 
       if (hasStickyErrors) {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.alerts,
+        return (0, _emotion.jsx)("div", {
+          css: this.props.styles.alerts,
           style: {
             zIndex: '99999'
           }
         }, this.renderAlerts());
       }
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.alerts
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.alerts
       }, this.renderAlerts());
     }
   }]);
@@ -131,7 +123,9 @@ var Alerts = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_
   return Alerts;
 }(_react.Component), _class2.propTypes = {
   removeAlert: _propTypes.default.func.isRequired,
-  alerts: _reactImmutableProptypes.default.list.isRequired
+  alerts: _reactImmutableProptypes.default.list.isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   sidebarOpen: false
 }, _temp)) || _class);

package/lib/common/components/alerts/styles.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var generateStyle = function generateStyle(componentTheme) {
+  var mq = "@media screen and (".concat(componentTheme.phoneBreakPoint, ")");
+  return {
+    alerts: (0, _defineProperty2.default)({
+      position: 'fixed',
+      pointerEvents: 'none',
+      width: '100%',
+      boxSizing: 'border-box',
+      zIndex: componentTheme.alertsZIndex,
+      paddingLeft: componentTheme.alertsPadding,
+      paddingRight: componentTheme.alertsPadding,
+      paddingTop: componentTheme.alertsTopPadding
+    }, mq, {
+      padding: componentTheme.alertsMobilePadding
+    }),
+    alertHolder: {
+      pointerEvents: 'auto'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/common/components/alerts/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 breakpoints = _ref.breakpoints,
       spacing = _ref.spacing;
   return {
@@ -15,4 +15,7 @@ function generator(_ref) {
     alertsZIndex: '7777',
     phoneBreakPoint: "max-width: ".concat(breakpoints.medium)
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "20.3.1-rc.0+5f43ffb52",
+  "version": "20.3.1-rc.2+4d8c8b568",
   "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.0.0",
-    "@instructure/quiz-common": "20.3.1-rc.0+5f43ffb52",
-    "@instructure/quiz-i18n": "20.3.1-rc.0+5f43ffb52",
-    "@instructure/quiz-interactions": "20.3.1-rc.0+5f43ffb52",
-    "@instructure/quiz-number-input": "20.3.1-rc.0+5f43ffb52",
-    "@instructure/quiz-rce": "20.3.1-rc.0+5f43ffb52",
+    "@instructure/quiz-common": "20.3.1-rc.2+4d8c8b568",
+    "@instructure/quiz-i18n": "20.3.1-rc.2+4d8c8b568",
+    "@instructure/quiz-interactions": "20.3.1-rc.2+4d8c8b568",
+    "@instructure/quiz-number-input": "20.3.1-rc.2+4d8c8b568",
+    "@instructure/quiz-rce": "20.3.1-rc.2+4d8c8b568",
     "@instructure/ui-a11y-content": "^8.51.0",
     "@instructure/ui-alerts": "^8.51.0",
     "@instructure/ui-avatar": "^8.51.0",
@@ -110,7 +110,7 @@
     "file-saver": "~2.0.5",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "20.3.1-rc.0+5f43ffb52",
+    "instructure-validations": "20.3.1-rc.2+4d8c8b568",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -162,7 +162,7 @@
     "intl": "^1.2.4",
     "jquery": "^2.2.3",
     "most-subject": "^5.3.0",
-    "quiz-presets": "20.3.1-rc.0+5f43ffb52",
+    "quiz-presets": "20.3.1-rc.2+4d8c8b568",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -178,5 +178,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5f43ffb52e4a7f64d97d8cbdb6f00291b115c83b"
+  "gitHead": "4d8c8b56898f815f160d01adb663ed7ff8bdaad7"
 }