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

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [20.2.0](https://gerrit.instructure.com/quizzes-ui/compare/v20.1.0...v20.2.0) (2024-01-19)
+
+**Note:** Version bump only for package @instructure/quiz-core
+
+
+
+
+
 # [20.1.0](https://gerrit.instructure.com/quizzes-ui/compare/v20.0.0...v20.1.0) (2024-01-16)
 
 

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

@@ -5,7 +5,8 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
-import React, { Component } from 'react';
+/** @jsx jsx */
+import { Component } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { Children } from '@instructure/ui-prop-types';
@@ -14,23 +15,16 @@ import { CloseButton, Button } from '@instructure/ui-buttons';
 import { Breadcrumb, BreadcrumbLink } from '@instructure/ui-breadcrumb';
 import { IconBankLine } from '@instructure/ui-icons';
 import { View } from '@instructure/ui-view';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx, Global } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
-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'
-};
-import theme from "./theme.js";
-
-var _ref = /*#__PURE__*/React.createElement(IconBankLine, {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+
+var _ref = jsx(IconBankLine, {
   size: "x-small"
 });
 
-var NavWrapper = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var NavWrapper = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(NavWrapper, _Component);
 
   var _super = _createSuper(NavWrapper);
@@ -75,12 +69,12 @@ var NavWrapper = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class
       var _this$props = this.props,
           returnToUrl = _this$props.returnToUrl,
           canvasReferrerLinkText = _this$props.canvasReferrerLinkText;
-      var canvasReferrerLink = returnToUrl && canvasReferrerLinkText && /*#__PURE__*/React.createElement(BreadcrumbLink, {
+      var canvasReferrerLink = returnToUrl && canvasReferrerLinkText && jsx(BreadcrumbLink, {
         key: "Context",
         href: returnToUrl,
         target: "_top"
       }, canvasReferrerLinkText);
-      var banksLinks = /*#__PURE__*/React.createElement(BreadcrumbLink, {
+      var banksLinks = jsx(BreadcrumbLink, {
         ref: this.setItemBanksRef,
         renderIcon: _ref,
         key: "Banks",
@@ -102,11 +96,11 @@ var NavWrapper = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class
           returnToUrl = _this$props2.returnToUrl;
 
       if (!closeTray && returnToUrl) {
-        return /*#__PURE__*/React.createElement(ReturnButton, {
+        return jsx(ReturnButton, {
           returnToUrl: returnToUrl
         });
       } else if (navigateToBuild) {
-        return /*#__PURE__*/React.createElement(Button, {
+        return jsx(Button, {
           onClick: navigateToBuild
         }, t('Return'));
       }
@@ -115,7 +109,7 @@ var NavWrapper = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class
     key: "renderCloseButton",
     value: function renderCloseButton() {
       if (this.props.closeTray) {
-        return /*#__PURE__*/React.createElement(CloseButton, {
+        return jsx(CloseButton, {
           elementRef: this.setCloseButtonRef,
           placement: "start",
           onClick: this.props.closeTray,
@@ -126,11 +120,17 @@ var NavWrapper = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement("div", {
-        className: styles.nav
-      }, this.renderCloseButton(), /*#__PURE__*/React.createElement("div", {
-        className: styles.crumbs
-      }, /*#__PURE__*/React.createElement(Breadcrumb, {
+      return jsx(View, null, jsx(Global, {
+        styles: {
+          'body.tox-fullscreen .nav': {
+            'display': 'none'
+          }
+        }
+      }), jsx("div", {
+        css: this.props.styles.nav
+      }, this.renderCloseButton(), jsx("div", {
+        css: this.props.styles.crumbs
+      }, jsx(Breadcrumb, {
         size: "small",
         label: t('You are here:')
       }, this.renderBreadcrumbLinks())), this.renderReturnButton(), this.props.renderHeaderMenu()));
@@ -147,7 +147,9 @@ var NavWrapper = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class
   renderHeaderMenu: PropTypes.func,
   trayOpen: PropTypes.bool.isRequired,
   returnToUrl: PropTypes.string,
-  canvasReferrerLinkText: PropTypes.string
+  canvasReferrerLinkText: PropTypes.string,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   children: null,
   closeTray: null,

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

@@ -0,0 +1,31 @@
+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
+    }
+  };
+};
+
+export default generateStyle;

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

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       borders = _ref.borders,
       colors = _ref.colors,
@@ -14,4 +14,6 @@ export default function generator(_ref) {
     bankIconFontSize: typography.fontSizeLarge,
     bankIconPadding: spacing.xSmall
   };
-}
+};
+
+export default generateComponentTheme;

package/es/banks/components/SharingModal/ShareList/index.js

@@ -5,7 +5,8 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
-import React, { Component } from 'react';
+/** @jsx jsx */
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { List, Map } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
@@ -16,25 +17,18 @@ import { Grid } from '@instructure/ui-grid';
 import { Text } from '@instructure/ui-text';
 import { Avatar } from '@instructure/ui-avatar';
 import { Tabs } from '@instructure/ui-tabs';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import { ContextualIconButton } from "../ContextualIconButton/index.js";
 import { SimpleSelect } from '@instructure/ui-simple-select';
-var styles = {
-  componentId: 'edByO',
-  template: function template(theme) {
-    return "\n\n.edByO_bqPU{text-decoration:line-through}";
-  },
-  'labelRemoved': 'edByO_bqPU'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
 import { CAN_EDIT, READ_ONLY, REMOVED_ACCESS, SHARED_WITH_USER, SHARED_WITH_COURSE } from '@instructure/quiz-common';
 import t from '@instructure/quiz-i18n/es/format-message';
 
-var _ref4 = /*#__PURE__*/React.createElement(IconCoursesLine, {
+var _ref4 = jsx(IconCoursesLine, {
   size: "small"
 });
 
-export var ShareList = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var ShareList = (_dec = withStyle(generateStyle, null), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(ShareList, _Component);
 
   var _super = _createSuper(ShareList);
@@ -81,7 +75,7 @@ export var ShareList = (_dec = themeable(theme, styles), _dec(_class = (_temp =
         entity: entity,
         isEntityRemoved: isEntityRemoved
       };
-      return /*#__PURE__*/React.createElement(ContextualIconButton, {
+      return jsx(ContextualIconButton, {
         context: context // eslint-disable-next-line react/jsx-no-literals
         ,
         "data-automation": "sdk-unshare-bank-entity-".concat(entity.get('entityId')),
@@ -103,34 +97,34 @@ export var ShareList = (_dec = themeable(theme, styles), _dec(_class = (_temp =
         return sb.get('id') == entity.get('id');
       }) || Map();
       var originalPermission = originalEntity.get('permission', READ_ONLY);
-      return /*#__PURE__*/React.createElement(Grid.Row, {
+      return jsx(Grid.Row, {
         key: entity.get('entityId'),
         "data-automation": "sdk-shared-with-entity-row"
-      }, /*#__PURE__*/React.createElement(Grid.Col, {
+      }, jsx(Grid.Col, {
         width: 1
-      }, isCourse ? _ref4 : /*#__PURE__*/React.createElement(Avatar, {
+      }, isCourse ? _ref4 : jsx(Avatar, {
         name: entity.get('title'),
         src: entity.get('avatar'),
         size: "small"
-      })), /*#__PURE__*/React.createElement(Grid.Col, null, /*#__PURE__*/React.createElement("span", {
-        className: isEntityRemoved ? styles.labelRemoved : null,
+      })), jsx(Grid.Col, null, 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.createElement(Grid.Col, {
+      }, entity.get('title'))), _this.props.improvedBankSharingEnabled && !isOnlyEntity && jsx(Grid.Col, {
         width: "auto"
-      }, /*#__PURE__*/React.createElement(SimpleSelect, {
+      }, jsx(SimpleSelect, {
         onChange: _this.handlePermissionChange(entity),
         value: entity.get('permission') === REMOVED_ACCESS ? originalPermission : entity.get('permission'),
-        renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Access for {entity}', {
+        renderLabel: jsx(ScreenReaderContent, null, t('Access for {entity}', {
           entity: entity.get('title')
         })),
         disabled: isEntityRemoved || !_this.props.canEdit
-      }, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+      }, jsx(SimpleSelect.Option, {
         id: "share-list-select-option-can-view",
         value: READ_ONLY
-      }, t('Can view')), /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+      }, t('Can view')), jsx(SimpleSelect.Option, {
         id: "share-list-select-option-can-edit",
         value: CAN_EDIT
-      }, t('Can edit')))), /*#__PURE__*/React.createElement(Grid.Col, {
+      }, t('Can edit')))), jsx(Grid.Col, {
         width: "auto"
       }, !isOnlyEntity && _this.props.canEdit && (_this.props.improvedBankSharingEnabled || !isCourse) && _this.removeButton(entity, isEntityRemoved)));
     };
@@ -142,10 +136,10 @@ export var ShareList = (_dec = themeable(theme, styles), _dec(_class = (_temp =
     key: "renderNewEntities",
     value: function renderNewEntities() {
       if (!this.props.newEntities.isEmpty()) {
-        return /*#__PURE__*/React.createElement(View, {
+        return jsx(View, {
           as: "div",
           margin: "0 0 medium 0"
-        }, /*#__PURE__*/React.createElement(Grid, {
+        }, jsx(Grid, {
           vAlign: "middle"
         }, this.props.newEntities.map(this.renderEntity)));
       }
@@ -168,39 +162,39 @@ export var ShareList = (_dec = themeable(theme, styles), _dec(_class = (_temp =
       var existingCourses = existingShares.filter(function (s) {
         return s.get('entityType') === SHARED_WITH_COURSE;
       });
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         className: "fs-mask"
-      }, !subAccountBankSharingEnabled && /*#__PURE__*/React.createElement(Text, {
+      }, !subAccountBankSharingEnabled && jsx(Text, {
         as: "div",
         weight: "bold"
-      }, t('Currently shared with')), /*#__PURE__*/React.createElement(View, {
+      }, t('Currently shared with')), jsx(View, {
         as: "div",
         "data-automation": "sdk-shared-bank-user-list"
-      }, !subAccountBankSharingEnabled && this.renderNewEntities(), /*#__PURE__*/React.createElement(Tabs, {
+      }, !subAccountBankSharingEnabled && this.renderNewEntities(), jsx(Tabs, {
         onRequestTabChange: this.handleTabChange
-      }, /*#__PURE__*/React.createElement(Tabs.Panel, {
+      }, jsx(Tabs.Panel, {
         renderTitle: t('People ({ peopleCount })', {
           peopleCount: existingPeople.size
         }),
         isSelected: this.state.selectedTabIndex === 0,
         padding: "large 0 0 0"
-      }, subAccountBankSharingEnabled && this.props.renderSearchSection(SHARED_WITH_USER), subAccountBankSharingEnabled && /*#__PURE__*/React.createElement(Text, {
+      }, subAccountBankSharingEnabled && this.props.renderSearchSection(SHARED_WITH_USER), subAccountBankSharingEnabled && jsx(Text, {
         as: "div",
         weight: "bold",
         lineHeight: "double"
-      }, t('Currently shared with')), /*#__PURE__*/React.createElement(Grid, {
+      }, t('Currently shared with')), jsx(Grid, {
         vAlign: "middle"
-      }, existingPeople.map(this.renderEntity))), (!existingCourses.isEmpty() || subAccountBankSharingEnabled) && /*#__PURE__*/React.createElement(Tabs.Panel, {
+      }, existingPeople.map(this.renderEntity))), (!existingCourses.isEmpty() || subAccountBankSharingEnabled) && jsx(Tabs.Panel, {
         renderTitle: t('Courses ({ coursesCount })', {
           coursesCount: existingCourses.size
         }),
         isSelected: this.state.selectedTabIndex === 1,
         padding: "large 0 0 0"
-      }, subAccountBankSharingEnabled && this.props.renderSearchSection(SHARED_WITH_COURSE), subAccountBankSharingEnabled && /*#__PURE__*/React.createElement(Text, {
+      }, subAccountBankSharingEnabled && this.props.renderSearchSection(SHARED_WITH_COURSE), subAccountBankSharingEnabled && jsx(Text, {
         as: "div",
         weight: "bold",
         lineHeight: "double"
-      }, t('Currently shared with')), /*#__PURE__*/React.createElement(Grid, {
+      }, t('Currently shared with')), jsx(Grid, {
         vAlign: "middle"
       }, existingCourses.map(this.renderEntity))))));
     }
@@ -224,7 +218,9 @@ export var ShareList = (_dec = themeable(theme, styles), _dec(_class = (_temp =
     permission: PropTypes.string.isRequired,
     id: PropTypes.string.isRequired
   })).isRequired,
-  subAccountBankSharingEnabled: PropTypes.bool.isRequired
+  subAccountBankSharingEnabled: PropTypes.bool.isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   newEntities: List(),
   sharedBanks: List()

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

@@ -0,0 +1,9 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    labelRemoved: {
+      textDecoration: 'line-through'
+    }
+  };
+};
+
+export default generateStyle;

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

@@ -10,6 +10,9 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
+
+/* eslint-disable-next-line no-unused-vars*/
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { List, Map } from 'immutable';
@@ -24,33 +27,27 @@ import { View } from '@instructure/ui-view';
 import { Grid } from '@instructure/ui-grid';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { SimpleSelect } from '@instructure/ui-simple-select';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import elementsForSelectors from "../../../common/util/ElementsForSelectors.js";
 import CustomPropTypes from "../../../common/util/CustomPropTypes.js";
 import ShareList from "./ShareList/index.js";
 import AsyncSearch from "./asyncSearch.js";
 import Spinner from "../../../common/components/shared/spinner/Spinner.js";
-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'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 import t from '@instructure/quiz-i18n/es/format-message';
 
 var noop = function noop() {};
 
-var _ref6 = /*#__PURE__*/React.createElement(Grid.Col, {
+var _ref6 = jsx(Grid.Col, {
   width: "auto"
-}, /*#__PURE__*/React.createElement(IconAdminLine, {
+}, jsx(IconAdminLine, {
   size: "medium"
 }));
 
-var _ref7 = /*#__PURE__*/React.createElement(Spinner, null);
+var _ref7 = jsx(Spinner, null);
 
-export var SharingModalPresenter = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var SharingModalPresenter = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(SharingModalPresenter, _Component);
 
   var _super = _createSuper(SharingModalPresenter);
@@ -374,10 +371,10 @@ export var SharingModalPresenter = (_dec = themeable(theme, styles), _dec(_class
 
     _this.renderSearchSection = function (searchType) {
       if (_this.props.bank.canEdit()) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid, {
+        return jsx(React.Fragment, null, jsx(Grid, {
           vAlign: "bottom",
           colSpacing: "small"
-        }, /*#__PURE__*/React.createElement(Grid.Row, null, /*#__PURE__*/React.createElement(Grid.Col, null, /*#__PURE__*/React.createElement(AsyncSearch, {
+        }, jsx(Grid.Row, null, jsx(Grid.Col, null, jsx(AsyncSearch, {
           getShareableCourses: _this.props.getShareableCourses,
           getShareableUsers: _this.props.getShareableUsers,
           improvedBankSharingEnabled: _this.props.improvedBankSharingEnabled,
@@ -386,27 +383,27 @@ export var SharingModalPresenter = (_dec = themeable(theme, styles), _dec(_class
           searchType: searchType,
           selectedOption: _this.state.searchSelection,
           selectionFilter: _this.handleSearchFilter
-        })), _this.props.improvedBankSharingEnabled && /*#__PURE__*/React.createElement(Grid.Col, {
+        })), _this.props.improvedBankSharingEnabled && jsx(Grid.Col, {
           width: "auto"
-        }, /*#__PURE__*/React.createElement(SimpleSelect, {
+        }, jsx(SimpleSelect, {
           onChange: _this.handleSearchPermissionChange,
           value: _this.state.searchPermission,
           renderLabel: t('Access')
-        }, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+        }, jsx(SimpleSelect.Option, {
           id: "sharing-modal-search-section-select-option-can-view",
           value: READ_ONLY
-        }, t('Can view')), /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+        }, t('Can view')), jsx(SimpleSelect.Option, {
           id: "sharing-modal-search-section-select-option-can-edit",
           value: CAN_EDIT
-        }, t('Can edit')))), /*#__PURE__*/React.createElement(Grid.Col, {
+        }, t('Can edit')))), jsx(Grid.Col, {
           width: "auto"
-        }, /*#__PURE__*/React.createElement(Button, {
+        }, jsx(Button, {
           "data-automation": "sdk-shared-bank-add-user-button",
           ref: _this.handleShareButtonRef,
           onClick: _this.handleShare,
           color: _this.state.searchSelection.length ? 'success' : 'secondary'
-        }, t('Add'))))), /*#__PURE__*/React.createElement("div", {
-          className: styles.separator
+        }, t('Add'))))), jsx("div", {
+          css: _this.props.styles.separator
         }));
       }
     };
@@ -455,30 +452,30 @@ export var SharingModalPresenter = (_dec = themeable(theme, styles), _dec(_class
           improvedBankSharingEnabled = _this$props2.improvedBankSharingEnabled;
 
       if (improvedBankSharingEnabled && (currentUser === null || currentUser === void 0 ? void 0 : currentUser.bank_admin)) {
-        return /*#__PURE__*/React.createElement(View, {
+        return jsx(View, {
           as: "div",
           margin: "0 0 medium 0"
-        }, /*#__PURE__*/React.createElement(Grid, {
+        }, jsx(Grid, {
           colSpacing: "small"
-        }, /*#__PURE__*/React.createElement(Grid.Row, null, _ref6, /*#__PURE__*/React.createElement(Grid.Col, null, /*#__PURE__*/React.createElement(View, {
+        }, jsx(Grid.Row, null, _ref6, jsx(Grid.Col, null, jsx(View, {
           as: "div",
           padding: "0 0 x-small 0"
-        }, currentUser && currentUser.account_name || t('Account')), /*#__PURE__*/React.createElement(Checkbox, {
+        }, currentUser && currentUser.account_name || t('Account')), jsx(Checkbox, {
           label: t('Share with Institution'),
           variant: "toggle",
           value: "accountPermission",
           checked: this.isSharedWithAccount(),
           onChange: this.toggleAccountShare
-        })), this.isSharedWithAccount() && /*#__PURE__*/React.createElement(Grid.Col, {
+        })), this.isSharedWithAccount() && jsx(Grid.Col, {
           width: "auto"
-        }, /*#__PURE__*/React.createElement(SimpleSelect, {
+        }, jsx(SimpleSelect, {
           onChange: this.handleAccountPermissionChange,
           value: this.state.accountPermission,
-          renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Access for account'))
-        }, /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+          renderLabel: jsx(ScreenReaderContent, null, t('Access for account'))
+        }, jsx(SimpleSelect.Option, {
           id: "sharing-modal-account-perm-select-option-can-view",
           value: READ_ONLY
-        }, t('Can view')), /*#__PURE__*/React.createElement(SimpleSelect.Option, {
+        }, t('Can view')), jsx(SimpleSelect.Option, {
           id: "sharing-modal-account-perm-select-option-can-edit",
           value: CAN_EDIT
         }, t('Can edit')))))));
@@ -487,7 +484,7 @@ export var SharingModalPresenter = (_dec = themeable(theme, styles), _dec(_class
   }, {
     key: "renderEntitiesSection",
     value: function renderEntitiesSection() {
-      return /*#__PURE__*/React.createElement(ShareList, {
+      return jsx(ShareList, {
         canEdit: this.props.bank.canEdit(),
         entitiesWithChangedPermission: this.state.entitiesWithChangedPermission,
         improvedBankSharingEnabled: this.props.improvedBankSharingEnabled,
@@ -509,19 +506,19 @@ export var SharingModalPresenter = (_dec = themeable(theme, styles), _dec(_class
     key: "renderFooter",
     value: function renderFooter() {
       if (this.props.subAccountBankSharingEnabled) {
-        return /*#__PURE__*/React.createElement(Button, {
+        return jsx(Button, {
           color: "primary",
           margin: "0 x-small 0 0",
           onClick: this.handleDismiss
         }, t('Close'));
       }
 
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      return jsx(React.Fragment, null, jsx(Button, {
         "data-automation": "sdk-shared-bank-cancel-button",
         color: "primary-inverse",
         onClick: this.handleDismiss,
         margin: "0 x-small 0 0"
-      }, t('Cancel')), /*#__PURE__*/React.createElement(Button, {
+      }, t('Cancel')), jsx(Button, {
         "data-automation": "sdk-shared-bank-done-button",
         color: "primary",
         onClick: this.handleSubmit,
@@ -532,19 +529,19 @@ export var SharingModalPresenter = (_dec = themeable(theme, styles), _dec(_class
     key: "render",
     value: function render() {
       var subAccountBankSharingEnabled = this.props.subAccountBankSharingEnabled;
-      return /*#__PURE__*/React.createElement(Modal, {
+      return jsx(Modal, {
         open: this.props.isOpen,
         onDismiss: this.handleDismiss,
         size: "medium",
         label: t('Sharing'),
         shouldCloseOnDocumentClick: true,
         onOpen: this.checkForSharedBanks
-      }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(Heading, null, this.props.bank.title), /*#__PURE__*/React.createElement(CloseButton, {
+      }, jsx(ModalHeader, null, jsx(Heading, null, this.props.bank.title), jsx(CloseButton, {
         onClick: this.handleDismiss,
         placement: "end",
         offset: "medium",
         screenReaderLabel: t('Close')
-      })), /*#__PURE__*/React.createElement(ModalBody, null, !subAccountBankSharingEnabled && this.renderAccountPermissions(), !subAccountBankSharingEnabled && this.renderSearchSection(), this.state.shares.size > 0 ? this.renderEntitiesSection() : _ref7), /*#__PURE__*/React.createElement(ModalFooter, null, this.renderFooter()));
+      })), jsx(ModalBody, null, !subAccountBankSharingEnabled && this.renderAccountPermissions(), !subAccountBankSharingEnabled && this.renderSearchSection(), this.state.shares.size > 0 ? this.renderEntitiesSection() : _ref7), jsx(ModalFooter, null, this.renderFooter()));
     }
   }]);
 
@@ -582,7 +579,9 @@ export var SharingModalPresenter = (_dec = themeable(theme, styles), _dec(_class
   updateBank: PropTypes.func.isRequired,
   updateSharedBankPermission: PropTypes.func.isRequired,
   updateSharedCount: PropTypes.func,
-  withConfirm: PropTypes.func.isRequired
+  withConfirm: PropTypes.func.isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   bank: null,
   currentUser: null,

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

@@ -0,0 +1,13 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    separator: {
+      width: '100%',
+      margin: "".concat(componentTheme.separatorMargin, " 0"),
+      padding: 0,
+      borderBottom: "solid ".concat(componentTheme.separatorBorderWidth),
+      borderColor: componentTheme.separatorColor
+    }
+  };
+};
+
+export default generateStyle;

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

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
       borders = _ref.borders,
       spacing = _ref.spacing;
@@ -7,4 +7,6 @@ export default function generator(_ref) {
     separatorBorderWidth: borders.widthSmall,
     separatorMargin: spacing.medium
   };
-}
+};
+
+export default generateComponentTheme;