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

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

@@ -0,0 +1,21 @@
+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'
+    }
+  };
+};
+
+export default generateStyle;

package/es/building/components/resources/quizEntry/QuizEntryEdit/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       colors = _ref.colors,
       typography = _ref.typography,
@@ -7,4 +7,6 @@ export default function generator(_ref) {
     quizEntryEditFontSize: typography.fontSizeMedium,
     quizEntryEditMargin: spacing.medium
   };
-}
+};
+
+export default generateComponentTheme;

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

@@ -5,48 +5,31 @@ 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 ImmutablePropTypes from 'react-immutable-proptypes';
 import partial from 'lodash/partial';
 import { DragSource } from 'react-dnd';
 import { IconBankLine } from '@instructure/ui-icons';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import { FillBlankInteractionType } from '@instructure/quiz-interactions';
 import { TOP } from '@instructure/quiz-common';
 import t from '@instructure/quiz-i18n/es/format-message';
 import { convertFITBtoRich } from "../../../../../common/util/fitbCopyHelper.js";
 import Item from "../../../../../common/records/Item.js";
-import Overlay from "../../../../../common/components/shared/overlay/Overlay.js";
+import OverlayEmotion from "../../../../../common/components/shared/overlayEmotion/index.js";
 import ActionButtons from "../../ActionButtons/index.js";
 import { ItemTypes, dragSource, collectDrag } from "../../../../../common/components/shared/drag_and_drop/dragAndDropUtils.js";
 import PositionBox from "../../../../../common/components/resources/positionBox/PositionBox.js";
 import DragAndDropZone from "../../../../../common/components/shared/drag_and_drop/DragAndDropZone/index.js";
-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'
-};
-import theme from "./theme.js";
-
-var _ref = /*#__PURE__*/React.createElement(IconBankLine, null);
-
-var QuizEntryShow = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+
+var _ref = jsx(IconBankLine, null);
+
+var QuizEntryShow = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(QuizEntryShow, _Component);
 
   var _super = _createSuper(QuizEntryShow);
