@instructure/quiz-core 20.9.0 → 20.9.1-rc.0

package/lib/building/components/layout/header/BuildingButtons/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 _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -31,24 +29,17 @@ var _index = _interopRequireDefault(require("../../../../../common/components/sh
 
 var _quizCommon = require("@instructure/quiz-common");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'exAHi',
-  template: function template(theme) {
-    return "\n\n.exAHi_cKjJ{color:".concat(theme.quizSavingColor || 'inherit', ";margin:").concat(theme.quizSavingMargin || 'inherit', "}\n\n.exAHi_dxna{align-items:center;display:flex;height:100%;margin-right:").concat(theme.buttonsHolderMargin || 'inherit', "}\n\n.exAHi_cLWx{font-size:").concat(theme.menuIconFontSize || 'inherit', ";margin-right:").concat(theme.menuIconMargin || 'inherit', ";vertical-align:middle}");
-  },
-  'quizSaving': 'exAHi_cKjJ',
-  'buttonsHolder': 'exAHi_dxna',
-  'menuIcon': 'exAHi_cLWx'
-};
-var BuildingButtons = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var BuildingButtons = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(BuildingButtons, _Component);
 
   var _super = (0, _createSuper2.default)(BuildingButtons);
@@ -107,8 +98,8 @@ var BuildingButtons = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
     key: "renderSavingMessage",
     value: function renderSavingMessage() {
       if (this.props.quizSaving) {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.quizSaving
+        return (0, _emotion.jsx)("div", {
+          css: this.props.styles.quizSaving
         }, (0, _formatMessage.default)('Saving...'));
       }
     }
@@ -124,43 +115,43 @@ var BuildingButtons = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       var menuItems = [];
 
       if (this.props.speedgraderLink) {
-        menuItems.push( /*#__PURE__*/_react.default.createElement(_uiMenu.Menu.Item, {
+        menuItems.push((0, _emotion.jsx)(_uiMenu.Menu.Item, {
           key: "speedgrader",
           onSelect: this.openSpeedgraderLink
-        }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconSpeedGraderLine, {
-          className: styles.menuIcon
+        }, (0, _emotion.jsx)(_uiIcons.IconSpeedGraderLine, {
+          css: this.props.styles.menuIcon
         }), (0, _formatMessage.default)('Speedgrader')));
       }
 
-      menuItems.push( /*#__PURE__*/_react.default.createElement(_uiMenu.Menu.Item, {
+      menuItems.push((0, _emotion.jsx)(_uiMenu.Menu.Item, {
         key: "import",
         disabled: !this.props.canImport,
         onSelect: this.props.openModal,
         "data-automation": "sdk-import-content-menuitem"
-      }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconImportLine, {
-        className: styles.menuIcon,
+      }, (0, _emotion.jsx)(_uiIcons.IconImportLine, {
+        css: this.props.styles.menuIcon,
         "data-automation": "sdk-import-content-icon"
       }), (0, _formatMessage.default)('Import Content')));
 
       if (this.props.contentExportEnabled) {
-        menuItems.push( /*#__PURE__*/_react.default.createElement(_uiMenu.Menu.Item, {
+        menuItems.push((0, _emotion.jsx)(_uiMenu.Menu.Item, {
           key: "export",
           disabled: !this.props.canExport,
           onSelect: this.startQuizExportJob,
           "data-automation": "sdk-export-content-menuitem"
-        }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconExportLine, {
-          className: styles.menuIcon,
+        }, (0, _emotion.jsx)(_uiIcons.IconExportLine, {
+          css: this.props.styles.menuIcon,
           "data-automation": "sdk-export-content-icon"
         }), (0, _formatMessage.default)('Export Content')));
       }
 
       if (this.props.enableItemBanking) {
-        menuItems.push( /*#__PURE__*/_react.default.createElement(_uiMenu.Menu.Item, {
+        menuItems.push((0, _emotion.jsx)(_uiMenu.Menu.Item, {
           key: "banks",
           onSelect: this.props.navigateToBanks,
           "data-automation": "sdk-manage-item-banks-menuitem"
-        }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconBankLine, {
-          className: styles.menuIcon,
+        }, (0, _emotion.jsx)(_uiIcons.IconBankLine, {
+          css: this.props.styles.menuIcon,
           "data-automation": "sdk-manage-item-banks-icon"
         }), (0, _formatMessage.default)('Manage Item Banks')));
       }
@@ -169,26 +160,26 @@ var BuildingButtons = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
         {
           /* eslint-disable react/jsx-no-bind */
         }
-        menuItems.push( /*#__PURE__*/_react.default.createElement(_uiMenu.Menu.Item, {
+        menuItems.push((0, _emotion.jsx)(_uiMenu.Menu.Item, {
           key: "printKey",
           disabled: !this.props.hasQuestions || this.props.isEditing,
           onSelect: function onSelect() {
             return handlePrint(_quizCommon.PRINT_CURRENT_PAGE);
           },
           "data-automation": "sdk-print-key-menuitem"
-        }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconPrinterLine, {
-          className: styles.menuIcon,
+        }, (0, _emotion.jsx)(_uiIcons.IconPrinterLine, {
+          css: this.props.styles.menuIcon,
           "data-automation": "sdk-print-icon"
         }), (0, _formatMessage.default)('Print Key (With Answers)')));
-        menuItems.push( /*#__PURE__*/_react.default.createElement(_uiMenu.Menu.Item, {
+        menuItems.push((0, _emotion.jsx)(_uiMenu.Menu.Item, {
           key: "printBlank",
           disabled: !this.props.hasQuestions || this.props.isEditing,
           onSelect: function onSelect() {
             return handlePrint(_quizCommon.PRINT_BLANK);
           },
           "data-automation": "sdk-print-blank-menuitem"
-        }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconPrinterLine, {
-          className: styles.menuIcon,
+        }, (0, _emotion.jsx)(_uiIcons.IconPrinterLine, {
+          css: this.props.styles.menuIcon,
           "data-automation": "sdk-print-blank-icon"
         }), (0, _formatMessage.default)('Print Blank Quiz')));
         {
@@ -197,8 +188,8 @@ var BuildingButtons = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       }
 
       if (menuItems.length < 1) return;
-      return /*#__PURE__*/_react.default.createElement(_uiMenu.Menu, {
-        trigger: /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
+      return (0, _emotion.jsx)(_uiMenu.Menu, {
+        trigger: (0, _emotion.jsx)(_uiButtons.IconButton, {
           renderIcon: _uiIcons.IconMoreSolid,
           withBackground: false,
           withBorder: false,
@@ -212,9 +203,9 @@ var BuildingButtons = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
     value: function render() {
       var _this2 = this;
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.buttonsHolder
-      }, this.renderSavingMessage(), /*#__PURE__*/_react.default.createElement(_index.default, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.buttonsHolder
+      }, this.renderSavingMessage(), (0, _emotion.jsx)(_index.default, {
         render: function render(handlePrint) {
           return _this2.renderMenu(handlePrint);
         },
@@ -245,7 +236,8 @@ var BuildingButtons = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   setBanksTrayButtonRef: _propTypes.default.func.isRequired,
   speedgraderLink: _propTypes.default.string,
   startExport: _propTypes.default.func.isRequired,
-  contextUuid: _propTypes.default.string
+  contextUuid: _propTypes.default.string,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   activeQuizId: null,
   addInfo: function addInfo() {},

package/lib/building/components/layout/header/BuildingButtons/styles.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    quizSaving: {
+      color: componentTheme.quizSavingColor,
+      margin: componentTheme.quizSavingMargin
+    },
+    buttonsHolder: {
+      height: '100%',
+      marginRight: componentTheme.buttonsHolderMargin,
+      display: 'flex',
+      alignItems: 'center'
+    },
+    menuIcon: {
+      verticalAlign: 'middle',
+      marginRight: componentTheme.menuIconMargin,
+      fontSize: componentTheme.menuIconFontSize
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/building/components/layout/header/BuildingButtons/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 colors = _ref.colors,
       spacing = _ref.spacing,
       typography = _ref.typography;
@@ -16,4 +16,7 @@ function generator(_ref) {
     menuIconMargin: spacing.xSmall,
     menuIconFontSize: typography.fontSizeLarge
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/building/components/resources/ActionButtons/presenter.js

@@ -2,15 +2,11 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ActionButtons = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -19,19 +15,17 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 
-var _classnames2 = _interopRequireDefault(require("classnames"));
-
 var _uiButtons = require("@instructure/ui-buttons");
 
 var _uiIcons = require("@instructure/ui-icons");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _index = _interopRequireDefault(require("../../../../common/components/shared/drag_and_drop/DragHandle/index.js"));
 
@@ -41,21 +35,14 @@ var _noop = _interopRequireDefault(require("../../../../common/util/noop.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: 'gEXZO',
-  template: function template(theme) {
-    return "\n\n.gEXZO_exDh{color:".concat(theme.buttonsColor || 'inherit', ";display:inline-flex;flex:0 0 auto;font-size:1.1rem;padding:0 ").concat(theme.buttonsPadding || 'inherit', ";text-align:right;z-index:").concat(theme.buttonsZIndex || 'inherit', "}\n\n[dir=ltr] .gEXZO_exDh,[dir=rtl] .gEXZO_exDh{text-align:right}\n\n.gEXZO_fwKS.gEXZO_bBLs,body.tox-fullscreen .gEXZO_exDh{display:none}\n\n@media print{.gEXZO_exDh{display:none}}");
-  },
-  'buttons': 'gEXZO_exDh',
-  'edit': 'gEXZO_fwKS',
-  'hide': 'gEXZO_bBLs'
-};
 var ScrollTargetButton = (0, _makeScrollable.default)(_uiButtons.IconButton);
-var ActionButtons = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var ActionButtons = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ActionButtons, _Component);
 
   var _super = (0, _createSuper2.default)(ActionButtons);
@@ -100,6 +87,11 @@ var ActionButtons = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
     value: function shouldFocusOnMount() {
       return this.props.shouldFocusOnMount && !this.props.editingAddContentPopover;
     }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles();
+    }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -111,20 +103,24 @@ var ActionButtons = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
           _this2.editButton && _this2.editButton.getWrappedInstance().setFocus();
         }, 50);
       }
+
+      this.props.makeStyles();
     }
   }, {
     key: "render",
     value: function render() {
-      var _classnames;
-
-      var editClasses = (0, _classnames2.default)((_classnames = {}, (0, _defineProperty2.default)(_classnames, styles.edit, true), (0, _defineProperty2.default)(_classnames, styles.hide, !this.props.shouldRenderEdit), _classnames));
-      return /*#__PURE__*/_react.default.createElement("div", {
+      var hideClass = !this.props.shouldRenderEdit ? 'hide' : '';
+      return (0, _emotion.jsx)("div", {
+        className: "buttons",
         tabIndex: "-1",
         onFocus: this.onButtonFocus,
-        className: styles.buttons
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: editClasses
-      }, /*#__PURE__*/_react.default.createElement(ScrollTargetButton, {
+        css: this.props.styles.buttons
+      }, (0, _emotion.jsx)(_emotion.Global, {
+        styles: this.props.styles.globalStyles
+      }), (0, _emotion.jsx)("div", {
+        className: hideClass,
+        css: this.props.styles.edit
+      }, (0, _emotion.jsx)(ScrollTargetButton, {
         as: "div",
         onClick: this.switchOnEditing,
         scrollKey: this.props.scrollKey,
@@ -136,7 +132,7 @@ var ActionButtons = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
         shouldFocusOnMount: this.shouldFocusOnMount(),
         screenReaderLabel: this.props.quizEntry.generateScreenReaderText(this.props.displayPosition, _quizCommon.EDIT),
         ref: this.setEditRef
-      })), this.props.questionCopyEnabled && this.props.onCopy && /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
+      })), this.props.questionCopyEnabled && this.props.onCopy && (0, _emotion.jsx)(_uiButtons.IconButton, {
         as: "div",
         onClick: this.props.onCopy,
         disabled: this.props.shouldDisableCopy,
@@ -146,12 +142,12 @@ var ActionButtons = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
         size: "small",
         "data-automation": "sdk-copy-question-button",
         screenReaderLabel: this.props.quizEntry.generateScreenReaderText(this.props.displayPosition, _quizCommon.COPY)
-      }), this.connectDragSource( /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_index.default, {
+      }), this.connectDragSource((0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_index.default, {
         displayPosition: this.props.displayPosition,
         quizEntry: this.props.quizEntry,
         quizEntries: this.props.quizEntries,
         disabled: this.props.shouldDisableDragHandle
-      }))), this.props.shouldRenderDelete && /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
+      }))), this.props.shouldRenderDelete && (0, _emotion.jsx)(_uiButtons.IconButton, {
         as: "div",
         onClick: this.props.onDelete,
         disabled: this.props.shouldDisableDeleteButton,
@@ -182,7 +178,9 @@ var ActionButtons = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   shouldRenderEdit: _propTypes.default.bool,
   shouldRenderDelete: _propTypes.default.bool,
   switchOnEditing: _propTypes.default.func,
-  shouldFocusOnMount: _propTypes.default.bool
+  shouldFocusOnMount: _propTypes.default.bool,
+  styles: _propTypes.default.object,
+  makeStyles: _propTypes.default.func
 }, _class2.defaultProps = {
   onCopy: null,
   scrollKey: void 0,

package/lib/building/components/resources/ActionButtons/styles.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var generateStyle = function generateStyle(componentTheme, props) {
+  var mq = '@media print';
+  return {
+    buttons: (0, _defineProperty2.default)({
+      flex: '0 0 auto',
+      display: 'inline-flex',
+      textAlign: 'right',
+      zIndex: componentTheme.buttonsZIndex,
+      color: componentTheme.buttonsColor,
+      fontSize: '1.1rem',
+      padding: "0 ".concat(componentTheme.buttonsPadding)
+    }, mq, {
+      display: 'none'
+    }),
+
+    /* Hide buttons when the RCE editor is in fullscreen mode */
+    edit: (0, _objectSpread2.default)({
+      display: 'inline'
+    }, !props.shouldRenderEdit && {
+      display: 'none'
+    }),
+    globalStyles: {
+      'body.tox-fullscreen .buttons': {
+        display: 'none'
+      }
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/building/components/resources/ActionButtons/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;
   return {
@@ -13,4 +13,7 @@ function generator(_ref) {
     buttonsColor: colors.oxford,
     buttonsPadding: spacing.xSmall
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/building/components/resources/AddToBankOptions/index.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 _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -25,24 +23,19 @@ var _uiView = require("@instructure/ui-view");
 
 var _uiButtons = require("@instructure/ui-buttons");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _quizCommon = require("@instructure/quiz-common");
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'bsvMb',
-  template: function template(theme) {
-    return "\n\n.bsvMb_dNGs{background-color:".concat(theme.addToBankBackgroundColor || 'inherit', ";border:1px dashed ").concat(theme.addToBankBorderColor || 'inherit', ";text-align:center}\n\n[dir=ltr] .bsvMb_dNGs,[dir=rtl] .bsvMb_dNGs{text-align:center}");
-  },
-  'addToBank': 'bsvMb_dNGs'
-};
-var AddToBankOptions = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var AddToBankOptions = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(AddToBankOptions, _Component);
 
   var _super = (0, _createSuper2.default)(AddToBankOptions);
@@ -87,10 +80,10 @@ var AddToBankOptions = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
   (0, _createClass2.default)(AddToBankOptions, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_uiView.View, {
         as: "div",
-        className: styles.addToBank
-      }, /*#__PURE__*/_react.default.createElement(_uiButtons.CondensedButton, {
+        css: this.props.styles.addToBank
+      }, (0, _emotion.jsx)(_uiButtons.CondensedButton, {
         color: "primary",
         ref: this.storeAddToBankLinkRef,
         onClick: this.openAddToBankModal,
@@ -108,7 +101,8 @@ var AddToBankOptions = (_dec = (0, _uiThemeable.themeable)(_theme.default, style
   isValid: _propTypes.default.bool.isRequired,
   openModal: _propTypes.default.func.isRequired,
   screenreaderNotification: _propTypes.default.func.isRequired,
-  showError: _propTypes.default.func.isRequired
+  showError: _propTypes.default.func.isRequired,
+  styles: _propTypes.default.object
 }, _temp)) || _class);
 exports.AddToBankOptions = AddToBankOptions;
 var _default = AddToBankOptions;

package/lib/building/components/resources/AddToBankOptions/styles.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    addToBank: {
+      backgroundColor: componentTheme.addToBankBackgroundColor,
+      border: "1px dashed ".concat(componentTheme.addToBankBorderColor),
+      textAlign: 'center'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/building/components/resources/AddToBankOptions/theme.js

@@ -3,13 +3,16 @@
 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;
   return {
     addToBankBackgroundColor: colors.porcelain,
     addToBankBorderColor: colors.oxford
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;