@instructure/quiz-core 20.1.1-rc.3 → 20.1.1-rc.5

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

@@ -5,28 +5,22 @@ 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 { Button, CloseButton } from '@instructure/ui-buttons';
 import { Checkbox } from '@instructure/ui-checkbox';
 import { View } from '@instructure/ui-view';
 import { TextInput } from '@instructure/ui-text-input';
 import { Heading } from '@instructure/ui-heading';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import Bank from "../../../common/records/Bank.js";
 import { toErrors } from "../../../common/util/instUIMessages.js";
 import { Modal, ModalHeader, ModalBody, ModalFooter, XSMALL_SIDE_MARGIN } from '@instructure/quiz-common';
-var styles = {
-  componentId: 'fTWio',
-  template: function template(theme) {
-    return "\n\n.fTWio_detV{flex:1 1 auto;font-size:".concat(theme.bankNameInputFontSize || 'inherit', ";padding:").concat(theme.bankNamePadding || 'inherit', ";text-overflow:ellipsis;white-space:nowrap}\n\n.fTWio_rOsj{padding:").concat(theme.bankNameLabelPadding || 'inherit', "}");
-  },
-  'bankNameInput': 'fTWio_detV',
-  'bankNameLabel': 'fTWio_rOsj'
-};
-import theme from "./theme.js";
-export var CreateBankModal = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var CreateBankModal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(CreateBankModal, _Component);
 
   var _super = _createSuper(CreateBankModal);
@@ -103,16 +97,15 @@ export var CreateBankModal = (_dec = themeable(theme, styles), _dec(_class = (_t
   _createClass(CreateBankModal, [{
     key: "cancelButton",
     value: function cancelButton() {
-      return /*#__PURE__*/React.createElement(Button, {
+      return jsx(Button, {
         onClick: this.closeAction,
-        className: styles.footerButtonWrapper,
         margin: XSMALL_SIDE_MARGIN
       }, t('Cancel'));
     }
   }, {
     key: "createBankButton",
     value: function createBankButton() {
-      return /*#__PURE__*/React.createElement(Button, {
+      return jsx(Button, {
         type: "button",
         color: "primary",
         onClick: this.continueAction,
@@ -123,13 +116,13 @@ export var CreateBankModal = (_dec = themeable(theme, styles), _dec(_class = (_t
   }, {
     key: "renderContent",
     value: function renderContent() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.bankNameInput
-      }, /*#__PURE__*/React.createElement(TextInput, {
+      return jsx("div", {
+        css: this.props.styles.bankNameInput
+      }, jsx(TextInput, {
         messages: this.getErrors(),
         onChange: this.onNameChange,
-        renderLabel: /*#__PURE__*/React.createElement("div", {
-          className: styles.bankNameLabel
+        renderLabel: jsx("div", {
+          css: this.props.styles.bankNameLabel
         }, t('Bank Name')),
         type: "text",
         placeholder: t('Enter a name...'),
@@ -148,10 +141,10 @@ export var CreateBankModal = (_dec = themeable(theme, styles), _dec(_class = (_t
       var label = t('Share with { courseName }', {
         courseName: this.props.itemBanksScope.title
       });
-      return /*#__PURE__*/React.createElement(View, {
+      return jsx(View, {
         margin: "medium 0 0 0",
         as: "div"
-      }, /*#__PURE__*/React.createElement(Checkbox, {
+      }, jsx(Checkbox, {
         label: label,
         checked: this.state.shareWithCourse,
         onChange: this.toggleCheckbox
@@ -160,21 +153,21 @@ export var CreateBankModal = (_dec = themeable(theme, styles), _dec(_class = (_t
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(Modal, {
+      return jsx(Modal, {
         open: this.props.modalOpen,
         onDismiss: this.closeAction,
         size: "small",
         label: t('Item Bank'),
         "data-automation": "sdk-create-bank-modal"
-      }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(Heading, {
+      }, jsx(ModalHeader, null, jsx(Heading, {
         level: "reset",
         as: "h2"
-      }, t('New Item Bank')), /*#__PURE__*/React.createElement(CloseButton, {
+      }, t('New Item Bank')), jsx(CloseButton, {
         onClick: this.closeAction,
         placement: "end",
         offset: "medium",
         screenReaderLabel: t('Close')
-      })), /*#__PURE__*/React.createElement(ModalBody, null, this.renderContent()), /*#__PURE__*/React.createElement(ModalFooter, null, this.cancelButton(), this.createBankButton()));
+      })), jsx(ModalBody, null, this.renderContent()), jsx(ModalFooter, null, this.cancelButton(), this.createBankButton()));
     }
   }]);
 
@@ -199,7 +192,9 @@ export var CreateBankModal = (_dec = themeable(theme, styles), _dec(_class = (_t
     type: PropTypes.string,
     uuid: PropTypes.string,
     title: PropTypes.string
-  })
+  }),
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   displayError: false,
   modalTrigger: null,

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

@@ -0,0 +1,16 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    bankNameInput: {
+      flex: '1 1 auto',
+      fontSize: componentTheme.bankNameInputFontSize,
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      padding: componentTheme.bankNamePadding
+    },
+    bankNameLabel: {
+      padding: componentTheme.bankNameLabelPadding
+    }
+  };
+};
+
+export default generateStyle;

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

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var typography = _ref.typography,
       spacing = _ref.spacing;
   return {
@@ -6,4 +6,6 @@ export default function generator(_ref) {
     bankNamePadding: spacing.xSmall,
     bankNameLabelPadding: spacing.xSmall
   };
-}
+};
+
+export default generateComponentTheme;

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

@@ -5,25 +5,20 @@ 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 { Button, CloseButton } from '@instructure/ui-buttons';
 import { TextInput } from '@instructure/ui-text-input';
 import { Heading } from '@instructure/ui-heading';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { toErrors } from "../../../common/util/instUIMessages.js";
 import { Modal, ModalHeader, ModalBody, ModalFooter, XSMALL_SIDE_MARGIN } from '@instructure/quiz-common';
 import Bank from "../../../common/records/Bank.js";
-var styles = {
-  componentId: 'cvAov',
-  template: function template(theme) {
-    return "\n\n.cvAov_detV{flex:1 1 auto;font-size:".concat(theme.bankNameInputFontSize || 'inherit', ";padding:0 ").concat(theme.bankNameInputFontSize || 'inherit', ";text-overflow:ellipsis;white-space:nowrap}");
-  },
-  'bankNameInput': 'cvAov_detV'
-};
-import theme from "./theme.js";
-export var EditBankModal = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var EditBankModal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(EditBankModal, _Component);
 
   var _super = _createSuper(EditBankModal);
@@ -81,16 +76,15 @@ export var EditBankModal = (_dec = themeable(theme, styles), _dec(_class = (_tem
   _createClass(EditBankModal, [{
     key: "renderCancelButton",
     value: function renderCancelButton() {
-      return /*#__PURE__*/React.createElement(Button, {
+      return jsx(Button, {
         onClick: this.closeAction,
-        className: styles.footerButtonWrapper,
         margin: XSMALL_SIDE_MARGIN
       }, t('Cancel'));
     }
   }, {
     key: "renderSaveButton",
     value: function renderSaveButton() {
-      return /*#__PURE__*/React.createElement(Button, {
+      return jsx(Button, {
         type: "button",
         color: "primary",
         onClick: this.continueAction,
@@ -101,15 +95,13 @@ export var EditBankModal = (_dec = themeable(theme, styles), _dec(_class = (_tem
   }, {
     key: "renderContent",
     value: function renderContent() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.bankNameInput
-      }, /*#__PURE__*/React.createElement(TextInput, {
+      return jsx("div", {
+        css: this.props.styles.bankNameInput
+      }, jsx(TextInput, {
         value: this.props.workingBank.title,
         messages: this.getErrors(),
         onChange: this.onNameChange,
-        renderLabel: /*#__PURE__*/React.createElement("div", {
-          className: styles.bankNameLabel
-        }, t('Bank Name')),
+        renderLabel: jsx("div", null, t('Bank Name')),
         type: "text",
         placeholder: t('Enter a name...'),
         "data-automation": "sdk-edit-bank-name-textinput"
@@ -118,21 +110,21 @@ export var EditBankModal = (_dec = themeable(theme, styles), _dec(_class = (_tem
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(Modal, {
+      return jsx(Modal, {
         open: this.props.modalOpen,
         onDismiss: this.closeAction,
         size: "small",
         label: t('Item Bank'),
         "data-automation": "sdk-edit-bank-modal"
-      }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(Heading, {
+      }, jsx(ModalHeader, null, jsx(Heading, {
         level: "reset",
         as: "h2"
-      }, t('Edit Item Bank')), /*#__PURE__*/React.createElement(CloseButton, {
+      }, t('Edit Item Bank')), jsx(CloseButton, {
         onClick: this.closeAction,
         placement: "end",
         offset: "medium",
         screenReaderLabel: t('Close')
-      })), /*#__PURE__*/React.createElement(ModalBody, null, this.renderContent()), /*#__PURE__*/React.createElement(ModalFooter, null, this.renderCancelButton(), this.renderSaveButton()));
+      })), jsx(ModalBody, null, this.renderContent()), jsx(ModalFooter, null, this.renderCancelButton(), this.renderSaveButton()));
     }
   }]);
 
@@ -149,7 +141,9 @@ export var EditBankModal = (_dec = themeable(theme, styles), _dec(_class = (_tem
   clearModifications: PropTypes.func.isRequired,
   showError: PropTypes.func.isRequired,
   hideError: PropTypes.func.isRequired,
-  closeModal: PropTypes.func.isRequired
+  closeModal: PropTypes.func.isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   displayError: false,
   modalTrigger: null

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

@@ -0,0 +1,13 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    bankNameInput: {
+      flex: '1 1 auto',
+      fontSize: componentTheme.bankNameInputFontSize,
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      padding: "0 ".concat(componentTheme.bankNameInputFontSize)
+    }
+  };
+};
+
+export default generateStyle;

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

@@ -1,8 +1,10 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var typography = _ref.typography,
       spacing = _ref.spacing;
   return {
     bankNameInputFontSize: typography.fontSizeMedium,
     bankNameInputPadding: spacing.xSmall
   };
-}
+};
+
+export default generateComponentTheme;

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

@@ -5,25 +5,20 @@ 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 ImmutablePropTypes from 'react-immutable-proptypes';
 import { Menu } from '@instructure/ui-menu';
 import { IconButton } from '@instructure/ui-buttons';
 import { IconMoreSolid, IconImportLine } from '@instructure/ui-icons';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import QTIImportModal from "../../../building/components/QTIImportModal/index.js";
 import { PARENT_TYPE_BANK } from '@instructure/quiz-common';
-var styles = {
-  componentId: 'HITck',
-  template: function template(theme) {
-    return "\n\n.HITck_cLWx{font-size:".concat(theme.menuIconFontSize || 'inherit', ";margin-right:").concat(theme.menuIconMargin || 'inherit', ";vertical-align:middle}");
-  },
-  'menuIcon': 'HITck_cLWx'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 import t from '@instructure/quiz-i18n/es/format-message';
-export var HeaderMenu = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var HeaderMenu = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(HeaderMenu, _Component);
 
   var _super = _createSuper(HeaderMenu);
@@ -37,19 +32,19 @@ export var HeaderMenu = (_dec = themeable(theme, styles), _dec(_class = (_temp =
   _createClass(HeaderMenu, [{
     key: "renderMenu",
     value: function renderMenu() {
-      return /*#__PURE__*/React.createElement(Menu, {
-        trigger: /*#__PURE__*/React.createElement(IconButton, {
+      return jsx(Menu, {
+        trigger: jsx(IconButton, {
           renderIcon: IconMoreSolid,
           withBackground: false,
           withBorder: false,
           screenReaderLabel: t('More Item Banking Actions')
         })
-      }, /*#__PURE__*/React.createElement(Menu.Item, {
+      }, jsx(Menu.Item, {
         key: "import",
         disabled: !this.props.bank.canImport(),
         onSelect: this.props.openImportModal
-      }, /*#__PURE__*/React.createElement(IconImportLine, {
-        className: styles.menuIcon,
+      }, jsx(IconImportLine, {
+        css: this.props.styles.menuIcon,
         "data-automation": "sdk-headermenu-import-content"
       }), t('Import Content')));
     }
@@ -57,7 +52,7 @@ export var HeaderMenu = (_dec = themeable(theme, styles), _dec(_class = (_temp =
     key: "render",
     value: function render() {
       var bank = this.props.bank;
-      return /*#__PURE__*/React.createElement("div", null, this.renderMenu(), /*#__PURE__*/React.createElement(QTIImportModal, {
+      return jsx("div", null, this.renderMenu(), jsx(QTIImportModal, {
         parentId: bank.id,
         parentType: PARENT_TYPE_BANK,
         qtiImport: bank.getLatestImport(),
@@ -70,6 +65,8 @@ export var HeaderMenu = (_dec = themeable(theme, styles), _dec(_class = (_temp =
   return HeaderMenu;
 }(Component), _class2.propTypes = {
   openImportModal: PropTypes.func.isRequired,
-  bank: ImmutablePropTypes.record.isRequired
+  bank: ImmutablePropTypes.record.isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: PropTypes.object
 }, _temp)) || _class);
 export default HeaderMenu;

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

@@ -0,0 +1,11 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    menuIcon: {
+      verticalAlign: 'middle',
+      marginRight: componentTheme.menuIconMargin,
+      fontSize: componentTheme.menuIconFontSize
+    }
+  };
+};
+
+export default generateStyle;

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

@@ -1,8 +1,10 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       typography = _ref.typography;
   return {
     menuIconMargin: spacing.xSmall,
     menuIconFontSize: typography.fontSizeLarge
   };
-}
+};
+
+export default generateComponentTheme;

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;