@instructure/quiz-core 19.2.0 → 19.2.1-rc.0

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

@@ -8,7 +8,8 @@ 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 * as immutable from 'immutable';
 import debounce from 'lodash/debounce';
 import PropTypes from 'prop-types';
@@ -19,7 +20,7 @@ import { BreadcrumbLink } from '@instructure/ui-breadcrumb';
 import { Button } from '@instructure/ui-buttons';
 import { Heading } from '@instructure/ui-heading';
 import { AccessibleContent } from '@instructure/ui-a11y-content';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import { Checkbox } from '@instructure/ui-checkbox';
 import { View } from '@instructure/ui-view';
 import BankRecord from "../../../common/records/Bank.js";
@@ -34,20 +35,9 @@ import BankSearch from "../../../banks/components/BankSearch/index.js";
 import HeaderMenu from "../../../banks/components/HeaderMenu/index.js";
 import NavWrapper from "../NavWrapper/index.js";
 import { ADD_BANK_ENTRY_MODAL, BANKS_BANK_ENTRY_PAGINATION, CAN_EDIT, REMOVED_ACCESS, READ_ONLY } from '@instructure/quiz-common';
-var styles = {
-  componentId: 'fWUWr',
-  template: function template(theme) {
-    return "\n\n.fWUWr_caGd{background-color:".concat(theme.contentBackgroundColor || 'inherit', ";padding:").concat(theme.contentPaddingTopBottom || 'inherit', " ").concat(theme.contentPaddingLeftRight || 'inherit', "}\n\n.fWUWr_bXVg,.fWUWr_fDcJ,.fWUWr_dGfM{align-items:center;display:flex;flex-direction:row}\n\n.fWUWr_bXVg{flex:50%}\n\n.fWUWr_dGfM{flex:50%;justify-content:flex-end}\n\n.fWUWr_cfIL{padding:0 0 ").concat(theme.bankNamePaddingBottom || 'inherit', " 0}\n\n.fWUWr_etkf{padding-top:0.25rem;width:2rem}\n\n@media screen and (--phoneBreakPoint){.fWUWr_caGd{padding:").concat(theme.phoneContentPadding || 'inherit', " 0}}");
-  },
-  'content': 'fWUWr_caGd',
-  'topLeftMenu': 'fWUWr_bXVg',
-  'topMenu': 'fWUWr_fDcJ',
-  'topRightMenu': 'fWUWr_dGfM',
-  'bankName': 'fWUWr_cfIL',
-  'loading': 'fWUWr_etkf'
-};
-import theme from "./theme.js";
-export var Bank = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var Bank = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(Bank, _Component);
 
   var _super = _createSuper(Bank);
