@instructure/quiz-core 20.36.1-rc.38 → 20.36.1-rc.40

package/es/banks/components/CreateBankModal/presenter.js

@@ -2,9 +2,9 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-var _dec, _class, _CreateBankModal;
+var _CreateBankModal;
 /** @jsx jsx */
-import { Component } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Button, CloseButton } from '@instructure/ui-buttons';
 import { Checkbox } from '@instructure/ui-checkbox';
@@ -14,19 +14,14 @@ import { jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import Bank from "../../../common/records/Bank.js";
 import { toErrors } from "../../../common/util/instUIMessages.js";
-import { Modal, ModalHeader, ModalBody, ModalFooter, TextInput, XSMALL_SIDE_MARGIN, withStyleOverrides } from '@instructure/quiz-common';
-import generateStyle from "./styles.js";
-import generateComponentTheme from "./theme.js";
-export var CreateBankModal = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_CreateBankModal = /*#__PURE__*/function (_Component) {
+import { Modal, ModalHeader, ModalBody, ModalFooter, TextInput, XSMALL_SIDE_MARGIN } from '@instructure/quiz-common';
+export var CreateBankModal = /*#__PURE__*/function (_Component) {
   _inherits(CreateBankModal, _Component);
   var _super = _createSuper(CreateBankModal);
-  function CreateBankModal() {
+  function CreateBankModal(props) {
     var _this;
     _classCallCheck(this, CreateBankModal);
-    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));
+    _this = _super.call(this, props);
     _this.state = {
       shareWithCourse: false
     };
@@ -38,7 +33,8 @@ export var CreateBankModal = (_dec = withStyleOverrides(generateStyle, generateC
         _this.props.onCreateBank();
         _this.closeAction();
       } else {
-        _this.props.screenreaderNotification(t('Bank name cannot be blank.'));
+        var _this$bankNameInput$c;
+        (_this$bankNameInput$c = _this.bankNameInput.current) === null || _this$bankNameInput$c === void 0 ? void 0 : _this$bankNameInput$c.focus();
       }
     };
     _this.closeAction = function () {
@@ -68,6 +64,7 @@ export var CreateBankModal = (_dec = withStyleOverrides(generateStyle, generateC
         shareWithCourse: event.target.checked
       });
     };
+    _this.bankNameInput = /*#__PURE__*/React.createRef();
     return _this;
   }
   _createClass(CreateBankModal, [{
@@ -92,17 +89,14 @@ export var CreateBankModal = (_dec = withStyleOverrides(generateStyle, generateC
   }, {
     key: "renderContent",
     value: function renderContent() {
-      return jsx("div", {
-        css: this.props.styles.bankNameInput
-      }, jsx(TextInput, {
+      return jsx("div", null, jsx(TextInput, {
         messages: this.getErrors(),
         onChange: this.onNameChange,
-        renderLabel: jsx("div", {
-          css: this.props.styles.bankNameLabel
-        }, t('Bank Name')),
+        renderLabel: t('Bank Name'),
+        isRequired: true,
         type: "text",
-        placeholder: t('Enter a name...'),
-        "data-automation": "sdk-create-bank-name-textinput"
+        "data-automation": "sdk-create-bank-name-textinput",
+        ref: this.bankNameInput
       }), this.renderCheckbox());
     }
   }, {
@@ -134,7 +128,6 @@ export var CreateBankModal = (_dec = withStyleOverrides(generateStyle, generateC
         label: t('Item Bank'),
         "data-automation": "sdk-create-bank-modal"
       }, jsx(ModalHeader, null, jsx(Heading, {
-        level: "reset",
         as: "h2"
       }, t('New Item Bank')), jsx(CloseButton, {
         onClick: this.closeAction,
@@ -146,7 +139,11 @@ export var CreateBankModal = (_dec = withStyleOverrides(generateStyle, generateC
   }]);
   CreateBankModal.displayName = "CreateBankModal";
   return CreateBankModal;
-}(Component), _CreateBankModal.displayName = 'CreateBankModal', _CreateBankModal.componentId = "Quizzes".concat(_CreateBankModal.displayName), _CreateBankModal.propTypes = {
+}(Component);
+_CreateBankModal = CreateBankModal;
+CreateBankModal.displayName = 'CreateBankModal';
+CreateBankModal.componentId = "Quizzes".concat(_CreateBankModal.displayName);
+CreateBankModal.propTypes = {
   modalOpen: PropTypes.bool.isRequired,
   modalTrigger: PropTypes.instanceOf(Component),
   temporaryBank: PropTypes.instanceOf(Bank).isRequired,
@@ -169,11 +166,12 @@ export var CreateBankModal = (_dec = withStyleOverrides(generateStyle, generateC
     root_account_name: PropTypes.string
   }),
   styles: PropTypes.object
-}, _CreateBankModal.defaultProps = {
+};
+CreateBankModal.defaultProps = {
   displayError: false,
   modalTrigger: null,
   showShareBankOnCreate: false,
   itemBanksScope: {},
   onCreateBank: function onCreateBank() {}
-}, _CreateBankModal)) || _class);
+};
 export default CreateBankModal;

package/es/banks/components/EditBankModal/presenter.js

@@ -2,34 +2,32 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-var _dec, _class, _EditBankModal;
+var _EditBankModal;
 /** @jsx jsx */
-import { Component } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Button, CloseButton } from '@instructure/ui-buttons';
 import { Heading } from '@instructure/ui-heading';
 import { jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { toErrors } from "../../../common/util/instUIMessages.js";
-import { Modal, ModalHeader, ModalBody, ModalFooter, TextInput, XSMALL_SIDE_MARGIN, withStyleOverrides } from '@instructure/quiz-common';
+import { Modal, ModalHeader, ModalBody, ModalFooter, TextInput, XSMALL_SIDE_MARGIN } from '@instructure/quiz-common';
 import Bank from "../../../common/records/Bank.js";
-import generateStyle from "./styles.js";
-import generateComponentTheme from "./theme.js";
-export var EditBankModal = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_EditBankModal = /*#__PURE__*/function (_Component) {
+export var EditBankModal = /*#__PURE__*/function (_Component) {
   _inherits(EditBankModal, _Component);
   var _super = _createSuper(EditBankModal);
-  function EditBankModal() {
+  function EditBankModal(props) {
     var _this;
     _classCallCheck(this, EditBankModal);
-    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));
+    _this = _super.call(this, props);
     _this.continueAction = function () {
       _this.props.showError(_this.props.errorKey);
       if (_this.props.workingBank.isValid()) {
         _this.props.updateBank(_this.props.workingBank);
         _this.closeAction();
+      } else {
+        var _this$bankNameInput$c;
+        (_this$bankNameInput$c = _this.bankNameInput.current) === null || _this$bankNameInput$c === void 0 ? void 0 : _this$bankNameInput$c.focus();
       }
     };
     _this.closeAction = function () {
@@ -51,6 +49,7 @@ export var EditBankModal = (_dec = withStyleOverrides(generateStyle, generateCom
         return toErrors(_this.props.workingBank.errorsFor('title').toJS());
       }
     };
+    _this.bankNameInput = /*#__PURE__*/React.createRef();
     return _this;
   }
   _createClass(EditBankModal, [{
@@ -75,17 +74,16 @@ export var EditBankModal = (_dec = withStyleOverrides(generateStyle, generateCom
   }, {
     key: "renderContent",
     value: function renderContent() {
-      return jsx("div", {
-        css: this.props.styles.bankNameInput
-      }, jsx(TextInput, {
+      return jsx(TextInput, {
         value: this.props.workingBank.title,
         messages: this.getErrors(),
         onChange: this.onNameChange,
-        renderLabel: jsx("div", null, t('Bank Name')),
+        renderLabel: t('Bank Name'),
         type: "text",
-        placeholder: t('Enter a name...'),
-        "data-automation": "sdk-edit-bank-name-textinput"
-      }));
+        isRequired: true,
+        "data-automation": "sdk-edit-bank-name-textinput",
+        ref: this.bankNameInput
+      });
     }
   }, {
     key: "render",
@@ -97,7 +95,6 @@ export var EditBankModal = (_dec = withStyleOverrides(generateStyle, generateCom
         label: t('Item Bank'),
         "data-automation": "sdk-edit-bank-modal"
       }, jsx(ModalHeader, null, jsx(Heading, {
-        level: "reset",
         as: "h2"
       }, t('Edit Item Bank')), jsx(CloseButton, {
         onClick: this.closeAction,
@@ -109,7 +106,11 @@ export var EditBankModal = (_dec = withStyleOverrides(generateStyle, generateCom
   }]);
   EditBankModal.displayName = "EditBankModal";
   return EditBankModal;
-}(Component), _EditBankModal.displayName = 'EditBankModal', _EditBankModal.componentId = "Quizzes".concat(_EditBankModal.displayName), _EditBankModal.propTypes = {
+}(Component);
+_EditBankModal = EditBankModal;
+EditBankModal.displayName = 'EditBankModal';
+EditBankModal.componentId = "Quizzes".concat(_EditBankModal.displayName);
+EditBankModal.propTypes = {
   modalOpen: PropTypes.bool.isRequired,
   modalTrigger: PropTypes.instanceOf(Component),
   workingBank: PropTypes.instanceOf(Bank).isRequired,
@@ -122,8 +123,9 @@ export var EditBankModal = (_dec = withStyleOverrides(generateStyle, generateCom
   hideError: PropTypes.func.isRequired,
   closeModal: PropTypes.func.isRequired,
   styles: PropTypes.object
-}, _EditBankModal.defaultProps = {
+};
+EditBankModal.defaultProps = {
   displayError: false,
   modalTrigger: null
-}, _EditBankModal)) || _class);
+};
 export default EditBankModal;

package/es/banks/components/SharingModal/presenter.js

@@ -22,7 +22,6 @@ import { Grid } from '@instructure/ui-grid';
 import { Tabs } from '@instructure/ui-tabs';
 import { Text } from '@instructure/ui-text';
 import { jsx } from '@instructure/emotion';
-import elementsForSelectors from "../../../common/util/ElementsForSelectors.js";
 import CustomPropTypes from "../../../common/util/CustomPropTypes.js";
 import ShareList from "./ShareList/index.js";
 import AsyncSearch from "../AsyncSearch/index.js";
@@ -54,9 +53,6 @@ export var SharingModalPresenter = (_dec = withStyleOverrides(generateStyle, gen
     };
     _this.shareListRef = null;
     _this.shareButtonRef = null;
-    _this.applicationElement = function () {
-      return elementsForSelectors(_this.props.appContainer);
-    };
     // =============
     //   LIFECYCLE
     // =============

package/es/common/components/layout/navbar/SecondaryNavBarButton/index.js

@@ -2,17 +2,14 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-var _dec, _class, _SecondaryNavBarButton;
+var _SecondaryNavBarButton;
 /** @jsx jsx */
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { TopNavBar } from '@instructure/ui-top-nav-bar';
-import { InstUISettingsProvider, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import { omitProps } from '@instructure/ui-react-utils';
-import generateStyle from "./styles.js";
-import generateComponentTheme from "./theme.js";
-import { withStyleOverrides } from '@instructure/quiz-common';
-export var SecondaryNavBarButton = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_SecondaryNavBarButton = /*#__PURE__*/function (_Component) {
+export var SecondaryNavBarButton = /*#__PURE__*/function (_Component) {
   _inherits(SecondaryNavBarButton, _Component);
   var _super = _createSuper(SecondaryNavBarButton);
   function SecondaryNavBarButton() {
@@ -20,37 +17,21 @@ export var SecondaryNavBarButton = (_dec = withStyleOverrides(generateStyle, gen
     return _super.apply(this, arguments);
   }
   _createClass(SecondaryNavBarButton, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.props.makeStyles();
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      this.props.makeStyles();
-    }
-  }, {
     key: "render",
     value: function render() {
-      return jsx(InstUISettingsProvider, {
-        theme: {
-          componentOverrides: {
-            BaseButton: {
-              primaryColor: this.props.styles.textColor,
-              primaryBackground: this.props.styles.backgroundColor,
-              primaryHoverBackground: this.props.styles.backgroundHoverColor,
-              primaryBorderColor: this.props.styles.borderColor
-            }
-          }
-        }
-      }, jsx(TopNavBar.Item, omitProps(this.props, this.constructor.propTypes), this.props.children));
+      return jsx(TopNavBar.Item, Object.assign({
+        color: "secondary"
+      }, omitProps(this.props, this.constructor.propTypes)), this.props.children);
     }
   }]);
   SecondaryNavBarButton.displayName = "SecondaryNavBarButton";
   return SecondaryNavBarButton;
-}(Component), _SecondaryNavBarButton.displayName = 'TopNavBarItem', _SecondaryNavBarButton.componentId = "Quizzes".concat(_SecondaryNavBarButton.displayName), _SecondaryNavBarButton.propTypes = {
+}(Component);
+_SecondaryNavBarButton = SecondaryNavBarButton;
+SecondaryNavBarButton.displayName = 'TopNavBarItem';
+SecondaryNavBarButton.componentId = "Quizzes".concat(_SecondaryNavBarButton.displayName);
+SecondaryNavBarButton.propTypes = {
   children: PropTypes.string.isRequired,
-  styles: PropTypes.object,
-  makeStyles: PropTypes.func
-}, _SecondaryNavBarButton)) || _class);
+  styles: PropTypes.object
+};
 export default SecondaryNavBarButton;

package/es/common/components/layout/navbar/index.js

@@ -93,9 +93,6 @@ export var NavBar = (_dec = withStyleOverrides(generateStyle, generateComponentT
             desktopBottomBorderInverse: false
           } : {}),
           navLabel: t('Quizzes navigation bar'),
-          desktopConfig: {
-            hideActionsUserSeparator: true
-          },
           smallViewportConfig: {
             dropdownMenuToggleButtonLabel: t('Toggle Menu'),
             dropdownMenuLabel: t('Main Menu')

package/es/common/components/resources/item/ItemEdit/presenter.js

@@ -13,7 +13,6 @@ import componentForItem from "../../../../util/componentForItem.js";
 import { liveRegion, COMPONENT_EDIT, FormFieldGroup } from '@instructure/quiz-common';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { propsForInteractionEdit } from "../../../../util/interactionTypePropsHelper.js";
-import elementsForSelectors from "../../../../../common/util/ElementsForSelectors.js";
 import { toErrors } from "../../../../util/instUIMessages.js";
 export var ItemEdit = /*#__PURE__*/function (_Component) {
   _inherits(ItemEdit, _Component);
@@ -32,9 +31,6 @@ export var ItemEdit = /*#__PURE__*/function (_Component) {
       }
       return null;
     };
-    _this.applicationElement = function () {
-      return elementsForSelectors(_this.props.appContainer);
-    };
     _this.onModalOpen = function () {
       _this.props.occludeQuizEntries(true);
     };
@@ -97,7 +93,6 @@ export var ItemEdit = /*#__PURE__*/function (_Component) {
           component: /*#__PURE__*/React.createElement(OutcomeAlignments, Object.assign({
             artifactType: "quizEntry",
             artifactId: itemId,
-            applicationElement: this.applicationElement,
             alignmentSetId: outcomeAlignmentSetGuid,
             contextUuid: this.props.contextUuid
           }, launchContexts.length > 0 && {

package/es/common/components/resources/quiz/AddContent/Popover/presenter.js

@@ -9,7 +9,6 @@ import PropTypes from 'prop-types';
 import { Popover } from '@instructure/ui-popover';
 import { jsx } from '@instructure/emotion';
 import CustomPropTypes from "../../../../../util/CustomPropTypes.js";
-import elementsForSelectors from "../../../../../util/ElementsForSelectors.js";
 import { onPhone, onTablet } from "../../../../../util/windowChecks.js";
 import AddContentButton from "../Button/index.js";
 import AddContentBody from "../Body/index.js";
@@ -26,9 +25,6 @@ export var AddContentPopover = (_dec = withStyleOverrides(generateStyle, generat
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
-    _this.applicationElement = function () {
-      return elementsForSelectors(_this.props.appContainer);
-    };
     _this.showContent = function () {
       _this.props.switchOnEditing();
     };

package/es/common/components/resources/sessionItemResult/SessionItemResult/presenter.js

@@ -108,7 +108,7 @@ export var SessionItemResult = (_dec = withStyleOverrides(generateStyle, generat
         size: "small",
         margin: "small"
       }, jsx(Text, {
-        color: "warning"
+        color: "alert"
       }, t("Regrade score { possible, plural,\n              one   {{points, number} / # point}\n              other {{points, number} / # points}\n            }", {
         points: this.props.sessionItemResult.regradeInfo.get('newScore') || 0,
         possible: this.props.sessionItemResult.regradeInfo.get('newPointsPossible')

package/es/common/components/shared/PrintTrigger/presenter.js

@@ -8,7 +8,6 @@ import PropTypes from 'prop-types';
 import { Overlay, Mask } from '@instructure/ui-overlays';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { QuizzesSpinner as Spinner } from "../spinner/Spinner.js";
-import elementsForSelectors from "../../../util/ElementsForSelectors.js";
 import CustomPropTypes from "../../../util/CustomPropTypes.js";
 import { printWithCss, ensureImagesLoaded } from "../../../util/printUtils.js";
 import PrintFontSizeModal from "../../PrintFontSizeModal/index.js";
@@ -74,9 +73,6 @@ export var PrintTrigger = /*#__PURE__*/function (_Component) {
       });
       _this.props.openPrintFontSizeModal();
     };
-    _this.applicationElement = function () {
-      return elementsForSelectors(_this.props.appContainer);
-    };
     _this.onExited = function () {};
     _this.fontSize = '';
     return _this;
@@ -85,7 +81,6 @@ export var PrintTrigger = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Overlay, {
-        applicationElement: this.applicationElement,
         open: this.state.waitingForPrintingToBeReady,
         shouldContainFocus: true,
         transition: "fade",

package/es/reporting/components/resources/OutcomeAnalysis/presenter.js

@@ -7,21 +7,12 @@ import PropTypes from 'prop-types';
 import OutcomesPerStudentReport from '@instructure/outcomes-ui/es/containers/OutcomesPerStudentReport';
 import { liveRegion } from '@instructure/quiz-common';
 import CustomPropTypes from "../../../../common/util/CustomPropTypes.js";
-import elementsForSelectors from "../../../../common/util/ElementsForSelectors.js";
 export var OutcomeAnalysis = /*#__PURE__*/function (_Component) {
   _inherits(OutcomeAnalysis, _Component);
   var _super = _createSuper(OutcomeAnalysis);
   function OutcomeAnalysis() {
-    var _this;
     _classCallCheck(this, OutcomeAnalysis);
-    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));
-    _this.applicationElement = function () {
-      return elementsForSelectors(_this.props.appContainer);
-    };
-    return _this;
+    return _super.apply(this, arguments);
   }
   _createClass(OutcomeAnalysis, [{
     key: "render",
@@ -34,7 +25,6 @@ export var OutcomeAnalysis = /*#__PURE__*/function (_Component) {
         loadUsersOverride = _this$props.loadUsersOverride,
         showRollups = _this$props.showRollups;
       return /*#__PURE__*/React.createElement(OutcomesPerStudentReport, {
-        applicationElement: this.applicationElement,
         artifactType: "quizzes.quiz",
         artifactId: quizId,
         contextUuid: contextUuid,

package/lib/banks/components/CreateBankModal/presenter.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +10,7 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uiButtons = require("@instructure/ui-buttons");
 var _uiCheckbox = require("@instructure/ui-checkbox");
@@ -20,20 +21,15 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
 var _Bank = _interopRequireDefault(require("../../../common/records/Bank.js"));
 var _instUIMessages = require("../../../common/util/instUIMessages.js");
 var _quizCommon = require("@instructure/quiz-common");
-var _styles = _interopRequireDefault(require("./styles.js"));
-var _theme = _interopRequireDefault(require("./theme.js"));
-var _dec, _class, _CreateBankModal;
+var _CreateBankModal;
 /** @jsx jsx */
-var CreateBankModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _theme.default), _dec(_class = (_CreateBankModal = /*#__PURE__*/function (_Component) {
+var CreateBankModal = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CreateBankModal, _Component);
   var _super = (0, _createSuper2.default)(CreateBankModal);
-  function CreateBankModal() {
+  function CreateBankModal(props) {
     var _this;
     (0, _classCallCheck2.default)(this, CreateBankModal);
-    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));
+    _this = _super.call(this, props);
     _this.state = {
       shareWithCourse: false
     };
@@ -45,7 +41,8 @@ var CreateBankModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defaul
         _this.props.onCreateBank();
         _this.closeAction();
       } else {
-        _this.props.screenreaderNotification((0, _formatMessage.default)('Bank name cannot be blank.'));
+        var _this$bankNameInput$c;
+        (_this$bankNameInput$c = _this.bankNameInput.current) === null || _this$bankNameInput$c === void 0 ? void 0 : _this$bankNameInput$c.focus();
       }
     };
     _this.closeAction = function () {
@@ -75,6 +72,7 @@ var CreateBankModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defaul
         shareWithCourse: event.target.checked
       });
     };
+    _this.bankNameInput = /*#__PURE__*/_react.default.createRef();
     return _this;
   }
   (0, _createClass2.default)(CreateBankModal, [{
@@ -99,17 +97,14 @@ var CreateBankModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defaul
   }, {
     key: "renderContent",
     value: function renderContent() {
-      return (0, _emotion.jsx)("div", {
-        css: this.props.styles.bankNameInput
-      }, (0, _emotion.jsx)(_quizCommon.TextInput, {
+      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_quizCommon.TextInput, {
         messages: this.getErrors(),
         onChange: this.onNameChange,
-        renderLabel: (0, _emotion.jsx)("div", {
-          css: this.props.styles.bankNameLabel
-        }, (0, _formatMessage.default)('Bank Name')),
+        renderLabel: (0, _formatMessage.default)('Bank Name'),
+        isRequired: true,
         type: "text",
-        placeholder: (0, _formatMessage.default)('Enter a name...'),
-        "data-automation": "sdk-create-bank-name-textinput"
+        "data-automation": "sdk-create-bank-name-textinput",
+        ref: this.bankNameInput
       }), this.renderCheckbox());
     }
   }, {
@@ -141,7 +136,6 @@ var CreateBankModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defaul
         label: (0, _formatMessage.default)('Item Bank'),
         "data-automation": "sdk-create-bank-modal"
       }, (0, _emotion.jsx)(_quizCommon.ModalHeader, null, (0, _emotion.jsx)(_uiHeading.Heading, {
-        level: "reset",
         as: "h2"
       }, (0, _formatMessage.default)('New Item Bank')), (0, _emotion.jsx)(_uiButtons.CloseButton, {
         onClick: this.closeAction,
@@ -153,7 +147,12 @@ var CreateBankModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defaul
   }]);
   CreateBankModal.displayName = "CreateBankModal";
   return CreateBankModal;
-}(_react.Component), _CreateBankModal.displayName = 'CreateBankModal', _CreateBankModal.componentId = "Quizzes".concat(_CreateBankModal.displayName), _CreateBankModal.propTypes = {
+}(_react.Component);
+exports.CreateBankModal = CreateBankModal;
+_CreateBankModal = CreateBankModal;
+CreateBankModal.displayName = 'CreateBankModal';
+CreateBankModal.componentId = "Quizzes".concat(_CreateBankModal.displayName);
+CreateBankModal.propTypes = {
   modalOpen: _propTypes.default.bool.isRequired,
   modalTrigger: _propTypes.default.instanceOf(_react.Component),
   temporaryBank: _propTypes.default.instanceOf(_Bank.default).isRequired,
@@ -176,13 +175,13 @@ var CreateBankModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defaul
     root_account_name: _propTypes.default.string
   }),
   styles: _propTypes.default.object
-}, _CreateBankModal.defaultProps = {
+};
+CreateBankModal.defaultProps = {
   displayError: false,
   modalTrigger: null,
   showShareBankOnCreate: false,
   itemBanksScope: {},
   onCreateBank: function onCreateBank() {}
-}, _CreateBankModal)) || _class);
-exports.CreateBankModal = CreateBankModal;
+};
 var _default = CreateBankModal;
 exports.default = _default;

package/lib/banks/components/EditBankModal/presenter.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +10,7 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uiButtons = require("@instructure/ui-buttons");
 var _uiHeading = require("@instructure/ui-heading");
@@ -18,25 +19,23 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
 var _instUIMessages = require("../../../common/util/instUIMessages.js");
 var _quizCommon = require("@instructure/quiz-common");
 var _Bank = _interopRequireDefault(require("../../../common/records/Bank.js"));
-var _styles = _interopRequireDefault(require("./styles.js"));
-var _theme = _interopRequireDefault(require("./theme.js"));
-var _dec, _class, _EditBankModal;
+var _EditBankModal;
 /** @jsx jsx */
-var EditBankModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _theme.default), _dec(_class = (_EditBankModal = /*#__PURE__*/function (_Component) {
+var EditBankModal = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(EditBankModal, _Component);
   var _super = (0, _createSuper2.default)(EditBankModal);
-  function EditBankModal() {
+  function EditBankModal(props) {
     var _this;
     (0, _classCallCheck2.default)(this, EditBankModal);
-    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));
+    _this = _super.call(this, props);
     _this.continueAction = function () {
       _this.props.showError(_this.props.errorKey);
       if (_this.props.workingBank.isValid()) {
         _this.props.updateBank(_this.props.workingBank);
         _this.closeAction();
+      } else {
+        var _this$bankNameInput$c;
+        (_this$bankNameInput$c = _this.bankNameInput.current) === null || _this$bankNameInput$c === void 0 ? void 0 : _this$bankNameInput$c.focus();
       }
     };
     _this.closeAction = function () {
@@ -58,6 +57,7 @@ var EditBankModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default,
         return (0, _instUIMessages.toErrors)(_this.props.workingBank.errorsFor('title').toJS());
       }
     };
+    _this.bankNameInput = /*#__PURE__*/_react.default.createRef();
     return _this;
   }
   (0, _createClass2.default)(EditBankModal, [{
@@ -82,17 +82,16 @@ var EditBankModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default,
   }, {
     key: "renderContent",
     value: function renderContent() {
-      return (0, _emotion.jsx)("div", {
-        css: this.props.styles.bankNameInput
-      }, (0, _emotion.jsx)(_quizCommon.TextInput, {
+      return (0, _emotion.jsx)(_quizCommon.TextInput, {
         value: this.props.workingBank.title,
         messages: this.getErrors(),
         onChange: this.onNameChange,
-        renderLabel: (0, _emotion.jsx)("div", null, (0, _formatMessage.default)('Bank Name')),
+        renderLabel: (0, _formatMessage.default)('Bank Name'),
         type: "text",
-        placeholder: (0, _formatMessage.default)('Enter a name...'),
-        "data-automation": "sdk-edit-bank-name-textinput"
-      }));
+        isRequired: true,
+        "data-automation": "sdk-edit-bank-name-textinput",
+        ref: this.bankNameInput
+      });
     }
   }, {
     key: "render",
@@ -104,7 +103,6 @@ var EditBankModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default,
         label: (0, _formatMessage.default)('Item Bank'),
         "data-automation": "sdk-edit-bank-modal"
       }, (0, _emotion.jsx)(_quizCommon.ModalHeader, null, (0, _emotion.jsx)(_uiHeading.Heading, {
-        level: "reset",
         as: "h2"
       }, (0, _formatMessage.default)('Edit Item Bank')), (0, _emotion.jsx)(_uiButtons.CloseButton, {
         onClick: this.closeAction,
@@ -116,7 +114,12 @@ var EditBankModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default,
   }]);
   EditBankModal.displayName = "EditBankModal";
   return EditBankModal;
-}(_react.Component), _EditBankModal.displayName = 'EditBankModal', _EditBankModal.componentId = "Quizzes".concat(_EditBankModal.displayName), _EditBankModal.propTypes = {
+}(_react.Component);
+exports.EditBankModal = EditBankModal;
+_EditBankModal = EditBankModal;
+EditBankModal.displayName = 'EditBankModal';
+EditBankModal.componentId = "Quizzes".concat(_EditBankModal.displayName);
+EditBankModal.propTypes = {
   modalOpen: _propTypes.default.bool.isRequired,
   modalTrigger: _propTypes.default.instanceOf(_react.Component),
   workingBank: _propTypes.default.instanceOf(_Bank.default).isRequired,
@@ -129,10 +132,10 @@ var EditBankModal = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default,
   hideError: _propTypes.default.func.isRequired,
   closeModal: _propTypes.default.func.isRequired,
   styles: _propTypes.default.object
-}, _EditBankModal.defaultProps = {
+};
+EditBankModal.defaultProps = {
   displayError: false,
   modalTrigger: null
-}, _EditBankModal)) || _class);
-exports.EditBankModal = EditBankModal;
+};
 var _default = EditBankModal;
 exports.default = _default;

package/lib/banks/components/SharingModal/presenter.js

@@ -28,7 +28,6 @@ var _uiGrid = require("@instructure/ui-grid");
 var _uiTabs = require("@instructure/ui-tabs");
 var _uiText = require("@instructure/ui-text");
 var _emotion = require("@instructure/emotion");
-var _ElementsForSelectors = _interopRequireDefault(require("../../../common/util/ElementsForSelectors.js"));
 var _CustomPropTypes = _interopRequireDefault(require("../../../common/util/CustomPropTypes.js"));
 var _index = _interopRequireDefault(require("./ShareList/index.js"));
 var _index2 = _interopRequireDefault(require("../AsyncSearch/index.js"));
@@ -62,9 +61,6 @@ var SharingModalPresenter = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.
     };
     _this.shareListRef = null;
     _this.shareButtonRef = null;
-    _this.applicationElement = function () {
-      return (0, _ElementsForSelectors.default)(_this.props.appContainer);
-    };
     // =============
     //   LIFECYCLE
     // =============

package/lib/common/components/layout/navbar/SecondaryNavBarButton/index.js

@@ -14,12 +14,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uiTopNavBar = require("@instructure/ui-top-nav-bar");
 var _emotion = require("@instructure/emotion");
 var _uiReactUtils = require("@instructure/ui-react-utils");
-var _styles = _interopRequireDefault(require("./styles.js"));
-var _theme = _interopRequireDefault(require("./theme.js"));
-var _quizCommon = require("@instructure/quiz-common");
-var _dec, _class, _SecondaryNavBarButton;
+var _SecondaryNavBarButton;
 /** @jsx jsx */
-var SecondaryNavBarButton = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _theme.default), _dec(_class = (_SecondaryNavBarButton = /*#__PURE__*/function (_Component) {
+var SecondaryNavBarButton = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SecondaryNavBarButton, _Component);
   var _super = (0, _createSuper2.default)(SecondaryNavBarButton);
   function SecondaryNavBarButton() {
@@ -27,39 +24,23 @@ var SecondaryNavBarButton = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.
     return _super.apply(this, arguments);
   }
   (0, _createClass2.default)(SecondaryNavBarButton, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.props.makeStyles();
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      this.props.makeStyles();
-    }
-  }, {
     key: "render",
     value: function render() {
-      return (0, _emotion.jsx)(_emotion.InstUISettingsProvider, {
-        theme: {
-          componentOverrides: {
-            BaseButton: {
-              primaryColor: this.props.styles.textColor,
-              primaryBackground: this.props.styles.backgroundColor,
-              primaryHoverBackground: this.props.styles.backgroundHoverColor,
-              primaryBorderColor: this.props.styles.borderColor
-            }
-          }
-        }
-      }, (0, _emotion.jsx)(_uiTopNavBar.TopNavBar.Item, (0, _uiReactUtils.omitProps)(this.props, this.constructor.propTypes), this.props.children));
+      return (0, _emotion.jsx)(_uiTopNavBar.TopNavBar.Item, Object.assign({
+        color: "secondary"
+      }, (0, _uiReactUtils.omitProps)(this.props, this.constructor.propTypes)), this.props.children);
     }
   }]);
   SecondaryNavBarButton.displayName = "SecondaryNavBarButton";
   return SecondaryNavBarButton;
-}(_react.Component), _SecondaryNavBarButton.displayName = 'TopNavBarItem', _SecondaryNavBarButton.componentId = "Quizzes".concat(_SecondaryNavBarButton.displayName), _SecondaryNavBarButton.propTypes = {
-  children: _propTypes.default.string.isRequired,
-  styles: _propTypes.default.object,
-  makeStyles: _propTypes.default.func
-}, _SecondaryNavBarButton)) || _class);
+}(_react.Component);
 exports.SecondaryNavBarButton = SecondaryNavBarButton;
+_SecondaryNavBarButton = SecondaryNavBarButton;
+SecondaryNavBarButton.displayName = 'TopNavBarItem';
+SecondaryNavBarButton.componentId = "Quizzes".concat(_SecondaryNavBarButton.displayName);
+SecondaryNavBarButton.propTypes = {
+  children: _propTypes.default.string.isRequired,
+  styles: _propTypes.default.object
+};
 var _default = SecondaryNavBarButton;
 exports.default = _default;

package/lib/common/components/layout/navbar/index.js

@@ -100,9 +100,6 @@ var NavBar = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.default, _theme
             desktopBottomBorderInverse: false
           } : {}),
           navLabel: (0, _formatMessage.default)('Quizzes navigation bar'),
-          desktopConfig: {
-            hideActionsUserSeparator: true
-          },
           smallViewportConfig: {
             dropdownMenuToggleButtonLabel: (0, _formatMessage.default)('Toggle Menu'),
             dropdownMenuLabel: (0, _formatMessage.default)('Main Menu')

package/lib/common/components/resources/item/ItemEdit/presenter.js

@@ -21,7 +21,6 @@ var _componentForItem = _interopRequireDefault(require("../../../../util/compone
 var _quizCommon = require("@instructure/quiz-common");
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 var _interactionTypePropsHelper = require("../../../../util/interactionTypePropsHelper.js");
-var _ElementsForSelectors = _interopRequireDefault(require("../../../../../common/util/ElementsForSelectors.js"));
 var _instUIMessages = require("../../../../util/instUIMessages.js");
 var ItemEdit = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ItemEdit, _Component);
@@ -40,9 +39,6 @@ var ItemEdit = /*#__PURE__*/function (_Component) {
       }
       return null;
     };
-    _this.applicationElement = function () {
-      return (0, _ElementsForSelectors.default)(_this.props.appContainer);
-    };
     _this.onModalOpen = function () {
       _this.props.occludeQuizEntries(true);
     };
@@ -105,7 +101,6 @@ var ItemEdit = /*#__PURE__*/function (_Component) {
           component: /*#__PURE__*/_react.default.createElement(_OutcomeAlignments.default, Object.assign({
             artifactType: "quizEntry",
             artifactId: itemId,
-            applicationElement: this.applicationElement,
             alignmentSetId: outcomeAlignmentSetGuid,
             contextUuid: this.props.contextUuid
           }, launchContexts.length > 0 && {

package/lib/common/components/resources/quiz/AddContent/Popover/presenter.js

@@ -14,7 +14,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uiPopover = require("@instructure/ui-popover");
 var _emotion = require("@instructure/emotion");
 var _CustomPropTypes = _interopRequireDefault(require("../../../../../util/CustomPropTypes.js"));
-var _ElementsForSelectors = _interopRequireDefault(require("../../../../../util/ElementsForSelectors.js"));
 var _windowChecks = require("../../../../../util/windowChecks.js");
 var _index = _interopRequireDefault(require("../Button/index.js"));
 var _index2 = _interopRequireDefault(require("../Body/index.js"));
@@ -33,9 +32,6 @@ var AddContentPopover = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defa
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
-    _this.applicationElement = function () {
-      return (0, _ElementsForSelectors.default)(_this.props.appContainer);
-    };
     _this.showContent = function () {
       _this.props.switchOnEditing();
     };

package/lib/common/components/resources/sessionItemResult/SessionItemResult/presenter.js

@@ -115,7 +115,7 @@ var SessionItemResult = (_dec = (0, _quizCommon.withStyleOverrides)(_styles.defa
         size: "small",
         margin: "small"
       }, (0, _emotion.jsx)(_uiText.Text, {
-        color: "warning"
+        color: "alert"
       }, (0, _formatMessage.default)("Regrade score { possible, plural,\n              one   {{points, number} / # point}\n              other {{points, number} / # points}\n            }", {
         points: this.props.sessionItemResult.regradeInfo.get('newScore') || 0,
         possible: this.props.sessionItemResult.regradeInfo.get('newPointsPossible')

package/lib/common/components/shared/PrintTrigger/presenter.js

@@ -16,7 +16,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _uiOverlays = require("@instructure/ui-overlays");
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 var _Spinner = require("../spinner/Spinner.js");
-var _ElementsForSelectors = _interopRequireDefault(require("../../../util/ElementsForSelectors.js"));
 var _CustomPropTypes = _interopRequireDefault(require("../../../util/CustomPropTypes.js"));
 var _printUtils = require("../../../util/printUtils.js");
 var _index = _interopRequireDefault(require("../../PrintFontSizeModal/index.js"));
@@ -82,9 +81,6 @@ var PrintTrigger = /*#__PURE__*/function (_Component) {
       });
       _this.props.openPrintFontSizeModal();
     };
-    _this.applicationElement = function () {
-      return (0, _ElementsForSelectors.default)(_this.props.appContainer);
-    };
     _this.onExited = function () {};
     _this.fontSize = '';
     return _this;
@@ -93,7 +89,6 @@ var PrintTrigger = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiOverlays.Overlay, {
-        applicationElement: this.applicationElement,
         open: this.state.waitingForPrintingToBeReady,
         shouldContainFocus: true,
         transition: "fade",

package/lib/reporting/components/resources/OutcomeAnalysis/presenter.js

@@ -15,21 +15,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _OutcomesPerStudentReport = _interopRequireDefault(require("@instructure/outcomes-ui/es/containers/OutcomesPerStudentReport"));
 var _quizCommon = require("@instructure/quiz-common");
 var _CustomPropTypes = _interopRequireDefault(require("../../../../common/util/CustomPropTypes.js"));
-var _ElementsForSelectors = _interopRequireDefault(require("../../../../common/util/ElementsForSelectors.js"));
 var OutcomeAnalysis = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(OutcomeAnalysis, _Component);
   var _super = (0, _createSuper2.default)(OutcomeAnalysis);
   function OutcomeAnalysis() {
-    var _this;
     (0, _classCallCheck2.default)(this, OutcomeAnalysis);
-    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));
-    _this.applicationElement = function () {
-      return (0, _ElementsForSelectors.default)(_this.props.appContainer);
-    };
-    return _this;
+    return _super.apply(this, arguments);
   }
   (0, _createClass2.default)(OutcomeAnalysis, [{
     key: "render",
@@ -42,7 +33,6 @@ var OutcomeAnalysis = /*#__PURE__*/function (_Component) {
         loadUsersOverride = _this$props.loadUsersOverride,
         showRollups = _this$props.showRollups;
       return /*#__PURE__*/_react.default.createElement(_OutcomesPerStudentReport.default, {
-        applicationElement: this.applicationElement,
         artifactType: "quizzes.quiz",
         artifactId: quizId,
         contextUuid: contextUuid,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "20.36.1-rc.38+0c307083e",
+  "version": "20.36.1-rc.40+704bbd129",
   "license": "MIT",
   "description": "The Quiz React SDK by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
@@ -43,59 +43,58 @@
     "lib"
   ],
   "dependencies": {
-    "@instructure/emotion": "^8.56.3",
+    "@instructure/emotion": "^9.11.1",
     "@instructure/grading-utils": "^1.0.0",
     "@instructure/outcomes-ui": "^3.2.2",
-    "@instructure/quiz-common": "^20.36.1-rc.38+0c307083e",
-    "@instructure/quiz-i18n": "^20.36.1-rc.38+0c307083e",
-    "@instructure/quiz-interactions": "^20.36.1-rc.38+0c307083e",
-    "@instructure/quiz-number-input": "^20.36.1-rc.38+0c307083e",
-    "@instructure/quiz-rce": "^20.36.1-rc.38+0c307083e",
-    "@instructure/ui-a11y-content": "^8.56.3",
-    "@instructure/ui-alerts": "^8.56.3",
-    "@instructure/ui-avatar": "^8.56.3",
-    "@instructure/ui-billboard": "^8.56.3",
-    "@instructure/ui-breadcrumb": "^8.56.3",
-    "@instructure/ui-buttons": "^8.56.3",
-    "@instructure/ui-checkbox": "^8.56.3",
-    "@instructure/ui-color-utils": "^8.56.3",
-    "@instructure/ui-dialog": "^8.56.3",
-    "@instructure/ui-drilldown": "^8.56.3",
-    "@instructure/ui-focusable": "^8.56.3",
-    "@instructure/ui-grid": "^8.56.3",
-    "@instructure/ui-heading": "^8.56.3",
-    "@instructure/ui-i18n": "^7.22.1",
-    "@instructure/ui-icons": "^8.56.3",
-    "@instructure/ui-img": "^8.56.3",
-    "@instructure/ui-link": "^8.56.3",
-    "@instructure/ui-list": "^8.56.3",
-    "@instructure/ui-menu": "^8.56.3",
-    "@instructure/ui-metric": "^8.56.3",
-    "@instructure/ui-modal": "^8.56.3",
-    "@instructure/ui-motion": "^8.56.3",
-    "@instructure/ui-number-input": "^8.56.3",
-    "@instructure/ui-overlays": "^8.56.3",
-    "@instructure/ui-pagination": "^8.56.3",
-    "@instructure/ui-popover": "^8.56.3",
-    "@instructure/ui-portal": "^8.56.3",
-    "@instructure/ui-progress": "^8.56.3",
-    "@instructure/ui-prop-types": "^8.56.3",
-    "@instructure/ui-radio-input": "^8.56.3",
-    "@instructure/ui-react-utils": "^8.56.3",
-    "@instructure/ui-select": "^8.56.3",
-    "@instructure/ui-spinner": "^8.56.3",
-    "@instructure/ui-table": "^8.56.3",
-    "@instructure/ui-tabs": "^8.56.3",
-    "@instructure/ui-tag": "^8.56.3",
-    "@instructure/ui-text": "^8.56.3",
-    "@instructure/ui-themes": "^8.56.3",
-    "@instructure/ui-toggle-details": "^8.56.3",
-    "@instructure/ui-tooltip": "^8.56.3",
-    "@instructure/ui-top-nav-bar": "^8.55.0",
-    "@instructure/ui-tray": "8.55.1",
-    "@instructure/ui-truncate-text": "^8.56.3",
-    "@instructure/ui-utils": "^8.56.3",
-    "@instructure/ui-view": "^8.56.3",
+    "@instructure/quiz-common": "^20.36.1-rc.40+704bbd129",
+    "@instructure/quiz-i18n": "^20.36.1-rc.40+704bbd129",
+    "@instructure/quiz-interactions": "^20.36.1-rc.40+704bbd129",
+    "@instructure/quiz-number-input": "^20.36.1-rc.40+704bbd129",
+    "@instructure/quiz-rce": "^20.36.1-rc.40+704bbd129",
+    "@instructure/ui-a11y-content": "^9.11.1",
+    "@instructure/ui-alerts": "^9.11.1",
+    "@instructure/ui-avatar": "^9.11.1",
+    "@instructure/ui-billboard": "^9.11.1",
+    "@instructure/ui-breadcrumb": "^9.11.1",
+    "@instructure/ui-buttons": "^9.11.1",
+    "@instructure/ui-checkbox": "^9.11.1",
+    "@instructure/ui-color-utils": "^9.11.1",
+    "@instructure/ui-dialog": "^9.11.1",
+    "@instructure/ui-drilldown": "^9.11.1",
+    "@instructure/ui-focusable": "^9.11.1",
+    "@instructure/ui-grid": "^9.11.1",
+    "@instructure/ui-heading": "^9.11.1",
+    "@instructure/ui-i18n": "^9.11.1",
+    "@instructure/ui-icons": "^9.11.1",
+    "@instructure/ui-img": "^9.11.1",
+    "@instructure/ui-link": "^9.11.1",
+    "@instructure/ui-list": "^9.11.1",
+    "@instructure/ui-menu": "^9.11.1",
+    "@instructure/ui-metric": "^9.11.1",
+    "@instructure/ui-modal": "^9.11.1",
+    "@instructure/ui-motion": "^9.11.1",
+    "@instructure/ui-number-input": "^9.11.1",
+    "@instructure/ui-overlays": "^9.11.1",
+    "@instructure/ui-pagination": "^9.11.1",
+    "@instructure/ui-popover": "^9.11.1",
+    "@instructure/ui-portal": "^9.11.1",
+    "@instructure/ui-progress": "^9.11.1",
+    "@instructure/ui-prop-types": "^9.11.1",
+    "@instructure/ui-radio-input": "^9.11.1",
+    "@instructure/ui-react-utils": "^9.11.1",
+    "@instructure/ui-select": "^9.11.1",
+    "@instructure/ui-spinner": "^9.11.1",
+    "@instructure/ui-table": "^9.11.1",
+    "@instructure/ui-tabs": "^9.11.1",
+    "@instructure/ui-tag": "^9.11.1",
+    "@instructure/ui-text": "^9.11.1",
+    "@instructure/ui-themes": "^9.11.1",
+    "@instructure/ui-toggle-details": "^9.11.1",
+    "@instructure/ui-tooltip": "^9.11.1",
+    "@instructure/ui-top-nav-bar": "^9.11.1",
+    "@instructure/ui-tray": "9.11.1",
+    "@instructure/ui-truncate-text": "^9.11.1",
+    "@instructure/ui-view": "^9.11.1",
     "aws-sdk": "^2.3.2",
     "aws4fetch": "^1.0.20",
     "classnames": "^2.2.5",
@@ -110,7 +109,7 @@
     "file-saver": "~2.0.5",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "^20.36.1-rc.38+0c307083e",
+    "instructure-validations": "^20.36.1-rc.40+704bbd129",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -142,7 +141,7 @@
   },
   "devDependencies": {
     "@instructure/quiz-scripts": "^20.35.0",
-    "@instructure/ui-axe-check": "^8.56.3",
+    "@instructure/ui-axe-check": "^9.11.1",
     "@instructure/ui-babel-preset": "^7.22.1",
     "@instructure/ui-test-utils": "^7.22.1",
     "@testing-library/react": "^12.1.5",
@@ -160,7 +159,7 @@
     "jquery": "^2.2.3",
     "karma-junit-reporter": "^2.0.1",
     "most-subject": "^5.3.0",
-    "quiz-presets": "^20.36.1-rc.38+0c307083e",
+    "quiz-presets": "^20.36.1-rc.40+704bbd129",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -176,5 +175,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0c307083e6ea8298419ad3edcb20896cef575db8"
+  "gitHead": "704bbd129829010a57ff45776d95682f1baef26d"
 }

package/es/banks/components/CreateBankModal/styles.js

@@ -1,15 +0,0 @@
-var generateStyle = function generateStyle(componentTheme) {
-  return {
-    bankNameInput: {
-      flex: '1 1 auto',
-      fontSize: componentTheme.bankNameInputFontSize,
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      padding: componentTheme.bankNamePadding
-    },
-    bankNameLabel: {
-      padding: componentTheme.bankNameLabelPadding
-    }
-  };
-};
-export default generateStyle;

package/es/banks/components/CreateBankModal/theme.js

@@ -1,10 +0,0 @@
-var generateComponentTheme = function generateComponentTheme(_ref) {
-  var typography = _ref.typography,
-    spacing = _ref.spacing;
-  return {
-    bankNameInputFontSize: typography.fontSizeMedium,
-    bankNamePadding: spacing.xSmall,
-    bankNameLabelPadding: spacing.xSmall
-  };
-};
-export default generateComponentTheme;

package/es/banks/components/EditBankModal/styles.js

@@ -1,12 +0,0 @@
-var generateStyle = function generateStyle(componentTheme) {
-  return {
-    bankNameInput: {
-      flex: '1 1 auto',
-      fontSize: componentTheme.bankNameInputFontSize,
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      padding: "0 ".concat(componentTheme.bankNameInputFontSize)
-    }
-  };
-};
-export default generateStyle;

package/es/banks/components/EditBankModal/theme.js

@@ -1,9 +0,0 @@
-var generateComponentTheme = function generateComponentTheme(_ref) {
-  var typography = _ref.typography,
-    spacing = _ref.spacing;
-  return {
-    bankNameInputFontSize: typography.fontSizeMedium,
-    bankNameInputPadding: spacing.xSmall
-  };
-};
-export default generateComponentTheme;

package/es/common/components/layout/navbar/SecondaryNavBarButton/styles.js

@@ -1,9 +0,0 @@
-var generateStyle = function generateStyle(componentTheme) {
-  return {
-    textColor: componentTheme.textColor,
-    backgroundColor: componentTheme.backgroundColor,
-    backgroundHoverColor: componentTheme.backgroundHoverColor,
-    borderColor: componentTheme.borderColor
-  };
-};
-export default generateStyle;

package/es/common/components/layout/navbar/SecondaryNavBarButton/theme.js

@@ -1,10 +0,0 @@
-var generateComponentTheme = function generateComponentTheme(_ref) {
-  var colors = _ref.colors;
-  return {
-    textColor: '#000',
-    backgroundColor: colors.porcelain,
-    backgroundHoverColor: '#d8d8d8',
-    borderColor: '#d8d8d8'
-  };
-};
-export default generateComponentTheme;

package/lib/banks/components/CreateBankModal/styles.js

@@ -1,22 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var generateStyle = function generateStyle(componentTheme) {
-  return {
-    bankNameInput: {
-      flex: '1 1 auto',
-      fontSize: componentTheme.bankNameInputFontSize,
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      padding: componentTheme.bankNamePadding
-    },
-    bankNameLabel: {
-      padding: componentTheme.bankNameLabelPadding
-    }
-  };
-};
-var _default = generateStyle;
-exports.default = _default;

package/lib/banks/components/CreateBankModal/theme.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var generateComponentTheme = function generateComponentTheme(_ref) {
-  var typography = _ref.typography,
-    spacing = _ref.spacing;
-  return {
-    bankNameInputFontSize: typography.fontSizeMedium,
-    bankNamePadding: spacing.xSmall,
-    bankNameLabelPadding: spacing.xSmall
-  };
-};
-var _default = generateComponentTheme;
-exports.default = _default;

package/lib/banks/components/EditBankModal/styles.js

@@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var generateStyle = function generateStyle(componentTheme) {
-  return {
-    bankNameInput: {
-      flex: '1 1 auto',
-      fontSize: componentTheme.bankNameInputFontSize,
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      padding: "0 ".concat(componentTheme.bankNameInputFontSize)
-    }
-  };
-};
-var _default = generateStyle;
-exports.default = _default;

package/lib/banks/components/EditBankModal/theme.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var generateComponentTheme = function generateComponentTheme(_ref) {
-  var typography = _ref.typography,
-    spacing = _ref.spacing;
-  return {
-    bankNameInputFontSize: typography.fontSizeMedium,
-    bankNameInputPadding: spacing.xSmall
-  };
-};
-var _default = generateComponentTheme;
-exports.default = _default;

package/lib/common/components/layout/navbar/SecondaryNavBarButton/styles.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var generateStyle = function generateStyle(componentTheme) {
-  return {
-    textColor: componentTheme.textColor,
-    backgroundColor: componentTheme.backgroundColor,
-    backgroundHoverColor: componentTheme.backgroundHoverColor,
-    borderColor: componentTheme.borderColor
-  };
-};
-var _default = generateStyle;
-exports.default = _default;

package/lib/common/components/layout/navbar/SecondaryNavBarButton/theme.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var generateComponentTheme = function generateComponentTheme(_ref) {
-  var colors = _ref.colors;
-  return {
-    textColor: '#000',
-    backgroundColor: colors.porcelain,
-    backgroundHoverColor: '#d8d8d8',
-    borderColor: '#d8d8d8'
-  };
-};
-var _default = generateComponentTheme;
-exports.default = _default;