@instructure/quiz-core 20.34.0 → 20.34.1-snapshot.10

package/es/common/components/layout/sidebar/Sidebar/index.js

@@ -16,10 +16,10 @@ import { IconButton } from '@instructure/ui-buttons';
 import { Link } from '@instructure/ui-link';
 import { Text } from '@instructure/ui-text';
 import { View } from '@instructure/ui-view';
-import { withStyle, jsx, Global } from '@instructure/emotion';
+import { jsx, Global } from '@instructure/emotion';
 import { Heading } from '@instructure/ui-heading';
 import t from '@instructure/quiz-i18n/es/format-message';
-import { INSTRUCTIONS_SCROLL_KEY, RESULTS_SCROLL_KEY, SIDEBAR_NAV_ID, TITLE_SCROLL_KEY, END_EDITING_TRIGGER_CLASSNAME } from '@instructure/quiz-common';
+import { INSTRUCTIONS_SCROLL_KEY, RESULTS_SCROLL_KEY, SIDEBAR_NAV_ID, TITLE_SCROLL_KEY, END_EDITING_TRIGGER_CLASSNAME, withStyleOverrides } from '@instructure/quiz-common';
 import { onPhone } from "../../../../util/windowChecks.js";
 import CustomPropTypes from "../../../../util/CustomPropTypes.js";
 import noop from "../../../../util/noop.js";
@@ -36,7 +36,7 @@ var _ref3 = jsx(IconQuizInstructionsLine, {
   color: "primary"
 });
 var _ref4 = jsx(IconPinSolid, null);
-export var Sidebar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Sidebar = /*#__PURE__*/function (_Component) {
+export var Sidebar = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_Sidebar = /*#__PURE__*/function (_Component) {
   _inherits(Sidebar, _Component);
   var _super = _createSuper(Sidebar);
   function Sidebar() {
@@ -290,7 +290,8 @@ export var Sidebar = (_dec = withStyle(generateStyle, generateComponentTheme), _
         // take the click and scroll to itself when the nav is clicked by SR
         ,
         onClick: noop,
-        id: SIDEBAR_NAV_ID
+        id: SIDEBAR_NAV_ID,
+        "aria-label": t('Question Navigator')
       }, this.renderSidebarHeader(), this.renderTotalPointsPossible(), this.renderPinned(), this.renderTitle(), this.renderInstructions(), this.renderResults(), jsx("div", {
         css: this.props.styles.sidebarContent
       }, this.props.children)))));
@@ -298,7 +299,7 @@ export var Sidebar = (_dec = withStyle(generateStyle, generateComponentTheme), _
   }]);
   Sidebar.displayName = "Sidebar";
   return Sidebar;
-}(Component), _Sidebar.propTypes = {
+}(Component), _Sidebar.displayName = 'Sidebar', _Sidebar.componentId = "Quizzes".concat(_Sidebar.displayName), _Sidebar.propTypes = {
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element), PropTypes.node]).isRequired,
   grading: PropTypes.bool,
   taking: PropTypes.bool,

package/es/common/components/layout/sidebar/SidebarItem/presenter.js

@@ -10,14 +10,14 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { AccessibleContent } from '@instructure/ui-a11y-content';
 import { Link } from '@instructure/ui-link';
 import { Flex } from '@instructure/ui-flex';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import PositionSummary from "../PositionSummary/index.js";
 import t from '@instructure/quiz-i18n/es/format-message';
 import { RichContentRenderer } from '@instructure/quiz-rce';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-import { END_EDITING_TRIGGER_CLASSNAME } from '@instructure/quiz-common';
