@occmundial/occ-atomic 3.0.0-beta.6 → 3.0.0-beta.61

package/build/Modal/styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.objectToFontValue = void 0;
 
 var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
 
@@ -11,12 +11,27 @@ var _grid = _interopRequireDefault(require("../subatomic/grid"));
 
 var _colors = _interopRequireDefault(require("../subatomic/colors"));
 
-var _card, _content;
+var _fonts = _interopRequireDefault(require("../subatomic/fonts"));
+
+var _colors2 = _interopRequireDefault(require("../tokens/colors.json"));
+
+var _spacing2 = _interopRequireDefault(require("../tokens/spacing.json"));
+
+var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
+
+var _fonts2 = _interopRequireDefault(require("../tokens/fonts.json"));
+
+var _fullSize;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+var objectToFontValue = function objectToFontValue(font) {
+  return "".concat(font.fontWeight, " ").concat(font.fontSize, "/").concat(font.lineHeight, " ").concat(_fonts["default"].body);
+};
+
+exports.objectToFontValue = objectToFontValue;
 var _default = {
   '@global': {
     body: {
@@ -46,7 +61,6 @@ var _default = {
     width: '100%',
     height: '100%',
     background: 'rgba(0, 0, 5, 0.85)',
-    overflow: 'auto',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
@@ -56,65 +70,53 @@ var _default = {
     transition: '0.3s all',
     cursor: 'pointer'
   },
-  overlayShow: {
-    animation: '0.3s modalFadeIn linear'
+  show: {
+    animation: '0.3s modalFadeIn linear',
+    '& $card': {
+      animation: '0.3s modalFadeDown ease-out'
+    }
   },
-  overlayHide: {
-    opacity: 0
+  hide: {
+    opacity: 0,
+    '& $card': {
+      opacity: 0,
+      marginTop: -_spacing["default"].xLarge
+    }
   },
   noClose: {
     cursor: 'default'
   },
-  cardWrapper: _defineProperty({
+  cardWrapper: {
     position: 'relative',
-    maxWidth: '100%',
-    maxHeight: '100%'
-  }, "@media screen and (max-width:".concat(_grid["default"].xs - 1, "px)"), {
-    height: function height(_ref) {
-      var fullSize = _ref.fullSize;
-      return fullSize && '100%';
-    }
-  }),
+    maxWidth: '100vw',
+    maxHeight: '100vh'
+  },
   cardBlock: _defineProperty({
     margin: _spacing["default"].gutter
   }, "@media screen and (max-width:".concat(_grid["default"].xs - 1, "px)"), {
-    margin: function margin(_ref2) {
-      var fullSize = _ref2.fullSize;
+    margin: function margin(_ref) {
+      var fullSize = _ref.fullSize;
       return fullSize && 0;
-    },
-    height: function height(_ref3) {
-      var fullSize = _ref3.fullSize;
-      return fullSize && '100%';
     }
   }),
-  card: (_card = {
+  card: _defineProperty({
     maxWidth: '100%',
     cursor: 'auto',
+    overflow: 'hidden',
     transition: '0.3s opacity, 0.3s margin-top',
-    padding: _spacing["default"].small
-  }, _defineProperty(_card, "@media screen and (min-width:".concat(_grid["default"].sm, "px)"), {
-    padding: _spacing["default"].medium
-  }), _defineProperty(_card, "@media screen and (max-width:".concat(_grid["default"].xs - 1, "px)"), {
-    padding: function padding(_ref4) {
-      var fullSize = _ref4.fullSize;
-      return fullSize && _spacing["default"].base;
-    },
-    minHeight: function minHeight(_ref5) {
-      var fullSize = _ref5.fullSize;
-      return fullSize && '100%';
+    borderRadius: _borderRadius["default"]['br-sm'],
+    border: "1px solid ".concat(_colors2["default"].border["default"]["default"]),
+    background: _colors2["default"].bg.surface["default"]
+  }, "@media screen and (max-width:".concat(_grid["default"].xs - 1, "px)"), {
+    minHeight: function minHeight(_ref2) {
+      var fullSize = _ref2.fullSize;
+      return fullSize && '100vh';
     },
-    borderRadius: function borderRadius(_ref6) {
-      var fullSize = _ref6.fullSize;
+    borderRadius: function borderRadius(_ref3) {
+      var fullSize = _ref3.fullSize;
       return fullSize && 0;
     }
-  }), _card),
-  cardShow: {
-    animation: '0.3s modalFadeDown ease-out'
-  },
-  cardHide: {
-    opacity: 0,
-    marginTop: -_spacing["default"].xLarge
-  },
+  }),
   xl: {
     width: 1024
   },
@@ -122,116 +124,133 @@ var _default = {
     width: 820
   },
   md: _defineProperty({
-    width: 520
+    width: 600
   }, "@media screen and (max-width:".concat(_grid["default"].sm - 1, "px)"), {
-    width: 322,
     maxWidth: '100%'
   }),
   sm: {
-    width: 322,
-    maxWidth: '100%'
+    width: 320,
+    maxWidth: '100%',
+    '& $header': {
+      height: 56,
+      padding: [_spacing2["default"]['size-2'], _spacing2["default"]['size-3']]
+    },
+    '& $title': {
+      font: objectToFontValue(_fonts2["default"]['mobile-h4-m'])
+    },
+    '& $contentChild': {
+      padding: _spacing2["default"]['size-3']
+    },
+    '& $footer': {
+      flexDirection: 'column-reverse',
+      gap: _spacing2["default"]['size-1'],
+      padding: _spacing2["default"]['size-3']
+    }
   },
-  top: {
-    marginBottom: _spacing["default"].small
+  fullSize: (_fullSize = {}, _defineProperty(_fullSize, "@media screen and (max-width:".concat(_grid["default"].xs - 1, "px)"), {
+    width: '100% !important',
+    border: 0
+  }), _defineProperty(_fullSize, '& $contentWrapper', _defineProperty({
+    height: '100vh',
+    maxHeight: '100vh',
+    overflow: 'auto'
+  }, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
+    height: 'auto',
+    maxHeight: '85vh'
+  })), _fullSize),
+  contentWrapper: {
+    flex: 1,
+    height: 'auto',
+    maxHeight: '85vh'
   },
-  title: {},
-  closeIcon: {
-    height: _spacing["default"].medium,
+  header: _defineProperty({
+    height: 56,
+    flexGrow: 0,
+    padding: [_spacing2["default"]['size-2'], _spacing2["default"]['size-3']],
     display: 'flex',
-    alignItems: 'center'
-  },
-  content: (_content = {
-    marginLeft: -_spacing["default"].small,
-    marginRight: -_spacing["default"].small,
-    paddingLeft: _spacing["default"].small,
-    paddingRight: _spacing["default"].small,
-    transition: '0.1s height'
-  }, _defineProperty(_content, "@media screen and (min-width:".concat(_grid["default"].sm, "px)"), {
-    marginLeft: -_spacing["default"].medium,
-    marginRight: -_spacing["default"].medium,
-    paddingLeft: _spacing["default"].medium,
-    paddingRight: _spacing["default"].medium
-  }), _defineProperty(_content, '&::-webkit-scrollbar', {
-    width: 6
-  }), _defineProperty(_content, '&::-webkit-scrollbar-thumb', {
-    background: _colors["default"].grey200,
-    borderRadius: 3
-  }), _content),
-  bottom: {
-    textAlign: 'right',
-    marginTop: _spacing["default"].tiny
+    alignItems: 'center',
+    zIndex: 1,
+    background: 'transparent',
+    border: '1px solid transparent',
+    transition: '0.2s all'
+  }, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
+    height: 72,
+    padding: [_spacing2["default"]['size-4'], _spacing2["default"]['size-4'], _spacing2["default"]['size-4'], _spacing2["default"]['size-7']]
+  }),
+  stickyHeader: _defineProperty({
+    marginBottom: -56
+  }, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
+    marginBottom: -72
+  }),
+  solidHeader: {
+    background: _colors2["default"].bg.surface["default"]
   },
-  secBtn: {
-    marginTop: _spacing["default"].small
+  title: _defineProperty({
+    margin: 0,
+    font: objectToFontValue(_fonts2["default"]['mobile-h4-m'])
+  }, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
+    font: objectToFontValue(_fonts2["default"]['heading-h4'])
+  }),
+  content: {
+    transition: '0.1s height',
+    overflow: 'auto',
+    flex: 1,
+    '&::-webkit-scrollbar': {
+      width: 6
+    },
+    '&::-webkit-scrollbar-thumb': {
+      background: _colors["default"].grey200,
+      borderRadius: 3
+    }
   },
-  mainBtn: {
-    marginLeft: _spacing["default"].base,
-    marginTop: _spacing["default"].small
+  contentChild: _defineProperty({
+    padding: _spacing2["default"]['size-3'],
+    borderBottom: '1px solid transparent'
+  }, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
+    padding: [_spacing2["default"]['size-3'], _spacing2["default"]['size-7']]
+  }),
+  noHeader: _defineProperty({}, "@media screen and (min-width:".concat(_grid["default"].sm, "px)"), {
+    paddingTop: _spacing2["default"]['size-7']
+  }),
+  noFooter: {
+    paddingBottom: _spacing2["default"]['size-7']
   },
-  imgLeft: _defineProperty({
-    width: 200,
-    backgroundImage: function backgroundImage(_ref7) {
-      var imgLeft = _ref7.imgLeft;
-      return "url(".concat(imgLeft.img, ")");
-    },
-    backgroundPosition: function backgroundPosition(_ref8) {
-      var imgLeft = _ref8.imgLeft;
-      return "center ".concat(imgLeft.position || 'center');
-    },
-    backgroundSize: function backgroundSize(_ref9) {
-      var imgLeft = _ref9.imgLeft;
-      return imgLeft.size === 'contain' ? '100% auto' : 'cover';
-    },
-    backgroundColor: function backgroundColor(_ref10) {
-      var imgLeft = _ref10.imgLeft;
-      return imgLeft.color || null;
-    },
-    backgroundRepeat: 'no-repeat',
-    borderRadius: [_spacing["default"].radius, 0, 0, _spacing["default"].radius],
-    marginLeft: -_spacing["default"].small,
-    marginTop: -_spacing["default"].small,
-    marginBottom: -_spacing["default"].small,
-    marginRight: _spacing["default"].small
-  }, "@media screen and (min-width:".concat(_grid["default"].sm, "px)"), {
-    marginLeft: -_spacing["default"].medium,
-    marginTop: -_spacing["default"].medium,
-    marginBottom: -_spacing["default"].medium,
-    marginRight: _spacing["default"].medium
+  headerBorder: {
+    borderBottom: "1px solid ".concat(_colors2["default"].border["default"].subtle)
+  },
+  footer: _defineProperty({
+    flexGrow: 0,
+    textAlign: 'right',
+    padding: _spacing2["default"]['size-3'],
+    borderTop: '1px solid transparent',
+    display: 'flex',
+    flexDirection: 'column-reverse',
+    gap: _spacing2["default"]['size-1']
+  }, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
+    padding: [_spacing2["default"]['size-4'], _spacing2["default"]['size-7']],
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    gap: _spacing2["default"]['size-2']
   }),
-  imgTop: _defineProperty({
-    position: 'relative',
-    height: function height(_ref11) {
-      var imgTop = _ref11.imgTop;
-      return imgTop.height || 128;
-    },
-    backgroundImage: function backgroundImage(_ref12) {
-      var imgTop = _ref12.imgTop;
-      return "url(".concat(imgTop.img, ")");
-    },
-    backgroundPosition: function backgroundPosition(_ref13) {
-      var imgTop = _ref13.imgTop;
-      return "".concat(imgTop.position || 'center', " center");
-    },
-    backgroundSize: function backgroundSize(_ref14) {
-      var imgTop = _ref14.imgTop;
-      return imgTop.size === 'contain' ? 'auto 100%' : imgTop.size || 'cover';
-    },
-    backgroundColor: function backgroundColor(_ref15) {
-      var imgTop = _ref15.imgTop;
-      return imgTop.color || null;
-    },
-    backgroundRepeat: 'no-repeat',
-    borderRadius: [_spacing["default"].radius, _spacing["default"].radius, 0, 0],
-    marginLeft: -_spacing["default"].small,
-    marginTop: -_spacing["default"].small,
-    marginBottom: _spacing["default"].small,
-    marginRight: -_spacing["default"].small
-  }, "@media screen and (min-width:".concat(_grid["default"].sm, "px)"), {
-    marginLeft: -_spacing["default"].medium,
-    marginTop: -_spacing["default"].medium,
-    marginBottom: _spacing["default"].medium,
-    marginRight: -_spacing["default"].medium
+  footerBorder: {
+    borderTop: "1px solid ".concat(_colors2["default"].border["default"].subtle)
+  },
+  split: {
+    display: 'flex',
+    flexDirection: 'row'
+  },
+  imgLeft: _defineProperty({
+    display: 'none'
+  }, "@media screen and (min-width:".concat(_grid["default"].xs, "px)"), {
+    display: 'block',
+    width: 200
   }),
+  imgTop: {
+    width: '100%',
+    aspectRatio: '21 / 9',
+    maxHeight: 200,
+    objectFit: 'cover'
+  },
   closePosition: _defineProperty({
     position: 'absolute',
     top: _spacing["default"].small,
@@ -239,6 +258,9 @@ var _default = {
   }, "@media screen and (min-width:".concat(_grid["default"].sm, "px)"), {
     top: _spacing["default"].medium,
     right: _spacing["default"].medium
-  })
+  }),
+  imgTopPadding: {
+    paddingTop: _spacing2["default"]['size-5']
+  }
 };
 exports["default"] = _default;

package/build/NavAvatarButton/NavAvatarButton.js

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Avatar = _interopRequireDefault(require("../Avatar"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _excluded = ["classes", "name", "disabled", "dense", "photo", "className"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function NavButton(_ref) {
+  var classes = _ref.classes,
+      name = _ref.name,
+      disabled = _ref.disabled,
+      dense = _ref.dense,
+      photo = _ref.photo,
+      className = _ref.className,
+      buttonProps = _objectWithoutProperties(_ref, _excluded);
+
+  var buttonClasses = classes.avatarButton;
+  buttonClasses += dense ? " ".concat(classes.mini) : '';
+  buttonClasses += className ? " ".concat(className) : '';
+  return /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
+    iconRight: "chevron-down",
+    disabled: disabled
+  }, buttonProps, {
+    className: buttonClasses
+  }), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+    photo: photo,
+    name: name,
+    disabled: disabled
+  }));
+}
+
+NavButton.propTypes = _defineProperty({
+  classes: _propTypes["default"].object.isRequired,
+
+  /** Button`s container ids */
+  id: _propTypes["default"].string,
+
+  /** Button`s container classname */
+  className: _propTypes["default"].string,
+
+  /** Button`s container style */
+  style: _propTypes["default"].object,
+
+  /** Mini variant  */
+  dense: _propTypes["default"].bool,
+
+  /** The content of the component. */
+  children: _propTypes["default"].node,
+
+  /** There are four themes available: main, secondary, white, blue, flat. */
+  theme: _propTypes["default"].oneOf(['primary', 'secondary', 'tertiary', 'tertiaryWhite', 'ghostPink', 'ghostGrey', 'ghostWhite']),
+
+  /** The button has three different sizes: sm, md, lg. */
+  size: _propTypes["default"].oneOf(['sm', 'md', 'lg']),
+
+  /** The block property lets the button expand to ocupy the whole width of its parent. */
+  block: _propTypes["default"].bool,
+
+  /** It disables the button and shows it with the proper theme. */
+  disabled: _propTypes["default"].bool,
+
+  /** Use the name of any of the icons available in the library. */
+  icon: _propTypes["default"].string,
+
+  /** Use the name of any of the icons available in the library. The icon will be rendered on the right side of the button. */
+  iconRight: _propTypes["default"].string,
+
+  /** Property to make the button round when it only has an icon. */
+  round: _propTypes["default"].bool,
+
+  /** The loading property disables the button and shows a loading icon spinning. */
+  loading: _propTypes["default"].bool,
+
+  /** The function to call when the button is clicked. */
+  onClick: _propTypes["default"].func,
+
+  /** The function to call when the mouse is down on the button. */
+  onMouseDown: _propTypes["default"].func,
+
+  /** The function to call when the mouse is up on the button. */
+  onMouseUp: _propTypes["default"].func,
+
+  /** The function to call when the mouse moves out of the button. */
+  onMouseOut: _propTypes["default"].func,
+
+  /** Optionally, you can set the href property and use it like a link. */
+  href: _propTypes["default"].string,
+
+  /** If you use the href property, you can also define the target. */
+  target: _propTypes["default"].string,
+
+  /** If you use the href property, you can also define the rel attribute. */
+  rel: _propTypes["default"].string,
+
+  /** The testId property adds the data attribute data-testid to the main element and should be used for testing only. */
+  testId: _propTypes["default"].string,
+
+  /** A url to show a photo as the avatar. */
+  photo: _propTypes["default"].string,
+
+  /** Pass a name to show two initials. */
+  name: _propTypes["default"].string
+}, "size", _propTypes["default"].number);
+var _default = NavButton;
+exports["default"] = _default;

package/build/{NavIcon → NavAvatarButton}/index.js

@@ -7,12 +7,12 @@ exports["default"] = void 0;
 
 var _reactJss = _interopRequireDefault(require("react-jss"));
 
-var _NavIcon = _interopRequireDefault(require("./NavIcon"));
+var _NavAvatarButton = _interopRequireDefault(require("./NavAvatarButton"));
 
 var _styles = _interopRequireDefault(require("./styles"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _default = (0, _reactJss["default"])(_styles["default"])(_NavIcon["default"]);
+var _default = (0, _reactJss["default"])(_styles["default"])(_NavAvatarButton["default"]);
 
 exports["default"] = _default;

package/build/NavAvatarButton/styles.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  dense: {
+    padding: _spacing["default"]['size-1'],
+    '& > span > svg': {
+      marginLeft: _spacing["default"]['size-1']
+    }
+  },
+  avatarButton: {
+    '& > span > svg': {
+      transition: '0.3s all!important'
+    },
+    '&:hover, &:focus, &:active': {
+      '& > span > svg': {
+        transform: 'translateY(2px)'
+      }
+    }
+  }
+};
+exports["default"] = _default;

package/build/NavButton/NavButton.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _Flexbox = _interopRequireDefault(require("../Flexbox"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _colors = _interopRequireDefault(require("../subatomic/colors"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function NavButton(_ref) {
+  var classes = _ref.classes,
+      selected = _ref.selected,
+      label = _ref.label,
+      onClick = _ref.onClick,
+      direction = _ref.direction,
+      className = _ref.className,
+      testId = _ref.testId,
+      id = _ref.id,
+      iconName = _ref.iconName,
+      white = _ref.white;
+  var iconColor = white ? _colors["default"].bgWhite : _colors["default"].grey600;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(classes.cont).concat(selected ? " ".concat(classes.selected) : '').concat(className ? " ".concat(className) : ''),
+    onClick: onClick,
+    "data-testid": testId,
+    id: id
+  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
+    display: "flex",
+    direction: direction,
+    justifyContent: "center",
+    alignItems: "center",
+    className: classes.flex
+  }, iconName && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    iconName: iconName,
+    colors: [iconColor]
+  }), label && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+    bodyRegularStrong: true,
+    current: true
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: classes.text
+  }, label))));
+}
+
+NavButton.propTypes = {
+  classes: _propTypes["default"].object.isRequired,
+  selected: _propTypes["default"].bool,
+  iconName: _propTypes["default"].string,
+  label: _propTypes["default"].string,
+  onClick: _propTypes["default"].func,
+  width: _propTypes["default"].number,
+  showBar: _propTypes["default"].bool,
+  direction: _propTypes["default"].oneOf(['col', 'row']),
+  className: _propTypes["default"].string,
+
+  /** The testId property adds the data attribute data-testid to the main element and should be used for testing only. */
+  testId: _propTypes["default"].string,
+  id: _propTypes["default"].string,
+  white: _propTypes["default"].bool
+};
+var _default = NavButton;
+exports["default"] = _default;

package/build/{Header/Nav → NavButton}/index.js

@@ -7,12 +7,12 @@ exports["default"] = void 0;
 
 var _reactJss = _interopRequireDefault(require("react-jss"));
 
-var _Nav = _interopRequireDefault(require("./Nav"));
+var _NavButton = _interopRequireDefault(require("./NavButton"));
 
 var _styles = _interopRequireDefault(require("./styles"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _default = (0, _reactJss["default"])(_styles["default"])(_Nav["default"]);
+var _default = (0, _reactJss["default"])(_styles["default"])(_NavButton["default"]);
 
 exports["default"] = _default;