		@@ -1,1 +0,1554 @@
		!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("styled-components")):"function"==typeof define&&define.amd?define("atomicLayout",["react","styled-components"],t):"object"==typeof exports?exports.atomicLayout=t(require("react"),require("styled-components")):e.atomicLayout=t(e.react,e["styled-components"])}(window,function(e,t){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=8)}([function(t,r){t.exports=e},function(e,r){e.exports=t},function(e,t,r){"undefined"!=typeof self&&self,e.exports=function(e){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var r={};return t.m=e,t.c=r,t.d=function(e,r,n){t.o(e,r)\|\|Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=3)}([function(e,t,r){e.exports=r(5)()},function(e,t,r){"use strict";var n=/[A-Z]/g,o=/^ms-/,a={};e.exports=function(e){return e in a?a[e]:a[e]=e.replace(n,"-$&").toLowerCase().replace(o,"-ms-")}},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=Object.assign\|\|function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},o=r(0),a=function(e){return e&&e.__esModule?e:{default:e}}(o),i=a.default.oneOfType([a.default.string,a.default.number]),u={orientation:a.default.oneOf(["portrait","landscape"]),scan:a.default.oneOf(["progressive","interlace"]),aspectRatio:a.default.string,deviceAspectRatio:a.default.string,height:i,deviceHeight:i,width:i,deviceWidth:i,color:a.default.bool,colorIndex:a.default.bool,monochrome:a.default.bool,resolution:i},c=n({minAspectRatio:a.default.string,maxAspectRatio:a.default.string,minDeviceAspectRatio:a.default.string,maxDeviceAspectRatio:a.default.string,minHeight:i,maxHeight:i,minDeviceHeight:i,maxDeviceHeight:i,minWidth:i,maxWidth:i,minDeviceWidth:i,maxDeviceWidth:i,minColor:a.default.number,maxColor:a.default.number,minColorIndex:a.default.number,maxColorIndex:a.default.number,minMonochrome:a.default.number,maxMonochrome:a.default.number,minResolution:i,maxResolution:i},u),s={all:a.default.bool,grid:a.default.bool,aural:a.default.bool,braille:a.default.bool,handheld:a.default.bool,print:a.default.bool,projection:a.default.bool,screen:a.default.bool,tty:a.default.bool,tv:a.default.bool,embossed:a.default.bool},l=n({},s,c);u.type=Object.keys(s),t.default={all:l,types:s,matchers:u,features:c},e.exports=t.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t\|\|"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){var r=u({},e);return t.forEach(function(e){return delete r[e]}),r}Object.defineProperty(t,"__esModule",{value:!0}),t.toQuery=t.default=void 0;var i=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable\|\|!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),u=Object.assign\|\|function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},c=r(4),s=n(c),l=r(0),f=n(l),p=r(7),d=n(p),m=r(1),h=n(m),v=r(2),y=n(v),b=r(9),g=n(b),O={component:f.default.node,query:f.default.string,values:f.default.shape(y.default.matchers),children:f.default.oneOfType([f.default.node,f.default.func]),onChange:f.default.func,onBeforeChange:f.default.func},w=Object.keys(y.default.all),j=Object.keys(O),x=j.concat(w),k=function(e){function t(){var e,r,n;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);for(var a=arguments.length,i=Array(a),u=0;u<a;u++)i[u]=arguments[u];return r=n=o(this,(e=t.__proto__\|\|Object.getPrototypeOf(t)).call.apply(e,[this].concat(i))),n.state={matches:!1},n.updateMatches=function(){n._mql.matches!==n.state.matches&&n.setState({matches:n._mql.matches})},n.removeMql=function(){n._mql&&(n._mql.removeListener(n.updateMatches),n._mql.dispose())},o(n,r)}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),i(t,[{key:"componentWillMount",value:function(){this.updateQuery(this.props)}},{key:"componentWillReceiveProps",value:function(e){this.updateQuery(e)}},{key:"updateQuery",value:function(e){var t=void 0,r=!1;if(e.query?this.query=e.query:this.query=(0,g.default)(a(e,j)),!this.query)throw new Error("Invalid or missing MediaQuery!");e.values&&(t=Object.keys(e.values).reduce(function(t,r){return t[(0,h.default)(r)]=e.values[r],t},{}),0!==Object.keys(t).length&&(r=!0)),this.removeMql(),this._mql=(0,d.default)(this.query,t,r),this._mql.addListener(this.updateMatches),this.updateMatches()}},{key:"componentWillUpdate",value:function(e,t){this.props.onBeforeChange&&this.state.matches!==t.matches&&this.props.onBeforeChange(this.state.matches)}},{key:"componentDidUpdate",value:function(e,t){this.props.onChange&&t.matches!==this.state.matches&&this.props.onChange(this.state.matches)}},{key:"componentWillUnmount",value:function(){this.removeMql()}},{key:"render",value:function(){if("function"==typeof this.props.children)return this.props.children(this.state.matches);if(!1===this.state.matches)return null;var e=a(this.props,x),t=Object.keys(e).length>0,r=s.default.Children.count(this.props.children);return this.props.component\|\|null==this.props.children\|\|t&&r>1?s.default.createElement(this.props.component\|\|"div",e,this.props.children):t?s.default.cloneElement(this.props.children,e):r?this.props.children:null}}]),t}(s.default.Component);k.displayName="MediaQuery",k.defaultProps={values:{}},t.default=k,t.toQuery=g.default},function(t,r){t.exports=e},function(e,t,r){"use strict";function n(){}var o=r(6);e.exports=function(){function e(e,t,r,n,a,i){if(i!==o){var u=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw u.name="Invariant Violation",u}}function t(){return e}e.isRequired=e;var r={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return r.checkPropTypes=n,r.PropTypes=r,r}},function(e,t,r){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,r){"use strict";var n=r(8).match,o="undefined"!=typeof window?window.matchMedia:null;e.exports=function(e,t,r){return new function(e,t,r){function a(e){i.matches=e.matches,i.media=e.media}var i=this;if(o&&!r){var u=o.call(window,e);this.matches=u.matches,this.media=u.media,u.addListener(a)}else this.matches=n(e,t),this.media=e;this.addListener=function(e){u&&u.addListener(e)},this.removeListener=function(e){u&&u.removeListener(e)},this.dispose=function(){u&&u.removeListener(a)}}(e,t,r)}},function(e,t,r){"use strict";function n(e){return e.split(",").map(function(e){var t=(e=e.trim()).match(u),r=t[1],n=t[2],o=t[3]\|\|"",a={};return a.inverse=!!r&&"not"===r.toLowerCase(),a.type=n?n.toLowerCase():"all",o=o.match(/$[^$]+\)/g)\|\|[],a.expressions=o.map(function(e){var t=e.match(c),r=t[1].toLowerCase().match(s);return{modifier:r[1],feature:r[2],value:t[2]}}),a})}function o(e){var t,r=Number(e);return r\|\|(t=e.match(/^(\d+)\s\/\s(\d+)$/),r=t[1]/t[2]),r}function a(e){var t=parseFloat(e);switch(String(e).match(f)[1]){case"dpcm":return t/2.54;case"dppx":return 96t;default:return t}}function i(e){var t=parseFloat(e);switch(String(e).match(l)[1]){case"em":case"rem":return 16t;case"cm":return 96t/2.54;case"mm":return 96t/2.54/10;case"in":return 96t;case"pt":return 72t;case"pc":return 72t/12;default:return t}}t.match=function(e,t){return n(e).some(function(e){var r=e.inverse,n="all"===e.type\|\|t.type===e.type;if(n&&r\|\|!n&&!r)return!1;var u=e.expressions.every(function(e){var r=e.feature,n=e.modifier,u=e.value,c=t[r];if(!c)return!1;switch(r){case"orientation":case"scan":return c.toLowerCase()===u.toLowerCase();case"width":case"height":case"device-width":case"device-height":u=i(u),c=i(c);break;case"resolution":u=a(u),c=a(c);break;case"aspect-ratio":case"device-aspect-ratio":case"device-pixel-ratio":u=o(u),c=o(c);break;case"grid":case"color":case"color-index":case"monochrome":u=parseInt(u,10)\|\|1,c=parseInt(c,10)\|\|0}switch(n){case"min":return c>=u;case"max":return c<=u;default:return c===u}});return u&&!r\|\|!u&&r})},t.parse=n;var u=/(?:(only\|not)?\s([^\s]+)(?:\sand)?\s)?(.+)?/i,c=/$\s([^\s\:$]+)\s(?:\:\s([^\s\)]+))?\s\)/,s=/^(?:(min\|max)-)?(.+)/,l=/(em\|rem\|px\|cm\|mm\|in\|pt\|pc)?$/,f=/(dpi\|dpcm\|dppx)?$/},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){var t=[];return Object.keys(u.default.all).forEach(function(r){var n=e[r];null!=n&&t.push(function(e,t){var r=(0,a.default)(e);return"number"==typeof t&&(t+="px"),!0===t?e:!1===t?c(e):"("+r+": "+t+")"}(r,n))}),function(e){return e.join(" and ")}(t)};var o=r(1),a=n(o),i=r(2),u=n(i),c=function(e){return"not "+e};e.exports=t.default}])}(r(0))},function(e,t,r){e.exports=r(4)()},function(e,t,r){"use strict";var n=r(5),o=r(6),a=r(7);e.exports=function(){function e(e,t,r,n,i,u){u!==a&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var r={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return r.checkPropTypes=n,r.PropTypes=r,r}},function(e,t,r){"use strict";function n(e){return function(){return e}}var o=function(){};o.thatReturns=n,o.thatReturnsFalse=n(!1),o.thatReturnsTrue=n(!0),o.thatReturnsNull=n(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t,r){"use strict";var n=function(e){};e.exports=function(e,t,r,o,a,i,u,c){if(n(t),!e){var s;if(void 0===t)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[r,o,a,i,u,c],f=0;(s=new Error(t.replace(/%s/g,function(){return l[f++]}))).name="Invariant Violation"}throw s.framesToPop=1,s}}},function(e,t,r){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,r){"use strict";r.r(t);var n=r(1),o=r.n(n);function a(){for(var e=arguments.length,t=Array(e),r=0;r<e;r++)t[r]=arguments[r];return t.reduce(function(e,t){return function(){return e(t.apply(void 0,arguments))}})}var i={defaultUnit:"px",defaultBehavior:"up",defaultBreakpointName:"xs",breakpoints:{xs:{maxWidth:"575px"},sm:{minWidth:"576px",maxWidth:"768px"},md:{minWidth:"769px",maxWidth:"992px"},lg:{minWidth:"993px",maxWidth:"1199px"},xl:{minWidth:"1200px"}}};function u(e,t){e\|\|console.error(t)}var c=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable\|\|!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}();var s=new(function(){function e(t){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.configure(t)}return c(e,[{key:"configure",value:function(e){var t=this;u(e,"Failed to configure Layout: expected an options Object, but got: "+e);var r=Object.assign({},i,e),n=r.defaultBreakpointName;return u(n,'Failed to configure Layout: expected "defaultBreakpointName" property set, but got: '+n),u(r.breakpoints,"Failed to configure Layout: expected to have at least one breakpoint specified, but got none."),u(r.breakpoints.hasOwnProperty(n),'Failed to configure Layout: cannot set default breakpoint to "'+n+'" (breakpoint not found).'),Object.keys(r).forEach(function(e){t[e]=r[e]}),this}},{key:"getBreakpointNames",value:function(){return Object.keys(this.breakpoints)}},{key:"getBreakpoint",value:function(e){return e&&this.breakpoints[e]}}]),e}())(i);function l(e){if(e)return""+e+(Number.isInteger(e)?s.defaultUnit:"")}var f=a(function(e){return e.replace(/^.+$/gm,function(e){return"'"+e+"'"})},function(e){return e.replace(/'+/gm,"")},function(e){return e.trim()}),p={template:{props:["grid-template-areas"],transformValue:a(function(e){return e.join("\n")},function(e){return e.map(f)},function(e){return e.split("\n")},function(e){return e.trim()})},templateCols:{props:["grid-template-columns"]},templateRows:{props:["grid-template-rows"]},col:{props:["grid-column"]},colStart:{props:["grid-column-start"]},colEnd:{props:["grid-column-end"]},row:{props:["grid-row"]},rowStart:{props:["grid-row-start"]},rowEnd:{props:["grid-row-end"]},gutter:{props:["grid-gap"],transformValue:l},gutterCol:{props:["grid-column-gap"],transformValue:l},gutterRow:{props:["grid-row-gap"],transformValue:l},align:{props:["align-self"]},alignItems:{props:["align-items"]},justify:{props:["justify-self"]},justifyItems:{props:["justify-items"]},justifyContent:{props:["justify-content"]},place:{props:["place-self"]},placeItems:{props:["place-items"]},placeContent:{props:["place-content"]},height:{props:["height"],transformValue:l},minHeight:{props:["min-height"],transformValue:l},maxHeight:{props:["max-height"],transformValue:l},width:{props:["width"],transformValue:l},minWidth:{props:["min-width"],transformValue:l},maxWidth:{props:["max-width"],transformValue:l},margin:{props:["margin"],transformValue:l},marginTop:{props:["margin-top"],transformValue:l},marginRight:{props:["margin-right"],transformValue:l},marginBottom:{props:["margin-bottom"],transformValue:l},marginLeft:{props:["margin-left"],transformValue:l},marginVertical:{props:["margin-top","margin-bottom"],transformValue:l},marginHorizontal:{props:["margin-right","margin-left"],transformValue:l},padding:{props:["padding"],transformValue:l},paddingTop:{props:["padding-top"],transformValue:l},paddingRight:{props:["padding-right"],transformValue:l},paddingBottom:{props:["padding-bottom"],transformValue:l},paddingLeft:{props:["padding-left"],transformValue:l},paddingVertical:{props:["padding-top","padding-bottom"],transformValue:l},paddingHorizontal:{props:["padding-right","padding-left"],transformValue:l}};function d(e){return e.slice(0,1).toLowerCase()+e.slice(1,e.length)}function m(e){var t=s.getBreakpointNames().join("\|"),r=["down","only"].join("\|"),n=new RegExp("("+t+")$","gi"),o=new RegExp("("+r+")$","gi"),a=e.match(o),i=a?a[0]:"",u=e.replace(i,"").match(n),c=u?u[0]:"",l=e.replace(c,"").replace(i,""),f=c?d(c):s.defaultBreakpointName,p=f===s.defaultBreakpointName;return{originPropName:e,purePropName:l,behavior:i?d(i):s.defaultBehavior,breakpoint:{name:f,isDefault:p}}}var h=function(){return function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var r=[],n=!0,o=!1,a=void 0;try{for(var i,u=e[Symbol.iterator]();!(n=(i=u.next()).done)&&(r.push(i.value),!t\|\|r.length!==t);n=!0);}catch(e){o=!0,a=e}finally{try{!n&&u.return&&u.return()}finally{if(o)throw a}}return r}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),v=function(e,t){var r=e.split("-"),n=h(r,2),o=n[0],a=n[1];return!["height","width"].includes(a)\|\|("min"===o&&["up","only"].includes(t)\|\|"max"===o&&["down","only"].includes(t))};var y=function(e,t,r,n){var o=e.map(function(e){return e+":"+String(t)+";"}).join(""),a=s.getBreakpoint(r.name);return a&&!(r.isDefault&&n===s.defaultBehavior)?"@media "+function(e,t){return Object.entries(e).map(function(e){var t=h(e,2),r=t[0],n=t[1];return[function(e){return e.replace(/[A-Z]/g,function(e){return("-"+e).toLowerCase()})}(r),n]}).filter(function(e){var r=h(e,1)[0];return v(r,t)}).map(function(e){var t=h(e,2),r=t[0],n=t[1];return"("+r+":"+String(l(n))+")"}).join(" and ")}(a,n)+" {"+o+"}":o};function b(e){return Object.keys(e).map(m).filter(function(e){var t=e.purePropName;return p.hasOwnProperty(t)}).map(function(t){var r=t.purePropName,n=t.originPropName,o=t.breakpoint,a=t.behavior,i=p[r],u=i.props,c=i.transformValue,s=e[n],l=c?c(s):s;return y(u,l,o,a)}).join(" ")}var g=function(e,t){return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}(["\n ",";\n display: ",";\n"],["\n ",";\n display: ",";\n"]);var O=o.a.div(g,b,function(e){var t=e.flex,r=e.inline;return t&&(r?"inline-flex":"flex")}),w=r(0),j=r.n(w),x=a(function(e){return Array.from(new Set(e))},function(e){return e.filter(Boolean)},function(e){return e.split(" ")},function(e){return e.replace(/\s+/g," ")},function(e){return e.replace(/\r?\n\|\'+/g," ")});var k=r(2),_=r.n(k);function P(e,t){return function(r){return e(r)?t(r):r}}function C(e){return function(t){return e.apply(null,t)}}function E(e){var t=e.match(/^min\|max/);return t&&t[0]}var T=Object.assign\|\|function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e};function R(e,t,r){var n=t.behavior,o=e.behavior,a="up"===n,i=n===o,u=a&&"down"===o,c=a,s=T({},t,e);return Object.keys(s).reduce(function(n,o){var a=s[o],f=E(o);("behavior"===o&&!r&&c&&(a="down"),"max"===f)&&(!r&&c&&(a="calc("+l(e[o.replace(/^max/,"min")])+" - 1px)"));return"min"===f&&(r?(i\|\|u)&&(a=t[o]):c&&(a=t[o])),T({},n,function(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}({},o,a))},{})}var S=Object.assign\|\|function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e};function L(e){return Object.keys(e).reduce(function(t,r){return S({},t,function(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}({},r,"max"===E(r)?void 0:e[r]))},{})}var V=function(e){return e.replace(/^min\|max/,"_")};var A=function(){return function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var r=[],n=!0,o=!1,a=void 0;try{for(var i,u=e[Symbol.iterator]();!(n=(i=u.next()).done)&&(r.push(i.value),!t\|\|r.length!==t);n=!0);}catch(e){o=!0,a=e}finally{try{!n&&u.return&&u.return()}finally{if(o)throw a}}return r}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),B=Object.assign\|\|function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e};var M=function(e,t){return function(e){var r=function(e){return Array.isArray(e)?e:Array.from(e)}(e),n=(r[0],r.slice(1));return[t(e)].concat(function(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)}(n))}},N=function(e){return function(t,r,n,o){var a=n===o.length-1,i=r.areas,u=r.behavior,c=r.breakpoint,s=i.includes(e),l=t[t.length-1],f=B({},c,{behavior:u}),p=l\|\|{},d=(p.behavior,function(e,t){var r={};for(var n in e)t.indexOf(n)>=0\|\|Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);return r}(p,["behavior"]));return[f,l,s,a,l&&function(e,t){var r=Object.keys(e).concat(Object.keys(t));return r.every(function(e,t){var n=V(e);return n===V(r[t-1]\|\|n)})}(d,c),t]}},q=function(e){var t=A(e,5);t[0],t[1],t[2],t[3];return t[4]},W=function(e){var t=A(e,4),r=t[0];t[1],t[2];return t[3]&&"up"===r.behavior},I=function(e){var t=A(e,6),r=t[0],n=t[1],o=t[2],a=(t[3],t[4]),i=t[5],u=(n\|\|{}).behavior,c=r.behavior,s="up"===u,l=o&&(u===c\|\|s&&"down"===c);a\|\|(l=!1);var f=[r];return o\|\|(f=s?[r,null]:[null],s&&(l=!0)),(l?function(e){return e.slice(0,e.length-1)}(i):i).concat(f)},D=function(e,t){return t.reduce(a(I,P(W,M(0,C(L))),P(q,M(0,C(R))),N(e)),[])},H=Object.assign\|\|function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},F=function(e,t){return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}(["\n grid-area: ",";\n"],["\n grid-area: ",";\n"]);function U(e,t){var r={};for(var n in e)t.indexOf(n)>=0\|\|Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);return r}var z=function(e,t){var r=function(r){var n=r.children,o=U(r,["children"]);return t.filter(Boolean).reduce(function(t,r,a){r.behavior;var i=U(r,["behavior"]);return t.concat(w.createElement(_.a,H({},o,i,{key:e.displayName+"_"+a,component:e}),n))},[])};return r.displayName="Placeholder("+e.displayName+")",r},Q=function(e){return o()(O)(F,e)};var $=Object.assign\|\|function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e};var Y=a(function(e){var t=e.areas,r=e.templates;return t.reduce(function(e,t){var n=D(t,r),o=1===n.length&&n.every(function(e){return!e.minWidth&&!e.maxWidth}),a=Q(t),i=function(e){return e.replace(/^./,function(e){return e.toUpperCase()})}(t);a.displayName=i;var u=o?a:z(a,n);return H({},e,function(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}({},i,u))},{})},function(e){var t=Object.keys(e).reduce(function(t,r){var n=m(r),o=n.breakpoint,a=n.behavior,i=x(e[r]);return{areas:t.areas.concat(i),templates:t.templates.concat({breakpoint:s.getBreakpoint(o.name),behavior:a,areas:i})}},{areas:[],templates:[]}),r=t.areas,n=t.templates;return{areas:Array.from(new Set(r)),templates:n}},function(e){return Object.keys(e).filter(function(e){return"template"===m(e).purePropName}).reduce(function(t,r){return $({},t,function(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}({},r,e[r]))},{})}),Z=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable\|\|!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),G=function(e,t){return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}(["\n ",";\n display: ",";\n"],["\n ",";\n display: ",";\n"]);var J=o.a.div(G,b,function(e){return e.inline?"inline-grid":"grid"}),K=function(e){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var r=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t\|\|"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__\|\|Object.getPrototypeOf(t)).call(this,e));return r.areaComponents=Y(e),r}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,j.a.Component),Z(t,[{key:"render",value:function(){var e=this.areaComponents,t=this.props.children,r=Object.keys(e).length>0;return j.a.createElement(J,this.props,r?t(e):t)}}]),t}(),X=r(3),ee=r.n(X),te=Object.assign\|\|function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},re=function(){return function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var r=[],n=!0,o=!1,a=void 0;try{for(var i,u=e[Symbol.iterator]();!(n=(i=u.next()).done)&&(r.push(i.value),!t\|\|r.length!==t);n=!0);}catch(e){o=!0,a=e}finally{try{!n&&u.return&&u.return()}finally{if(o)throw a}}return r}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}();function ne(e){return Object.keys(e).map(function(e){return[E(e),e]}).filter(function(e){return"max"!==re(e,1)[0]}).reduce(function(t,r){var n=re(r,2),o=n[0],a=n[1],i="min"===o,u=i?a.replace(/^min/,"max"):a,c=i?parseFloat(e[a])-1:e[a];return te({},t,function(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}({},u,c))},{})}var oe=s.getBreakpointNames(),ae=function(e,t,r){return j.a.createElement(_.a,t,j.a.createElement(O,r,e))},ie=function(e){var t=e.children,r=e.for,n=e.from,o=e.to,a=function(e,t){var r={};for(var n in e)t.indexOf(n)>=0\|\|Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);return r}(e,["children","for","from","to"]);if(r)return ae(t,s.getBreakpoint(r),a);var i=s.getBreakpoint(n),u=s.getBreakpoint(o);return i&&!u?ae(t,L(i),a):u&&!i?ae(t,ne(u),a):j.a.createElement("p",null,"Oops")};ie.propTypes={for:ee.a.oneOf(oe),from:ee.a.oneOf(oe),to:ee.a.oneOf(oe)};var ue=ie;r.d(t,"Box",function(){return O}),r.d(t,"Composition",function(){return K}),r.d(t,"Only",function(){return ue}),r.d(t,"default",function(){return s})}])});
		(function webpackUniversalModuleDefinition(root, factory) {
		if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory(require("react"), require("styled-components"));
		else if(typeof define === 'function' && define.amd)
		define("atomicLayout", ["react", "styled-components"], factory);
		else if(typeof exports === 'object')
		exports["atomicLayout"] = factory(require("react"), require("styled-components"));
		else
		root["atomicLayout"] = factory(root["react"], root["styled-components"]);
		})(window, function(__WEBPACK_EXTERNAL_MODULE__0__, __WEBPACK_EXTERNAL_MODULE__1__) {
		return /******/ (function(modules) { // webpackBootstrap
		/******/ // The module cache
		/******/ var installedModules = {};
		/******/
		/******/ // The require function
		/******/ function __webpack_require__(moduleId) {
		/******/
		/******/ // Check if module is in cache
		/******/ if(installedModules[moduleId]) {
		/******/ return installedModules[moduleId].exports;
		/******/ }
		/******/ // Create a new module (and put it into the cache)
		/******/ var module = installedModules[moduleId] = {
		/******/ i: moduleId,
		/******/ l: false,
		/******/ exports: {}
		/******/ };
		/******/
		/******/ // Execute the module function
		/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
		/******/
		/******/ // Flag the module as loaded
		/******/ module.l = true;
		/******/
		/******/ // Return the exports of the module
		/******/ return module.exports;
		/******/ }
		/******/
		/******/
		/******/ // expose the modules object (__webpack_modules__)
		/******/ __webpack_require__.m = modules;
		/******/
		/******/ // expose the module cache
		/******/ __webpack_require__.c = installedModules;
		/******/
		/******/ // define getter function for harmony exports
		/******/ __webpack_require__.d = function(exports, name, getter) {
		/******/ if(!__webpack_require__.o(exports, name)) {
		/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
		/******/ }
		/******/ };
		/******/
		/******/ // define __esModule on exports
		/******/ __webpack_require__.r = function(exports) {
		/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
		/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
		/******/ }
		/******/ Object.defineProperty(exports, '__esModule', { value: true });
		/******/ };
		/******/
		/******/ // create a fake namespace object
		/******/ // mode & 1: value is a module id, require it
		/******/ // mode & 2: merge all properties of value into the ns
		/******/ // mode & 4: return value when already ns object
		/******/ // mode & 8\|1: behave like require
		/******/ __webpack_require__.t = function(value, mode) {
		/******/ if(mode & 1) value = __webpack_require__(value);
		/******/ if(mode & 8) return value;
		/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
		/******/ var ns = Object.create(null);
		/******/ __webpack_require__.r(ns);
		/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
		/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
		/******/ return ns;
		/******/ };
		/******/
		/******/ // getDefaultExport function for compatibility with non-harmony modules
		/******/ __webpack_require__.n = function(module) {
		/******/ var getter = module && module.__esModule ?
		/******/ function getDefault() { return module['default']; } :
		/******/ function getModuleExports() { return module; };
		/******/ __webpack_require__.d(getter, 'a', getter);
		/******/ return getter;
		/******/ };
		/******/
		/******/ // Object.prototype.hasOwnProperty.call
		/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
		/******/
		/******/ // __webpack_public_path__
		/******/ __webpack_require__.p = "";
		/******/
		/******/
		/******/ // Load entry module and return exports
		/******/ return __webpack_require__(__webpack_require__.s = 8);
		/******/ })
		/************************************************************************/
		/******/ ([
		/* 0 */
		/***/ (function(module, exports) {

		module.exports = __WEBPACK_EXTERNAL_MODULE__0__;

		/***/ }),
		/* 1 */
		/***/ (function(module, exports) {

		module.exports = __WEBPACK_EXTERNAL_MODULE__1__;

		/***/ }),
		/* 2 */
		/***/ (function(module, exports, __webpack_require__) {

		!function(e,t){ true?module.exports=t(__webpack_require__(0)):undefined}("undefined"!=typeof self?self:this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)\|\|Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=3)}([function(e,t,n){e.exports=n(5)()},function(e,t,n){"use strict";function r(e){return e in i?i[e]:i[e]=e.replace(o,"-$&").toLowerCase().replace(a,"-ms-")}var o=/[A-Z]/g,a=/^ms-/,i={};e.exports=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=Object.assign\|\|function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},o=n(0),a=function(e){return e&&e.__esModule?e:{default:e}}(o),i=a.default.oneOfType([a.default.string,a.default.number]),u={orientation:a.default.oneOf(["portrait","landscape"]),scan:a.default.oneOf(["progressive","interlace"]),aspectRatio:a.default.string,deviceAspectRatio:a.default.string,height:i,deviceHeight:i,width:i,deviceWidth:i,color:a.default.bool,colorIndex:a.default.bool,monochrome:a.default.bool,resolution:i},s=r({minAspectRatio:a.default.string,maxAspectRatio:a.default.string,minDeviceAspectRatio:a.default.string,maxDeviceAspectRatio:a.default.string,minHeight:i,maxHeight:i,minDeviceHeight:i,maxDeviceHeight:i,minWidth:i,maxWidth:i,minDeviceWidth:i,maxDeviceWidth:i,minColor:a.default.number,maxColor:a.default.number,minColorIndex:a.default.number,maxColorIndex:a.default.number,minMonochrome:a.default.number,maxMonochrome:a.default.number,minResolution:i,maxResolution:i},u),c={all:a.default.bool,grid:a.default.bool,aural:a.default.bool,braille:a.default.bool,handheld:a.default.bool,print:a.default.bool,projection:a.default.bool,screen:a.default.bool,tty:a.default.bool,tv:a.default.bool,embossed:a.default.bool},l=r({},c,s);u.type=Object.keys(c),t.default={all:l,types:c,matchers:u,features:s},e.exports=t.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t\|\|"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function u(e,t){var n=c({},e);return t.forEach(function(e){return delete n[e]}),n}Object.defineProperty(t,"__esModule",{value:!0}),t.toQuery=t.default=void 0;var s=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable\|\|!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),c=Object.assign\|\|function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},l=n(4),f=r(l),p=n(0),d=r(p),h=n(7),m=r(h),y=n(1),v=r(y),b=n(2),g=r(b),x=n(9),O=r(x),_={component:d.default.node,query:d.default.string,values:d.default.shape(g.default.matchers),children:d.default.oneOfType([d.default.node,d.default.func]),onChange:d.default.func,onBeforeChange:d.default.func},w=Object.keys(g.default.all),j=Object.keys(_),k=j.concat(w),M=function(e){function t(){var e,n,r,i;o(this,t);for(var u=arguments.length,s=Array(u),c=0;c<u;c++)s[c]=arguments[c];return n=r=a(this,(e=t.__proto__\|\|Object.getPrototypeOf(t)).call.apply(e,[this].concat(s))),r.state={matches:!1},r.updateMatches=function(){r._mql.matches!==r.state.matches&&r.setState({matches:r._mql.matches})},r.removeMql=function(){r._mql&&(r._mql.removeListener(r.updateMatches),r._mql.dispose())},i=n,a(r,i)}return i(t,e),s(t,[{key:"componentWillMount",value:function(){this.updateQuery(this.props)}},{key:"componentWillReceiveProps",value:function(e){this.updateQuery(e)}},{key:"updateQuery",value:function(e){var t=void 0,n=!1;if(e.query?this.query=e.query:this.query=(0,O.default)(u(e,j)),!this.query)throw new Error("Invalid or missing MediaQuery!");e.values&&(t=Object.keys(e.values).reduce(function(t,n){return t[(0,v.default)(n)]=e.values[n],t},{}),0!==Object.keys(t).length&&(n=!0)),this.removeMql(),this._mql=(0,m.default)(this.query,t,n),this._mql.addListener(this.updateMatches),this.updateMatches()}},{key:"componentWillUpdate",value:function(e,t){this.props.onBeforeChange&&this.state.matches!==t.matches&&this.props.onBeforeChange(this.state.matches)}},{key:"componentDidUpdate",value:function(e,t){this.props.onChange&&t.matches!==this.state.matches&&this.props.onChange(this.state.matches)}},{key:"componentWillUnmount",value:function(){this.removeMql()}},{key:"render",value:function(){if("function"==typeof this.props.children)return this.props.children(this.state.matches);if(!1===this.state.matches)return null;var e=u(this.props,k),t=Object.keys(e).length>0,n=f.default.Children.count(this.props.children);return this.props.component\|\|null==this.props.children\|\|t&&n>1?f.default.createElement(this.props.component\|\|"div",e,this.props.children):t?f.default.cloneElement(this.props.children,e):n?this.props.children:null}}]),t}(f.default.Component);M.displayName="MediaQuery",M.defaultProps={values:{}},t.default=M,t.toQuery=O.default},function(t,n){t.exports=e},function(e,t,n){"use strict";function r(){}var o=n(6);e.exports=function(){function e(e,t,n,r,a,i){if(i!==o){var u=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw u.name="Invariant Violation",u}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,n){"use strict";function r(e,t,n){function r(e){l&&l.addListener(e)}function o(e){l&&l.removeListener(e)}function u(e){c.matches=e.matches,c.media=e.media}function s(){l&&l.removeListener(u)}var c=this;if(i&&!n){var l=i.call(window,e);this.matches=l.matches,this.media=l.media,l.addListener(u)}else this.matches=a(e,t),this.media=e;this.addListener=r,this.removeListener=o,this.dispose=s}function o(e,t,n){return new r(e,t,n)}var a=n(8).match,i="undefined"!=typeof window?window.matchMedia:null;e.exports=o},function(e,t,n){"use strict";function r(e,t){return o(e).some(function(e){var n=e.inverse,r="all"===e.type\|\|t.type===e.type;if(r&&n\|\|!r&&!n)return!1;var o=e.expressions.every(function(e){var n=e.feature,r=e.modifier,o=e.value,s=t[n];if(!s)return!1;switch(n){case"orientation":case"scan":return s.toLowerCase()===o.toLowerCase();case"width":case"height":case"device-width":case"device-height":o=u(o),s=u(s);break;case"resolution":o=i(o),s=i(s);break;case"aspect-ratio":case"device-aspect-ratio":case"device-pixel-ratio":o=a(o),s=a(s);break;case"grid":case"color":case"color-index":case"monochrome":o=parseInt(o,10)\|\|1,s=parseInt(s,10)\|\|0}switch(r){case"min":return s>=o;case"max":return s<=o;default:return s===o}});return o&&!n\|\|!o&&n})}function o(e){return e.split(",").map(function(e){e=e.trim();var t=e.match(s),n=t[1],r=t[2],o=t[3]\|\|"",a={};return a.inverse=!!n&&"not"===n.toLowerCase(),a.type=r?r.toLowerCase():"all",o=o.match(/$[^$]+\)/g)\|\|[],a.expressions=o.map(function(e){var t=e.match(c),n=t[1].toLowerCase().match(l);return{modifier:n[1],feature:n[2],value:t[2]}}),a})}function a(e){var t,n=Number(e);return n\|\|(t=e.match(/^(\d+)\s\/\s(\d+)$/),n=t[1]/t[2]),n}function i(e){var t=parseFloat(e);switch(String(e).match(p)[1]){case"dpcm":return t/2.54;case"dppx":return 96t;default:return t}}function u(e){var t=parseFloat(e);switch(String(e).match(f)[1]){case"em":case"rem":return 16t;case"cm":return 96t/2.54;case"mm":return 96t/2.54/10;case"in":return 96t;case"pt":return 72t;case"pc":return 72t/12;default:return t}}t.match=r,t.parse=o;var s=/(?:(only\|not)?\s([^\s]+)(?:\sand)?\s)?(.+)?/i,c=/$\s([^\s\:$]+)\s(?:\:\s([^\s\)]+))?\s\)/,l=/^(?:(min\|max)-)?(.+)/,f=/(em\|rem\|px\|cm\|mm\|in\|pt\|pc)?$/,p=/(dpi\|dpcm\|dppx)?$/},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){var n=(0,u.default)(e);return"number"==typeof t&&(t+="px"),!0===t?e:!1===t?l(e):"("+n+": "+t+")"}function a(e){return e.join(" and ")}Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){var t=[];return Object.keys(c.default.all).forEach(function(n){var r=e[n];null!=r&&t.push(o(n,r))}),a(t)};var i=n(1),u=r(i),s=n(2),c=r(s),l=function(e){return"not "+e};e.exports=t.default}])});
		//# sourceMappingURL=react-responsive.min.js.map

		/***/ }),
		/* 3 */
		/***/ (function(module, exports, __webpack_require__) {

		/**
		* Copyright (c) 2013-present, Facebook, Inc.
		*
		* This source code is licensed under the MIT license found in the
		* LICENSE file in the root directory of this source tree.
		*/

		if (false) { var throwOnDirectAccess, isValidElement, REACT_ELEMENT_TYPE; } else {
		// By explicitly using `prop-types` you are opting into new production behavior.
		// http://fb.me/prop-types-in-prod
		module.exports = __webpack_require__(4)();
		}


		/***/ }),
		/* 4 */
		/***/ (function(module, exports, __webpack_require__) {

		"use strict";
		/**
		* Copyright (c) 2013-present, Facebook, Inc.
		*
		* This source code is licensed under the MIT license found in the
		* LICENSE file in the root directory of this source tree.
		*/



		var emptyFunction = __webpack_require__(5);
		var invariant = __webpack_require__(6);
		var ReactPropTypesSecret = __webpack_require__(7);

		module.exports = function() {
		function shim(props, propName, componentName, location, propFullName, secret) {
		if (secret === ReactPropTypesSecret) {
		// It is still safe when called from React.
		return;
		}
		invariant(
		false,
		'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
		'Use PropTypes.checkPropTypes() to call them. ' +
		'Read more at http://fb.me/use-check-prop-types'
		);
		};
		shim.isRequired = shim;
		function getShim() {
		return shim;
		};
		// Important!
		// Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
		var ReactPropTypes = {
		array: shim,
		bool: shim,
		func: shim,
		number: shim,
		object: shim,
		string: shim,
		symbol: shim,

		any: shim,
		arrayOf: getShim,
		element: shim,
		instanceOf: getShim,
		node: shim,
		objectOf: getShim,
		oneOf: getShim,
		oneOfType: getShim,
		shape: getShim,
		exact: getShim
		};

		ReactPropTypes.checkPropTypes = emptyFunction;
		ReactPropTypes.PropTypes = ReactPropTypes;

		return ReactPropTypes;
		};


		/***/ }),
		/* 5 */
		/***/ (function(module, exports, __webpack_require__) {

		"use strict";


		/**
		* Copyright (c) 2013-present, Facebook, Inc.
		*
		* This source code is licensed under the MIT license found in the
		* LICENSE file in the root directory of this source tree.
		*
		*
		*/

		function makeEmptyFunction(arg) {
		return function () {
		return arg;
		};
		}

		/**
		* This function accepts and discards inputs; it has no side effects. This is
		* primarily useful idiomatically for overridable function endpoints which
		* always need to be callable, since JS lacks a null-call idiom ala Cocoa.
		*/
		var emptyFunction = function emptyFunction() {};

		emptyFunction.thatReturns = makeEmptyFunction;
		emptyFunction.thatReturnsFalse = makeEmptyFunction(false);
		emptyFunction.thatReturnsTrue = makeEmptyFunction(true);
		emptyFunction.thatReturnsNull = makeEmptyFunction(null);
		emptyFunction.thatReturnsThis = function () {
		return this;
		};
		emptyFunction.thatReturnsArgument = function (arg) {
		return arg;
		};

		module.exports = emptyFunction;

		/***/ }),
		/* 6 */
		/***/ (function(module, exports, __webpack_require__) {

		"use strict";
		/**
		* Copyright (c) 2013-present, Facebook, Inc.
		*
		* This source code is licensed under the MIT license found in the
		* LICENSE file in the root directory of this source tree.
		*
		*/



		/**
		* Use invariant() to assert state which your program assumes to be true.
		*
		* Provide sprintf-style format (only %s is supported) and arguments
		* to provide information about what broke and what you were
		* expecting.
		*
		* The invariant message will be stripped in production, but the invariant
		* will remain to ensure logic does not differ in production.
		*/

		var validateFormat = function validateFormat(format) {};

		if (false) {}

		function invariant(condition, format, a, b, c, d, e, f) {
		validateFormat(format);

		if (!condition) {
		var error;
		if (format === undefined) {
		error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');
		} else {
		var args = [a, b, c, d, e, f];
		var argIndex = 0;
		error = new Error(format.replace(/%s/g, function () {
		return args[argIndex++];
		}));
		error.name = 'Invariant Violation';
		}

		error.framesToPop = 1; // we don't care about invariant's own frame
		throw error;
		}
		}

		module.exports = invariant;

		/***/ }),
		/* 7 */
		/***/ (function(module, exports, __webpack_require__) {

		"use strict";
		/**
		* Copyright (c) 2013-present, Facebook, Inc.
		*
		* This source code is licensed under the MIT license found in the
		* LICENSE file in the root directory of this source tree.
		*/



		var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';

		module.exports = ReactPropTypesSecret;


		/***/ }),
		/* 8 */
		/***/ (function(module, __webpack_exports__, __webpack_require__) {

		"use strict";
		__webpack_require__.r(__webpack_exports__);

		// EXTERNAL MODULE: external "styled-components"
		var external_styled_components_ = __webpack_require__(1);
		var external_styled_components_default = /#__PURE__/__webpack_require__.n(external_styled_components_);

		// CONCATENATED MODULE: ./src/utils/functions/compose/compose.js


		function compose() {
		for (var _len = arguments.length, funcs = Array(_len), _key = 0; _key < _len; _key++) {
		funcs[_key] = arguments[_key];
		}

		return funcs.reduce(function (f, g) {
		return function () {
		return f(g.apply(undefined, arguments));
		};
		});
		}
		// CONCATENATED MODULE: ./src/utils/functions/compose/index.js


		// CONCATENATED MODULE: ./src/const/defaultOptions.js
		var defaultOptions = {
		defaultUnit: 'px',
		defaultBehavior: 'up',
		defaultBreakpointName: 'xs',
		breakpoints: {
		xs: {
		maxWidth: '575px'
		},
		sm: {
		minWidth: '576px',
		maxWidth: '768px'
		},
		md: {
		minWidth: '769px',
		maxWidth: '992px'
		},
		lg: {
		minWidth: '993px',
		maxWidth: '1199px'
		},
		xl: {
		minWidth: '1200px'
		}
		}
		};

		/* harmony default export */ var const_defaultOptions = (defaultOptions);
		// CONCATENATED MODULE: ./src/utils/invariant/invariant.js
		function invariant(predicate, errorMessage) {
		if (!predicate) {
		console.error(errorMessage);
		}
		}
		// CONCATENATED MODULE: ./src/utils/invariant/index.js


		// CONCATENATED MODULE: ./src/Layout.js
		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; }; }();

		function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }





		var Layout_Layout = function () {

		// TODO
		// Improve options type to have params of Maybe type.
		// This way you don't need to provide the entire config.
		function Layout(options) {
		_classCallCheck(this, Layout);

		return this.configure(options);
		}

		/**
		* Applies global layout options.
		*/


		_createClass(Layout, [{
		key: 'configure',
		value: function configure(options) {
		var _this = this;

		invariant(options, 'Failed to configure Layout: expected an options Object, but got: ' + options);

		var nextOptions = Object.assign({}, const_defaultOptions, options);

		var defaultBreakpointName = nextOptions.defaultBreakpointName;

		invariant(defaultBreakpointName, 'Failed to configure Layout: expected "defaultBreakpointName" property set, but got: ' + defaultBreakpointName);

		invariant(nextOptions.breakpoints, 'Failed to configure Layout: expected to have at least one breakpoint specified, but got none.');

		invariant(nextOptions.breakpoints.hasOwnProperty(defaultBreakpointName), 'Failed to configure Layout: cannot set default breakpoint to "' + defaultBreakpointName + '" (breakpoint not found).');

		Object.keys(nextOptions).forEach(function (optionName) {
		_this[optionName] = nextOptions[optionName];
		});

		return this;
		}

		/**
		* Returns the collection of breakpoint names present
		* in the current layout configuration.
		*/

		}, {
		key: 'getBreakpointNames',
		value: function getBreakpointNames() {
		return Object.keys(this.breakpoints);
		}

		/**
		* Returns breakpoint options by the given breakpoint name.
		*/

		}, {
		key: 'getBreakpoint',
		value: function getBreakpoint(breakpointName) {
		return breakpointName && this.breakpoints[breakpointName];
		}
		}]);

		return Layout;
		}();

		/* harmony default export */ var src_Layout = (new Layout_Layout(const_defaultOptions));
		// CONCATENATED MODULE: ./src/utils/math/transformNumeric.js


		function transformNumeric(value) {
		if (!value) {
		return;
		}

		var suffix = Number.isInteger(value) ? src_Layout.defaultUnit : '';

		return '' + value + suffix;
		}
		// CONCATENATED MODULE: ./src/utils/strings/sanitizeTemplateArea/sanitizeTemplateArea.js


		/**
		* Trims whitespace, removes duplicate single quotes and enforces
		* that area line is wrapped in single quotes.
		*/
		var sanitizeTemplateArea = compose(function (area) {
		return area.replace(/^.+$/gm, function (areaName) {
		return '\'' + areaName + '\'';
		});
		}, function (area) {
		return area.replace(/'+/gm, '');
		}, function (area) {
		return area.trim();
		});

		/* harmony default export */ var sanitizeTemplateArea_sanitizeTemplateArea = (sanitizeTemplateArea);
		// CONCATENATED MODULE: ./src/utils/strings/sanitizeTemplateArea/index.js


		// CONCATENATED MODULE: ./src/const/propAliases.js




		var transformTemplateString = compose(function (areas) {
		return areas.join('\n');
		}, function (areas) {
		return areas.map(sanitizeTemplateArea_sanitizeTemplateArea);
		}, function (template) {
		return template.split('\n');
		}, function (template) {
		return template.trim();
		});

		/**
		* Collection of prop aliases.
		* Prop alias is a prop name accepted by a component which is later
		* substituted by one or multiple CSS properties with a single value.
		* Each prop value can have a value transformer.
		*/
		var propAliases = {
		/* CSS Grid */
		template: {
		props: ['grid-template-areas'],
		transformValue: transformTemplateString
		},
		templateCols: {
		props: ['grid-template-columns']
		},
		templateRows: {
		props: ['grid-template-rows']
		},
		col: {
		props: ['grid-column']
		},
		colStart: {
		props: ['grid-column-start']
		},
		colEnd: {
		props: ['grid-column-end']
		},
		row: {
		props: ['grid-row']
		},
		rowStart: {
		props: ['grid-row-start']
		},
		rowEnd: {
		props: ['grid-row-end']
		},
		gutter: {
		props: ['grid-gap'],
		transformValue: transformNumeric
		},
		gutterCol: {
		props: ['grid-column-gap'],
		transformValue: transformNumeric
		},
		gutterRow: {
		props: ['grid-row-gap'],
		transformValue: transformNumeric
		},
		align: {
		props: ['align-self']
		},
		alignItems: {
		props: ['align-items']
		},
		justify: {
		props: ['justify-self']
		},
		justifyItems: {
		props: ['justify-items']
		},
		justifyContent: {
		props: ['justify-content']
		},
		place: {
		props: ['place-self']
		},
		placeItems: {
		props: ['place-items']
		},
		placeContent: {
		props: ['place-content']
		},

		/* Dimensions */
		height: {
		props: ['height'],
		transformValue: transformNumeric
		},
		minHeight: {
		props: ['min-height'],
		transformValue: transformNumeric
		},
		maxHeight: {
		props: ['max-height'],
		transformValue: transformNumeric
		},
		width: {
		props: ['width'],
		transformValue: transformNumeric
		},
		minWidth: {
		props: ['min-width'],
		transformValue: transformNumeric
		},
		maxWidth: {
		props: ['max-width'],
		transformValue: transformNumeric
		},

		/* Space */
		margin: {
		props: ['margin'],
		transformValue: transformNumeric
		},
		marginTop: {
		props: ['margin-top'],
		transformValue: transformNumeric
		},
		marginRight: {
		props: ['margin-right'],
		transformValue: transformNumeric
		},
		marginBottom: {
		props: ['margin-bottom'],
		transformValue: transformNumeric
		},
		marginLeft: {
		props: ['margin-left'],
		transformValue: transformNumeric
		},
		marginVertical: {
		props: ['margin-top', 'margin-bottom'],
		transformValue: transformNumeric
		},
		marginHorizontal: {
		props: ['margin-right', 'margin-left'],
		transformValue: transformNumeric
		},

		padding: {
		props: ['padding'],
		transformValue: transformNumeric
		},
		paddingTop: {
		props: ['padding-top'],
		transformValue: transformNumeric
		},
		paddingRight: {
		props: ['padding-right'],
		transformValue: transformNumeric
		},
		paddingBottom: {
		props: ['padding-bottom'],
		transformValue: transformNumeric
		},
		paddingLeft: {
		props: ['padding-left'],
		transformValue: transformNumeric
		},
		paddingVertical: {
		props: ['padding-top', 'padding-bottom'],
		transformValue: transformNumeric
		},
		paddingHorizontal: {
		props: ['padding-right', 'padding-left'],
		transformValue: transformNumeric
		}
		};

		/* harmony default export */ var const_propAliases = (propAliases);
		// CONCATENATED MODULE: ./src/utils/strings/toLowerCaseFirst/toLowerCaseFirst.js
		function toLowerCaseFirst(str) {
		return str.slice(0, 1).toLowerCase() + str.slice(1, str.length);
		}
		// CONCATENATED MODULE: ./src/utils/strings/toLowerCaseFirst/index.js


		// CONCATENATED MODULE: ./src/utils/strings/parsePropName/parsePropName.js





		/**
		* Returns a parsed prop summary, which includes pure prop name,
		* an optional breakpoint name and breakpoint behavior.
		*
		* \w+(?<=(sm)?(only)?)$
		* This RegExp also works well. May consider implementing once
		* lookbehind is supported everywhere.
		*/
		function parsePropName(originPropName) {
		var joinedBreakpointNames = src_Layout.getBreakpointNames().join('\|');
		var joinedBehaviors = ['down', 'only'].join('\|');
		var breakpointExp = new RegExp('(' + joinedBreakpointNames + ')$', 'gi');
		var behaviorExp = new RegExp('(' + joinedBehaviors + ')$', 'gi');

		var behaviorMatch = originPropName.match(behaviorExp);
		var behavior = behaviorMatch ? behaviorMatch[0] : '';
		var breakpointMatch = originPropName.replace(behavior, '').match(breakpointExp);
		var breakpointName = breakpointMatch ? breakpointMatch[0] : '';
		var purePropName = originPropName.replace(breakpointName, '').replace(behavior, '');

		/**
		* Get normalized breakpoint name.
		* When a breakpoint name is a part of the prop name, covert it first letter
		* to lowercase to match the layout options. Otherwise, take the default
		* breakpoint name.
		*/
		var normalizedBreakpointName = breakpointName ? toLowerCaseFirst(breakpointName) : src_Layout.defaultBreakpointName;

		var isDefaultBreakpoint = normalizedBreakpointName === src_Layout.defaultBreakpointName;

		return {
		originPropName: originPropName,
		purePropName: purePropName,
		behavior: behavior ? toLowerCaseFirst(behavior) : src_Layout.defaultBehavior,
		breakpoint: {
		name: normalizedBreakpointName,
		isDefault: isDefaultBreakpoint
		}
		};
		}
		// CONCATENATED MODULE: ./src/utils/strings/parsePropName/index.js


		// CONCATENATED MODULE: ./src/utils/strings/toDashedString/toDashedString.js
		function toDashedString(str) {
		return str.replace(/[A-Z]/g, function (capitalLetter) {
		return ("-" + capitalLetter).toLowerCase();
		});
		}
		// CONCATENATED MODULE: ./src/utils/strings/toDashedString/index.js


		// CONCATENATED MODULE: ./src/utils/styles/createMediaQuery/createMediaQuery.js
		var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();





		var shouldAppendProp = function shouldAppendProp(propName, behavior) {
		var _propName$split = propName.split('-'),
		_propName$split2 = _slicedToArray(_propName$split, 2),
		prefix = _propName$split2[0],
		splitPropName = _propName$split2[1];

		var isDimensionalProp = ['height', 'width'].includes(splitPropName);

		if (!isDimensionalProp) {
		return true;
		}

		return prefix === 'min' && ['up', 'only'].includes(behavior) \|\| prefix === 'max' && ['down', 'only'].includes(behavior);
		};

		function createMediaQuery(breakpoint, behavior) {
		return Object.entries(breakpoint).map(function (_ref) {
		var _ref2 = _slicedToArray(_ref, 2),
		propName = _ref2[0],
		propValue = _ref2[1];

		return [toDashedString(propName), propValue];
		}).filter(function (_ref3) {
		var _ref4 = _slicedToArray(_ref3, 1),
		dashedPropName = _ref4[0];

		return shouldAppendProp(dashedPropName, behavior);
		}).map(function (_ref5) {
		var _ref6 = _slicedToArray(_ref5, 2),
		dashedPropName = _ref6[0],
		propValue = _ref6[1];

		return '(' + dashedPropName + ':' + String(transformNumeric(propValue)) + ')';
		}).join(' and ');
		}
		// CONCATENATED MODULE: ./src/utils/styles/createMediaQuery/index.js


		// CONCATENATED MODULE: ./src/utils/styles/applyStyles/applyStyles.js





		var applyStyles_createStyleString = function createStyleString(propsList, propValue, breakpoint, behavior) {
		var styleProps = propsList.map(function (propName) {
		return propName + ':' + String(propValue) + ';';
		}).join('');

		var breakpointOptions = src_Layout.getBreakpoint(breakpoint.name);

		/**
		* Wrap CSS rule in a media query only if its prop includes
		* a breakpoint and behavior different than the default ones.
		*/
		var shouldWrapInMediaQuery = breakpointOptions && !(breakpoint.isDefault && behavior === src_Layout.defaultBehavior);

		return shouldWrapInMediaQuery ? '@media ' + createMediaQuery(breakpointOptions, behavior) + ' {' + styleProps + '}' : styleProps;
		};

		function applyStyles(pristineProps) {
		return Object.keys(pristineProps)
		/* Parse each prop to include "breakpoint" and "behavior" */
		.map(parsePropName)
		/* Filter out props that are not included in prop aliases */
		.filter(function (_ref) {
		var purePropName = _ref.purePropName;
		return const_propAliases.hasOwnProperty(purePropName);
		})
		/* Filter out props with "undefined" or "null" as value */
		.filter(function (_ref2) {
		var originPropName = _ref2.originPropName;
		return !!pristineProps[originPropName];
		})
		/* Map each prop to a CSS string */
		.map(function (_ref3) {
		var purePropName = _ref3.purePropName,
		originPropName = _ref3.originPropName,
		breakpoint = _ref3.breakpoint,
		behavior = _ref3.behavior;
		var _propAliases$pureProp = const_propAliases[purePropName],
		props = _propAliases$pureProp.props,
		transformValue = _propAliases$pureProp.transformValue;

		var propValue = pristineProps[originPropName];
		var transformedPropValue = transformValue ? transformValue(propValue) : propValue;

		return applyStyles_createStyleString(props, transformedPropValue, breakpoint, behavior);
		}).join(' ');
		}
		// CONCATENATED MODULE: ./src/utils/styles/applyStyles/index.js


		// CONCATENATED MODULE: ./src/components/Box.jsx
		var _templateObject = _taggedTemplateLiteral(['\n ', ';\n display: ', ';\n'], ['\n ', ';\n display: ', ';\n']);

		function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }




		var Box = external_styled_components_default.a.div(_templateObject, applyStyles, function (_ref) {
		var flex = _ref.flex,
		inline = _ref.inline;
		return flex && (inline ? 'inline-flex' : 'flex');
		});

		/* harmony default export */ var components_Box = (Box);
		// EXTERNAL MODULE: external "react"
		var external_react_ = __webpack_require__(0);
		var external_react_default = /#__PURE__/__webpack_require__.n(external_react_);

		// CONCATENATED MODULE: ./src/utils/strings/sanitizeTemplateString/sanitizeTemplateString.js


		/**
		* Returns an array of unique normalized grid areas
		* from the given template string.
		*/
		var sanitizeTemplateString = compose(
		/* Deduplicates area strings */
		function (list) {
		return Array.from(new Set(list));
		},

		/* Filters out empty area strings */
		function (arr) {
		return arr.filter(Boolean);
		},

		/* Splits into a list of areas */
		function (str) {
		return str.split(' ');
		},

		/* Deduplicates multiple spaces */
		function (str) {
		return str.replace(/\s+/g, ' ');
		},

		/* Replaces newlines and single quotes with spaces */
		function (str) {
		return str.replace(/\r?\n\|\'+/g, ' ');
		});

		/* harmony default export */ var sanitizeTemplateString_sanitizeTemplateString = (sanitizeTemplateString);
		// CONCATENATED MODULE: ./src/utils/strings/sanitizeTemplateString/index.js


		// CONCATENATED MODULE: ./src/utils/templates/generateAreasList/generateAreasList.js






		function generateAreasList(props) {
		var areasList = Object.keys(props).reduce(function (acc, propName) {
		var _parsePropName = parsePropName(propName),
		breakpoint = _parsePropName.breakpoint,
		behavior = _parsePropName.behavior;

		var templateAreas = sanitizeTemplateString_sanitizeTemplateString(props[propName]);

		/*
		TODO:
		maybe the next line is something to extract into the composition chain
		as well right after the filterTemplateProps function?
		we could lose the ternary if we do that
		+ I think this function should assume that it gets perfectly valid input
		and leave the verification of that to someone else
		*/
		var nextAreas = acc.areas.concat(templateAreas);
		var nextTemplates = acc.templates.concat({
		breakpoint: src_Layout.getBreakpoint(breakpoint.name),
		behavior: behavior,
		areas: templateAreas
		});

		return {
		areas: nextAreas,
		templates: nextTemplates
		};
		}, {
		areas: [],
		templates: []
		});

		var areas = areasList.areas,
		templates = areasList.templates;


		return {
		areas: Array.from(new Set(areas)),
		templates: templates
		};
		}
		// CONCATENATED MODULE: ./src/utils/templates/generateAreasList/index.js


		// EXTERNAL MODULE: ./node_modules/react-responsive/dist/react-responsive.min.js
		var react_responsive_min = __webpack_require__(2);
		var react_responsive_min_default = /#__PURE__/__webpack_require__.n(react_responsive_min);

		// CONCATENATED MODULE: ./src/utils/strings/capitalize/capitalize.js
		function capitalize(str) {
		return str.replace(/^./, function (firstLetter) {
		return firstLetter.toUpperCase();
		});
		}
		// CONCATENATED MODULE: ./src/utils/strings/capitalize/index.js


		// CONCATENATED MODULE: ./src/utils/functions/pop/pop.js

		/**
		* Returns the shallow copy of the given array with
		* the last element removed.
		*/
		function pop(arr) {
		return arr.slice(0, arr.length - 1);
		}
		// CONCATENATED MODULE: ./src/utils/functions/pop/index.js


		// CONCATENATED MODULE: ./src/utils/functions/when/when.js
		function when(predicate, whenTrueFunc) {
		return function (args) {
		return predicate(args) ? whenTrueFunc(args) : args;
		};
		}
		// CONCATENATED MODULE: ./src/utils/functions/when/index.js


		// CONCATENATED MODULE: ./src/utils/functions/spread/spread.js


		function spread(func) {
		return function (args) {
		return func.apply(null, args);
		};
		}
		// CONCATENATED MODULE: ./src/utils/functions/spread/index.js


		// CONCATENATED MODULE: ./src/utils/strings/getPrefix/getPrefix.js
		function getPrefix(string) {
		var prompt = string.match(/^min\|max/);
		return prompt && prompt[0];
		}
		// CONCATENATED MODULE: ./src/utils/strings/getPrefix/index.js


		// CONCATENATED MODULE: ./src/utils/breakpoints/mergeBreakpoints/mergeBreakpoints.js
		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; };

		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 mergeBreakpoints(breakpointA, breakpointB, includesArea) {
		var prevBehavior = breakpointB.behavior;
		var nextBehavior = breakpointA.behavior;


		var wentUp = prevBehavior === 'up';
		var goesDown = nextBehavior === 'down';
		var behavesSame = prevBehavior === nextBehavior;
		var behavesInclusive = wentUp && goesDown;
		var shouldStretch = wentUp;

		var mergedBreakpoint = _extends({}, breakpointB, breakpointA);

		return Object.keys(mergedBreakpoint).reduce(function (acc, propName) {
		var nextValue = mergedBreakpoint[propName];
		var prefix = getPrefix(propName);

		if (propName === 'behavior') {
		if (!includesArea && shouldStretch) {
		nextValue = 'down';
		}
		}

		if (prefix === 'max') {
		if (!includesArea && shouldStretch) {
		var mirrorValue = breakpointA[propName.replace(/^max/, 'min')];
		nextValue = 'calc(' + transformNumeric(mirrorValue) + ' - 1px)';
		}
		}

		if (prefix === 'min') {
		if (includesArea) {
		if (behavesSame \|\| behavesInclusive) {
		nextValue = breakpointB[propName];
		}
		} else {
		if (shouldStretch) {
		nextValue = breakpointB[propName];
		}
		}
		}

		return _extends({}, acc, _defineProperty({}, propName, nextValue));
		}, {});
		}
		// CONCATENATED MODULE: ./src/utils/breakpoints/mergeBreakpoints/index.js


		// CONCATENATED MODULE: ./src/utils/breakpoints/openBreakpoint/openBreakpoint.js
		var openBreakpoint_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; };

		function openBreakpoint_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; }



		/**
		* Opens the given breakpoint.
		* A breakpoint is considered open when it has no upper boundary. For example,
		* a breakpoint that has "maxWidth: undefined" is the open breakpoint.
		*/

		function openBreakpoint(breakpoint) {
		return Object.keys(breakpoint).reduce(function (acc, key) {
		return openBreakpoint_extends({}, acc, openBreakpoint_defineProperty({}, key, getPrefix(key) === 'max' ? undefined : breakpoint[key]));
		}, {});
		}
		// CONCATENATED MODULE: ./src/utils/breakpoints/openBreakpoint/index.js


		// CONCATENATED MODULE: ./src/utils/breakpoints/shouldMergeBreakpoints/shouldMergeBreakpoints.js


		/**
		* Replaces the prefixes in a parameter name.
		* Allows strict comparison of same parameters with different prefixes.
		* Does not test for inclusion/notch.
		*
		* @example
		* neutralizeParamName('maxWidth') // "_width"
		* neutralizeParamName('minWidth') // "_width"
		*/
		var neutralizeParamName = function neutralizeParamName(paramName) {
		return paramName.replace(/^min\|max/, '_');
		};

		/**
		* Determines whether two given breakpoints can be merged.
		* Assures non-compatible breakpoints are not prompted to
		* be merged during the area params composition.
		*/

		function shouldCombineBreakpoints(breakpointA, breakpointB) {
		var allParams = Object.keys(breakpointA).concat(Object.keys(breakpointB));

		return allParams.every(function (pristineParamName, index) {
		var paramName = neutralizeParamName(pristineParamName);
		var prevParamName = neutralizeParamName(allParams[index - 1] \|\| paramName);

		return paramName === prevParamName;
		});
		}
		// CONCATENATED MODULE: ./src/utils/breakpoints/shouldMergeBreakpoints/index.js


		// CONCATENATED MODULE: ./src/utils/breakpoints/getAreaBreakpoints/getAreaBreakpoints.js
		var getAreaBreakpoints_slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

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

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

		function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

		function _toArray(arr) { return Array.isArray(arr) ? arr : Array.from(arr); }









		var updateWith = function updateWith(key, updateFunc) {
		return function (args) {
		var _args = _toArray(args),
		first = _args[0],
		rest = _args.slice(1); // eslint-disable-line


		return [updateFunc(args)].concat(_toConsumableArray(rest));
		};
		};

		var getAreaBreakpoints_createContext = function createContext(areaName) {
		return function (areaBreakpointsList, template, index, templates) {
		var isLastTemplate = index === templates.length - 1;
		var areas = template.areas,
		behavior = template.behavior,
		breakpoint = template.breakpoint;

		var includesArea = areas.includes(areaName);
		var prevAreaBreakpoint = areaBreakpointsList[areaBreakpointsList.length - 1];
		var nextAreaBreakpoint = getAreaBreakpoints_extends({}, breakpoint, {
		behavior: behavior
		});

		var _ref = prevAreaBreakpoint \|\| {},
		x = _ref.behavior,
		prevBreakpoint = _objectWithoutProperties(_ref, ['behavior']);

		var shouldMerge = prevAreaBreakpoint && shouldCombineBreakpoints(prevBreakpoint, breakpoint);

		var context = [nextAreaBreakpoint, prevAreaBreakpoint, includesArea, isLastTemplate, shouldMerge, areaBreakpointsList];

		return context;
		};
		};

		var canMergeBreakpoints = function canMergeBreakpoints(_ref2) {
		var _ref3 = getAreaBreakpoints_slicedToArray(_ref2, 5),
		_nextAreaBreakpoint = _ref3[0],
		_prevAreaBreakpoint = _ref3[1],
		_includesArea = _ref3[2],
		_isLastTemplate = _ref3[3],
		shouldMerge = _ref3[4];

		return shouldMerge;
		};

		var shouldOpenBreakpoint = function shouldOpenBreakpoint(_ref4) {
		var _ref5 = getAreaBreakpoints_slicedToArray(_ref4, 4),
		nextAreaBreakpoint = _ref5[0],
		_prevAreaBreakpoint = _ref5[1],
		_includesArea = _ref5[2],
		isLastTemplate = _ref5[3];

		return isLastTemplate && nextAreaBreakpoint.behavior === 'up';
		};

		var getAreaBreakpoints_updateBreakpointsList = function updateBreakpointsList(_ref6) {
		var _ref7 = getAreaBreakpoints_slicedToArray(_ref6, 6),
		nextAreaBreakpoint = _ref7[0],
		prevAreaBreakpoint = _ref7[1],
		includesArea = _ref7[2],
		_isLastTemplate = _ref7[3],
		shouldMerge = _ref7[4],
		areaBreakpointsList = _ref7[5];

		/* Fallback to an empty object when there is no previous breakpoint in the list */
		var _ref8 = prevAreaBreakpoint \|\| {},
		prevBehavior = _ref8.behavior;

		var nextBehavior = nextAreaBreakpoint.behavior;


		var wentUp = prevBehavior === 'up';
		var goesDown = nextBehavior === 'down';
		var behavesSame = prevBehavior === nextBehavior;
		var behavesInclusive = wentUp && goesDown;

		/* Alias for better readability */
		var shouldStretch = wentUp;
		var shouldReplaceLastArea = includesArea && (behavesSame \|\| behavesInclusive);

		if (!shouldMerge) {
		shouldReplaceLastArea = false;
		}

		var newBreakpoint = [nextAreaBreakpoint];

		if (!includesArea) {
		/**
		* When the area is stretched, append explicit "null" afterward
		* to prevent the stretched area from being treated as a sibling area
		* in any further calculations.
		*/
		newBreakpoint = shouldStretch ? [nextAreaBreakpoint, null] : [null];

		if (shouldStretch) {
		shouldReplaceLastArea = true;
		}
		}

		var targetList = shouldReplaceLastArea ? pop(areaBreakpointsList) : areaBreakpointsList;

		return targetList.concat(newBreakpoint);
		};

		var getAreaBreakpoints_getAreaBreakpoints = function getAreaBreakpoints(areaName, templates) {
		return templates.reduce(compose(getAreaBreakpoints_updateBreakpointsList, when(shouldOpenBreakpoint, updateWith('nextAreaBreakpoint', spread(openBreakpoint))), when(canMergeBreakpoints, updateWith('nextAreaBreakpoint', spread(mergeBreakpoints))), getAreaBreakpoints_createContext(areaName)), []);
		};

		/* harmony default export */ var breakpoints_getAreaBreakpoints_getAreaBreakpoints = (getAreaBreakpoints_getAreaBreakpoints);
		// CONCATENATED MODULE: ./src/utils/breakpoints/getAreaBreakpoints/index.js


		// CONCATENATED MODULE: ./src/utils/templates/generateComponents/generateComponents.js
		var generateComponents_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 generateComponents_templateObject = generateComponents_taggedTemplateLiteral(['\n grid-area: ', ';\n'], ['\n grid-area: ', ';\n']);

		function generateComponents_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 generateComponents_taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

		function generateComponents_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; }








		/**
		* A high-order component that wraps the given area component in a placeholder.
		* This is used for conditional components, where placeholder component is rendered
		* until the condition for the area component is met (i.e. breakpoint).
		*/
		var generateComponents_withPlaceholder = function withPlaceholder(AreaComponent, areaParams) {
		var Placeholder = function Placeholder(_ref) {
		var children = _ref.children,
		restProps = generateComponents_objectWithoutProperties(_ref, ['children']);

		return areaParams.filter(Boolean).reduce(function (components, breakpointOptions, index) {
		var behavior = breakpointOptions.behavior,
		breakpointProps = generateComponents_objectWithoutProperties(breakpointOptions, ['behavior']);

		return components.concat(external_react_["createElement"](
		react_responsive_min_default.a,
		generateComponents_extends({}, restProps, breakpointProps, {
		key: AreaComponent.displayName + '_' + index,
		component: AreaComponent
		}),
		children
		));
		}, []);
		};

		Placeholder.displayName = 'Placeholder(' + AreaComponent.displayName + ')';

		return Placeholder;
		};

		var generateComponents_createAreaComponent = function createAreaComponent(areaName) {
		return external_styled_components_default()(components_Box)(generateComponents_templateObject, areaName);
		};

		/**
		* Returns a map of React components based on the given grid areas
		* in the given template definitions.
		*/
		function generateComponents(_ref2) {
		var areas = _ref2.areas,
		templates = _ref2.templates;

		return areas.reduce(function (components, areaName) {
		var areaParams = breakpoints_getAreaBreakpoints_getAreaBreakpoints(areaName, templates);
		var shouldAlwaysRender = areaParams.length === 1 && areaParams.every(function (breakpoint) {
		return !breakpoint.minWidth && !breakpoint.maxWidth;
		});

		var AreaComponent = generateComponents_createAreaComponent(areaName);
		var capitalizedAreaName = capitalize(areaName);
		AreaComponent.displayName = capitalizedAreaName;

		var WrappedComponent = shouldAlwaysRender ? AreaComponent : generateComponents_withPlaceholder(AreaComponent, areaParams);

		return generateComponents_extends({}, components, generateComponents_defineProperty({}, capitalizedAreaName, WrappedComponent));
		}, {});
		}
		// CONCATENATED MODULE: ./src/utils/templates/generateComponents/index.js


		// CONCATENATED MODULE: ./src/utils/templates/parseTemplates/filterTemplateProps.js
		var filterTemplateProps_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; };

		function filterTemplateProps_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; }



		/**
		* Accepts a props object and filters it to include
		* only template-related prop:value pairs.
		*/
		var filterTemplateProps_filterTemplateProps = function filterTemplateProps(props) {
		return Object.keys(props).filter(function (propName) {
		var _parsePropName = parsePropName(propName),
		purePropName = _parsePropName.purePropName;

		return purePropName === 'template';
		}).reduce(function (acc, propName) {
		return filterTemplateProps_extends({}, acc, filterTemplateProps_defineProperty({}, propName, props[propName]));
		}, {});
		};

		/* harmony default export */ var parseTemplates_filterTemplateProps = (filterTemplateProps_filterTemplateProps);
		// CONCATENATED MODULE: ./src/utils/templates/parseTemplates/parseTemplates.js





		var parseTemplates = compose(generateComponents, generateAreasList, parseTemplates_filterTemplateProps);

		/* harmony default export */ var parseTemplates_parseTemplates = (parseTemplates);
		// CONCATENATED MODULE: ./src/utils/templates/parseTemplates/index.js


		// CONCATENATED MODULE: ./src/components/Composition.jsx
		var Composition_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 Composition_templateObject = Composition_taggedTemplateLiteral(['\n ', ';\n display: ', ';\n'], ['\n ', ';\n display: ', ';\n']);

		function Composition_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

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

		function Composition_taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }






		var CompositionWrapper = external_styled_components_default.a.div(Composition_templateObject, applyStyles, function (_ref) {
		var inline = _ref.inline;
		return inline ? 'inline-grid' : 'grid';
		});

		var Composition_Composition = function (_React$Component) {
		_inherits(Composition, _React$Component);

		function Composition(props) {
		Composition_classCallCheck(this, Composition);

		var _this = _possibleConstructorReturn(this, (Composition.__proto__ \|\| Object.getPrototypeOf(Composition)).call(this, props));

		_this.areaComponents = parseTemplates_parseTemplates(props);
		return _this;
		}

		Composition_createClass(Composition, [{
		key: 'render',
		value: function render() {
		var areaComponents = this.areaComponents;
		var children = this.props.children;

		var hasAreaComponents = Object.keys(areaComponents).length > 0;

		return external_react_default.a.createElement(
		CompositionWrapper,
		this.props,
		hasAreaComponents ? children(areaComponents) : children
		);
		}
		}]);

		return Composition;
		}(external_react_default.a.Component);

		/* harmony default export */ var components_Composition = (Composition_Composition);
		// EXTERNAL MODULE: ./node_modules/prop-types/index.js
		var prop_types = __webpack_require__(3);
		var prop_types_default = /#__PURE__/__webpack_require__.n(prop_types);

		// CONCATENATED MODULE: ./src/utils/breakpoints/closeBreakpoint/closeBreakpoint.js
		var closeBreakpoint_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 closeBreakpoint_slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

		function closeBreakpoint_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; }



		/**
		* Accepts a breakpoint and returns a new breakpoint where
		* all the "min" properties of the original breakpoint are
		* flipped into the "max" properties. Any "max" properties
		* of the original breakpoint are omitted.
		*
		* @example
		* flipBreakpoint({ minWidth: 500, maxWidth: 600 })
		* // { maxWidth: 499 }
		*
		* @param {Breakpoint} breakpoint
		* @returns {Breakpoint}
		*/
		function flipBreakpoint(breakpoint) {
		return Object.keys(breakpoint)
		/* Store the prefix of each property */
		.map(function (propName) {
		return [getPrefix(propName), propName];
		})
		/* Omit all properties starting from "max" */
		.filter(function (_ref) {
		var _ref2 = closeBreakpoint_slicedToArray(_ref, 1),
		prefix = _ref2[0];

		return prefix !== 'max';
		})
		/* Reduce to a new breakpoint */
		.reduce(function (flippedBreakpoint, _ref3) {
		var _ref4 = closeBreakpoint_slicedToArray(_ref3, 2),
		prefix = _ref4[0],
		propName = _ref4[1];

		var hasMinPrefix = prefix === 'min';
		var nextPropName = hasMinPrefix ? propName.replace(/^min/, 'max') : propName;

		/**
		* Subtracts 1 from the edge to not include the area at the beginning
		* of the breakpoint.
		*
		* @todo
		* How is "parseFloat" going to work with non-dimensional options?
		* (i.e. aspectRatio)
		*/
		var nextValue = hasMinPrefix ? parseFloat(breakpoint[propName]) - 1 : breakpoint[propName];

		return closeBreakpoint_extends({}, flippedBreakpoint, closeBreakpoint_defineProperty({}, nextPropName, nextValue));
		}, {});
		}
		// CONCATENATED MODULE: ./src/utils/breakpoints/closeBreakpoint/index.js


		// CONCATENATED MODULE: ./src/components/Only.jsx
		function Only_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 breakpointNames = src_Layout.getBreakpointNames();

		var Only_wrapInQuery = function wrapInQuery(children, breakpointOptions, containerProps) {
		return external_react_default.a.createElement(
		react_responsive_min_default.a,
		breakpointOptions,
		external_react_default.a.createElement(
		components_Box,
		containerProps,
		children
		)
		);
		};

		var Only_Only = function Only(_ref) {
		var children = _ref.children,
		explicitBreakpointName = _ref.for,
		fromBreakpointName = _ref.from,
		toBreakpointName = _ref.to,
		restProps = Only_objectWithoutProperties(_ref, ['children', 'for', 'from', 'to']);

		/* Render on explicit breakpoint */
		if (explicitBreakpointName) {
		return Only_wrapInQuery(children, src_Layout.getBreakpoint(explicitBreakpointName), restProps);
		}

		var fromBreakpoint = src_Layout.getBreakpoint(fromBreakpointName);
		var toBreakpoint = src_Layout.getBreakpoint(toBreakpointName);

		/* High-pass, __/-- */
		if (fromBreakpoint && !toBreakpoint) {
		return Only_wrapInQuery(children, openBreakpoint(fromBreakpoint), restProps);
		}

		/* Low-pass, --\__ */
		if (toBreakpoint && !fromBreakpoint) {
		return Only_wrapInQuery(children, flipBreakpoint(toBreakpoint), restProps);
		}

		/**
		* @todo
		* Add inclusive and notch behavior.
		*/
		return external_react_default.a.createElement(
		'p',
		null,
		'Oops'
		);
		};

		Only_Only.propTypes = {
		/**
		* @todo
		* Support an Object as the value to provide a
		* custom breakpoint (not listed in `Layout.breakpoints`).
		*/
		for: prop_types_default.a.oneOf(breakpointNames),
		from: prop_types_default.a.oneOf(breakpointNames),
		to: prop_types_default.a.oneOf(breakpointNames)
		};

		/* harmony default export */ var components_Only = (Only_Only);
		// CONCATENATED MODULE: ./src/index.js
		/* concated harmony reexport Box */__webpack_require__.d(__webpack_exports__, "Box", function() { return components_Box; });
		/* concated harmony reexport Composition */__webpack_require__.d(__webpack_exports__, "Composition", function() { return components_Composition; });
		/* concated harmony reexport Only */__webpack_require__.d(__webpack_exports__, "Only", function() { return components_Only; });
		/* concated harmony reexport default */__webpack_require__.d(__webpack_exports__, "default", function() { return src_Layout; });









		/***/ })
		/******/ ]);
		});
		//# sourceMappingURL=index.js.map

