@instructure/quiz-core 20.1.1-rc.4 → 20.2.0

package/lib/banks/components/NavWrapper/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 _reactDom = _interopRequireDefault(require("react-dom"));
 
@@ -35,28 +33,21 @@ var _uiIcons = require("@instructure/ui-icons");
 
 var _uiView = require("@instructure/ui-view");
 
-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: 'fooBc',
-  template: function template(theme) {
-    return "\n\n.fooBc_diTj{align-items:center;background-color:".concat(theme.navBackgroundColor || 'inherit', ";border-bottom:").concat(theme.navBorderWidth || 'inherit', " solid ").concat(theme.navBorderColor || 'inherit', ";box-sizing:border-box;display:flex;flex-direction:row;padding:").concat(theme.navPaddingTopBottom || 'inherit', " ").concat(theme.navPaddingLeftRight || 'inherit', ";position:sticky;top:0;width:100%;z-index:4444}\n\nbody.tox-fullscreen .fooBc_diTj{display:none}\n\n@supports (-ms-ime-align:auto){.fooBc_diTj{position:relative}}\n\n.fooBc_ZXRE{flex:1}");
-  },
-  'nav': 'fooBc_diTj',
-  'crumbs': 'fooBc_ZXRE'
-};
-
-var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconBankLine, {
+var _ref = (0, _emotion.jsx)(_uiIcons.IconBankLine, {
   size: "x-small"
 });
 
-var NavWrapper = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var NavWrapper = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(NavWrapper, _Component);
 
   var _super = (0, _createSuper2.default)(NavWrapper);
@@ -101,14 +92,12 @@ var NavWrapper = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _d
       var _this$props = this.props,
           returnToUrl = _this$props.returnToUrl,
           canvasReferrerLinkText = _this$props.canvasReferrerLinkText;
-
-      var canvasReferrerLink = returnToUrl && canvasReferrerLinkText && /*#__PURE__*/_react.default.createElement(_uiBreadcrumb.BreadcrumbLink, {
+      var canvasReferrerLink = returnToUrl && canvasReferrerLinkText && (0, _emotion.jsx)(_uiBreadcrumb.BreadcrumbLink, {
         key: "Context",
         href: returnToUrl,
         target: "_top"
       }, canvasReferrerLinkText);
-
-      var banksLinks = /*#__PURE__*/_react.default.createElement(_uiBreadcrumb.BreadcrumbLink, {
+      var banksLinks = (0, _emotion.jsx)(_uiBreadcrumb.BreadcrumbLink, {
         ref: this.setItemBanksRef,
         renderIcon: _ref,
         key: "Banks",
@@ -116,7 +105,6 @@ var NavWrapper = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _d
       }, (0, _formatMessage.default)('Item Banks')); // If Breadcrumb has multiple children (even if 2nd is null), it will
       // render the `>` icon, which we don't want if there are no children.
 
-
       var breadCrumbLinks = [banksLinks];
       if (this.props.children) breadCrumbLinks.push(this.props.children);
       if (canvasReferrerLink) breadCrumbLinks.unshift(canvasReferrerLink);
@@ -131,11 +119,11 @@ var NavWrapper = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _d
           returnToUrl = _this$props2.returnToUrl;
 
       if (!closeTray && returnToUrl) {
-        return /*#__PURE__*/_react.default.createElement(_ReturnButton.ReturnButton, {
+        return (0, _emotion.jsx)(_ReturnButton.ReturnButton, {
           returnToUrl: returnToUrl
         });
       } else if (navigateToBuild) {
-        return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        return (0, _emotion.jsx)(_uiButtons.Button, {
           onClick: navigateToBuild
         }, (0, _formatMessage.default)('Return'));
       }
@@ -144,7 +132,7 @@ var NavWrapper = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _d
     key: "renderCloseButton",
     value: function renderCloseButton() {
       if (this.props.closeTray) {
-        return /*#__PURE__*/_react.default.createElement(_uiButtons.CloseButton, {
+        return (0, _emotion.jsx)(_uiButtons.CloseButton, {
           elementRef: this.setCloseButtonRef,
           placement: "start",
           onClick: this.props.closeTray,
@@ -155,11 +143,17 @@ var NavWrapper = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _d
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_uiView.View, null, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.nav
-      }, this.renderCloseButton(), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.crumbs
-      }, /*#__PURE__*/_react.default.createElement(_uiBreadcrumb.Breadcrumb, {
+      return (0, _emotion.jsx)(_uiView.View, null, (0, _emotion.jsx)(_emotion.Global, {
+        styles: {
+          'body.tox-fullscreen .nav': {
+            'display': 'none'
+          }
+        }
+      }), (0, _emotion.jsx)("div", {
+        css: this.props.styles.nav
+      }, this.renderCloseButton(), (0, _emotion.jsx)("div", {
+        css: this.props.styles.crumbs
+      }, (0, _emotion.jsx)(_uiBreadcrumb.Breadcrumb, {
         size: "small",
         label: (0, _formatMessage.default)('You are here:')
       }, this.renderBreadcrumbLinks())), this.renderReturnButton(), this.props.renderHeaderMenu()));
@@ -175,7 +169,9 @@ var NavWrapper = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _d
   renderHeaderMenu: _propTypes.default.func,
   trayOpen: _propTypes.default.bool.isRequired,
   returnToUrl: _propTypes.default.string,
-  canvasReferrerLinkText: _propTypes.default.string
+  canvasReferrerLinkText: _propTypes.default.string,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   children: null,
   closeTray: null,

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    nav: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: "".concat(componentTheme.navPaddingTopBottom, " ").concat(componentTheme.navPaddingLeftRight),
+      borderBottom: "".concat(componentTheme.navBorderWidth, " solid ").concat(componentTheme.navBorderColor),
+      backgroundColor: componentTheme.navBackgroundColor,
+      position: 'sticky',
+      top: 0,
+      width: '100%',
+      boxSizing: 'border-box',
+      zIndex: 4444,
+
+      /**
+       * For MS Edge
+       * When they switch to chromium
+       * check to see if sticky works.
+       */
+      '@supports (-ms-ime-align: auto)': {
+        position: 'relative'
+      }
+    },
+    crumbs: {
+      flex: 1
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/banks/components/NavWrapper/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,
       borders = _ref.borders,
       colors = _ref.colors,
@@ -21,4 +21,7 @@ function generator(_ref) {
     bankIconFontSize: typography.fontSizeLarge,
     bankIconPadding: spacing.xSmall
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/banks/components/SharingModal/ShareList/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"));
 
@@ -39,13 +37,13 @@ var _uiAvatar = require("@instructure/ui-avatar");
 
 var _uiTabs = require("@instructure/ui-tabs");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _index = require("../ContextualIconButton/index.js");
 
 var _uiSimpleSelect = require("@instructure/ui-simple-select");
 
-var _theme = _interopRequireDefault(require("./theme.js"));
+var _styles = _interopRequireDefault(require("./styles.js"));
 
 var _quizCommon = require("@instructure/quiz-common");
 
@@ -53,19 +51,11 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'edByO',
-  template: function template(theme) {
-    return "\n\n.edByO_bqPU{text-decoration:line-through}";
-  },
-  'labelRemoved': 'edByO_bqPU'
-};
-
-var _ref4 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconCoursesLine, {
+var _ref4 = (0, _emotion.jsx)(_uiIcons.IconCoursesLine, {
   size: "small"
 });
 
-var ShareList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var ShareList = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ShareList, _Component);
 
   var _super = (0, _createSuper2.default)(ShareList);
@@ -112,7 +102,7 @@ var ShareList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
         entity: entity,
         isEntityRemoved: isEntityRemoved
       };
-      return /*#__PURE__*/_react.default.createElement(_index.ContextualIconButton, {
+      return (0, _emotion.jsx)(_index.ContextualIconButton, {
         context: context // eslint-disable-next-line react/jsx-no-literals
         ,
         "data-automation": "sdk-unshare-bank-entity-".concat(entity.get('entityId')),
@@ -136,34 +126,34 @@ var ShareList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
         return sb.get('id') == entity.get('id');
       }) || (0, _immutable.Map)();
       var originalPermission = originalEntity.get('permission', _quizCommon.READ_ONLY);
-      return /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Row, {
+      return (0, _emotion.jsx)(_uiGrid.Grid.Row, {
         key: entity.get('entityId'),
         "data-automation": "sdk-shared-with-entity-row"
-      }, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, {
+      }, (0, _emotion.jsx)(_uiGrid.Grid.Col, {
         width: 1
-      }, isCourse ? _ref4 : /*#__PURE__*/_react.default.createElement(_uiAvatar.Avatar, {
+      }, isCourse ? _ref4 : (0, _emotion.jsx)(_uiAvatar.Avatar, {
         name: entity.get('title'),
         src: entity.get('avatar'),
         size: "small"
-      })), /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, null, /*#__PURE__*/_react.default.createElement("span", {
-        className: isEntityRemoved ? styles.labelRemoved : null,
+      })), (0, _emotion.jsx)(_uiGrid.Grid.Col, null, (0, _emotion.jsx)("span", {
+        css: isEntityRemoved ? _this.props.styles.labelRemoved : null,
         "data-automation": isEntityRemoved ? 'sdk-shared-entity-removed' : null
-      }, entity.get('title'))), _this.props.improvedBankSharingEnabled && !isOnlyEntity && /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, {
+      }, entity.get('title'))), _this.props.improvedBankSharingEnabled && !isOnlyEntity && (0, _emotion.jsx)(_uiGrid.Grid.Col, {
         width: "auto"
-      }, /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect, {
+      }, (0, _emotion.jsx)(_uiSimpleSelect.SimpleSelect, {
         onChange: _this.handlePermissionChange(entity),
         value: entity.get('permission') === _quizCommon.REMOVED_ACCESS ? originalPermission : entity.get('permission'),
-        renderLabel: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Access for {entity}', {
+        renderLabel: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Access for {entity}', {
           entity: entity.get('title')
         })),
         disabled: isEntityRemoved || !_this.props.canEdit
-      }, /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect.Option, {
+      }, (0, _emotion.jsx)(_uiSimpleSelect.SimpleSelect.Option, {
         id: "share-list-select-option-can-view",
         value: _quizCommon.READ_ONLY
-      }, (0, _formatMessage.default)('Can view')), /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect.Option, {
+      }, (0, _formatMessage.default)('Can view')), (0, _emotion.jsx)(_uiSimpleSelect.SimpleSelect.Option, {
         id: "share-list-select-option-can-edit",
         value: _quizCommon.CAN_EDIT
-      }, (0, _formatMessage.default)('Can edit')))), /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, {
+      }, (0, _formatMessage.default)('Can edit')))), (0, _emotion.jsx)(_uiGrid.Grid.Col, {
         width: "auto"
       }, !isOnlyEntity && _this.props.canEdit && (_this.props.improvedBankSharingEnabled || !isCourse) && _this.removeButton(entity, isEntityRemoved)));
     };
@@ -175,10 +165,10 @@ var ShareList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
     key: "renderNewEntities",
     value: function renderNewEntities() {
       if (!this.props.newEntities.isEmpty()) {
-        return /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        return (0, _emotion.jsx)(_uiView.View, {
           as: "div",
           margin: "0 0 medium 0"
-        }, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid, {
+        }, (0, _emotion.jsx)(_uiGrid.Grid, {
           vAlign: "middle"
         }, this.props.newEntities.map(this.renderEntity)));
       }
@@ -201,39 +191,39 @@ var ShareList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
       var existingCourses = existingShares.filter(function (s) {
         return s.get('entityType') === _quizCommon.SHARED_WITH_COURSE;
       });
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _emotion.jsx)("div", {
         className: "fs-mask"
-      }, !subAccountBankSharingEnabled && /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, !subAccountBankSharingEnabled && (0, _emotion.jsx)(_uiText.Text, {
         as: "div",
         weight: "bold"
-      }, (0, _formatMessage.default)('Currently shared with')), /*#__PURE__*/_react.default.createElement(_uiView.View, {
+      }, (0, _formatMessage.default)('Currently shared with')), (0, _emotion.jsx)(_uiView.View, {
         as: "div",
         "data-automation": "sdk-shared-bank-user-list"
-      }, !subAccountBankSharingEnabled && this.renderNewEntities(), /*#__PURE__*/_react.default.createElement(_uiTabs.Tabs, {
+      }, !subAccountBankSharingEnabled && this.renderNewEntities(), (0, _emotion.jsx)(_uiTabs.Tabs, {
         onRequestTabChange: this.handleTabChange
-      }, /*#__PURE__*/_react.default.createElement(_uiTabs.Tabs.Panel, {
+      }, (0, _emotion.jsx)(_uiTabs.Tabs.Panel, {
         renderTitle: (0, _formatMessage.default)('People ({ peopleCount })', {
           peopleCount: existingPeople.size
         }),
         isSelected: this.state.selectedTabIndex === 0,
         padding: "large 0 0 0"
-      }, subAccountBankSharingEnabled && this.props.renderSearchSection(_quizCommon.SHARED_WITH_USER), subAccountBankSharingEnabled && /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, subAccountBankSharingEnabled && this.props.renderSearchSection(_quizCommon.SHARED_WITH_USER), subAccountBankSharingEnabled && (0, _emotion.jsx)(_uiText.Text, {
         as: "div",
         weight: "bold",
         lineHeight: "double"
-      }, (0, _formatMessage.default)('Currently shared with')), /*#__PURE__*/_react.default.createElement(_uiGrid.Grid, {
+      }, (0, _formatMessage.default)('Currently shared with')), (0, _emotion.jsx)(_uiGrid.Grid, {
         vAlign: "middle"
-      }, existingPeople.map(this.renderEntity))), (!existingCourses.isEmpty() || subAccountBankSharingEnabled) && /*#__PURE__*/_react.default.createElement(_uiTabs.Tabs.Panel, {
+      }, existingPeople.map(this.renderEntity))), (!existingCourses.isEmpty() || subAccountBankSharingEnabled) && (0, _emotion.jsx)(_uiTabs.Tabs.Panel, {
         renderTitle: (0, _formatMessage.default)('Courses ({ coursesCount })', {
           coursesCount: existingCourses.size
         }),
         isSelected: this.state.selectedTabIndex === 1,
         padding: "large 0 0 0"
-      }, subAccountBankSharingEnabled && this.props.renderSearchSection(_quizCommon.SHARED_WITH_COURSE), subAccountBankSharingEnabled && /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      }, subAccountBankSharingEnabled && this.props.renderSearchSection(_quizCommon.SHARED_WITH_COURSE), subAccountBankSharingEnabled && (0, _emotion.jsx)(_uiText.Text, {
         as: "div",
         weight: "bold",
         lineHeight: "double"
-      }, (0, _formatMessage.default)('Currently shared with')), /*#__PURE__*/_react.default.createElement(_uiGrid.Grid, {
+      }, (0, _formatMessage.default)('Currently shared with')), (0, _emotion.jsx)(_uiGrid.Grid, {
         vAlign: "middle"
       }, existingCourses.map(this.renderEntity))))));
     }
@@ -256,7 +246,9 @@ var ShareList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
     permission: _propTypes.default.string.isRequired,
     id: _propTypes.default.string.isRequired
   })).isRequired,
-  subAccountBankSharingEnabled: _propTypes.default.bool.isRequired
+  subAccountBankSharingEnabled: _propTypes.default.bool.isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   newEntities: (0, _immutable.List)(),
   sharedBanks: (0, _immutable.List)()

package/lib/banks/components/SharingModal/ShareList/styles.js

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

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

@@ -55,7 +55,7 @@ var _uiA11yContent = require("@instructure/ui-a11y-content");
 
 var _uiSimpleSelect = require("@instructure/ui-simple-select");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _ElementsForSelectors = _interopRequireDefault(require("../../../common/util/ElementsForSelectors.js"));
 
@@ -67,31 +67,25 @@ var _asyncSearch = _interopRequireDefault(require("./asyncSearch.js"));
 
 var _Spinner = _interopRequireDefault(require("../../../common/components/shared/spinner/Spinner.js"));
 
+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: 'ccksF',
-  template: function template(theme) {
-    return "\n\n.ccksF_fatK{border-bottom:solid ".concat(theme.separatorBorderWidth || 'inherit', ";border-color:").concat(theme.separatorColor || 'inherit', ";margin:").concat(theme.separatorMargin || 'inherit', " 0;padding:0;width:100%}");
-  },
-  'separator': 'ccksF_fatK'
-};
-
 var noop = function noop() {};
 
-var _ref6 = /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, {
+var _ref6 = (0, _emotion.jsx)(_uiGrid.Grid.Col, {
   width: "auto"
-}, /*#__PURE__*/_react.default.createElement(_uiIcons.IconAdminLine, {
+}, (0, _emotion.jsx)(_uiIcons.IconAdminLine, {
   size: "medium"
 }));
 
-var _ref7 = /*#__PURE__*/_react.default.createElement(_Spinner.default, null);
+var _ref7 = (0, _emotion.jsx)(_Spinner.default, null);
 
-var SharingModalPresenter = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var SharingModalPresenter = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SharingModalPresenter, _Component);
 
   var _super = (0, _createSuper2.default)(SharingModalPresenter);
@@ -415,10 +409,10 @@ var SharingModalPresenter = (_dec = (0, _uiThemeable.themeable)(_theme.default,
 
     _this.renderSearchSection = function (searchType) {
       if (_this.props.bank.canEdit()) {
-        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid, {
+        return (0, _emotion.jsx)(_react.default.Fragment, null, (0, _emotion.jsx)(_uiGrid.Grid, {
           vAlign: "bottom",
           colSpacing: "small"
-        }, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Row, null, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, null, /*#__PURE__*/_react.default.createElement(_asyncSearch.default, {
+        }, (0, _emotion.jsx)(_uiGrid.Grid.Row, null, (0, _emotion.jsx)(_uiGrid.Grid.Col, null, (0, _emotion.jsx)(_asyncSearch.default, {
           getShareableCourses: _this.props.getShareableCourses,
           getShareableUsers: _this.props.getShareableUsers,
           improvedBankSharingEnabled: _this.props.improvedBankSharingEnabled,
@@ -427,27 +421,27 @@ var SharingModalPresenter = (_dec = (0, _uiThemeable.themeable)(_theme.default,
           searchType: searchType,
           selectedOption: _this.state.searchSelection,
           selectionFilter: _this.handleSearchFilter
-        })), _this.props.improvedBankSharingEnabled && /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, {
+        })), _this.props.improvedBankSharingEnabled && (0, _emotion.jsx)(_uiGrid.Grid.Col, {
           width: "auto"
-        }, /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect, {
+        }, (0, _emotion.jsx)(_uiSimpleSelect.SimpleSelect, {
           onChange: _this.handleSearchPermissionChange,
           value: _this.state.searchPermission,
           renderLabel: (0, _formatMessage.default)('Access')
-        }, /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect.Option, {
+        }, (0, _emotion.jsx)(_uiSimpleSelect.SimpleSelect.Option, {
           id: "sharing-modal-search-section-select-option-can-view",
           value: _quizCommon.READ_ONLY
-        }, (0, _formatMessage.default)('Can view')), /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect.Option, {
+        }, (0, _formatMessage.default)('Can view')), (0, _emotion.jsx)(_uiSimpleSelect.SimpleSelect.Option, {
           id: "sharing-modal-search-section-select-option-can-edit",
           value: _quizCommon.CAN_EDIT
-        }, (0, _formatMessage.default)('Can edit')))), /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, {
+        }, (0, _formatMessage.default)('Can edit')))), (0, _emotion.jsx)(_uiGrid.Grid.Col, {
           width: "auto"
-        }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        }, (0, _emotion.jsx)(_uiButtons.Button, {
           "data-automation": "sdk-shared-bank-add-user-button",
           ref: _this.handleShareButtonRef,
           onClick: _this.handleShare,
           color: _this.state.searchSelection.length ? 'success' : 'secondary'
-        }, (0, _formatMessage.default)('Add'))))), /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.separator
+        }, (0, _formatMessage.default)('Add'))))), (0, _emotion.jsx)("div", {
+          css: _this.props.styles.separator
         }));
       }
     };
