@instructure/quiz-core 20.11.5-rc.0 → 20.11.5-rc.10

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

@@ -22,18 +22,18 @@ import { PresentationContent } from '@instructure/ui-a11y-content';
 import { Alert } from '@instructure/ui-alerts';
 import { withStyle, jsx } from '@instructure/emotion';
 import { BUILD_TRAY_POSITION, COPY_MOVE_BANK_ENTRY_MODAL, SET_EDIT_BUTTON_FOCUS, withI18nSupport } from '@instructure/quiz-common';
-import { RichContentRendererEmotion } from '@instructure/quiz-rce';
+import { RichContentRenderer } from '@instructure/quiz-rce';
 import { extractTextFromHtml } from '@instructure/quiz-interactions';
 import t from '@instructure/quiz-i18n/es/format-message';
 import CopyMoveBankEntryModal from "../CopyMoveBankEntryModal/index.js";
 import ExpandButton from "../../../common/components/shared/ExpandButton/index.js";
 import QuizEntry from "../../../common/records/QuizEntry.js";
-import Overlay from "../../../common/components/shared/overlay/Overlay.js";
 import ItemShow from "../../../common/components/resources/item/ItemShow/index.js";
 import StimulusShowInfo from "../../../common/components/resources/stimulus/StimulusShowInfo/index.js";
 import TagDisplay from "../../../common/components/shared/TagDisplay/index.js";
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
+import Overlay from "../../../common/components/shared/overlay/index.js";
 
 var _ref2 = jsx("div", null);
 
