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

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/lib/banks/components/CreateBankModal/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,7 +29,7 @@ var _uiTextInput = require("@instructure/ui-text-input");
 
 var _uiHeading = require("@instructure/ui-heading");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
@@ -41,19 +39,13 @@ var _instUIMessages = require("../../../common/util/instUIMessages.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: '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'
-};
-var CreateBankModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var CreateBankModal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CreateBankModal, _Component);
 
   var _super = (0, _createSuper2.default)(CreateBankModal);
@@ -130,16 +122,15 @@ var CreateBankModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   (0, _createClass2.default)(CreateBankModal, [{
     key: "cancelButton",
     value: function cancelButton() {
-      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      return (0, _emotion.jsx)(_uiButtons.Button, {
         onClick: this.closeAction,
-        className: styles.footerButtonWrapper,
         margin: _quizCommon.XSMALL_SIDE_MARGIN
       }, (0, _formatMessage.default)('Cancel'));
     }
   }, {
     key: "createBankButton",
     value: function createBankButton() {
-      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      return (0, _emotion.jsx)(_uiButtons.Button, {
         type: "button",
         color: "primary",
         onClick: this.continueAction,
@@ -150,13 +141,13 @@ var CreateBankModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   }, {
     key: "renderContent",
     value: function renderContent() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.bankNameInput
-      }, /*#__PURE__*/_react.default.createElement(_uiTextInput.TextInput, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.bankNameInput
+      }, (0, _emotion.jsx)(_uiTextInput.TextInput, {
         messages: this.getErrors(),
         onChange: this.onNameChange,
-        renderLabel: /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.bankNameLabel
+        renderLabel: (0, _emotion.jsx)("div", {
+          css: this.props.styles.bankNameLabel
         }, (0, _formatMessage.default)('Bank Name')),
         type: "text",
         placeholder: (0, _formatMessage.default)('Enter a name...'),
@@ -175,10 +166,10 @@ var CreateBankModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       var label = (0, _formatMessage.default)('Share with { courseName }', {
         courseName: this.props.itemBanksScope.title
       });
-      return /*#__PURE__*/_react.default.createElement(_uiView.View, {
+      return (0, _emotion.jsx)(_uiView.View, {
         margin: "medium 0 0 0",
         as: "div"
-      }, /*#__PURE__*/_react.default.createElement(_uiCheckbox.Checkbox, {
+      }, (0, _emotion.jsx)(_uiCheckbox.Checkbox, {
         label: label,
         checked: this.state.shareWithCourse,
         onChange: this.toggleCheckbox
@@ -187,21 +178,21 @@ var CreateBankModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_quizCommon.Modal, {
+      return (0, _emotion.jsx)(_quizCommon.Modal, {
         open: this.props.modalOpen,
         onDismiss: this.closeAction,
         size: "small",
         label: (0, _formatMessage.default)('Item Bank'),
         "data-automation": "sdk-create-bank-modal"
-      }, /*#__PURE__*/_react.default.createElement(_quizCommon.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+      }, (0, _emotion.jsx)(_quizCommon.ModalHeader, null, (0, _emotion.jsx)(_uiHeading.Heading, {
         level: "reset",
         as: "h2"
-      }, (0, _formatMessage.default)('New Item Bank')), /*#__PURE__*/_react.default.createElement(_uiButtons.CloseButton, {
+      }, (0, _formatMessage.default)('New Item Bank')), (0, _emotion.jsx)(_uiButtons.CloseButton, {
         onClick: this.closeAction,
         placement: "end",
         offset: "medium",
         screenReaderLabel: (0, _formatMessage.default)('Close')
-      })), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalBody, null, this.renderContent()), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalFooter, null, this.cancelButton(), this.createBankButton()));
+      })), (0, _emotion.jsx)(_quizCommon.ModalBody, null, this.renderContent()), (0, _emotion.jsx)(_quizCommon.ModalFooter, null, this.cancelButton(), this.createBankButton()));
     }
   }]);
   CreateBankModal.displayName = "CreateBankModal";
@@ -225,7 +216,9 @@ var CreateBankModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
     type: _propTypes.default.string,
     uuid: _propTypes.default.string,
     title: _propTypes.default.string
-  })
+  }),
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   displayError: false,
   modalTrigger: null,

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+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
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/banks/components/CreateBankModal/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 typography = _ref.typography,
       spacing = _ref.spacing;
   return {
@@ -13,4 +13,7 @@ function generator(_ref) {
     bankNamePadding: spacing.xSmall,
     bankNameLabelPadding: spacing.xSmall
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/banks/components/EditBankModal/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"));
 
@@ -27,7 +25,7 @@ var _uiTextInput = require("@instructure/ui-text-input");
 
 var _uiHeading = require("@instructure/ui-heading");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
@@ -37,18 +35,13 @@ var _quizCommon = require("@instructure/quiz-common");
 
 var _Bank = _interopRequireDefault(require("../../../common/records/Bank.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-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'
-};
-var EditBankModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var EditBankModal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(EditBankModal, _Component);
 
   var _super = (0, _createSuper2.default)(EditBankModal);
@@ -106,16 +99,15 @@ var EditBankModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   (0, _createClass2.default)(EditBankModal, [{
     key: "renderCancelButton",
     value: function renderCancelButton() {
-      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      return (0, _emotion.jsx)(_uiButtons.Button, {
         onClick: this.closeAction,
-        className: styles.footerButtonWrapper,
         margin: _quizCommon.XSMALL_SIDE_MARGIN
       }, (0, _formatMessage.default)('Cancel'));
     }
   }, {
     key: "renderSaveButton",
     value: function renderSaveButton() {
-      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      return (0, _emotion.jsx)(_uiButtons.Button, {
         type: "button",
         color: "primary",
         onClick: this.continueAction,
@@ -126,15 +118,13 @@ var EditBankModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   }, {
     key: "renderContent",
     value: function renderContent() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.bankNameInput
-      }, /*#__PURE__*/_react.default.createElement(_uiTextInput.TextInput, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.bankNameInput
+      }, (0, _emotion.jsx)(_uiTextInput.TextInput, {
         value: this.props.workingBank.title,
         messages: this.getErrors(),
         onChange: this.onNameChange,
-        renderLabel: /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.bankNameLabel
-        }, (0, _formatMessage.default)('Bank Name')),
+        renderLabel: (0, _emotion.jsx)("div", null, (0, _formatMessage.default)('Bank Name')),
         type: "text",
         placeholder: (0, _formatMessage.default)('Enter a name...'),
         "data-automation": "sdk-edit-bank-name-textinput"
@@ -143,21 +133,21 @@ var EditBankModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_quizCommon.Modal, {
+      return (0, _emotion.jsx)(_quizCommon.Modal, {
         open: this.props.modalOpen,
         onDismiss: this.closeAction,
         size: "small",
         label: (0, _formatMessage.default)('Item Bank'),
         "data-automation": "sdk-edit-bank-modal"
-      }, /*#__PURE__*/_react.default.createElement(_quizCommon.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+      }, (0, _emotion.jsx)(_quizCommon.ModalHeader, null, (0, _emotion.jsx)(_uiHeading.Heading, {
         level: "reset",
         as: "h2"
-      }, (0, _formatMessage.default)('Edit Item Bank')), /*#__PURE__*/_react.default.createElement(_uiButtons.CloseButton, {
+      }, (0, _formatMessage.default)('Edit Item Bank')), (0, _emotion.jsx)(_uiButtons.CloseButton, {
         onClick: this.closeAction,
         placement: "end",
         offset: "medium",
         screenReaderLabel: (0, _formatMessage.default)('Close')
-      })), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalBody, null, this.renderContent()), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalFooter, null, this.renderCancelButton(), this.renderSaveButton()));
+      })), (0, _emotion.jsx)(_quizCommon.ModalBody, null, this.renderContent()), (0, _emotion.jsx)(_quizCommon.ModalFooter, null, this.renderCancelButton(), this.renderSaveButton()));
     }
   }]);
   EditBankModal.displayName = "EditBankModal";
