@instructure/quiz-core 20.9.0 → 20.9.1-rc.1

package/es/common/components/layout/header/Timer/presenter.js

@@ -5,7 +5,8 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
-import React, { Component } from 'react';
+/** @jsx jsx */
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import partial from 'lodash/partial';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
@@ -13,27 +14,18 @@ import { IconClockLine, IconClockSolid, IconArrowOpenStartLine } from '@instruct
 import { Button } from '@instructure/ui-buttons';
 import { TopNavBar } from '@instructure/ui-top-nav-bar';
 import { View } from '@instructure/ui-view';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import FormattedDuration from "../../../shared/FormattedDuration/index.js";
 import { formatTime } from "../../../../util/formatTimespan.js";
-var styles = {
-  componentId: 'fBhoO',
-  template: function template(theme) {
-    return "\n\n.fBhoO_dAhe{flex-direction:row;font-size:".concat(theme.timerFontSize || 'inherit', ";justify-content:center;line-height:1rem}\n\n.fBhoO_dAhe,.fBhoO_Swlx{align-items:center;display:flex}\n\n.fBhoO_Swlx{flex-direction:column-reverse}\n\n.fBhoO_dkDW{padding:").concat(theme.timerRightPadding || 'inherit', "}\n\n.fBhoO_bYJj{font-size:").concat(theme.timeRemainingLabelFontSize || 'inherit', ";text-align:center;width:100%}\n\n[dir=ltr] .fBhoO_bYJj,[dir=rtl] .fBhoO_bYJj{text-align:center}");
-  },
-  'timer': 'fBhoO_dAhe',
-  'timerLeft': 'fBhoO_Swlx',
-  'timerRight': 'fBhoO_dkDW',
-  'timeRemainingLabel': 'fBhoO_bYJj'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 import t from '@instructure/quiz-i18n/es/format-message';
 
-var _ref = /*#__PURE__*/React.createElement(IconClockLine, null);
+var _ref = jsx(IconClockLine, null);
 
-var _ref2 = /*#__PURE__*/React.createElement(IconClockSolid, null);
+var _ref2 = jsx(IconClockSolid, null);
 
-export var Timer = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var Timer = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(Timer, _Component);
 
   var _super = _createSuper(Timer);
@@ -119,13 +111,13 @@ export var Timer = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
   }, {
     key: "renderHelpScreenreaderText",
     value: function renderHelpScreenreaderText() {
-      return /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('During the quiz, press Alt+Shift+T to have the remaining time read'));
+      return jsx(ScreenReaderContent, null, t('During the quiz, press Alt+Shift+T to have the remaining time read'));
     }
   }, {
     key: "renderMinimizedTimer",
     value: function renderMinimizedTimer() {
       if (this.props.iceTopNavBarEnabled) {
-        return /*#__PURE__*/React.createElement(TopNavBar.Item, {
+        return jsx(TopNavBar.Item, {
           id: "TimerButton",
           onClick: partial(this.props.updateTimerMinimized, false),
           variant: "icon",
@@ -136,20 +128,20 @@ export var Timer = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
         }, t('Show Timer'));
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.timer
-      }, this.renderHelpScreenreaderText(), /*#__PURE__*/React.createElement(Button, {
+      return jsx("div", {
+        css: this.props.styles.timer
+      }, this.renderHelpScreenreaderText(), jsx(Button, {
         "aria-expanded": "false",
         ref: this.showTimerRef,
         renderIcon: IconClockLine,
         onClick: partial(this.props.updateTimerMinimized, false)
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Show Timer'))));
+      }, jsx(ScreenReaderContent, null, t('Show Timer'))));
     }
   }, {
     key: "renderMaximizedTimer",
     value: function renderMaximizedTimer() {
       if (this.props.iceTopNavBarEnabled) {
-        return /*#__PURE__*/React.createElement(TopNavBar.Item, {
+        return jsx(TopNavBar.Item, {
           id: "TimerButton",
           onClick: partial(this.props.updateTimerMinimized, true),
           variant: "forceIconWithLabel",
@@ -157,29 +149,29 @@ export var Timer = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
           tooltip: t('Hide Timer'),
           "aria-expanded": "true",
           itemRef: this.hideTimerRef
-        }, /*#__PURE__*/React.createElement(FormattedDuration, {
+        }, jsx(FormattedDuration, {
           seconds: this.props.timeLeftInSeconds
         }));
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.timer
-      }, this.renderHelpScreenreaderText(), /*#__PURE__*/React.createElement(View, {
+      return jsx("div", {
+        css: this.props.styles.timer
+      }, this.renderHelpScreenreaderText(), jsx(View, {
         as: "div"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.timerLeft
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.timeRemainingLabel
-      }, t('Time Remaining')), /*#__PURE__*/React.createElement(FormattedDuration, {
+      }, jsx("div", {
+        css: this.props.styles.timerLeft
+      }, jsx("div", {
+        css: this.props.styles.timeRemainingLabel
+      }, t('Time Remaining')), jsx(FormattedDuration, {
         seconds: this.props.timeLeftInSeconds
-      }))), /*#__PURE__*/React.createElement("div", {
-        className: styles.timerRight
-      }, /*#__PURE__*/React.createElement(Button, {
+      }))), jsx("div", {
+        css: this.props.styles.timerRight
+      }, jsx(Button, {
         "aria-expanded": "true",
         ref: this.hideTimerRef,
         renderIcon: IconArrowOpenStartLine,
         onClick: partial(this.props.updateTimerMinimized, true)
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Hide Timer')))));
+      }, jsx(ScreenReaderContent, null, t('Hide Timer')))));
     }
   }, {
     key: "render",
@@ -204,7 +196,8 @@ export var Timer = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cla
   timerRunning: PropTypes.bool,
   updateTimerMinimized: PropTypes.func.isRequired,
   iceTopNavBarEnabled: PropTypes.bool,
-  setTimerEnabled: PropTypes.func
+  setTimerEnabled: PropTypes.func,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   timerRunning: false,
   timeLeftInSeconds: 0,

package/es/common/components/layout/header/Timer/styles.js

@@ -0,0 +1,27 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    timer: {
+      lineHeight: '1rem',
+      fontSize: componentTheme.timerFontSize,
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    timerLeft: {
+      display: 'flex',
+      flexDirection: 'column-reverse',
+      alignItems: 'center'
+    },
+    timerRight: {
+      padding: componentTheme.timerRightPadding
+    },
+    timeRemainingLabel: {
+      fontSize: componentTheme.timeRemainingLabelFontSize,
+      width: '100%',
+      textAlign: 'center'
+    }
+  };
+};
+
+export default generateStyle;

package/es/common/components/layout/header/Timer/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       borders = _ref.borders,
       colors = _ref.colors,
@@ -15,4 +15,6 @@ export default function generator(_ref) {
     timerRightPadding: spacing.xxSmall,
     timeRemainingLabelFontSize: typography.fontSizeXSmall
   };
-}
+};
+
+export default generateComponentTheme;

package/es/common/components/layout/sidebar/PositionSummary/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,24 +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';
-var styles = {
-  componentId: 'CixOW',
-  template: function template(theme) {
-    return "\n\n.CixOW_bZNM{display:flex;flex-flow:column}\n\n.CixOW_dlMM{padding-bottom:".concat(theme.firstNumberSummaryPadding || 'inherit', "}\n\n.CixOW_dWEq{padding-top:").concat(theme.secondNumberSummaryPadding || 'inherit', "}\n\n.CixOW_fJqn{color:").concat(theme.numberSummaryColor || 'inherit', ";font-size:").concat(theme.numberSummaryFontSize || 'inherit', ";font-weight:").concat(theme.numberSummaryFontWeight || 'inherit', ";margin:auto}\n\n.CixOW_EKnN{border-color:").concat(theme.verticalDotsBorderColor || 'inherit', ";border-left:dotted ").concat(theme.verticalDotsBorderWidth || 'inherit', ";height:1.5rem;margin:auto}");
-  },
-  'column': 'CixOW_bZNM',
-  'firstNumberSummary': 'CixOW_dlMM',
-  'secondNumberSummary': 'CixOW_dWEq',
-  'numberSummary': 'CixOW_fJqn',
-  'verticalDots': 'CixOW_EKnN'
-};
-import theme from "./theme.js";
+import { withStyle, jsx } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 import t from '@instructure/quiz-i18n/es/format-message';
-export var PositionSummary = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var PositionSummary = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(PositionSummary, _Component);
 
   var _super = _createSuper(PositionSummary);
@@ -36,16 +27,16 @@ export var PositionSummary = (_dec = themeable(theme, styles), _dec(_class = (_t
   _createClass(PositionSummary, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.column
-      }, /*#__PURE__*/React.createElement("div", {
-        className: classNames([styles.numberSummary, styles.firstNumberSummary])
+      return jsx("div", {
+        css: this.props.styles.column
+      }, jsx("div", {
+        css: _objectSpread(_objectSpread({}, this.props.styles.numberSummary), this.props.styles.firstNumberSummary)
       }, t('{first, number}', {
         first: this.props.firstPosition
-      })), /*#__PURE__*/React.createElement("div", {
-        className: styles.verticalDots
-      }), /*#__PURE__*/React.createElement("div", {
-        className: classNames([styles.numberSummary, styles.secondNumberSummary])
+      })), jsx("div", {
+        css: this.props.styles.verticalDots
+      }), jsx("div", {
+        css: _objectSpread(_objectSpread({}, this.props.styles.numberSummary), this.props.styles.secondNumberSummary)
       }, t('{last, number}', {
         last: this.props.lastPosition
       })));
@@ -56,6 +47,7 @@ export var PositionSummary = (_dec = themeable(theme, styles), _dec(_class = (_t
   return PositionSummary;
 }(Component), _class2.propTypes = {
   firstPosition: PropTypes.number.isRequired,
-  lastPosition: PropTypes.number.isRequired
+  lastPosition: PropTypes.number.isRequired,
+  styles: PropTypes.object
 }, _temp)) || _class);
 export default PositionSummary;

package/es/common/components/layout/sidebar/PositionSummary/styles.js

@@ -0,0 +1,28 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    column: {
+      display: 'flex',
+      flexFlow: 'column'
+    },
+    firstNumberSummary: {
+      paddingBottom: "".concat(componentTheme.firstNumberSummaryPadding)
+    },
+    secondNumberSummary: {
+      paddingTop: "".concat(componentTheme.secondNumberSummaryPadding)
+    },
+    numberSummary: {
+      color: componentTheme.numberSummaryColor,
+      fontSize: componentTheme.numberSummaryFontSize,
+      fontWeight: componentTheme.numberSummaryFontWeight,
+      margin: 'auto'
+    },
+    verticalDots: {
+      margin: 'auto',
+      height: '1.5rem',
+      borderLeft: "dotted ".concat(componentTheme.verticalDotsBorderWidth),
+      borderColor: componentTheme.verticalDotsBorderColor
+    }
+  };
+};
+
+export default generateStyle;

package/es/common/components/layout/sidebar/PositionSummary/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
       spacing = _ref.spacing,
       borders = _ref.borders,
@@ -12,4 +12,6 @@ export default function generator(_ref) {
     verticalDotsBorderWidth: borders.widthSmall,
     verticalDotsBorderColor: colors.licorice
   };
-}
+};
+
+export default generateComponentTheme;

package/es/common/components/layout/sidebar/Sidebar/index.js

@@ -1,4 +1,4 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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";
@@ -6,19 +6,20 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
+/** @jsx jsx */
+
 /* eslint "jsx-a11y/click-events-have-key-events": "warn" */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { List } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import classNames from 'classnames';
 import { IconMoveStartLine, IconMoveEndLine, IconPinSolid, IconQuizInstructionsLine, IconQuizTitleLine } from '@instructure/ui-icons';
 import { AccessibleContent, ScreenReaderContent, PresentationContent } from '@instructure/ui-a11y-content';
 import { IconButton } from '@instructure/ui-buttons';
 import { Link } from '@instructure/ui-link';
 import { Text } from '@instructure/ui-text';
 import { View } from '@instructure/ui-view';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx, Global } from '@instructure/emotion';
 import { Heading } from '@instructure/ui-heading';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { INSTRUCTIONS_SCROLL_KEY, RESULTS_SCROLL_KEY, SIDEBAR_NAV_ID, TITLE_SCROLL_KEY } from '@instructure/quiz-common';
@@ -26,43 +27,24 @@ import { onPhone } from "../../../../util/windowChecks.js";
 import CustomPropTypes from "../../../../util/CustomPropTypes.js";
 import noop from "../../../../util/noop.js";
 import Pin from "./Pin.js";
-var styles = {
-  componentId: 'bPuQe',
-  template: function template(theme) {
-    return "\n\n.bPuQe_bObp{background-color:".concat(theme.sidebarBackgroundColor || 'inherit', ";border:").concat(theme.sidebarBorderWidth || 'inherit', " solid ").concat(theme.sidebarBorderColor || 'inherit', ";box-sizing:border-box;color:").concat(theme.sidebarColor || 'inherit', ";height:100%;overflow:hidden;position:relative;transition:").concat(theme.sidebarTransitionDuration || 'inherit', " ease;width:").concat(theme.sidebarWidthClosed || 'inherit', ";z-index:").concat(theme.sidebarZIndex || 'inherit', "}\n\nbody.tox-fullscreen .bPuQe_bObp{z-index:0}\n\n.bPuQe_crKy{display:flex;flex-direction:column;height:100%}\n\n.bPuQe_eYGv{overflow-x:hidden;overflow-y:auto}\n\n.bPuQe_eeTU{border-bottom:").concat(theme.sidebarHeaderBorderWidth || 'inherit', " solid ").concat(theme.sidebarHeaderBorderColor || 'inherit', ";border-right:").concat(theme.actionableInfoBorderWidth || 'inherit', " solid ").concat(theme.sidebarBackgroundColor || 'inherit', ";text-align:center}\n\n[dir=ltr] .bPuQe_eeTU,[dir=rtl] .bPuQe_eeTU{text-align:center}\n\n.bPuQe_eeTU:hover{border-right:").concat(theme.actionableInfoBorderWidth || 'inherit', " solid ").concat(theme.actionableInfoHoverBorderColor || 'inherit', "}\n\n.bPuQe_difO{color:").concat(theme.descriptionFontColor || 'inherit', ";display:none;font-size:").concat(theme.descriptionFontSize || 'inherit', "}\n\n.bPuQe_cjDf{display:flex;flex-direction:row;flex-shrink:0;padding:").concat(theme.headerSpacingPadding || 'inherit', "}\n\n.bPuQe_cjDf h2{padding-top:0.3em}\n\n.bPuQe_fuFE{border-bottom:solid ").concat(theme.sidebarHeaderBorderWidth || 'inherit', ";border-color:").concat(theme.sidebarHeaderBorderColor || 'inherit', "}\n\n.bPuQe_cvRx{margin-left:auto}\n\n.bPuQe_fwEb{background-color:").concat(theme.pinnedSectionBackgroundColor || 'inherit', ";width:100%}\n\n.bPuQe_fwEb .bPuQe_cjDf{flex-grow:1}\n\n.bPuQe_ftzv{padding-top:").concat(theme.questionNavigatorPadding || 'inherit', "}\n\n.bPuQe_bObp.bPuQe_eNNp{opacity:1;transition:").concat(theme.sidebarTransitionDuration || 'inherit', " ease;width:").concat(theme.sidebarWidthOpen || 'inherit', "}\n\n.bPuQe_eNNp .bPuQe_difO{cursor:pointer;display:inline-block}\n\n.bPuQe_eNNp .bPuQe_eeTU,[dir=ltr] .bPuQe_eNNp .bPuQe_eeTU,[dir=rtl] .bPuQe_eNNp .bPuQe_eeTU{text-align:inherit}\n\n.bPuQe_eQGE{display:none}\n\n.bPuQe_eQGE.bPuQe_cvRx{display:block;margin:auto}\n\n.bPuQe_nqth button{font-size:").concat(theme.pinnedQuestionFontSize || 'inherit', ";padding-bottom:").concat(theme.pinnedQuestionSpacing || 'inherit', ";padding-left:").concat(theme.pinnedQuestionSpacing || 'inherit', "}\n\n.bPuQe_eYHq{height:100%}\n\n@media screen and (--phoneBreakPoint){.bPuQe_eYHq{position:relative}.bPuQe_bObp{position:absolute;width:0}.bPuQe_bObp,.bPuQe_bObp.bPuQe_eNNp{transition:").concat(theme.sidebarTransitionDuration || 'inherit', " ease}.bPuQe_bObp.bPuQe_eNNp{display:inline;max-width:100vw;width:100vw}}\n\n@media print{.bPuQe_eYHq{display:none}}");
-  },
-  'sidebar': 'bPuQe_bObp',
-  'sidebarWrapper': 'bPuQe_crKy',
-  'sidebarContent': 'bPuQe_eYGv',
-  'actionableInfo': 'bPuQe_eeTU',
-  'description': 'bPuQe_difO',
-  'headerSpacing': 'bPuQe_cjDf',
-  'headerBottomBorder': 'bPuQe_fuFE',
-  'iconWrapper': 'bPuQe_cvRx',
-  'pinnedSection': 'bPuQe_fwEb',
-  'questionNavigatorPadding': 'bPuQe_ftzv',
-  'sidebarIsOpen': 'bPuQe_eNNp',
-  'sidebarClosed': 'bPuQe_eQGE',
-  'buttonWrapper': 'bPuQe_nqth',
-  'commonContainer': 'bPuQe_eYHq'
-};
-import theme from "./theme.js";
-
-var _ref = /*#__PURE__*/React.createElement(IconQuizTitleLine, {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+
+var _ref = jsx(IconQuizTitleLine, {
   color: "primary"
 });
 
-var _ref2 = /*#__PURE__*/React.createElement(IconQuizInstructionsLine, {
+var _ref2 = jsx(IconQuizInstructionsLine, {
   color: "primary"
 });
 
-var _ref3 = /*#__PURE__*/React.createElement(IconQuizInstructionsLine, {
+var _ref3 = jsx(IconQuizInstructionsLine, {
   color: "primary"
 });
 
-var _ref4 = /*#__PURE__*/React.createElement(IconPinSolid, null);
+var _ref4 = jsx(IconPinSolid, null);
 
-export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var Sidebar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(Sidebar, _Component);
 
   var _super = _createSuper(Sidebar);
@@ -123,6 +105,16 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
   }
 
   _createClass(Sidebar, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.makeStyles();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles();
+    }
+  }, {
     key: "handleTransitionEnd",
     value: function handleTransitionEnd() {
       // when the sidebar finishes its transition, fire a "windowResized" event
@@ -141,16 +133,16 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
         return;
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.actionableInfo
-      }, /*#__PURE__*/React.createElement(Link, {
+      return jsx("div", {
+        css: this.props.styles.sidebar.actionableInfo
+      }, jsx(Link, {
         href: "#",
         margin: "small",
         forceButtonRole: false,
         onClick: this.scrollToTitle,
         renderIcon: _ref
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Navigate to title'))), /*#__PURE__*/React.createElement(PresentationContent, null, /*#__PURE__*/React.createElement("span", {
-        className: styles.description,
+      }, jsx(ScreenReaderContent, null, t('Navigate to title'))), jsx(PresentationContent, null, jsx("span", {
+        css: this.props.styles.sidebar.description,
         onClick: this.scrollToTitle,
         tabIndex: "-1"
       }, this.props.title || t('Title'))));
@@ -162,17 +154,17 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
         return;
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.actionableInfo
-      }, /*#__PURE__*/React.createElement(Link, {
+      return jsx("div", {
+        css: this.props.styles.sidebar.actionableInfo
+      }, jsx(Link, {
         href: "#",
         margin: "small",
         forceButtonRole: false,
         onClick: this.scrollToInfo,
         renderIcon: _ref2,
         "data-automation": "sidebar-instructions-button"
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Navigate to instructions'))), /*#__PURE__*/React.createElement(PresentationContent, null, /*#__PURE__*/React.createElement("span", {
-        className: styles.description,
+      }, jsx(ScreenReaderContent, null, t('Navigate to instructions'))), jsx(PresentationContent, null, jsx("span", {
+        css: this.props.styles.sidebar.description,
         "data-automation": "sidebar-instructions-text",
         onClick: this.scrollToInfo,
         tabIndex: "-1"
@@ -185,17 +177,17 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
         return;
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.actionableInfo
-      }, /*#__PURE__*/React.createElement(Link, {
+      return jsx("div", {
+        css: this.props.styles.sidebar.actionableInfo
+      }, jsx(Link, {
         href: "#",
         margin: "small",
         forceButtonRole: false,
         onClick: this.scrollToResults,
         renderIcon: _ref3,
         "data-automation": "sidebar-results-button"
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Navigate to results'))), /*#__PURE__*/React.createElement(PresentationContent, null, /*#__PURE__*/React.createElement("span", {
-        className: styles.description,
+      }, jsx(ScreenReaderContent, null, t('Navigate to results'))), jsx(PresentationContent, null, jsx("span", {
+        css: this.props.styles.sidebar.description,
         "data-automation": "sidebar-results-text",
         onClick: this.scrollToResults,
         tabIndex: "-1"
@@ -204,20 +196,20 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
   }, {
     key: "renderSidebarHeader",
     value: function renderSidebarHeader() {
-      var sidebarOpen = this.props.sidebarOpen;
+      var _this$props = this.props,
+          sidebarOpen = _this$props.sidebarOpen,
+          styles = _this$props.styles;
       var SidebarIcon = sidebarOpen ? IconMoveStartLine : IconMoveEndLine;
-      var closedClasses = classNames(styles.questionNavigatorPadding, _defineProperty({}, styles.sidebarClosed, !this.props.sidebarOpen));
-      var iconClasses = classNames(styles.iconWrapper, _defineProperty({}, styles.sidebarClosed, !sidebarOpen));
-      return /*#__PURE__*/React.createElement("div", {
-        className: classNames(styles.headerSpacing, styles.headerBottomBorder)
-      }, /*#__PURE__*/React.createElement("div", {
-        className: closedClasses
-      }, /*#__PURE__*/React.createElement(Heading, {
+      return jsx("div", {
+        css: _objectSpread(_objectSpread({}, styles.headerSpacing), styles.headerBottomBorder)
+      }, jsx("div", {
+        css: styles.questionNavigatorPadding
+      }, jsx(Heading, {
         level: "h5",
         as: "h2"
-      }, t('Question Navigator'))), /*#__PURE__*/React.createElement("div", {
-        className: iconClasses
-      }, /*#__PURE__*/React.createElement(IconButton, {
+      }, t('Question Navigator'))), jsx("div", {
+        css: styles.iconWrapper
+      }, jsx(IconButton, {
         onClick: this.toggleSidebar,
         size: "small",
         margin: "none",
@@ -231,15 +223,15 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
   }, {
     key: "renderTotalPointsPossible",
     value: function renderTotalPointsPossible() {
-      var _this$props = this.props,
-          sidebarOpen = _this$props.sidebarOpen,
-          totalPointsPossible = _this$props.totalPointsPossible;
+      var _this$props2 = this.props,
+          sidebarOpen = _this$props2.sidebarOpen,
+          totalPointsPossible = _this$props2.totalPointsPossible;
 
       if (typeof totalPointsPossible !== 'number') {
         return null;
       }
 
-      var pointsText = /*#__PURE__*/React.createElement(Text, {
+      var pointsText = jsx(Text, {
         key: "pointsText",
         size: "small",
         weight: "bold"
@@ -249,7 +241,7 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
       var responsiveText = pointsText;
 
       if (sidebarOpen) {
-        responsiveText = /*#__PURE__*/React.createElement(Text, {
+        responsiveText = jsx(Text, {
           size: "small"
         }, t.rich('Total question points = <points/>', {
           points: function points() {
@@ -258,11 +250,11 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
         }));
       }
 
-      return /*#__PURE__*/React.createElement(View, {
+      return jsx(View, {
         borderWidth: "0 0 small 0",
         padding: "small x-small",
         textAlign: sidebarOpen ? 'start' : 'center'
-      }, /*#__PURE__*/React.createElement(AccessibleContent, {
+      }, jsx(AccessibleContent, {
         alt: t('Total question points = {totalPointsPossible}', {
           totalPointsPossible: totalPointsPossible
         })
@@ -271,38 +263,37 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
   }, {
     key: "renderPinned",
     value: function renderPinned() {
-      var _this$props2 = this.props,
-          sidebarOpen = _this$props2.sidebarOpen,
-          taking = _this$props2.taking,
-          pinnedItems = _this$props2.pinnedItems,
-          scrollToItem = _this$props2.scrollToItem;
+      var _this$props3 = this.props,
+          sidebarOpen = _this$props3.sidebarOpen,
+          taking = _this$props3.taking,
+          pinnedItems = _this$props3.pinnedItems,
+          scrollToItem = _this$props3.scrollToItem,
+          styles = _this$props3.styles;
 
       if (!taking) {
         return;
       }
 
-      var closedClasses = classNames(styles.buttonWrapper, _defineProperty({}, styles.sidebarClosed, !sidebarOpen));
-      var iconClasses = classNames(styles.iconWrapper, _defineProperty({}, styles.sidebarClosed, !sidebarOpen));
-      return /*#__PURE__*/React.createElement("div", {
-        className: classNames(styles.pinnedSection, styles.headerBottomBorder)
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.headerSpacing
-      }, /*#__PURE__*/React.createElement("div", {
-        className: closedClasses
-      }, /*#__PURE__*/React.createElement(Heading, {
+      return jsx("div", {
+        css: _objectSpread(_objectSpread({}, styles.pinnedSection), styles.headerBottomBorder)
+      }, jsx("div", {
+        css: styles.headerSpacing
+      }, jsx("div", {
+        css: styles.buttonWrapper
+      }, jsx(Heading, {
         level: "h5",
         as: "h2"
-      }, t('Pinned Questions'))), /*#__PURE__*/React.createElement("div", {
-        className: iconClasses,
+      }, t('Pinned Questions'))), jsx("div", {
+        css: styles.iconWrapper,
         "aria-hidden": sidebarOpen
-      }, /*#__PURE__*/React.createElement(Text, {
+      }, jsx(Text, {
         size: "x-small",
         "aria-label": t('Pinned Questions'),
         role: "img"
-      }, _ref4))), /*#__PURE__*/React.createElement("div", {
-        className: closedClasses
+      }, _ref4))), jsx("div", {
+        css: styles.buttonWrapper
       }, pinnedItems.map(function (pin) {
-        return /*#__PURE__*/React.createElement(Pin, {
+        return jsx(Pin, {
           key: pin.sessionItemId,
           scrollToItem: scrollToItem,
           position: pin.position,
@@ -313,17 +304,18 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
   }, {
     key: "render",
     value: function render() {
-      var sidebarClassList = classNames(styles.sidebar, _defineProperty({}, styles.sidebarIsOpen, this.props.sidebarOpen));
-      return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement("div", {
-        className: styles.commonContainer,
+      return jsx(View, null, jsx("div", {
+        css: this.props.styles.commonContainer,
         id: "sidebar-wrapper",
         tabIndex: "-1"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: sidebarClassList,
+      }, jsx("div", {
+        css: this.props.styles.sidebar,
         onTransitionEnd: this.handleTransitionEnd,
         "data-automation": this.props.sidebarOpen ? 'sdk-sidebar-open' : 'sdk-sidebar-closed'
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.sidebarWrapper,
+      }, jsx(Global, {
+        styles: this.props.styles.globalStyles
+      }), jsx("div", {
+        css: this.props.styles.sidebarWrapper,
         ref: this.refWrapper,
         role: this.props.role,
         onBlur: this.handleBlur // for some reason, without a click handler here, a random item will
@@ -331,8 +323,8 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
         ,
         onClick: noop,
         id: SIDEBAR_NAV_ID
-      }, this.renderSidebarHeader(), this.renderTotalPointsPossible(), this.renderPinned(), this.renderTitle(), this.renderInstructions(), this.renderResults(), /*#__PURE__*/React.createElement("div", {
-        className: styles.sidebarContent
+      }, this.renderSidebarHeader(), this.renderTotalPointsPossible(), this.renderPinned(), this.renderTitle(), this.renderInstructions(), this.renderResults(), jsx("div", {
+        css: this.props.styles.sidebarContent
       }, this.props.children)))));
     }
   }]);
@@ -354,7 +346,9 @@ export var Sidebar = (_dec = themeable(theme, styles), _dec(_class = (_temp = _c
   toggleSidebar: PropTypes.func.isRequired,
   screenreaderNotification: PropTypes.func.isRequired,
   totalPointsPossible: PropTypes.number,
-  shouldCloseOnBlur: PropTypes.bool
+  shouldCloseOnBlur: PropTypes.bool,
+  makeStyles: PropTypes.func,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   grading: false,
   taking: false,