@instructure/quiz-core 20.0.0 → 20.0.1-rc.0

package/es/reporting/components/charts/CentileDistribution/presenter.js

@@ -5,24 +5,17 @@ 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 { range } from 'd3-array';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { Table } from '@instructure/ui-table';
 import Distribution from "../Distribution/index.js";
 import t from '@instructure/quiz-i18n/es/format-message';
-var styles = {
-  componentId: 'owVFv',
-  template: function template(theme) {
-    return "\n\n.owVFv_eAvm{display:flex;flex-direction:row;justify-content:center;overflow:hidden}\n\n.owVFv_eAvm>div{flex:0 1 51rem}\n\n.owVFv_eAvm svg{overflow:visible}\n\n@media screen and (--phoneBreakPoint){.owVFv_eAvm .owVFv_cKHw{font-size:".concat(theme.phoneBarLabelFontSize || 'inherit', "}.owVFv_eAvm .owVFv_eIKC g:nth-child(odd){display:none}}");
-  },
-  'centileRoot': 'owVFv_eAvm',
-  'barLabel': 'owVFv_cKHw',
-  'xAxis': 'owVFv_eIKC'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 
 var starBin = function starBin(props) {
   if (typeof props.starScore !== 'number') return;
@@ -31,7 +24,7 @@ var starBin = function starBin(props) {
   return Math.min(Math.floor(starScore * props.visualDistribution.length), props.visualDistribution.length - 1);
 };
 
-export var CentileDistribution = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var CentileDistribution = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(CentileDistribution, _Component);
 
   var _super = _createSuper(CentileDistribution);
@@ -80,13 +73,13 @@ export var CentileDistribution = (_dec = themeable(theme, styles), _dec(_class =
     };
 
     _this._renderTable = function () {
-      return /*#__PURE__*/React.createElement(ScreenReaderContent, null, /*#__PURE__*/React.createElement(Table, {
+      return jsx(ScreenReaderContent, null, jsx(Table, {
         caption: t('Score percentiles chart data')
-      }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.ColHeader, {
+      }, jsx(Table.Head, null, jsx(Table.Row, null, jsx(Table.ColHeader, {
         id: "score-percentiles-chart-data-score-percentile"
-      }, t('Score Percentile')), /*#__PURE__*/React.createElement(Table.ColHeader, {
+      }, t('Score Percentile')), jsx(Table.ColHeader, {
         id: "score-percentiles-chart-data-count"
-      }, t('Count')))), /*#__PURE__*/React.createElement(Table.Body, null, _this._renderTableRows())));
+      }, t('Count')))), jsx(Table.Body, null, _this._renderTableRows())));
     };
 
     return _this;
@@ -97,13 +90,13 @@ export var CentileDistribution = (_dec = themeable(theme, styles), _dec(_class =
     value: function _renderTableRows() {
       var chartData = this.props.visualDistribution;
       return chartData.map(function (count, index) {
-        return /*#__PURE__*/React.createElement(Table.Row, {
+        return jsx(Table.Row, {
           key: "".concat(index, ":").concat(count)
           /* eslint-disable-line react/jsx-no-literals, react/no-array-index-key */
 
-        }, /*#__PURE__*/React.createElement(Table.Cell, null, t('{percent}%', {
+        }, jsx(Table.Cell, null, t('{percent}%', {
           percent: index
-        })), /*#__PURE__*/React.createElement(Table.Cell, null, count));
+        })), jsx(Table.Cell, null, count));
       });
     }
   }, {
@@ -116,10 +109,11 @@ export var CentileDistribution = (_dec = themeable(theme, styles), _dec(_class =
         summarizeChart: this._summarizeChart,
         starIndex: starBin(this.props)
       });
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.centileRoot,
+      return jsx("div", {
+        className: "centileRoot",
+        css: this.props.styles.centileRoot,
         "data-automation": "sdk-reporting-centile-root"
-      }, /*#__PURE__*/React.createElement(Distribution, props));
+      }, jsx(Distribution, props));
     }
   }]);
 
@@ -147,7 +141,8 @@ export var CentileDistribution = (_dec = themeable(theme, styles), _dec(_class =
    * * A list of score values for each bucket.  Size of this array determines the number of buckets
    * */
   visualDistribution: PropTypes.arrayOf(PropTypes.node).isRequired,
-  starScore: PropTypes.number
+  starScore: PropTypes.number,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   animateDelay: 200,
   animateDuration: 900,

package/es/reporting/components/charts/CentileDistribution/styles.js

@@ -0,0 +1,30 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+var generateStyle = function generateStyle(componentTheme) {
+  var mq = "@media screen and ".concat(componentTheme.phoneBreakPoint);
+  return {
+    centileRoot: _defineProperty({
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'center',
+      overflow: 'hidden',
+      '& > div': {
+        flex: '0 1 51rem'
+      },
+      svg: {
+        overflow: 'visible'
+      }
+    }, mq, {
+      barLabel: {
+        fontSize: componentTheme.phoneBarLabelFontSize
+      },
+      xAxis: {
+        '&g:nth-child(2n+1)': {
+          display: 'none'
+        }
+      }
+    })
+  };
+};
+
+export default generateStyle;

package/es/reporting/components/charts/CentileDistribution/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
       typography = _ref.typography,
       breakpoints = _ref.breakpoints;
@@ -6,4 +6,6 @@ export default function generator(_ref) {
     phoneBreakPoint: "max-width: ".concat(breakpoints.medium),
     phoneBarLabelFontSize: typography.fontSizeLarge
   };
-}
+};
+
+export default generateComponentTheme;