@@ -173,7 +163,9 @@ var EditBankModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   clearModifications: _propTypes.default.func.isRequired,
   showError: _propTypes.default.func.isRequired,
   hideError: _propTypes.default.func.isRequired,
-  closeModal: _propTypes.default.func.isRequired
+  closeModal: _propTypes.default.func.isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   displayError: false,
   modalTrigger: null

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

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    bankNameInput: {
+      flex: '1 1 auto',
+      fontSize: componentTheme.bankNameInputFontSize,
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      padding: "0 ".concat(componentTheme.bankNameInputFontSize)
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/banks/components/EditBankModal/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 typography = _ref.typography,
       spacing = _ref.spacing;
   return {
     bankNameInputFontSize: typography.fontSizeMedium,
     bankNameInputPadding: spacing.xSmall
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/banks/components/HeaderMenu/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"));
 
@@ -29,26 +27,21 @@ 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("../../../building/components/QTIImportModal/index.js"));
 
 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: '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'
-};
-var HeaderMenu = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var HeaderMenu = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(HeaderMenu, _Component);
 
   var _super = (0, _createSuper2.default)(HeaderMenu);
@@ -61,19 +54,19 @@ var HeaderMenu = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _d
   (0, _createClass2.default)(HeaderMenu, [{
     key: "renderMenu",
     value: function renderMenu() {
-      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,
           screenReaderLabel: (0, _formatMessage.default)('More Item Banking Actions')
         })
-      }, /*#__PURE__*/_react.default.createElement(_uiMenu.Menu.Item, {
+      }, (0, _emotion.jsx)(_uiMenu.Menu.Item, {
         key: "import",
         disabled: !this.props.bank.canImport(),
         onSelect: this.props.openImportModal
-      }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconImportLine, {
-        className: styles.menuIcon,
+      }, (0, _emotion.jsx)(_uiIcons.IconImportLine, {
+        css: this.props.styles.menuIcon,
         "data-automation": "sdk-headermenu-import-content"
       }), (0, _formatMessage.default)('Import Content')));
     }