@@ -215,8 +198,9 @@ var QuizEntryShow = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
     value: function renderPointsPossible() {
       if (this.props.entry instanceof Item) {
         var pointsPossible = this.props.quizEntry.pointsPossible;
-        return /*#__PURE__*/React.createElement("div", {
-          className: styles.points,
+        return jsx("div", {
+          className: "points",
+          css: this.props.styles.points,
           "data-automation": "sdk-points-possible-div"
         }, this.getPointsText(pointsPossible || 0));
       }
@@ -226,8 +210,8 @@ var QuizEntryShow = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
     value: function renderInteractionType() {
       if (this.props.entry instanceof Item) {
         var interactionTypeName = this.props.entry.getInteractionType().name || this.props.interactionTypeName;
-        return /*#__PURE__*/React.createElement("div", {
-          className: styles.interactionTypeName,
+        return jsx("div", {
+          css: this.props.styles.interactionTypeName,
           "data-automation": "sdk-interaction-type-name-div"
         }, interactionTypeName);
       }
@@ -242,10 +226,10 @@ var QuizEntryShow = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
   }, {
     key: "renderLeftHeader",
     value: function renderLeftHeader() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.leftHeader
-      }, this.renderBankedContent(), this.renderInteractionType(), this.renderPointsPossible(), /*#__PURE__*/React.createElement("div", {
-        className: styles.title,
+      return jsx("div", {
+        css: this.props.styles.leftHeader
+      }, this.renderBankedContent(), this.renderInteractionType(), this.renderPointsPossible(), jsx("div", {
+        css: this.props.styles.title,
         "data-automation": "sdk-quiz-entry-title-div"
       }, this.props.entry.title));
     }
@@ -278,26 +262,27 @@ var QuizEntryShow = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
       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.createElement(Overlay, {
+      return jsx(OverlayEmotion, {
         onClick: this.editingOn,
-        wrapperClassName: styles.quizEntryWrapper,
+        wrapperStyles: this.props.styles.quizEntryWrapper,
         tabIndex: "-1",
         hideOverlay: shouldLockQuizEntry
-      }, /*#__PURE__*/React.createElement(DragAndDropZone, Object.assign({}, propsForDnDZone, {
+      }, jsx(DragAndDropZone, Object.assign({}, propsForDnDZone, {
         location: "above"
-      })), connectDragPreview( /*#__PURE__*/React.createElement("div", {
-        className: styles.quizEntryShow,
+      })), 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.createElement("div", {
-        className: styles.header
-      }, quizEntry.isInStimulus && stimulusOrientation === TOP && /*#__PURE__*/React.createElement("div", {
-        className: styles.connectingLines
-      }), /*#__PURE__*/React.createElement(PositionBox, {
+      }, jsx("div", {
+        css: this.props.styles.header
+      }, quizEntry.isInStimulus && stimulusOrientation === TOP && jsx("div", {
+        css: this.props.styles.connectingLines
+      }), jsx(PositionBox, {
         position: positionToDisplay,
         headingText: positionText,
         headingLevel: quizEntry.isInStimulus ? 'h3' : 'h2'
-      }), this.renderLeftHeader(), /*#__PURE__*/React.createElement(ActionButtons, {
+      }), this.renderLeftHeader(), jsx(ActionButtons, {
         connectDragSource: this.props.connectDragSource,
         displayPosition: this.props.displayPosition,
         onDelete: this.removeItem,
@@ -311,11 +296,11 @@ var QuizEntryShow = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
         shouldDisableCopy: shouldLockQuizEntry,
         shouldRenderEdit: !shouldLockQuizEntry,
         shouldRenderDelete: !shouldLockQuizEntry
-      }), /*#__PURE__*/React.createElement(ScreenReaderContent, null, srMsg)), /*#__PURE__*/React.createElement("div", {
-        className: styles.itemHolder,
+      }), jsx(ScreenReaderContent, null, srMsg)), jsx("div", {
+        css: this.props.styles.itemHolder,
         ref: this.setInert,
         "data-automation": "sdk-quiz-entry-show-item-holder"
-      }, this.props.children))), /*#__PURE__*/React.createElement(DragAndDropZone, Object.assign({}, propsForDnDZone, {
+      }, this.props.children)), jsx(DragAndDropZone, Object.assign({}, propsForDnDZone, {
         location: "below"
       })));
     }
@@ -355,7 +340,8 @@ var QuizEntryShow = (_dec = themeable(theme, styles), _dec(_class = (_temp = _cl
   switchOnEditing: PropTypes.func.isRequired,
   // from QuizEntry
   updateItemCallStatus: PropTypes.string.isRequired,
-  withConfirm: PropTypes.func.isRequired
+  withConfirm: PropTypes.func.isRequired,
+  styles: PropTypes.object
 }, _class2.defaultProps = {
   children: null,
   draggingOver: false,

package/es/building/components/resources/quizEntry/QuizEntryShow/styles.js

@@ -0,0 +1,84 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+var generateStyle = function generateStyle(componentTheme) {
+  var mp = '@media print';
+  var interactionTypeStyles = {
+    color: componentTheme.titleInteractionTypeNamePointsColor,
+    fontSize: componentTheme.titleInteractionTypeNamePointsFontSize,
+    marginLeft: componentTheme.titleInteractionTypeNamePointsLeftMargin,
+    marginRight: componentTheme.titleInteractionTypeNamePointsRightMargin,
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap'
+  };
+  var optionsButtonDragDropStyle = {
+    backgroundColor: 'transparent',
+    border: 'none',
+    color: 'inherit',
+    fontSize: componentTheme.optionsButtonDragDropHandleFontSize,
+    margin: componentTheme.optionsButtonDragDropHandleMargin
+  };
+  return {
+    quizEntryWrapper: _defineProperty({
+      transform: 'translate3d(0, 0, 0)'
+    }, mp, {
+      breakInside: 'avoid'
+    }),
+    quizEntryShow: {
+      padding: componentTheme.quizEntryShowPadding,
+      backgroundColor: componentTheme.quizEntryShowBackgroundColor
+    },
+    header: {
+      height: componentTheme.headerHeight,
+      display: 'flex',
+      flexWrap: 'nowrap',
+      flexDirection: 'row',
+      alignItems: 'stretch',
+      paddingRight: componentTheme.headerRightPadding
+    },
+    dndBorder: {
+      border: componentTheme.dndBorder
+    },
+    leftHeader: {
+      flex: '8 0 0',
+      display: 'inline-flex',
+      overflow: 'hidden',
+      alignItems: 'center'
+    },
+    connectingLines: {
+      flex: '0 0 auto',
+      display: 'inline-flex',
+      borderLeft: "".concat(componentTheme.phoneConnectingLinesBorderWidth, " dotted"),
+      borderBottom: "".concat(componentTheme.phoneConnectingLinesBorderWidth, " dotted"),
+      borderColor: componentTheme.phoneConnectingLinesBorderColor,
+      height: '2rem',
+      width: '1.2rem',
+      marginTop: '-0.8rem',
+      marginRight: '1.2rem'
+    },
+    rightHeader: {
+      flex: '0 0 auto',
+      display: 'inline-flex',
+      textAlign: 'right',
+      zIndex: componentTheme.rightHeaderZIndex,
+      color: componentTheme.rightHeaderColor,
+      button: {
+        backgroundColor: 'initial'
+      }
+    },
+    title: interactionTypeStyles,
+    interactionTypeName: interactionTypeStyles,
+    points: interactionTypeStyles,
+    itemHolder: {
+      overflowWrap: 'anywhere',
+      margin: componentTheme.itemHolderMargin
+    },
+    optionsButton: _objectSpread(_objectSpread({}, optionsButtonDragDropStyle), {}, {
+      cursor: 'pointer'
+    }),
+    dragAndDropHandle: optionsButtonDragDropStyle
+  };
+};
+
+export default generateStyle;

package/es/building/components/resources/quizEntry/QuizEntryShow/theme.js

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

package/es/common/components/layout/navbar/SecondaryNavBarButton/index.js

@@ -54,7 +54,7 @@ export var SecondaryNavBarButton = (_dec = withStyle(generateStyle, generateComp
 
   SecondaryNavBarButton.displayName = "SecondaryNavBarButton";
   return SecondaryNavBarButton;
-}(Component), _class2.propTypes = {
+}(Component), _class2.displayName = 'TopNavBarItem', _class2.propTypes = {
   children: PropTypes.string.isRequired,
   styles: PropTypes.object,
   makeStyles: PropTypes.func

package/es/common/components/layout/navbar/index.js

@@ -1,39 +1,136 @@
-import { bindActionCreators } from 'redux';
-import partial from 'lodash/partial';
-import { connect } from "../../../../common/react-redux.js";
-import * as modalActions from "../../../../common/actions/modal.js";
-import { set as setUI } from "../../../../common/actions/ui.js";
-import { BUILD_TRAY_OPEN, BUILD_TRAY_BUTTON_REF } from '@instructure/quiz-common';
-import { generateImportModalId } from "../../ImportModal/index.js";
-import { NavBar as NavBarPresenter } from "./presenter.js";
-import { getActiveQuiz } from "../../../selectors/quizzes.js";
-import { featureOn } from "../../../util/featureCheck.js";
-import { startQuizExportJob } from "../../../actions/quizExport.js";
-import { addAlert, addInfo } from "../../../actions/alerts.js";
-export function mapStateToProps(state) {
-  var quiz = getActiveQuiz(state);
-  return {
-    activeQuizId: quiz.id,
-    canExport: !state.getIn(['quizExport', "activeQuiz".concat(quiz.id)]),
-    canImport: quiz.canImport(),
-    hasQuestions: quiz.hasQuestions(),
-    isEditing: state.get('editing') && state.get('editing').some(function (elem) {
-      return elem;
-    }),
-    printingEnabled: featureOn('printing')
-  };
-}
-
-var mapDispatchToProps = function mapDispatchToProps(dispatch) {
-  return {
-    addAlert: bindActionCreators(addAlert, dispatch),
-    addInfo: bindActionCreators(addInfo, dispatch),
-    openBanksTray: bindActionCreators(setUI.bind(void 0, BUILD_TRAY_OPEN, true), dispatch),
-    setBanksTrayButtonRef: bindActionCreators(partial(setUI, BUILD_TRAY_BUTTON_REF), dispatch),
-    startExport: bindActionCreators(startQuizExportJob, dispatch),
-    openModal: bindActionCreators(modalActions.openModal.bind(modalActions, generateImportModalId('qtiImport')), dispatch)
-  };
-};
-
-export var NavBar = connect(mapStateToProps, mapDispatchToProps)(NavBarPresenter);
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+var _dec, _class, _class2, _temp;
+
+/** @jsx jsx */
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import { TopNavBar } from '@instructure/ui-top-nav-bar';
+import { IconQuizLine } from '@instructure/ui-icons';
+import t from '@instructure/quiz-i18n/es/format-message';
+import { withStyle, jsx } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+
+var _ref = jsx(IconQuizLine, {
+  color: "primary",
+  size: "small"
+});
+
+export var NavBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  _inherits(NavBar, _Component);
+
+  var _super = _createSuper(NavBar);
+
+  function NavBar() {
+    var _this;
+
+    _classCallCheck(this, NavBar);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _this.hiddenActionItemsMenuTriggerLabel = function (hiddenChildrenCount) {
+      return t('{hiddenChildrenCount} more actions', {
+        hiddenChildrenCount: hiddenChildrenCount
+      });
+    };
+
+    _this.hiddenMenuItemsMenuTriggerLabel = function (hiddenChildrenCount) {
+      return t('{hiddenChildrenCount} More', {
+        hiddenChildrenCount: hiddenChildrenCount
+      });
+    };
+
+    _this.renderBrand = function () {
+      return jsx(TopNavBar.Brand, {
+        screenReaderLabel: t('Quizzes'),
+        renderIcon: _ref
+      });
+    };
+
+    _this.renderMenuItems = function () {
+      return jsx(TopNavBar.MenuItems, {
+        listLabel: t('Page navigation'),
+        currentPageId: window.location.pathname,
+        renderHiddenItemsMenuTriggerLabel: _this.hiddenMenuItemsMenuTriggerLabel
+      }, _this.props.menuItems.map(function (menuItem) {
+        return _this.renderMenuItem(menuItem);
+      }));
+    };
+
+    _this.renderMenuItem = function (menuItem) {
+      return jsx(TopNavBar.Item, {
+        id: menuItem.path,
+        key: menuItem.path,
+        onClick: function onClick() {
+          return _this.props.handleMenuItemChange(menuItem.path);
+        } // eslint-disable-line react/jsx-no-bind
+
+      }, menuItem.text);
+    };
+
+    _this.renderActionItems = function () {
+      return jsx(TopNavBar.ActionItems, {
+        listLabel: t('Actions'),
+        renderHiddenItemsMenuTriggerLabel: _this.hiddenActionItemsMenuTriggerLabel
+      }, _toConsumableArray(_this.props.actionItems));
+    };
+
+    return _this;
+  }
+
+  _createClass(NavBar, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      return jsx(TopNavBar, {
+        breakpoint: this.props.styles.phoneBreakPoint,
+        mediaQueryMatch: "element",
+        inverseColor: true
+      }, function () {
+        return jsx(TopNavBar.Layout, {
+          themeOverride: {
+            desktopBackgroundInverse: _this2.props.styles.backgroundColor,
+            smallViewportBackgroundInverse: _this2.props.styles.backgroundColor
+          },
+          navLabel: t('Quizzes navigation bar'),
+          desktopConfig: {
+            hideActionsUserSeparator: true
+          },
+          smallViewportConfig: {
+            dropdownMenuToggleButtonLabel: t('Toggle Menu'),
+            dropdownMenuLabel: t('Main Menu')
+          },
+          renderBrand: _this2.renderBrand(),
+          renderMenuItems: _this2.renderMenuItems(),
+          renderActionItems: _this2.renderActionItems()
+        });
+      });
+    }
+  }]);
+
+  NavBar.displayName = "NavBar";
+  return NavBar;
+}(Component), _class2.propTypes = {
+  menuItems: PropTypes.arrayOf(PropTypes.shape({
+    path: PropTypes.string.isRequired,
+    text: PropTypes.string.isRequired
+  })),
+  handleMenuItemChange: PropTypes.func,
+  actionItems: PropTypes.arrayOf(PropTypes.node),
+  styles: PropTypes.object
+}, _class2.defaultProps = {
+  menuItems: [],
+  handleMenuItemChange: function handleMenuItemChange() {},
+  actionItems: []
+}, _temp)) || _class);
 export default NavBar;

package/es/common/components/layout/navbar/styles.js

@@ -0,0 +1,8 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    backgroundColor: componentTheme.backgroundColor,
+    phoneBreakPoint: componentTheme.phoneBreakPoint
+  };
+};
+
+export default generateStyle;

package/es/common/components/layout/navbar/theme.js

@@ -0,0 +1,10 @@
+var generateComponentTheme = function generateComponentTheme(_ref) {
+  var breakpoints = _ref.breakpoints,
+      colors = _ref.colors;
+  return {
+    backgroundColor: colors.porcelain,
+    phoneBreakPoint: breakpoints.medium
+  };
+};
+
+export default generateComponentTheme;