@@ -496,30 +490,30 @@ var SharingModalPresenter = (_dec = (0, _uiThemeable.themeable)(_theme.default,
           improvedBankSharingEnabled = _this$props2.improvedBankSharingEnabled;
 
       if (improvedBankSharingEnabled && (currentUser === null || currentUser === void 0 ? void 0 : currentUser.bank_admin)) {
-        return /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        return (0, _emotion.jsx)(_uiView.View, {
           as: "div",
           margin: "0 0 medium 0"
-        }, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid, {
+        }, (0, _emotion.jsx)(_uiGrid.Grid, {
           colSpacing: "small"
-        }, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Row, null, _ref6, /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, null, /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        }, (0, _emotion.jsx)(_uiGrid.Grid.Row, null, _ref6, (0, _emotion.jsx)(_uiGrid.Grid.Col, null, (0, _emotion.jsx)(_uiView.View, {
           as: "div",
           padding: "0 0 x-small 0"
-        }, currentUser && currentUser.account_name || (0, _formatMessage.default)('Account')), /*#__PURE__*/_react.default.createElement(_uiCheckbox.Checkbox, {
+        }, currentUser && currentUser.account_name || (0, _formatMessage.default)('Account')), (0, _emotion.jsx)(_uiCheckbox.Checkbox, {
           label: (0, _formatMessage.default)('Share with Institution'),
           variant: "toggle",
           value: "accountPermission",
           checked: this.isSharedWithAccount(),
           onChange: this.toggleAccountShare
-        })), this.isSharedWithAccount() && /*#__PURE__*/_react.default.createElement(_uiGrid.Grid.Col, {
+        })), this.isSharedWithAccount() && (0, _emotion.jsx)(_uiGrid.Grid.Col, {
           width: "auto"
-        }, /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect, {
+        }, (0, _emotion.jsx)(_uiSimpleSelect.SimpleSelect, {
           onChange: this.handleAccountPermissionChange,
           value: this.state.accountPermission,
-          renderLabel: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Access for account'))
-        }, /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect.Option, {
+          renderLabel: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Access for account'))
+        }, (0, _emotion.jsx)(_uiSimpleSelect.SimpleSelect.Option, {
           id: "sharing-modal-account-perm-select-option-can-view",
           value: _quizCommon.READ_ONLY
-        }, (0, _formatMessage.default)('Can view')), /*#__PURE__*/_react.default.createElement(_uiSimpleSelect.SimpleSelect.Option, {
+        }, (0, _formatMessage.default)('Can view')), (0, _emotion.jsx)(_uiSimpleSelect.SimpleSelect.Option, {
           id: "sharing-modal-account-perm-select-option-can-edit",
           value: _quizCommon.CAN_EDIT
         }, (0, _formatMessage.default)('Can edit')))))));
@@ -528,7 +522,7 @@ var SharingModalPresenter = (_dec = (0, _uiThemeable.themeable)(_theme.default,
   }, {
     key: "renderEntitiesSection",
     value: function renderEntitiesSection() {
-      return /*#__PURE__*/_react.default.createElement(_index.default, {
+      return (0, _emotion.jsx)(_index.default, {
         canEdit: this.props.bank.canEdit(),
         entitiesWithChangedPermission: this.state.entitiesWithChangedPermission,
         improvedBankSharingEnabled: this.props.improvedBankSharingEnabled,
@@ -550,19 +544,19 @@ var SharingModalPresenter = (_dec = (0, _uiThemeable.themeable)(_theme.default,
     key: "renderFooter",
     value: function renderFooter() {
       if (this.props.subAccountBankSharingEnabled) {
-        return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        return (0, _emotion.jsx)(_uiButtons.Button, {
           color: "primary",
           margin: "0 x-small 0 0",
           onClick: this.handleDismiss
         }, (0, _formatMessage.default)('Close'));
       }
 
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      return (0, _emotion.jsx)(_react.default.Fragment, null, (0, _emotion.jsx)(_uiButtons.Button, {
         "data-automation": "sdk-shared-bank-cancel-button",
         color: "primary-inverse",
         onClick: this.handleDismiss,
         margin: "0 x-small 0 0"
-      }, (0, _formatMessage.default)('Cancel')), /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      }, (0, _formatMessage.default)('Cancel')), (0, _emotion.jsx)(_uiButtons.Button, {
         "data-automation": "sdk-shared-bank-done-button",
         color: "primary",
         onClick: this.handleSubmit,
@@ -573,19 +567,19 @@ var SharingModalPresenter = (_dec = (0, _uiThemeable.themeable)(_theme.default,
     key: "render",
     value: function render() {
       var subAccountBankSharingEnabled = this.props.subAccountBankSharingEnabled;
-      return /*#__PURE__*/_react.default.createElement(_quizCommon.Modal, {
+      return (0, _emotion.jsx)(_quizCommon.Modal, {
         open: this.props.isOpen,
         onDismiss: this.handleDismiss,
         size: "medium",
         label: (0, _formatMessage.default)('Sharing'),
         shouldCloseOnDocumentClick: true,
         onOpen: this.checkForSharedBanks
-      }, /*#__PURE__*/_react.default.createElement(_quizCommon.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, null, this.props.bank.title), /*#__PURE__*/_react.default.createElement(_uiButtons.CloseButton, {
+      }, (0, _emotion.jsx)(_quizCommon.ModalHeader, null, (0, _emotion.jsx)(_uiHeading.Heading, null, this.props.bank.title), (0, _emotion.jsx)(_uiButtons.CloseButton, {
         onClick: this.handleDismiss,
         placement: "end",
         offset: "medium",
         screenReaderLabel: (0, _formatMessage.default)('Close')
-      })), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalBody, null, !subAccountBankSharingEnabled && this.renderAccountPermissions(), !subAccountBankSharingEnabled && this.renderSearchSection(), this.state.shares.size > 0 ? this.renderEntitiesSection() : _ref7), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalFooter, null, this.renderFooter()));
+      })), (0, _emotion.jsx)(_quizCommon.ModalBody, null, !subAccountBankSharingEnabled && this.renderAccountPermissions(), !subAccountBankSharingEnabled && this.renderSearchSection(), this.state.shares.size > 0 ? this.renderEntitiesSection() : _ref7), (0, _emotion.jsx)(_quizCommon.ModalFooter, null, this.renderFooter()));
     }
   }]);
   SharingModalPresenter.displayName = "SharingModalPresenter";
@@ -622,7 +616,9 @@ var SharingModalPresenter = (_dec = (0, _uiThemeable.themeable)(_theme.default,
   updateBank: _propTypes.default.func.isRequired,
   updateSharedBankPermission: _propTypes.default.func.isRequired,
   updateSharedCount: _propTypes.default.func,
-  withConfirm: _propTypes.default.func.isRequired
+  withConfirm: _propTypes.default.func.isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   bank: null,
   currentUser: null,

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

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    separator: {
+      width: '100%',
+      margin: "".concat(componentTheme.separatorMargin, " 0"),
+      padding: 0,
+      borderBottom: "solid ".concat(componentTheme.separatorBorderWidth),
+      borderColor: componentTheme.separatorColor
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/banks/components/SharingModal/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,
       borders = _ref.borders,
       spacing = _ref.spacing;
@@ -14,4 +14,7 @@ function generator(_ref) {
     separatorBorderWidth: borders.widthSmall,
     separatorMargin: spacing.medium
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;