@@ -81,7 +74,7 @@ var HeaderMenu = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _d
     key: "render",
     value: function render() {
       var bank = this.props.bank;
-      return /*#__PURE__*/_react.default.createElement("div", null, this.renderMenu(), /*#__PURE__*/_react.default.createElement(_index.default, {
+      return (0, _emotion.jsx)("div", null, this.renderMenu(), (0, _emotion.jsx)(_index.default, {
         parentId: bank.id,
         parentType: _quizCommon.PARENT_TYPE_BANK,
         qtiImport: bank.getLatestImport(),
@@ -93,7 +86,9 @@ var HeaderMenu = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _d
   return HeaderMenu;
 }(_react.Component), _class2.propTypes = {
   openImportModal: _propTypes.default.func.isRequired,
-  bank: _reactImmutableProptypes.default.record.isRequired
+  bank: _reactImmutableProptypes.default.record.isRequired,
+  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
+  styles: _propTypes.default.object
 }, _temp)) || _class);
 exports.HeaderMenu = HeaderMenu;
 var _default = HeaderMenu;

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    menuIcon: {
+      verticalAlign: 'middle',
+      marginRight: componentTheme.menuIconMargin,
+      fontSize: componentTheme.menuIconFontSize
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/banks/components/HeaderMenu/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,
       typography = _ref.typography;
   return {
     menuIconMargin: spacing.xSmall,
     menuIconFontSize: typography.fontSizeLarge
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "20.1.1-rc.2+ca5f31e48",
+  "version": "20.1.1-rc.4+126a33012",
   "license": "MIT",
   "description": "The Quiz React SDK by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
@@ -41,62 +41,62 @@
     "lib"
   ],
   "dependencies": {
-    "@instructure/emotion": "^8.48.3",
+    "@instructure/emotion": "^8.51.0",
     "@instructure/grading-utils": "^1.0.0",
-    "@instructure/outcomes-ui": "^2.1.9",
-    "@instructure/quiz-common": "20.1.1-rc.2+ca5f31e48",
-    "@instructure/quiz-i18n": "20.1.1-rc.2+ca5f31e48",
-    "@instructure/quiz-interactions": "20.1.1-rc.2+ca5f31e48",
-    "@instructure/quiz-number-input": "20.1.1-rc.2+ca5f31e48",
-    "@instructure/quiz-rce": "20.1.1-rc.2+ca5f31e48",
-    "@instructure/ui-a11y-content": "^8.48.3",
-    "@instructure/ui-alerts": "^8.48.3",
-    "@instructure/ui-avatar": "^8.48.3",
-    "@instructure/ui-billboard": "^8.48.3",
-    "@instructure/ui-breadcrumb": "^8.48.3",
-    "@instructure/ui-buttons": "^8.48.3",
-    "@instructure/ui-checkbox": "^8.48.3",
-    "@instructure/ui-color-utils": "^8.48.3",
-    "@instructure/ui-dialog": "^8.48.3",
-    "@instructure/ui-flex": "^8.48.3",
-    "@instructure/ui-focusable": "^8.48.3",
-    "@instructure/ui-form-field": "^8.48.3",
-    "@instructure/ui-grid": "^8.48.3",
-    "@instructure/ui-heading": "^8.48.3",
+    "@instructure/outcomes-ui": "^3.0.0",
+    "@instructure/quiz-common": "20.1.1-rc.4+126a33012",
+    "@instructure/quiz-i18n": "20.1.1-rc.4+126a33012",
+    "@instructure/quiz-interactions": "20.1.1-rc.4+126a33012",
+    "@instructure/quiz-number-input": "20.1.1-rc.4+126a33012",
+    "@instructure/quiz-rce": "20.1.1-rc.4+126a33012",
+    "@instructure/ui-a11y-content": "^8.51.0",
+    "@instructure/ui-alerts": "^8.51.0",
+    "@instructure/ui-avatar": "^8.51.0",
+    "@instructure/ui-billboard": "^8.51.0",
+    "@instructure/ui-breadcrumb": "^8.51.0",
+    "@instructure/ui-buttons": "^8.51.0",
+    "@instructure/ui-checkbox": "^8.51.0",
+    "@instructure/ui-color-utils": "^8.51.0",
+    "@instructure/ui-dialog": "^8.51.0",
+    "@instructure/ui-flex": "^8.51.0",
+    "@instructure/ui-focusable": "^8.51.0",
+    "@instructure/ui-form-field": "^8.51.0",
+    "@instructure/ui-grid": "^8.51.0",
+    "@instructure/ui-heading": "^8.51.0",
     "@instructure/ui-i18n": "^7.22.1",
-    "@instructure/ui-icons": "^8.48.3",
-    "@instructure/ui-img": "^8.48.3",
-    "@instructure/ui-link": "^8.48.3",
-    "@instructure/ui-list": "^8.48.3",
-    "@instructure/ui-menu": "^8.48.3",
-    "@instructure/ui-metric": "^8.48.3",
-    "@instructure/ui-modal": "^8.48.3",
-    "@instructure/ui-motion": "^8.48.3",
-    "@instructure/ui-number-input": "^8.48.3",
-    "@instructure/ui-overlays": "^8.48.3",
-    "@instructure/ui-pagination": "^8.48.3",
-    "@instructure/ui-popover": "^8.48.3",
-    "@instructure/ui-portal": "^8.48.3",
-    "@instructure/ui-progress": "^8.48.3",
-    "@instructure/ui-prop-types": "^8.48.3",
-    "@instructure/ui-radio-input": "^8.48.3",
-    "@instructure/ui-react-utils": "^8.48.3",
-    "@instructure/ui-select": "^8.48.3",
-    "@instructure/ui-simple-select": "^8.48.3",
-    "@instructure/ui-spinner": "^8.48.3",
-    "@instructure/ui-table": "^8.48.3",
-    "@instructure/ui-tabs": "^8.48.3",
-    "@instructure/ui-tag": "^8.48.3",
-    "@instructure/ui-text": "^8.48.3",
-    "@instructure/ui-text-input": "^8.48.3",
+    "@instructure/ui-icons": "^8.51.0",
+    "@instructure/ui-img": "^8.51.0",
+    "@instructure/ui-link": "^8.51.0",
+    "@instructure/ui-list": "^8.51.0",
+    "@instructure/ui-menu": "^8.51.0",
+    "@instructure/ui-metric": "^8.51.0",
+    "@instructure/ui-modal": "^8.51.0",
+    "@instructure/ui-motion": "^8.51.0",
+    "@instructure/ui-number-input": "^8.51.0",
+    "@instructure/ui-overlays": "^8.51.0",
+    "@instructure/ui-pagination": "^8.51.0",
+    "@instructure/ui-popover": "^8.51.0",
+    "@instructure/ui-portal": "^8.51.0",
+    "@instructure/ui-progress": "^8.51.0",
+    "@instructure/ui-prop-types": "^8.51.0",
+    "@instructure/ui-radio-input": "^8.51.0",
+    "@instructure/ui-react-utils": "^8.51.0",
+    "@instructure/ui-select": "^8.51.0",
+    "@instructure/ui-simple-select": "^8.51.0",
+    "@instructure/ui-spinner": "^8.51.0",
+    "@instructure/ui-table": "^8.51.0",
+    "@instructure/ui-tabs": "^8.51.0",
+    "@instructure/ui-tag": "^8.51.0",
+    "@instructure/ui-text": "^8.51.0",
+    "@instructure/ui-text-input": "^8.51.0",
     "@instructure/ui-themeable": "^7.22.1",
-    "@instructure/ui-themes": "^8.48.3",
-    "@instructure/ui-toggle-details": "^8.48.3",
-    "@instructure/ui-tooltip": "^8.48.3",
-    "@instructure/ui-tray": "^8.48.3",
-    "@instructure/ui-truncate-text": "^8.48.3",
-    "@instructure/ui-utils": "^8.48.3",
-    "@instructure/ui-view": "^8.48.3",
+    "@instructure/ui-themes": "^8.51.0",
+    "@instructure/ui-toggle-details": "^8.51.0",
+    "@instructure/ui-tooltip": "^8.51.0",
+    "@instructure/ui-tray": "^8.51.0",
+    "@instructure/ui-truncate-text": "^8.51.0",
+    "@instructure/ui-utils": "^8.51.0",
+    "@instructure/ui-view": "^8.51.0",
     "aws-sdk": "^2.3.2",
     "classnames": "^2.2.5",
     "content-disposition": "^0.5.2",
@@ -110,7 +110,7 @@
     "file-saver": "~2.0.5",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "20.1.1-rc.2+ca5f31e48",
+    "instructure-validations": "20.1.1-rc.4+126a33012",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -143,7 +143,7 @@
   },
   "devDependencies": {
     "@instructure/quiz-scripts": "20.1.0",
-    "@instructure/ui-axe-check": "^8.48.3",
+    "@instructure/ui-axe-check": "^8.51.0",
     "@instructure/ui-babel-preset": "^7.22.1",
     "@instructure/ui-karma-config": "^7.22.1",
     "@instructure/ui-postcss-config": "^7.22.1",
@@ -162,7 +162,7 @@
     "intl": "^1.2.4",
     "jquery": "^2.2.3",
     "most-subject": "^5.3.0",
-    "quiz-presets": "20.1.1-rc.2+ca5f31e48",
+    "quiz-presets": "20.1.1-rc.4+126a33012",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -178,5 +178,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ca5f31e48b6b4561cd4a0ecfe98d5d1e0cd0572d"
+  "gitHead": "126a33012ebfa161cfd4bc62fc26dad01b99e93b"
 }