@instructure/quiz-core 20.11.3-rc.2 → 20.11.3-rc.21

package/lib/building/components/resources/quizEntry/QuizEntryEdit/Header/index.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
 });
@@ -21,7 +19,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -35,7 +33,7 @@ var _uiButtons = require("@instructure/ui-buttons");
 
 var _uiTextInput = require("@instructure/ui-text-input");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _quizInteractions = require("@instructure/quiz-interactions");
 
@@ -53,26 +51,15 @@ var _index = _interopRequireDefault(require("../../../ActionButtons/index.js"));
 
 var _quizCommon = require("@instructure/quiz-common");
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'cCKjK',
-  template: function template(theme) {
-    return "\n\n.cCKjK_fsuY{align-items:center;background-color:".concat(theme.headerBackgroundColor || 'inherit', ";color:").concat(theme.headerColor || 'inherit', ";display:flex;justify-content:space-between;padding:").concat(theme.headerPadding || 'inherit', ";vertical-align:middle}\n\n.cCKjK_cKlw{align-items:center;display:inline-flex;flex:8 0 0;flex-wrap:nowrap;width:100%}\n\nbody.tox-fullscreen .cCKjK_cKlw{display:none}\n\n.cCKjK_ecuB{font-size:").concat(theme.interactionTypeFontSize || 'inherit', ";margin-left:").concat(theme.interactionTypeLeftMargin || 'inherit', ";margin-right:").concat(theme.interactionTypeRightMargin || 'inherit', "}\n\n.cCKjK_epFc{border-left:").concat(theme.dividingLineLeftBorder || 'inherit', ";width:0}\n\n.cCKjK_dFsQ{display:flex;flex:1 1 auto}\n\n.cCKjK_eGPC{flex:1 1 auto;font-size:").concat(theme.titleInputFontSize || 'inherit', ";text-overflow:ellipsis;white-space:nowrap}");
-  },
-  'header': 'cCKjK_fsuY',
-  'leftHeader': 'cCKjK_cKlw',
-  'interactionType': 'cCKjK_ecuB',
-  'dividingLine': 'cCKjK_epFc',
-  'titleHolder': 'cCKjK_dFsQ',
-  'titleInput': 'cCKjK_eGPC'
-};
-
-var _ref2 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconBankLine, null);
-
-var QuizEntryHeader = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var _ref2 = (0, _emotion.jsx)(_uiIcons.IconBankLine, null);
+
+var QuizEntryHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(QuizEntryHeader, _Component);
 
   var _super = (0, _createSuper2.default)(QuizEntryHeader);
@@ -272,7 +259,7 @@ var QuizEntryHeader = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
     key: "renderName",
     value: function renderName() {
       if (this.props.quizEntry.isBank && this.props.newActiveBank) {
-        return /*#__PURE__*/_react.default.createElement(_uiButtons.CondensedButton, {
+        return (0, _emotion.jsx)(_uiButtons.CondensedButton, {
           size: "small",
           margin: "0 0 0 x-small",
           onClick: this.handleBankClick,
@@ -280,8 +267,8 @@ var QuizEntryHeader = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
         }, this.props.name);
       }
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.interactionType,
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.interactionType,
         "data-automation": "sdk-quiz-entry-interaction-type"
       }, this.props.name);
     }