package/es/reporting/components/charts/Distribution/presenter.js

@@ -5,25 +5,17 @@ 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 { max, range, sum } from 'd3-array';
 import { axisBottom } from 'd3-axis';
 import { scaleBand, scaleLinear } from 'd3-scale';
 import { select } from 'd3-selection';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx, css } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
-var styles = {
-  componentId: 'bIUJn',
-  template: function template(theme) {
-    return "\n\n.bIUJn_fKwc{fill:".concat(theme.barFillColor || 'inherit', "}\n\n.bIUJn_erik{fill:").concat(theme.barStarFillColor || 'inherit', "}\n\n.bIUJn_eIKC{color:").concat(theme.xAxisColor || 'inherit', "}\n\n.bIUJn_cKHw{color:").concat(theme.barLabelColor || 'inherit', ";font-family:").concat(theme.barLabelFontFamily || 'inherit', ";font-size:").concat(theme.barLabelFontSize || 'inherit', ";text-anchor:middle}");
-  },
-  'bar': 'bIUJn_fKwc',
-  'barStar': 'bIUJn_erik',
-  'xAxis': 'bIUJn_eIKC',
-  'barLabel': 'bIUJn_cKHw'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 import { ScreenReaderContent, PresentationContent } from '@instructure/ui-a11y-content';
 import { transition } from 'd3-transition';
 import flow from 'lodash/flow'; // Star path copied from instructure-icons/svg/Solid/star.svg
@@ -32,7 +24,7 @@ import flow from 'lodash/flow'; // Star path copied from instructure-icons/svg/S
 export var starPathData = 'M1915.918 737.475c-10.955-33.543-42.014-56.131-77.364-56.131h-612.029l-189.063-582.1v-.112C1026.394 65.588 995.335 43 959.984 43c-35.237 0-66.41 22.588-77.365 56.245L693.443 681.344H81.415c-35.35 0-66.41 22.588-77.365 56.131-10.955 33.544.79 70.137 29.478 91.03l495.247 359.831-189.177 582.212c-10.955 33.657 1.13 70.25 29.817 90.918 14.23 10.278 30.946 15.473 47.66 15.473 16.716 0 33.432-5.195 47.775-15.586l495.134-359.718 495.021 359.718c28.574 20.781 67.087 20.781 95.662.113 28.687-20.668 40.658-57.261 29.703-91.03l-189.176-582.1 495.36-359.83c28.574-20.894 40.433-57.487 29.364-91.03';
 var MARGIN_T = 0;
 var MARGIN_B = 28;
-export var Distribution = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var Distribution = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(Distribution, _Component);
 
   var _super = _createSuper(Distribution);
@@ -54,7 +46,7 @@ export var Distribution = (_dec = themeable(theme, styles), _dec(_class = (_temp
 
     _this._renderStar = function (svg) {
       if (typeof _this.props.starIndex !== 'number') return;
-      var star = svg.append('path').attr('d', starPathData).classed(styles.barStar, true);
+      var star = svg.append('path').attr('d', starPathData).attr('style', css(_this.props.styles.barStar).styles);
       var starIndex = _this.props.starIndex;
       var starX = _this.x(starIndex) + _this.x.bandwidth() / 2;
       var starY = _this.y(_this.props.visualDistribution[starIndex]) - 30; // scale the star down and position it on the x axis - y axis will be applied by animation
@@ -187,11 +179,11 @@ export var Distribution = (_dec = themeable(theme, styles), _dec(_class = (_temp
       this.calculateAxis(props);
       var svg = select(node).attr('role', 'document').attr('aria-role', 'document').attr('width', '100%').attr('height', '100%').attr('viewBox', "0 0 ".concat(this.width, " ").concat(this.viewportHeight)).attr('preserveAspectRatio', 'xMidYMax').append('g');
       this.title = Distribution.addTitle(svg, t('Score percentiles chart'));
-      svg.append('g').attr('class', styles.xAxis).attr('data-role', 'xAxis').attr('aria-hidden', true).attr('transform', "translate(0,".concat(this.height, ")")).call(this.xAxis).selectAll('text').attr('class', styles.barLabel).attr('y', 9);
+      svg.append('g').attr('class', 'xAxis').attr('style', css(this.props.styles.xAxis).styles).attr('data-role', 'xAxis').attr('aria-hidden', true).attr('transform', "translate(0,".concat(this.height, ")")).call(this.xAxis).selectAll('text').attr('class', 'barLabel').attr('style', css(this.props.styles.barLabel).styles).attr('y', 9);
       var clipKey = "clipPath".concat(this.width, "x").concat(this.height);
       var clipPath = svg.append('clipPath').attr('id', clipKey);
       clipPath.append('rect').attr('x', 0).attr('y', 0).attr('width', this.width).attr('height', this.height);
-      this.barContainer = svg.append('g').attr('class', styles.barContainer).attr('clip-path', "url(#".concat(clipKey, ")"));
+      this.barContainer = svg.append('g').attr('class', 'barContainer').attr('clip-path', "url(#".concat(clipKey, ")"));
       this.props.createChart(svg, this.width);
       return svg;
     }
@@ -216,12 +208,18 @@ export var Distribution = (_dec = themeable(theme, styles), _dec(_class = (_temp
   }, {
     key: "renderBars",
     value: function renderBars(node, props) {
+      var _this2 = this;
+
       this.chartData = props.visualDistribution;
       var height = this.height;
       var x = this.x;
       var y = this.y;
       var bars = node.selectAll('rect').data(this.chartData);
-      var rects = bars.enter().append('rect').classed(styles.bar, true).classed(styles.barStar, this._isStarred).attr('x', function (d, i) {
+      var rects = bars.enter().append('rect').attr('style', function (d, i) {
+        return _this2._isStarred(d, i) ? css(_this2.props.styles.barStar).styles : css(_this2.props.styles.bar).styles;
+      }).attr('class', function (d, i) {
+        return _this2._isStarred(d, i) ? 'barStar' : 'bar';
+      }).attr('x', function (d, i) {
         return x(i);
       }).attr('width', x.bandwidth());
       this.applyTransition(rects, function (rects) {
@@ -242,7 +240,7 @@ export var Distribution = (_dec = themeable(theme, styles), _dec(_class = (_temp
   }, {
     key: "renderSummary",
     value: function renderSummary() {
-      return /*#__PURE__*/React.createElement(ScreenReaderContent, null, this.summarizeChart());
+      return jsx(ScreenReaderContent, null, this.summarizeChart());
     }
   }, {
     key: "render",
@@ -253,20 +251,20 @@ export var Distribution = (_dec = themeable(theme, styles), _dec(_class = (_temp
       var viewportHeight = chartHeight + MARGIN_T + MARGIN_B; // IE11 sizes svg elements incorrectly, so we render a canvas element to
       // layout space for the chart, then position the svg absolute on top of it.
 
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PresentationContent, {
+      return jsx("div", null, jsx(PresentationContent, {
         as: "div"
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         style: {
           position: 'relative'
         }
-      }, /*#__PURE__*/React.createElement("canvas", {
+      }, jsx("canvas", {
         width: chartWidth,
         height: viewportHeight,
         style: {
           display: 'block',
           visibility: 'hidden'
         }
-      }), /*#__PURE__*/React.createElement("svg", {
+      }), jsx("svg", {
         ref: this.setChartRef,
         style: {
           position: 'absolute',
@@ -316,7 +314,8 @@ export var Distribution = (_dec = themeable(theme, styles), _dec(_class = (_temp
   renderTable: PropTypes.func,
   summarizeChart: PropTypes.func,
   updateChart: PropTypes.func,
-  starIndex: PropTypes.number
+  starIndex: PropTypes.number,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   animateDelay: 200,
   animateDuration: 900,

package/es/reporting/components/charts/Distribution/styles.js

@@ -0,0 +1,22 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    bar: {
+      fill: componentTheme.barFillColor
+    },
+    barStar: {
+      fill: componentTheme.barStarFillColor
+    },
+    barContainer: {},
+    xAxis: {
+      color: componentTheme.xAxisColor
+    },
+    barLabel: {
+      color: componentTheme.barLabelColor,
+      fontFamily: componentTheme.barLabelFontFamily,
+      fontSize: componentTheme.barLabelFontSize,
+      textAnchor: 'middle'
+    }
+  };
+};
+
+export default generateStyle;

package/es/reporting/components/charts/Distribution/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
       typography = _ref.typography;
   return {
@@ -9,4 +9,6 @@ export default function generator(_ref) {
     barLabelFontSize: typography.fontSizeSmall,
     xAxisColor: colors.textDarkest
   };
-}
+};
+
+export default generateComponentTheme;

package/es/reporting/components/charts/QuintileDistribution/presenter.js

@@ -5,23 +5,19 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
+
 /* eslint "no-mixed-operators": "warn" */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { PropTypes } from 'prop-types';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx, css } from '@instructure/emotion';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { Table } from '@instructure/ui-table';
 import t from '@instructure/quiz-i18n/es/format-message';
 import Distribution from "../Distribution/index.js";
-var styles = {
-  componentId: 'chSyh',
-  template: function template(theme) {
-    return "\n\n.chSyh_cKHw{color:".concat(theme.barLabelColor || 'inherit', ";font-family:").concat(theme.barLabelFontFamily || 'inherit', ";font-size:").concat(theme.barLabelFontSize || 'inherit', ";text-anchor:middle}");
-  },
-  'barLabel': 'chSyh_cKHw'
-};
-import theme from "./theme.js";
-export var QuintileDistribution = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var QuintileDistribution = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(QuintileDistribution, _Component);
 
   var _super = _createSuper(QuintileDistribution);
@@ -59,7 +55,7 @@ export var QuintileDistribution = (_dec = themeable(theme, styles), _dec(_class
     _this._renderNumbers = function (svg, x, y, applyTransition, barContainer, height) {
       var chartData = _this.props.visualDistribution;
       var numbers = barContainer.selectAll('text').data(chartData);
-      var texts = numbers.enter().insert('text', 'rect').classed(styles.barLabel, true).text(function (d) {
+      var texts = numbers.enter().insert('text', 'rect').attr('style', css(_this.props.styles.barLabel).styles).text(function (d) {
         return d;
       }).attr('x', function (d, i) {
         return x(i) + x.bandwidth() / 2;
@@ -79,13 +75,13 @@ export var QuintileDistribution = (_dec = themeable(theme, styles), _dec(_class
     };
 
     _this._renderTable = function () {
-      return /*#__PURE__*/React.createElement(ScreenReaderContent, null, /*#__PURE__*/React.createElement(Table, {
+      return jsx(ScreenReaderContent, null, jsx(Table, {
         caption: t('Score percentiles chart data')
-      }, /*#__PURE__*/React.createElement(Table.Head, null, /*#__PURE__*/React.createElement(Table.Row, null, /*#__PURE__*/React.createElement(Table.ColHeader, {
+      }, jsx(Table.Head, null, jsx(Table.Row, null, jsx(Table.ColHeader, {
         id: "score-percentiles-chart-data-score-percentile-range"
-      }, t('Score Percentile Range')), /*#__PURE__*/React.createElement(Table.ColHeader, {
+      }, t('Score Percentile Range')), jsx(Table.ColHeader, {
         id: "score-percentiles-chart-data-count"
-      }, t('Count')))), /*#__PURE__*/React.createElement(Table.Body, null, _this.renderTableRows())));
+      }, t('Count')))), jsx(Table.Body, null, _this.renderTableRows())));
     };
 
     return _this;
@@ -100,11 +96,11 @@ export var QuintileDistribution = (_dec = themeable(theme, styles), _dec(_class
       return chartData.map(function (count, index) {
         var label = _this2.calculateLabelForIndex(index);
 
-        return /*#__PURE__*/React.createElement(Table.Row, {
+        return jsx(Table.Row, {
           key: "".concat(label, ":").concat(count)
           /* eslint-disable-line react/jsx-no-literals */
 
-        }, /*#__PURE__*/React.createElement(Table.RowHeader, null, label), /*#__PURE__*/React.createElement(Table.Cell, null, count));
+        }, jsx(Table.RowHeader, null, label), jsx(Table.Cell, null, count));
       });
     }
   }, {
@@ -115,7 +111,7 @@ export var QuintileDistribution = (_dec = themeable(theme, styles), _dec(_class
         renderTable: this._renderTable,
         updateChart: this._renderNumbers
       });
-      return /*#__PURE__*/React.createElement(Distribution, props);
+      return jsx(Distribution, props);
     }
   }]);
 
@@ -149,7 +145,8 @@ export var QuintileDistribution = (_dec = themeable(theme, styles), _dec(_class
    * * Should return string which will be label for chart column.
    * * If undefined uses default column label calculation
    * */
-  calculateLabelForColumn: PropTypes.func
+  calculateLabelForColumn: PropTypes.func,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   animateDelay: 200,
   animateDuration: 900,

package/es/reporting/components/charts/QuintileDistribution/styles.js

@@ -0,0 +1,12 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    barLabel: {
+      color: componentTheme.barLabelColor,
+      fontFamily: componentTheme.barLabelFontFamily,
+      fontSize: componentTheme.barLabelFontSize,
+      textAnchor: 'middle'
+    }
+  };
+};
+
+export default generateStyle;

package/es/reporting/components/charts/QuintileDistribution/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
       typography = _ref.typography;
   return {
@@ -6,4 +6,6 @@ export default function generator(_ref) {
     barLabelFontFamily: typography.fontFamily,
     barLabelFontSize: typography.fontSizeSmall
   };
-}
+};
+
+export default generateComponentTheme;

package/lib/reporting/components/charts/CentileDistribution/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,13 +15,13 @@ 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 = require("prop-types");
 
 var _d3Array = require("d3-array");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _uiA11yContent = require("@instructure/ui-a11y-content");
 
@@ -33,20 +31,12 @@ var _index = _interopRequireDefault(require("../Distribution/index.js"));
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'owVFv',
-  template: function template(theme) {
-    return "\n\n.owVFv_eAvm{display:flex;flex-direction:row;justify-content:center;overflow:hidden}\n\n.owVFv_eAvm>div{flex:0 1 51rem}\n\n.owVFv_eAvm svg{overflow:visible}\n\n@media screen and (--phoneBreakPoint){.owVFv_eAvm .owVFv_cKHw{font-size:".concat(theme.phoneBarLabelFontSize || 'inherit', "}.owVFv_eAvm .owVFv_eIKC g:nth-child(odd){display:none}}");
-  },
-  'centileRoot': 'owVFv_eAvm',
-  'barLabel': 'owVFv_cKHw',
-  'xAxis': 'owVFv_eIKC'
-};
-
 var starBin = function starBin(props) {
   if (typeof props.starScore !== 'number') return;
   var starScore = Math.max(0, Math.min(props.starScore, 1)); // min+floor here matches quiz_etl HistogramHelper
@@ -54,7 +44,7 @@ var starBin = function starBin(props) {
   return Math.min(Math.floor(starScore * props.visualDistribution.length), props.visualDistribution.length - 1);
 };
 
-var CentileDistribution = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var CentileDistribution = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CentileDistribution, _Component);
 
   var _super = (0, _createSuper2.default)(CentileDistribution);
@@ -103,13 +93,13 @@ var CentileDistribution = (_dec = (0, _uiThemeable.themeable)(_theme.default, st
     };
 
     _this._renderTable = function () {
-      return /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table, {
+      return (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _emotion.jsx)(_uiTable.Table, {
         caption: (0, _formatMessage.default)('Score percentiles chart data')
-      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Head, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+      }, (0, _emotion.jsx)(_uiTable.Table.Head, null, (0, _emotion.jsx)(_uiTable.Table.Row, null, (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
         id: "score-percentiles-chart-data-score-percentile"
-      }, (0, _formatMessage.default)('Score Percentile')), /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+      }, (0, _formatMessage.default)('Score Percentile')), (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
         id: "score-percentiles-chart-data-count"
-      }, (0, _formatMessage.default)('Count')))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Body, null, _this._renderTableRows())));
+      }, (0, _formatMessage.default)('Count')))), (0, _emotion.jsx)(_uiTable.Table.Body, null, _this._renderTableRows())));
     };
 
     return _this;
@@ -120,13 +110,13 @@ var CentileDistribution = (_dec = (0, _uiThemeable.themeable)(_theme.default, st
     value: function _renderTableRows() {
       var chartData = this.props.visualDistribution;
       return chartData.map(function (count, index) {
-        return /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, {
+        return (0, _emotion.jsx)(_uiTable.Table.Row, {
           key: "".concat(index, ":").concat(count)
           /* eslint-disable-line react/jsx-no-literals, react/no-array-index-key */
 
-        }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, null, (0, _formatMessage.default)('{percent}%', {
+        }, (0, _emotion.jsx)(_uiTable.Table.Cell, null, (0, _formatMessage.default)('{percent}%', {
           percent: index
-        })), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, null, count));
+        })), (0, _emotion.jsx)(_uiTable.Table.Cell, null, count));
       });
     }
   }, {
@@ -139,10 +129,11 @@ var CentileDistribution = (_dec = (0, _uiThemeable.themeable)(_theme.default, st
         summarizeChart: this._summarizeChart,
         starIndex: starBin(this.props)
       });
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.centileRoot,
+      return (0, _emotion.jsx)("div", {
+        className: "centileRoot",
+        css: this.props.styles.centileRoot,
         "data-automation": "sdk-reporting-centile-root"
-      }, /*#__PURE__*/_react.default.createElement(_index.default, props));
+      }, (0, _emotion.jsx)(_index.default, props));
     }
   }]);
   CentileDistribution.displayName = "CentileDistribution";
@@ -169,7 +160,8 @@ var CentileDistribution = (_dec = (0, _uiThemeable.themeable)(_theme.default, st
    * * A list of score values for each bucket.  Size of this array determines the number of buckets
    * */
   visualDistribution: _propTypes.PropTypes.arrayOf(_propTypes.PropTypes.node).isRequired,
-  starScore: _propTypes.PropTypes.number
+  starScore: _propTypes.PropTypes.number,
+  styles: _propTypes.PropTypes.object
 }, _class2.defaultProps = {
   animateDelay: 200,
   animateDuration: 900,

package/lib/reporting/components/charts/CentileDistribution/styles.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var generateStyle = function generateStyle(componentTheme) {
+  var mq = "@media screen and ".concat(componentTheme.phoneBreakPoint);
+  return {
+    centileRoot: (0, _defineProperty2.default)({
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'center',
+      overflow: 'hidden',
+      '& > div': {
+        flex: '0 1 51rem'
+      },
+      svg: {
+        overflow: 'visible'
+      }
+    }, mq, {
+      barLabel: {
+        fontSize: componentTheme.phoneBarLabelFontSize
+      },
+      xAxis: {
+        '&g:nth-child(2n+1)': {
+          display: 'none'
+        }
+      }
+    })
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/reporting/components/charts/CentileDistribution/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 colors = _ref.colors,
       typography = _ref.typography,
       breakpoints = _ref.breakpoints;
@@ -13,4 +13,7 @@ function generator(_ref) {
     phoneBreakPoint: "max-width: ".concat(breakpoints.medium),
     phoneBarLabelFontSize: typography.fontSizeLarge
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/reporting/components/charts/Distribution/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 = require("prop-types");
 
@@ -29,10 +27,12 @@ var _d3Scale = require("d3-scale");
 
 var _d3Selection = require("d3-selection");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _uiA11yContent = require("@instructure/ui-a11y-content");
@@ -43,23 +43,13 @@ var _flow = _interopRequireDefault(require("lodash/flow"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'bIUJn',
-  template: function template(theme) {
-    return "\n\n.bIUJn_fKwc{fill:".concat(theme.barFillColor || 'inherit', "}\n\n.bIUJn_erik{fill:").concat(theme.barStarFillColor || 'inherit', "}\n\n.bIUJn_eIKC{color:").concat(theme.xAxisColor || 'inherit', "}\n\n.bIUJn_cKHw{color:").concat(theme.barLabelColor || 'inherit', ";font-family:").concat(theme.barLabelFontFamily || 'inherit', ";font-size:").concat(theme.barLabelFontSize || 'inherit', ";text-anchor:middle}");
-  },
-  'bar': 'bIUJn_fKwc',
-  'barStar': 'bIUJn_erik',
-  'xAxis': 'bIUJn_eIKC',
-  'barLabel': 'bIUJn_cKHw'
-};
 // Star path copied from instructure-icons/svg/Solid/star.svg
 // eslint-disable-next-line max-len
 var starPathData = 'M1915.918 737.475c-10.955-33.543-42.014-56.131-77.364-56.131h-612.029l-189.063-582.1v-.112C1026.394 65.588 995.335 43 959.984 43c-35.237 0-66.41 22.588-77.365 56.245L693.443 681.344H81.415c-35.35 0-66.41 22.588-77.365 56.131-10.955 33.544.79 70.137 29.478 91.03l495.247 359.831-189.177 582.212c-10.955 33.657 1.13 70.25 29.817 90.918 14.23 10.278 30.946 15.473 47.66 15.473 16.716 0 33.432-5.195 47.775-15.586l495.134-359.718 495.021 359.718c28.574 20.781 67.087 20.781 95.662.113 28.687-20.668 40.658-57.261 29.703-91.03l-189.176-582.1 495.36-359.83c28.574-20.894 40.433-57.487 29.364-91.03';
 exports.starPathData = starPathData;
 var MARGIN_T = 0;
 var MARGIN_B = 28;
-var Distribution = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var Distribution = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(Distribution, _Component);
 
   var _super = (0, _createSuper2.default)(Distribution);
@@ -81,7 +71,7 @@ var Distribution = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
 
     _this._renderStar = function (svg) {
       if (typeof _this.props.starIndex !== 'number') return;
-      var star = svg.append('path').attr('d', starPathData).classed(styles.barStar, true);
+      var star = svg.append('path').attr('d', starPathData).attr('style', (0, _emotion.css)(_this.props.styles.barStar).styles);
       var starIndex = _this.props.starIndex;
       var starX = _this.x(starIndex) + _this.x.bandwidth() / 2;
       var starY = _this.y(_this.props.visualDistribution[starIndex]) - 30; // scale the star down and position it on the x axis - y axis will be applied by animation
@@ -214,11 +204,11 @@ var Distribution = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
       this.calculateAxis(props);
       var svg = (0, _d3Selection.select)(node).attr('role', 'document').attr('aria-role', 'document').attr('width', '100%').attr('height', '100%').attr('viewBox', "0 0 ".concat(this.width, " ").concat(this.viewportHeight)).attr('preserveAspectRatio', 'xMidYMax').append('g');
       this.title = Distribution.addTitle(svg, (0, _formatMessage.default)('Score percentiles chart'));
-      svg.append('g').attr('class', styles.xAxis).attr('data-role', 'xAxis').attr('aria-hidden', true).attr('transform', "translate(0,".concat(this.height, ")")).call(this.xAxis).selectAll('text').attr('class', styles.barLabel).attr('y', 9);
+      svg.append('g').attr('class', 'xAxis').attr('style', (0, _emotion.css)(this.props.styles.xAxis).styles).attr('data-role', 'xAxis').attr('aria-hidden', true).attr('transform', "translate(0,".concat(this.height, ")")).call(this.xAxis).selectAll('text').attr('class', 'barLabel').attr('style', (0, _emotion.css)(this.props.styles.barLabel).styles).attr('y', 9);
       var clipKey = "clipPath".concat(this.width, "x").concat(this.height);
       var clipPath = svg.append('clipPath').attr('id', clipKey);
       clipPath.append('rect').attr('x', 0).attr('y', 0).attr('width', this.width).attr('height', this.height);
-      this.barContainer = svg.append('g').attr('class', styles.barContainer).attr('clip-path', "url(#".concat(clipKey, ")"));
+      this.barContainer = svg.append('g').attr('class', 'barContainer').attr('clip-path', "url(#".concat(clipKey, ")"));
       this.props.createChart(svg, this.width);
       return svg;
     }
@@ -243,12 +233,18 @@ var Distribution = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   }, {
     key: "renderBars",
     value: function renderBars(node, props) {
+      var _this2 = this;
+
       this.chartData = props.visualDistribution;
       var height = this.height;
       var x = this.x;
       var y = this.y;
       var bars = node.selectAll('rect').data(this.chartData);
-      var rects = bars.enter().append('rect').classed(styles.bar, true).classed(styles.barStar, this._isStarred).attr('x', function (d, i) {
+      var rects = bars.enter().append('rect').attr('style', function (d, i) {
+        return _this2._isStarred(d, i) ? (0, _emotion.css)(_this2.props.styles.barStar).styles : (0, _emotion.css)(_this2.props.styles.bar).styles;
+      }).attr('class', function (d, i) {
+        return _this2._isStarred(d, i) ? 'barStar' : 'bar';
+      }).attr('x', function (d, i) {
         return x(i);
       }).attr('width', x.bandwidth());
       this.applyTransition(rects, function (rects) {
@@ -269,7 +265,7 @@ var Distribution = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   }, {
     key: "renderSummary",
     value: function renderSummary() {
-      return /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, this.summarizeChart());
+      return (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, this.summarizeChart());
     }
   }, {
     key: "render",
@@ -280,20 +276,20 @@ var Distribution = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
       var viewportHeight = chartHeight + MARGIN_T + MARGIN_B; // IE11 sizes svg elements incorrectly, so we render a canvas element to
       // layout space for the chart, then position the svg absolute on top of it.
 
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, {
+      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_uiA11yContent.PresentationContent, {
         as: "div"
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _emotion.jsx)("div", {
         style: {
           position: 'relative'
         }
-      }, /*#__PURE__*/_react.default.createElement("canvas", {
+      }, (0, _emotion.jsx)("canvas", {
         width: chartWidth,
         height: viewportHeight,
         style: {
           display: 'block',
           visibility: 'hidden'
         }
-      }), /*#__PURE__*/_react.default.createElement("svg", {
+      }), (0, _emotion.jsx)("svg", {
         ref: this.setChartRef,
         style: {
           position: 'absolute',
@@ -342,7 +338,8 @@ var Distribution = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   renderTable: _propTypes.PropTypes.func,
   summarizeChart: _propTypes.PropTypes.func,
   updateChart: _propTypes.PropTypes.func,
-  starIndex: _propTypes.PropTypes.number
+  starIndex: _propTypes.PropTypes.number,
+  styles: _propTypes.PropTypes.object
 }, _class2.defaultProps = {
   animateDelay: 200,
   animateDuration: 900,

package/lib/reporting/components/charts/Distribution/styles.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    bar: {
+      fill: componentTheme.barFillColor
+    },
+    barStar: {
+      fill: componentTheme.barStarFillColor
+    },
+    barContainer: {},
+    xAxis: {
+      color: componentTheme.xAxisColor
+    },
+    barLabel: {
+      color: componentTheme.barLabelColor,
+      fontFamily: componentTheme.barLabelFontFamily,
+      fontSize: componentTheme.barLabelFontSize,
+      textAnchor: 'middle'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/reporting/components/charts/Distribution/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 colors = _ref.colors,
       typography = _ref.typography;
   return {
@@ -16,4 +16,7 @@ function generator(_ref) {
     barLabelFontSize: typography.fontSizeSmall,
     xAxisColor: colors.textDarkest
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/reporting/components/charts/QuintileDistribution/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,11 +15,11 @@ 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 = require("prop-types");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _uiA11yContent = require("@instructure/ui-a11y-content");
 
@@ -31,18 +29,13 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
 
 var _index = _interopRequireDefault(require("../Distribution/index.js"));
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'chSyh',
-  template: function template(theme) {
-    return "\n\n.chSyh_cKHw{color:".concat(theme.barLabelColor || 'inherit', ";font-family:").concat(theme.barLabelFontFamily || 'inherit', ";font-size:").concat(theme.barLabelFontSize || 'inherit', ";text-anchor:middle}");
-  },
-  'barLabel': 'chSyh_cKHw'
-};
-var QuintileDistribution = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var QuintileDistribution = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(QuintileDistribution, _Component);
 
   var _super = (0, _createSuper2.default)(QuintileDistribution);
@@ -80,7 +73,7 @@ var QuintileDistribution = (_dec = (0, _uiThemeable.themeable)(_theme.default, s
     _this._renderNumbers = function (svg, x, y, applyTransition, barContainer, height) {
       var chartData = _this.props.visualDistribution;
       var numbers = barContainer.selectAll('text').data(chartData);
-      var texts = numbers.enter().insert('text', 'rect').classed(styles.barLabel, true).text(function (d) {
+      var texts = numbers.enter().insert('text', 'rect').attr('style', (0, _emotion.css)(_this.props.styles.barLabel).styles).text(function (d) {
         return d;
       }).attr('x', function (d, i) {
         return x(i) + x.bandwidth() / 2;
@@ -100,13 +93,13 @@ var QuintileDistribution = (_dec = (0, _uiThemeable.themeable)(_theme.default, s
     };
 
     _this._renderTable = function () {
-      return /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table, {
+      return (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _emotion.jsx)(_uiTable.Table, {
         caption: (0, _formatMessage.default)('Score percentiles chart data')
-      }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Head, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, null, /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+      }, (0, _emotion.jsx)(_uiTable.Table.Head, null, (0, _emotion.jsx)(_uiTable.Table.Row, null, (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
         id: "score-percentiles-chart-data-score-percentile-range"
-      }, (0, _formatMessage.default)('Score Percentile Range')), /*#__PURE__*/_react.default.createElement(_uiTable.Table.ColHeader, {
+      }, (0, _formatMessage.default)('Score Percentile Range')), (0, _emotion.jsx)(_uiTable.Table.ColHeader, {
         id: "score-percentiles-chart-data-count"
-      }, (0, _formatMessage.default)('Count')))), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Body, null, _this.renderTableRows())));
+      }, (0, _formatMessage.default)('Count')))), (0, _emotion.jsx)(_uiTable.Table.Body, null, _this.renderTableRows())));
     };
 
     return _this;
@@ -121,11 +114,11 @@ var QuintileDistribution = (_dec = (0, _uiThemeable.themeable)(_theme.default, s
       return chartData.map(function (count, index) {
         var label = _this2.calculateLabelForIndex(index);
 
-        return /*#__PURE__*/_react.default.createElement(_uiTable.Table.Row, {
+        return (0, _emotion.jsx)(_uiTable.Table.Row, {
           key: "".concat(label, ":").concat(count)
           /* eslint-disable-line react/jsx-no-literals */
 
-        }, /*#__PURE__*/_react.default.createElement(_uiTable.Table.RowHeader, null, label), /*#__PURE__*/_react.default.createElement(_uiTable.Table.Cell, null, count));
+        }, (0, _emotion.jsx)(_uiTable.Table.RowHeader, null, label), (0, _emotion.jsx)(_uiTable.Table.Cell, null, count));
       });
     }
   }, {
@@ -136,7 +129,7 @@ var QuintileDistribution = (_dec = (0, _uiThemeable.themeable)(_theme.default, s
         renderTable: this._renderTable,
         updateChart: this._renderNumbers
       });
-      return /*#__PURE__*/_react.default.createElement(_index.default, props);
+      return (0, _emotion.jsx)(_index.default, props);
     }
   }]);
   QuintileDistribution.displayName = "QuintileDistribution";
@@ -169,7 +162,8 @@ var QuintileDistribution = (_dec = (0, _uiThemeable.themeable)(_theme.default, s
    * * Should return string which will be label for chart column.
    * * If undefined uses default column label calculation
    * */
-  calculateLabelForColumn: _propTypes.PropTypes.func
+  calculateLabelForColumn: _propTypes.PropTypes.func,
+  styles: _propTypes.PropTypes.object
 }, _class2.defaultProps = {
   animateDelay: 200,
   animateDuration: 900,

package/lib/reporting/components/charts/QuintileDistribution/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    barLabel: {
+      color: componentTheme.barLabelColor,
+      fontFamily: componentTheme.barLabelFontFamily,
+      fontSize: componentTheme.barLabelFontSize,
+      textAnchor: 'middle'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/reporting/components/charts/QuintileDistribution/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 colors = _ref.colors,
       typography = _ref.typography;
   return {
@@ -13,4 +13,7 @@ function generator(_ref) {
     barLabelFontFamily: typography.fontFamily,
     barLabelFontSize: typography.fontSizeSmall
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "20.0.0",
+  "version": "20.0.1-rc.0+d73dfdd1f",
   "license": "MIT",
   "description": "The Quiz React SDK by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
@@ -44,11 +44,11 @@
     "@instructure/emotion": "^8.48.3",
     "@instructure/grading-utils": "^1.0.0",
     "@instructure/outcomes-ui": "^2.1.9",
-    "@instructure/quiz-common": "^20.0.0",
-    "@instructure/quiz-i18n": "^20.0.0",
-    "@instructure/quiz-interactions": "^20.0.0",
-    "@instructure/quiz-number-input": "^20.0.0",
-    "@instructure/quiz-rce": "^20.0.0",
+    "@instructure/quiz-common": "20.0.1-rc.0+d73dfdd1f",
+    "@instructure/quiz-i18n": "20.0.1-rc.0+d73dfdd1f",
+    "@instructure/quiz-interactions": "20.0.1-rc.0+d73dfdd1f",
+    "@instructure/quiz-number-input": "20.0.1-rc.0+d73dfdd1f",
+    "@instructure/quiz-rce": "20.0.1-rc.0+d73dfdd1f",
     "@instructure/ui-a11y-content": "^8.48.3",
     "@instructure/ui-alerts": "^8.48.3",
     "@instructure/ui-avatar": "^8.48.3",
@@ -110,7 +110,7 @@
     "file-saver": "~2.0.5",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "^20.0.0",
+    "instructure-validations": "20.0.1-rc.0+d73dfdd1f",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -142,7 +142,7 @@
     "uuid": "^3.2.1"
   },
   "devDependencies": {
-    "@instructure/quiz-scripts": "^20.0.0",
+    "@instructure/quiz-scripts": "20.0.0",
     "@instructure/ui-axe-check": "^8.48.3",
     "@instructure/ui-babel-preset": "^7.22.1",
     "@instructure/ui-karma-config": "^7.22.1",
@@ -162,7 +162,7 @@
     "intl": "^1.2.4",
     "jquery": "^2.2.3",
     "most-subject": "^5.3.0",
-    "quiz-presets": "^20.0.0",
+    "quiz-presets": "20.0.1-rc.0+d73dfdd1f",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -178,5 +178,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "76d9fc4082ab232befa2d3d206efeb51c0415966"
+  "gitHead": "d73dfdd1f711381c3a637e104a9295d4963d45a9"
 }