@@ -271,7 +271,7 @@ export var BankEntryRow = (_dec = withStyle(generateStyle, generateComponentThem
       // or title plain text
 
       if (itemOrStimulus.itemBody) {
-        return jsx(RichContentRendererEmotion, {
+        return jsx(RichContentRenderer, {
           customStyles: this.props.styles.stem,
           content: itemOrStimulus.itemBody
         });

package/es/building/components/resources/ItemFeedbackModal/presenter.js

@@ -12,7 +12,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Button, CloseButton } from '@instructure/ui-buttons';
 import { Heading } from '@instructure/ui-heading';
 import { withStyle, jsx } from '@instructure/emotion';
-import { RichContentRendererEmotion, RichContentInput, RCE_THREE_LINES_HEIGHT } from '@instructure/quiz-rce';
+import { RichContentRenderer, RichContentInput, RCE_THREE_LINES_HEIGHT } from '@instructure/quiz-rce';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { Modal, ModalHeader, ModalBody, ModalFooter, ITEM_FEEDBACK_MODAL_FEEDBACK, XSMALL_SIDE_MARGIN } from '@instructure/quiz-common';
 import generateStyle from "./styles.js";
@@ -97,7 +97,7 @@ export var ItemFeedbackModal = (_dec = withStyle(generateStyle, generateComponen
   }, {
     key: "renderContent",
     value: function renderContent() {
-      return jsx("div", null, jsx(RichContentRendererEmotion, {
+      return jsx("div", null, jsx(RichContentRenderer, {
         customStyles: this.props.styles.itemStem,
         content: this.props.item.itemBody
       }), this.renderRichContentInput('correct', t('For a correct answer')), this.renderRichContentInput('incorrect', t('For an incorrect answer')), this.renderRichContentInput('neutral', t('Provide general feedback (regardless of answer)')));

package/es/building/components/resources/quiz/instructions/Show/index.js

@@ -9,8 +9,8 @@ var _dec, _class, _class2, _temp;
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { withStyle, jsx } from '@instructure/emotion';
-import { RichContentRendererEmotion } from '@instructure/quiz-rce';
-import OverlayEmotion from "../../../../../../common/components/shared/overlayEmotion/index.js";
+import { RichContentRenderer } from '@instructure/quiz-rce';
+import Overlay from "../../../../../../common/components/shared/overlay/index.js";
 import makeScrollable from "../../../../../../common/components/shared/functionality/makeScrollable.js";
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
@@ -48,14 +48,14 @@ export var QuizInstructionsShow = (_dec = withStyle(generateStyle, generateCompo
     value: function render() {
       return jsx("span", {
         "data-automation": "sdk-quiz-instructions-show-wrapper"
-      }, jsx(OverlayEmotion, {
+      }, jsx(Overlay, {
         wrapperStyles: this.props.styles.instructionsShowWrapper,
         onClick: this.switchOnEditing,
         tabIndex: "-1",
         hideOverlay: this.props.contentLocked
       }, jsx("div", {
         "data-automation": "instructions-show-text"
-      }, jsx(RichContentRendererEmotion, {
+      }, jsx(RichContentRenderer, {
         customStyles: this.props.styles.instructionsShowText,
         content: this.props.instructions || t('Add Instructions...')
       }))));

package/es/building/components/resources/quiz/title/Show/index.js

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 import { withStyle, jsx } from '@instructure/emotion';
 import { TruncateText } from '@instructure/ui-truncate-text';
 import { Text } from '@instructure/ui-text';
-import OverlayEmotion from "../../../../../../common/components/shared/overlayEmotion/index.js";
+import Overlay from "../../../../../../common/components/shared/overlay/index.js";
 import makeScrollable from "../../../../../../common/components/shared/functionality/makeScrollable.js";
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js"; // ====================================
@@ -49,7 +49,7 @@ export var QuizTitleShow = (_dec = withStyle(generateStyle, generateComponentThe
     value: function render() {
       return jsx("span", {
         "data-automation": "sdk-quiz-title-show-wrapper"
-      }, jsx(OverlayEmotion, {
+      }, jsx(Overlay, {
         wrapperStyles: this.props.styles.titleShowWrapper,
         onClick: this.switchOnEditing,
         tabIndex: "-1",

package/es/building/components/resources/quizEntry/QuizEntryShow/presenter.js

@@ -19,7 +19,7 @@ import { TOP } from '@instructure/quiz-common';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { convertFITBtoRich } from "../../../../../common/util/fitbCopyHelper.js";
 import Item from "../../../../../common/records/Item.js";
-import OverlayEmotion from "../../../../../common/components/shared/overlayEmotion/index.js";
+import Overlay from "../../../../../common/components/shared/overlay/index.js";
 import ActionButtons from "../../ActionButtons/index.js";
 import { ItemTypes, dragSource, collectDrag } from "../../../../../common/components/shared/drag_and_drop/dragAndDropUtils.js";
 import PositionBox from "../../../../../common/components/resources/positionBox/PositionBox.js";
@@ -262,7 +262,7 @@ var QuizEntryShow = (_dec = withStyle(generateStyle, generateComponentTheme), _d
       var shouldLockQuizEntry = lockBlueprintContentEnabled && isContentLockedByBlueprint; // Overlay gets tabIndex === "-1" so that the drag handle is tabbable before
       // the Overlay get focus and opens the quizEntry in edit mode
 
-      return jsx(OverlayEmotion, {
+      return jsx(Overlay, {
         onClick: this.editingOn,
         wrapperStyles: this.props.styles.quizEntryWrapper,
         tabIndex: "-1",

package/es/common/components/ImportModal/ImportFileSelector/index.js

@@ -5,129 +5,127 @@ 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 { Button } from '@instructure/ui-buttons';
 import { Grid } from '@instructure/ui-grid';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import { IconUploadLine, IconCompleteLine } from '@instructure/ui-icons';
 import t from '@instructure/quiz-i18n/es/format-message';
 import FileSelector from "../../../../common/components/shared/file_selector/FileSelector.js";
-var styles = {
-  componentId: 'fqArL',
-  template: function template(theme) {
-    return "\n\n.fqArL_dVrD{color:".concat(theme.uploadIconContainerColor || 'inherit', ";font-size:").concat(theme.uploadIconContainerColorFontSize || 'inherit', ";text-align:right}\n\n[dir=ltr] .fqArL_dVrD,[dir=rtl] .fqArL_dVrD{text-align:right}\n\n.fqArL_brQK{color:").concat(theme.checkIconContainerColor || 'inherit', ";font-size:").concat(theme.checkIconContainerFontSize || 'inherit', ";text-align:right}\n\n[dir=ltr] .fqArL_brQK,[dir=rtl] .fqArL_brQK{text-align:right}\n\n.fqArL_kOWE{color:").concat(theme.smallTextColor || 'inherit', ";font-size:").concat(theme.smallTextFontSize || 'inherit', ";padding:0 ").concat(theme.smallTextPadding || 'inherit', "}\n\n.fqArL_ddCj{margin-top:").concat(theme.selectorMargin || 'inherit', "}\n\n.fqArL_cHlQ{color:").concat(theme.fileListSuccessColor || 'inherit', "}");
-  },
-  'uploadIconContainer': 'fqArL_dVrD',
-  'checkIconContainer': 'fqArL_brQK',
-  'smallText': 'fqArL_kOWE',
-  'selector': 'fqArL_ddCj',
-  'fileListSuccess': 'fqArL_cHlQ'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 
-var _ref3 = /*#__PURE__*/React.createElement(IconUploadLine, null);
+var _ref = jsx(IconUploadLine, null);
 
-var _ref4 = /*#__PURE__*/React.createElement(IconCompleteLine, null);
+var _ref2 = jsx(IconCompleteLine, null);
 
-export var ImportFileSelector = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var ImportFileSelector = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(ImportFileSelector, _Component);
 
   var _super = _createSuper(ImportFileSelector);
 
   function ImportFileSelector() {
-    var _this;
-
     _classCallCheck(this, ImportFileSelector);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _this.renderFileList = function () {
-      var fileName = _this.props.files.get(0).name;
+    return _super.apply(this, arguments);
+  }
 
-      return /*#__PURE__*/React.createElement("div", null, t.rich('<0>{fileName}</0> <1>is ready.</1>', {
-        0: function _(_ref) {
-          var children = _ref.children;
-          return /*#__PURE__*/React.createElement("span", {
-            className: styles.fileListSuccess,
+  _createClass(ImportFileSelector, [{
+    key: "renderUploadIcon",
+    value: function renderUploadIcon(styles) {
+      return jsx("div", {
+        css: this.props.styles.uploadIconContainer
+      }, _ref);
+    }
+  }, {
+    key: "renderCheckmarkIcon",
+    value: function renderCheckmarkIcon(styles) {
+      return jsx("div", {
+        css: styles.checkIconContainer
+      }, _ref2);
+    }
+  }, {
+    key: "renderFileList",
+    value: function renderFileList(styles) {
+      var fileName = this.props.files.get(0).name;
+      return jsx("div", null, t.rich('<0>{fileName}</0> <1>is ready.</1>', {
+        0: function _(_ref3) {
+          var children = _ref3.children;
+          return jsx("span", {
+            css: styles.fileListSuccess,
             key: "0"
           }, children);
         },
-        1: function _(_ref2) {
-          var children = _ref2.children;
-          return /*#__PURE__*/React.createElement("span", {
+        1: function _(_ref4) {
+          var children = _ref4.children;
+          return jsx("span", {
             key: "1"
           }, children);
         },
         fileName: fileName
       }));
-    };
-
-    return _this;
-  }
-
-  _createClass(ImportFileSelector, [{
-    key: "renderUploadIcon",
-    value: function renderUploadIcon() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.uploadIconContainer
-      }, _ref3);
-    }
-  }, {
-    key: "renderCheckmarkIcon",
-    value: function renderCheckmarkIcon() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.checkIconContainer
-      }, _ref4);
     }
   }, {
     key: "renderFilePickerText",
-    value: function renderFilePickerText() {
-      return /*#__PURE__*/React.createElement("div", null, t.rich('Drag & Drop here <0>or</0> <1>Browse</1>', [function (_ref5) {
+    value: function renderFilePickerText(styles) {
+      return jsx("div", null, t.rich('Drag & Drop here <0>or</0> <1>Browse</1>', [function (_ref5) {
         var children = _ref5.children;
-        return /*#__PURE__*/React.createElement("span", {
-          className: styles.smallText,
+        return jsx("span", {
+          css: styles.smallText,
           key: "0"
         }, children);
       }, function (_ref6) {
         var children = _ref6.children;
-        return /*#__PURE__*/React.createElement(Button, {
+        return jsx(Button, {
           key: "1"
         }, children);
       }]));
     }
   }, {
-    key: "renderWrapper",
-    value: function renderWrapper(renderIcon, renderText) {
-      return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Grid.Row, {
+    key: "renderWrapperWithList",
+    value: function renderWrapperWithList(styles) {
+      return jsx(Grid, null, jsx(Grid.Row, {
+        vAlign: "middle"
+      }, jsx(Grid.Col, {
+        width: 3
+      }, this.renderCheckmarkIcon(styles)), jsx(Grid.Col, null, this.renderFileList(styles))));
+    }
+  }, {
+    key: "renderWrapperWithText",
+    value: function renderWrapperWithText(styles) {
+      return jsx(Grid, null, jsx(Grid.Row, {
         vAlign: "middle"
-      }, /*#__PURE__*/React.createElement(Grid.Col, {
+      }, jsx(Grid.Col, {
         width: 3
-      }, renderIcon()), /*#__PURE__*/React.createElement(Grid.Col, null, renderText())));
+      }, this.renderUploadIcon(styles)), jsx(Grid.Col, null, this.renderFilePickerText(styles))));
     }
   }, {
     key: "renderContent",
     value: function renderContent() {
-      if (this.props.files && this.props.files.size) {
-        return this.renderWrapper(this.renderCheckmarkIcon, this.renderFileList);
+      var files = this.props.files;
+
+      if (files && files.size) {
+        return this.renderWrapperWithList(this.props.styles);
       } else {
-        return this.renderWrapper(this.renderUploadIcon, this.renderFilePickerText);
+        return this.renderWrapperWithText(this.props.styles);
       }
     }
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.selector
-      }, /*#__PURE__*/React.createElement(FileSelector, {
+      var _this$props = this.props,
+          styles = _this$props.styles,
+          receiveFile = _this$props.receiveFile,
+          acceptAttribute = _this$props.acceptAttribute;
+      return jsx("div", {
+        css: styles.selector
+      }, jsx(FileSelector, {
         content: this.renderContent(),
-        fileHandler: this.props.receiveFile,
-        acceptAttribute: this.props.acceptAttribute
+        fileHandler: receiveFile,
+        acceptAttribute: acceptAttribute
       }));
     }
   }]);
@@ -137,6 +135,7 @@ export var ImportFileSelector = (_dec = themeable(theme, styles), _dec(_class =
 }(Component), _class2.propTypes = {
   files: ImmutablePropTypes.list.isRequired,
   receiveFile: PropTypes.func.isRequired,
-  acceptAttribute: PropTypes.string.isRequired
+  acceptAttribute: PropTypes.string.isRequired,
+  styles: PropTypes.object
 }, _temp)) || _class);
 export default ImportFileSelector;

package/es/common/components/ImportModal/ImportFileSelector/styles.js

@@ -0,0 +1,27 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    uploadIconContainer: {
+      color: componentTheme.uploadIconContainerColor,
+      fontSize: componentTheme.uploadIconContainerColorFontSize,
+      textAlign: 'right'
+    },
+    checkIconContainer: {
+      color: componentTheme.checkIconContainerColor,
+      fontSize: componentTheme.checkIconContainerFontSize,
+      textAlign: 'right'
+    },
+    smallText: {
+      padding: "0 ".concat(componentTheme.smallTextPadding),
+      fontSize: componentTheme.smallTextFontSize,
+      color: componentTheme.smallTextColor
+    },
+    selector: {
+      marginTop: componentTheme.selectorMargin
+    },
+    fileListSuccess: {
+      color: componentTheme.fileListSuccessColor
+    }
+  };
+};
+
+export default generateStyle;

package/es/common/components/ImportModal/ImportFileSelector/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       colors = _ref.colors,
       typography = _ref.typography;
@@ -13,4 +13,6 @@ export default function generator(_ref) {
     selectorMargin: spacing.xSmall,
     fileListSuccessColor: colors.shamrock
   };
-}
+};
+
+export default generateComponentTheme;

package/es/common/components/resources/quiz/instructions/Instructions.js

@@ -12,7 +12,7 @@ import { Component } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { withStyle, jsx } from '@instructure/emotion';
-import { RichContentRendererEmotion } from '@instructure/quiz-rce';
+import { RichContentRenderer } from '@instructure/quiz-rce';
 import makeScrollable from "../../../shared/functionality/makeScrollable.js"; // ================================
 // renders the quiz instructions on
 // the Preview and Take pages
@@ -38,7 +38,7 @@ export var QuizInstructions = (_dec = withStyle(generateStyle, generateComponent
         "data-testid": "instructionsWrapper",
         css: this.props.styles.wrapper,
         tabIndex: "-1"
-      }, jsx(RichContentRendererEmotion, {
+      }, jsx(RichContentRenderer, {
         customStyles: this.props.styles.text,
         content: this.props.quiz.instructions
       }));

package/es/common/components/resources/sessionItemResult/SessionItemResult/presenter.js

@@ -17,7 +17,7 @@ import { Heading } from '@instructure/ui-heading';
 import { View } from '@instructure/ui-view';
 import { PresentationContent } from '@instructure/ui-a11y-content';
 import { withStyle, jsx } from '@instructure/emotion';
-import { RichContentRendererEmotion } from '@instructure/quiz-rce';
+import { RichContentRenderer } from '@instructure/quiz-rce';
 import t from '@instructure/quiz-i18n/es/format-message';
 import PositionBox from "../../positionBox/PositionBox.js";
 import { COMPONENT_RESULT } from '@instructure/quiz-common';
@@ -184,7 +184,7 @@ export var SessionItemResult = (_dec = withStyle(generateStyle, generateComponen
           margin: "xx-small small"
         }, formattedFeedbackTitle), jsx("div", {
           css: this.props.styles.textPadding
-        }, jsx(RichContentRendererEmotion, {
+        }, jsx(RichContentRenderer, {
           customStyles: this.props.styles.itemFeedbackText,
           content: feedbackContent
         })));
@@ -228,7 +228,7 @@ export var SessionItemResult = (_dec = withStyle(generateStyle, generateComponen
             tabIndex: "0"
           }, jsx("div", {
             css: this.props.styles.itemFeedbackLabel
-          }, t('Feedback from grader')), jsx(RichContentRendererEmotion, {
+          }, t('Feedback from grader')), jsx(RichContentRenderer, {
             customStyles: this.props.styles.itemFeedbackText,
             content: graderFeedback.content
           }));

package/es/common/components/resources/stimulus/StimulusShow/index.js

@@ -18,7 +18,7 @@ import ActionButtons from "../../../../../building/components/resources/ActionBu
 import t from '@instructure/quiz-i18n/es/format-message';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-import OverlayEmotion from "../../../shared/overlayEmotion/index.js";
+import Overlay from "../../../shared/overlay/index.js";
 
 var _ref = jsx(IconBankLine, null);
 
@@ -55,7 +55,7 @@ export var StimulusShow = (_dec = withStyle(generateStyle, generateComponentThem
   }, {
     key: "render",
     value: function render() {
-      return jsx(OverlayEmotion, {
+      return jsx(Overlay, {
         onClick: this.switchOnEditing,
         wrapperStyles: this.props.styles.stimulusWrapper,
         tabIndex: "-1",

package/es/common/components/shared/Card/CardContent/index.js

@@ -1,3 +1,4 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
@@ -5,21 +6,14 @@ 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 classNames from 'classnames';
-import omit from 'lodash/omit';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import { View } from '@instructure/ui-view';
-var styles = {
-  componentId: 'fGJav',
-  template: function template(theme) {
-    return "\n\n.fGJav_caGd{background-color:".concat(theme.contentBackgroundColor || 'inherit', ";border:1px solid ").concat(theme.contentBorderColor || 'inherit', ";border-radius:").concat(theme.contentBorderRadius || 'inherit', ";box-shadow:").concat(theme.contentBoxShadow || 'inherit', ";margin:").concat(theme.contentMargin || 'inherit', " auto;max-width:").concat(theme.contentMaxWidth || 'inherit', ";transition:").concat(theme.contentTransitionDuration || 'inherit', " ease}\n\n@media screen and (--phoneBreakPoint){.fGJav_caGd{margin:").concat(theme.phoneContentMargin || 'inherit', " auto}}");
-  },
-  'content': 'fGJav_caGd'
-};
-import theme from "./theme.js";
-export var CardContent = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var CardContent = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(CardContent, _Component);
 
   var _super = _createSuper(CardContent);
@@ -33,11 +27,12 @@ export var CardContent = (_dec = themeable(theme, styles), _dec(_class = (_temp
   _createClass(CardContent, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(View, {
+      return jsx(View, {
         as: "div"
-      }, /*#__PURE__*/React.createElement("div", Object.assign({
-        className: classNames(styles.content, this.props.className)
-      }, omit(this.props, Object.keys(CardContent.propTypes))), this.props.children));
+      }, jsx("div", {
+        css: _objectSpread(_objectSpread({}, this.props.styles.content), this.props.customStyles),
+        className: this.props.className
+      }, this.props.children));
     }
   }]);
 
@@ -45,8 +40,11 @@ export var CardContent = (_dec = themeable(theme, styles), _dec(_class = (_temp
   return CardContent;
 }(Component), _class2.propTypes = {
   children: PropTypes.node.isRequired,
+  customStyles: PropTypes.object,
+  styles: PropTypes.object,
   className: PropTypes.string
 }, _class2.defaultProps = {
-  className: null
+  customStyles: {},
+  className: ''
 }, _temp)) || _class);
 export default CardContent;

package/es/common/components/shared/Card/CardContent/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       shadows = _ref.shadows,
       colors = _ref.colors,
@@ -15,4 +15,6 @@ export default function generator(_ref) {
     contentBorderColor: colors.tiara,
     contentBorderRadius: '4px'
   };
-}
+};
+
+export default generateComponentTheme;

package/es/common/components/shared/Card/CardWrapper/index.js

@@ -1,3 +1,4 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
@@ -5,20 +6,14 @@ 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 classNames from 'classnames';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import { View } from '@instructure/ui-view';
-var styles = {
-  componentId: 'fVYAO',
-  template: function template(theme) {
-    return "\n\n.fVYAO_gasz{box-sizing:border-box;min-height:100%;padding:".concat(theme.wrapperPadding || 'inherit', ";transition:").concat(theme.wrapperTransitionDuration || 'inherit', " ease}\n\n@media screen and (--phoneBreakPoint){.fVYAO_gasz{padding:").concat(theme.phoneWrapperPadding || 'inherit', " 0}}");
-  },
-  'wrapper': 'fVYAO_gasz'
-};
-import theme from "./theme.js";
-export var CardWrapper = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var CardWrapper = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(CardWrapper, _Component);
 
   var _super = _createSuper(CardWrapper);
@@ -32,11 +27,11 @@ export var CardWrapper = (_dec = themeable(theme, styles), _dec(_class = (_temp
   _createClass(CardWrapper, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(View, {
+      return jsx(View, {
         as: "div",
         height: "100%"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: classNames(styles.wrapper, this.props.className)
+      }, jsx("div", {
+        css: _objectSpread(_objectSpread({}, this.props.styles.wrapper), this.props.customStyles)
       }, this.props.children));
     }
   }]);
@@ -45,8 +40,9 @@ export var CardWrapper = (_dec = themeable(theme, styles), _dec(_class = (_temp
   return CardWrapper;
 }(Component), _class2.propTypes = {
   children: PropTypes.node.isRequired,
-  className: PropTypes.string
+  customStyles: PropTypes.object,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
-  className: null
+  customStyles: {}
 }, _temp)) || _class);
 export default CardWrapper;

package/es/common/components/shared/Card/CardWrapper/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       breakpoints = _ref.breakpoints,
       transitions = _ref.transitions;
@@ -8,4 +8,6 @@ export default function generator(_ref) {
     phoneBreakPoint: "max-width: ".concat(breakpoints.medium),
     phoneWrapperPadding: spacing.medium
   };
-}
+};
+
+export default generateComponentTheme;

package/es/common/components/shared/Card/index.js

@@ -6,23 +6,23 @@ import CardWrapper from "./CardWrapper/index.js";
 export function Card(_ref) {
   var children = _ref.children,
       wrapped = _ref.wrapped,
-      wrapperClassName = _ref.wrapperClassName,
-      props = _objectWithoutProperties(_ref, ["children", "wrapped", "wrapperClassName"]);
+      wrapperStyles = _ref.wrapperStyles,
+      props = _objectWithoutProperties(_ref, ["children", "wrapped", "wrapperStyles"]);
 
   var card = /*#__PURE__*/React.createElement(CardContent, props, children);
   return wrapped ? /*#__PURE__*/React.createElement(CardWrapper, {
-    className: wrapperClassName
+    customStyles: wrapperStyles
   }, card) : card;
 }
 Card.propTypes = {
   children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  wrapperClassName: PropTypes.string,
+  customStyles: PropTypes.object,
+  wrapperStyles: PropTypes.object,
   wrapped: PropTypes.bool
 };
 Card.defaultProps = {
   wrapped: false,
-  className: null,
-  wrapperClassName: null
+  customStyles: null,
+  wrapperStyles: null
 };
 export default Card;