@@ -301,13 +288,13 @@ var QuizEntryHeader = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
         questionNumber: displayPosition,
         interactionType: entry.getInteractionType().name
       });
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.titleHolder
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: styles.titleInput
-      }, /*#__PURE__*/_react.default.createElement(_uiTextInput.TextInput, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.titleHolder
+      }, (0, _emotion.jsx)("span", {
+        css: this.props.styles.titleInput
+      }, (0, _emotion.jsx)(_uiTextInput.TextInput, {
         ref: this.storeTitleRef,
-        renderLabel: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, titleLabelText),
+        renderLabel: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, titleLabelText),
         type: "text",
         placeholder: (0, _formatMessage.default)('Question Title'),
         onChange: this.handleTitleChange,
@@ -323,14 +310,15 @@ var QuizEntryHeader = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
         position: this.props.displayPosition
       });
       var position = this.props.disabledForRegrade ? this.props.displayPosition : this.props.quizEntry.positionToDisplay(this.props.displayPosition);
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.leftHeader
-      }, /*#__PURE__*/_react.default.createElement(_PositionBox.default, {
+      return (0, _emotion.jsx)("div", {
+        className: "leftHeader",
+        css: this.props.styles.leftHeader
+      }, (0, _emotion.jsx)(_PositionBox.default, {
         position: position,
         headingText: positionText,
         "data-automation": "sdk-quiz-entry-positionbox"
-      }), this.renderBankedContent(), this.renderName(), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.dividingLine
+      }), this.renderBankedContent(), this.renderName(), (0, _emotion.jsx)("div", {
+        css: this.props.styles.dividingLine
       }), this.renderTitleHolder());
     }
   }, {
@@ -349,9 +337,12 @@ var QuizEntryHeader = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
         shouldDisableDeleteButton: this.props.disabledForRegrade,
         shouldRenderEdit: false
       };
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.header
-      }, this.renderLeftHeader(), /*#__PURE__*/_react.default.createElement(_index.default, actionButtonProps));
+      return (0, _emotion.jsx)("div", {
+        className: "header",
+        css: this.props.styles.header
+      }, (0, _emotion.jsx)(_emotion.Global, {
+        styles: this.props.styles.globalStyles
+      }), this.renderLeftHeader(), (0, _emotion.jsx)(_index.default, actionButtonProps));
     }
   }]);
   QuizEntryHeader.displayName = "QuizEntryHeader";
@@ -392,7 +383,8 @@ var QuizEntryHeader = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   successfulSubmit: _propTypes.default.func.isRequired,
   withConfirm: _propTypes.default.func.isRequired,
   workingEntry: _reactImmutableProptypes.default.record.isRequired,
-  workingQuizEntry: _reactImmutableProptypes.default.record.isRequired
+  workingQuizEntry: _reactImmutableProptypes.default.record.isRequired,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   disabledForRegrade: false,
   initialFocusId: null,