-export var SidebarItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_SidebarItem = /*#__PURE__*/function (_Component) {
+import { END_EDITING_TRIGGER_CLASSNAME, withStyleOverrides } from '@instructure/quiz-common';
+export var SidebarItem = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_SidebarItem = /*#__PURE__*/function (_Component) {
   _inherits(SidebarItem, _Component);
   var _super = _createSuper(SidebarItem);
   function SidebarItem() {
@@ -160,7 +160,7 @@ export var SidebarItem = (_dec = withStyle(generateStyle, generateComponentTheme
   }]);
   SidebarItem.displayName = "SidebarItem";
   return SidebarItem;
-}(Component), _SidebarItem.propTypes = {
+}(Component), _SidebarItem.displayName = 'SidebarItem', _SidebarItem.componentId = "Quizzes".concat(_SidebarItem.displayName), _SidebarItem.propTypes = {
   // Passed in by Sidebar
   children: PropTypes.element,
   displayPosition: PropTypes.string.isRequired,

package/es/common/components/layout/sidebar/Stimulus/Collection/presenter.js

@@ -10,13 +10,14 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { IconArrowOpenDownLine, IconArrowOpenUpLine } from '@instructure/ui-icons';
 import { Transition } from '@instructure/ui-motion';
 import { IconButton } from '@instructure/ui-buttons';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import PositionSummary from "../../PositionSummary/index.js";
 import { DISPLAY_AS_SUMMARY_LIMIT } from "../presenter.js";
 import t from '@instructure/quiz-i18n/es/format-message';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-export var Collection = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Collection = /*#__PURE__*/function (_Component) {
+import { withStyleOverrides } from '@instructure/quiz-common';
+export var Collection = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_Collection = /*#__PURE__*/function (_Component) {
   _inherits(Collection, _Component);
   var _super = _createSuper(Collection);
   function Collection() {
@@ -126,7 +127,7 @@ export var Collection = (_dec = withStyle(generateStyle, generateComponentTheme)
   }]);
   Collection.displayName = "Collection";
   return Collection;
-}(Component), _Collection.propTypes = {
+}(Component), _Collection.displayName = 'Collection', _Collection.componentId = "Quizzes".concat(_Collection.displayName), _Collection.propTypes = {
   // Passed in by Sidebar
   firstPosition: PropTypes.number.isRequired,
   isOver: PropTypes.bool.isRequired,

package/es/common/components/layout/sidebar/Stimulus/Summary/presenter.js

@@ -7,12 +7,13 @@ var _dec, _class, _Summary;
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Text } from '@instructure/ui-text';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import { DISPLAY_AS_SUMMARY_LIMIT } from "../presenter.js";
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
 import t from '@instructure/quiz-i18n/es/format-message';
-export var Summary = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Summary = /*#__PURE__*/function (_Component) {
+import { withStyleOverrides } from '@instructure/quiz-common';
+export var Summary = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_Summary = /*#__PURE__*/function (_Component) {
   _inherits(Summary, _Component);
   var _super = _createSuper(Summary);
   function Summary() {
@@ -115,7 +116,7 @@ export var Summary = (_dec = withStyle(generateStyle, generateComponentTheme), _
   }]);
   Summary.displayName = "Summary";
   return Summary;
-}(Component), _Summary.propTypes = {
+}(Component), _Summary.displayName = 'Summary', _Summary.componentId = "Quizzes".concat(_Summary.displayName), _Summary.propTypes = {
   // Passed in by parent
   startPosition: PropTypes.number.isRequired,
   /* This is used for when the stimulus is being dragged in build */

package/es/common/components/layout/sidebar/Stimulus/Title/index.js

@@ -9,10 +9,11 @@ import PropTypes from 'prop-types';
 import { AccessibleContent } from '@instructure/ui-a11y-content';
 import { Tooltip } from '@instructure/ui-tooltip';
 import { Text } from '@instructure/ui-text';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import generateStyle from "./styles.js";
+import { withStyleOverrides } from '@instructure/quiz-common';
 var DISPLAY_TOOLTIP_LIMIT = 80;
-export var Title = (_dec = withStyle(generateStyle, null), _dec(_class = (_Title = /*#__PURE__*/function (_Component) {
+export var Title = (_dec = withStyleOverrides(generateStyle, null), _dec(_class = (_Title = /*#__PURE__*/function (_Component) {
   _inherits(Title, _Component);
   var _super = _createSuper(Title);
   function Title() {
@@ -47,7 +48,7 @@ export var Title = (_dec = withStyle(generateStyle, null), _dec(_class = (_Title
   }]);
   Title.displayName = "Title";
   return Title;
-}(Component), _Title.propTypes = {
+}(Component), _Title.displayName = 'Title', _Title.componentId = "Quizzes".concat(_Title.displayName), _Title.propTypes = {
   title: PropTypes.string.isRequired,
   styles: PropTypes.object
 }, _Title)) || _class);

package/es/common/components/layout/sidebar/Stimulus/presenter.js

@@ -8,7 +8,7 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { IconTextLeftLine } from '@instructure/ui-icons';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import { Link } from '@instructure/ui-link';
 import { Flex } from '@instructure/ui-flex';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
@@ -18,12 +18,12 @@ import Summary from "./Summary/index.js";
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
 import t from '@instructure/quiz-i18n/es/format-message';
-import { END_EDITING_TRIGGER_CLASSNAME } from '@instructure/quiz-common';
+import { END_EDITING_TRIGGER_CLASSNAME, withStyleOverrides } from '@instructure/quiz-common';
 export var DISPLAY_AS_SUMMARY_LIMIT = 5;
 var _ref = jsx(IconTextLeftLine, {
   color: "primary"
 });
-export var SidebarStimulus = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_SidebarStimulus = /*#__PURE__*/function (_Component) {
+export var SidebarStimulus = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_SidebarStimulus = /*#__PURE__*/function (_Component) {
   _inherits(SidebarStimulus, _Component);
   var _super = _createSuper(SidebarStimulus);
   function SidebarStimulus() {
@@ -142,7 +142,7 @@ export var SidebarStimulus = (_dec = withStyle(generateStyle, generateComponentT
   }]);
   SidebarStimulus.displayName = "SidebarStimulus";
   return SidebarStimulus;
-}(Component), _SidebarStimulus.propTypes = {
+}(Component), _SidebarStimulus.displayName = 'SidebarStimulus', _SidebarStimulus.componentId = "Quizzes".concat(_SidebarStimulus.displayName), _SidebarStimulus.propTypes = {
   childEntries: ImmutablePropTypes.listOf(ImmutablePropTypes.record).isRequired,
   // Passed in by Sidebar
   children: PropTypes.element,

package/es/common/components/resources/BankSelection/presenter.js

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
@@ -5,16 +6,10 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { List } from 'immutable';
-import { Select } from '@instructure/ui-select';
-import { omitProps } from '@instructure/ui-react-utils';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { toErrors } from "../../../util/instUIMessages.js";
-import { SELECT_BANKS_OPTIONS, SELECT_EMPTY_OPTION, SELECT_EMPTY_OPTION_TEXT } from '@instructure/quiz-common';
-var _ref4 = /*#__PURE__*/React.createElement(Select.Option, {
-  id: SELECT_EMPTY_OPTION,
-  key: SELECT_EMPTY_OPTION
-}, SELECT_EMPTY_OPTION_TEXT);
+import { simpleFetchBanks } from "../../../../banks/api/banks.js";
+import { GenericAsyncSearch } from "../../shared/GenericAsyncSearch/GenericAsyncSearch.js";
 export var BankSelection = /*#__PURE__*/function (_Component) {
   _inherits(BankSelection, _Component);
   var _super = _createSuper(BankSelection);
@@ -25,112 +20,31 @@ export var BankSelection = /*#__PURE__*/function (_Component) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
-    _this.state = {
-      inputValue: _this.props.selectedBank ? _this.props.selectedBank.title : '',
-      isShowingOptions: false,
-      highlightedOptionId: null,
-      filteredOptions: _this.props.banks ? _this.props.banks.toArray() : []
-    };
-    _this.filterOptions = function (value) {
-      return _this.props.banks.toArray().filter(function (option) {
-        return option.title.toLowerCase().startsWith(value.toLowerCase());
-      });
-    };
-    _this.handleShowOptions = function () {
-      _this.setState({
-        filteredOptions: _this.props.banks.toArray(),
-        isShowingOptions: true
-      });
-    };
-    _this.handleHideOptions = function () {
-      var _this$state = _this.state,
-        filteredOptions = _this$state.filteredOptions,
-        inputValue = _this$state.inputValue;
-      var index = filteredOptions.findIndex(function (option) {
-        return option.title.toLowerCase() === inputValue.toLowerCase();
-      });
-      if (index !== -1) {
-        _this.handleSelectOption({}, {
-          id: filteredOptions[index].id
-        });
-      } else {
-        _this.setState({
-          isShowingOptions: false,
-          highlightedOptionId: null,
-          inputValue: _this.props.selectedBank ? _this.props.selectedBank.title : ''
+    _this.searchBanks = function (search) {
+      return _this.props.simpleFetchBanks({
+        search: search
+      }).then(function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 1),
+          banks = _ref2[0];
+        return banks.map(function (b) {
+          return {
+            id: b.id,
+            text: b.title,
+            archived: b.archived
+          };
         });
-      }
-    };
-    _this.handleBlur = function () {
-      _this.setState({
-        highlightedOptionId: null
-      });
-    };
-    _this.handleHighlightOption = function (event, _ref) {
-      var id = _ref.id;
-      event.persist();
-      var option = _this.getOptionById(id);
-      if (!option) return;
-      _this.setState({
-        highlightedOptionId: id,
-        inputValue: event.type === 'keydown' ? option.title : _this.state.inputValue
-      });
-    };
-    _this.handleSelectOption = function (event, _ref2) {
-      var id = _ref2.id;
-      if (!id || id === SELECT_EMPTY_OPTION) return;
-      var option = _this.getOptionById(id);
-      _this.props.onBankSelection(event, {
-        value: id
-      });
-      _this.setState({
-        inputValue: option.title,
-        isShowingOptions: false,
-        filteredOptions: _this.props.banks.toArray()
       });
     };
-    _this.handleInputChange = function (event) {
-      var value = event.target.value;
-      var newOptions = _this.filterOptions(value);
-      _this.setState({
-        inputValue: value,
-        filteredOptions: newOptions,
-        highlightedOptionId: newOptions.length > 0 ? newOptions[0].id : null,
-        isShowingOptions: true
+    _this.onSelect = function (e, bankOption) {
+      return _this.props.onBankSelection(e, {
+        id: parseInt(bankOption.id),
+        title: bankOption.text,
+        archived: bankOption.archived
       });
     };
     return _this;
   }
   _createClass(BankSelection, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-      return this.props.getAllBanks().then(function (bankIds) {
-        return _this2.props.setUi(SELECT_BANKS_OPTIONS, List(bankIds));
-      });
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      if (prevProps.banks !== this.props.banks) {
-        this.setState({
-          filteredOptions: this.props.banks.toArray()
-        });
-      }
-    }
-  }, {
-    key: "renderOptions",
-    value: function renderOptions() {
-      var _this3 = this;
-      return this.props.banks.toArray().map(function (bank) {
-        return /*#__PURE__*/React.createElement(Select.Option, {
-          key: bank.id,
-          id: bank.id,
-          isSelected: bank.id === _this3.props.selectedBank.id && !bank.archived
-        }, bank.title);
-      });
-    }
-  }, {
     key: "getErrors",
     value: function getErrors() {
       var selectedBank = this.props.selectedBank;
@@ -141,58 +55,42 @@ export var BankSelection = /*#__PURE__*/function (_Component) {
       }
     }
   }, {
-    key: "getOptionById",
-    value: function getOptionById(queryId) {
-      return this.props.banks.toArray().find(function (_ref3) {
-        var id = _ref3.id;
-        return id === queryId;
-      });
+    key: "selectedOption",
+    value: function selectedOption() {
+      var selectedBank = this.props.selectedBank;
+      return selectedBank ? {
+        id: selectedBank.id,
+        text: selectedBank.title,
+        archived: selectedBank.archived
+      } : null;
     }
   }, {
     key: "render",
     value: function render() {
-      var _this4 = this;
-      var _this$state2 = this.state,
-        inputValue = _this$state2.inputValue,
-        isShowingOptions = _this$state2.isShowingOptions,
-        filteredOptions = _this$state2.filteredOptions,
-        highlightedOptionId = _this$state2.highlightedOptionId;
-      return /*#__PURE__*/React.createElement(Select, Object.assign({}, omitProps(this.props, BankSelection.propTypes), {
-        renderLabel: this.props.label || t('Select the destination bank'),
-        inputValue: inputValue,
-        isShowingOptions: isShowingOptions,
-        onBlur: this.handleBlur,
-        onInputChange: this.handleInputChange,
-        onRequestShowOptions: this.handleShowOptions,
-        onRequestHideOptions: this.handleHideOptions,
-        onRequestHighlightOption: this.handleHighlightOption,
-        onRequestSelectOption: this.handleSelectOption,
-        "data-automation": "sdk-item-bank-modal",
-        messages: this.getErrors()
-      }), filteredOptions && filteredOptions.length > 0 ? filteredOptions.map(function (bank) {
-        return /*#__PURE__*/React.createElement(Select.Option, {
-          id: bank.id,
-          key: bank.id,
-          isHighlighted: bank.id === highlightedOptionId,
-          isSelected: _this4.props.selectedBank && bank.id === _this4.props.selectedBank.id && !bank.archived
-        }, bank.title);
-      }) : _ref4);
+      return /*#__PURE__*/React.createElement(GenericAsyncSearch, {
+        onSelectionChange: this.onSelect,
+        label: this.props.label || t('Select the destination bank'),
+        placeholder: t('Search for a bank'),
+        selectedOption: this.selectedOption(),
+        getOptions: this.searchBanks,
+        messages: this.getErrors(),
+        selectAutomation: 'sdk-item-bank-modal'
+      });
     }
   }]);
   BankSelection.displayName = "BankSelection";
   return BankSelection;
 }(Component);
 BankSelection.propTypes = {
-  banks: ImmutablePropTypes.list.isRequired,
-  getAllBanks: PropTypes.func.isRequired,
   label: PropTypes.string,
   onBankSelection: PropTypes.func,
   selectedBank: ImmutablePropTypes.record,
-  setUi: PropTypes.func.isRequired
+  simpleFetchBanks: PropTypes.func
 };
 BankSelection.defaultProps = {
   label: null,
   onBankSelection: function onBankSelection() {},
-  selectedBank: null
+  selectedBank: null,
+  simpleFetchBanks: simpleFetchBanks
 };
 export default BankSelection;

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

@@ -9,11 +9,12 @@ import PropTypes from 'prop-types';
 import { Alert } from '@instructure/ui-alerts';
 import { Button } from '@instructure/ui-buttons';
 import { Text } from '@instructure/ui-text';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-export var WarningWrapper = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_WarningWrapper = /*#__PURE__*/function (_Component) {
+import { withStyleOverrides } from '@instructure/quiz-common';
+export var WarningWrapper = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_WarningWrapper = /*#__PURE__*/function (_Component) {
   _inherits(WarningWrapper, _Component);
   var _super = _createSuper(WarningWrapper);
   function WarningWrapper() {
@@ -97,7 +98,7 @@ export var WarningWrapper = (_dec = withStyle(generateStyle, generateComponentTh
   }]);
   WarningWrapper.displayName = "WarningWrapper";
   return WarningWrapper;
-}(Component), _WarningWrapper.propTypes = {
+}(Component), _WarningWrapper.displayName = 'WarningWrapper', _WarningWrapper.componentId = "Quizzes".concat(_WarningWrapper.displayName), _WarningWrapper.propTypes = {
   alertType: PropTypes.oneOf(['info', 'success', 'warning', 'error']),
   cancelActionCallback: PropTypes.func,
   cancelActionText: PropTypes.string,

package/es/common/components/resources/positionBox/PositionBox.js

@@ -8,10 +8,11 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Heading } from '@instructure/ui-heading';
 import { ScreenReaderContent, PresentationContent } from '@instructure/ui-a11y-content';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-export var PositionBox = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_PositionBox = /*#__PURE__*/function (_Component) {
+import { withStyleOverrides } from '@instructure/quiz-common';
+export var PositionBox = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_PositionBox = /*#__PURE__*/function (_Component) {
   _inherits(PositionBox, _Component);
   var _super = _createSuper(PositionBox);
   function PositionBox() {
@@ -35,7 +36,7 @@ export var PositionBox = (_dec = withStyle(generateStyle, generateComponentTheme
   }]);
   PositionBox.displayName = "PositionBox";
   return PositionBox;
-}(Component), _PositionBox.propTypes = {
+}(Component), _PositionBox.displayName = 'PositionBox', _PositionBox.componentId = "Quizzes".concat(_PositionBox.displayName), _PositionBox.propTypes = {
   headingText: PropTypes.string.isRequired,
   headingLevel: PropTypes.string,
   position: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,

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

@@ -13,14 +13,14 @@ import { IconButton } from '@instructure/ui-buttons';
 import { Grid } from '@instructure/ui-grid';
 import { View } from '@instructure/ui-view';
 import { Text } from '@instructure/ui-text';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import InteractionTypes from "../../../../shared/InteractionTypes/index.js";
 import t from '@instructure/quiz-i18n/es/format-message';
-import { BUILD_TRAY_OPEN, BUILD_TRAY_POSITION, BUILD_TRAY_STIMULUS_ID } from '@instructure/quiz-common';
+import { BUILD_TRAY_OPEN, BUILD_TRAY_POSITION, BUILD_TRAY_STIMULUS_ID, withStyleOverrides } from '@instructure/quiz-common';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
 var _ref = jsx(IconBankLine, null);
-export var AddContentBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_AddContentBody = /*#__PURE__*/function (_Component) {
+export var AddContentBody = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_AddContentBody = /*#__PURE__*/function (_Component) {
   _inherits(AddContentBody, _Component);
   var _super = _createSuper(AddContentBody);
   function AddContentBody() {
@@ -125,7 +125,7 @@ export var AddContentBody = (_dec = withStyle(generateStyle, generateComponentTh
   }]);
   AddContentBody.displayName = "AddContentBody";
   return AddContentBody;
-}(Component), _AddContentBody.propTypes = {
+}(Component), _AddContentBody.displayName = 'AddContentBody', _AddContentBody.componentId = "Quizzes".concat(_AddContentBody.displayName), _AddContentBody.propTypes = {
   allowStimulusCreation: PropTypes.bool.isRequired,
   createItem: PropTypes.func.isRequired,
   createStimulus: PropTypes.func.isRequired,

package/es/common/components/resources/quiz/AddContent/Button/index.js

@@ -9,12 +9,12 @@ import PropTypes from 'prop-types';
 import { IconPlusLine } from '@instructure/ui-icons';
 import { PresentationContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { Button } from '@instructure/ui-buttons';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-import { END_EDITING_TRIGGER_CLASSNAME } from '@instructure/quiz-common';
-export var AddContentButton = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_AddContentButton = /*#__PURE__*/function (_Component) {
+import { END_EDITING_TRIGGER_CLASSNAME, withStyleOverrides } from '@instructure/quiz-common';
+export var AddContentButton = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_AddContentButton = /*#__PURE__*/function (_Component) {
   _inherits(AddContentButton, _Component);
   var _super = _createSuper(AddContentButton);
   function AddContentButton() {
@@ -82,7 +82,7 @@ export var AddContentButton = (_dec = withStyle(generateStyle, generateComponent
   }]);
   AddContentButton.displayName = "AddContentButton";
   return AddContentButton;
-}(Component), _AddContentButton.propTypes = {
+}(Component), _AddContentButton.displayName = 'AddContentButton', _AddContentButton.componentId = "Quizzes".concat(_AddContentButton.displayName), _AddContentButton.propTypes = {
   isEditing: PropTypes.bool.isRequired,
   onClick: PropTypes.func,
   position: PropTypes.number,

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

@@ -7,16 +7,16 @@ var _dec, _class, _AddContentPopover;
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Popover } from '@instructure/ui-popover';
-import { withStyle, jsx } from '@instructure/emotion';
+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";
-import { DELETED_QUIZ_ENTRY } from '@instructure/quiz-common';
+import { DELETED_QUIZ_ENTRY, withStyleOverrides } from '@instructure/quiz-common';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-export var AddContentPopover = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_AddContentPopover = /*#__PURE__*/function (_Component) {
+export var AddContentPopover = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_AddContentPopover = /*#__PURE__*/function (_Component) {
   _inherits(AddContentPopover, _Component);
   var _super = _createSuper(AddContentPopover);
   function AddContentPopover() {
@@ -110,7 +110,7 @@ export var AddContentPopover = (_dec = withStyle(generateStyle, generateComponen
   }]);
   AddContentPopover.displayName = "AddContentPopover";
   return AddContentPopover;
-}(Component), _AddContentPopover.propTypes = {
+}(Component), _AddContentPopover.displayName = 'AddContentPopover', _AddContentPopover.componentId = "Quizzes".concat(_AddContentPopover.displayName), _AddContentPopover.propTypes = {
   appContainer: CustomPropTypes.selectors.isRequired,
   allowStimulusCreation: PropTypes.bool,
   clearUi: PropTypes.func.isRequired,

package/es/common/components/resources/quiz/instructions/Instructions.js

@@ -8,7 +8,7 @@ var _dec, _class, _QuizInstructions;
 import { Component } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import { RichContentRenderer } from '@instructure/quiz-rce';
 import makeScrollable from "../../../shared/functionality/makeScrollable.js"; // ================================
 // renders the quiz instructions on
@@ -16,7 +16,8 @@ import makeScrollable from "../../../shared/functionality/makeScrollable.js"; //
 // ================================
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-export var QuizInstructions = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_QuizInstructions = /*#__PURE__*/function (_Component) {
+import { withStyleOverrides } from '@instructure/quiz-common';
+export var QuizInstructions = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_QuizInstructions = /*#__PURE__*/function (_Component) {
   _inherits(QuizInstructions, _Component);
   var _super = _createSuper(QuizInstructions);
   function QuizInstructions() {
@@ -40,7 +41,7 @@ export var QuizInstructions = (_dec = withStyle(generateStyle, generateComponent
   }]);
   QuizInstructions.displayName = "QuizInstructions";
   return QuizInstructions;
-}(Component), _QuizInstructions.propTypes = {
+}(Component), _QuizInstructions.displayName = 'QuizInstructions', _QuizInstructions.componentId = "Quizzes".concat(_QuizInstructions.displayName), _QuizInstructions.propTypes = {
   quiz: ImmutablePropTypes.record.isRequired,
   styles: PropTypes.object
 }, _QuizInstructions)) || _class);

package/es/common/components/resources/quiz/title/Title.js

@@ -8,14 +8,15 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Heading } from '@instructure/ui-heading';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import makeScrollable from "../../../shared/functionality/makeScrollable.js"; // ==========================
 // renders the quiz title on
 // the Preview and Take pages
 // ==========================
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-export var QuizTitle = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_QuizTitle = /*#__PURE__*/function (_Component) {
+import { withStyleOverrides } from '@instructure/quiz-common';
+export var QuizTitle = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_QuizTitle = /*#__PURE__*/function (_Component) {
   _inherits(QuizTitle, _Component);
   var _super = _createSuper(QuizTitle);
   function QuizTitle() {
@@ -38,7 +39,7 @@ export var QuizTitle = (_dec = withStyle(generateStyle, generateComponentTheme),
   }]);
   QuizTitle.displayName = "QuizTitle";
   return QuizTitle;
-}(Component), _QuizTitle.propTypes = {
+}(Component), _QuizTitle.displayName = 'QuizTitle', _QuizTitle.componentId = "Quizzes".concat(_QuizTitle.displayName), _QuizTitle.propTypes = {
   quiz: ImmutablePropTypes.record.isRequired,
   styles: PropTypes.object
 }, _QuizTitle)) || _class);

package/es/common/components/resources/quizSessionResult/Header/index.js

@@ -9,11 +9,12 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Heading } from '@instructure/ui-heading';
 import { Alert } from '@instructure/ui-alerts';
-import { withStyle, jsx } from '@instructure/emotion';
+import { jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-export var QuizSessionResultHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_QuizSessionResultHeader = /*#__PURE__*/function (_Component) {
+import { withStyleOverrides } from '@instructure/quiz-common';
+export var QuizSessionResultHeader = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_QuizSessionResultHeader = /*#__PURE__*/function (_Component) {
   _inherits(QuizSessionResultHeader, _Component);
   var _super = _createSuper(QuizSessionResultHeader);
   function QuizSessionResultHeader() {
@@ -65,7 +66,7 @@ export var QuizSessionResultHeader = (_dec = withStyle(generateStyle, generateCo
   }]);
   QuizSessionResultHeader.displayName = "QuizSessionResultHeader";
   return QuizSessionResultHeader;
-}(Component), _QuizSessionResultHeader.propTypes = {
+}(Component), _QuizSessionResultHeader.displayName = 'QuizSessionResultHeader', _QuizSessionResultHeader.componentId = "Quizzes".concat(_QuizSessionResultHeader.displayName), _QuizSessionResultHeader.propTypes = {
   quizSession: ImmutablePropTypes.record.isRequired,
   regradedSessionItemResults: ImmutablePropTypes.list,
   studentDescription: PropTypes.node,