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

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/BankSearch/presenter.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,7 +15,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _memoize = _interopRequireDefault(require("lodash/memoize"));
 
@@ -41,7 +39,7 @@ var _uiText = require("@instructure/ui-text");
 
 var _uiA11yContent = require("@instructure/ui-a11y-content");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
@@ -49,20 +47,12 @@ var _index = _interopRequireDefault(require("../../../common/components/shared/T
 
 var _interactionTypeMetadata = require("../../../common/util/interactionTypeMetadata.js");
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'eyMTa',
-  template: function template(theme) {
-    return "\n\n.eyMTa_ecuB{padding:".concat(theme.searchInteractionsPaddingTopBottom || 'inherit', " ").concat(theme.searchInteractionsPaddingLeftRight || 'inherit', "}\n\n.eyMTa_eYuC{display:flex;margin-top:1rem}\n\n.eyMTa_czeD{flex:1;margin-right:2rem}");
-  },
-  'interactionType': 'eyMTa_ecuB',
-  'filterContainer': 'eyMTa_eYuC',
-  'filterColumn': 'eyMTa_czeD'
-};
-
 var tagShape = _propTypes.default.shape({
   tag: _propTypes.default.shape({
     id: _propTypes.default.string,
@@ -71,7 +61,7 @@ var tagShape = _propTypes.default.shape({
   count: _propTypes.default.number.isRequired
 });
 
-var BankSearch = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var BankSearch = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(BankSearch, _Component);
 
   var _super = (0, _createSuper2.default)(BankSearch);
@@ -125,10 +115,10 @@ var BankSearch = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _d
               it = _ref2.interaction_type;
           var interactionName = (0, _interactionTypeMetadata.interactionTypesNameDictionary)(it);
           var label = "".concat(interactionName, " (").concat(count, ")");
-          return /*#__PURE__*/_react.default.createElement("div", {
+          return (0, _emotion.jsx)("div", {
             key: it.id,
-            className: styles.interactionType
-          }, /*#__PURE__*/_react.default.createElement(_uiCheckbox.Checkbox, {
+            css: _this2.props.styles.interactionType
+          }, (0, _emotion.jsx)(_uiCheckbox.Checkbox, {
             checked: active.has(it.id),
             label: label,
             onChange: _this2.toggleInteraction(it.id),
@@ -140,8 +130,7 @@ var BankSearch = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _d
           return tag;
         });
         var activeTags = this.props.search.get('tags');
-
-        var tagSelect = /*#__PURE__*/_react.default.createElement(_index.default, {
+        var tagSelect = (0, _emotion.jsx)(_index.default, {
           noMatchText: (0, _formatMessage.default)('No matching tags found'),
           parentType: "Bank",
           parentId: "0",
@@ -161,24 +150,24 @@ var BankSearch = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _d
             };
 
             var text = allInteractions ? hide() : show();
-            return /*#__PURE__*/_react.default.createElement(_uiButtons.CondensedButton, {
+            return (0, _emotion.jsx)(_uiButtons.CondensedButton, {
               onClick: toggleAllInteractions,
               margin: "none small"
-            }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+            }, (0, _emotion.jsx)(_uiA11yContent.AccessibleContent, {
               alt: text
             }, text));
           }
         };
 
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.filterContainer
-        }, /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.filterColumn
-        }, tagSelect), /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.filterColumn
-        }, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        return (0, _emotion.jsx)("div", {
+          css: this.props.styles.filterContainer
+        }, (0, _emotion.jsx)("div", {
+          css: this.props.styles.filterColumn
+        }, tagSelect), (0, _emotion.jsx)("div", {
+          css: this.props.styles.filterColumn
+        }, (0, _emotion.jsx)(_uiView.View, {
           margin: "none small"
-        }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        }, (0, _emotion.jsx)(_uiText.Text, {
           weight: "bold",
           color: "primary"
         }, (0, _formatMessage.default)('Question Type'))), interactionFilters, toggleButton()));
@@ -190,23 +179,23 @@ var BankSearch = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _d
       var _this$props2 = this.props,
           showFilters = _this$props2.showFilters,
           toggleFilters = _this$props2.toggleFilters;
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_uiFlex.Flex, {
         as: "div"
-      }, /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, {
+      }, (0, _emotion.jsx)(_uiFlex.Flex.Item, {
         shouldGrow: true,
         shouldShrink: true
-      }, /*#__PURE__*/_react.default.createElement(_uiTextInput.TextInput, {
-        renderLabel: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Search')),
+      }, (0, _emotion.jsx)(_uiTextInput.TextInput, {
+        renderLabel: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Search')),
         type: "search",
         placeholder: (0, _formatMessage.default)('Search'),
         onChange: this.updateSearch,
         value: this.props.search.get('text', '') || ''
-      })), /*#__PURE__*/_react.default.createElement(_uiFlex.Flex.Item, null, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      })), (0, _emotion.jsx)(_uiFlex.Flex.Item, null, (0, _emotion.jsx)(_uiButtons.Button, {
         onClick: toggleFilters,
         margin: "none none none small",
         renderIcon: _uiIcons.IconPlusLine,
         "data-automation": "sdk-search-filter-button"
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+      }, (0, _emotion.jsx)(_uiA11yContent.AccessibleContent, {
         alt: showFilters ? (0, _formatMessage.default)('Hide search filters') : (0, _formatMessage.default)('Show search filters')
       }, (0, _formatMessage.default)('Filters'))))), this.renderFilters());
     }
@@ -230,7 +219,9 @@ var BankSearch = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _d
   search: _reactImmutableProptypes.default.map.isRequired,
   toggle: _propTypes.default.func.isRequired,
   setFilter: _propTypes.default.func.isRequired,
-  update: _propTypes.default.func.isRequired
+  update: _propTypes.default.func.isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   allInteractions: false,
   interactionTypes: [],

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    interactionType: {
+      padding: "".concat(componentTheme.searchInteractionsPaddingTopBottom, " ").concat(componentTheme.searchInteractionsPaddingLeftRight)
+    },
+    filterContainer: {
+      display: 'flex',
+      marginTop: '1rem'
+    },
+    filterColumn: {
+      flex: 1,
+      marginRight: '2rem'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

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

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