package/lib/building/components/resources/quizEntry/QuizEntryEdit/Header/styles.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    /* Hide left header when the RCE editor is in fullscreen mode */
+    globalStyles: {
+      'body.tox-fullscreen .leftHeader': {
+        display: 'none'
+      }
+    },
+    header: {
+      backgroundColor: componentTheme.headerBackgroundColor,
+      color: componentTheme.headerColor,
+      padding: componentTheme.headerPadding,
+      display: 'flex',
+      justifyContent: 'space-between',
+      verticalAlign: 'middle',
+      alignItems: 'center'
+    },
+    leftHeader: {
+      flex: '8 0 0',
+      display: 'inline-flex',
+      flexWrap: 'nowrap',
+      alignItems: 'center',
+
+      /* fix for ie11 */
+      width: '100%'
+    },
+    interactionType: {
+      fontSize: componentTheme.interactionTypeFontSize,
+      marginLeft: componentTheme.interactionTypeLeftMargin,
+      marginRight: componentTheme.interactionTypeRightMargin
+    },
+    dividingLine: {
+      width: '0',
+      borderLeft: componentTheme.dividingLineLeftBorder
+    },
+    titleHolder: {
+      display: 'flex',
+      flex: '1 1 auto'
+    },
+    titleInput: {
+      flex: '1 1 auto',
+      fontSize: componentTheme.titleInputFontSize,
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/building/components/resources/quizEntry/QuizEntryEdit/Header/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 spacing = _ref.spacing,
       colors = _ref.colors,
       typography = _ref.typography;
@@ -18,4 +18,7 @@ function generator(_ref) {
     interactionTypeRightMargin: spacing.xSmall,
     titleInputFontSize: typography.fontSizeMedium
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/building/components/resources/quizEntry/QuizEntryEdit/presenter.js

@@ -33,7 +33,7 @@ var _pick = _interopRequireDefault(require("lodash/pick"));
 
 var _first = _interopRequireDefault(require("lodash/first"));
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
@@ -45,7 +45,7 @@ var _index = _interopRequireDefault(require("../../../../../banks/components/Add
 
 var _index2 = _interopRequireDefault(require("../../../../../common/components/shared/drag_and_drop/DragAndDropZone/index.js"));
 
-var _componentWithOutsideClick = _interopRequireDefault(require("../../../../../common/components/shared/functionality/componentWithOutsideClick.js"));
+var _componentWithOutsideClickEmotion = _interopRequireDefault(require("../../../../../common/components/shared/functionality/componentWithOutsideClickEmotion.js"));
 
 var _index3 = _interopRequireDefault(require("./Header/index.js"));
 
@@ -55,18 +55,13 @@ var _quizCommon = require("@instructure/quiz-common");
 
 var _dragAndDropUtils = require("../../../../../common/components/shared/drag_and_drop/dragAndDropUtils.js");
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'bZuQH',
-  template: function template(theme) {
-    return "\n\n.bZuQH_qRLg{font-size:".concat(theme.quizEntryEditFontSize || 'inherit', ";margin:").concat(theme.quizEntryEditMargin || 'inherit', " 0;position:relative;transform:translateZ(0);z-index:3333}\n\nbody.tox-fullscreen .bZuQH_qRLg{transform:none;z-index:6666}");
-  },
-  'quizEntryEdit': 'bZuQH_qRLg'
-};
-var QuizEntryEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var QuizEntryEdit = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(QuizEntryEdit, _Component);
 
   var _super = (0, _createSuper2.default)(QuizEntryEdit);
@@ -357,9 +352,9 @@ var QuizEntryEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
         draggingOver: draggingOver,
         draggingAboveHalf: draggingAboveHalf
       };
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_index2.default, Object.assign({}, propsForDnDZone, {
+      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_index2.default, Object.assign({}, propsForDnDZone, {
         location: "above"
-      })), connectDragPreview(_this.renderForm()), /*#__PURE__*/_react.default.createElement(_index2.default, Object.assign({}, propsForDnDZone, {
+      })), connectDragPreview(_this.renderForm()), (0, _emotion.jsx)(_index2.default, Object.assign({}, propsForDnDZone, {
         location: "below"
       })));
     };
@@ -408,7 +403,7 @@ var QuizEntryEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
       var isItemOrBankEntry = this.props.quizEntry.isItem || this.props.quizEntry.isBankEntry;
       if (!(isItemOrBankEntry || this.props.disabledForRegrade)) return;
       var footerProps = (0, _pick.default)(this.props, ['alternativeRightFooter', 'changeQuizEntryPoints', 'clearTemporaryItem', 'displayPosition', 'entry', 'guid', 'initialFocusId', 'openModal', 'quizEntry', 'setUi', 'shouldClone', 'workingQuizEntry']);
-      return /*#__PURE__*/_react.default.createElement(_index4.default, Object.assign({
+      return (0, _emotion.jsx)(_index4.default, Object.assign({
         clearChanges: this.clearChanges,
         isValid: this.isValid(),
         successfulSubmit: this.successfulSubmit,
@@ -419,7 +414,7 @@ var QuizEntryEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
     key: "renderAddToBankModal",
     value: function renderAddToBankModal() {
       if (!this.props.quizEntry.isItem) return;
-      return /*#__PURE__*/_react.default.createElement(_index.default, {
+      return (0, _emotion.jsx)(_index.default, {
         label: (0, _formatMessage.default)('Add to an Item Bank'),
         onContinue: this.handleAddToBankContinue,
         onAdd: this.handleAddToBank,
@@ -434,7 +429,7 @@ var QuizEntryEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
     key: "renderHeader",
     value: function renderHeader() {
       var headerProps = (0, _pick.default)(this.props, ['changeItemTitle', 'clearModifications', 'clearTemporaryItem', 'connectDragSource', 'createTempItem', 'disabledForRegrade', 'displayPosition', 'entry', 'guid', 'hideError', 'initialFocusId', 'name', 'newActiveBank', 'quizEntries', 'quizEntry', 'quizId', 'removeQuizEntry', 'richFITBEnabled', 'richFITBInteractionID', 'screenreaderNotification', 'setUi', 'shouldClone', 'showError', 'withConfirm', 'workingEntry', 'workingQuizEntry']);
-      return /*#__PURE__*/_react.default.createElement(_index3.default, Object.assign({
+      return (0, _emotion.jsx)(_index3.default, Object.assign({
         isValid: this.isValid(),
         successfulSubmit: this.successfulSubmit,
         disableSubmit: this.shouldDisableSubmit()
@@ -443,17 +438,19 @@ var QuizEntryEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   }, {
     key: "renderForm",
     value: function renderForm() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.quizEntryEdit,
+      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)("div", {
+        css: this.props.styles.quizEntryEdit,
         "data-automation": "sdk-quiz-entry-edit-div"
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _emotion.jsx)("div", {
         role: "form"
-      }, this.renderHeader(), this.props.children, this.renderFooter()), this.renderAddToBankModal());
+      }, this.renderHeader(), this.props.children, this.renderFooter()), this.renderAddToBankModal()));
     }
   }, {
     key: "render",
     value: function render() {
-      return this.props.disabledForRegrade ? this.renderForm() : this.renderDraggable();
+      return (0, _emotion.jsx)(_react.default.Fragment, null, (0, _emotion.jsx)(_emotion.Global, {
+        styles: this.props.styles.globalStyles
+      }), this.props.disabledForRegrade ? this.renderForm() : this.renderDraggable());
     }
   }]);
   QuizEntryEdit.displayName = "QuizEntryEdit";
@@ -526,7 +523,8 @@ var QuizEntryEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   // from connected component
   withConfirm: _propTypes.default.func.isRequired,
   workingEntry: _reactImmutableProptypes.default.record.isRequired,
-  workingQuizEntry: _reactImmutableProptypes.default.record.isRequired
+  workingQuizEntry: _reactImmutableProptypes.default.record.isRequired,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   alternativeRightFooter: null,
   children: null,
@@ -544,7 +542,7 @@ var QuizEntryEdit = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
 }, _temp)) || _class);
 var UndecoratedQuizEntryEdit = QuizEntryEdit;
 exports.UndecoratedQuizEntryEdit = UndecoratedQuizEntryEdit;
-var QuizEntryEditRaw = (0, _componentWithOutsideClick.default)(QuizEntryEdit);
+var QuizEntryEditRaw = (0, _componentWithOutsideClickEmotion.default)(QuizEntryEdit);
 exports.QuizEntryEditRaw = QuizEntryEditRaw;
 
 var _default = (0, _reactDnd.DragSource)(_dragAndDropUtils.ItemTypes.QUIZ_ENTRY, _dragAndDropUtils.dragSource, _dragAndDropUtils.collectDrag)(QuizEntryEditRaw);

package/lib/building/components/resources/quizEntry/QuizEntryEdit/styles.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    globalStyles: {
+      'body.tox-fullscreen .quizEntryEdit': {
+        transform: 'none',
+        zIndex: '6666'
+      }
+    },
+    quizEntryEdit: {
+      fontSize: componentTheme.quizEntryEditFontSize,
+      position: 'relative',
+      transform: 'translate3d(0, 0, 0)',
+
+      /* for drag and drop preview to work */
+      margin: "".concat(componentTheme.quizEntryEditMargin, " 0"),
+      zIndex: '3333'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/building/components/resources/quizEntry/QuizEntryEdit/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 spacing = _ref.spacing,
       colors = _ref.colors,
       typography = _ref.typography,
@@ -14,4 +14,7 @@ function generator(_ref) {
     quizEntryEditFontSize: typography.fontSizeMedium,
     quizEntryEditMargin: spacing.medium
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

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

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,7 +15,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -31,7 +29,7 @@ var _uiIcons = require("@instructure/ui-icons");
 
 var _uiA11yContent = require("@instructure/ui-a11y-content");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _quizInteractions = require("@instructure/quiz-interactions");
 
@@ -43,43 +41,25 @@ var _fitbCopyHelper = require("../../../../../common/util/fitbCopyHelper.js");
 
 var _Item = _interopRequireDefault(require("../../../../../common/records/Item.js"));
 
-var _Overlay = _interopRequireDefault(require("../../../../../common/components/shared/overlay/Overlay.js"));
+var _index = _interopRequireDefault(require("../../../../../common/components/shared/overlayEmotion/index.js"));
 
-var _index = _interopRequireDefault(require("../../ActionButtons/index.js"));
+var _index2 = _interopRequireDefault(require("../../ActionButtons/index.js"));
 
 var _dragAndDropUtils = require("../../../../../common/components/shared/drag_and_drop/dragAndDropUtils.js");
 
 var _PositionBox = _interopRequireDefault(require("../../../../../common/components/resources/positionBox/PositionBox.js"));
 
-var _index2 = _interopRequireDefault(require("../../../../../common/components/shared/drag_and_drop/DragAndDropZone/index.js"));
+var _index3 = _interopRequireDefault(require("../../../../../common/components/shared/drag_and_drop/DragAndDropZone/index.js"));
+
+var _styles = _interopRequireDefault(require("./styles.js"));
 
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'eqZPF',
-  template: function template(theme) {
-    return "\n\n.eqZPF_eLmg{transform:translateZ(0)}\n\n.eqZPF_TMNr{background-color:".concat(theme.quizEntryShowBackgroundColor || 'inherit', ";padding:").concat(theme.quizEntryShowPadding || 'inherit', "}\n\n.eqZPF_fsuY{align-items:stretch;display:flex;flex-direction:row;flex-wrap:nowrap;height:").concat(theme.headerHeight || 'inherit', ";padding-right:").concat(theme.headerRightPadding || 'inherit', "}\n\n.eqZPF_bscQ{border:").concat(theme.dndBorder || 'inherit', "}\n\n.eqZPF_cKlw{align-items:center;display:inline-flex;flex:8 0 0;overflow:hidden}\n\n.eqZPF_eGWt{border-bottom:").concat(theme.phoneConnectingLinesBorderWidth || 'inherit', " dotted;border-color:").concat(theme.phoneConnectingLinesBorderColor || 'inherit', ";border-left:").concat(theme.phoneConnectingLinesBorderWidth || 'inherit', " dotted;height:2rem;margin-right:1.2rem;margin-top:-0.8rem;width:1.2rem}\n\n.eqZPF_eGWt,.eqZPF_IoDT{display:inline-flex;flex:0 0 auto}\n\n.eqZPF_IoDT{color:").concat(theme.rightHeaderColor || 'inherit', ";text-align:right;z-index:").concat(theme.rightHeaderZIndex || 'inherit', "}\n\n[dir=ltr] .eqZPF_IoDT,[dir=rtl] .eqZPF_IoDT{text-align:right}\n\n.eqZPF_IoDT button{background-color:transparent;background-color:initial}\n\n.eqZPF_eCZW,.eqZPF_cwte,.eqZPF_nvdO{color:").concat(theme.titleInteractionTypeNamePointsColor || 'inherit', ";font-size:").concat(theme.titleInteractionTypeNamePointsFontSize || 'inherit', ";margin-left:").concat(theme.titleInteractionTypeNamePointsLeftMargin || 'inherit', ";margin-right:").concat(theme.titleInteractionTypeNamePointsRightMargin || 'inherit', ";overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n\n.eqZPF_csjx{margin:").concat(theme.itemHolderMargin || 'inherit', ";overflow-wrap:anywhere}\n\n.eqZPF_fPOQ,.eqZPF_gaTA{background-color:transparent;border:none;color:inherit;font-size:").concat(theme.optionsButtonDragDropHandleFontSize || 'inherit', ";margin:").concat(theme.optionsButtonDragDropHandleMargin || 'inherit', "}\n\n.eqZPF_gaTA{cursor:pointer}\n\n@media print{.eqZPF_eLmg{break-inside:avoid}}");
-  },
-  'quizEntryWrapper': 'eqZPF_eLmg',
-  'quizEntryShow': 'eqZPF_TMNr',
-  'header': 'eqZPF_fsuY',
-  'dndBorder': 'eqZPF_bscQ',
-  'leftHeader': 'eqZPF_cKlw',
-  'connectingLines': 'eqZPF_eGWt',
-  'rightHeader': 'eqZPF_IoDT',
-  'interactionTypeName': 'eqZPF_eCZW',
-  'points': 'eqZPF_cwte',
-  'title': 'eqZPF_nvdO',
-  'itemHolder': 'eqZPF_csjx',
-  'dragAndDropHandle': 'eqZPF_fPOQ',
-  'optionsButton': 'eqZPF_gaTA'
-};
-
-var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconBankLine, null);
-
-var QuizEntryShow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var _ref = (0, _emotion.jsx)(_uiIcons.IconBankLine, null);
+
+var QuizEntryShow = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(QuizEntryShow, _Component);
 
   var _super = (0, _createSuper2.default)(QuizEntryShow);
@@ -248,8 +228,9 @@ var QuizEntryShow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
     value: function renderPointsPossible() {
       if (this.props.entry instanceof _Item.default) {
         var pointsPossible = this.props.quizEntry.pointsPossible;
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.points,
+        return (0, _emotion.jsx)("div", {
+          className: "points",
+          css: this.props.styles.points,
           "data-automation": "sdk-points-possible-div"
         }, this.getPointsText(pointsPossible || 0));
       }
@@ -259,8 +240,8 @@ var QuizEntryShow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
     value: function renderInteractionType() {
       if (this.props.entry instanceof _Item.default) {
         var interactionTypeName = this.props.entry.getInteractionType().name || this.props.interactionTypeName;
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.interactionTypeName,
+        return (0, _emotion.jsx)("div", {
+          css: this.props.styles.interactionTypeName,
           "data-automation": "sdk-interaction-type-name-div"
         }, interactionTypeName);
       }
@@ -275,10 +256,10 @@ var QuizEntryShow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   }, {
     key: "renderLeftHeader",
     value: function renderLeftHeader() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.leftHeader
-      }, this.renderBankedContent(), this.renderInteractionType(), this.renderPointsPossible(), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.title,
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.leftHeader
+      }, this.renderBankedContent(), this.renderInteractionType(), this.renderPointsPossible(), (0, _emotion.jsx)("div", {
+        css: this.props.styles.title,
         "data-automation": "sdk-quiz-entry-title-div"
       }, this.props.entry.title));
     }
@@ -311,26 +292,27 @@ var QuizEntryShow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
       var shouldLockQuizEntry = lockBlueprintContentEnabled && isContentLockedByBlueprint; // Overlay gets tabIndex === "-1" so that the drag handle is tabbable before
       // the Overlay get focus and opens the quizEntry in edit mode
 
-      return /*#__PURE__*/_react.default.createElement(_Overlay.default, {
+      return (0, _emotion.jsx)(_index.default, {
         onClick: this.editingOn,
-        wrapperClassName: styles.quizEntryWrapper,
+        wrapperStyles: this.props.styles.quizEntryWrapper,
         tabIndex: "-1",
         hideOverlay: shouldLockQuizEntry
-      }, /*#__PURE__*/_react.default.createElement(_index2.default, Object.assign({}, propsForDnDZone, {
+      }, (0, _emotion.jsx)(_index3.default, Object.assign({}, propsForDnDZone, {
         location: "above"
-      })), connectDragPreview( /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.quizEntryShow,
+      })), (0, _emotion.jsx)("div", {
+        ref: connectDragPreview,
+        css: this.props.styles.quizEntryShow,
         "data-automation": "sdk-quiz-entry-show",
         "data-automation-item-id": this.props.quizEntry.id
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.header
-      }, quizEntry.isInStimulus && stimulusOrientation === _quizCommon.TOP && /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.connectingLines
-      }), /*#__PURE__*/_react.default.createElement(_PositionBox.default, {
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.header
+      }, quizEntry.isInStimulus && stimulusOrientation === _quizCommon.TOP && (0, _emotion.jsx)("div", {
+        css: this.props.styles.connectingLines
+      }), (0, _emotion.jsx)(_PositionBox.default, {
         position: positionToDisplay,
         headingText: positionText,
         headingLevel: quizEntry.isInStimulus ? 'h3' : 'h2'
-      }), this.renderLeftHeader(), /*#__PURE__*/_react.default.createElement(_index.default, {
+      }), this.renderLeftHeader(), (0, _emotion.jsx)(_index2.default, {
         connectDragSource: this.props.connectDragSource,
         displayPosition: this.props.displayPosition,
         onDelete: this.removeItem,
@@ -344,11 +326,11 @@ var QuizEntryShow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
         shouldDisableCopy: shouldLockQuizEntry,
         shouldRenderEdit: !shouldLockQuizEntry,
         shouldRenderDelete: !shouldLockQuizEntry
-      }), /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, srMsg)), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.itemHolder,
+      }), (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, srMsg)), (0, _emotion.jsx)("div", {
+        css: this.props.styles.itemHolder,
         ref: this.setInert,
         "data-automation": "sdk-quiz-entry-show-item-holder"
-      }, this.props.children))), /*#__PURE__*/_react.default.createElement(_index2.default, Object.assign({}, propsForDnDZone, {
+      }, this.props.children)), (0, _emotion.jsx)(_index3.default, Object.assign({}, propsForDnDZone, {
         location: "below"
       })));
     }
@@ -387,7 +369,8 @@ var QuizEntryShow = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   switchOnEditing: _propTypes.default.func.isRequired,
   // from QuizEntry
   updateItemCallStatus: _propTypes.default.string.isRequired,
-  withConfirm: _propTypes.default.func.isRequired
+  withConfirm: _propTypes.default.func.isRequired,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   children: null,
   draggingOver: false,