@instructure/quiz-core 18.4.1-rc.2 → 18.4.1-rc.3

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

@@ -266,7 +266,7 @@ export var BanksList = (_dec = themeable(theme, styles), _dec(_class = (_temp =
           className: styles.bankTitle
         }, /*#__PURE__*/React.createElement(Link, {
           onClick: navigateToBank(bank.id),
-          themeOverride: {
+          theme: {
             color: _this.theme.bankTitleLinkColor,
             hoverColor: _this.theme.bankTitleLinkHoverColor
           },

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

@@ -51,7 +51,7 @@ var StimulusShowInfo = /*#__PURE__*/function (_Component) {
         as: "h2",
         color: "primary",
         margin: "0 0 small",
-        themeOverride: {
+        theme: {
           h2FontWeight: '700'
         }
       }, this.props.stimulus.title), instructions, /*#__PURE__*/React.createElement("div", {

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

@@ -54,7 +54,7 @@ export var TagDisplay = (_dec = themeable(theme, styles), _dec(_class = (_temp =
         className: styles.tags,
         "aria-label": t('question tags')
       }, visible, extra > 0 && /*#__PURE__*/React.createElement(Tag, {
-        themeOverride: {
+        theme: {
           defaultBackground: '#FFFFFF'
         },
         text: /*#__PURE__*/React.createElement(AccessibleContent, {

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisMetric/presenter.js

@@ -5,14 +5,20 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
-/** @jsx jsx */
-import { Component } from 'react';
+import { themeable } from '@instructure/ui-themeable';
+import theme from "./theme.js";
+var styles = {
+  componentId: 'ethsC',
+  template: function template(theme) {
+    return "\n\n.ethsC_eckF{margin:0;max-width:159px;text-transform:capitalize}";
+  },
+  'metricLabel': 'ethsC_eckF'
+};
+import React, { Component } from 'react';
 import { getSanitizedMetricValue } from "../utils.js";
 import { Metric } from '@instructure/ui-metric';
 import PropTypes from 'prop-types';
-import { withStyle, jsx } from '@instructure/emotion';
-import generateStyle from "./styles.js";
-export var AnalysisMetric = (_dec = withStyle(generateStyle, null), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var AnalysisMetric = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(AnalysisMetric, _Component);
 
   var _super = _createSuper(AnalysisMetric);
@@ -31,15 +37,15 @@ export var AnalysisMetric = (_dec = withStyle(generateStyle, null), _dec(_class
           label = _this$props.label,
           value = _this$props.value,
           suffix = _this$props.suffix;
-      return jsx(Metric, {
-        themeOverride: {
+      return /*#__PURE__*/React.createElement(Metric, {
+        theme: {
           valueFontWeight: 500,
           padding: '0'
         },
         textAlign: "start",
         key: metricKey,
-        renderLabel: jsx("p", {
-          css: this.props.styles.metricLabel
+        renderLabel: /*#__PURE__*/React.createElement("p", {
+          className: styles.metricLabel
         }, label),
         renderValue: getSanitizedMetricValue(value, suffix)
       });
@@ -52,9 +58,7 @@ export var AnalysisMetric = (_dec = withStyle(generateStyle, null), _dec(_class
   metricKey: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array]),
-  suffix: PropTypes.string,
-  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
-  styles: PropTypes.object
+  suffix: PropTypes.string
 }, _class2.defaultProps = {
   value: void 0,
   suffix: ''

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisMetric/theme.js

@@ -0,0 +1,3 @@
+export default function generator() {
+  return {};
+}

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisPopoverMetric/presenter.js

@@ -5,15 +5,23 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
-/** @jsx jsx */
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { Metric } from '@instructure/ui-metric';
 import { getSanitizedMetricValue } from "../utils.js";
+var styles = {
+  componentId: 'dpcwk',
+  template: function template(theme) {
+    return "\n\n.dpcwk_elNf{max-width:159px}\n\n.dpcwk_eckF{margin:0;padding-right:24px;text-transform:capitalize}\n\n.dpcwk_dqHR{margin-left:-24px;padding-left:5px}";
+  },
+  'metricLabelContainer': 'dpcwk_elNf',
+  'metricLabel': 'dpcwk_eckF',
+  'popoverContainer': 'dpcwk_dqHR'
+};
 import MetricPopover from "../MetricPopover/index.js";
-import { withStyle, jsx } from '@instructure/emotion';
-import generateStyle from "./styles.js";
+import { themeable } from '@instructure/ui-themeable';
+import theme from "./theme.js";
 import PropTypes from 'prop-types';
-export var AnalysisPopoverMetric = (_dec = withStyle(generateStyle, null), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var AnalysisPopoverMetric = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(AnalysisPopoverMetric, _Component);
 
   var _super = _createSuper(AnalysisPopoverMetric);
@@ -27,13 +35,13 @@ export var AnalysisPopoverMetric = (_dec = withStyle(generateStyle, null), _dec(
   _createClass(AnalysisPopoverMetric, [{
     key: "renderLabelWithPopover",
     value: function renderLabelWithPopover(texts) {
-      return jsx("div", {
-        css: this.props.styles.metricLabelContainer
-      }, jsx("span", {
-        css: this.props.styles.metricLabel
-      }, this.props.label), jsx("span", {
-        css: this.props.styles.popoverContainer
-      }, jsx(MetricPopover, texts)));
+      return /*#__PURE__*/React.createElement("div", {
+        className: styles.metricLabelContainer
+      }, /*#__PURE__*/React.createElement("span", {
+        className: styles.metricLabel
+      }, this.props.label), /*#__PURE__*/React.createElement("span", {
+        className: styles.popoverContainer
+      }, /*#__PURE__*/React.createElement(MetricPopover, texts)));
     }
   }, {
     key: "render",
@@ -42,8 +50,8 @@ export var AnalysisPopoverMetric = (_dec = withStyle(generateStyle, null), _dec(
           metricKey = _this$props.metricKey,
           popoverDescription = _this$props.popoverDescription,
           value = _this$props.value;
-      return jsx(Metric, {
-        themeOverride: {
+      return /*#__PURE__*/React.createElement(Metric, {
+        theme: {
           valueFontWeight: 500,
           padding: '0'
         },
@@ -66,9 +74,7 @@ export var AnalysisPopoverMetric = (_dec = withStyle(generateStyle, null), _dec(
     subtitle: PropTypes.string,
     body: PropTypes.string,
     screenReaderLabel: PropTypes.string
-  }).isRequired,
-  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
-  styles: PropTypes.object
+  }).isRequired
 }, _class2.defaultProps = {
   value: void 0
 }, _temp)) || _class);

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisPopoverMetric/theme.js

@@ -0,0 +1,6 @@
+export default function generator(_ref) {
+  var spacing = _ref.spacing;
+  return {
+    headerPaddingBottom: spacing.medium
+  };
+}

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/ChoiceType/ChoiceTypeTableRow/presenter.js

@@ -1,26 +1,36 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
-/** @jsx jsx */
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { Table } from '@instructure/ui-table';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
+import { themeable } from '@instructure/ui-themeable';
+import theme from "./theme.js";
+var styles = {
+  componentId: 'cInnW',
+  template: function template(theme) {
+    return "\n\n.cInnW_cvRx{align-items:center;display:flex;height:48px;justify-content:center;width:46px}\n\n.cInnW_EKAb{background-color:".concat(theme.colorGreen || 'inherit', ";border-radius:4px 0 0 4px}\n\n.cInnW_EKAb svg{fill:#fff}\n\n.cInnW_tnta{border-color:").concat(theme.colorGreen || 'inherit', ";border-style:solid;border-width:2px 0;padding:").concat(theme.cellPadding || 'inherit', "}\n\n.cInnW_fvqY{border-radius:0 4px 4px 0;border-width:2px 2px 2px 0}");
+  },
+  'iconWrapper': 'cInnW_cvRx',
+  'iconCorrect': 'cInnW_EKAb',
+  'correctRowBorder': 'cInnW_tnta',
+  'correctRowBorderRadius': 'cInnW_fvqY'
+};
+import PropTypes from 'prop-types';
 import { IconXSolid, IconCheckSolid } from '@instructure/ui-icons';
+import classNames from 'classnames';
 import { extractTextFromHtml } from '@instructure/quiz-interactions';
 import t from '@instructure/quiz-i18n/es/format-message';
-import { withStyle, jsx } from '@instructure/emotion';
-import generateComponentTheme from "./theme.js";
-import generateStyle from "./styles.js";
-import PropTypes from 'prop-types';
 
-var _ref = jsx(IconCheckSolid, null);
+var _ref = /*#__PURE__*/React.createElement(IconCheckSolid, null);
 
-var _ref2 = jsx(IconXSolid, null);
+var _ref2 = /*#__PURE__*/React.createElement(IconXSolid, null);
 
-export var ChoiceTypeTableRow = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var ChoiceTypeTableRow = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(ChoiceTypeTableRow, _Component);
 
   var _super = _createSuper(ChoiceTypeTableRow);
@@ -37,20 +47,25 @@ export var ChoiceTypeTableRow = (_dec = withStyle(generateStyle, generateCompone
     _this = _super.call.apply(_super, [this].concat(args));
 
     _this.renderIcon = function (correct) {
-      return jsx("div", {
-        css: _this.props.styles.iconWrapper
+      var className = classNames(styles.iconWrapper, _defineProperty({}, styles.iconCorrect, correct));
+      return /*#__PURE__*/React.createElement("div", {
+        className: className
       }, correct ? _ref : _ref2);
     };
 
     _this.renderMiddleCell = function (correct, content) {
-      return jsx("div", {
-        css: _this.props.styles.middleCell
+      var className = classNames(_defineProperty({}, styles.correctRowBorder, correct));
+      return /*#__PURE__*/React.createElement("div", {
+        className: className
       }, content);
     };
 
     _this.renderLastCell = function (correct, content) {
-      return jsx("div", {
-        css: _this.props.styles.lastCell
+      var _classNames3;
+
+      var className = classNames((_classNames3 = {}, _defineProperty(_classNames3, styles.correctRowBorder, correct), _defineProperty(_classNames3, styles.correctRowBorderRadius, correct), _classNames3));
+      return /*#__PURE__*/React.createElement("div", {
+        className: className
       }, content);
     };
 
@@ -67,26 +82,26 @@ export var ChoiceTypeTableRow = (_dec = withStyle(generateStyle, generateCompone
     _this.render = function () {
       var correct = _this.props.choice.correct;
       var choiceBody = _this.props.choice.body;
-      var cellPadding = correct ? '0' : _this.props.styles.cellPadding;
-      return jsx(Table.Row, {
+      var cellPadding = correct ? '0' : _this.theme.cellPadding;
+      return /*#__PURE__*/React.createElement(Table.Row, {
         key: _this.props.choiceIndex
-      }, jsx(Table.Cell, {
-        themeOverride: {
+      }, /*#__PURE__*/React.createElement(Table.Cell, {
+        theme: {
           padding: '0px',
           fontWeight: 'bold'
         }
-      }, jsx(ScreenReaderContent, null, _this.answerLabel(correct)), _this.renderIcon(correct)), jsx(Table.RowHeader, {
-        themeOverride: {
+      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, _this.answerLabel(correct)), _this.renderIcon(correct)), /*#__PURE__*/React.createElement(Table.RowHeader, {
+        theme: {
           padding: cellPadding,
           fontWeight: 'bold'
         }
-      }, _this.renderMiddleCell(correct, _this.extractChoiceText(choiceBody, correct))), jsx(Table.Cell, {
-        themeOverride: {
+      }, _this.renderMiddleCell(correct, _this.extractChoiceText(choiceBody, correct))), /*#__PURE__*/React.createElement(Table.Cell, {
+        theme: {
           padding: cellPadding,
           fontWeight: 'bold'
         }
-      }, _this.renderMiddleCell(correct, _this.props.choice.count)), jsx(Table.Cell, {
-        themeOverride: {
+      }, _this.renderMiddleCell(correct, _this.props.choice.count)), /*#__PURE__*/React.createElement(Table.Cell, {
+        theme: {
           padding: cellPadding,
           fontWeight: 'bold'
         },
@@ -104,8 +119,6 @@ export var ChoiceTypeTableRow = (_dec = withStyle(generateStyle, generateCompone
     correct: PropTypes.bool,
     count: PropTypes.number,
     percentage: PropTypes.number
-  }).isRequired,
-  choiceIndex: PropTypes.number.isRequired,
-  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
-  styles: PropTypes.object
-}, _temp)) || _class);
+  }),
+  choiceIndex: PropTypes.number
+}.isRequired, _temp)) || _class);

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/ChoiceType/ChoiceTypeTableRow/theme.js

@@ -1,9 +1,6 @@
-var generateComponentTheme = function generateComponentTheme(_ref) {
-  var colors = _ref.colors;
+export default function generator() {
   return {
-    correctAnswerBackgroundColor: colors.shamrock,
+    colorGreen: '#0b874b',
     cellPadding: '0.75rem 0.75rem'
   };
-};
-
-export default generateComponentTheme;
+}

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/ChoiceType/presenter.js

@@ -5,20 +5,25 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
-/** @jsx jsx */
-import { Component } from 'react';
+import React, { Component } from 'react';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { Table } from '@instructure/ui-table';
 import { Flex } from '@instructure/ui-flex';
 import { Heading } from '@instructure/ui-heading';
+import { themeable } from '@instructure/ui-themeable';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
+import PropTypes from 'prop-types';
 import ChoiceTypeTableRow from "./ChoiceTypeTableRow/index.js";
 import { choiceTypeAnswerSummaryPropType } from "../../propTypes.js";
-import { withStyle, jsx } from '@instructure/emotion';
-import generateComponentTheme from "./theme.js";
-import generateStyle from "./styles.js";
-import PropTypes from 'prop-types';
-export var ChoiceType = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var styles = {
+  componentId: 'ZuPLN',
+  template: function template(theme) {
+    return "\n\n.ZuPLN_rMrG{display:flex;flex-basis:100%;flex-direction:column;padding-bottom:".concat(theme.tableBottomPadding || 'inherit', "}");
+  },
+  'tableWrapper': 'ZuPLN_rMrG'
+};
+import theme from "./theme.js";
+export var ChoiceType = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(ChoiceType, _Component);
 
   var _super = _createSuper(ChoiceType);
@@ -35,7 +40,7 @@ export var ChoiceType = (_dec = withStyle(generateStyle, generateComponentTheme)
     _this = _super.call.apply(_super, [this].concat(args));
 
     _this.renderRow = function (choice, choiceIndex) {
-      return jsx(ChoiceTypeTableRow, {
+      return /*#__PURE__*/React.createElement(ChoiceTypeTableRow, {
         key: choiceIndex,
         choice: choice,
         choiceIndex: choiceIndex
@@ -49,7 +54,7 @@ export var ChoiceType = (_dec = withStyle(generateStyle, generateComponentTheme)
         correct: false,
         count: payload.count
       };
-      return jsx(ChoiceTypeTableRow, {
+      return /*#__PURE__*/React.createElement(ChoiceTypeTableRow, {
         key: choiceIndex,
         choice: asChoice,
         choiceIndex: choiceIndex
@@ -72,42 +77,40 @@ export var ChoiceType = (_dec = withStyle(generateStyle, generateComponentTheme)
       var answerHeaderId = "answer-frequency-summary-answer-".concat(itemId);
       var respondentsHeaderId = "answer-frequency-summary-respondents-".concat(itemId);
       var percentageHeaderId = "answer-frequency-summary-percentage-".concat(itemId);
-      return jsx("div", null, jsx(Flex, {
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Flex, {
         direction: "row"
-      }, jsx(Flex.Item, {
+      }, /*#__PURE__*/React.createElement(Flex.Item, {
         shouldGrow: true
-      }, jsx("div", {
-        css: this.props.styles.tableWrapper
-      }, jsx(Heading, {
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.tableWrapper
+      }, /*#__PURE__*/React.createElement(Heading, {
         margin: "large 0 small 0",
         level: "h4",
-        themeOverride: {
+        theme: {
           h4FontWeight: 'normal'
         }
-      }, t('Answer Frequency Summary')), jsx(Table, {
+      }, t('Answer Frequency Summary')), /*#__PURE__*/React.createElement(Table, {
         caption: t('Answer Frequency Summary')
-      }, jsx(Table.Head, null, jsx(Table.Row, null, jsx(Table.ColHeader, {
+      }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.ColHeader, {
         id: spacingHeaderId,
         width: "46px"
-      }, jsx(ScreenReaderContent, null, t('Answer correctness'))), jsx(Table.ColHeader, {
+      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Answer correctness'))), /*#__PURE__*/React.createElement(Table.ColHeader, {
         id: answerHeaderId,
         height: "47px"
-      }, t('Answer')), jsx(Table.ColHeader, {
+      }, t('Answer')), /*#__PURE__*/React.createElement(Table.ColHeader, {
         id: respondentsHeaderId,
         height: "47px"
-      }, t('Respondents')), jsx(Table.ColHeader, {
+      }, t('Respondents')), /*#__PURE__*/React.createElement(Table.ColHeader, {
         id: percentageHeaderId,
         height: "47px",
         textAlign: "center"
-      }, t('%')))), jsx(Table.Body, null, choices.map(this.renderRow), this.renderNoAnswer(noAnswer, numberOfChoices)))))));
+      }, t('%')))), /*#__PURE__*/React.createElement(Table.Body, null, choices.map(this.renderRow), this.renderNoAnswer(noAnswer, numberOfChoices)))))));
     }
   }]);
 
   ChoiceType.displayName = "ChoiceType";
   return ChoiceType;
 }(Component), _class2.propTypes = {
-  itemId: PropTypes.number.isRequired,
-  answerSummary: choiceTypeAnswerSummaryPropType.isRequired,
-  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
-  styles: PropTypes.object
-}, _temp)) || _class);
+  itemId: PropTypes.number,
+  answerSummary: choiceTypeAnswerSummaryPropType
+}.isRequired, _temp)) || _class);

package/es/reporting/components/resources/NewQuizAndItemAnalysis/AnswerFrequencySummary/ChoiceType/theme.js

@@ -1,8 +1,6 @@
-var generateComponentTheme = function generateComponentTheme(_ref) {
+export default function generator(_ref) {
   var spacing = _ref.spacing;
   return {
-    tableBottomPadding: spacing === null || spacing === void 0 ? void 0 : spacing.medium
+    tableBottomPadding: spacing.medium
   };
-};
-
-export default generateComponentTheme;
+}

package/es/reporting/components/resources/NewQuizAndItemAnalysis/MetricPopover/presenter.js

@@ -86,7 +86,7 @@ export var MetricPopover = (_dec = themeable(theme, styles), _dec(_class = (_tem
         className: styles.popoverTitle,
         level: "h3"
       }, _this.props.title)), /*#__PURE__*/React.createElement("div", null, _this.props.subtitle && /*#__PURE__*/React.createElement(Heading, {
-        themeOverride: {
+        theme: {
           h5FontWeight: 700
         },
         level: "h5"
@@ -103,7 +103,7 @@ export var MetricPopover = (_dec = themeable(theme, styles), _dec(_class = (_tem
     value: function renderPopoverTrigger() {
       return /*#__PURE__*/React.createElement(IconButton, {
         size: "small",
-        themeOverride: {
+        theme: {
           smallHeight: '18px',
           transform: 'translateY(-1px)'
         },

package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewQuizAnalysis/presenter.js

@@ -89,7 +89,7 @@ export var NewQuizAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
         className: styles.heading
       }, /*#__PURE__*/React.createElement(Heading, {
         level: "h2",
-        themeOverride: {
+        theme: {
           h2FontWeight: 700
         },
         margin: "0 x-large 0 0",

package/es/reporting/components/resources/NewQuizAndItemAnalysis/charts/ScoreDistribution/presenter.js

@@ -56,7 +56,7 @@ export var ScoreDistribution = (_dec = themeable(theme, styles), _dec(_class = (
         className: styles.headingContainer
       }, /*#__PURE__*/React.createElement(Heading, {
         level: "h3",
-        themeOverride: {
+        theme: {
           h3FontWeight: 700
         }
       }, t('Score Distribution'))), /*#__PURE__*/React.createElement(QuintileDistribution, {

package/es/reporting/components/resources/NewQuizAndItemAnalysis/presenter.js

@@ -137,7 +137,7 @@ export var NewQuizAndItemAnalysisPresenter = /*#__PURE__*/function (_Component)
         color: "primary-inverse",
         margin: "0 0 x-small 0",
         onClick: _this.handleGeneration,
-        themeOverride: {
+        theme: {
           lineHeight: '24px'
         }
       }, /*#__PURE__*/React.createElement(Text, {

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

@@ -303,7 +303,7 @@ var BanksList = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _de
           className: styles.bankTitle
         }, /*#__PURE__*/_react.default.createElement(_uiLink.Link, {
           onClick: navigateToBank(bank.id),
-          themeOverride: {
+          theme: {
             color: _this.theme.bankTitleLinkColor,
             hoverColor: _this.theme.bankTitleLinkHoverColor
           },

package/lib/common/components/resources/stimulus/StimulusShowInfo/index.js

@@ -72,7 +72,7 @@ var StimulusShowInfo = /*#__PURE__*/function (_Component) {
         as: "h2",
         color: "primary",
         margin: "0 0 small",
-        themeOverride: {
+        theme: {
           h2FontWeight: '700'
         }
       }, this.props.stimulus.title), instructions, /*#__PURE__*/_react.default.createElement("div", {

package/lib/common/components/shared/TagDisplay/index.js

@@ -76,7 +76,7 @@ var TagDisplay = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _d
         className: styles.tags,
         "aria-label": (0, _formatMessage.default)('question tags')
       }, visible, extra > 0 && /*#__PURE__*/_react.default.createElement(_uiTag.Tag, {
-        themeOverride: {
+        theme: {
           defaultBackground: '#FFFFFF'
         },
         text: /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisMetric/presenter.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,7 +17,11 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _react = require("react");
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _utils = require("../utils.js");
 
@@ -23,13 +29,16 @@ var _uiMetric = require("@instructure/ui-metric");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _emotion = require("@instructure/emotion");
-
-var _styles = _interopRequireDefault(require("./styles.js"));
-
 var _dec, _class, _class2, _temp;
 
-var AnalysisMetric = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var styles = {
+  componentId: 'ethsC',
+  template: function template(theme) {
+    return "\n\n.ethsC_eckF{margin:0;max-width:159px;text-transform:capitalize}";
+  },
+  'metricLabel': 'ethsC_eckF'
+};
+var AnalysisMetric = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(AnalysisMetric, _Component);
 
   var _super = (0, _createSuper2.default)(AnalysisMetric);
@@ -47,15 +56,15 @@ var AnalysisMetric = (_dec = (0, _emotion.withStyle)(_styles.default, null), _de
           label = _this$props.label,
           value = _this$props.value,
           suffix = _this$props.suffix;
-      return (0, _emotion.jsx)(_uiMetric.Metric, {
-        themeOverride: {
+      return /*#__PURE__*/_react.default.createElement(_uiMetric.Metric, {
+        theme: {
           valueFontWeight: 500,
           padding: '0'
         },
         textAlign: "start",
         key: metricKey,
-        renderLabel: (0, _emotion.jsx)("p", {
-          css: this.props.styles.metricLabel
+        renderLabel: /*#__PURE__*/_react.default.createElement("p", {
+          className: styles.metricLabel
         }, label),
         renderValue: (0, _utils.getSanitizedMetricValue)(value, suffix)
       });
@@ -67,9 +76,7 @@ var AnalysisMetric = (_dec = (0, _emotion.withStyle)(_styles.default, null), _de
   metricKey: _propTypes.default.string.isRequired,
   label: _propTypes.default.string.isRequired,
   value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.array]),
-  suffix: _propTypes.default.string,
-  // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
-  styles: _propTypes.default.object
+  suffix: _propTypes.default.string
 }, _class2.defaultProps = {
   value: void 0,
   suffix: ''

package/lib/reporting/components/resources/NewQuizAndItemAnalysis/AnalysisMetric/theme.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator() {
+  return {};
+}