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

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

@@ -0,0 +1,75 @@
+"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 generateStyle = function generateStyle(componentTheme) {
+  var footerStyles = {
+    display: 'flex',
+    flexDirection: 'row'
+  };
+  return {
+    content: {
+      padding: "".concat(componentTheme.contentPaddingTopBottom, " ").concat(componentTheme.contentPaddingLeftRight),
+      backgroundColor: componentTheme.contentBackgroundColor
+    },
+    entryRow: {
+      marginBottom: componentTheme.entryRowMargin
+    },
+    headerRow: {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'flex-start',
+      color: componentTheme.headerRowColor,
+      padding: componentTheme.headerRowPadding
+    },
+    leftHeader: {
+      flex: '0 0 auto',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      marginRight: componentTheme.leftHeaderMargin
+    },
+    headerText: {
+      fontSize: componentTheme.headerTextFontSize
+    },
+    header: {
+      backgroundColor: componentTheme.headerBackgroundColor,
+      color: componentTheme.headerColor,
+      padding: "".concat(componentTheme.headerPaddingTopBottom, " ").concat(componentTheme.headerPaddingLeftRight),
+      display: 'flex',
+      justifyContent: 'space-between',
+      verticalAlign: 'middle',
+      alignItems: 'center'
+    },
+    rightHeader: {
+      textAlign: 'right',
+      paddingLeft: componentTheme.rightHeaderPaddingLeft
+    },
+    footer: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, footerStyles), {}, {
+      textAlign: 'left',
+      paddingBottom: componentTheme.footerPaddingBottom,
+      paddingTop: componentTheme.footerPaddingTop
+    }),
+    leftFooter: footerStyles,
+    rightFooter: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, footerStyles), {}, {
+      flex: '8 0 0',
+      justifyContent: 'flex-end',
+      paddingLeft: componentTheme.rightFooterPaddingLeftRight,
+      paddingRight: componentTheme.rightFooterPaddingLeftRight
+    }),
+    entryEdit: {
+      borderBottom: "".concat(componentTheme.entryEditBorderWidth, " solid ").concat(componentTheme.entryEditBorderColor)
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/banks/components/BankEntry/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,
       typography = _ref.typography,
@@ -28,4 +28,7 @@ function generator(_ref) {
     entryEditBorderWidth: borders.widthSmall,
     entryEditBorderColor: colors.tiara
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

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

@@ -23,8 +23,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _partial = _interopRequireDefault(require("lodash/partial"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 
 var _immutable = _interopRequireDefault(require("immutable"));
@@ -43,12 +41,12 @@ var _uiA11yContent = require("@instructure/ui-a11y-content");
 
 var _uiAlerts = require("@instructure/ui-alerts");
 
-var _uiThemeable = require("@instructure/ui-themeable");
-
-var _quizRce = require("@instructure/quiz-rce");
+var _emotion = require("@instructure/emotion");
 
 var _quizCommon = require("@instructure/quiz-common");
 
+var _quizRce = require("@instructure/quiz-rce");
+
 var _quizInteractions = require("@instructure/quiz-interactions");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
@@ -67,30 +65,15 @@ var _index4 = _interopRequireDefault(require("../../../common/components/resourc
 
 var _index5 = _interopRequireDefault(require("../../../common/components/shared/TagDisplay/index.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'eQXFj',
-  template: function template(theme) {
-    return "\n\n.eQXFj_IXXK{padding:".concat(theme.entryDetailPadding || 'inherit', "}\n\n.eQXFj_dlpV{align-items:flex-start;color:").concat(theme.headerRowColor || 'inherit', ";display:flex;flex-direction:row;justify-content:space-between}\n\n.eQXFj_exDh{display:inline-flex;position:relative;z-index:").concat(theme.buttonsZIndex || 'inherit', "}\n\n.eQXFj_bTHH{border-left:").concat(theme.expandButtonContainerBorderWidth || 'inherit', " solid ").concat(theme.expandButtonContainerBorderColor || 'inherit', "}\n\n.eQXFj_AHIw{display:block}\n\n.eQXFj_eTBd{margin-bottom:").concat(theme.deletePrefaceMargin || 'inherit', "}\n\n.eQXFj_ftIe{margin-bottom:").concat(theme.addButtonMargin || 'inherit', "}\n\n.eQXFj_fAhB{color:").concat(theme.headerTextColor || 'inherit', ";font-size:").concat(theme.headerTextFontSize || 'inherit', "}\n\n.eQXFj_cloC{font-size:").concat(theme.stemFontSize || 'inherit', ";line-height:").concat(theme.stemLineHeight || 'inherit', ";overflow-x:auto}\n\n.eQXFj_cloC p{margin:0}\n\n.eQXFj_cjWK{border-top:").concat(theme.footerBorderWidth || 'inherit', " solid ").concat(theme.footerBorderColor || 'inherit', ";font-size:").concat(theme.footerFontSize || 'inherit', ";padding:").concat(theme.footerPadding || 'inherit', "}");
-  },
-  'entryDetail': 'eQXFj_IXXK',
-  'headerRow': 'eQXFj_dlpV',
-  'buttons': 'eQXFj_exDh',
-  'expandButtonContainer': 'eQXFj_bTHH',
-  'deleteAlert': 'eQXFj_AHIw',
-  'deletePreface': 'eQXFj_eTBd',
-  'addButton': 'eQXFj_ftIe',
-  'headerText': 'eQXFj_fAhB',
-  'stem': 'eQXFj_cloC',
-  'footer': 'eQXFj_cjWK'
-};
-
-var _ref2 = /*#__PURE__*/_react.default.createElement("div", null);
-
-var BankEntryRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_withI18nSupport) {
+var _ref2 = (0, _emotion.jsx)("div", null);
+
+var BankEntryRow = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_withI18nSupport) {
   (0, _inherits2.default)(BankEntryRow, _withI18nSupport);
 
   var _super = (0, _createSuper2.default)(BankEntryRow);
@@ -112,21 +95,20 @@ var BankEntryRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
 
     _this.deleteBankEntry = function () {
       var deletePreface = _this.isItemEntry() ? (0, _formatMessage.default)('Deleting this question:') : (0, _formatMessage.default)('Deleting this stimulus:');
-
-      var confirmBody = /*#__PURE__*/_react.default.createElement(_uiAlerts.Alert, {
+      var confirmBody = (0, _emotion.jsx)(_uiAlerts.Alert, {
         variant: "error",
         padding: "0"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.deleteAlert
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.deletePreface
-      }, deletePreface), /*#__PURE__*/_react.default.createElement(_uiList.List, null, /*#__PURE__*/_react.default.createElement(_uiList.List.Item, null, _formatMessage.default.rich('will <0>NOT</0> remove it from any assessments', [function (_ref) {
+      }, (0, _emotion.jsx)("div", {
+        css: _this.props.styles.deleteAlert
+      }, (0, _emotion.jsx)("div", {
+        css: _this.props.styles.deletePreface
+      }, deletePreface), (0, _emotion.jsx)(_uiList.List, null, (0, _emotion.jsx)(_uiList.List.Item, null, _formatMessage.default.rich('will <0>NOT</0> remove it from any assessments', [function (_ref) {
         var children = _ref.children;
-        return /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        return (0, _emotion.jsx)(_uiText.Text, {
           weight: "bold",
           key: "0"
         }, children);
-      }])), /*#__PURE__*/_react.default.createElement(_uiList.List.Item, null, (0, _formatMessage.default)('will lose its statistical link in reporting')), /*#__PURE__*/_react.default.createElement(_uiList.List.Item, null, (0, _formatMessage.default)('will remove access for all users with whom this bank has been shared')))));
+      }])), (0, _emotion.jsx)(_uiList.List.Item, null, (0, _formatMessage.default)('will lose its statistical link in reporting')), (0, _emotion.jsx)(_uiList.List.Item, null, (0, _formatMessage.default)('will remove access for all users with whom this bank has been shared')))));
 
       _this.props.withConfirm((0, _partial.default)(_this.props.removeBankEntry, _this.props.bank.id, _this.props.bankEntry.id), {
         title: (0, _formatMessage.default)('Delete {type}', {
@@ -179,7 +161,7 @@ var BankEntryRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
       var title = (0, _formatMessage.default)('Delete {type}', {
         type: _this.type()
       });
-      return /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
+      return (0, _emotion.jsx)(_uiButtons.IconButton, {
         size: "medium",
         withBackground: false,
         withBorder: false,
@@ -248,12 +230,13 @@ var BankEntryRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
       }) : (0, _formatMessage.default)('Expand {type} details', {
         type: type
       });
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.expandButtonContainer
-      }, /*#__PURE__*/_react.default.createElement(_index2.default, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.expandButtonContainer
+      }, (0, _emotion.jsx)(_index2.default, {
         onClick: this.props.toggleExpanded,
         title: title,
-        isExpanded: this.props.isExpanded
+        isExpanded: this.props.isExpanded,
+        "data-automation": "expand-bank-question-button"
       }));
     }
   }, {
@@ -263,9 +246,9 @@ var BankEntryRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
         var title = (0, _formatMessage.default)('Add {type} to this quiz', {
           type: this.type()
         });
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: (0, _classnames.default)(styles.buttons, styles.addButton)
-        }, /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
+        return (0, _emotion.jsx)("div", {
+          css: [this.props.styles.buttons, this.props.styles.addButton]
+        }, (0, _emotion.jsx)(_uiButtons.IconButton, {
           color: "primary",
           shape: "circle",
           size: "small",
@@ -285,7 +268,7 @@ var BankEntryRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
     key: "renderMoveButton",
     value: function renderMoveButton() {
       var title = this.moveModalTitle();
-      return /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
+      return (0, _emotion.jsx)(_uiButtons.IconButton, {
         ref: this.storeCopyMoveBankEntryButtonRef,
         size: "medium",
         withBackground: false,
@@ -306,16 +289,16 @@ var BankEntryRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
     key: "renderHeader",
     value: function renderHeader() {
       var separator = ' | ';
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.headerRow
-      }, this.renderAddButton(), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.buttons
-      }, this.props.bank.canEdit() && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.renderEditButton(), this.renderMoveButton(), this.renderTrashButton()), this.renderExpandButton())), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.headerText
-      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)("div", {
+        css: this.props.styles.headerRow
+      }, this.renderAddButton(), (0, _emotion.jsx)("div", {
+        css: this.props.styles.buttons
+      }, this.props.bank.canEdit() && (0, _emotion.jsx)(_react.default.Fragment, null, this.renderEditButton(), this.renderMoveButton(), this.renderTrashButton()), this.renderExpandButton())), (0, _emotion.jsx)("div", {
+        css: this.props.styles.headerText
+      }, (0, _emotion.jsx)(_uiHeading.Heading, {
         level: "reset",
         as: "h2"
-      }, this.entryHeader(), /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, separator), this.entryIdentifier())));
+      }, this.entryHeader(), (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, separator), this.entryIdentifier())));
     }
   }, {
     key: "renderEntryCollapsed",
@@ -324,13 +307,13 @@ var BankEntryRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
       // or title plain text
 
       if (itemOrStimulus.itemBody) {
-        return /*#__PURE__*/_react.default.createElement(_quizRce.RichContentRenderer, {
-          customStyles: styles.stem,
+        return (0, _emotion.jsx)(_quizRce.RichContentRendererEmotion, {
+          customStyles: this.props.styles.stem,
           content: itemOrStimulus.itemBody
         });
       } else {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.stem
+        return (0, _emotion.jsx)("div", {
+          css: this.props.styles.stem
         }, itemOrStimulus.title);
       }
     }
@@ -340,12 +323,12 @@ var BankEntryRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
       var entry = this.getEntry();
 
       if (this.isItemEntry()) {
-        return /*#__PURE__*/_react.default.createElement(_index3.default, {
+        return (0, _emotion.jsx)(_index3.default, {
           entry: entry,
           guid: this.props.bankEntry.id
         });
       } else {
-        return /*#__PURE__*/_react.default.createElement(_index4.default, {
+        return (0, _emotion.jsx)(_index4.default, {
           stimulus: entry
         });
       }
@@ -356,7 +339,7 @@ var BankEntryRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
       var title = (0, _formatMessage.default)('Edit {type}', {
         type: this.type()
       });
-      return /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
+      return (0, _emotion.jsx)(_uiButtons.IconButton, {
         ref: this.storeEditButtonRef,
         size: "medium",
         withBackground: false,
@@ -375,7 +358,7 @@ var BankEntryRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
         return null;
       }
 
-      return /*#__PURE__*/_react.default.createElement(_index5.default, {
+      return (0, _emotion.jsx)(_index5.default, {
         tagAssociations: this.props.tagAssociations
       });
     }
@@ -385,7 +368,7 @@ var BankEntryRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
       var lastUpdate = _formatMessage.default.rich('<0>Last Update</0> { updatedAt }', {
         0: function _(_ref3) {
           var children = _ref3.children;
-          return /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+          return (0, _emotion.jsx)(_uiText.Text, {
             key: "lastUpdate",
             weight: "bold",
             color: "primary"
@@ -394,24 +377,24 @@ var BankEntryRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
         updatedAt: this.formatDatetimeMedium(this.props.bankEntry.get('updatedAt'))
       });
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.footer
-      }, /*#__PURE__*/_react.default.createElement("span", null, lastUpdate), this.renderTags());
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.footer
+      }, (0, _emotion.jsx)("span", null, lastUpdate), this.renderTags());
     }
   }, {
     key: "render",
     value: function render() {
       var isExpanded = this.props.isExpanded;
-      return /*#__PURE__*/_react.default.createElement(_Overlay.default, {
+      return (0, _emotion.jsx)(_Overlay.default, {
         onClick: this.props.toggleExpanded,
         tabIndex: "-1",
         ariaLabel: this.entryIdentifier()
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _emotion.jsx)("div", {
         role: "group"
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.entryDetail,
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.entryDetail,
         "data-automation": "sdk-bankEntryItem"
-      }, this.renderHeader(), isExpanded ? this.renderEntryExpanded() : this.renderEntryCollapsed()), isExpanded && this.renderFooter()), /*#__PURE__*/_react.default.createElement(_index.default, {
+      }, this.renderHeader(), isExpanded ? this.renderEntryExpanded() : this.renderEntryCollapsed()), isExpanded && this.renderFooter()), (0, _emotion.jsx)(_index.default, {
         createEntry: this.createEntryForBank,
         label: this.moveModalTitle(),
         sourceBankId: this.props.bank.id,
@@ -446,7 +429,9 @@ var BankEntryRow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   toggleExpanded: _propTypes.default.func.isRequired,
   withConfirm: _propTypes.default.func.isRequired,
   locale: _propTypes.default.string,
-  timezone: _propTypes.default.string
+  timezone: _propTypes.default.string,
+  // 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/BankEntryRow/styles.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    entryDetail: {
+      padding: componentTheme.entryDetailPadding
+    },
+    headerRow: {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'flex-start',
+      color: componentTheme.headerRowColor
+    },
+    buttons: {
+      position: 'relative',
+      display: 'inline-flex',
+      zIndex: componentTheme.buttonsZIndex
+    },
+    expandButtonContainer: {
+      borderLeft: "".concat(componentTheme.expandButtonContainerBorderWidth, " solid ").concat(componentTheme.expandButtonContainerBorderColor)
+    },
+    deleteAlert: {
+      display: 'block'
+    },
+    deletePreface: {
+      marginBottom: componentTheme.deletePrefaceMargin
+    },
+    addButton: {
+      marginBottom: componentTheme.addButtonMargin
+    },
+    headerText: {
+      color: componentTheme.headerTextColor,
+      fontSize: componentTheme.headerTextFontSize
+    },
+    stem: {
+      overflowX: 'auto',
+      fontSize: componentTheme.stemFontSize,
+      lineHeight: componentTheme.stemLineHeight,
+      '& p': {
+        margin: 0
+      }
+    },
+    footer: {
+      padding: componentTheme.footerPadding,
+      borderTop: "".concat(componentTheme.footerBorderWidth, " solid ").concat(componentTheme.footerBorderColor),
+      fontSize: componentTheme.footerFontSize
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/banks/components/BankEntryRow/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,
       borders = _ref.borders,
@@ -27,4 +27,7 @@ function generator(_ref) {
     footerFontSize: typography.fontSizeXSmall,
     deletePrefaceMargin: spacing.xxSmall
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

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;