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

package/lib/building/components/layout/Sidebar/Stimulus/styles.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    sidebarStimulusWrapper: {
+      transform: 'translate3d(0, 0, 0)'
+      /* for drag and drop preview to work */
+
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/building/components/layout/Sidebar/Stimulus/theme.js

@@ -3,8 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-function generator() {
+var generateComponentTheme = function generateComponentTheme() {
   return {};
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/building/components/layout/Sidebar/presenter.js

@@ -2,15 +2,11 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.BuildingSidebar = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -19,15 +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 = _interopRequireDefault(require("prop-types"));
 
-var _classnames3 = _interopRequireDefault(require("classnames"));
-
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _index = _interopRequireDefault(require("./SidebarItem/index.js"));
 
@@ -39,6 +33,8 @@ var _generateDisplayPositions = _interopRequireDefault(require("../../../../comm
 
 var _quizInteractions = require("@instructure/quiz-interactions");
 
+var _styles = _interopRequireDefault(require("./styles.js"));
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _quizCommon = require("@instructure/quiz-common");
@@ -47,19 +43,7 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'bAyez',
-  template: function template(theme) {
-    return "\n\n.bAyez_eUtI{padding:".concat(theme.bottomPadding || 'inherit', "}\n\n.bAyez_bBLs,.bAyez_fYKY .bAyez_blUq,.bAyez_eNNp .bAyez_eyTz{display:none}");
-  },
-  'bottomPadding': 'bAyez_eUtI',
-  'hide': 'bAyez_bBLs',
-  'sidebarIsClosed': 'bAyez_fYKY',
-  'openItems': 'bAyez_blUq',
-  'sidebarIsOpen': 'bAyez_eNNp',
-  'closedItems': 'bAyez_eyTz'
-};
-var BuildingSidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var BuildingSidebar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(BuildingSidebar, _Component);
 
   var _super = (0, _createSuper2.default)(BuildingSidebar);
@@ -84,7 +68,7 @@ var BuildingSidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
     _this.renderItem = function () {
       var isOver = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : _this.props.isOver;
       return function (quizEntry, displayPosition, sidebarIsOpen) {
-        return /*#__PURE__*/_react.default.createElement(_index.default, {
+        return (0, _emotion.jsx)(_index.default, {
           key: _this.setKey(quizEntry.id),
           ref: _this.setRef(quizEntry.id),
           inStimulus: quizEntry.isInStimulus,
@@ -122,6 +106,16 @@ var BuildingSidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   }
 
   (0, _createClass2.default)(BuildingSidebar, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.makeStyles();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles();
+    }
+  }, {
     key: "getItemBody",
     value: function getItemBody(quizEntry) {
       switch (quizEntry.entryType) {
@@ -176,7 +170,7 @@ var BuildingSidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   }, {
     key: "renderStimulus",
     value: function renderStimulus(quizEntry, displayPosition, sidebarIsOpen) {
-      return /*#__PURE__*/_react.default.createElement(_index2.default, {
+      return (0, _emotion.jsx)(_index2.default, {
         key: this.setKey(quizEntry.id),
         ref: this.setRef(quizEntry.id),
         displayPosition: displayPosition,
@@ -217,33 +211,36 @@ var BuildingSidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   }, {
     key: "render",
     value: function render() {
-      var _classnames2;
-
-      var dndClasses = (0, _classnames3.default)(styles.bottomPadding, (0, _defineProperty2.default)({}, styles.hide, !this.props.isOver));
-      var sidebarClasses = (0, _classnames3.default)((_classnames2 = {}, (0, _defineProperty2.default)(_classnames2, styles.sidebarIsOpen, this.props.sidebarOpen), (0, _defineProperty2.default)(_classnames2, styles.sidebarIsClosed, !this.props.sidebarOpen), _classnames2));
+      var openClass = !this.props.sidebarOpen ? 'sidebarIsClosed' : 'sidebarIsOpen';
+      var isOverClass = !this.props.isOver ? 'hide' : '';
       return this.props.connectDropTarget(
-      /*#__PURE__*/
-
       /* React DnD requires a native element node like our div below */
-      _react.default.createElement("div", {
-        className: sidebarClasses
-      }, /*#__PURE__*/_react.default.createElement(_index3.default, {
+      (0, _emotion.jsx)("div", {
+        style: {
+          display: 'flex'
+        }
+      }, (0, _emotion.jsx)("div", {
+        className: openClass
+      }, (0, _emotion.jsx)(_index3.default, {
         role: this.props.role,
         scrollToItem: this.scrollToItem,
         sidebarOpen: this.props.sidebarOpen,
         toggleSidebar: this.props.toggleSidebar,
         screenreaderNotification: this.props.screenreaderNotification,
         totalPointsPossible: this.props.totalPointsPossible
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _emotion.jsx)("div", {
         ref: this.storeStartQuizEntriesRef
-      }), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.closedItems
-      }, this.renderSidebarItems(false)), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.openItems
-      }, this.renderSidebarItems(true)), /*#__PURE__*/_react.default.createElement("div", {
+      }), (0, _emotion.jsx)("div", {
+        className: "closedItems",
+        css: this.props.styles.closedItems
+      }, this.renderSidebarItems(false)), (0, _emotion.jsx)("div", {
+        className: "openItems",
+        css: this.props.styles.openItems
+      }, this.renderSidebarItems(true)), (0, _emotion.jsx)("div", {
         ref: this.storeEndQuizEntriesRef,
-        className: dndClasses
-      }))));
+        className: isOverClass,
+        css: this.props.styles.bottomPadding
+      })))));
     }
   }]);
   BuildingSidebar.displayName = "BuildingSidebar";
@@ -257,7 +254,9 @@ var BuildingSidebar = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   sidebarOpen: _propTypes.default.bool.isRequired,
   toggleSidebar: _propTypes.default.func.isRequired,
   screenreaderNotification: _propTypes.default.func.isRequired,
-  totalPointsPossible: _propTypes.default.number.isRequired
+  totalPointsPossible: _propTypes.default.number.isRequired,
+  styles: _propTypes.default.object,
+  makeStyles: _propTypes.default.func
 }, _class2.defaultProps = {
   isOver: false,
   role: 'navigation'

package/lib/building/components/layout/Sidebar/styles.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var generateStyle = function generateStyle(componentTheme, props) {
+  return {
+    /* this class is to allow space for dragging an item
+    below a stimulus at the bottom of a long quiz */
+    bottomPadding: (0, _objectSpread2.default)({
+      padding: componentTheme.bottomPadding
+    }, !props.isOver && {
+      display: 'none'
+    }),
+    hide: {
+      display: 'none'
+    },
+    closedItems: (0, _objectSpread2.default)({
+      display: 'block'
+    }, props.sidebarOpen && {
+      display: 'none'
+    }),
+    openItems: (0, _objectSpread2.default)({
+      display: 'block'
+    }, !props.sidebarOpen && {
+      display: 'none'
+    })
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/building/components/layout/Sidebar/theme.js

@@ -3,11 +3,14 @@
 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;
   return {
     bottomPadding: spacing.xLarge
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/building/components/layout/header/BuildingButtons/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,24 +29,17 @@ var _index = _interopRequireDefault(require("../../../../../common/components/sh
 
 var _quizCommon = require("@instructure/quiz-common");
 
-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 _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'exAHi',
-  template: function template(theme) {
-    return "\n\n.exAHi_cKjJ{color:".concat(theme.quizSavingColor || 'inherit', ";margin:").concat(theme.quizSavingMargin || 'inherit', "}\n\n.exAHi_dxna{align-items:center;display:flex;height:100%;margin-right:").concat(theme.buttonsHolderMargin || 'inherit', "}\n\n.exAHi_cLWx{font-size:").concat(theme.menuIconFontSize || 'inherit', ";margin-right:").concat(theme.menuIconMargin || 'inherit', ";vertical-align:middle}");
-  },
-  'quizSaving': 'exAHi_cKjJ',
-  'buttonsHolder': 'exAHi_dxna',
-  'menuIcon': 'exAHi_cLWx'
-};
-var BuildingButtons = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var BuildingButtons = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(BuildingButtons, _Component);
 
   var _super = (0, _createSuper2.default)(BuildingButtons);
@@ -107,8 +98,8 @@ var BuildingButtons = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
     key: "renderSavingMessage",
     value: function renderSavingMessage() {
       if (this.props.quizSaving) {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.quizSaving
+        return (0, _emotion.jsx)("div", {
+          css: this.props.styles.quizSaving
         }, (0, _formatMessage.default)('Saving...'));
       }
     }
@@ -124,43 +115,43 @@ var BuildingButtons = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       var menuItems = [];
 
       if (this.props.speedgraderLink) {
-        menuItems.push( /*#__PURE__*/_react.default.createElement(_uiMenu.Menu.Item, {
+        menuItems.push((0, _emotion.jsx)(_uiMenu.Menu.Item, {
           key: "speedgrader",
           onSelect: this.openSpeedgraderLink
-        }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconSpeedGraderLine, {
-          className: styles.menuIcon
+        }, (0, _emotion.jsx)(_uiIcons.IconSpeedGraderLine, {
+          css: this.props.styles.menuIcon
         }), (0, _formatMessage.default)('Speedgrader')));
       }
 
-      menuItems.push( /*#__PURE__*/_react.default.createElement(_uiMenu.Menu.Item, {
+      menuItems.push((0, _emotion.jsx)(_uiMenu.Menu.Item, {
         key: "import",
         disabled: !this.props.canImport,
         onSelect: this.props.openModal,
         "data-automation": "sdk-import-content-menuitem"
-      }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconImportLine, {
-        className: styles.menuIcon,
+      }, (0, _emotion.jsx)(_uiIcons.IconImportLine, {
+        css: this.props.styles.menuIcon,
         "data-automation": "sdk-import-content-icon"
       }), (0, _formatMessage.default)('Import Content')));
 
       if (this.props.contentExportEnabled) {
-        menuItems.push( /*#__PURE__*/_react.default.createElement(_uiMenu.Menu.Item, {
+        menuItems.push((0, _emotion.jsx)(_uiMenu.Menu.Item, {
           key: "export",
           disabled: !this.props.canExport,
           onSelect: this.startQuizExportJob,
           "data-automation": "sdk-export-content-menuitem"
-        }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconExportLine, {
-          className: styles.menuIcon,
+        }, (0, _emotion.jsx)(_uiIcons.IconExportLine, {
+          css: this.props.styles.menuIcon,
           "data-automation": "sdk-export-content-icon"
         }), (0, _formatMessage.default)('Export Content')));
       }
 
       if (this.props.enableItemBanking) {
-        menuItems.push( /*#__PURE__*/_react.default.createElement(_uiMenu.Menu.Item, {
+        menuItems.push((0, _emotion.jsx)(_uiMenu.Menu.Item, {
           key: "banks",
           onSelect: this.props.navigateToBanks,
           "data-automation": "sdk-manage-item-banks-menuitem"
-        }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconBankLine, {
-          className: styles.menuIcon,
+        }, (0, _emotion.jsx)(_uiIcons.IconBankLine, {
+          css: this.props.styles.menuIcon,
           "data-automation": "sdk-manage-item-banks-icon"
         }), (0, _formatMessage.default)('Manage Item Banks')));
       }
@@ -169,26 +160,26 @@ var BuildingButtons = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
         {
           /* eslint-disable react/jsx-no-bind */
         }
-        menuItems.push( /*#__PURE__*/_react.default.createElement(_uiMenu.Menu.Item, {
+        menuItems.push((0, _emotion.jsx)(_uiMenu.Menu.Item, {
           key: "printKey",
           disabled: !this.props.hasQuestions || this.props.isEditing,
           onSelect: function onSelect() {
             return handlePrint(_quizCommon.PRINT_CURRENT_PAGE);
           },
           "data-automation": "sdk-print-key-menuitem"
-        }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconPrinterLine, {
-          className: styles.menuIcon,
+        }, (0, _emotion.jsx)(_uiIcons.IconPrinterLine, {
+          css: this.props.styles.menuIcon,
           "data-automation": "sdk-print-icon"
         }), (0, _formatMessage.default)('Print Key (With Answers)')));
-        menuItems.push( /*#__PURE__*/_react.default.createElement(_uiMenu.Menu.Item, {
+        menuItems.push((0, _emotion.jsx)(_uiMenu.Menu.Item, {
           key: "printBlank",
           disabled: !this.props.hasQuestions || this.props.isEditing,
           onSelect: function onSelect() {
             return handlePrint(_quizCommon.PRINT_BLANK);
           },
           "data-automation": "sdk-print-blank-menuitem"
-        }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconPrinterLine, {
-          className: styles.menuIcon,
+        }, (0, _emotion.jsx)(_uiIcons.IconPrinterLine, {
+          css: this.props.styles.menuIcon,
           "data-automation": "sdk-print-blank-icon"
         }), (0, _formatMessage.default)('Print Blank Quiz')));
         {
@@ -197,8 +188,8 @@ var BuildingButtons = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
       }
 
       if (menuItems.length < 1) return;
-      return /*#__PURE__*/_react.default.createElement(_uiMenu.Menu, {
-        trigger: /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
+      return (0, _emotion.jsx)(_uiMenu.Menu, {
+        trigger: (0, _emotion.jsx)(_uiButtons.IconButton, {
           renderIcon: _uiIcons.IconMoreSolid,
           withBackground: false,
           withBorder: false,
@@ -212,9 +203,9 @@ var BuildingButtons = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
     value: function render() {
       var _this2 = this;
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.buttonsHolder
-      }, this.renderSavingMessage(), /*#__PURE__*/_react.default.createElement(_index.default, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.buttonsHolder
+      }, this.renderSavingMessage(), (0, _emotion.jsx)(_index.default, {
         render: function render(handlePrint) {
           return _this2.renderMenu(handlePrint);
         },
@@ -245,7 +236,8 @@ var BuildingButtons = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   setBanksTrayButtonRef: _propTypes.default.func.isRequired,
   speedgraderLink: _propTypes.default.string,
   startExport: _propTypes.default.func.isRequired,
-  contextUuid: _propTypes.default.string
+  contextUuid: _propTypes.default.string,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   activeQuizId: null,
   addInfo: function addInfo() {},

package/lib/building/components/layout/header/BuildingButtons/styles.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    quizSaving: {
+      color: componentTheme.quizSavingColor,
+      margin: componentTheme.quizSavingMargin
+    },
+    buttonsHolder: {
+      height: '100%',
+      marginRight: componentTheme.buttonsHolderMargin,
+      display: 'flex',
+      alignItems: 'center'
+    },
+    menuIcon: {
+      verticalAlign: 'middle',
+      marginRight: componentTheme.menuIconMargin,
+      fontSize: componentTheme.menuIconFontSize
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/building/components/layout/header/BuildingButtons/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,
       spacing = _ref.spacing,
       typography = _ref.typography;
@@ -16,4 +16,7 @@ function generator(_ref) {
     menuIconMargin: spacing.xSmall,
     menuIconFontSize: typography.fontSizeLarge
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/building/components/resources/ActionButtons/presenter.js

@@ -2,15 +2,11 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ActionButtons = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -19,19 +15,17 @@ 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"));
 
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 
-var _classnames2 = _interopRequireDefault(require("classnames"));
-
 var _uiButtons = require("@instructure/ui-buttons");
 
 var _uiIcons = require("@instructure/ui-icons");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _index = _interopRequireDefault(require("../../../../common/components/shared/drag_and_drop/DragHandle/index.js"));
 
@@ -41,21 +35,14 @@ var _noop = _interopRequireDefault(require("../../../../common/util/noop.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: 'gEXZO',
-  template: function template(theme) {
-    return "\n\n.gEXZO_exDh{color:".concat(theme.buttonsColor || 'inherit', ";display:inline-flex;flex:0 0 auto;font-size:1.1rem;padding:0 ").concat(theme.buttonsPadding || 'inherit', ";text-align:right;z-index:").concat(theme.buttonsZIndex || 'inherit', "}\n\n[dir=ltr] .gEXZO_exDh,[dir=rtl] .gEXZO_exDh{text-align:right}\n\n.gEXZO_fwKS.gEXZO_bBLs,body.tox-fullscreen .gEXZO_exDh{display:none}\n\n@media print{.gEXZO_exDh{display:none}}");
-  },
-  'buttons': 'gEXZO_exDh',
-  'edit': 'gEXZO_fwKS',
-  'hide': 'gEXZO_bBLs'
-};
 var ScrollTargetButton = (0, _makeScrollable.default)(_uiButtons.IconButton);
-var ActionButtons = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var ActionButtons = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ActionButtons, _Component);
 
   var _super = (0, _createSuper2.default)(ActionButtons);
@@ -100,6 +87,11 @@ var ActionButtons = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
     value: function shouldFocusOnMount() {
       return this.props.shouldFocusOnMount && !this.props.editingAddContentPopover;
     }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles();
+    }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -111,20 +103,24 @@ var ActionButtons = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
           _this2.editButton && _this2.editButton.getWrappedInstance().setFocus();
         }, 50);
       }
+
+      this.props.makeStyles();
     }
   }, {
     key: "render",
     value: function render() {
-      var _classnames;
-
-      var editClasses = (0, _classnames2.default)((_classnames = {}, (0, _defineProperty2.default)(_classnames, styles.edit, true), (0, _defineProperty2.default)(_classnames, styles.hide, !this.props.shouldRenderEdit), _classnames));
-      return /*#__PURE__*/_react.default.createElement("div", {
+      var hideClass = !this.props.shouldRenderEdit ? 'hide' : '';
+      return (0, _emotion.jsx)("div", {
+        className: "buttons",
         tabIndex: "-1",
         onFocus: this.onButtonFocus,
-        className: styles.buttons
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: editClasses
-      }, /*#__PURE__*/_react.default.createElement(ScrollTargetButton, {
+        css: this.props.styles.buttons
+      }, (0, _emotion.jsx)(_emotion.Global, {
+        styles: this.props.styles.globalStyles
+      }), (0, _emotion.jsx)("div", {
+        className: hideClass,
+        css: this.props.styles.edit
+      }, (0, _emotion.jsx)(ScrollTargetButton, {
         as: "div",
         onClick: this.switchOnEditing,
         scrollKey: this.props.scrollKey,
@@ -136,7 +132,7 @@ var ActionButtons = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
         shouldFocusOnMount: this.shouldFocusOnMount(),
         screenReaderLabel: this.props.quizEntry.generateScreenReaderText(this.props.displayPosition, _quizCommon.EDIT),
         ref: this.setEditRef
-      })), this.props.questionCopyEnabled && this.props.onCopy && /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
+      })), this.props.questionCopyEnabled && this.props.onCopy && (0, _emotion.jsx)(_uiButtons.IconButton, {
         as: "div",
         onClick: this.props.onCopy,
         disabled: this.props.shouldDisableCopy,
@@ -146,12 +142,12 @@ var ActionButtons = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
         size: "small",
         "data-automation": "sdk-copy-question-button",
         screenReaderLabel: this.props.quizEntry.generateScreenReaderText(this.props.displayPosition, _quizCommon.COPY)
-      }), this.connectDragSource( /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_index.default, {
+      }), this.connectDragSource((0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_index.default, {
         displayPosition: this.props.displayPosition,
         quizEntry: this.props.quizEntry,
         quizEntries: this.props.quizEntries,
         disabled: this.props.shouldDisableDragHandle
-      }))), this.props.shouldRenderDelete && /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
+      }))), this.props.shouldRenderDelete && (0, _emotion.jsx)(_uiButtons.IconButton, {
         as: "div",
         onClick: this.props.onDelete,
         disabled: this.props.shouldDisableDeleteButton,
@@ -182,7 +178,9 @@ var ActionButtons = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles),
   shouldRenderEdit: _propTypes.default.bool,
   shouldRenderDelete: _propTypes.default.bool,
   switchOnEditing: _propTypes.default.func,
-  shouldFocusOnMount: _propTypes.default.bool
+  shouldFocusOnMount: _propTypes.default.bool,
+  styles: _propTypes.default.object,
+  makeStyles: _propTypes.default.func
 }, _class2.defaultProps = {
   onCopy: null,
   scrollKey: void 0,