@@ -75,7 +65,7 @@ export var Bank = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
 
     _this.renderHeaderMenu = function () {
       if (!_this.props.isCompact) {
-        return /*#__PURE__*/React.createElement(HeaderMenu, {
+        return jsx(HeaderMenu, {
           bank: _this.props.bank
         });
       }
@@ -167,14 +157,14 @@ export var Bank = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
     };
 
     _this.renderTopLeftMenu = function () {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.topLeftMenu
+      return jsx("div", {
+        css: _this.props.styles.topLeftMenu
       }, _this.renderMultiAdd());
     };
 
     _this.renderTopRightMenu = function () {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.topRightMenu
+      return jsx("div", {
+        css: _this.props.styles.topRightMenu
       }, _this.renderNewBankEntryButton());
     };
 
@@ -232,7 +222,7 @@ export var Bank = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
 
     _this.renderRecords = function (recordIds) {
       var addEntryFunc = _this.props.isCompact && _this.props.addEntryToQuiz || null;
-      return /*#__PURE__*/React.createElement(BankEntriesList, {
+      return jsx(BankEntriesList, {
         addEntryToQuiz: addEntryFunc,
         bank: _this.props.bank,
         navigateToBankEntry: _this.props.navigateToBankEntry,
@@ -314,23 +304,23 @@ export var Bank = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
           navigateToBuild = _this$props3.navigateToBuild,
           returnToUrl = _this$props3.returnToUrl;
       var isScopeEmpty = !Object.keys(scope).length;
-      return /*#__PURE__*/React.createElement(NavWrapper, {
+      return jsx(NavWrapper, {
         closeTray: closeTray,
         navigateToBanks: navigateToBanks,
         navigateToBuild: navigateToBuild,
         renderHeaderMenu: this.renderHeaderMenu,
         returnToUrl: isScopeEmpty ? null : returnToUrl,
         canvasReferrerLinkText: isScopeEmpty ? null : scope.title
-      }, /*#__PURE__*/React.createElement(BreadcrumbLink, {
+      }, jsx(BreadcrumbLink, {
         key: "bank"
       }, this.props.bank.title));
     }
   }, {
     key: "renderName",
     value: function renderName() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.bankName
-      }, /*#__PURE__*/React.createElement(Heading, {
+      return jsx("div", {
+        css: this.props.styles.bankName
+      }, jsx(Heading, {
         level: "h1"
       }, this.props.bank.title || t('Bank')));
     }
@@ -338,7 +328,7 @@ export var Bank = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
     key: "renderAddBankEntryModal",
     value: function renderAddBankEntryModal() {
       if (!this.props.isCompact) {
-        return /*#__PURE__*/React.createElement(AddBankEntryModal, {
+        return jsx(AddBankEntryModal, {
           bankId: this.props.bankId,
           navigateToBankEntry: this.props.navigateToBankEntry
         });
@@ -378,10 +368,10 @@ export var Bank = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
       var label = t('Share with { courseName }', {
         courseName: this.props.scope.title
       });
-      return /*#__PURE__*/React.createElement(View, {
+      return jsx(View, {
         margin: "small 0",
         as: "div"
-      }, /*#__PURE__*/React.createElement(Checkbox, {
+      }, jsx(Checkbox, {
         checked: this.state.sharedWithCourse,
         label: label,
         onChange: this.toggleCheckbox,
@@ -391,20 +381,20 @@ export var Bank = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
   }, {
     key: "renderModals",
     value: function renderModals() {
-      return /*#__PURE__*/React.createElement("div", null, this.renderAddBankEntryModal());
+      return jsx("div", null, this.renderAddBankEntryModal());
     }
   }, {
     key: "renderNewBankEntryButton",
     value: function renderNewBankEntryButton() {
       if (!this.props.isCompact && this.props.bank.canEdit()) {
-        return /*#__PURE__*/React.createElement(Button, {
+        return jsx(Button, {
           margin: "small none",
           ref: this.storeCreateBankEntryButtonRef,
           color: "primary",
           onClick: this.openAddBankEntryModal,
           "data-automation": "sdk-new-bank-entry-button",
           renderIcon: IconPlusLine
-        }, /*#__PURE__*/React.createElement(AccessibleContent, {
+        }, jsx(AccessibleContent, {
           alt: t('Create Bank Entry')
         }, t('New')));
       }
@@ -415,11 +405,11 @@ export var Bank = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
       var isEmpty = this.props.bank.itemEntryCount === 0;
 
       if (this.props.isCompact && !this.props.isQuizContentLocked && !isEmpty) {
-        return /*#__PURE__*/React.createElement(Button, {
+        return jsx(Button, {
           onClick: this.addBankToQuiz,
           margin: "small none",
           renderIcon: IconPlusLine
-        }, /*#__PURE__*/React.createElement(AccessibleContent, {
+        }, jsx(AccessibleContent, {
           alt: t('Add this bank to quiz')
         }, t('All / Random')));
       }
@@ -435,7 +425,7 @@ export var Bank = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
       if (this.props.bank.filters !== null && this.props.useBankSearch) {
         var its = this.props.bank.filters.interaction_types;
         var tags = this.props.bank.filters.tags;
-        return /*#__PURE__*/React.createElement(BankSearch, {
+        return jsx(BankSearch, {
           interactionTypes: its,
           tags: tags,
           pageStateKey: this.stateKey(),
@@ -461,11 +451,11 @@ export var Bank = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(Page, null, this.renderModals(), this.renderNav(), /*#__PURE__*/React.createElement("div", {
-        className: styles.content
-      }, this.renderName(), this.renderCheckbox(), /*#__PURE__*/React.createElement("div", {
-        className: styles.topMenu
-      }, this.renderTopLeftMenu(), this.renderTopRightMenu()), this.renderSearch(), /*#__PURE__*/React.createElement(PaginatedCollection, {
+      return jsx(Page, null, this.renderModals(), this.renderNav(), jsx("div", {
+        css: this.props.styles.content
+      }, this.renderName(), this.renderCheckbox(), jsx("div", {
+        css: this.props.styles.topMenu
+      }, this.renderTopLeftMenu(), this.renderTopRightMenu()), this.renderSearch(), jsx(PaginatedCollection, {
         empty: this.emptyLoadText(),
         params: this.props.search,
         getPage: this.getPageDebounced,
@@ -514,7 +504,9 @@ export var Bank = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
   stimulusId: PropTypes.string,
   showShareBankFromTray: PropTypes.bool,
   updateSharedBankPermission: PropTypes.func.isRequired,
-  withConfirm: PropTypes.func.isRequired
+  withConfirm: PropTypes.func.isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   activeQuizId: null,
   addEntryToQuiz: null,

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

@@ -0,0 +1,36 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+var generateStyle = function generateStyle(componentTheme) {
+  var menuStyles = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center'
+  };
+  var mq = "@media screen and (".concat(componentTheme.phoneBreakPoint, ")");
+  return {
+    content: _defineProperty({
+      padding: "".concat(componentTheme.contentPaddingTopBottom, " ").concat(componentTheme.contentPaddingLeftRight),
+      backgroundColor: componentTheme.contentBackgroundColor
+    }, mq, {
+      padding: "".concat(componentTheme.phoneContentPadding, " 0")
+    }),
+    topMenu: menuStyles,
+    topLeftMenu: _objectSpread(_objectSpread({}, menuStyles), {}, {
+      flex: '50%'
+    }),
+    topRightMenu: _objectSpread(_objectSpread({}, menuStyles), {}, {
+      justifyContent: 'flex-end',
+      flex: '50%'
+    }),
+    bankName: {
+      padding: "0 0 ".concat(componentTheme.bankNamePaddingBottom, " 0")
+    },
+    loading: {
+      width: '2rem',
+      paddingTop: '0.25rem'
+    }
+  };
+};
+
+export default generateStyle;

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

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       colors = _ref.colors,
       breakpoints = _ref.breakpoints;
@@ -11,4 +11,6 @@ export default function generator(_ref) {
     phoneContentPadding: spacing.small,
     filtersMarginTop: spacing.large
   };
-}
+};
+
+export default generateComponentTheme;

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

@@ -5,21 +5,16 @@ 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 { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import Card from "../../../common/components/shared/Card/index.js";
 import BankEntryRow from "../BankEntryRow/index.js";
-var styles = {
-  componentId: 'dibqR',
-  template: function template(theme) {
-    return "\n\n.dibqR_blfJ{margin-bottom:".concat(theme.entryRowMargin || 'inherit', "}");
-  },
-  'entryRow': 'dibqR_blfJ'
-};
-import theme from "./theme.js";
-export var BankEntriesList = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var BankEntriesList = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(BankEntriesList, _Component);
 
   var _super = _createSuper(BankEntriesList);
@@ -37,10 +32,10 @@ export var BankEntriesList = (_dec = themeable(theme, styles), _dec(_class = (_t
 
     _this.renderEntry = function (entry) {
       var entryId = entry.get('id');
-      return /*#__PURE__*/React.createElement(Card, {
+      return jsx(Card, {
         key: entryId,
-        className: styles.entryRow
-      }, /*#__PURE__*/React.createElement(BankEntryRow, {
+        css: _this.props.styles.entryRow
+      }, jsx(BankEntryRow, {
         bankEntry: entry,
         bank: _this.props.bank,
         navigateToBankEntry: _this.props.navigateToBankEntry,
@@ -55,7 +50,7 @@ export var BankEntriesList = (_dec = themeable(theme, styles), _dec(_class = (_t
   _createClass(BankEntriesList, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", null, this.props.bankEntries.toArray().map(this.renderEntry));
+      return jsx("div", null, this.props.bankEntries.toArray().map(this.renderEntry));
     }
   }]);
 
@@ -66,7 +61,9 @@ export var BankEntriesList = (_dec = themeable(theme, styles), _dec(_class = (_t
   bank: ImmutablePropTypes.record.isRequired,
   bankEntries: ImmutablePropTypes.list.isRequired,
   navigateToBankEntry: PropTypes.func.isRequired,
-  isQuizContentLocked: PropTypes.bool.isRequired
+  isQuizContentLocked: PropTypes.bool.isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   addEntryToQuiz: null,
   isQuizContentLocked: false

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

@@ -0,0 +1,9 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    entryRow: {
+      marginBottom: componentTheme.entryRowMargin
+    }
+  };
+};
+
+export default generateStyle;

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

@@ -1,6 +1,8 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing;
   return {
     entryRowMargin: spacing.small
   };
-}
+};
+
+export default generateComponentTheme;

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

@@ -23,7 +23,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 immutable = _interopRequireWildcard(require("immutable"));
 
@@ -45,7 +45,7 @@ var _uiHeading = require("@instructure/ui-heading");
 
 var _uiA11yContent = require("@instructure/ui-a11y-content");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _uiCheckbox = require("@instructure/ui-checkbox");
 
@@ -75,23 +75,13 @@ var _index7 = _interopRequireDefault(require("../NavWrapper/index.js"));
 
 var _quizCommon = require("@instructure/quiz-common");
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'fWUWr',
-  template: function template(theme) {
-    return "\n\n.fWUWr_caGd{background-color:".concat(theme.contentBackgroundColor || 'inherit', ";padding:").concat(theme.contentPaddingTopBottom || 'inherit', " ").concat(theme.contentPaddingLeftRight || 'inherit', "}\n\n.fWUWr_bXVg,.fWUWr_fDcJ,.fWUWr_dGfM{align-items:center;display:flex;flex-direction:row}\n\n.fWUWr_bXVg{flex:50%}\n\n.fWUWr_dGfM{flex:50%;justify-content:flex-end}\n\n.fWUWr_cfIL{padding:0 0 ").concat(theme.bankNamePaddingBottom || 'inherit', " 0}\n\n.fWUWr_etkf{padding-top:0.25rem;width:2rem}\n\n@media screen and (--phoneBreakPoint){.fWUWr_caGd{padding:").concat(theme.phoneContentPadding || 'inherit', " 0}}");
-  },
-  'content': 'fWUWr_caGd',
-  'topLeftMenu': 'fWUWr_bXVg',
-  'topMenu': 'fWUWr_fDcJ',
-  'topRightMenu': 'fWUWr_dGfM',
-  'bankName': 'fWUWr_cfIL',
-  'loading': 'fWUWr_etkf'
-};
-var Bank = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var Bank = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(Bank, _Component);
 
   var _super = (0, _createSuper2.default)(Bank);
@@ -119,7 +109,7 @@ var Bank = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cl
 
     _this.renderHeaderMenu = function () {
       if (!_this.props.isCompact) {
-        return /*#__PURE__*/_react.default.createElement(_index6.default, {
+        return (0, _emotion.jsx)(_index6.default, {
           bank: _this.props.bank
         });
       }
@@ -211,14 +201,14 @@ var Bank = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cl
     };
 
     _this.renderTopLeftMenu = function () {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.topLeftMenu
+      return (0, _emotion.jsx)("div", {
+        css: _this.props.styles.topLeftMenu
       }, _this.renderMultiAdd());
     };
 
     _this.renderTopRightMenu = function () {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.topRightMenu
+      return (0, _emotion.jsx)("div", {
+        css: _this.props.styles.topRightMenu
       }, _this.renderNewBankEntryButton());
     };
 
@@ -276,7 +266,7 @@ var Bank = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cl
 
     _this.renderRecords = function (recordIds) {
       var addEntryFunc = _this.props.isCompact && _this.props.addEntryToQuiz || null;
-      return /*#__PURE__*/_react.default.createElement(_index4.default, {
+      return (0, _emotion.jsx)(_index4.default, {
         addEntryToQuiz: addEntryFunc,
         bank: _this.props.bank,
         navigateToBankEntry: _this.props.navigateToBankEntry,
@@ -358,23 +348,23 @@ var Bank = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cl
           navigateToBuild = _this$props3.navigateToBuild,
           returnToUrl = _this$props3.returnToUrl;
       var isScopeEmpty = !Object.keys(scope).length;
-      return /*#__PURE__*/_react.default.createElement(_index7.default, {
+      return (0, _emotion.jsx)(_index7.default, {
         closeTray: closeTray,
         navigateToBanks: navigateToBanks,
         navigateToBuild: navigateToBuild,
         renderHeaderMenu: this.renderHeaderMenu,
         returnToUrl: isScopeEmpty ? null : returnToUrl,
         canvasReferrerLinkText: isScopeEmpty ? null : scope.title
-      }, /*#__PURE__*/_react.default.createElement(_uiBreadcrumb.BreadcrumbLink, {
+      }, (0, _emotion.jsx)(_uiBreadcrumb.BreadcrumbLink, {
         key: "bank"
       }, this.props.bank.title));
     }
   }, {
     key: "renderName",
     value: function renderName() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.bankName
-      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.bankName
+      }, (0, _emotion.jsx)(_uiHeading.Heading, {
         level: "h1"
       }, this.props.bank.title || (0, _formatMessage.default)('Bank')));
     }
@@ -382,7 +372,7 @@ var Bank = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cl
     key: "renderAddBankEntryModal",
     value: function renderAddBankEntryModal() {
       if (!this.props.isCompact) {
-        return /*#__PURE__*/_react.default.createElement(_index3.default, {
+        return (0, _emotion.jsx)(_index3.default, {
           bankId: this.props.bankId,
           navigateToBankEntry: this.props.navigateToBankEntry
         });
@@ -422,10 +412,10 @@ var Bank = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cl
       var label = (0, _formatMessage.default)('Share with { courseName }', {
         courseName: this.props.scope.title
       });
-      return /*#__PURE__*/_react.default.createElement(_uiView.View, {
+      return (0, _emotion.jsx)(_uiView.View, {
         margin: "small 0",
         as: "div"
-      }, /*#__PURE__*/_react.default.createElement(_uiCheckbox.Checkbox, {
+      }, (0, _emotion.jsx)(_uiCheckbox.Checkbox, {
         checked: this.state.sharedWithCourse,
         label: label,
         onChange: this.toggleCheckbox,
@@ -435,20 +425,20 @@ var Bank = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cl
   }, {
     key: "renderModals",
     value: function renderModals() {
-      return /*#__PURE__*/_react.default.createElement("div", null, this.renderAddBankEntryModal());
+      return (0, _emotion.jsx)("div", null, this.renderAddBankEntryModal());
     }
   }, {
     key: "renderNewBankEntryButton",
     value: function renderNewBankEntryButton() {
       if (!this.props.isCompact && this.props.bank.canEdit()) {
-        return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        return (0, _emotion.jsx)(_uiButtons.Button, {
           margin: "small none",
           ref: this.storeCreateBankEntryButtonRef,
           color: "primary",
           onClick: this.openAddBankEntryModal,
           "data-automation": "sdk-new-bank-entry-button",
           renderIcon: _uiIcons.IconPlusLine
-        }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+        }, (0, _emotion.jsx)(_uiA11yContent.AccessibleContent, {
           alt: (0, _formatMessage.default)('Create Bank Entry')
         }, (0, _formatMessage.default)('New')));
       }
@@ -459,11 +449,11 @@ var Bank = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cl
       var isEmpty = this.props.bank.itemEntryCount === 0;
 
       if (this.props.isCompact && !this.props.isQuizContentLocked && !isEmpty) {
-        return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        return (0, _emotion.jsx)(_uiButtons.Button, {
           onClick: this.addBankToQuiz,
           margin: "small none",
           renderIcon: _uiIcons.IconPlusLine
-        }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+        }, (0, _emotion.jsx)(_uiA11yContent.AccessibleContent, {
           alt: (0, _formatMessage.default)('Add this bank to quiz')
         }, (0, _formatMessage.default)('All / Random')));
       }
@@ -479,7 +469,7 @@ var Bank = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cl
       if (this.props.bank.filters !== null && this.props.useBankSearch) {
         var its = this.props.bank.filters.interaction_types;
         var tags = this.props.bank.filters.tags;
-        return /*#__PURE__*/_react.default.createElement(_index5.default, {
+        return (0, _emotion.jsx)(_index5.default, {
           interactionTypes: its,
           tags: tags,
           pageStateKey: this.stateKey(),
@@ -505,11 +495,11 @@ var Bank = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cl
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_index.default, null, this.renderModals(), this.renderNav(), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.content
-      }, this.renderName(), this.renderCheckbox(), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.topMenu
-      }, this.renderTopLeftMenu(), this.renderTopRightMenu()), this.renderSearch(), /*#__PURE__*/_react.default.createElement(_index2.default, {
+      return (0, _emotion.jsx)(_index.default, null, this.renderModals(), this.renderNav(), (0, _emotion.jsx)("div", {
+        css: this.props.styles.content
+      }, this.renderName(), this.renderCheckbox(), (0, _emotion.jsx)("div", {
+        css: this.props.styles.topMenu
+      }, this.renderTopLeftMenu(), this.renderTopRightMenu()), this.renderSearch(), (0, _emotion.jsx)(_index2.default, {
         empty: this.emptyLoadText(),
         params: this.props.search,
         getPage: this.getPageDebounced,
@@ -557,7 +547,9 @@ var Bank = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_cl
   stimulusId: _propTypes.default.string,
   showShareBankFromTray: _propTypes.default.bool,
   updateSharedBankPermission: _propTypes.default.func.isRequired,
-  withConfirm: _propTypes.default.func.isRequired
+  withConfirm: _propTypes.default.func.isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   activeQuizId: null,
   addEntryToQuiz: null,

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

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var generateStyle = function generateStyle(componentTheme) {
+  var menuStyles = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center'
+  };
+  var mq = "@media screen and (".concat(componentTheme.phoneBreakPoint, ")");
+  return {
+    content: (0, _defineProperty2.default)({
+      padding: "".concat(componentTheme.contentPaddingTopBottom, " ").concat(componentTheme.contentPaddingLeftRight),
+      backgroundColor: componentTheme.contentBackgroundColor
+    }, mq, {
+      padding: "".concat(componentTheme.phoneContentPadding, " 0")
+    }),
+    topMenu: menuStyles,
+    topLeftMenu: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, menuStyles), {}, {
+      flex: '50%'
+    }),
+    topRightMenu: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, menuStyles), {}, {
+      justifyContent: 'flex-end',
+      flex: '50%'
+    }),
+    bankName: {
+      padding: "0 0 ".concat(componentTheme.bankNamePaddingBottom, " 0")
+    },
+    loading: {
+      width: '2rem',
+      paddingTop: '0.25rem'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       colors = _ref.colors,
       breakpoints = _ref.breakpoints;
@@ -18,4 +18,7 @@ function generator(_ref) {
     phoneContentPadding: spacing.small,
     filtersMarginTop: spacing.large
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/banks/components/BankEntriesList/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,30 +15,25 @@ 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"));
 
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _index = _interopRequireDefault(require("../../../common/components/shared/Card/index.js"));
 
 var _index2 = _interopRequireDefault(require("../BankEntryRow/index.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'dibqR',
-  template: function template(theme) {
-    return "\n\n.dibqR_blfJ{margin-bottom:".concat(theme.entryRowMargin || 'inherit', "}");
-  },
-  'entryRow': 'dibqR_blfJ'
-};
-var BankEntriesList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var BankEntriesList = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(BankEntriesList, _Component);
 
   var _super = (0, _createSuper2.default)(BankEntriesList);
@@ -58,10 +51,10 @@ var BankEntriesList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
 
     _this.renderEntry = function (entry) {
       var entryId = entry.get('id');
-      return /*#__PURE__*/_react.default.createElement(_index.default, {
+      return (0, _emotion.jsx)(_index.default, {
         key: entryId,
-        className: styles.entryRow
-      }, /*#__PURE__*/_react.default.createElement(_index2.default, {
+        css: _this.props.styles.entryRow
+      }, (0, _emotion.jsx)(_index2.default, {
         bankEntry: entry,
         bank: _this.props.bank,
         navigateToBankEntry: _this.props.navigateToBankEntry,
@@ -76,7 +69,7 @@ var BankEntriesList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   (0, _createClass2.default)(BankEntriesList, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement("div", null, this.props.bankEntries.toArray().map(this.renderEntry));
+      return (0, _emotion.jsx)("div", null, this.props.bankEntries.toArray().map(this.renderEntry));
     }
   }]);
   BankEntriesList.displayName = "BankEntriesList";
@@ -86,7 +79,9 @@ var BankEntriesList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   bank: _reactImmutableProptypes.default.record.isRequired,
   bankEntries: _reactImmutableProptypes.default.list.isRequired,
   navigateToBankEntry: _propTypes.default.func.isRequired,
-  isQuizContentLocked: _propTypes.default.bool.isRequired
+  isQuizContentLocked: _propTypes.default.bool.isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   addEntryToQuiz: null,
   isQuizContentLocked: false

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    entryRow: {
+      marginBottom: componentTheme.entryRowMargin
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

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

@@ -3,11 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing;
   return {
     entryRowMargin: spacing.small
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/package.json

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