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

package/lib/building/components/resources/DeleteStimulusModal/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"));
 
@@ -37,7 +35,7 @@ var _uiRadioInput = require("@instructure/ui-radio-input");
 
 var _uiHeading = require("@instructure/ui-heading");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
@@ -45,26 +43,17 @@ var _quizInteractions = require("@instructure/quiz-interactions");
 
 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: 'cbBqk',
-  template: function template(theme) {
-    return "\n\n.cbBqk_UaUO{padding:".concat(theme.checkboxWrapperPadding || 'inherit', " 0}\n\n.cbBqk_eoFP{margin-left:auto;width:95%}\n\n.cbBqk_fJZN{font-size:").concat(theme.stimulusTitleFontSize || 'inherit', ";padding-bottom:").concat(theme.stimulusTitleBottomPadding || 'inherit', "}\n\n.cbBqk_fuUc{padding-bottom:").concat(theme.radioSpaceBottomPadding || 'inherit', "}");
-  },
-  'checkboxWrapper': 'cbBqk_UaUO',
-  'checkboxesWrapper': 'cbBqk_eoFP',
-  'stimulusTitle': 'cbBqk_fJZN',
-  'radioSpace': 'cbBqk_fuUc'
-};
-
-var _ref = /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, /*#__PURE__*/_react.default.createElement("hr", null));
+var _ref = (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, (0, _emotion.jsx)("hr", null));
 
-var _ref2 = /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, /*#__PURE__*/_react.default.createElement("hr", null));
+var _ref2 = (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, (0, _emotion.jsx)("hr", null));
 
-var DeleteStimulusModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var DeleteStimulusModal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(DeleteStimulusModal, _Component);
 
   var _super = (0, _createSuper2.default)(DeleteStimulusModal);
@@ -141,10 +130,10 @@ var DeleteStimulusModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, st
           });
         }
 
-        return /*#__PURE__*/_react.default.createElement("div", {
+        return (0, _emotion.jsx)("div", {
           key: childEntry.id,
-          className: styles.checkboxWrapper
-        }, /*#__PURE__*/_react.default.createElement(_uiCheckbox.Checkbox, {
+          css: _this.props.styles.checkboxWrapper
+        }, (0, _emotion.jsx)(_uiCheckbox.Checkbox, {
           checked: isChecked,
           label: (0, _quizInteractions.extractTextFromHtml)(itemBody),
           onChange: _this.toggleChildSelected(childEntry),
@@ -153,9 +142,9 @@ var DeleteStimulusModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, st
         }));
       });
 
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _emotion.jsx)("div", {
         key: "checkboxes",
-        className: styles.checkboxesWrapper
+        css: _this.props.styles.checkboxesWrapper
       }, _ref, checkboxes, _ref2);
     };
 
@@ -205,7 +194,7 @@ var DeleteStimulusModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, st
   }, {
     key: "cancelButton",
     value: function cancelButton() {
-      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      return (0, _emotion.jsx)(_uiButtons.Button, {
         onClick: this.closeAction,
         margin: _quizCommon.XSMALL_SIDE_MARGIN
       }, (0, _formatMessage.default)('Keep Stimulus'));
@@ -217,7 +206,7 @@ var DeleteStimulusModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, st
           deletionMode = _this$props3.deletionMode,
           childEntries = _this$props3.childEntries;
       var disabled = !deletionMode && childEntries.size > 0;
-      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      return (0, _emotion.jsx)(_uiButtons.Button, {
         disabled: disabled,
         color: "primary",
         onClick: this.handleSubmit,
@@ -232,64 +221,65 @@ var DeleteStimulusModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, st
         return;
       }
 
-      return /*#__PURE__*/_react.default.createElement(_uiRadioInput.RadioInput, {
+      return (0, _emotion.jsx)(_uiRadioInput.RadioInput, {
         key: "chooseWhich",
         value: "chooseWhich",
-        label: /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.radioSpace
+        label: (0, _emotion.jsx)("div", {
+          css: this.props.styles.radioSpace
         }, (0, _formatMessage.default)('Remove stimulus and choose which questions to remove.'), this.renderCheckboxes())
       });
     }
   }, {
     key: "renderMainMenu",
     value: function renderMainMenu() {
-      return /*#__PURE__*/_react.default.createElement(_uiRadioInput.RadioInputGroup, {
+      return (0, _emotion.jsx)(_uiRadioInput.RadioInputGroup, {
         name: "deletionMode",
         defaultValue: this.props.deletionMode,
         onChange: this.setDeletionMode,
-        description: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Stimulus Removal Mode'))
-      }, /*#__PURE__*/_react.default.createElement(_uiRadioInput.RadioInput, {
+        description: (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Stimulus Removal Mode'))
+      }, (0, _emotion.jsx)(_uiRadioInput.RadioInput, {
         key: "deleteAll",
         value: "deleteAll",
-        label: /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.radioSpace
+        label: (0, _emotion.jsx)("div", {
+          css: this.props.styles.radioSpace
         }, (0, _formatMessage.default)('Remove stimulus and all attached questions.'))
-      }), this.renderChooseWhich(), /*#__PURE__*/_react.default.createElement(_uiRadioInput.RadioInput, {
+      }), this.renderChooseWhich(), (0, _emotion.jsx)(_uiRadioInput.RadioInput, {
         key: "deleteNone",
         value: "deleteNone",
-        label: /*#__PURE__*/_react.default.createElement("div", {
-          className: styles.radioSpace
+        label: (0, _emotion.jsx)("div", {
+          css: this.props.styles.radioSpace
         }, (0, _formatMessage.default)('Remove stimulus only. Questions will be released into assessment.'))
       }));
     }
   }, {
     key: "renderContent",
     value: function renderContent() {
-      var content = this.props.childEntries.size === 0 ? /*#__PURE__*/_react.default.createElement("span", null, (0, _formatMessage.default)('Are you sure you want to remove this stimulus?')) : this.renderMainMenu();
+      var content = this.props.childEntries.size === 0 ? (0, _emotion.jsx)("span", null, (0, _formatMessage.default)('Are you sure you want to remove this stimulus?')) : this.renderMainMenu();
       var stimulusTitle = this.props.stimulusEntry && this.props.stimulusEntry.getEntry().title;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.deleteStimulusModal
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.stimulusTitle
+      return (0, _emotion.jsx)("div", {
+        className: "deleteStimulusModal",
+        css: this.props.styles.deleteStimulusModal
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.deleteStimulusModal.stimulusTitle
       }, stimulusTitle), content);
     }
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_quizCommon.Modal, {
+      return (0, _emotion.jsx)(_quizCommon.Modal, {
         open: this.props.modalOpen,
         onDismiss: this.closeAction,
         size: "small",
         label: (0, _formatMessage.default)('Confirm Stimulus Removal')
-      }, /*#__PURE__*/_react.default.createElement(_quizCommon.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+      }, (0, _emotion.jsx)(_quizCommon.ModalHeader, null, (0, _emotion.jsx)(_uiHeading.Heading, {
         level: "reset",
         as: "h2"
-      }, (0, _formatMessage.default)('Confirm Stimulus Removal')), /*#__PURE__*/_react.default.createElement(_uiButtons.CloseButton, {
+      }, (0, _formatMessage.default)('Confirm Stimulus Removal')), (0, _emotion.jsx)(_uiButtons.CloseButton, {
         onClick: this.closeAction,
         placement: "end",
         offset: "medium",
         screenReaderLabel: (0, _formatMessage.default)('Close')
-      })), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalBody, null, this.renderContent()), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalFooter, null, this.cancelButton(), this.doneButton()));
+      })), (0, _emotion.jsx)(_quizCommon.ModalBody, null, this.renderContent()), (0, _emotion.jsx)(_quizCommon.ModalFooter, null, this.cancelButton(), this.doneButton()));
     }
   }]);
   DeleteStimulusModal.displayName = "DeleteStimulusModal";
@@ -304,7 +294,8 @@ var DeleteStimulusModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, st
   setUi: _propTypes.default.func.isRequired,
   withConfirm: _propTypes.default.func.isRequired,
   stimulusEntry: _reactImmutableProptypes.default.record,
-  quizId: _propTypes.default.string
+  quizId: _propTypes.default.string,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   selectedChildren: _immutable.Set.of(),
   deletionMode: '',

package/lib/building/components/resources/DeleteStimulusModal/styles.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    checkboxWrapper: {
+      padding: "".concat(componentTheme.checkboxWrapperPadding, " 0")
+    },
+    checkboxesWrapper: {
+      width: '95%',
+      marginLeft: 'auto'
+    },
+    deleteStimulusModal: {
+      stimulusTitle: {
+        paddingBottom: componentTheme.stimulusTitleBottomPadding,
+        fontSize: componentTheme.stimulusTitleFontSize
+      }
+    },
+    radioSpace: {
+      paddingBottom: componentTheme.radioSpaceBottomPadding
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/building/components/resources/DeleteStimulusModal/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,
       typography = _ref.typography;
   return {
@@ -14,4 +14,7 @@ function generator(_ref) {
     stimulusTitleFontSize: typography.fontSizeLarge,
     radioSpaceBottomPadding: spacing.xSmall
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/building/components/resources/ItemFeedbackModal/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"));
 
@@ -27,7 +25,7 @@ var _uiButtons = require("@instructure/ui-buttons");
 
 var _uiHeading = require("@instructure/ui-heading");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _quizRce = require("@instructure/quiz-rce");
 
@@ -35,22 +33,15 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
 
 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: 'esPWW',
-  template: function template(theme) {
-    return "\n\n.esPWW_hRNi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n\n.esPWW_eCKf{font-size:".concat(theme.feedbackLabelFontSize || 'inherit', "}");
-  },
-  'itemStem': 'esPWW_hRNi',
-  'feedbackLabel': 'esPWW_eCKf'
-};
-
-var _ref = /*#__PURE__*/_react.default.createElement("br", null);
+var _ref = (0, _emotion.jsx)("br", null);
 
-var ItemFeedbackModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var ItemFeedbackModal = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ItemFeedbackModal, _Component);
 
   var _super = (0, _createSuper2.default)(ItemFeedbackModal);
@@ -96,7 +87,7 @@ var ItemFeedbackModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
   (0, _createClass2.default)(ItemFeedbackModal, [{
     key: "cancelButton",
     value: function cancelButton() {
-      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      return (0, _emotion.jsx)(_uiButtons.Button, {
         onClick: this.closeAction,
         margin: _quizCommon.XSMALL_SIDE_MARGIN
       }, (0, _formatMessage.default)('Cancel'));
@@ -104,7 +95,7 @@ var ItemFeedbackModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
   }, {
     key: "doneButton",
     value: function doneButton() {
-      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      return (0, _emotion.jsx)(_uiButtons.Button, {
         color: "primary",
         onClick: this.continueAction,
         margin: _quizCommon.XSMALL_SIDE_MARGIN
@@ -113,10 +104,10 @@ var ItemFeedbackModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
   }, {
     key: "renderRichContentInput",
     value: function renderRichContentInput(key, label) {
-      return /*#__PURE__*/_react.default.createElement("div", null, _ref, /*#__PURE__*/_react.default.createElement("label", {
-        className: styles.feedbackLabel,
+      return (0, _emotion.jsx)("div", null, _ref, (0, _emotion.jsx)("label", {
+        css: this.props.styles.feedbackLabel,
         htmlFor: key
-      }, label), /*#__PURE__*/_react.default.createElement(_quizRce.RichContentInput, {
+      }, label), (0, _emotion.jsx)(_quizRce.RichContentInput, {
         label: "",
         textareaId: key,
         defaultContent: this.props.feedback.get(key),
@@ -127,15 +118,15 @@ var ItemFeedbackModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
   }, {
     key: "renderContent",
     value: function renderContent() {
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_quizRce.RichContentRenderer, {
-        customStyles: styles.itemStem,
+      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_quizRce.RichContentRendererEmotion, {
+        customStyles: this.props.styles.itemStem,
         content: this.props.item.itemBody
       }), this.renderRichContentInput('correct', (0, _formatMessage.default)('For a correct answer')), this.renderRichContentInput('incorrect', (0, _formatMessage.default)('For an incorrect answer')), this.renderRichContentInput('neutral', (0, _formatMessage.default)('Provide general feedback (regardless of answer)')));
     }
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_quizCommon.Modal, {
+      return (0, _emotion.jsx)("div", null, (0, _emotion.jsx)(_quizCommon.Modal, {
         open: this.props.modalOpen || this.props.importModalOpen,
         onClose: this.closeAction,
         size: "large",
@@ -143,15 +134,15 @@ var ItemFeedbackModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
         shouldCloseOnDocumentClick: false // must be false to allow interacting with RCE modals (such as embed media)
         ,
         shouldReturnFocus: false
-      }, /*#__PURE__*/_react.default.createElement(_quizCommon.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+      }, (0, _emotion.jsx)(_quizCommon.ModalHeader, null, (0, _emotion.jsx)(_uiHeading.Heading, {
         level: "reset",
         as: "h2"
-      }, (0, _formatMessage.default)('Student Feedback')), /*#__PURE__*/_react.default.createElement(_uiButtons.CloseButton, {
+      }, (0, _formatMessage.default)('Student Feedback')), (0, _emotion.jsx)(_uiButtons.CloseButton, {
         onClick: this.closeAction,
         placement: "end",
         offset: "medium",
         screenReaderLabel: (0, _formatMessage.default)('Close')
-      })), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalBody, null, this.renderContent()), /*#__PURE__*/_react.default.createElement(_quizCommon.ModalFooter, null, this.cancelButton(), this.doneButton())));
+      })), (0, _emotion.jsx)(_quizCommon.ModalBody, null, this.renderContent()), (0, _emotion.jsx)(_quizCommon.ModalFooter, null, this.cancelButton(), this.doneButton())));
     }
   }]);
   ItemFeedbackModal.displayName = "ItemFeedbackModal";
@@ -164,7 +155,8 @@ var ItemFeedbackModal = (_dec = (0, _uiThemeable.themeable)(_theme.default, styl
   item: _reactImmutableProptypes.default.record.isRequired,
   modalOpen: _propTypes.default.bool.isRequired,
   setUi: _propTypes.default.func.isRequired,
-  modalTrigger: _propTypes.default.instanceOf(_react.Component)
+  modalTrigger: _propTypes.default.instanceOf(_react.Component),
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   modalTrigger: null
 }, _temp)) || _class);

package/lib/building/components/resources/ItemFeedbackModal/styles.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    itemStem: {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+    feedbackLabel: {
+      fontSize: componentTheme.feedbackLabelFontSize
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/building/components/resources/ItemFeedbackModal/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 typography = _ref.typography;
   return {
     feedbackLabelFontSize: typography.fontSizeSmall
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/common/components/layout/sidebar/PositionSummary/index.js

@@ -2,13 +2,13 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.PositionSummary = void 0;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -17,13 +17,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 _classnames = _interopRequireDefault(require("classnames"));
+var _emotion = require("@instructure/emotion");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _styles = _interopRequireDefault(require("./styles.js"));
 
 var _theme = _interopRequireDefault(require("./theme.js"));
 
@@ -31,18 +31,7 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
 
 var _dec, _class, _class2, _temp;
 
-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'
-};
-var PositionSummary = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var PositionSummary = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(PositionSummary, _Component);
 
   var _super = (0, _createSuper2.default)(PositionSummary);
@@ -55,16 +44,16 @@ var PositionSummary = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   (0, _createClass2.default)(PositionSummary, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.column
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)([styles.numberSummary, styles.firstNumberSummary])
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.column
+      }, (0, _emotion.jsx)("div", {
+        css: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.props.styles.numberSummary), this.props.styles.firstNumberSummary)
       }, (0, _formatMessage.default)('{first, number}', {
         first: this.props.firstPosition
-      })), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.verticalDots
-      }), /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)([styles.numberSummary, styles.secondNumberSummary])
+      })), (0, _emotion.jsx)("div", {
+        css: this.props.styles.verticalDots
+      }), (0, _emotion.jsx)("div", {
+        css: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.props.styles.numberSummary), this.props.styles.secondNumberSummary)
       }, (0, _formatMessage.default)('{last, number}', {
         last: this.props.lastPosition
       })));
@@ -74,7 +63,8 @@ var PositionSummary = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   return PositionSummary;
 }(_react.Component), _class2.propTypes = {
   firstPosition: _propTypes.default.number.isRequired,
-  lastPosition: _propTypes.default.number.isRequired
+  lastPosition: _propTypes.default.number.isRequired,
+  styles: _propTypes.default.object
 }, _temp)) || _class);
 exports.PositionSummary = PositionSummary;
 var _default = PositionSummary;

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

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+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
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/common/components/layout/sidebar/PositionSummary/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,
       borders = _ref.borders,
@@ -19,4 +19,7 @@ function generator(_ref) {
     verticalDotsBorderWidth: borders.widthSmall,
     verticalDotsBorderColor: colors.licorice
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;