package.json

		{
		"name": "atomic-layout",
		"version": "0.4.2",
		"version": "0.4.3",
		"description": "A single component to distribute a spacial relation in your layouts using CSS Grid.",
		@@ -47,3 +47,3 @@ "keywords": [
		"path": "./index.js",
		"maxSize": "8 kB"
		"maxSize": "25 kB"
		}
		@@ -50,0 +50,0 @@ ],

README.md

		@@ -36,5 +36,5 @@ <p align="center">

		Think of how you create layouts today. Most likely you have a set of reusable units $atoms$ to combine them into functional compositions. However, layout is also about spacing and positioning. So you manage CSS properties to ensure your layout is just right. Guess what, not only that results into your writing more CSS, but that also makes your atoms _contextual_, thus _non-predictable_.
		Think of how we create layouts today. Most likely we define a set of reusable units $atoms$ to combine them into functional compositions. But how do we handle spacing that should describe the position of our units? Usually, we manage CSS properties of those units to make sure the spacing is just right. Not only that results into writing redundant CSS, but it also makes our atoms contextual and, thus, non-maintainable.

		Atomic layout solves this problem by introducing a dedicated layer responsible for spacial distribution in your layouts. That allows to reuse atom components in any layout possible without mutating those composites.
		Atomic layout solves this problem by exposing a dedicated layer responsible for spacial distribution in a layout, or any of its parts. That allows to reuse atom components in any layout possible without mutating them.

		@@ -47,3 +47,3 @@ ## Install

		> Requires to have [React](https://github.com/facebook/react) (15.0+) and [styled-components](https://github.com/styled-components/styled-components) (3.0+) as the peer dependencies.
		> Requires [React](https://github.com/facebook/react) (15.0+) and [styled-components](https://github.com/styled-components/styled-components) (3.0+) as the peer dependencies.

		@@ -50,0 +50,0 @@ ## Documentation

atomic-layout - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics