		@@ -15,3 +15,2 @@
		- `/tests` tests, including snapshots
		- `/stories` stories for React Storybook
		- `/docs` source for the documentation/demo site
		@@ -22,7 +21,10 @@
		All exports are handled in `src/index.js`.
		The component styles and configuration is in `src/components.js`, which is passed to `src/create-library.js` to export the components.
		The `src/create-component.js` function tags a component configuration object and returns a React styled component, adding two higher order components in the process.
		Each component is its own module in the `src/` folder.
		Be sure to familiarize yourself with
		[styled-system](https://github.com/jxnblk/styled-system)
		before making changes.


		### Tests

		Tests are written using Ava. Please ensure to test any new code added, and update snapshots when relevant.

681

dist/index.js

		@@ -6,5 +6,4 @@ 'use strict';
		});
		exports.Column = exports.Row = exports.Donut = exports.Embed = exports.Star = exports.Arrow = exports.Switch = exports.Tooltip = exports.CarouselSlide = exports.ScrollCarousel = exports.Carousel = exports.Overlay = exports.Drawer = exports.Sticky = exports.Fixed = exports.Absolute = exports.Relative = exports.Close = exports.DotButton = exports.TabItem = exports.Tabs = exports.Circle = exports.Badge = exports.Toolbar = exports.Group = exports.Message = exports.Progress = exports.PanelFooter = exports.PanelHeader = exports.Panel = exports.Banner = exports.Card = exports.Media = exports.Border = exports.Divider = exports.Container = exports.BackgroundImage = exports.Avatar = exports.Image = exports.Slider = exports.Radio = exports.Checkbox = exports.Textarea = exports.Select2 = exports.Select = exports.Input = exports.Label = exports.Truncate = exports.Measure = exports.Blockquote = exports.Samp = exports.Code = exports.Pre = exports.Lead = exports.Small = exports.Text = exports.Subhead = exports.Heading = exports.BlockLink = exports.NavLink = exports.Link = exports.ButtonTransparent = exports.ButtonCircle = exports.ButtonOutline = exports.Button = exports.util = exports.createComponent = exports.createLibrary = exports.radius = exports.colors = exports.weights = exports.fontSizes = exports.monospace = exports.font = exports.space = exports.breakpoints = exports.theme = exports.hoc = exports.Provider = exports.Box = exports.Flex = undefined;

		var _grid = require('./grid');
		var _gridStyled = require('grid-styled');

		@@ -14,3 +13,3 @@ Object.defineProperty(exports, 'Flex', {
		get: function get() {
		return _grid.Flex;
		return _gridStyled.Flex;
		}
		@@ -21,6 +20,42 @@ });
		get: function get() {
		return _grid.Box;
		return _gridStyled.Box;
		}
		});

		var _theme = require('./theme');

		Object.defineProperty(exports, 'theme', {
		enumerable: true,
		get: function get() {
		return _interopRequireDefault(_theme).default;
		}
		});

		var _Base = require('./Base');

		Object.defineProperty(exports, 'Base', {
		enumerable: true,
		get: function get() {
		return _Base.Base;
		}
		});

		var _CSS = require('./CSS');

		Object.defineProperty(exports, 'CSS', {
		enumerable: true,
		get: function get() {
		return _CSS.CSS;
		}
		});

		var _Root = require('./Root');

		Object.defineProperty(exports, 'Root', {
		enumerable: true,
		get: function get() {
		return _Root.Root;
		}
		});

		var _Provider = require('./Provider');
		@@ -31,246 +66,540 @@
		get: function get() {
		return _interopRequireDefault(_Provider).default;
		return _Provider.Provider;
		}
		});

		var _hoc = require('./hoc');
		var _Button = require('./Button');

		Object.defineProperty(exports, 'hoc', {
		Object.defineProperty(exports, 'Button', {
		enumerable: true,
		get: function get() {
		return _interopRequireDefault(_hoc).default;
		return _Button.Button;
		}
		});

		var _theme = require('./theme');
		var _ButtonOutline = require('./ButtonOutline');

		Object.defineProperty(exports, 'theme', {
		Object.defineProperty(exports, 'ButtonOutline', {
		enumerable: true,
		get: function get() {
		return _interopRequireDefault(_theme).default;
		return _ButtonOutline.ButtonOutline;
		}
		});
		Object.defineProperty(exports, 'breakpoints', {

		var _ButtonCircle = require('./ButtonCircle');

		Object.defineProperty(exports, 'ButtonCircle', {
		enumerable: true,
		get: function get() {
		return _theme.breakpoints;
		return _ButtonCircle.ButtonCircle;
		}
		});
		Object.defineProperty(exports, 'space', {

		var _ButtonTransparent = require('./ButtonTransparent');

		Object.defineProperty(exports, 'ButtonTransparent', {
		enumerable: true,
		get: function get() {
		return _theme.space;
		return _ButtonTransparent.ButtonTransparent;
		}
		});
		Object.defineProperty(exports, 'font', {

		var _Link = require('./Link');

		Object.defineProperty(exports, 'Link', {
		enumerable: true,
		get: function get() {
		return _theme.font;
		return _Link.Link;
		}
		});
		Object.defineProperty(exports, 'monospace', {

		var _NavLink = require('./NavLink');

		Object.defineProperty(exports, 'NavLink', {
		enumerable: true,
		get: function get() {
		return _theme.monospace;
		return _NavLink.NavLink;
		}
		});
		Object.defineProperty(exports, 'fontSizes', {

		var _BlockLink = require('./BlockLink');

		Object.defineProperty(exports, 'BlockLink', {
		enumerable: true,
		get: function get() {
		return _theme.fontSizes;
		return _BlockLink.BlockLink;
		}
		});
		Object.defineProperty(exports, 'weights', {

		var _Close = require('./Close');

		Object.defineProperty(exports, 'Close', {
		enumerable: true,
		get: function get() {
		return _theme.weights;
		return _Close.Close;
		}
		});
		Object.defineProperty(exports, 'colors', {

		var _Text = require('./Text');

		Object.defineProperty(exports, 'Text', {
		enumerable: true,
		get: function get() {
		return _theme.colors;
		return _Text.Text;
		}
		});
		Object.defineProperty(exports, 'radius', {

		var _Heading = require('./Heading');

		Object.defineProperty(exports, 'Heading', {
		enumerable: true,
		get: function get() {
		return _theme.radius;
		return _Heading.Heading;
		}
		});

		var _createLibrary = require('./create-library');
		var _Subhead = require('./Subhead');

		Object.defineProperty(exports, 'createLibrary', {
		Object.defineProperty(exports, 'Subhead', {
		enumerable: true,
		get: function get() {
		return _interopRequireDefault(_createLibrary).default;
		return _Subhead.Subhead;
		}
		});

		var _createComponent = require('./create-component');
		var _Caps = require('./Caps');

		Object.defineProperty(exports, 'createComponent', {
		Object.defineProperty(exports, 'Caps', {
		enumerable: true,
		get: function get() {
		return _interopRequireDefault(_createComponent).default;
		return _Caps.Caps;
		}
		});

		var _util = require('./util');
		var _Small = require('./Small');

		Object.defineProperty(exports, 'util', {
		Object.defineProperty(exports, 'Small', {
		enumerable: true,
		get: function get() {
		return _interopRequireDefault(_util).default;
		return _Small.Small;
		}
		});

		var _components = require('./components');
		var _Lead = require('./Lead');

		var _components2 = _interopRequireDefault(_components);
		Object.defineProperty(exports, 'Lead', {
		enumerable: true,
		get: function get() {
		return _Lead.Lead;
		}
		});

		var _Provider2 = _interopRequireDefault(_Provider);
		var _Truncate = require('./Truncate');

		var _createLibrary2 = _interopRequireDefault(_createLibrary);
		Object.defineProperty(exports, 'Truncate', {
		enumerable: true,
		get: function get() {
		return _Truncate.Truncate;
		}
		});

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
		var _Blockquote = require('./Blockquote');

		var library = (0, _createLibrary2.default)(_components2.default);
		Object.defineProperty(exports, 'Blockquote', {
		enumerable: true,
		get: function get() {
		return _Blockquote.Blockquote;
		}
		});

		var _Object$keys = Object.keys(library),
		length = _Object$keys.length;
		var _Divider = require('./Divider');

		var Rebass = Object.assign({}, library, { Provider: _Provider2.default, Flex: _grid.Flex, Box: _grid.Box });
		Object.defineProperty(exports, 'Divider', {
		enumerable: true,
		get: function get() {
		return _Divider.Divider;
		}
		});

		var Button = library.Button,
		ButtonOutline = library.ButtonOutline,
		ButtonCircle = library.ButtonCircle,
		ButtonTransparent = library.ButtonTransparent,
		Link = library.Link,
		NavLink = library.NavLink,
		BlockLink = library.BlockLink,
		Heading = library.Heading,
		Subhead = library.Subhead,
		Text = library.Text,
		Small = library.Small,
		Lead = library.Lead,
		Pre = library.Pre,
		Code = library.Code,
		Samp = library.Samp,
		Blockquote = library.Blockquote,
		Measure = library.Measure,
		Truncate = library.Truncate,
		Label = library.Label,
		Input = library.Input,
		Select = library.Select,
		Select2 = library.Select2,
		Textarea = library.Textarea,
		Checkbox = library.Checkbox,
		Radio = library.Radio,
		Slider = library.Slider,
		Image = library.Image,
		Avatar = library.Avatar,
		BackgroundImage = library.BackgroundImage,
		Container = library.Container,
		Divider = library.Divider,
		Border = library.Border,
		Media = library.Media,
		Card = library.Card,
		Banner = library.Banner,
		Panel = library.Panel,
		PanelHeader = library.PanelHeader,
		PanelFooter = library.PanelFooter,
		Progress = library.Progress,
		Message = library.Message,
		Group = library.Group,
		Toolbar = library.Toolbar,
		Badge = library.Badge,
		Circle = library.Circle,
		Tabs = library.Tabs,
		TabItem = library.TabItem,
		DotButton = library.DotButton,
		Close = library.Close,
		Relative = library.Relative,
		Absolute = library.Absolute,
		Fixed = library.Fixed,
		Sticky = library.Sticky,
		Drawer = library.Drawer,
		Overlay = library.Overlay,
		Carousel = library.Carousel,
		ScrollCarousel = library.ScrollCarousel,
		CarouselSlide = library.CarouselSlide,
		Tooltip = library.Tooltip,
		Switch = library.Switch,
		Arrow = library.Arrow,
		Star = library.Star,
		Embed = library.Embed,
		Donut = library.Donut,
		Row = library.Row,
		Column = library.Column;
		exports.Button = Button;
		exports.ButtonOutline = ButtonOutline;
		exports.ButtonCircle = ButtonCircle;
		exports.ButtonTransparent = ButtonTransparent;
		exports.Link = Link;
		exports.NavLink = NavLink;
		exports.BlockLink = BlockLink;
		exports.Heading = Heading;
		exports.Subhead = Subhead;
		exports.Text = Text;
		exports.Small = Small;
		exports.Lead = Lead;
		exports.Pre = Pre;
		exports.Code = Code;
		exports.Samp = Samp;
		exports.Blockquote = Blockquote;
		exports.Measure = Measure;
		exports.Truncate = Truncate;
		exports.Label = Label;
		exports.Input = Input;
		exports.Select = Select;
		exports.Select2 = Select2;
		exports.Textarea = Textarea;
		exports.Checkbox = Checkbox;
		exports.Radio = Radio;
		exports.Slider = Slider;
		exports.Image = Image;
		exports.Avatar = Avatar;
		exports.BackgroundImage = BackgroundImage;
		exports.Container = Container;
		exports.Divider = Divider;
		exports.Border = Border;
		exports.Media = Media;
		exports.Card = Card;
		exports.Banner = Banner;
		exports.Panel = Panel;
		exports.PanelHeader = PanelHeader;
		exports.PanelFooter = PanelFooter;
		exports.Progress = Progress;
		exports.Message = Message;
		exports.Group = Group;
		exports.Toolbar = Toolbar;
		exports.Badge = Badge;
		exports.Circle = Circle;
		exports.Tabs = Tabs;
		exports.TabItem = TabItem;
		exports.DotButton = DotButton;
		exports.Close = Close;
		exports.Relative = Relative;
		exports.Absolute = Absolute;
		exports.Fixed = Fixed;
		exports.Sticky = Sticky;
		exports.Drawer = Drawer;
		exports.Overlay = Overlay;
		exports.Carousel = Carousel;
		exports.ScrollCarousel = ScrollCarousel;
		exports.CarouselSlide = CarouselSlide;
		exports.Tooltip = Tooltip;
		exports.Switch = Switch;
		exports.Arrow = Arrow;
		exports.Star = Star;
		exports.Embed = Embed;
		exports.Donut = Donut;
		exports.Row = Row;
		exports.Column = Column;
		exports.default = Rebass;
		var _Pre = require('./Pre');

		Object.defineProperty(exports, 'Pre', {
		enumerable: true,
		get: function get() {
		return _Pre.Pre;
		}
		});

		var _Code = require('./Code');

		Object.defineProperty(exports, 'Code', {
		enumerable: true,
		get: function get() {
		return _Code.Code;
		}
		});

		var _Samp = require('./Samp');

		Object.defineProperty(exports, 'Samp', {
		enumerable: true,
		get: function get() {
		return _Samp.Samp;
		}
		});

		var _Measure = require('./Measure');

		Object.defineProperty(exports, 'Measure', {
		enumerable: true,
		get: function get() {
		return _Measure.Measure;
		}
		});

		var _Label = require('./Label');

		Object.defineProperty(exports, 'Label', {
		enumerable: true,
		get: function get() {
		return _Label.Label;
		}
		});

		var _Input = require('./Input');

		Object.defineProperty(exports, 'Input', {
		enumerable: true,
		get: function get() {
		return _Input.Input;
		}
		});

		var _Select = require('./Select');

		Object.defineProperty(exports, 'Select', {
		enumerable: true,
		get: function get() {
		return _Select.Select;
		}
		});

		var _Textarea = require('./Textarea');

		Object.defineProperty(exports, 'Textarea', {
		enumerable: true,
		get: function get() {
		return _Textarea.Textarea;
		}
		});

		var _Radio = require('./Radio');

		Object.defineProperty(exports, 'Radio', {
		enumerable: true,
		get: function get() {
		return _Radio.Radio;
		}
		});

		var _Checkbox = require('./Checkbox');

		Object.defineProperty(exports, 'Checkbox', {
		enumerable: true,
		get: function get() {
		return _Checkbox.Checkbox;
		}
		});

		var _Slider = require('./Slider');

		Object.defineProperty(exports, 'Slider', {
		enumerable: true,
		get: function get() {
		return _Slider.Slider;
		}
		});

		var _Switch = require('./Switch');

		Object.defineProperty(exports, 'Switch', {
		enumerable: true,
		get: function get() {
		return _Switch.Switch;
		}
		});

		var _Image = require('./Image');

		Object.defineProperty(exports, 'Image', {
		enumerable: true,
		get: function get() {
		return _Image.Image;
		}
		});

		var _BackgroundImage = require('./BackgroundImage');

		Object.defineProperty(exports, 'BackgroundImage', {
		enumerable: true,
		get: function get() {
		return _BackgroundImage.BackgroundImage;
		}
		});

		var _Avatar = require('./Avatar');

		Object.defineProperty(exports, 'Avatar', {
		enumerable: true,
		get: function get() {
		return _Avatar.Avatar;
		}
		});

		var _Embed = require('./Embed');

		Object.defineProperty(exports, 'Embed', {
		enumerable: true,
		get: function get() {
		return _Embed.Embed;
		}
		});

		var _Container = require('./Container');

		Object.defineProperty(exports, 'Container', {
		enumerable: true,
		get: function get() {
		return _Container.Container;
		}
		});

		var _Group = require('./Group');

		Object.defineProperty(exports, 'Group', {
		enumerable: true,
		get: function get() {
		return _Group.Group;
		}
		});

		var _Row = require('./Row');

		Object.defineProperty(exports, 'Row', {
		enumerable: true,
		get: function get() {
		return _Row.Row;
		}
		});

		var _Column = require('./Column');

		Object.defineProperty(exports, 'Column', {
		enumerable: true,
		get: function get() {
		return _Column.Column;
		}
		});

		var _Border = require('./Border');

		Object.defineProperty(exports, 'Border', {
		enumerable: true,
		get: function get() {
		return _Border.Border;
		}
		});

		var _Card = require('./Card');

		Object.defineProperty(exports, 'Card', {
		enumerable: true,
		get: function get() {
		return _Card.Card;
		}
		});

		var _Panel = require('./Panel');

		Object.defineProperty(exports, 'Panel', {
		enumerable: true,
		get: function get() {
		return _Panel.Panel;
		}
		});

		var _Progress = require('./Progress');

		Object.defineProperty(exports, 'Progress', {
		enumerable: true,
		get: function get() {
		return _Progress.Progress;
		}
		});

		var _Banner = require('./Banner');

		Object.defineProperty(exports, 'Banner', {
		enumerable: true,
		get: function get() {
		return _Banner.Banner;
		}
		});

		var _Message = require('./Message');

		Object.defineProperty(exports, 'Message', {
		enumerable: true,
		get: function get() {
		return _Message.Message;
		}
		});

		var _Toolbar = require('./Toolbar');

		Object.defineProperty(exports, 'Toolbar', {
		enumerable: true,
		get: function get() {
		return _Toolbar.Toolbar;
		}
		});

		var _Tabs = require('./Tabs');

		Object.defineProperty(exports, 'Tabs', {
		enumerable: true,
		get: function get() {
		return _Tabs.Tabs;
		}
		});

		var _Tab = require('./Tab');

		Object.defineProperty(exports, 'Tab', {
		enumerable: true,
		get: function get() {
		return _Tab.Tab;
		}
		});

		var _Badge = require('./Badge');

		Object.defineProperty(exports, 'Badge', {
		enumerable: true,
		get: function get() {
		return _Badge.Badge;
		}
		});

		var _Circle = require('./Circle');

		Object.defineProperty(exports, 'Circle', {
		enumerable: true,
		get: function get() {
		return _Circle.Circle;
		}
		});

		var _Dot = require('./Dot');

		Object.defineProperty(exports, 'Dot', {
		enumerable: true,
		get: function get() {
		return _Dot.Dot;
		}
		});

		var _Arrow = require('./Arrow');

		Object.defineProperty(exports, 'Arrow', {
		enumerable: true,
		get: function get() {
		return _Arrow.Arrow;
		}
		});

		var _Donut = require('./Donut');

		Object.defineProperty(exports, 'Donut', {
		enumerable: true,
		get: function get() {
		return _Donut.Donut;
		}
		});

		var _Position = require('./Position');

		Object.defineProperty(exports, 'Position', {
		enumerable: true,
		get: function get() {
		return _Position.Position;
		}
		});
		Object.defineProperty(exports, 'Relative', {
		enumerable: true,
		get: function get() {
		return _Position.Relative;
		}
		});
		Object.defineProperty(exports, 'Absolute', {
		enumerable: true,
		get: function get() {
		return _Position.Absolute;
		}
		});
		Object.defineProperty(exports, 'Fixed', {
		enumerable: true,
		get: function get() {
		return _Position.Fixed;
		}
		});
		Object.defineProperty(exports, 'Sticky', {
		enumerable: true,
		get: function get() {
		return _Position.Sticky;
		}
		});

		var _Modal = require('./Modal');

		Object.defineProperty(exports, 'Modal', {
		enumerable: true,
		get: function get() {
		return _Modal.Modal;
		}
		});

		var _Drawer = require('./Drawer');

		Object.defineProperty(exports, 'Drawer', {
		enumerable: true,
		get: function get() {
		return _Drawer.Drawer;
		}
		});

		var _Carousel = require('./Carousel');

		Object.defineProperty(exports, 'Carousel', {
		enumerable: true,
		get: function get() {
		return _Carousel.Carousel;
		}
		});

		var _Tooltip = require('./Tooltip');

		Object.defineProperty(exports, 'Tooltip', {
		enumerable: true,
		get: function get() {
		return _Tooltip.Tooltip;
		}
		});
		Object.defineProperty(exports, 'Overlay', {
		enumerable: true,
		get: function get() {
		return _Modal.Modal;
		}
		});

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

dist/Provider.js

		@@ -6,3 +6,8 @@ 'use strict';
		});
		exports.Provider = undefined;

		var _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; };

		var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

		var _react = require('react');
		@@ -14,5 +19,5 @@

		var _styledComponents2 = _interopRequireDefault(_styledComponents);
		var _Root = require('./Root');

		var _propTypes = require('prop-types');
		var _Root2 = _interopRequireDefault(_Root);

		@@ -25,29 +30,43 @@ var _theme = require('./theme');

		var Base = _styledComponents2.default.div([], function (props) {
		return {
		fontFamily: props.theme.font \|\| _theme2.default.font
		};
		});
		function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

		var Provider = function Provider(props) {
		return _react2.default.createElement(
		_styledComponents.ThemeProvider,
		{ theme: Object.assign({}, _theme2.default, props.theme) },
		_react2.default.createElement(Base, props)
		);
		};
		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

		Provider.propTypes = {
		theme: (0, _propTypes.shape)({
		breakpoints: (0, _propTypes.arrayOf)(_propTypes.number),
		space: (0, _propTypes.arrayOf)(_propTypes.number),
		fontSizes: (0, _propTypes.arrayOf)(_propTypes.number),
		weights: (0, _propTypes.arrayOf)(_propTypes.number),
		colors: (0, _propTypes.oneOfType)([_propTypes.object, _propTypes.array]),
		font: _propTypes.string,
		monospace: _propTypes.string,
		radius: _propTypes.number
		})
		function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" \|\| typeof call === "function") ? call : self; }

		function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

		var Provider = exports.Provider = function (_React$Component) {
		_inherits(Provider, _React$Component);

		function Provider() {
		_classCallCheck(this, Provider);

		return _possibleConstructorReturn(this, (Provider.__proto__ \|\| Object.getPrototypeOf(Provider)).apply(this, arguments));
		}

		_createClass(Provider, [{
		key: 'render',
		value: function render() {
		var _props = this.props,
		theme = _props.theme,
		props = _objectWithoutProperties(_props, ['theme']);

		return _react2.default.createElement(
		_styledComponents.ThemeProvider,
		{ theme: _extends({}, _theme2.default, theme) },
		_react2.default.createElement(_Root2.default, props)
		);
		}
		}]);

		return Provider;
		}(_react2.default.Component);

		Provider.defaultProps = {
		theme: {}
		};

		Provider.displayName = 'Rebass.Provider';

		exports.default = Provider;

dist/SelectBase.js

		@@ -9,4 +9,4 @@ 'use strict';

		var _templateObject = _taggedTemplateLiteral(['\n position: relative;\n'], ['\n position: relative;\n']),
		_templateObject2 = _taggedTemplateLiteral(['\n position: absolute;\n top: 0;\n right: 0;\n width: 8px;\n height: 8px;\n margin: 12px;\n fill: currentcolor;\n'], ['\n position: absolute;\n top: 0;\n right: 0;\n width: 8px;\n height: 8px;\n margin: 12px;\n fill: currentcolor;\n']);
		var _templateObject = _taggedTemplateLiteral(['\n display: flex;\n align-items: center;\n'], ['\n display: flex;\n align-items: center;\n']),
		_templateObject2 = _taggedTemplateLiteral(['\n width: 8px;\n height: 8px;\n margin-left: -16px;\n fill: currentcolor;\n pointer-events: none;\n'], ['\n width: 8px;\n height: 8px;\n margin-left: -16px;\n fill: currentcolor;\n pointer-events: none;\n']);

		@@ -21,4 +21,2 @@ var _react = require('react');

		var _util = require('./util');

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
		@@ -58,6 +56,4 @@
		Root,
		{ className: props.className },
		_react2.default.createElement(Select, _extends({}, props, {
		className: null
		})),
		null,
		_react2.default.createElement(Select, props),
		_react2.default.createElement(Arrow, null)
		@@ -64,0 +60,0 @@ );

dist/theme.js

		@@ -6,11 +6,20 @@ 'use strict';
		});
		exports.monospace = exports.font = exports.radius = exports.colors = exports.weights = exports.fontSizes = exports.space = exports.breakpoints = undefined;
		exports.shadows = exports.fonts = exports.radii = exports.colors = exports.fontWeights = exports.fontSizes = exports.space = exports.breakpoints = undefined;

		var _palx = require('palx');
		var _colors = require('./colors');

		var _palx2 = _interopRequireDefault(_palx);
		Object.defineProperty(exports, 'colors', {
		enumerable: true,
		get: function get() {
		return _interopRequireDefault(_colors).default;
		}
		});

		var _colors2 = _interopRequireDefault(_colors);

		function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

		var breakpoints = exports.breakpoints = [32, 48, 64, 80];
		var breakpoints = exports.breakpoints = [32, 48, 64, 80].map(function (n) {
		return n + 'em';
		});

		@@ -21,30 +30,17 @@ var space = exports.space = [0, 4, 8, 16, 32, 64, 128];

		var weights = exports.weights = [400, 700];
		var fontWeights = exports.fontWeights = {
		normal: 400,
		bold: 700
		};

		var palette = (0, _palx2.default)('#07c');
		var radii = exports.radii = [0, 2, 4];

		var flattened = Object.keys(palette).reduce(function (a, key) {
		var value = palette[key];
		if (Array.isArray(value)) {
		a[key] = value[5];
		value.forEach(function (val, i) {
		a[key + i] = val;
		});
		} else {
		a[key] = value;
		}
		return a;
		}, {});
		var fonts = exports.fonts = {
		0: 'system-ui, sans-serif',
		sans: 'system-ui, sans-serif',
		mono: '"SF Mono", "Roboto Mono", Menlo, monospace'
		};

		// todo: flatten
		var shadows = exports.shadows = ['none', 'inset 0 0 0 1px ' + _colors2.default.gray, 'inset 0 0 0 1px ' + _colors2.default.gray + ', 0 0 4px ' + _colors2.default.gray];

		var colors = exports.colors = Object.assign({}, flattened, {
		black: '#000',
		white: '#fff'
		});

		var radius = exports.radius = 4;
		var font = exports.font = '-apple-system, BlinkMacSystemFont, sans-serif';
		var monospace = exports.monospace = '"SF Mono", "Roboto Mono", Menlo, monospace';

		exports.default = {
		@@ -54,7 +50,7 @@ breakpoints: breakpoints,
		fontSizes: fontSizes,
		weights: weights,
		font: font,
		monospace: monospace,
		colors: colors,
		radius: radius
		fontWeights: fontWeights,
		fonts: fonts,
		colors: _colors2.default,
		radii: radii,
		shadows: shadows
		};

package.json

		{
		"name": "rebass",
		"version": "1.0.7",
		"description": "Functional React UI component library, built with styled-components",
		"version": "2.0.0-0",
		"description": "React UI component library & design system, built with styled-components and styled-system",
		"main": "dist/index.js",
		"scripts": {
		"prepublish": "babel src -d dist",
		"start": "start-storybook -p 8000 -c stories",
		"storybook": "build-storybook -c stories -o docs/stories",
		"cover": "nyc report --reporter=html --reporter=lcov && codecov",
		@@ -18,2 +16,4 @@ "test": "nyc ava"
		"ui",
		"design-system",
		"styled-system",
		"styled-components",
		@@ -27,14 +27,11 @@ "presentational",
		"dependencies": {
		"grid-styled": "^2.0.0-11",
		"palx": "^1.0.2",
		"chroma-js": "^1.3.6",
		"grid-styled": ">=3.2.0",
		"prop-types": "^15.6.0",
		"recompose": "^0.26.0",
		"styled-components": ">=2.0 \|\| >=3.0",
		"styled-system": "^1.1.1",
		"tag-hoc": "^1.0.0"
		"styled-system": ">=2.1.0",
		"system-components": ">=2.0.1"
		},
		"devDependencies": {
		"@storybook/addon-options": "^3.3.3",
		"@storybook/react": "^3.3.3",
		"ava": "^0.24.0",
		"ava": "^0.25.0",
		"babel-cli": "^6.26.0",
		@@ -44,2 +41,3 @@ "babel-core": "^6.26.0",
		"babel-preset-react": "^6.24.1",
		"babel-preset-stage-0": "^6.24.1",
		"babel-register": "^6.26.0",
		@@ -50,5 +48,3 @@ "codecov": "^3.0.0",
		"react-dom": "^16.2.0",
		"react-test-renderer": "^16.2.0",
		"react-x-ray": "^1.0.0-4",
		"refunk": "^1.0.0-2"
		"react-test-renderer": "^16.2.0"
		},
		@@ -75,3 +71,6 @@ "repository": {
		]
		},
		"x0": {
		"cssLibrary": "styled-components"
		}
		}

361

README.md

		# Rebass

		Functional React UI component library, built with [styled-components](https://www.styled-components.com)
		React UI component library & design system,
		built with [styled-components][sc] and [styled-system][system].

		[![Build Status](https://travis-ci.org/jxnblk/rebass.svg?branch=master)](https://travis-ci.org/jxnblk/rebass)
		[![Build Status][badge]][travis]

		[badge]: https://img.shields.io/travis/jxnblk/rebass/master.svg?style=flat-square
		[travis]: https://travis-ci.org/jxnblk/rebass

		http://jxnblk.com/rebass

		```sh
		npm i rebass
		npm i rebass@next
		```
		@@ -35,5 +39,7 @@

		- Kickstart your own React component library
		- Responsive style props from [styled-system][system]
		- Flexbox grid with [grid-styled][gs]
		- Style encapsulation with [styled-components][sc]
		- Functional stateless UI components
		- Style encapsulation with styled-components
		- No external CSS dependencies
		- Configurable theming
		@@ -43,7 +49,20 @@ - Extensible base components
		- Built for responsive web design
		- Reduces the need to write custom CSS


		## Architectural Approach
		> "One of the best React component libs out there"
		> – [Max Stoiber](https://twitter.com/mxstbr/status/882657561111080960)

		> "Rebass is the Bootstrap of React."
		> – [Jori Lallo](https://twitter.com/jorilallo/status/882990343225868289)

		> "A whopper component library built on styled-components. Responsive, systematic, scalable...the business!"
		> – [Colm Tuite](https://twitter.com/colmtuite/status/882715087936606210)


		## Documentation

		http://jxnblk.com/rebass

		### Architectural Approach

		Rebass is built around a component architectural approach inspired by Dan Abramov’s
		@@ -65,325 +84,21 @@ [Presentational and Container Components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.ah4312963),

		## Base Props
		### Related

		All Rebass components are wrapped in a higher order component that handles
		design-system-based responsive style props using [styled-system](https://github.com/jxnblk/styled-system).
		- [styled-system][system]
		- [grid-styled][gs]
		- [styled-components][sc]

		### Width
		[system]: https://github.com/jxnblk/styled-system
		[gs]: https://github.com/jxnblk/grid-styled
		[sc]: https://github.com/styled-components/styled-components

		```jsx
		// Numbers from 0–1 are converted to percentage widths
		// e.g. width 50%
		<Text width={1/2} />
		#### v1.0.7

		// Numbers greater than 1 are converted to pixels
		<Text width={256} />
		For the previous version of Rebass see the [v1.0.7](https://github.com/jxnblk/rebass/tree/v1.0.7) branch.

		// Strings can be used for other values
		<Text width='32em' />
		---

		// Arrays can be used for mobile-first responsive styles
		<Text
		width={[
		1, // 100% width at the smallest breakpoint
		1/2, // 50% width at the next breakpoint
		1/4 // 25% width at the next
		]}
		/>

		// The shorthand `w` prop can be used instead of `width`
		<Text w={1/2} />
		```

		### Font Size

		The `fontSize` prop makes referencing steps on the typographic scale
		simple and helps promote consistent design.

		```jsx
		// Numbers are used to reference steps on the typographic scale
		// i.e. the `theme.fontSizes` array
		<Text fontSize={3} />

		// Numbers greater than the length of the typographic scale
		// are converted to pixels
		<Text fontSize={18} />

		// Strings can be used for other values
		<Text fontSize='3em' />

		// Arrays can be used for mobile-first responsive styles
		<Text fontSize={[ 3, 4, 5 ]} />

		// The shorthand `f` prop can be used instead of `fontSize`
		<Text f={3} />
		```

		### Margin and Padding

		The margin and padding props make referencing steps on the spacing scale
		(i.e. the `theme.space` array) simple and help promote consistency in
		layout design without the need to add custom margin and padding declarations throughout an application.
		The margin and padding props use a shorthand syntax.

		Prop \| Meaning
		---\|---
		`m` \| margin
		`mt` \| margin-top
		`mr` \| margin-right
		`mb` \| margin-bottom
		`ml` \| margin-left
		`mx` \| margin-left and margin-right
		`my` \| margin-top and margin-bottom
		`p` \| padding
		`pt` \| padding-top
		`pr` \| padding-right
		`pb` \| padding-bottom
		`pl` \| padding-left
		`px` \| padding-left and padding-right
		`py` \| padding-top and padding-bottom

		```jsx
		// Numbers reference steps on the spacing scale
		// e.g. 8px
		<Text m={2} />

		// Numbers greater than the length of `theme.space.length` are converted to pixels
		<Text my={256} />

		// Negative values can be used to add negative margins
		<Text mx={-2} />

		// Strings can be used for other values
		<Text mx='auto' />

		// Arrays can be used for mobile-first responsive styles
		<Text m={[ 0, 1, 2 ]} />
		```

		### Colors

		The `color` and `bg` props make using colors from the color palette simple to help promote design consistency.

		```jsx
		// Keys reference values in the color palette object
		<Text color='blue' />

		// Background color can be set with the `bg` prop
		<Button bg='red' />

		// Values that do not map to a key in `theme.colors` can be used
		<Button bg='tomato' />

		// Arrays can be used to change colors responsively
		<Text color={[ 'blue', 'green' ]} />
		```

		### Responsive Styles

		All of the core props above accept arrays as values to set mobile-first responsive styles.
		The first value is not scoped to a media query and applies to all breakpoints.
		Each value after the first corresponds to a media query derived from `theme.breakpoints`.

		```jsx
		<Text
		width={[
		1, // 100% width at the smallest breakpoint
		1/2, // 50% width at the next breakpoint
		null, // null skips a breakpoint
		1/4 // 25% width at the next
		]}
		/>
		```

		## `is` Prop

		Each component accepts an `is` prop to change the underlying HTML element on a per-instance basis.
		This is useful for ensuring semantic markup, while keeping styles decoupled.

		```jsx
		<Heading
		is='h1'
		children='Top-level heading'
		/>

		<Button
		is='a'
		href='#!'
		children='Link Button'
		/>
		```

		## Components

		### `<Provider />`

		The `<Provider />` component is a wrapper around styled-components' [ThemeProvider](https://www.styled-components.com/docs/advanced#theming).
		It also sets a default font-family value based on `theme.font`.

		The Provider should be wrapped around a top-level component to ensure Rebass works as expected.

		```jsx
		import React from 'react'
		import { Provider } from 'rebass'
		import Page from './Page'

		const App = props => (
		<Provider>
		<Page />
		</Provider>
		)
		```

		You'll likely want to add additional global styles that set `box-sizing: border-box` in your application.
		This can be done with styled-components [`injectGlobal`](https://www.styled-components.com/docs/api#injectglobal):

		```jsx
		import { injectGlobal } from 'styled-components'

		injectGlobal`
		* { box-sizing: border-box; }
		body { margin: 0; }
		`
		```

		### UI Components

		For an interactive demo of all Rebass components, see http://jxnblk.com/rebass


		## Component-Specific Props

		Some components accept other props for styling.

		### `<Text />`

		The `<Text />` component, which is also the base for `<Heading />`, `<Subhead />`, `<Lead />`, and `<Small />`,
		accepts several typographic style props.

		- `left` (boolean) text-align: left
		- `center` (boolean) text-align: center
		- `right` (boolean) text-align: right
		- `justify` (boolean) text-align: justify
		- `bold` (boolean) font-weight: theme.weights[1]
		- `caps` (boolean) text-transform: uppercase; letter-spacing: .2em

		### `<Border />`

		- `borderWidth` (number) pixel value for border width
		- `top` (boolean) border-top
		- `right` (boolean) border-right
		- `bottom` (boolean) border-bottom
		- `left` (boolean) border-left
		- `none` (boolean) hide all borders
		- `color` (string) sets only the border color

		### `<Container />`

		- `maxWidth` (number) the maximum width of the container element

		### `<NavLink />`, `<TabItem />`, `<DotButton />`

		- `active` (boolean) adjusts style for an active state

		### `<Banner />`

		- `backgroundImage` (string) URL for a background image

		### `<BackgroundImage />`

		- `ratio` (number) converted into a percentage to maintain aspect ratio

		### `<Avatar />`

		- `size` (number) pixel width and height

		### `<Fixed />` and `<Absolute />`

		Both components accept props to control positioning. The margin and padding props can be used to control distance from the edge of a container.

		- `top` (boolean) top: 0
		- `right` (boolean) right: 0
		- `bottom` (boolean) bottom: 0
		- `left` (boolean) left: 0
		- `z` (number) z-index


		## Grid Styled

		For convenience, the [Grid Styled](http://jxnblk.com/grid-styled) `<Flex />` and `<Box />` components are included in Rebass
		to handle most page layout needs.

		```jsx
		import { Flex, Box } from 'rebass'
		```

		## Configuration

		Rebass’s core design system includes breakpoints, a spacing scale,
		a typographic scale, fonts, font weights, border radius, and a color palette –
		all of which can be configured with the `<Provider />` component.

		```jsx
		import React from 'react'
		import { Provider } from 'rebass'

		const theme = {
		breakpoints: [
		// min-width breakpoints in ems
		40, 52, 64
		],
		space: [
		0, 6, 12, 18, 24, 30, 36
		],
		fontSizes: [
		12, 16, 18, 24, 36, 48, 72
		],
		weights: [
		400, 600
		],
		colors: {
		black: '#111',
		white: '#fff',
		blue: '#07c'
		},
		font: 'Georgia, serif',
		monospace: '"Roboto Mono", Menlo, monospace',
		radius: 2
		}

		const App = props => (
		<Provider theme={theme}>
		<Heading>Hello</Heading>
		</Provider>
		)
		```

		## Customizing Components

		Rebass components can be completely customized using styled-components.

		```jsx
		import { Button } from 'rebass'

		const CustomButton = Button.extend`
		border: 1px solid rgba(0, 0, 0, .25);
		background-image: linear-gradient(transparent, rgba(0, 0, 0, .125));
		box-shadow: 0 0 4px rgba(0, 0, 0, .25)
		`
		```

		## Server-Side Rendering

		Rebass uses styled-components for styling.
		The styled-components documentation explains how to handle
		[Server-Side Rendering](https://www.styled-components.com/docs/advanced#server-side-rendering).

		### Related

		- [styled-system](https://github.com/jxnblk/styled-system)
		- [grid-styled](https://github.com/jxnblk/grid-styled)
		- [palx](https://github.com/jxnblk/palx)
		- [styled-components](https://github.com/styled-components/styled-components)

		[Contributing](.github/CONTRIBUTING.md)
		\|
		[MIT License](.github/LICENSE.md)

163

src/index.js

		@@ -1,79 +0,73 @@
		import components from './components'
		import { Flex, Box } from './grid'
		import Provider from './Provider'
		import createLibrary from './create-library'
		export { Flex, Box } from 'grid-styled'

		const library = createLibrary(components)
		export { default as theme } from './theme'

		const { length } = Object.keys(library)
		export { Base } from './Base'
		export { CSS } from './CSS'
		export { Root } from './Root'
		export { Provider } from './Provider'

		const Rebass = Object.assign({}, library, { Provider, Flex, Box })
		export { Button } from './Button'
		export { ButtonOutline } from './ButtonOutline'
		export { ButtonCircle } from './ButtonCircle'
		export { ButtonTransparent } from './ButtonTransparent'

		export { Flex, Box } from './grid'
		export { default as Provider } from './Provider'
		export { default as hoc } from './hoc'
		export { Link } from './Link'
		export { NavLink } from './NavLink'
		export { BlockLink } from './BlockLink'
		export { Close } from './Close'

		export { Text } from './Text'
		export { Heading } from './Heading'
		export { Subhead } from './Subhead'
		export { Caps } from './Caps'
		export { Small } from './Small'
		export { Lead } from './Lead'
		export { Truncate } from './Truncate'

		export { Blockquote } from './Blockquote'
		export { Divider } from './Divider'
		export { Pre } from './Pre'
		export { Code } from './Code'
		export { Samp } from './Samp'
		export { Measure } from './Measure'

		export { Label } from './Label'
		export { Input } from './Input'
		export { Select } from './Select'
		export { Textarea } from './Textarea'
		export { Radio } from './Radio'
		export { Checkbox } from './Checkbox'
		export { Slider } from './Slider'
		export { Switch } from './Switch'

		export { Image } from './Image'
		export { BackgroundImage } from './BackgroundImage'
		export { Avatar } from './Avatar'
		export { Embed } from './Embed'

		export { Container } from './Container'
		export { Group } from './Group'
		export { Row } from './Row'
		export { Column } from './Column'

		export { Border } from './Border'
		export { Card } from './Card'
		export { Panel } from './Panel'
		export { Progress } from './Progress'

		export { Banner } from './Banner'
		export { Message } from './Message'
		export { Toolbar } from './Toolbar'
		export { Tabs } from './Tabs'
		export { Tab } from './Tab'

		export { Badge } from './Badge'
		export { Circle } from './Circle'
		export { Dot } from './Dot'
		export { Arrow } from './Arrow'
		export { Donut } from './Donut'

		export {
		default as theme,
		breakpoints,
		space,
		font,
		monospace,
		fontSizes,
		weights,
		colors,
		radius
		} from './theme'
		export { default as createLibrary } from './create-library'
		export { default as createComponent } from './create-component'
		export { default as util } from './util'

		export const {
		Button,
		ButtonOutline,
		ButtonCircle,
		ButtonTransparent,
		Link,
		NavLink,
		BlockLink,
		Heading,
		Subhead,
		Text,
		Small,
		Lead,
		Pre,
		Code,
		Samp,
		Blockquote,
		Measure,
		Truncate,
		Label,
		Input,
		Select,
		Select2,
		Textarea,
		Checkbox,
		Radio,
		Slider,
		Image,
		Avatar,
		BackgroundImage,
		Container,
		Divider,
		Border,
		Media,
		Card,
		Banner,
		Panel,
		PanelHeader,
		PanelFooter,
		Progress,
		Message,
		Group,
		Toolbar,
		Badge,
		Circle,
		Tabs,
		TabItem,
		DotButton,
		Close,
		Position,
		Relative,
		@@ -83,17 +77,10 @@ Absolute,
		Sticky,
		Drawer,
		Overlay,
		Carousel,
		ScrollCarousel,
		CarouselSlide,
		Tooltip,
		Switch,
		Arrow,
		Star,
		Embed,
		Donut,
		Row,
		Column,
		} = library
		} from './Position'

		export default Rebass
		export { Modal } from './Modal'
		export { Drawer } from './Drawer'
		export { Carousel } from './Carousel'
		export { Tooltip } from './Tooltip'

		// backwards compat
		export { Modal as Overlay } from './Modal'

src/Provider.js

		import React from 'react'
		import styled, { ThemeProvider } from 'styled-components'
		import {
		shape,
		arrayOf,
		oneOfType,
		array,
		object,
		string,
		number,
		} from 'prop-types'
		import theme from './theme'
		import { ThemeProvider } from 'styled-components'
		import Root from './Root'
		import defaultTheme from './theme'

		const Base = styled.div([], props => ({
		fontFamily: props.theme.font \|\| theme.font
		}))
		export class Provider extends React.Component {
		render () {
		const {
		theme,
		...props
		} = this.props

		const Provider = props => (
		<ThemeProvider theme={Object.assign({}, theme, props.theme)}>
		<Base {...props} />
		</ThemeProvider>
		)
		return (
		<ThemeProvider theme={{ ...defaultTheme, ...theme }}>
		<Root {...props} />
		</ThemeProvider>
		)
		}
		}

		Provider.propTypes = {
		theme: shape({
		breakpoints: arrayOf(number),
		space: arrayOf(number),
		fontSizes: arrayOf(number),
		weights: arrayOf(number),
		colors: oneOfType([
		object,
		array
		]),
		font: string,
		monospace: string,
		radius: number
		})
		Provider.defaultProps = {
		theme: {}
		}

		Provider.displayName = 'Rebass.Provider'

		export default Provider

src/theme.js

		@@ -1,2 +0,2 @@
		import palx from 'palx'
		import colors from './colors'

		@@ -8,3 +8,3 @@ export const breakpoints = [
		80
		]
		].map(n => n + 'em')

		@@ -34,34 +34,23 @@ export const space = [

		export const weights = [
		400,
		700
		]
		export const fontWeights = {
		normal: 400,
		bold: 700
		}

		const palette = palx('#07c')
		export { default as colors } from './colors'

		const flattened = Object.keys(palette)
		.reduce((a, key) => {
		const value = palette[key]
		if (Array.isArray(value)) {
		a[key] = value[5]
		value.forEach((val, i) => {
		a[key + i] = val
		})
		} else {
		a[key] = value
		}
		return a
		}, {})
		export const radii = [ 0, 2, 4 ]

		// todo: flatten
		export const fonts = {
		0: 'system-ui, sans-serif',
		sans: 'system-ui, sans-serif',
		mono: '"SF Mono", "Roboto Mono", Menlo, monospace'
		}

		export const colors = Object.assign({}, flattened, {
		black: '#000',
		white: '#fff'
		})
		export const shadows = [
		'none',
		`inset 0 0 0 1px ${colors.gray}`,
		`inset 0 0 0 1px ${colors.gray}, 0 0 4px ${colors.gray}`,
		]

		export const radius = 4
		export const font = `-apple-system, BlinkMacSystemFont, sans-serif`
		export const monospace = '"SF Mono", "Roboto Mono", Menlo, monospace'

		export default {
		@@ -71,7 +60,7 @@ breakpoints,
		fontSizes,
		weights,
		font,
		monospace,
		fontWeights,
		fonts,
		colors,
		radius,
		radii,
		shadows,
		}

_notes.md

src/blacklist.js

src/components.js

src/create-component.js

src/create-library.js

src/DonutBase.js

src/grid.js

src/hoc.js

src/SelectBase.js

src/util.js

.babelrc

Sorry, the diff of this file is not supported yet

rebass - npm Package Compare versions

New alerts

Improved metrics

Worsened metrics

Dependency changes