@instructure/quiz-core 20.1.0 → 20.1.1-rc.1

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

@@ -7,6 +7,8 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
+
 /* eslint "react/jsx-no-bind": "warn" */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
@@ -22,39 +24,25 @@ import { IconEditLine, IconTrashLine, IconShareSolid, IconCopyLine } from '@inst
 import { Alert } from '@instructure/ui-alerts';
 import { Spinner } from '@instructure/ui-spinner';
 import { Table } from '@instructure/ui-table';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import { EDIT_BANK_MODAL, withI18nSupport } from '@instructure/quiz-common';
 import CustomPropTypes from "../../../common/util/CustomPropTypes.js";
 import IfFeature from "../../../common/components/shared/IfFeature/index.js";
 import EditBankModal from "../EditBankModal/index.js";
 import SharingModal from "../SharingModal/index.js";
 import t from '@instructure/quiz-i18n/es/format-message';
-var styles = {
-  componentId: 'DyOOn',
-  template: function template(theme) {
-    return "\n\n.DyOOn_dIMK{border-bottom:".concat(theme.bankRowBorderWidth || 'inherit', " solid ").concat(theme.bankRowBorderColor || 'inherit', ";display:flex;flex-direction:row}\n\n.DyOOn_Zupb{flex:1;margin:").concat(theme.bankInfoMargin || 'inherit', " 0}\n\n.DyOOn_qnWp{font-size:").concat(theme.bankTitleFontSize || 'inherit', ";padding-bottom:").concat(theme.bankTitlePadding || 'inherit', "}\n\n.DyOOn_ciks{color:").concat(theme.bankDetailsColor || 'inherit', ";font-size:").concat(theme.bankDetailsFontSize || 'inherit', "}\n\n.DyOOn_cCNg{align-items:center;display:flex;flex-direction:row}\n\n.DyOOn_bISW{font-size:").concat(theme.BankOptionIconFontSize || 'inherit', ";margin-right:").concat(theme.BankOptionIconMargin || 'inherit', ";vertical-align:middle}\n\n.DyOOn_AHIw{display:block}\n\n.DyOOn_eTBd{margin-bottom:").concat(theme.deletePrefaceMargin || 'inherit', "}\n\n.DyOOn_fXqC{display:flex;justify-content:space-between}");
-  },
-  'bankRow': 'DyOOn_dIMK',
-  'bankInfo': 'DyOOn_Zupb',
-  'bankTitle': 'DyOOn_qnWp',
-  'bankDetails': 'DyOOn_ciks',
-  'bankOptions': 'DyOOn_cCNg',
-  'bankOptionIcon': 'DyOOn_bISW',
-  'deleteAlert': 'DyOOn_AHIw',
-  'deletePreface': 'DyOOn_eTBd',
-  'rowHeader': 'DyOOn_fXqC'
-};
-import theme from "./theme.js";
-
-var _ref4 = /*#__PURE__*/React.createElement(Table.Cell, null);
-
-var _ref5 = /*#__PURE__*/React.createElement(Table.Cell, null);
-
-var _ref6 = /*#__PURE__*/React.createElement(Table.Cell, null);
-
-var _ref7 = /*#__PURE__*/React.createElement(Table.Cell, null);
-
-export var BanksList = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_withI18nSupport) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+
+var _ref4 = jsx(Table.Cell, null);
+
+var _ref5 = jsx(Table.Cell, null);
+
+var _ref6 = jsx(Table.Cell, null);
+
+var _ref7 = jsx(Table.Cell, null);
+
+export var BanksList = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_withI18nSupport) {
   _inherits(BanksList, _withI18nSupport);
 
   var _super = _createSuper(BanksList);
@@ -113,22 +101,22 @@ export var BanksList = (_dec = themeable(theme, styles), _dec(_class = (_temp =
                 creatorFullName = resp && resp[0] && resp[0].fullName;
 
               case 7:
-                confirmBody = /*#__PURE__*/React.createElement("div", null, !deletingOwnBank && (creatorFullName ? t('You are about to delete an Item Bank that you did not create. This Item Bank was created by {creator}, proceed with caution.', {
+                confirmBody = jsx("div", null, !deletingOwnBank && (creatorFullName ? t('You are about to delete an Item Bank that you did not create. This Item Bank was created by {creator}, proceed with caution.', {
                   creator: creatorFullName
-                }) : t('You are about to delete an Item Bank that you did not create. Proceed with caution.')), /*#__PURE__*/React.createElement(Alert, {
+                }) : t('You are about to delete an Item Bank that you did not create. Proceed with caution.')), jsx(Alert, {
                   variant: "error",
                   padding: "0"
-                }, /*#__PURE__*/React.createElement("div", {
-                  className: styles.deleteAlert
-                }, /*#__PURE__*/React.createElement("div", {
-                  className: styles.deletePreface
-                }, t('Once deleted, items from this bank:')), /*#__PURE__*/React.createElement(List, null, /*#__PURE__*/React.createElement(List.Item, null, t('will no longer be accessible to others who currently have shared access')), /*#__PURE__*/React.createElement(List.Item, null, t.rich('will <0>NOT</0> be removed from any assessments', [function (_ref2) {
+                }, jsx("div", {
+                  css: _this.props.styles.deleteAlert
+                }, jsx("div", {
+                  css: _this.props.styles.deletePreface
+                }, t('Once deleted, items from this bank:')), jsx(List, null, jsx(List.Item, null, t('will no longer be accessible to others who currently have shared access')), jsx(List.Item, null, t.rich('will <0>NOT</0> be removed from any assessments', [function (_ref2) {
                   var children = _ref2.children;
-                  return /*#__PURE__*/React.createElement(Text, {
+                  return jsx(Text, {
                     weight: "bold",
                     key: "0"
                   }, children);
-                }])), /*#__PURE__*/React.createElement(List.Item, null, t('will lose their statistical link in reporting (if they were part of an assessment)')), /*#__PURE__*/React.createElement(List.Item, null, t('will no longer be available to any assessments attempting a random/batch pull of items (removing the pull will resolve the issue)'))))));
+                }])), jsx(List.Item, null, t('will lose their statistical link in reporting (if they were part of an assessment)')), jsx(List.Item, null, t('will no longer be available to any assessments attempting a random/batch pull of items (removing the pull will resolve the issue)'))))));
 
                 _this.props.withConfirm(partial(_this.deleteBank, bank.id), {
                   text: confirmBody,
@@ -243,35 +231,35 @@ export var BanksList = (_dec = themeable(theme, styles), _dec(_class = (_temp =
       };
 
       if (bank.status === 'copying') {
-        return /*#__PURE__*/React.createElement("div", {
-          className: styles.bankInfo,
+        return jsx("div", {
+          css: _this.props.styles.bankInfo,
           "data-automation": "sdk-bank-info",
           tabIndex: "-1"
-        }, /*#__PURE__*/React.createElement("div", {
-          className: styles.bankTitle
-        }, /*#__PURE__*/React.createElement(Heading, {
+        }, jsx("div", {
+          css: _this.props.styles.bankTitle
+        }, jsx(Heading, {
           as: "h2",
           level: "reset",
           "data-automation": "sdk-banks-list-bank-title-heading"
-        }, bank.title)), /*#__PURE__*/React.createElement("div", {
-          className: styles.bankDetails,
+        }, bank.title)), jsx("div", {
+          css: _this.props.styles.bankDetails,
           "data-automation": "sdk-banks-list-bank-details"
         }, t('Currently duplicating')));
       } else {
-        return /*#__PURE__*/React.createElement("div", {
-          className: styles.bankInfo,
+        return jsx("div", {
+          css: _this.props.styles.bankInfo,
           "data-automation": "sdk-bank-info",
           tabIndex: "-1"
-        }, /*#__PURE__*/React.createElement("div", {
-          className: styles.bankTitle
-        }, /*#__PURE__*/React.createElement(Link, {
+        }, jsx("div", {
+          css: _this.props.styles.bankTitle
+        }, jsx(Link, {
           onClick: navigateToBank(bank.id),
           themeOverride: {
-            color: _this.theme.bankTitleLinkColor,
-            hoverColor: _this.theme.bankTitleLinkHoverColor
+            color: _this.props.styles.bankTitleLinkColor,
+            hoverColor: _this.props.styles.bankTitleLinkHoverColor
           },
           "data-automation": "sdk-banks-list-bank-title-link"
-        }, /*#__PURE__*/React.createElement(Heading, {
+        }, jsx(Heading, {
           as: "h2",
           level: "reset",
           "data-automation": "sdk-banks-list-bank-title-heading"
@@ -280,7 +268,7 @@ export var BanksList = (_dec = themeable(theme, styles), _dec(_class = (_temp =
     };
 
     _this.renderBankOptions = function (bank) {
-      var bankEditOptions = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconButton, {
+      var bankEditOptions = jsx(React.Fragment, null, jsx(IconButton, {
         onClick: _this.openModal(bank),
         name: "Edit",
         size: "small",
@@ -294,7 +282,7 @@ export var BanksList = (_dec = themeable(theme, styles), _dec(_class = (_temp =
         screenReaderLabel: t('Edit bank {name}', {
           name: bank.title
         })
-      }), /*#__PURE__*/React.createElement(IconButton, {
+      }), jsx(IconButton, {
         onClick: _this.openDeleteBankModal(bank),
         name: "Delete",
         size: "small",
@@ -309,7 +297,7 @@ export var BanksList = (_dec = themeable(theme, styles), _dec(_class = (_temp =
           name: bank.title
         })
       }));
-      var duplicateBankOption = /*#__PURE__*/React.createElement(IconButton, {
+      var duplicateBankOption = jsx(IconButton, {
         onClick: _this.openDuplicateBankModal(bank),
         name: "Duplicate",
         size: "small",
@@ -325,19 +313,19 @@ export var BanksList = (_dec = themeable(theme, styles), _dec(_class = (_temp =
       });
 
       if (bank.status === 'copying') {
-        return /*#__PURE__*/React.createElement("div", {
-          className: styles.bankOptions
-        }, t('Duplicating'), /*#__PURE__*/React.createElement(Spinner, {
+        return jsx("div", {
+          css: _this.props.styles.bankOptions
+        }, t('Duplicating'), jsx(Spinner, {
           renderTitle: t('Loading'),
           size: "x-small",
           margin: "0 0 0 small"
         }));
       } else {
-        return /*#__PURE__*/React.createElement("div", {
-          className: styles.bankOptions
-        }, _this.props.duplicateItemBanks ? duplicateBankOption : null, /*#__PURE__*/React.createElement(IfFeature, {
+        return jsx("div", {
+          css: _this.props.styles.bankOptions
+        }, _this.props.duplicateItemBanks ? duplicateBankOption : null, jsx(IfFeature, {
           name: "item_bank_sharing"
-        }, /*#__PURE__*/React.createElement(IconButton, {
+        }, jsx(IconButton, {
           onClick: _this.openSharingModal(bank),
           name: "Share",
           size: "small",
@@ -356,11 +344,11 @@ export var BanksList = (_dec = themeable(theme, styles), _dec(_class = (_temp =
     };
 
     _this.renderBank = function (bank) {
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         key: bank.id,
-        className: styles.bankRow,
+        css: _this.props.styles.bankRow,
         "data-automation": "sdk-banks-list-bank-row"
-      }, /*#__PURE__*/React.createElement(EditBankModal, {
+      }, jsx(EditBankModal, {
         workingBank: bank.getWorkingInstance()
       }), _this.renderBankInfo(bank), _this.renderBankOptions(bank));
     };
@@ -389,22 +377,22 @@ export var BanksList = (_dec = themeable(theme, styles), _dec(_class = (_temp =
     key: "renderDetails",
     value: function renderDetails(bank) {
       var separator = ' | ';
-      var lastUsedInfo = bank.lastUsed() && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PresentationContent, null, separator), t('Last used { lastUsedDate }', {
+      var lastUsedInfo = bank.lastUsed() && jsx(React.Fragment, null, jsx(PresentationContent, null, separator), t('Last used { lastUsedDate }', {
         lastUsedDate: this.formatDateMedium(bank.lastUsed())
       }));
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.bankDetails,
+      return jsx("div", {
+        css: this.props.styles.bankDetails,
         "data-automation": "sdk-banks-list-bank-details"
-      }, /*#__PURE__*/React.createElement("div", null, t('Updated { updatedDate }', {
+      }, jsx("div", null, t('Updated { updatedDate }', {
         updatedDate: this.formatDateMedium(bank.updatedAt())
-      }), /*#__PURE__*/React.createElement(PresentationContent, null, separator), t("{\n              count, plural,\n              one {# Question Total}\n              other {# Questions Total}\n            }", {
+      }), jsx(PresentationContent, null, separator), t("{\n              count, plural,\n              one {# Question Total}\n              other {# Questions Total}\n            }", {
         count: bank.itemEntryCount
       }), lastUsedInfo));
     }
   }, {
     key: "renderSharingModal",
     value: function renderSharingModal() {
-      return /*#__PURE__*/React.createElement(SharingModal, {
+      return jsx(SharingModal, {
         appContainer: this.props.appContainer,
         bank: this.state.sharingModalBank,
         currentUser: this.props.currentUser,
@@ -427,9 +415,9 @@ export var BanksList = (_dec = themeable(theme, styles), _dec(_class = (_temp =
       var _this3 = this;
 
       if (bank.status === 'copying') {
-        return /*#__PURE__*/React.createElement(Table.RowHeader, null, /*#__PURE__*/React.createElement("div", {
-          className: styles.rowHeader
-        }, /*#__PURE__*/React.createElement(Heading, {
+        return jsx(Table.RowHeader, null, jsx("div", {
+          css: this.props.styles.rowHeader
+        }, jsx(Heading, {
           as: "h2",
           level: "reset",
           "data-automation": "sdk-banks-list-bank-title-heading"
@@ -441,15 +429,15 @@ export var BanksList = (_dec = themeable(theme, styles), _dec(_class = (_temp =
           };
         };
 
-        return /*#__PURE__*/React.createElement(Table.RowHeader, null, /*#__PURE__*/React.createElement("div", {
-          className: styles.rowHeader
-        }, /*#__PURE__*/React.createElement(EditBankModal, {
+        return jsx(Table.RowHeader, null, jsx("div", {
+          css: this.props.styles.rowHeader
+        }, jsx(EditBankModal, {
           workingBank: bank.getWorkingInstance()
-        }), /*#__PURE__*/React.createElement(Link, {
+        }), jsx(Link, {
           isWithinText: false,
           onClick: navigateToBank(bank.id),
           "data-automation": "sdk-banks-list-bank-title-link"
-        }, /*#__PURE__*/React.createElement(Heading, {
+        }, jsx(Heading, {
           as: "h2",
           level: "reset",
           "data-automation": "sdk-banks-list-bank-title-heading"
@@ -460,15 +448,15 @@ export var BanksList = (_dec = themeable(theme, styles), _dec(_class = (_temp =
     key: "renderTableRow",
     value: function renderTableRow(bank) {
       if (bank.status === 'copying') {
-        return /*#__PURE__*/React.createElement(Table.Row, {
+        return jsx(Table.Row, {
           key: bank.id
-        }, this.renderTableRowHeader(bank), _ref4, _ref5, _ref6, _ref7, !this.props.isCompact && /*#__PURE__*/React.createElement(Table.Cell, {
+        }, this.renderTableRowHeader(bank), _ref4, _ref5, _ref6, _ref7, !this.props.isCompact && jsx(Table.Cell, {
           textAlign: "end"
         }, this.renderBankOptions(bank)));
       } else {
-        return /*#__PURE__*/React.createElement(Table.Row, {
+        return jsx(Table.Row, {
           key: bank.id
-        }, this.renderTableRowHeader(bank), /*#__PURE__*/React.createElement(Table.Cell, null, this.formatDateMedium(bank.updatedAt())), /*#__PURE__*/React.createElement(Table.Cell, null, bank.itemEntryCount), /*#__PURE__*/React.createElement(Table.Cell, null, bank.lastUsed() ? this.formatDateMedium(bank.lastUsed()) : ''), /*#__PURE__*/React.createElement(Table.Cell, null, this.formatDateMedium(bank.createdAt())), !this.props.isCompact && /*#__PURE__*/React.createElement(Table.Cell, {
+        }, this.renderTableRowHeader(bank), jsx(Table.Cell, null, this.formatDateMedium(bank.updatedAt())), jsx(Table.Cell, null, bank.itemEntryCount), jsx(Table.Cell, null, bank.lastUsed() ? this.formatDateMedium(bank.lastUsed()) : ''), jsx(Table.Cell, null, this.formatDateMedium(bank.createdAt())), !this.props.isCompact && jsx(Table.Cell, {
           textAlign: "end"
         }, this.renderBankOptions(bank)));
       }
@@ -476,7 +464,7 @@ export var BanksList = (_dec = themeable(theme, styles), _dec(_class = (_temp =
   }, {
     key: "renderTableSortHeader",
     value: function renderTableSortHeader(headerId, headerText) {
-      return /*#__PURE__*/React.createElement(Table.ColHeader, {
+      return jsx(Table.ColHeader, {
         id: headerId,
         key: headerId,
         onRequestSort: this.props.onChangeSort(headerId, this.props.order),
@@ -488,26 +476,26 @@ export var BanksList = (_dec = themeable(theme, styles), _dec(_class = (_temp =
     value: function renderTable() {
       var _this4 = this;
 
-      return /*#__PURE__*/React.createElement(Table, {
+      return jsx(Table, {
         margin: "small 0",
         caption: t('Banks'),
         layout: this.props.isCompact ? 'stacked' : 'auto'
-      }, /*#__PURE__*/React.createElement(Table.Head, {
+      }, jsx(Table.Head, {
         renderSortLabel: t('Sort By')
-      }, /*#__PURE__*/React.createElement(Table.Row, null, this.renderTableSortHeader('name', t('Bank')), this.renderTableSortHeader('updated_at', t('Updated')), /*#__PURE__*/React.createElement(Table.ColHeader, {
+      }, jsx(Table.Row, null, this.renderTableSortHeader('name', t('Bank')), this.renderTableSortHeader('updated_at', t('Updated')), jsx(Table.ColHeader, {
         id: "header-num-questions",
         width: "1"
-      }, t('Questions')), this.renderTableSortHeader('last_used', t('Last Used')), this.renderTableSortHeader('created_at', t('Created')), !this.props.isCompact && /*#__PURE__*/React.createElement(Table.ColHeader, {
+      }, t('Questions')), this.renderTableSortHeader('last_used', t('Last Used')), this.renderTableSortHeader('created_at', t('Created')), !this.props.isCompact && jsx(Table.ColHeader, {
         id: "header-option-links",
         width: "1"
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Bank option links'))))), /*#__PURE__*/React.createElement(Table.Body, null, (this.props.banks.toArray() || []).map(function (bank) {
+      }, jsx(ScreenReaderContent, null, t('Bank option links'))))), jsx(Table.Body, null, (this.props.banks.toArray() || []).map(function (bank) {
         return _this4.renderTableRow(bank);
       })));
     }
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", null, this.state.sharingModalBank && this.renderSharingModal(), this.props.itemBankSearchTableEnabled ? this.renderTable() : this.props.banks.toArray().map(this.renderBank));
+      return jsx("div", null, this.state.sharingModalBank && this.renderSharingModal(), this.props.itemBankSearchTableEnabled ? this.renderTable() : this.props.banks.toArray().map(this.renderBank));
     }
   }]);
 
@@ -540,7 +528,9 @@ export var BanksList = (_dec = themeable(theme, styles), _dec(_class = (_temp =
   openModal: PropTypes.func.isRequired,
   withConfirm: PropTypes.func.isRequired,
   locale: PropTypes.string,
-  timezone: PropTypes.string
+  timezone: PropTypes.string,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   currentUser: null,
   getCourseInfo: null,

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

@@ -0,0 +1,45 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    bankRow: {
+      display: 'flex',
+      flexDirection: 'row',
+      borderBottom: "".concat(componentTheme.bankRowBorderWidth, " solid ").concat(componentTheme.bankRowBorderColor)
+    },
+    bankInfo: {
+      margin: "".concat(componentTheme.bankInfoMargin, " 0"),
+      flex: 1
+    },
+    bankTitle: {
+      fontSize: componentTheme.bankTitleFontSize,
+      paddingBottom: componentTheme.bankTitlePadding
+    },
+    bankDetails: {
+      color: componentTheme.bankDetailsColor,
+      fontSize: componentTheme.bankDetailsFontSize
+    },
+    bankOptions: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    bankOptionIcon: {
+      verticalAlign: 'middle',
+      marginRight: componentTheme.BankOptionIconMargin,
+      fontSize: componentTheme.BankOptionIconFontSize
+    },
+    bankTitleLinkColor: componentTheme.bankTitleLinkColor,
+    bankTitleLinkHoverColor: componentTheme.bankTitleLinkHoverColor,
+    deleteAlert: {
+      display: 'block'
+    },
+    deletePreface: {
+      marginBottom: componentTheme.deletePrefaceMargin
+    },
+    rowHeader: {
+      display: 'flex',
+      justifyContent: 'space-between'
+    }
+  };
+};
+
+export default generateStyle;

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

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var borders = _ref.borders,
       colors = _ref.colors,
       typography = _ref.typography,
@@ -18,4 +18,6 @@ export default function generator(_ref) {
     BankOptionIconFontSize: typography.fontSizeMedium,
     deletePrefaceMargin: spacing.xxSmall
   };
-}
+};
+
+export default generateComponentTheme;

package/lib/banks/components/BankEntry/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
 });
@@ -21,7 +19,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 _reactDom = _interopRequireDefault(require("react-dom"));
 
@@ -57,7 +55,7 @@ var _uiA11yContent = require("@instructure/ui-a11y-content");
 
 var _uiTextInput = require("@instructure/ui-text-input");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _index = _interopRequireDefault(require("../../../common/components/resources/entry/EntrySave/index.js"));
 
@@ -91,31 +89,15 @@ var _index10 = _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: 'dhhIK',
-  template: function template(theme) {
-    return "\n\n.dhhIK_caGd{background-color:".concat(theme.contentBackgroundColor || 'inherit', ";padding:").concat(theme.contentPaddingTopBottom || 'inherit', " ").concat(theme.contentPaddingLeftRight || 'inherit', "}\n\n.dhhIK_blfJ{margin-bottom:").concat(theme.entryRowMargin || 'inherit', "}\n\n.dhhIK_dlpV{color:").concat(theme.headerRowColor || 'inherit', ";flex-direction:row;justify-content:space-between;padding:").concat(theme.headerRowPadding || 'inherit', "}\n\n.dhhIK_dlpV,.dhhIK_cKlw{align-items:flex-start;display:flex}\n\n.dhhIK_cKlw{flex:0 0 auto;flex-direction:column;margin-right:").concat(theme.leftHeaderMargin || 'inherit', "}\n\n.dhhIK_fAhB{font-size:").concat(theme.headerTextFontSize || 'inherit', "}\n\n.dhhIK_fsuY{align-items:center;background-color:").concat(theme.headerBackgroundColor || 'inherit', ";color:").concat(theme.headerColor || 'inherit', ";display:flex;justify-content:space-between;padding:").concat(theme.headerPaddingTopBottom || 'inherit', " ").concat(theme.headerPaddingLeftRight || 'inherit', ";vertical-align:middle}\n\n.dhhIK_IoDT{padding-left:").concat(theme.rightHeaderPaddingLeft || 'inherit', ";text-align:right}\n\n[dir=ltr] .dhhIK_IoDT,[dir=rtl] .dhhIK_IoDT{text-align:right}\n\n.dhhIK_cjWK,.dhhIK_bVuu,.dhhIK_ekxs{display:flex;flex-direction:row}\n\n.dhhIK_cjWK{padding-bottom:").concat(theme.footerPaddingBottom || 'inherit', ";padding-top:").concat(theme.footerPaddingTop || 'inherit', ";text-align:left}\n\n[dir=ltr] .dhhIK_cjWK,[dir=rtl] .dhhIK_cjWK{text-align:left}\n\n.dhhIK_ekxs{flex:8 0 0;justify-content:flex-end;padding-left:").concat(theme.rightFooterPaddingLeftRight || 'inherit', ";padding-right:").concat(theme.rightFooterPaddingLeftRight || 'inherit', "}\n\n.dhhIK_eNDu{border-bottom:").concat(theme.entryEditBorderWidth || 'inherit', " solid ").concat(theme.entryEditBorderColor || 'inherit', "}");
-  },
-  'content': 'dhhIK_caGd',
-  'entryRow': 'dhhIK_blfJ',
-  'headerRow': 'dhhIK_dlpV',
-  'leftHeader': 'dhhIK_cKlw',
-  'headerText': 'dhhIK_fAhB',
-  'header': 'dhhIK_fsuY',
-  'rightHeader': 'dhhIK_IoDT',
-  'footer': 'dhhIK_cjWK',
-  'leftFooter': 'dhhIK_bVuu',
-  'rightFooter': 'dhhIK_ekxs',
-  'entryEdit': 'dhhIK_eNDu'
-};
-
-var _ref3 = /*#__PURE__*/_react.default.createElement(_Spinner.default, null);
-
-var BankEntry = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var _ref3 = (0, _emotion.jsx)(_Spinner.default, null);
+
+var BankEntry = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(BankEntry, _Component);
 
   var _super = (0, _createSuper2.default)(BankEntry);
@@ -362,17 +344,17 @@ var BankEntry = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
           returnToUrl = _this$props.returnToUrl,
           bank = _this$props.bank;
       var isScopeEmpty = !Object.keys(scope).length;
-      return /*#__PURE__*/_react.default.createElement(_index10.default, {
+      return (0, _emotion.jsx)(_index10.default, {
         closeTray: closeTray,
         navigateToBanks: navigateToBanks,
         navigateToBuild: navigateToBuild,
         returnToUrl: isScopeEmpty ? null : returnToUrl,
         canvasReferrerLinkText: isScopeEmpty ? null : scope.title
-      }, /*#__PURE__*/_react.default.createElement(_uiBreadcrumb.BreadcrumbLink, {
+      }, (0, _emotion.jsx)(_uiBreadcrumb.BreadcrumbLink, {
         key: "bank",
         onClick: this.navigateToBank,
         ref: this.setNavToBankRef
-      }, bank.title), /*#__PURE__*/_react.default.createElement(_uiBreadcrumb.BreadcrumbLink, {
+      }, bank.title), (0, _emotion.jsx)(_uiBreadcrumb.BreadcrumbLink, {
         key: "bankEntry"
       }, this.entryLinkName()));
     }
@@ -380,8 +362,8 @@ var BankEntry = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
     key: "renderTitle",
     value: function renderTitle(entry) {
       if (this.isItemEntry()) {
-        return /*#__PURE__*/_react.default.createElement(_uiTextInput.TextInput, {
-          renderLabel: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Edit question title')),
+        return (0, _emotion.jsx)(_uiTextInput.TextInput, {
+          renderLabel: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Edit question title')),
           type: "text",
           placeholder: (0, _formatMessage.default)('Question Title'),
           onChange: this.handleTitleChange,
@@ -403,18 +385,18 @@ var BankEntry = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
       var itemIdentifier = this.isTemporary() ? tempIdentifier : identifier;
       var entryName = this.isItemEntry() ? entry.getInteractionType().name : (0, _formatMessage.default)('Stimulus');
       var separator = ' | ';
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.header
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.leftHeader
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.headerText
-      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.header
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.leftHeader
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.headerText
+      }, (0, _emotion.jsx)(_uiHeading.Heading, {
         level: "reset",
         as: "h2"
-      }, entryName, /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, separator), itemIdentifier))), this.renderTitle(entry), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.rightHeader
-      }, /*#__PURE__*/_react.default.createElement(_index.default, props)));
+      }, entryName, (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, separator), itemIdentifier))), this.renderTitle(entry), (0, _emotion.jsx)("div", {
+        css: this.props.styles.rightHeader
+      }, (0, _emotion.jsx)(_index.default, props)));
     }
   }, {
     key: "hasPendingTagModifications",
@@ -596,7 +578,7 @@ var BankEntry = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
         text = (0, _formatMessage.default)('Edit Question Level Feedback');
       }
 
-      return /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
+      return (0, _emotion.jsx)(_uiButtons.IconButton, {
         onClick: this.openFeedbackModal,
         withBackground: false,
         withBorder: false,
@@ -659,7 +641,7 @@ var BankEntry = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
       var entryId = this.getBankEntryId(bankEntry);
 
       var tags = function tags() {
-        return /*#__PURE__*/_react.default.createElement(_index8.default, {
+        return (0, _emotion.jsx)(_index8.default, {
           allowNewTags: true,
           noMatchText: (0, _formatMessage.default)('Enter a tag to find or create'),
           parentType: entryType,
@@ -670,20 +652,20 @@ var BankEntry = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
       };
 
       var editWarning = this.isItemEntry() ? (0, _formatMessage.default)('Edits made here will appear on any assessment using this question.') : (0, _formatMessage.default)('Edits made here will appear on any assessment using this stimulus.');
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.entryEdit
-      }, /*#__PURE__*/_react.default.createElement(_index9.default, versioningProps, canEdit && /*#__PURE__*/_react.default.createElement(_uiAlerts.Alert, {
+      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)("div", {
+        css: this.props.styles.entryEdit
+      }, (0, _emotion.jsx)(_index9.default, versioningProps, canEdit && (0, _emotion.jsx)(_uiAlerts.Alert, {
         renderCloseButtonLabel: (0, _formatMessage.default)('Dismiss'),
         margin: "0 0 medium 0"
-      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, (0, _emotion.jsx)(_uiText.Text, {
         color: "primary"
-      }, editWarning)), /*#__PURE__*/_react.default.createElement(EntryComponent, props), useBankTags && tags())), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.footer
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.leftFooter
-      }, this.renderFeedbackSection()), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.rightFooter
-      }, /*#__PURE__*/_react.default.createElement(_index.default, props))));
+      }, editWarning)), (0, _emotion.jsx)(EntryComponent, props), useBankTags && tags())), (0, _emotion.jsx)("div", {
+        css: this.props.styles.footer
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.leftFooter
+      }, this.renderFeedbackSection()), (0, _emotion.jsx)("div", {
+        css: this.props.styles.rightFooter
+      }, (0, _emotion.jsx)(_index.default, props))));
     }
   }, {
     key: "render",
@@ -694,9 +676,9 @@ var BankEntry = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
         return _ref3;
       }
 
-      return /*#__PURE__*/_react.default.createElement(_index5.default, null, this.renderNav(), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.content
-      }, this.renderHeader(entry), this.renderEntry(entry), !this.props.isCompact && /*#__PURE__*/_react.default.createElement(_index3.default, {
+      return (0, _emotion.jsx)(_index5.default, null, this.renderNav(), (0, _emotion.jsx)("div", {
+        css: this.props.styles.content
+      }, this.renderHeader(entry), this.renderEntry(entry), !this.props.isCompact && (0, _emotion.jsx)(_index3.default, {
         parentId: this.props.bankId,
         parentType: _quizCommon.PARENT_TYPE_BANK
       })));
@@ -748,7 +730,9 @@ var BankEntry = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
   tagInput: _propTypes.default.string,
   updateItem: _propTypes.default.func.isRequired,
   updateStimulus: _propTypes.default.func.isRequired,
-  useBankTags: _propTypes.default.bool
+  useBankTags: _propTypes.default.bool,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   closeTray: function closeTray() {},
   entry: null,