From 45be2018b8b20624bad0ffc6fe3dc9ba3ad58ebc Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Thu, 26 Jul 2018 14:16:52 -0700 Subject: [PATCH] Revert "Add displayName to all components with babel plugin" --- .babelrc | 6 +- .eslintrc.json | 5 +- docs/bundle.js | 40 +- docs/components/index.html | 947 +----------- docs/demos/index.html | 598 +------- docs/index.html | 947 +----------- docs/props/index.html | 700 --------- docs/sandbox/index.html | 596 +------- examples/_app.js | 8 +- examples/doc-components/Styles.js | 25 + examples/props.js | 113 -- lib/postcss-plugin.js | 161 -- package-lock.json | 2328 ++++------------------------- package.json | 19 +- rollup.config.js | 7 +- script/build-css | 12 - src/Avatar.js | 4 +- src/Block.js | 66 +- src/Box.js | 2 +- src/BranchName.js | 4 +- src/Button.js | 4 +- src/CircleBadge.js | 4 +- src/CircleOcticon.js | 4 +- src/CounterLabel.js | 4 +- src/Details.js | 4 +- src/DonutChart.js | 5 +- src/Dropdown.js | 4 +- src/Flash.js | 4 +- src/FlexContainer.js | 31 +- src/FlexItem.js | 4 +- src/Label.js | 4 +- src/Link.js | 4 +- src/OcticonButton.js | 4 +- src/StateLabel.js | 4 +- src/StyleProvider.js | 7 - src/Text.js | 38 +- src/TextInput.js | 4 +- src/Tooltip.js | 4 +- src/UnderlineNav.js | 4 +- src/UnderlineNavLink.js | 4 +- src/__tests__/Avatar.js | 6 +- src/__tests__/Block.js | 55 +- src/__tests__/Box.js | 37 +- src/__tests__/Caret.js | 15 +- src/__tests__/FlexContainer.js | 46 +- src/__tests__/Heading.js | 28 +- src/__tests__/StyleProvider.js | 20 - src/__tests__/Text.js | 18 +- src/__tests__/mapping.js | 33 - src/__tests__/props.js | 19 +- src/css.js | 5 - src/index.js | 2 - src/mappers.js | 105 -- src/props.js | 87 +- src/theme.js | 9 +- src/utils/test-matchers.js | 30 - system.css | 590 -------- 57 files changed, 631 insertions(+), 7207 deletions(-) delete mode 100644 docs/props/index.html create mode 100644 examples/doc-components/Styles.js delete mode 100644 examples/props.js delete mode 100644 lib/postcss-plugin.js delete mode 100755 script/build-css delete mode 100644 src/StyleProvider.js delete mode 100644 src/__tests__/StyleProvider.js delete mode 100644 src/__tests__/mapping.js delete mode 100644 src/css.js delete mode 100644 src/mappers.js delete mode 100644 src/utils/test-matchers.js delete mode 100644 system.css diff --git a/.babelrc b/.babelrc index 8a6fe3f91f4..845c3cf4d75 100644 --- a/.babelrc +++ b/.babelrc @@ -1,7 +1,3 @@ { - "presets": ["env", "stage-0", "react"], - "plugins": [ - "preval", - "add-react-displayname" - ] + "presets": ["env", "stage-0", "react"] } diff --git a/.eslintrc.json b/.eslintrc.json index 8f94bc2e542..11bfde85dac 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -3,8 +3,5 @@ "plugin:github/es6", "plugin:github/react", "plugin:jsx-a11y/recommended" - ], - "rules": { - "no-unused-vars": ["error", {"args": "after-used"}] - } + ] } diff --git a/docs/bundle.js b/docs/bundle.js index 44d2273d407..434bbd85b61 100644 --- a/docs/bundle.js +++ b/docs/bundle.js @@ -1,4 +1,4 @@ -!function(e){var t={};function n(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(r,i,function(t){return e[t]}.bind(null,i));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/primer-react/",n(n.s=569)}([function(e,t,n){"use strict";e.exports=n(523)},function(e,t,n){e.exports=n(509)()},function(e,t,n){e.exports=n(513)()},function(e,t,n){"use strict";t.__esModule=!0;var r=function(e){return e&&e.__esModule?e:{default:e}}(n(74));t.default=r.default||function(e){for(var t=1;t=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}},function(e,t,n){e.exports=n(515)()},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(462);Object.defineProperty(t,"Library",{enumerable:!0,get:function(){return r.Library}}),Object.defineProperty(t,"Example",{enumerable:!0,get:function(){return r.Example}}),Object.defineProperty(t,"Detail",{enumerable:!0,get:function(){return r.Detail}}),Object.defineProperty(t,"Head",{enumerable:!0,get:function(){return r.Head}});var i=n(447);Object.defineProperty(t,"LiveEditor",{enumerable:!0,get:function(){return E(i).default}});var o=n(99);Object.defineProperty(t,"Frame",{enumerable:!0,get:function(){return E(o).default}});var a=n(98);Object.defineProperty(t,"Catch",{enumerable:!0,get:function(){return E(a).default}});var s=n(378);Object.defineProperty(t,"XRay",{enumerable:!0,get:function(){return E(s).default}});var u=n(376);Object.defineProperty(t,"PropsForm",{enumerable:!0,get:function(){return E(u).default}});var c=n(375);Object.defineProperty(t,"Responsive",{enumerable:!0,get:function(){return E(c).default}});var l=n(374);Object.defineProperty(t,"Cartesian",{enumerable:!0,get:function(){return E(l).default}});var f=n(373);Object.defineProperty(t,"Matrix",{enumerable:!0,get:function(){return E(f).default}});var h=n(372);Object.defineProperty(t,"Markdown",{enumerable:!0,get:function(){return E(h).default}});var p=n(267);Object.defineProperty(t,"Diff",{enumerable:!0,get:function(){return E(p).default}});var d=n(266);Object.defineProperty(t,"Debug",{enumerable:!0,get:function(){return d.Debug}}),Object.defineProperty(t,"withDebug",{enumerable:!0,get:function(){return d.withDebug}});var m=n(264);Object.defineProperty(t,"TypeScale",{enumerable:!0,get:function(){return E(m).default}});var g=n(263);Object.defineProperty(t,"Color",{enumerable:!0,get:function(){return E(g).default}});var v=n(250);Object.defineProperty(t,"Style",{enumerable:!0,get:function(){return E(v).default}});var y=n(249);Object.defineProperty(t,"Font",{enumerable:!0,get:function(){return E(y).default}});var b=n(29);Object.defineProperty(t,"UI",{enumerable:!0,get:function(){return E(b).default}});var x=n(246);Object.defineProperty(t,"State",{enumerable:!0,get:function(){return E(x).default}});var w=n(245);Object.defineProperty(t,"Colorable",{enumerable:!0,get:function(){return E(w).default}});var k=n(237);function E(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"Fetch",{enumerable:!0,get:function(){return E(k).default}})},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.common=t.spacing=t.padding=t.margin=t.fontSize=t.flex=t.display=t.color=t.borderRadius=t.borderColor=t.bg=t.position=void 0;var r=l(n(103)),i=l(n(3)),o=l(n(15)),a=l(n(5)),s=l(n(1)),u=l(n(34)),c=n(72);function l(e){return e&&e.__esModule?e:{default:e}}var f=u.default.colors,h=u.default.fontSizes,p=u.default.radii,d=f.bg,m=f.border,g=(0,a.default)(f,["bg","border"]),v=(0,o.default)(g).concat(function(e){return(0,o.default)(e).reduce(function(t,n){var i=e[n];return Array.isArray(i)&&t.push.apply(t,(0,r.default)(i.map(function(e,t){return[n,t].join(".")}))),t},[])}(g)),y=(t.position=(0,c.createResponsiveMapper)(["position"],c.classPattern,{position:s.default.oneOf(["relative","absolute","fixed"])}),t.bg=(0,c.createClassMapper)("bg",S(d,function(e){return"bg-"+e}),s.default.oneOf((0,o.default)(d)))),b=(t.borderColor=(0,c.createClassMapper)("borderColor",function(e){return"border-"+e},s.default.oneOf((0,o.default)(m))),t.borderRadius=(0,c.createResponsiveMapper)(["borderRadius"],function(e){return(0,c.classPattern)((0,i.default)({},e,{prop:"round"}))},{borderRadius:(0,c.oneOrMoreOf)(s.default.oneOf(C(0,p.length-1)))}),t.color=(0,c.createClassMapper)("color",S(g,function(e){return"color-"+e}),s.default.oneOf(v))),x=t.display=(0,c.createResponsiveMapper)(["display"],function(e){return(0,c.classPattern)((0,i.default)({},e,{prop:"d"}))},{display:(0,c.oneOrMoreOf)(s.default.oneOf(["block","inline","inline-block","flex","inline-flex","none","table","table-cell"]))}),w=(0,c.createResponsiveMapper)(["wrap","direction","justifyContent","alignItems","alignContent"],function(e){var t=e.prop,n=(0,a.default)(e,["prop"]);return n.prop={alignContent:"flex-content",alignItems:"flex-items",justifyContent:"flex-justify"}[t]||"flex",(0,c.classPattern)(n)},{alignContent:(0,c.oneOrMoreOf)(s.default.oneOf(["start","end","center","around","stretch"])),alignItems:(0,c.oneOrMoreOf)(s.default.oneOf(["start","end","center","baseline","stretch"])),direction:(0,c.oneOrMoreOf)(s.default.oneOf(["column","row","row-reverse"])),justifyContent:(0,c.oneOrMoreOf)(s.default.oneOf(["start","end","center","between","around"])),wrap:(0,c.oneOrMoreOf)(s.default.oneOf(["wrap","nowrap"]))});t.flex=w;t.fontSize=(0,c.createResponsiveMapper)(["fontSize"],function(e){return(0,c.classPattern)((0,i.default)({},e,{prop:"f"}))},{fontSize:(0,c.oneOrMoreOf)(s.default.oneOf(C(0,h.length-1)))});var k=t.margin=(0,c.createResponsiveMapper)(["m","mt","mr","mb","ml","mx","my"]),E=t.padding=(0,c.createResponsiveMapper)(["p","pt","pr","pb","pl","px","py"]),_=t.spacing=(0,c.composeWithPropTypes)(k,E);t.common=(0,c.composeWithPropTypes)(y,b,x,w,_);function S(e,t){return function(n){var r=Array.isArray(e[n])?n+".5":n;return t(r.replace(/\./g,"-"))}}function C(e,t){for(var n=[],r=e;r<=t;r++)n.push(r);return n}},function(e,t,n){var r; +!function(e){var t={};function n(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(r,i,function(t){return e[t]}.bind(null,i));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="/primer-react/",n(n.s=567)}([function(e,t,n){"use strict";e.exports=n(521)},function(e,t,n){e.exports=n(507)()},function(e,t,n){e.exports=n(511)()},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(34);Object.defineProperty(t,"theme",{enumerable:!0,get:function(){return N(r).default}});var i=n(101);Object.defineProperty(t,"Block",{enumerable:!0,get:function(){return N(i).default}});var a=n(165);Object.defineProperty(t,"Box",{enumerable:!0,get:function(){return N(a).default}});var o=n(499);Object.defineProperty(t,"Avatar",{enumerable:!0,get:function(){return N(o).default}});var s=n(47);Object.defineProperty(t,"Button",{enumerable:!0,get:function(){return N(s).default}});var u=n(498);Object.defineProperty(t,"ButtonDanger",{enumerable:!0,get:function(){return N(u).default}});var c=n(497);Object.defineProperty(t,"ButtonPrimary",{enumerable:!0,get:function(){return N(c).default}});var l=n(496);Object.defineProperty(t,"ButtonOutline",{enumerable:!0,get:function(){return N(l).default}});var f=n(495);Object.defineProperty(t,"ButtonLink",{enumerable:!0,get:function(){return N(f).default}});var h=n(494);Object.defineProperty(t,"OcticonButton",{enumerable:!0,get:function(){return N(h).default}});var p=n(100);Object.defineProperty(t,"Caret",{enumerable:!0,get:function(){return N(p).default}});var d=n(488);Object.defineProperty(t,"CaretBox",{enumerable:!0,get:function(){return N(d).default}});var m=n(487);Object.defineProperty(t,"CircleOcticon",{enumerable:!0,get:function(){return N(m).default}});var g=n(486);Object.defineProperty(t,"CircleBadge",{enumerable:!0,get:function(){return N(g).default}});var y=n(164);Object.defineProperty(t,"Details",{enumerable:!0,get:function(){return N(y).default}});var v=n(485);Object.defineProperty(t,"Dropdown",{enumerable:!0,get:function(){return N(v).default}});var b=n(484);Object.defineProperty(t,"DonutChart",{enumerable:!0,get:function(){return N(b).default}});var x=n(163);Object.defineProperty(t,"DonutSlice",{enumerable:!0,get:function(){return N(x).default}});var w=n(483);Object.defineProperty(t,"FlexContainer",{enumerable:!0,get:function(){return N(w).default}});var E=n(482);Object.defineProperty(t,"FlexItem",{enumerable:!0,get:function(){return N(E).default}});var k=n(481);Object.defineProperty(t,"TextInput",{enumerable:!0,get:function(){return N(k).default}});var _=n(480);Object.defineProperty(t,"Heading",{enumerable:!0,get:function(){return N(_).default}});var S=n(479);Object.defineProperty(t,"Label",{enumerable:!0,get:function(){return N(S).default}});var C=n(478);Object.defineProperty(t,"BranchName",{enumerable:!0,get:function(){return N(C).default}});var A=n(477);Object.defineProperty(t,"Link",{enumerable:!0,get:function(){return N(A).default}});var D=n(476);Object.defineProperty(t,"MergeStatus",{enumerable:!0,get:function(){return N(D).default}});var T=n(162);Object.defineProperty(t,"Text",{enumerable:!0,get:function(){return N(T).default}});var O=n(475);Object.defineProperty(t,"Tooltip",{enumerable:!0,get:function(){return N(O).default}});var P=n(474);Object.defineProperty(t,"CounterLabel",{enumerable:!0,get:function(){return N(P).default}});var M=n(473);Object.defineProperty(t,"Flash",{enumerable:!0,get:function(){return N(M).default}});var F=n(161);Object.defineProperty(t,"StateLabel",{enumerable:!0,get:function(){return N(F).default}});var j=n(160);Object.defineProperty(t,"UnderlineNav",{enumerable:!0,get:function(){return N(j).default}});var L=n(472);function N(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"UnderlineNavLink",{enumerable:!0,get:function(){return N(L).default}})},function(e,t,n){"use strict";t.__esModule=!0;var r=function(e){return e&&e.__esModule?e:{default:e}}(n(72));t.default=r.default||function(e){for(var t=1;t=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.mapAllProps=t.mapDisplayProps=t.mapFlexProps=t.mapWhitespaceProps=t.flexProps=t.paddingProps=t.marginProps=t.createMapperWithPropTypes=t.oneOrMoreNumbers=t.oneOrMoreOf=t.breakpoints=void 0;var r=o(n(4));t.stylizer=function(e){return function(t){var n=(0,r.default)({},t);return n.style=e.reduce(function(e,r){return r in t&&(e[r]=t[r],delete n[r]),e},t.style||{}),n}};var i=o(n(1)),a=o(n(500));function o(e){return e&&e.__esModule?e:{default:e}}var s=t.breakpoints=[null,"sm","md","lg","xl"],u=t.oneOrMoreOf=function(e){return i.default.oneOfType([e,i.default.arrayOf(e)])},c=t.oneOrMoreNumbers=u(i.default.number),l={justifyContent:"justify",alignItems:"items",alignContent:"content"},f=t.createMapperWithPropTypes=function(e,t){var n=(0,a.default)({breakpoints:s,props:e,getter:function(e){return function(e,t,n,r){var i="";switch(r){case"flex":i=["flex",e,l[t],n].join("-");break;case"display":i=["d",e,n].join("-");break;default:i=[t,e,n].join("-")}return i.replace(/\-\-+/g,"-")}(e.breakpoint,e.prop,e.value,t)}});return n.propTypes=e.reduce(function(e,t){return e[t]=c,e},{}),n},h=t.marginProps=["m","mt","mr","mb","ml","mx","my"],p=t.paddingProps=["p","pt","pr","pb","pl","px","py"],d=t.flexProps=["wrap","direction","justifyContent","alignItems","alignContent"],m=t.mapWhitespaceProps=f(h.concat(p)),g=t.mapFlexProps=f(d,"flex"),y=t.mapDisplayProps=f(["display"],"display");t.mapAllProps=function(e){return m(y(g(e)))}},function(e,t,n){var r; /*! Copyright (c) 2016 Jed Watson. Licensed under the MIT License (MIT), see @@ -9,39 +9,39 @@ Licensed under the MIT License (MIT), see http://jedwatson.github.io/classnames */ -!function(){"use strict";var n={}.hasOwnProperty;function i(){for(var e=[],t=0;t1&&void 0!==arguments[1]?arguments[1]:"",n=e&&e.split("/")||[],r=t&&t.split("/")||[],i=e&&p(e),o=t&&p(t),a=i||o;if(e&&p(e)?r=n:n.length&&(r.pop(),r=r.concat(n)),!r.length)return"/";var s=void 0;if(r.length){var u=r[r.length-1];s="."===u||".."===u||""===u}else s=!1;for(var c=0,l=r.length;l>=0;l--){var f=r[l];"."===f?d(r,l):".."===f?(d(r,l),c++):c&&(d(r,l),c--)}if(!a)for(;c--;c)r.unshift("..");!a||""===r[0]||r[0]&&p(r[0])||r.unshift("");var h=r.join("/");return s&&"/"!==h.substr(-1)&&(h+="/"),h},g="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};var v=function e(t,n){if(t===n)return!0;if(null==t||null==n)return!1;if(Array.isArray(t))return Array.isArray(n)&&t.length===n.length&&t.every(function(t,r){return e(t,n[r])});var r=void 0===t?"undefined":g(t);if(r!==(void 0===n?"undefined":g(n)))return!1;if("object"===r){var i=t.valueOf(),o=n.valueOf();if(i!==t||o!==n)return e(i,o);var a=Object.keys(t),s=Object.keys(n);return a.length===s.length&&a.every(function(r){return e(t[r],n[r])})}return!1},y=function(e){return"/"===e.charAt(0)?e:"/"+e},b=function(e){return"/"===e.charAt(0)?e.substr(1):e},x=function(e,t){return new RegExp("^"+t+"(\\/|\\?|#|$)","i").test(e)},w=function(e,t){return x(e,t)?e.substr(t.length):e},k=function(e){return"/"===e.charAt(e.length-1)?e.slice(0,-1):e},E=function(e){var t=e.pathname,n=e.search,r=e.hash,i=t||"/";return n&&"?"!==n&&(i+="?"===n.charAt(0)?n:"?"+n),r&&"#"!==r&&(i+="#"===r.charAt(0)?r:"#"+r),i},_=Object.assign||function(e){for(var t=1;t0&&void 0!==arguments[0]?arguments[0]:{};h()(D,"Browser history needs a DOM");var t=window.history,n=function(){var e=window.navigator.userAgent;return(-1===e.indexOf("Android 2.")&&-1===e.indexOf("Android 4.0")||-1===e.indexOf("Mobile Safari")||-1!==e.indexOf("Chrome")||-1!==e.indexOf("Windows Phone"))&&window.history&&"pushState"in window.history}(),r=!(-1===window.navigator.userAgent.indexOf("Trident")),i=e.forceRefresh,o=void 0!==i&&i,a=e.getUserConfirmation,s=void 0===a?P:a,u=e.keyLength,c=void 0===u?6:u,f=e.basename?k(y(e.basename)):"",p=function(e){var t=e||{},n=t.key,r=t.state,i=window.location,o=i.pathname+i.search+i.hash;return l()(!f||x(o,f),'You are attempting to use a basename on a page whose URL path does not begin with the basename. Expected path "'+o+'" to begin with "'+f+'".'),f&&(o=w(o,f)),S(o,r,n)},d=function(){return Math.random().toString(36).substr(2,c)},m=A(),g=function(e){L(U,e),U.length=t.length,m.notifyListeners(U.location,U.action)},v=function(e){(function(e){return void 0===e.state&&-1===navigator.userAgent.indexOf("CriOS")})(e)||C(p(e.state))},b=function(){C(p(F()))},_=!1,C=function(e){_?(_=!1,g()):m.confirmTransitionTo(e,"POP",s,function(t){t?g({action:"POP",location:e}):N(e)})},N=function(e){var t=U.location,n=B.indexOf(t.key);-1===n&&(n=0);var r=B.indexOf(e.key);-1===r&&(r=0);var i=n-r;i&&(_=!0,z(i))},j=p(F()),B=[j.key],R=function(e){return f+E(e)},z=function(e){t.go(e)},I=0,H=function(e){1===(I+=e)?(T(window,"popstate",v),r&&T(window,"hashchange",b)):0===I&&(O(window,"popstate",v),r&&O(window,"hashchange",b))},V=!1,U={length:t.length,action:"POP",location:j,createHref:R,push:function(e,r){l()(!("object"===(void 0===e?"undefined":M(e))&&void 0!==e.state&&void 0!==r),"You should avoid providing a 2nd state argument to push when the 1st argument is a location-like object that already has state; it is ignored");var i=S(e,r,d(),U.location);m.confirmTransitionTo(i,"PUSH",s,function(e){if(e){var r=R(i),a=i.key,s=i.state;if(n)if(t.pushState({key:a,state:s},null,r),o)window.location.href=r;else{var u=B.indexOf(U.location.key),c=B.slice(0,-1===u?0:u+1);c.push(i.key),B=c,g({action:"PUSH",location:i})}else l()(void 0===s,"Browser history cannot push state in browsers that do not support HTML5 history"),window.location.href=r}})},replace:function(e,r){l()(!("object"===(void 0===e?"undefined":M(e))&&void 0!==e.state&&void 0!==r),"You should avoid providing a 2nd state argument to replace when the 1st argument is a location-like object that already has state; it is ignored");var i=S(e,r,d(),U.location);m.confirmTransitionTo(i,"REPLACE",s,function(e){if(e){var r=R(i),a=i.key,s=i.state;if(n)if(t.replaceState({key:a,state:s},null,r),o)window.location.replace(r);else{var u=B.indexOf(U.location.key);-1!==u&&(B[u]=i.key),g({action:"REPLACE",location:i})}else l()(void 0===s,"Browser history cannot replace state in browsers that do not support HTML5 history"),window.location.replace(r)}})},go:z,goBack:function(){return z(-1)},goForward:function(){return z(1)},block:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=m.setPrompt(e);return V||(H(1),V=!0),function(){return V&&(V=!1,H(-1)),t()}},listen:function(e){var t=m.appendListener(e);return H(1),function(){H(-1),t()}}};return U},j=Object.assign||function(e){for(var t=1;t=0?t:0)+"#"+e)},I=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};h()(D,"Hash history needs a DOM");var t=window.history,n=-1===window.navigator.userAgent.indexOf("Firefox"),r=e.getUserConfirmation,i=void 0===r?P:r,o=e.hashType,a=void 0===o?"slash":o,s=e.basename?k(y(e.basename)):"",u=B[a],c=u.encodePath,f=u.decodePath,p=function(){var e=f(R());return l()(!s||x(e,s),'You are attempting to use a basename on a page whose URL path does not begin with the basename. Expected path "'+e+'" to begin with "'+s+'".'),s&&(e=w(e,s)),S(e)},d=A(),m=function(e){j(W,e),W.length=t.length,d.notifyListeners(W.location,W.action)},g=!1,v=null,b=function(){var e=R(),t=c(e);if(e!==t)z(t);else{var n=p(),r=W.location;if(!g&&C(r,n))return;if(v===E(n))return;v=null,_(n)}},_=function(e){g?(g=!1,m()):d.confirmTransitionTo(e,"POP",i,function(t){t?m({action:"POP",location:e}):M(e)})},M=function(e){var t=W.location,n=I.lastIndexOf(E(t));-1===n&&(n=0);var r=I.lastIndexOf(E(e));-1===r&&(r=0);var i=n-r;i&&(g=!0,H(i))},L=R(),F=c(L);L!==F&&z(F);var N=p(),I=[E(N)],H=function(e){l()(n,"Hash history go(n) causes a full page reload in this browser"),t.go(e)},V=0,U=function(e){1===(V+=e)?T(window,"hashchange",b):0===V&&O(window,"hashchange",b)},q=!1,W={length:t.length,action:"POP",location:N,createHref:function(e){return"#"+c(s+E(e))},push:function(e,t){l()(void 0===t,"Hash history cannot push state; it is ignored");var n=S(e,void 0,void 0,W.location);d.confirmTransitionTo(n,"PUSH",i,function(e){if(e){var t=E(n),r=c(s+t);if(R()!==r){v=t,function(e){window.location.hash=e}(r);var i=I.lastIndexOf(E(W.location)),o=I.slice(0,-1===i?0:i+1);o.push(t),I=o,m({action:"PUSH",location:n})}else l()(!1,"Hash history cannot PUSH the same path; a new entry will not be added to the history stack"),m()}})},replace:function(e,t){l()(void 0===t,"Hash history cannot replace state; it is ignored");var n=S(e,void 0,void 0,W.location);d.confirmTransitionTo(n,"REPLACE",i,function(e){if(e){var t=E(n),r=c(s+t);R()!==r&&(v=t,z(r));var i=I.indexOf(E(W.location));-1!==i&&(I[i]=t),m({action:"REPLACE",location:n})}})},go:H,goBack:function(){return H(-1)},goForward:function(){return H(1)},block:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=d.setPrompt(e);return q||(U(1),q=!0),function(){return q&&(q=!1,U(-1)),t()}},listen:function(e){var t=d.appendListener(e);return U(1),function(){U(-1),t()}}};return W},H="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},V=Object.assign||function(e){for(var t=1;t0&&void 0!==arguments[0]?arguments[0]:{},t=e.getUserConfirmation,n=e.initialEntries,r=void 0===n?["/"]:n,i=e.initialIndex,o=void 0===i?0:i,a=e.keyLength,s=void 0===a?6:a,u=A(),c=function(e){V(g,e),g.length=g.entries.length,u.notifyListeners(g.location,g.action)},f=function(){return Math.random().toString(36).substr(2,s)},h=U(o,0,r.length-1),p=r.map(function(e){return S(e,void 0,"string"==typeof e?f():e.key||f())}),d=E,m=function(e){var n=U(g.index+e,0,g.entries.length-1),r=g.entries[n];u.confirmTransitionTo(r,"POP",t,function(e){e?c({action:"POP",location:r,index:n}):c()})},g={length:p.length,action:"POP",location:p[h],index:h,entries:p,createHref:d,push:function(e,n){l()(!("object"===(void 0===e?"undefined":H(e))&&void 0!==e.state&&void 0!==n),"You should avoid providing a 2nd state argument to push when the 1st argument is a location-like object that already has state; it is ignored");var r=S(e,n,f(),g.location);u.confirmTransitionTo(r,"PUSH",t,function(e){if(e){var t=g.index+1,n=g.entries.slice(0);n.length>t?n.splice(t,n.length-t,r):n.push(r),c({action:"PUSH",location:r,index:t,entries:n})}})},replace:function(e,n){l()(!("object"===(void 0===e?"undefined":H(e))&&void 0!==e.state&&void 0!==n),"You should avoid providing a 2nd state argument to replace when the 1st argument is a location-like object that already has state; it is ignored");var r=S(e,n,f(),g.location);u.confirmTransitionTo(r,"REPLACE",t,function(e){e&&(g.entries[g.index]=r,c({action:"REPLACE",location:r}))})},go:m,goBack:function(){return m(-1)},goForward:function(){return m(1)},canGo:function(e){var t=g.index+e;return t>=0&&t0&&void 0!==arguments[0]&&arguments[0];return u.setPrompt(e)},listen:function(e){return u.appendListener(e)}};return g},W=n(13),G=n.n(W),X=n(21),J=n.n(X),K=n(2),Y=n.n(K),$=Object.assign||function(e){for(var t=1;t may have only one child element"),this.unlisten=r.listen(function(){e.setState({match:e.computeMatch(r.location.pathname)})})},t.prototype.componentWillReceiveProps=function(e){G()(this.props.history===e.history,"You cannot change ")},t.prototype.componentWillUnmount=function(){this.unlisten()},t.prototype.render=function(){var e=this.props.children;return e?a.a.Children.only(e):null},t}(a.a.Component);Q.propTypes={history:Y.a.object.isRequired,children:Y.a.node},Q.contextTypes={router:Y.a.object},Q.childContextTypes={router:Y.a.object.isRequired};var ee=Q,te=ee;function ne(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}var re=function(e){function t(){var n,r;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);for(var i=arguments.length,o=Array(i),a=0;a ignores the history prop. To use a custom history, use `import { Router }` instead of `import { BrowserRouter as Router }`.")},t.prototype.render=function(){return a.a.createElement(te,{history:this.history,children:this.props.children})},t}(a.a.Component);re.propTypes={basename:u.a.string,forceRefresh:u.a.bool,getUserConfirmation:u.a.func,keyLength:u.a.number,children:u.a.node};var ie=re;function oe(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}var ae=function(e){function t(){var n,r;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);for(var i=arguments.length,o=Array(i),a=0;a ignores the history prop. To use a custom history, use `import { Router }` instead of `import { HashRouter as Router }`.")},t.prototype.render=function(){return a.a.createElement(te,{history:this.history,children:this.props.children})},t}(a.a.Component);ae.propTypes={basename:u.a.string,getUserConfirmation:u.a.func,hashType:u.a.oneOf(["hashbang","noslash","slash"]),children:u.a.node};var se=ae,ue=n(128),ce=n.n(ue),le=Object.assign||function(e){for(var t=1;t=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}(e,["replace","to","innerRef"]);ce()(this.context.router,"You should not use outside a "),ce()(void 0!==t,'You must specify the "to" property');var i=this.context.router.history,o="string"==typeof t?S(t,null,null,i.location):t,s=i.createHref(o);return a.a.createElement("a",le({},r,{onClick:this.handleClick,href:s,ref:n}))},t}(a.a.Component);pe.propTypes={onClick:u.a.func,target:u.a.string,replace:u.a.bool,to:u.a.oneOfType([u.a.string,u.a.object]).isRequired,innerRef:u.a.oneOfType([u.a.string,u.a.func])},pe.defaultProps={replace:!1},pe.contextTypes={router:u.a.shape({history:u.a.shape({push:u.a.func.isRequired,replace:u.a.func.isRequired,createHref:u.a.func.isRequired}).isRequired}).isRequired};var de=pe;function me(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}var ge=function(e){function t(){var n,r;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);for(var i=arguments.length,o=Array(i),a=0;a ignores the history prop. To use a custom history, use `import { Router }` instead of `import { MemoryRouter as Router }`.")},t.prototype.render=function(){return a.a.createElement(ee,{history:this.history,children:this.props.children})},t}(a.a.Component);ge.propTypes={initialEntries:Y.a.array,initialIndex:Y.a.number,getUserConfirmation:Y.a.func,keyLength:Y.a.number,children:Y.a.node};var ve=ge,ye=n(81),be=n.n(ye),xe={},we=0,ke=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=arguments[2];"string"==typeof t&&(t={path:t});var r=t,i=r.path,o=r.exact,a=void 0!==o&&o,s=r.strict,u=void 0!==s&&s,c=r.sensitive,l=void 0!==c&&c;if(null==i)return n;var f=function(e,t){var n=""+t.end+t.strict+t.sensitive,r=xe[n]||(xe[n]={});if(r[e])return r[e];var i=[],o={re:be()(e,i,t),keys:i};return we<1e4&&(r[e]=o,we++),o}(i,{end:a,strict:u,sensitive:l}),h=f.re,p=f.keys,d=h.exec(e);if(!d)return null;var m=d[0],g=d.slice(1),v=e===m;return a&&!v?null:{path:i,url:"/"===i&&""===m?"/":m,isExact:v,params:p.reduce(function(e,t,n){return e[t.name]=g[n],e},{})}},Ee=Object.assign||function(e){for(var t=1;t or withRouter() outside a ");var u=t.route,c=(r||u.location).pathname;return ke(c,{path:i,strict:o,exact:a,sensitive:s},u.match)},t.prototype.componentWillMount=function(){G()(!(this.props.component&&this.props.render),"You should not use and in the same route; will be ignored"),G()(!(this.props.component&&this.props.children&&!Se(this.props.children)),"You should not use and in the same route; will be ignored"),G()(!(this.props.render&&this.props.children&&!Se(this.props.children)),"You should not use and in the same route; will be ignored")},t.prototype.componentWillReceiveProps=function(e,t){G()(!(e.location&&!this.props.location),' elements should not change from uncontrolled to controlled (or vice versa). You initially used no "location" prop and then provided one on a subsequent render.'),G()(!(!e.location&&this.props.location),' elements should not change from controlled to uncontrolled (or vice versa). You provided a "location" prop initially but omitted it on a subsequent render.'),this.setState({match:this.computeMatch(e,t.router)})},t.prototype.render=function(){var e=this.state.match,t=this.props,n=t.children,r=t.component,i=t.render,o=this.context.router,s=o.history,u=o.route,c=o.staticContext,l={match:e,location:this.props.location||u.location,history:s,staticContext:c};return r?e?a.a.createElement(r,l):null:i?e?i(l):null:"function"==typeof n?n(l):n&&!Se(n)?a.a.Children.only(n):null},t}(a.a.Component);Ce.propTypes={computedMatch:Y.a.object,path:Y.a.string,exact:Y.a.bool,strict:Y.a.bool,sensitive:Y.a.bool,component:Y.a.func,render:Y.a.func,children:Y.a.oneOfType([Y.a.func,Y.a.node]),location:Y.a.object},Ce.contextTypes={router:Y.a.shape({history:Y.a.object.isRequired,route:Y.a.object.isRequired,staticContext:Y.a.object})},Ce.childContextTypes={router:Y.a.object.isRequired};var Ae=Ce,De=Ae,Te=Object.assign||function(e){for(var t=1;t=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}(e,["to","exact","strict","location","activeClassName","className","activeStyle","style","isActive","aria-current"]),p="object"===(void 0===t?"undefined":Oe(t))?t.pathname:t,d=p&&p.replace(/([.+*?=^!:${}()[\]|/\\])/g,"\\$1");return a.a.createElement(De,{path:d,exact:n,strict:r,location:i,children:function(e){var n=e.location,r=e.match,i=!!(l?l(r,n):r);return a.a.createElement(de,Te({to:t,className:i?[s,o].filter(function(e){return e}).join(" "):s,style:i?Te({},c,u):c,"aria-current":i&&f||null},h))}})};Pe.propTypes={to:de.propTypes.to,exact:u.a.bool,strict:u.a.bool,location:u.a.object,activeClassName:u.a.string,className:u.a.string,activeStyle:u.a.object,style:u.a.object,isActive:u.a.func,"aria-current":u.a.oneOf(["page","step","location","date","time","true"])},Pe.defaultProps={activeClassName:"active","aria-current":"page"};var Me=Pe;var Le=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),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,e.apply(this,arguments))}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),t.prototype.enable=function(e){this.unblock&&this.unblock(),this.unblock=this.context.router.history.block(e)},t.prototype.disable=function(){this.unblock&&(this.unblock(),this.unblock=null)},t.prototype.componentWillMount=function(){J()(this.context.router,"You should not use outside a "),this.props.when&&this.enable(this.props.message)},t.prototype.componentWillReceiveProps=function(e){e.when?this.props.when&&this.props.message===e.message||this.enable(e.message):this.disable()},t.prototype.componentWillUnmount=function(){this.disable()},t.prototype.render=function(){return null},t}(a.a.Component);Le.propTypes={when:Y.a.bool,message:Y.a.oneOfType([Y.a.func,Y.a.string]).isRequired},Le.defaultProps={when:!0},Le.contextTypes={router:Y.a.shape({history:Y.a.shape({block:Y.a.func.isRequired}).isRequired}).isRequired};var Fe=Le,Ne={},je=0,Be=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"/",t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return"/"===e?e:function(e){var t=e,n=Ne[t]||(Ne[t]={});if(n[e])return n[e];var r=be.a.compile(e);return je<1e4&&(n[e]=r,je++),r}(e)(t,{pretty:!0})},Re=Object.assign||function(e){for(var t=1;t outside a "),this.isStatic()&&this.perform()},t.prototype.componentDidMount=function(){this.isStatic()||this.perform()},t.prototype.componentDidUpdate=function(e){var t=S(e.to),n=S(this.props.to);C(t,n)?G()(!1,"You tried to redirect to the same route you're currently on: \""+n.pathname+n.search+'"'):this.perform()},t.prototype.computeTo=function(e){var t=e.computedMatch,n=e.to;return t?"string"==typeof n?Be(n,t.params):Re({},n,{pathname:Be(n.pathname,t.params)}):n},t.prototype.perform=function(){var e=this.context.router.history,t=this.props.push,n=this.computeTo(this.props);t?e.push(n):e.replace(n)},t.prototype.render=function(){return null},t}(a.a.Component);ze.propTypes={computedMatch:Y.a.object,push:Y.a.bool,from:Y.a.string,to:Y.a.oneOfType([Y.a.string,Y.a.object]).isRequired},ze.defaultProps={push:!1},ze.contextTypes={router:Y.a.shape({history:Y.a.shape({push:Y.a.func.isRequired,replace:Y.a.func.isRequired}).isRequired,staticContext:Y.a.object}).isRequired};var Ie=ze,He=Object.assign||function(e){for(var t=1;t",e)}},Xe=function(){},Je=function(e){function t(){var n,r;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);for(var i=arguments.length,o=Array(i),a=0;a ignores the history prop. To use a custom history, use `import { Router }` instead of `import { StaticRouter as Router }`.")},t.prototype.render=function(){var e=this.props,t=e.basename,n=(e.context,e.location),r=function(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}(e,["basename","context","location"]),i={createHref:this.createHref,action:"POP",location:function(e,t){if(!e)return t;var n=Ue(e);return 0!==t.pathname.indexOf(n)?t:He({},t,{pathname:t.pathname.substr(n.length)})}(t,S(n)),push:this.handlePush,replace:this.handleReplace,go:Ge("go"),goBack:Ge("goBack"),goForward:Ge("goForward"),listen:this.handleListen,block:this.handleBlock};return a.a.createElement(ee,He({},r,{history:i}))},t}(a.a.Component);Je.propTypes={basename:Y.a.string,context:Y.a.object.isRequired,location:Y.a.oneOfType([Y.a.string,Y.a.object])},Je.defaultProps={basename:"",location:"/"},Je.childContextTypes={router:Y.a.object.isRequired};var Ke=Je;var Ye=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),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,e.apply(this,arguments))}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),t.prototype.componentWillMount=function(){J()(this.context.router,"You should not use outside a ")},t.prototype.componentWillReceiveProps=function(e){G()(!(e.location&&!this.props.location),' elements should not change from uncontrolled to controlled (or vice versa). You initially used no "location" prop and then provided one on a subsequent render.'),G()(!(!e.location&&this.props.location),' elements should not change from controlled to uncontrolled (or vice versa). You provided a "location" prop initially but omitted it on a subsequent render.')},t.prototype.render=function(){var e=this.context.router.route,t=this.props.children,n=this.props.location||e.location,r=void 0,i=void 0;return a.a.Children.forEach(t,function(t){if(null==r&&a.a.isValidElement(t)){var o=t.props,s=o.path,u=o.exact,c=o.strict,l=o.sensitive,f=o.from,h=s||f;i=t,r=ke(n.pathname,{path:h,exact:u,strict:c,sensitive:l},e.match)}}),r?a.a.cloneElement(i,{location:n,computedMatch:r}):null},t}(a.a.Component);Ye.contextTypes={router:Y.a.shape({route:Y.a.object.isRequired}).isRequired},Ye.propTypes={children:Y.a.node,location:Y.a.object};var $e=Ye,Ze=Be,Qe=ke,et=n(62),tt=n.n(et),nt=Object.assign||function(e){for(var t=1;t=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}(t,["wrappedComponentRef"]);return a.a.createElement(Ae,{children:function(t){return a.a.createElement(e,nt({},r,t,{ref:n}))}})};return t.displayName="withRouter("+(e.displayName||e.name)+")",t.WrappedComponent=e,t.propTypes={wrappedComponentRef:Y.a.func},tt()(t,e)};n.d(t,"BrowserRouter",function(){return ie}),n.d(t,"HashRouter",function(){return se}),n.d(t,"Link",function(){return de}),n.d(t,"MemoryRouter",function(){return ve}),n.d(t,"NavLink",function(){return Me}),n.d(t,"Prompt",function(){return Fe}),n.d(t,"Redirect",function(){return Ie}),n.d(t,"Route",function(){return De}),n.d(t,"Router",function(){return te}),n.d(t,"StaticRouter",function(){return Ke}),n.d(t,"Switch",function(){return $e}),n.d(t,"generatePath",function(){return Ze}),n.d(t,"matchPath",function(){return Qe}),n.d(t,"withRouter",function(){return rt})},function(e,t,n){"use strict";e.exports=function(e,t){var n=[],i=-1,o=e.length;t&&n.push(r("text","\n"));for(;++i1)for(var n=1;n=t.length?{value:void 0,done:!0}:(e=r(t,n),this._i+=e.length,{value:e,done:!1})})},function(e,t,n){e.exports=function(){"use strict";var e={childContextTypes:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},t={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},n=Object.defineProperty,r=Object.getOwnPropertyNames,i=Object.getOwnPropertySymbols,o=Object.getOwnPropertyDescriptor,a=Object.getPrototypeOf,s=a&&a(Object);return function u(c,l,f){if("string"!=typeof l){if(s){var h=a(l);h&&h!==s&&u(c,h,f)}var p=r(l);i&&(p=p.concat(i(l)));for(var d=0;d=55296&&s<=57343){if(s>=55296&&s<=56319&&o+1=56320&&u<=57343){l+=encodeURIComponent(e[o]+e[o+1]),o++;continue}l+="%EF%BF%BD"}else l+=encodeURIComponent(e[o]);return l}i.defaultChars=";/?:@&=+$,-_.!~*'()#",i.componentChars="-_.!~*'()",e.exports=i},function(e,t,n){"use strict"; +!function(){"use strict";var n={}.hasOwnProperty;function i(){for(var e=[],t=0;t1&&void 0!==arguments[1]?arguments[1]:"",n=e&&e.split("/")||[],r=t&&t.split("/")||[],i=e&&p(e),a=t&&p(t),o=i||a;if(e&&p(e)?r=n:n.length&&(r.pop(),r=r.concat(n)),!r.length)return"/";var s=void 0;if(r.length){var u=r[r.length-1];s="."===u||".."===u||""===u}else s=!1;for(var c=0,l=r.length;l>=0;l--){var f=r[l];"."===f?d(r,l):".."===f?(d(r,l),c++):c&&(d(r,l),c--)}if(!o)for(;c--;c)r.unshift("..");!o||""===r[0]||r[0]&&p(r[0])||r.unshift("");var h=r.join("/");return s&&"/"!==h.substr(-1)&&(h+="/"),h},g="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};var y=function e(t,n){if(t===n)return!0;if(null==t||null==n)return!1;if(Array.isArray(t))return Array.isArray(n)&&t.length===n.length&&t.every(function(t,r){return e(t,n[r])});var r=void 0===t?"undefined":g(t);if(r!==(void 0===n?"undefined":g(n)))return!1;if("object"===r){var i=t.valueOf(),a=n.valueOf();if(i!==t||a!==n)return e(i,a);var o=Object.keys(t),s=Object.keys(n);return o.length===s.length&&o.every(function(r){return e(t[r],n[r])})}return!1},v=function(e){return"/"===e.charAt(0)?e:"/"+e},b=function(e){return"/"===e.charAt(0)?e.substr(1):e},x=function(e,t){return new RegExp("^"+t+"(\\/|\\?|#|$)","i").test(e)},w=function(e,t){return x(e,t)?e.substr(t.length):e},E=function(e){return"/"===e.charAt(e.length-1)?e.slice(0,-1):e},k=function(e){var t=e.pathname,n=e.search,r=e.hash,i=t||"/";return n&&"?"!==n&&(i+="?"===n.charAt(0)?n:"?"+n),r&&"#"!==r&&(i+="#"===r.charAt(0)?r:"#"+r),i},_=Object.assign||function(e){for(var t=1;t0&&void 0!==arguments[0]?arguments[0]:{};h()(D,"Browser history needs a DOM");var t=window.history,n=function(){var e=window.navigator.userAgent;return(-1===e.indexOf("Android 2.")&&-1===e.indexOf("Android 4.0")||-1===e.indexOf("Mobile Safari")||-1!==e.indexOf("Chrome")||-1!==e.indexOf("Windows Phone"))&&window.history&&"pushState"in window.history}(),r=!(-1===window.navigator.userAgent.indexOf("Trident")),i=e.forceRefresh,a=void 0!==i&&i,o=e.getUserConfirmation,s=void 0===o?P:o,u=e.keyLength,c=void 0===u?6:u,f=e.basename?E(v(e.basename)):"",p=function(e){var t=e||{},n=t.key,r=t.state,i=window.location,a=i.pathname+i.search+i.hash;return l()(!f||x(a,f),'You are attempting to use a basename on a page whose URL path does not begin with the basename. Expected path "'+a+'" to begin with "'+f+'".'),f&&(a=w(a,f)),S(a,r,n)},d=function(){return Math.random().toString(36).substr(2,c)},m=A(),g=function(e){F(U,e),U.length=t.length,m.notifyListeners(U.location,U.action)},y=function(e){(function(e){return void 0===e.state&&-1===navigator.userAgent.indexOf("CriOS")})(e)||C(p(e.state))},b=function(){C(p(j()))},_=!1,C=function(e){_?(_=!1,g()):m.confirmTransitionTo(e,"POP",s,function(t){t?g({action:"POP",location:e}):L(e)})},L=function(e){var t=U.location,n=R.indexOf(t.key);-1===n&&(n=0);var r=R.indexOf(e.key);-1===r&&(r=0);var i=n-r;i&&(_=!0,I(i))},N=p(j()),R=[N.key],z=function(e){return f+k(e)},I=function(e){t.go(e)},B=0,H=function(e){1===(B+=e)?(T(window,"popstate",y),r&&T(window,"hashchange",b)):0===B&&(O(window,"popstate",y),r&&O(window,"hashchange",b))},V=!1,U={length:t.length,action:"POP",location:N,createHref:z,push:function(e,r){l()(!("object"===(void 0===e?"undefined":M(e))&&void 0!==e.state&&void 0!==r),"You should avoid providing a 2nd state argument to push when the 1st argument is a location-like object that already has state; it is ignored");var i=S(e,r,d(),U.location);m.confirmTransitionTo(i,"PUSH",s,function(e){if(e){var r=z(i),o=i.key,s=i.state;if(n)if(t.pushState({key:o,state:s},null,r),a)window.location.href=r;else{var u=R.indexOf(U.location.key),c=R.slice(0,-1===u?0:u+1);c.push(i.key),R=c,g({action:"PUSH",location:i})}else l()(void 0===s,"Browser history cannot push state in browsers that do not support HTML5 history"),window.location.href=r}})},replace:function(e,r){l()(!("object"===(void 0===e?"undefined":M(e))&&void 0!==e.state&&void 0!==r),"You should avoid providing a 2nd state argument to replace when the 1st argument is a location-like object that already has state; it is ignored");var i=S(e,r,d(),U.location);m.confirmTransitionTo(i,"REPLACE",s,function(e){if(e){var r=z(i),o=i.key,s=i.state;if(n)if(t.replaceState({key:o,state:s},null,r),a)window.location.replace(r);else{var u=R.indexOf(U.location.key);-1!==u&&(R[u]=i.key),g({action:"REPLACE",location:i})}else l()(void 0===s,"Browser history cannot replace state in browsers that do not support HTML5 history"),window.location.replace(r)}})},go:I,goBack:function(){return I(-1)},goForward:function(){return I(1)},block:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=m.setPrompt(e);return V||(H(1),V=!0),function(){return V&&(V=!1,H(-1)),t()}},listen:function(e){var t=m.appendListener(e);return H(1),function(){H(-1),t()}}};return U},N=Object.assign||function(e){for(var t=1;t=0?t:0)+"#"+e)},B=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};h()(D,"Hash history needs a DOM");var t=window.history,n=-1===window.navigator.userAgent.indexOf("Firefox"),r=e.getUserConfirmation,i=void 0===r?P:r,a=e.hashType,o=void 0===a?"slash":a,s=e.basename?E(v(e.basename)):"",u=R[o],c=u.encodePath,f=u.decodePath,p=function(){var e=f(z());return l()(!s||x(e,s),'You are attempting to use a basename on a page whose URL path does not begin with the basename. Expected path "'+e+'" to begin with "'+s+'".'),s&&(e=w(e,s)),S(e)},d=A(),m=function(e){N(W,e),W.length=t.length,d.notifyListeners(W.location,W.action)},g=!1,y=null,b=function(){var e=z(),t=c(e);if(e!==t)I(t);else{var n=p(),r=W.location;if(!g&&C(r,n))return;if(y===k(n))return;y=null,_(n)}},_=function(e){g?(g=!1,m()):d.confirmTransitionTo(e,"POP",i,function(t){t?m({action:"POP",location:e}):M(e)})},M=function(e){var t=W.location,n=B.lastIndexOf(k(t));-1===n&&(n=0);var r=B.lastIndexOf(k(e));-1===r&&(r=0);var i=n-r;i&&(g=!0,H(i))},F=z(),j=c(F);F!==j&&I(j);var L=p(),B=[k(L)],H=function(e){l()(n,"Hash history go(n) causes a full page reload in this browser"),t.go(e)},V=0,U=function(e){1===(V+=e)?T(window,"hashchange",b):0===V&&O(window,"hashchange",b)},q=!1,W={length:t.length,action:"POP",location:L,createHref:function(e){return"#"+c(s+k(e))},push:function(e,t){l()(void 0===t,"Hash history cannot push state; it is ignored");var n=S(e,void 0,void 0,W.location);d.confirmTransitionTo(n,"PUSH",i,function(e){if(e){var t=k(n),r=c(s+t);if(z()!==r){y=t,function(e){window.location.hash=e}(r);var i=B.lastIndexOf(k(W.location)),a=B.slice(0,-1===i?0:i+1);a.push(t),B=a,m({action:"PUSH",location:n})}else l()(!1,"Hash history cannot PUSH the same path; a new entry will not be added to the history stack"),m()}})},replace:function(e,t){l()(void 0===t,"Hash history cannot replace state; it is ignored");var n=S(e,void 0,void 0,W.location);d.confirmTransitionTo(n,"REPLACE",i,function(e){if(e){var t=k(n),r=c(s+t);z()!==r&&(y=t,I(r));var i=B.indexOf(k(W.location));-1!==i&&(B[i]=t),m({action:"REPLACE",location:n})}})},go:H,goBack:function(){return H(-1)},goForward:function(){return H(1)},block:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=d.setPrompt(e);return q||(U(1),q=!0),function(){return q&&(q=!1,U(-1)),t()}},listen:function(e){var t=d.appendListener(e);return U(1),function(){U(-1),t()}}};return W},H="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},V=Object.assign||function(e){for(var t=1;t0&&void 0!==arguments[0]?arguments[0]:{},t=e.getUserConfirmation,n=e.initialEntries,r=void 0===n?["/"]:n,i=e.initialIndex,a=void 0===i?0:i,o=e.keyLength,s=void 0===o?6:o,u=A(),c=function(e){V(g,e),g.length=g.entries.length,u.notifyListeners(g.location,g.action)},f=function(){return Math.random().toString(36).substr(2,s)},h=U(a,0,r.length-1),p=r.map(function(e){return S(e,void 0,"string"==typeof e?f():e.key||f())}),d=k,m=function(e){var n=U(g.index+e,0,g.entries.length-1),r=g.entries[n];u.confirmTransitionTo(r,"POP",t,function(e){e?c({action:"POP",location:r,index:n}):c()})},g={length:p.length,action:"POP",location:p[h],index:h,entries:p,createHref:d,push:function(e,n){l()(!("object"===(void 0===e?"undefined":H(e))&&void 0!==e.state&&void 0!==n),"You should avoid providing a 2nd state argument to push when the 1st argument is a location-like object that already has state; it is ignored");var r=S(e,n,f(),g.location);u.confirmTransitionTo(r,"PUSH",t,function(e){if(e){var t=g.index+1,n=g.entries.slice(0);n.length>t?n.splice(t,n.length-t,r):n.push(r),c({action:"PUSH",location:r,index:t,entries:n})}})},replace:function(e,n){l()(!("object"===(void 0===e?"undefined":H(e))&&void 0!==e.state&&void 0!==n),"You should avoid providing a 2nd state argument to replace when the 1st argument is a location-like object that already has state; it is ignored");var r=S(e,n,f(),g.location);u.confirmTransitionTo(r,"REPLACE",t,function(e){e&&(g.entries[g.index]=r,c({action:"REPLACE",location:r}))})},go:m,goBack:function(){return m(-1)},goForward:function(){return m(1)},canGo:function(e){var t=g.index+e;return t>=0&&t0&&void 0!==arguments[0]&&arguments[0];return u.setPrompt(e)},listen:function(e){return u.appendListener(e)}};return g},W=n(12),G=n.n(W),X=n(20),J=n.n(X),K=n(2),Y=n.n(K),$=Object.assign||function(e){for(var t=1;t may have only one child element"),this.unlisten=r.listen(function(){e.setState({match:e.computeMatch(r.location.pathname)})})},t.prototype.componentWillReceiveProps=function(e){G()(this.props.history===e.history,"You cannot change ")},t.prototype.componentWillUnmount=function(){this.unlisten()},t.prototype.render=function(){var e=this.props.children;return e?o.a.Children.only(e):null},t}(o.a.Component);Q.propTypes={history:Y.a.object.isRequired,children:Y.a.node},Q.contextTypes={router:Y.a.object},Q.childContextTypes={router:Y.a.object.isRequired};var ee=Q,te=ee;function ne(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}var re=function(e){function t(){var n,r;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);for(var i=arguments.length,a=Array(i),o=0;o ignores the history prop. To use a custom history, use `import { Router }` instead of `import { BrowserRouter as Router }`.")},t.prototype.render=function(){return o.a.createElement(te,{history:this.history,children:this.props.children})},t}(o.a.Component);re.propTypes={basename:u.a.string,forceRefresh:u.a.bool,getUserConfirmation:u.a.func,keyLength:u.a.number,children:u.a.node};var ie=re;function ae(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}var oe=function(e){function t(){var n,r;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);for(var i=arguments.length,a=Array(i),o=0;o ignores the history prop. To use a custom history, use `import { Router }` instead of `import { HashRouter as Router }`.")},t.prototype.render=function(){return o.a.createElement(te,{history:this.history,children:this.props.children})},t}(o.a.Component);oe.propTypes={basename:u.a.string,getUserConfirmation:u.a.func,hashType:u.a.oneOf(["hashbang","noslash","slash"]),children:u.a.node};var se=oe,ue=n(125),ce=n.n(ue),le=Object.assign||function(e){for(var t=1;t=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}(e,["replace","to","innerRef"]);ce()(this.context.router,"You should not use outside a "),ce()(void 0!==t,'You must specify the "to" property');var i=this.context.router.history,a="string"==typeof t?S(t,null,null,i.location):t,s=i.createHref(a);return o.a.createElement("a",le({},r,{onClick:this.handleClick,href:s,ref:n}))},t}(o.a.Component);pe.propTypes={onClick:u.a.func,target:u.a.string,replace:u.a.bool,to:u.a.oneOfType([u.a.string,u.a.object]).isRequired,innerRef:u.a.oneOfType([u.a.string,u.a.func])},pe.defaultProps={replace:!1},pe.contextTypes={router:u.a.shape({history:u.a.shape({push:u.a.func.isRequired,replace:u.a.func.isRequired,createHref:u.a.func.isRequired}).isRequired}).isRequired};var de=pe;function me(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}var ge=function(e){function t(){var n,r;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);for(var i=arguments.length,a=Array(i),o=0;o ignores the history prop. To use a custom history, use `import { Router }` instead of `import { MemoryRouter as Router }`.")},t.prototype.render=function(){return o.a.createElement(ee,{history:this.history,children:this.props.children})},t}(o.a.Component);ge.propTypes={initialEntries:Y.a.array,initialIndex:Y.a.number,getUserConfirmation:Y.a.func,keyLength:Y.a.number,children:Y.a.node};var ye=ge,ve=n(79),be=n.n(ve),xe={},we=0,Ee=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=arguments[2];"string"==typeof t&&(t={path:t});var r=t,i=r.path,a=r.exact,o=void 0!==a&&a,s=r.strict,u=void 0!==s&&s,c=r.sensitive,l=void 0!==c&&c;if(null==i)return n;var f=function(e,t){var n=""+t.end+t.strict+t.sensitive,r=xe[n]||(xe[n]={});if(r[e])return r[e];var i=[],a={re:be()(e,i,t),keys:i};return we<1e4&&(r[e]=a,we++),a}(i,{end:o,strict:u,sensitive:l}),h=f.re,p=f.keys,d=h.exec(e);if(!d)return null;var m=d[0],g=d.slice(1),y=e===m;return o&&!y?null:{path:i,url:"/"===i&&""===m?"/":m,isExact:y,params:p.reduce(function(e,t,n){return e[t.name]=g[n],e},{})}},ke=Object.assign||function(e){for(var t=1;t or withRouter() outside a ");var u=t.route,c=(r||u.location).pathname;return Ee(c,{path:i,strict:a,exact:o,sensitive:s},u.match)},t.prototype.componentWillMount=function(){G()(!(this.props.component&&this.props.render),"You should not use and in the same route; will be ignored"),G()(!(this.props.component&&this.props.children&&!Se(this.props.children)),"You should not use and in the same route; will be ignored"),G()(!(this.props.render&&this.props.children&&!Se(this.props.children)),"You should not use and in the same route; will be ignored")},t.prototype.componentWillReceiveProps=function(e,t){G()(!(e.location&&!this.props.location),' elements should not change from uncontrolled to controlled (or vice versa). You initially used no "location" prop and then provided one on a subsequent render.'),G()(!(!e.location&&this.props.location),' elements should not change from controlled to uncontrolled (or vice versa). You provided a "location" prop initially but omitted it on a subsequent render.'),this.setState({match:this.computeMatch(e,t.router)})},t.prototype.render=function(){var e=this.state.match,t=this.props,n=t.children,r=t.component,i=t.render,a=this.context.router,s=a.history,u=a.route,c=a.staticContext,l={match:e,location:this.props.location||u.location,history:s,staticContext:c};return r?e?o.a.createElement(r,l):null:i?e?i(l):null:"function"==typeof n?n(l):n&&!Se(n)?o.a.Children.only(n):null},t}(o.a.Component);Ce.propTypes={computedMatch:Y.a.object,path:Y.a.string,exact:Y.a.bool,strict:Y.a.bool,sensitive:Y.a.bool,component:Y.a.func,render:Y.a.func,children:Y.a.oneOfType([Y.a.func,Y.a.node]),location:Y.a.object},Ce.contextTypes={router:Y.a.shape({history:Y.a.object.isRequired,route:Y.a.object.isRequired,staticContext:Y.a.object})},Ce.childContextTypes={router:Y.a.object.isRequired};var Ae=Ce,De=Ae,Te=Object.assign||function(e){for(var t=1;t=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}(e,["to","exact","strict","location","activeClassName","className","activeStyle","style","isActive","aria-current"]),p="object"===(void 0===t?"undefined":Oe(t))?t.pathname:t,d=p&&p.replace(/([.+*?=^!:${}()[\]|/\\])/g,"\\$1");return o.a.createElement(De,{path:d,exact:n,strict:r,location:i,children:function(e){var n=e.location,r=e.match,i=!!(l?l(r,n):r);return o.a.createElement(de,Te({to:t,className:i?[s,a].filter(function(e){return e}).join(" "):s,style:i?Te({},c,u):c,"aria-current":i&&f||null},h))}})};Pe.propTypes={to:de.propTypes.to,exact:u.a.bool,strict:u.a.bool,location:u.a.object,activeClassName:u.a.string,className:u.a.string,activeStyle:u.a.object,style:u.a.object,isActive:u.a.func,"aria-current":u.a.oneOf(["page","step","location","date","time","true"])},Pe.defaultProps={activeClassName:"active","aria-current":"page"};var Me=Pe;var Fe=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),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,e.apply(this,arguments))}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),t.prototype.enable=function(e){this.unblock&&this.unblock(),this.unblock=this.context.router.history.block(e)},t.prototype.disable=function(){this.unblock&&(this.unblock(),this.unblock=null)},t.prototype.componentWillMount=function(){J()(this.context.router,"You should not use outside a "),this.props.when&&this.enable(this.props.message)},t.prototype.componentWillReceiveProps=function(e){e.when?this.props.when&&this.props.message===e.message||this.enable(e.message):this.disable()},t.prototype.componentWillUnmount=function(){this.disable()},t.prototype.render=function(){return null},t}(o.a.Component);Fe.propTypes={when:Y.a.bool,message:Y.a.oneOfType([Y.a.func,Y.a.string]).isRequired},Fe.defaultProps={when:!0},Fe.contextTypes={router:Y.a.shape({history:Y.a.shape({block:Y.a.func.isRequired}).isRequired}).isRequired};var je=Fe,Le={},Ne=0,Re=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"/",t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return"/"===e?e:function(e){var t=e,n=Le[t]||(Le[t]={});if(n[e])return n[e];var r=be.a.compile(e);return Ne<1e4&&(n[e]=r,Ne++),r}(e)(t,{pretty:!0})},ze=Object.assign||function(e){for(var t=1;t outside a "),this.isStatic()&&this.perform()},t.prototype.componentDidMount=function(){this.isStatic()||this.perform()},t.prototype.componentDidUpdate=function(e){var t=S(e.to),n=S(this.props.to);C(t,n)?G()(!1,"You tried to redirect to the same route you're currently on: \""+n.pathname+n.search+'"'):this.perform()},t.prototype.computeTo=function(e){var t=e.computedMatch,n=e.to;return t?"string"==typeof n?Re(n,t.params):ze({},n,{pathname:Re(n.pathname,t.params)}):n},t.prototype.perform=function(){var e=this.context.router.history,t=this.props.push,n=this.computeTo(this.props);t?e.push(n):e.replace(n)},t.prototype.render=function(){return null},t}(o.a.Component);Ie.propTypes={computedMatch:Y.a.object,push:Y.a.bool,from:Y.a.string,to:Y.a.oneOfType([Y.a.string,Y.a.object]).isRequired},Ie.defaultProps={push:!1},Ie.contextTypes={router:Y.a.shape({history:Y.a.shape({push:Y.a.func.isRequired,replace:Y.a.func.isRequired}).isRequired,staticContext:Y.a.object}).isRequired};var Be=Ie,He=Object.assign||function(e){for(var t=1;t",e)}},Xe=function(){},Je=function(e){function t(){var n,r;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);for(var i=arguments.length,a=Array(i),o=0;o ignores the history prop. To use a custom history, use `import { Router }` instead of `import { StaticRouter as Router }`.")},t.prototype.render=function(){var e=this.props,t=e.basename,n=(e.context,e.location),r=function(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}(e,["basename","context","location"]),i={createHref:this.createHref,action:"POP",location:function(e,t){if(!e)return t;var n=Ue(e);return 0!==t.pathname.indexOf(n)?t:He({},t,{pathname:t.pathname.substr(n.length)})}(t,S(n)),push:this.handlePush,replace:this.handleReplace,go:Ge("go"),goBack:Ge("goBack"),goForward:Ge("goForward"),listen:this.handleListen,block:this.handleBlock};return o.a.createElement(ee,He({},r,{history:i}))},t}(o.a.Component);Je.propTypes={basename:Y.a.string,context:Y.a.object.isRequired,location:Y.a.oneOfType([Y.a.string,Y.a.object])},Je.defaultProps={basename:"",location:"/"},Je.childContextTypes={router:Y.a.object.isRequired};var Ke=Je;var Ye=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),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,e.apply(this,arguments))}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),t.prototype.componentWillMount=function(){J()(this.context.router,"You should not use outside a ")},t.prototype.componentWillReceiveProps=function(e){G()(!(e.location&&!this.props.location),' elements should not change from uncontrolled to controlled (or vice versa). You initially used no "location" prop and then provided one on a subsequent render.'),G()(!(!e.location&&this.props.location),' elements should not change from controlled to uncontrolled (or vice versa). You provided a "location" prop initially but omitted it on a subsequent render.')},t.prototype.render=function(){var e=this.context.router.route,t=this.props.children,n=this.props.location||e.location,r=void 0,i=void 0;return o.a.Children.forEach(t,function(t){if(null==r&&o.a.isValidElement(t)){var a=t.props,s=a.path,u=a.exact,c=a.strict,l=a.sensitive,f=a.from,h=s||f;i=t,r=Ee(n.pathname,{path:h,exact:u,strict:c,sensitive:l},e.match)}}),r?o.a.cloneElement(i,{location:n,computedMatch:r}):null},t}(o.a.Component);Ye.contextTypes={router:Y.a.shape({route:Y.a.object.isRequired}).isRequired},Ye.propTypes={children:Y.a.node,location:Y.a.object};var $e=Ye,Ze=Re,Qe=Ee,et=n(62),tt=n.n(et),nt=Object.assign||function(e){for(var t=1;t=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}(t,["wrappedComponentRef"]);return o.a.createElement(Ae,{children:function(t){return o.a.createElement(e,nt({},r,t,{ref:n}))}})};return t.displayName="withRouter("+(e.displayName||e.name)+")",t.WrappedComponent=e,t.propTypes={wrappedComponentRef:Y.a.func},tt()(t,e)};n.d(t,"BrowserRouter",function(){return ie}),n.d(t,"HashRouter",function(){return se}),n.d(t,"Link",function(){return de}),n.d(t,"MemoryRouter",function(){return ye}),n.d(t,"NavLink",function(){return Me}),n.d(t,"Prompt",function(){return je}),n.d(t,"Redirect",function(){return Be}),n.d(t,"Route",function(){return De}),n.d(t,"Router",function(){return te}),n.d(t,"StaticRouter",function(){return Ke}),n.d(t,"Switch",function(){return $e}),n.d(t,"generatePath",function(){return Ze}),n.d(t,"matchPath",function(){return Qe}),n.d(t,"withRouter",function(){return rt})},function(e,t,n){"use strict";e.exports=function(e,t){var n=[],i=-1,a=e.length;t&&n.push(r("text","\n"));for(;++i1)for(var n=1;n=t.length?{value:void 0,done:!0}:(e=r(t,n),this._i+=e.length,{value:e,done:!1})})},function(e,t,n){e.exports=function(){"use strict";var e={childContextTypes:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},t={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},n=Object.defineProperty,r=Object.getOwnPropertyNames,i=Object.getOwnPropertySymbols,a=Object.getOwnPropertyDescriptor,o=Object.getPrototypeOf,s=o&&o(Object);return function u(c,l,f){if("string"!=typeof l){if(s){var h=o(l);h&&h!==s&&u(c,h,f)}var p=r(l);i&&(p=p.concat(i(l)));for(var d=0;d=55296&&s<=57343){if(s>=55296&&s<=56319&&a+1=56320&&u<=57343){l+=encodeURIComponent(e[a]+e[a+1]),a++;continue}l+="%EF%BF%BD"}else l+=encodeURIComponent(e[a]);return l}i.defaultChars=";/?:@&=+$,-_.!~*'()#",i.componentChars="-_.!~*'()",e.exports=i},function(e,t,n){"use strict"; /*! * repeat-string * * Copyright (c) 2014-2015, Jon Schlinkert. * Licensed under the MIT License. - */var r,i="";e.exports=function(e,t){if("string"!=typeof e)throw new TypeError("expected a string");if(1===t)return e;if(2===t)return e+e;var n=e.length*t;if(r!==e||void 0===r)r=e,i="";else if(i.length>=n)return i.substr(0,n);for(;n>i.length&&t>1;)1&t&&(i+=e),t>>=1,e+=e;return i=(i+=e).substr(0,n)}},function(e,t,n){"use strict";e.exports=s;var r=n(143),i=!0,o="skip",a=!1;function s(e,t,n,s){function u(e,c,l){var f;return c=c||(l?0:null),t&&e.type!==t&&!r(t,e,c,l||null)||(f=n(e,c,l||null)),f===a?f:e.children&&f!==o&&function(e,t){var n,r,o=s?-1:1,c=(s?e.length:-1)+o;for(;c>-1&&c=48&&t<=57}},function(e,t){var n=e.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},function(e,t,n){"use strict";var r=n(45);e.exports=r.DEFAULT=new r({include:[n(54)],explicit:[n(420),n(419),n(418)]})},function(e,t){var n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(e){"object"==typeof window&&(n=window)}e.exports=n},function(e,t,n){"use strict";const r=n(159),i=n(95);e.exports=function(e){const t=Object.assign({},e);return t.delimiters=i.arrayify(t.delims||t.delimiters||"---"),1===t.delimiters.length&&t.delimiters.push(t.delimiters[0]),t.language=(t.language||t.lang||"yaml").toLowerCase(),t.engines=Object.assign({},r,t.parsers,t.engines),t}},function(e,t,n){"use strict";t.__esModule=!0;var r=function(e){return e&&e.__esModule?e:{default:e}}(n(171));t.default=function(e,t,n){return t in e?(0,r.default)(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.OneOrMoreNumbers=t.breakpoints=void 0;var r=l(n(71)),i=l(n(5)),o=l(n(3));t.oneOrMoreOf=h,t.createResponsiveMapper=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:d,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,r=(0,u.default)({breakpoints:f,props:e,getter:t});return r.propTypes=n||e.reduce(function(e,t){return e[t]=p,e},{}),r},t.composeWithPropTypes=function(){for(var e=arguments.length,t=Array(e),n=0;n=n)return i.substr(0,n);for(;n>i.length&&t>1;)1&t&&(i+=e),t>>=1,e+=e;return i=(i+=e).substr(0,n)}},function(e,t,n){"use strict";e.exports=s;var r=n(140),i=!0,a="skip",o=!1;function s(e,t,n,s){function u(e,c,l){var f;return c=c||(l?0:null),t&&e.type!==t&&!r(t,e,c,l||null)||(f=n(e,c,l||null)),f===o?f:e.children&&f!==a&&function(e,t){var n,r,a=s?-1:1,c=(s?e.length:-1)+a;for(;c>-1&&c=48&&t<=57}},function(e,t){var n=e.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},function(e,t,n){"use strict";var r=n(45);e.exports=r.DEFAULT=new r({include:[n(54)],explicit:[n(424),n(423),n(422)]})},function(e,t){var n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(e){"object"==typeof window&&(n=window)}e.exports=n},function(e,t,n){"use strict";const r=n(157),i=n(92);e.exports=function(e){const t=Object.assign({},e);return t.delimiters=i.arrayify(t.delims||t.delimiters||"---"),1===t.delimiters.length&&t.delimiters.push(t.delimiters[0]),t.language=(t.language||t.lang||"yaml").toLowerCase(),t.engines=Object.assign({},r,t.parsers,t.engines),t}},function(e,t,n){"use strict"; /* object-assign (c) Sindre Sorhus @license MIT -*/var r=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable;e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach(function(e){r[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var n,a,s=function(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}(e),u=1;u65535&&(M+=l((D-=65536)>>>10|55296),D=56320|1023&D),D=M+l(D))):j!==p&&O(w,I)),D?(se(),R=oe(),Q=H-1,te+=H-N+1,ie.push(D),(z=oe()).offset++,W&&W.call(J,D,{start:R,end:z},e.slice(N-1,H)),R=z):(s=e.slice(N-1,H),re+=s,te+=s.length,Q=H-1)}return ie.join("");function oe(){return{line:ne,column:te,offset:Q+(Y.offset||0)}}function ae(t){return e.charAt(t)}function se(){re&&(ie.push(re),q&&q.call(X,re,{start:R,end:oe()}),re="")}}(e,s)};var c={}.hasOwnProperty,l=String.fromCharCode,f=Function.prototype,h={warning:null,reference:null,text:null,warningContext:null,referenceContext:null,textContext:null,position:{},additional:null,attribute:!1,nonTerminated:!0},p="named",d="hexadecimal",m="decimal",g={};g[d]=16,g[m]=10;var v={};v[p]=u,v[m]=a,v[d]=s;var y=1,b=2,x=3,w=4,k=5,E=6,_=7,S={};function C(e){return e>=55296&&e<=57343||e>1114111}function A(e){return e>=1&&e<=8||11===e||e>=13&&e<=31||e>=127&&e<=159||e>=64976&&e<=65007||65535==(65535&e)||65534==(65535&e)}S[y]="Named character references must be terminated by a semicolon",S[b]="Numeric character references must be terminated by a semicolon",S[x]="Named character references cannot be empty",S[w]="Numeric character references cannot be empty",S[k]="Named character references must be known",S[E]="Numeric character references cannot be disallowed",S[_]="Numeric character references cannot be outside the permissible Unicode range"},function(e,t,n){"use strict";(function(e){Object.defineProperty(t,"__esModule",{value:!0}),t.flatten=t.cartesianProduct=t.extendDefaultProps=t.displayObj=t.toSrcPath=t.titleize=t.isIndex=t.introPage=t.log=void 0;var r=c(n(75)),i=c(n(71)),o=c(n(5)),a=c(n(74)),s=c(n(15)),u=n(129);function c(e){return e&&e.__esModule?e:{default:e}}var l=function(e){return e.join(".")},f=function(e){return"object"===(void 0===e?"undefined":(0,r.default)(e))&&!function(e){return Array.isArray(e)}(e)};t.log=function(t){return e.env.VERBOSE&&console.log(t)},t.introPage=function(e){return e[ROOT_LEVEL_FILE]&&e[ROOT_LEVEL_FILE].find(function(e){return"introduction"===e.name})},t.isIndex=function(e){return/index\.md/.test(e)},t.titleize=function(e){return e.replace(/(?:^|\s|-)\S/g,function(e){return e.toUpperCase()}).replace(/(-|_)/g," ")},t.toSrcPath=function(e,t){return t.replace(/\md$/,"js").replace(e,"src").replace("components/","")},t.displayObj=function(e){return(0,s.default)(e).map(function(t){return t+"="+e[t]}).join(",")},t.extendDefaultProps=function(e,t){e.defaultProps=(0,a.default)({},e.defaultProps||{},t)},t.cartesianProduct=function(e){e.theme;var t=(0,o.default)(e,["theme"]),n=(0,u.reduce)((0,u.pipe)(u.xprod,(0,u.map)(u.unnest)),[[]]),r=(0,s.default)(t).reduce(function(e,n){return e.concat([function(e){return Array.isArray(e)?e:[e]}(t[n]).map(function(e){return(0,i.default)({},n,e)})])},[]);return(0,u.map)(u.mergeAll,n(r))},t.flatten=function e(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[];return(0,s.default)(t).reduce(function(r,i){var o=t[i],s=n.concat([i]);return function(e){return"string"==typeof e}(o)?(r[l(s)]=o,r):f(o)?(0,a.default)(r,e(o,s)):(o.forEach(function(e,t){var n=l(s.concat([t]));r[n]=e}),r)},{})}}).call(this,n(56))},function(e,t){e.exports=function(e){try{return!!e()}catch(e){return!0}}},function(e,t,n){e.exports=!n(90)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(e,t){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},function(e,t){var n=e.exports={version:"2.5.3"};"number"==typeof __e&&(__e=n)},function(e,t){var n=Object.prototype.toString;function r(e){return e.constructor?e.constructor.name:null}e.exports=function(e){if(void 0===e)return"undefined";if(null===e)return"null";var t=typeof e;if("boolean"===t)return"boolean";if("string"===t)return"string";if("number"===t)return"number";if("symbol"===t)return"symbol";if("function"===t)return function(e,t){return"GeneratorFunction"===r(e)}(e)?"generatorfunction":"function";if(function(e){return Array.isArray?Array.isArray(e):e instanceof Array}(e))return"array";if(function(e){if(e.constructor&&"function"==typeof e.constructor.isBuffer)return e.constructor.isBuffer(e);return!1}(e))return"buffer";if(function(e){try{if("number"==typeof e.length&&"function"==typeof e.callee)return!0}catch(e){if(-1!==e.message.indexOf("callee"))return!0}return!1}(e))return"arguments";if(function(e){return e instanceof Date||"function"==typeof e.toDateString&&"function"==typeof e.getDate&&"function"==typeof e.setDate}(e))return"date";if(function(e){return e instanceof Error||"string"==typeof e.message&&e.constructor&&"number"==typeof e.constructor.stackTraceLimit}(e))return"error";if(function(e){return e instanceof RegExp||"string"==typeof e.flags&&"boolean"==typeof e.ignoreCase&&"boolean"==typeof e.multiline&&"boolean"==typeof e.global}(e))return"regexp";switch(r(e)){case"Symbol":return"symbol";case"Promise":return"promise";case"WeakMap":return"weakmap";case"WeakSet":return"weakset";case"Map":return"map";case"Set":return"set";case"Int8Array":return"int8array";case"Uint8Array":return"uint8array";case"Uint8ClampedArray":return"uint8clampedarray";case"Int16Array":return"int16array";case"Uint16Array":return"uint16array";case"Int32Array":return"int32array";case"Uint32Array":return"uint32array";case"Float32Array":return"float32array";case"Float64Array":return"float64array"}if(function(e){return"function"==typeof e.throw&&"function"==typeof e.return&&"function"==typeof e.next}(e))return"generator";switch(t=n.call(e)){case"[object Object]":return"object";case"[object Map Iterator]":return"mapiterator";case"[object Set Iterator]":return"setiterator";case"[object String Iterator]":return"stringiterator";case"[object Array Iterator]":return"arrayiterator"}return t.slice(8,-1).toLowerCase().replace(/\s/g,"")}},function(e,t,n){"use strict";(function(e){const r=n(415),i=n(94);t.define=function(e,t,n){Reflect.defineProperty(e,t,{enumerable:!1,configurable:!0,writable:!0,value:n})},t.isBuffer=(e=>"buffer"===i(e)),t.isObject=(e=>"object"===i(e)),t.toBuffer=function(t){return"string"==typeof t?e.from(t):t},t.toString=function(e){if(t.isBuffer(e))return r(String(e));if("string"!=typeof e)throw new TypeError("expected input to be a string or buffer");return r(e)},t.arrayify=function(e){return e?Array.isArray(e)?e:[e]:[]},t.startsWith=function(e,t,n){return"number"!=typeof n&&(n=t.length),e.slice(0,n)===t}}).call(this,n(96).Buffer)},function(e,t,n){"use strict";(function(e){ +*/var r=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,a=Object.prototype.propertyIsEnumerable;e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach(function(e){r[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var n,o,s=function(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}(e),u=1;u65535&&(M+=l((D-=65536)>>>10|55296),D=56320|1023&D),D=M+l(D))):N!==p&&O(w,B)),D?(se(),z=ae(),Q=H-1,te+=H-L+1,ie.push(D),(I=ae()).offset++,W&&W.call(J,D,{start:z,end:I},e.slice(L-1,H)),z=I):(s=e.slice(L-1,H),re+=s,te+=s.length,Q=H-1)}return ie.join("");function ae(){return{line:ne,column:te,offset:Q+(Y.offset||0)}}function oe(t){return e.charAt(t)}function se(){re&&(ie.push(re),q&&q.call(X,re,{start:z,end:ae()}),re="")}}(e,s)};var c={}.hasOwnProperty,l=String.fromCharCode,f=Function.prototype,h={warning:null,reference:null,text:null,warningContext:null,referenceContext:null,textContext:null,position:{},additional:null,attribute:!1,nonTerminated:!0},p="named",d="hexadecimal",m="decimal",g={};g[d]=16,g[m]=10;var y={};y[p]=u,y[m]=o,y[d]=s;var v=1,b=2,x=3,w=4,E=5,k=6,_=7,S={};function C(e){return e>=55296&&e<=57343||e>1114111}function A(e){return e>=1&&e<=8||11===e||e>=13&&e<=31||e>=127&&e<=159||e>=64976&&e<=65007||65535==(65535&e)||65534==(65535&e)}S[v]="Named character references must be terminated by a semicolon",S[b]="Numeric character references must be terminated by a semicolon",S[x]="Named character references cannot be empty",S[w]="Numeric character references cannot be empty",S[E]="Named character references must be known",S[k]="Numeric character references cannot be disallowed",S[_]="Numeric character references cannot be outside the permissible Unicode range"},function(e,t,n){"use strict";(function(e){Object.defineProperty(t,"__esModule",{value:!0}),t.flatten=t.cartesianProduct=t.extendDefaultProps=t.displayObj=t.toSrcPath=t.titleize=t.isIndex=t.introPage=t.log=void 0;var r=c(n(73)),i=c(n(99)),a=c(n(6)),o=c(n(72)),s=c(n(14)),u=n(199);function c(e){return e&&e.__esModule?e:{default:e}}var l=function(e){return e.join(".")},f=function(e){return"object"===(void 0===e?"undefined":(0,r.default)(e))&&!function(e){return Array.isArray(e)}(e)};t.log=function(t){return e.env.VERBOSE&&console.log(t)},t.introPage=function(e){return e[ROOT_LEVEL_FILE]&&e[ROOT_LEVEL_FILE].find(function(e){return"introduction"===e.name})},t.isIndex=function(e){return/index\.md/.test(e)},t.titleize=function(e){return e.replace(/(?:^|\s|-)\S/g,function(e){return e.toUpperCase()}).replace(/(-|_)/g," ")},t.toSrcPath=function(e,t){return t.replace(/\md$/,"js").replace(e,"src").replace("components/","")},t.displayObj=function(e){return(0,s.default)(e).map(function(t){return t+"="+e[t]}).join(",")},t.extendDefaultProps=function(e,t){e.defaultProps=(0,o.default)({},e.defaultProps||{},t)},t.cartesianProduct=function(e){e.theme;var t=(0,a.default)(e,["theme"]),n=(0,u.reduce)((0,u.pipe)(u.xprod,(0,u.map)(u.unnest)),[[]]),r=(0,s.default)(t).reduce(function(e,n){return e.concat([function(e){return Array.isArray(e)?e:[e]}(t[n]).map(function(e){return(0,i.default)({},n,e)})])},[]);return(0,u.map)(u.mergeAll,n(r))},t.flatten=function e(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[];return(0,s.default)(t).reduce(function(r,i){var a=t[i],s=n.concat([i]);return function(e){return"string"==typeof e}(a)?(r[l(s)]=a,r):f(a)?(0,o.default)(r,e(a,s)):(a.forEach(function(e,t){var n=l(s.concat([t]));r[n]=e}),r)},{})}}).call(this,n(56))},function(e,t){e.exports=function(e){try{return!!e()}catch(e){return!0}}},function(e,t,n){e.exports=!n(87)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(e,t){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},function(e,t){var n=e.exports={version:"2.5.3"};"number"==typeof __e&&(__e=n)},function(e,t){var n=Object.prototype.toString;function r(e){return e.constructor?e.constructor.name:null}e.exports=function(e){if(void 0===e)return"undefined";if(null===e)return"null";var t=typeof e;if("boolean"===t)return"boolean";if("string"===t)return"string";if("number"===t)return"number";if("symbol"===t)return"symbol";if("function"===t)return function(e,t){return"GeneratorFunction"===r(e)}(e)?"generatorfunction":"function";if(function(e){return Array.isArray?Array.isArray(e):e instanceof Array}(e))return"array";if(function(e){if(e.constructor&&"function"==typeof e.constructor.isBuffer)return e.constructor.isBuffer(e);return!1}(e))return"buffer";if(function(e){try{if("number"==typeof e.length&&"function"==typeof e.callee)return!0}catch(e){if(-1!==e.message.indexOf("callee"))return!0}return!1}(e))return"arguments";if(function(e){return e instanceof Date||"function"==typeof e.toDateString&&"function"==typeof e.getDate&&"function"==typeof e.setDate}(e))return"date";if(function(e){return e instanceof Error||"string"==typeof e.message&&e.constructor&&"number"==typeof e.constructor.stackTraceLimit}(e))return"error";if(function(e){return e instanceof RegExp||"string"==typeof e.flags&&"boolean"==typeof e.ignoreCase&&"boolean"==typeof e.multiline&&"boolean"==typeof e.global}(e))return"regexp";switch(r(e)){case"Symbol":return"symbol";case"Promise":return"promise";case"WeakMap":return"weakmap";case"WeakSet":return"weakset";case"Map":return"map";case"Set":return"set";case"Int8Array":return"int8array";case"Uint8Array":return"uint8array";case"Uint8ClampedArray":return"uint8clampedarray";case"Int16Array":return"int16array";case"Uint16Array":return"uint16array";case"Int32Array":return"int32array";case"Uint32Array":return"uint32array";case"Float32Array":return"float32array";case"Float64Array":return"float64array"}if(function(e){return"function"==typeof e.throw&&"function"==typeof e.return&&"function"==typeof e.next}(e))return"generator";switch(t=n.call(e)){case"[object Object]":return"object";case"[object Map Iterator]":return"mapiterator";case"[object Set Iterator]":return"setiterator";case"[object String Iterator]":return"stringiterator";case"[object Array Iterator]":return"arrayiterator"}return t.slice(8,-1).toLowerCase().replace(/\s/g,"")}},function(e,t,n){"use strict";(function(e){const r=n(419),i=n(91);t.define=function(e,t,n){Reflect.defineProperty(e,t,{enumerable:!1,configurable:!0,writable:!0,value:n})},t.isBuffer=(e=>"buffer"===i(e)),t.isObject=(e=>"object"===i(e)),t.toBuffer=function(t){return"string"==typeof t?e.from(t):t},t.toString=function(e){if(t.isBuffer(e))return r(String(e));if("string"!=typeof e)throw new TypeError("expected input to be a string or buffer");return r(e)},t.arrayify=function(e){return e?Array.isArray(e)?e:[e]:[]},t.startsWith=function(e,t,n){return"number"!=typeof n&&(n=t.length),e.slice(0,n)===t}}).call(this,n(93).Buffer)},function(e,t,n){"use strict";(function(e){ /*! * The buffer module from node.js, for the browser. * * @author Feross Aboukhadijeh * @license MIT */ -var r=n(426),i=n(425),o=n(424);function a(){return u.TYPED_ARRAY_SUPPORT?2147483647:1073741823}function s(e,t){if(a()=a())throw new RangeError("Attempt to allocate Buffer larger than maximum size: 0x"+a().toString(16)+" bytes");return 0|e}function d(e,t){if(u.isBuffer(e))return e.length;if("undefined"!=typeof ArrayBuffer&&"function"==typeof ArrayBuffer.isView&&(ArrayBuffer.isView(e)||e instanceof ArrayBuffer))return e.byteLength;"string"!=typeof e&&(e=""+e);var n=e.length;if(0===n)return 0;for(var r=!1;;)switch(t){case"ascii":case"latin1":case"binary":return n;case"utf8":case"utf-8":case void 0:return I(e).length;case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":return 2*n;case"hex":return n>>>1;case"base64":return H(e).length;default:if(r)return I(e).length;t=(""+t).toLowerCase(),r=!0}}function m(e,t,n){var r=e[t];e[t]=e[n],e[n]=r}function g(e,t,n,r,i){if(0===e.length)return-1;if("string"==typeof n?(r=n,n=0):n>2147483647?n=2147483647:n<-2147483648&&(n=-2147483648),n=+n,isNaN(n)&&(n=i?0:e.length-1),n<0&&(n=e.length+n),n>=e.length){if(i)return-1;n=e.length-1}else if(n<0){if(!i)return-1;n=0}if("string"==typeof t&&(t=u.from(t,r)),u.isBuffer(t))return 0===t.length?-1:v(e,t,n,r,i);if("number"==typeof t)return t&=255,u.TYPED_ARRAY_SUPPORT&&"function"==typeof Uint8Array.prototype.indexOf?i?Uint8Array.prototype.indexOf.call(e,t,n):Uint8Array.prototype.lastIndexOf.call(e,t,n):v(e,[t],n,r,i);throw new TypeError("val must be string, number or Buffer")}function v(e,t,n,r,i){var o,a=1,s=e.length,u=t.length;if(void 0!==r&&("ucs2"===(r=String(r).toLowerCase())||"ucs-2"===r||"utf16le"===r||"utf-16le"===r)){if(e.length<2||t.length<2)return-1;a=2,s/=2,u/=2,n/=2}function c(e,t){return 1===a?e[t]:e.readUInt16BE(t*a)}if(i){var l=-1;for(o=n;os&&(n=s-u),o=n;o>=0;o--){for(var f=!0,h=0;hi&&(r=i):r=i;var o=t.length;if(o%2!=0)throw new TypeError("Invalid hex string");r>o/2&&(r=o/2);for(var a=0;a>8,i=n%256,o.push(i),o.push(r);return o}(t,e.length-n),e,n,r)}function _(e,t,n){return 0===t&&n===e.length?r.fromByteArray(e):r.fromByteArray(e.slice(t,n))}function S(e,t,n){n=Math.min(e.length,n);for(var r=[],i=t;i239?4:c>223?3:c>191?2:1;if(i+f<=n)switch(f){case 1:c<128&&(l=c);break;case 2:128==(192&(o=e[i+1]))&&(u=(31&c)<<6|63&o)>127&&(l=u);break;case 3:o=e[i+1],a=e[i+2],128==(192&o)&&128==(192&a)&&(u=(15&c)<<12|(63&o)<<6|63&a)>2047&&(u<55296||u>57343)&&(l=u);break;case 4:o=e[i+1],a=e[i+2],s=e[i+3],128==(192&o)&&128==(192&a)&&128==(192&s)&&(u=(15&c)<<18|(63&o)<<12|(63&a)<<6|63&s)>65535&&u<1114112&&(l=u)}null===l?(l=65533,f=1):l>65535&&(l-=65536,r.push(l>>>10&1023|55296),l=56320|1023&l),r.push(l),i+=f}return function(e){var t=e.length;if(t<=C)return String.fromCharCode.apply(String,e);var n="",r=0;for(;rthis.length)return"";if((void 0===n||n>this.length)&&(n=this.length),n<=0)return"";if((n>>>=0)<=(t>>>=0))return"";for(e||(e="utf8");;)switch(e){case"hex":return T(this,t,n);case"utf8":case"utf-8":return S(this,t,n);case"ascii":return A(this,t,n);case"latin1":case"binary":return D(this,t,n);case"base64":return _(this,t,n);case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":return O(this,t,n);default:if(r)throw new TypeError("Unknown encoding: "+e);e=(e+"").toLowerCase(),r=!0}}.apply(this,arguments)},u.prototype.equals=function(e){if(!u.isBuffer(e))throw new TypeError("Argument must be a Buffer");return this===e||0===u.compare(this,e)},u.prototype.inspect=function(){var e="",n=t.INSPECT_MAX_BYTES;return this.length>0&&(e=this.toString("hex",0,n).match(/.{2}/g).join(" "),this.length>n&&(e+=" ... ")),""},u.prototype.compare=function(e,t,n,r,i){if(!u.isBuffer(e))throw new TypeError("Argument must be a Buffer");if(void 0===t&&(t=0),void 0===n&&(n=e?e.length:0),void 0===r&&(r=0),void 0===i&&(i=this.length),t<0||n>e.length||r<0||i>this.length)throw new RangeError("out of range index");if(r>=i&&t>=n)return 0;if(r>=i)return-1;if(t>=n)return 1;if(t>>>=0,n>>>=0,r>>>=0,i>>>=0,this===e)return 0;for(var o=i-r,a=n-t,s=Math.min(o,a),c=this.slice(r,i),l=e.slice(t,n),f=0;fi)&&(n=i),e.length>0&&(n<0||t<0)||t>this.length)throw new RangeError("Attempt to write outside buffer bounds");r||(r="utf8");for(var o=!1;;)switch(r){case"hex":return y(this,e,t,n);case"utf8":case"utf-8":return b(this,e,t,n);case"ascii":return x(this,e,t,n);case"latin1":case"binary":return w(this,e,t,n);case"base64":return k(this,e,t,n);case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":return E(this,e,t,n);default:if(o)throw new TypeError("Unknown encoding: "+r);r=(""+r).toLowerCase(),o=!0}},u.prototype.toJSON=function(){return{type:"Buffer",data:Array.prototype.slice.call(this._arr||this,0)}};var C=4096;function A(e,t,n){var r="";n=Math.min(e.length,n);for(var i=t;ir)&&(n=r);for(var i="",o=t;on)throw new RangeError("Trying to access beyond buffer length")}function M(e,t,n,r,i,o){if(!u.isBuffer(e))throw new TypeError('"buffer" argument must be a Buffer instance');if(t>i||te.length)throw new RangeError("Index out of range")}function L(e,t,n,r){t<0&&(t=65535+t+1);for(var i=0,o=Math.min(e.length-n,2);i>>8*(r?i:1-i)}function F(e,t,n,r){t<0&&(t=4294967295+t+1);for(var i=0,o=Math.min(e.length-n,4);i>>8*(r?i:3-i)&255}function N(e,t,n,r,i,o){if(n+r>e.length)throw new RangeError("Index out of range");if(n<0)throw new RangeError("Index out of range")}function j(e,t,n,r,o){return o||N(e,0,n,4),i.write(e,t,n,r,23,4),n+4}function B(e,t,n,r,o){return o||N(e,0,n,8),i.write(e,t,n,r,52,8),n+8}u.prototype.slice=function(e,t){var n,r=this.length;if(e=~~e,t=void 0===t?r:~~t,e<0?(e+=r)<0&&(e=0):e>r&&(e=r),t<0?(t+=r)<0&&(t=0):t>r&&(t=r),t0&&(i*=256);)r+=this[e+--t]*i;return r},u.prototype.readUInt8=function(e,t){return t||P(e,1,this.length),this[e]},u.prototype.readUInt16LE=function(e,t){return t||P(e,2,this.length),this[e]|this[e+1]<<8},u.prototype.readUInt16BE=function(e,t){return t||P(e,2,this.length),this[e]<<8|this[e+1]},u.prototype.readUInt32LE=function(e,t){return t||P(e,4,this.length),(this[e]|this[e+1]<<8|this[e+2]<<16)+16777216*this[e+3]},u.prototype.readUInt32BE=function(e,t){return t||P(e,4,this.length),16777216*this[e]+(this[e+1]<<16|this[e+2]<<8|this[e+3])},u.prototype.readIntLE=function(e,t,n){e|=0,t|=0,n||P(e,t,this.length);for(var r=this[e],i=1,o=0;++o=(i*=128)&&(r-=Math.pow(2,8*t)),r},u.prototype.readIntBE=function(e,t,n){e|=0,t|=0,n||P(e,t,this.length);for(var r=t,i=1,o=this[e+--r];r>0&&(i*=256);)o+=this[e+--r]*i;return o>=(i*=128)&&(o-=Math.pow(2,8*t)),o},u.prototype.readInt8=function(e,t){return t||P(e,1,this.length),128&this[e]?-1*(255-this[e]+1):this[e]},u.prototype.readInt16LE=function(e,t){t||P(e,2,this.length);var n=this[e]|this[e+1]<<8;return 32768&n?4294901760|n:n},u.prototype.readInt16BE=function(e,t){t||P(e,2,this.length);var n=this[e+1]|this[e]<<8;return 32768&n?4294901760|n:n},u.prototype.readInt32LE=function(e,t){return t||P(e,4,this.length),this[e]|this[e+1]<<8|this[e+2]<<16|this[e+3]<<24},u.prototype.readInt32BE=function(e,t){return t||P(e,4,this.length),this[e]<<24|this[e+1]<<16|this[e+2]<<8|this[e+3]},u.prototype.readFloatLE=function(e,t){return t||P(e,4,this.length),i.read(this,e,!0,23,4)},u.prototype.readFloatBE=function(e,t){return t||P(e,4,this.length),i.read(this,e,!1,23,4)},u.prototype.readDoubleLE=function(e,t){return t||P(e,8,this.length),i.read(this,e,!0,52,8)},u.prototype.readDoubleBE=function(e,t){return t||P(e,8,this.length),i.read(this,e,!1,52,8)},u.prototype.writeUIntLE=function(e,t,n,r){(e=+e,t|=0,n|=0,r)||M(this,e,t,n,Math.pow(2,8*n)-1,0);var i=1,o=0;for(this[t]=255&e;++o=0&&(o*=256);)this[t+i]=e/o&255;return t+n},u.prototype.writeUInt8=function(e,t,n){return e=+e,t|=0,n||M(this,e,t,1,255,0),u.TYPED_ARRAY_SUPPORT||(e=Math.floor(e)),this[t]=255&e,t+1},u.prototype.writeUInt16LE=function(e,t,n){return e=+e,t|=0,n||M(this,e,t,2,65535,0),u.TYPED_ARRAY_SUPPORT?(this[t]=255&e,this[t+1]=e>>>8):L(this,e,t,!0),t+2},u.prototype.writeUInt16BE=function(e,t,n){return e=+e,t|=0,n||M(this,e,t,2,65535,0),u.TYPED_ARRAY_SUPPORT?(this[t]=e>>>8,this[t+1]=255&e):L(this,e,t,!1),t+2},u.prototype.writeUInt32LE=function(e,t,n){return e=+e,t|=0,n||M(this,e,t,4,4294967295,0),u.TYPED_ARRAY_SUPPORT?(this[t+3]=e>>>24,this[t+2]=e>>>16,this[t+1]=e>>>8,this[t]=255&e):F(this,e,t,!0),t+4},u.prototype.writeUInt32BE=function(e,t,n){return e=+e,t|=0,n||M(this,e,t,4,4294967295,0),u.TYPED_ARRAY_SUPPORT?(this[t]=e>>>24,this[t+1]=e>>>16,this[t+2]=e>>>8,this[t+3]=255&e):F(this,e,t,!1),t+4},u.prototype.writeIntLE=function(e,t,n,r){if(e=+e,t|=0,!r){var i=Math.pow(2,8*n-1);M(this,e,t,n,i-1,-i)}var o=0,a=1,s=0;for(this[t]=255&e;++o>0)-s&255;return t+n},u.prototype.writeIntBE=function(e,t,n,r){if(e=+e,t|=0,!r){var i=Math.pow(2,8*n-1);M(this,e,t,n,i-1,-i)}var o=n-1,a=1,s=0;for(this[t+o]=255&e;--o>=0&&(a*=256);)e<0&&0===s&&0!==this[t+o+1]&&(s=1),this[t+o]=(e/a>>0)-s&255;return t+n},u.prototype.writeInt8=function(e,t,n){return e=+e,t|=0,n||M(this,e,t,1,127,-128),u.TYPED_ARRAY_SUPPORT||(e=Math.floor(e)),e<0&&(e=255+e+1),this[t]=255&e,t+1},u.prototype.writeInt16LE=function(e,t,n){return e=+e,t|=0,n||M(this,e,t,2,32767,-32768),u.TYPED_ARRAY_SUPPORT?(this[t]=255&e,this[t+1]=e>>>8):L(this,e,t,!0),t+2},u.prototype.writeInt16BE=function(e,t,n){return e=+e,t|=0,n||M(this,e,t,2,32767,-32768),u.TYPED_ARRAY_SUPPORT?(this[t]=e>>>8,this[t+1]=255&e):L(this,e,t,!1),t+2},u.prototype.writeInt32LE=function(e,t,n){return e=+e,t|=0,n||M(this,e,t,4,2147483647,-2147483648),u.TYPED_ARRAY_SUPPORT?(this[t]=255&e,this[t+1]=e>>>8,this[t+2]=e>>>16,this[t+3]=e>>>24):F(this,e,t,!0),t+4},u.prototype.writeInt32BE=function(e,t,n){return e=+e,t|=0,n||M(this,e,t,4,2147483647,-2147483648),e<0&&(e=4294967295+e+1),u.TYPED_ARRAY_SUPPORT?(this[t]=e>>>24,this[t+1]=e>>>16,this[t+2]=e>>>8,this[t+3]=255&e):F(this,e,t,!1),t+4},u.prototype.writeFloatLE=function(e,t,n){return j(this,e,t,!0,n)},u.prototype.writeFloatBE=function(e,t,n){return j(this,e,t,!1,n)},u.prototype.writeDoubleLE=function(e,t,n){return B(this,e,t,!0,n)},u.prototype.writeDoubleBE=function(e,t,n){return B(this,e,t,!1,n)},u.prototype.copy=function(e,t,n,r){if(n||(n=0),r||0===r||(r=this.length),t>=e.length&&(t=e.length),t||(t=0),r>0&&r=this.length)throw new RangeError("sourceStart out of bounds");if(r<0)throw new RangeError("sourceEnd out of bounds");r>this.length&&(r=this.length),e.length-t=0;--i)e[i+t]=this[i+n];else if(o<1e3||!u.TYPED_ARRAY_SUPPORT)for(i=0;i>>=0,n=void 0===n?this.length:n>>>0,e||(e=0),"number"==typeof e)for(o=t;o55295&&n<57344){if(!i){if(n>56319){(t-=3)>-1&&o.push(239,191,189);continue}if(a+1===r){(t-=3)>-1&&o.push(239,191,189);continue}i=n;continue}if(n<56320){(t-=3)>-1&&o.push(239,191,189),i=n;continue}n=65536+(i-55296<<10|n-56320)}else i&&(t-=3)>-1&&o.push(239,191,189);if(i=null,n<128){if((t-=1)<0)break;o.push(n)}else if(n<2048){if((t-=2)<0)break;o.push(n>>6|192,63&n|128)}else if(n<65536){if((t-=3)<0)break;o.push(n>>12|224,n>>6&63|128,63&n|128)}else{if(!(n<1114112))throw new Error("Invalid code point");if((t-=4)<0)break;o.push(n>>18|240,n>>12&63|128,n>>6&63|128,63&n|128)}}return o}function H(e){return r.toByteArray(function(e){if((e=function(e){return e.trim?e.trim():e.replace(/^\s+|\s+$/g,"")}(e).replace(R,"")).length<2)return"";for(;e.length%4!=0;)e+="=";return e}(e))}function V(e,t,n,r){for(var i=0;i=t.length||i>=e.length);++i)t[i+n]=e[i];return i}}).call(this,n(69))},function(e,t,n){"use strict";var r=n(45);e.exports=new r({explicit:[n(436),n(435),n(434)]})},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=c(n(28)),i=c(n(27)),o=c(n(26)),a=c(n(25)),s=c(n(24)),u=c(n(0));function c(e){return e&&e.__esModule?e:{default:e}}var l=function(e){function t(){(0,i.default)(this,t);var e=(0,a.default)(this,(t.__proto__||(0,r.default)(t)).call(this));return e.state={},e}return(0,s.default)(t,e),(0,o.default)(t,[{key:"componentDidCatch",value:function(e){this.setState({err:e})}},{key:"componentWillReceiveProps",value:function(e){e.children!==this.props.children&&this.setState({err:null})}},{key:"render",value:function(){var e=this.state.err;return e?u.default.createElement("pre",null,e.toString()):this.props.children}}]),t}(u.default.Component);t.default=l},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=h(n(28)),i=h(n(27)),o=h(n(26)),a=h(n(25)),s=h(n(24)),u=h(n(0)),c=h(n(39)),l=h(n(168)),f=n(452);h(n(32));function h(e){return e&&e.__esModule?e:{default:e}}var p=function(e){function t(){(0,i.default)(this,t);var e=(0,a.default)(this,(t.__proto__||(0,r.default)(t)).call(this));return e.doc=null,e.win=null,e.div=null,e.getSrc=function(){var t=e.props,n=t.zoom,r=void 0===n?1:n,i=t.css,o=void 0===i?"":i,a=t.head,s="";return a&&(s=(0,f.renderToStaticMarkup)(a)),""+s+"\n
"},e.onLoad=function(t){e.doc=e.root.contentDocument,e.win=e.root.contentWindow,e.update(e.props)},e.update=function(t){var n=t.render,r=t.children;if(e.doc){var i=e.doc.getElementById("app");"function"==typeof n?l.default.render(n({document:e.doc,window:e.win}),i):l.default.render(r,i)}},e}return(0,s.default)(t,e),(0,o.default)(t,[{key:"componentWillReceiveProps",value:function(e){e.children!==this.props.children&&this.update(e)}},{key:"render",value:function(){var e=this,t=this.props,n=t.width,r=t.height,i=t.zoom,o=t.children;return u.default.createElement("iframe",{ref:function(t){return e.root=t},style:{width:n,height:r,zoom:i,pointerEvents:"none",display:"block",margin:0,overflow:"scroll",backgroundColor:"#fff",opacity:o?1:.25,border:0},srcDoc:this.getSrc(),scrolling:"yes",onLoad:this.onLoad})}}]),t}(u.default.Component);p.propTypes={head:c.default.node,zoom:c.default.number,width:c.default.string,height:c.default.string,css:c.default.string},p.defaultProps={zoom:1,width:"100%",height:"100%",css:"body{font-family:system-ui,sans-serif;line-height:1.5}"},t.default=p},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.complexStyle=t.themeGet=t.pseudoStyle=t.responsiveStyle=t.style=t.getValue=t.merge=t.media=t.dec=t.breaks=t.fallbackTheme=t.mq=t.get=t.getWidth=t.arr=t.neg=t.px=t.num=t.is=void 0;var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},i=Object.assign||function(e){for(var t=1;t1?p(e):100*e+"%"},t.get=function(e,t,n){return t.split(".").reduce(function(e,t){return e&&e[t]?e[t]:null},e)||n}),g=t.mq=function(e){return"@media screen and (min-width: "+p(e)+")"},v=t.fallbackTheme=function(e){return i({},s.default,m(e,"theme"))},y=t.breaks=function(e){return[null].concat(function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t=0;r--){var i=e[r];"."===i?e.splice(r,1):".."===i?(e.splice(r,1),n++):n&&(e.splice(r,1),n--)}if(t)for(;n--;n)e.unshift("..");return e}var r=/^(\/?|)([\s\S]*?)((?:\.{1,2}|[^\/]+?|)(\.[^.\/]*|))(?:[\/]*)$/,i=function(e){return r.exec(e).slice(1)};function o(e,t){if(e.filter)return e.filter(t);for(var n=[],r=0;r=-1&&!r;i--){var a=i>=0?arguments[i]:e.cwd();if("string"!=typeof a)throw new TypeError("Arguments to path.resolve must be strings");a&&(t=a+"/"+t,r="/"===a.charAt(0))}return t=n(o(t.split("/"),function(e){return!!e}),!r).join("/"),(r?"/":"")+t||"."},t.normalize=function(e){var r=t.isAbsolute(e),i="/"===a(e,-1);return(e=n(o(e.split("/"),function(e){return!!e}),!r).join("/"))||r||(e="."),e&&i&&(e+="/"),(r?"/":"")+e},t.isAbsolute=function(e){return"/"===e.charAt(0)},t.join=function(){var e=Array.prototype.slice.call(arguments,0);return t.normalize(o(e,function(e,t){if("string"!=typeof e)throw new TypeError("Arguments to path.join must be strings");return e}).join("/"))},t.relative=function(e,n){function r(e){for(var t=0;t=0&&""===e[n];n--);return t>n?[]:e.slice(t,n-t+1)}e=t.resolve(e).substr(1),n=t.resolve(n).substr(1);for(var i=r(e.split("/")),o=r(n.split("/")),a=Math.min(i.length,o.length),s=a,u=0;u0?i(r(e),9007199254740991):0}},function(e,t,n){var r=n(30),i=n(565),o=n(114),a=n(116)("IE_PROTO"),s=function(){},u=function(){var e,t=n(120)("iframe"),r=o.length;for(t.style.display="none",n(183).appendChild(t),t.src="javascript:",(e=t.contentWindow.document).open(),e.write("
<Avatar src="https://avatars.githubusercontent.com/primer?v=3&s=128" size={128} username="primer" />
<Avatar src="https://avatars.githubusercontent.com/primer?v=3&s=128" size={128} username="primer" />
<Avatar src="https://avatars.githubusercontent.com/reactjs?v=3&s=32" size={32} username="reactjs" />
<Avatar src="https://avatars.githubusercontent.com/npm?v=3&s=64" username="npm" />
color
bg={color}
borderColor
white
white
gray
black
gray-light
white
gray
black
gray-light
gray
white
gray
black
gray
gray-dark
white
gray
black
gray-dark
purple
white
gray
black
purple
blue
white
gray
black
blue
green
white
gray
black
green
yellow
white
gray
black
yellow
red
white
gray
black
red
purple-light
white
gray
black
blue-light
white
gray
black
blue-light
green-light
white
gray
black
green-light
yellow-light
white
gray
black
red-light
white
gray
black
red-light

Code Example

white
<Block width="400" display="inline-block" bg="blue" p={3} fg="white">white</Block>
This is a box
<Box>This is a box</Box>
This is a box with padding.
<Box p={2}>This is a box with padding.</Box>
This is a box with shadow.
<Box shadow="small" p={2}>This is a box with shadow.</Box>
This is a box with a medium shadow.
<Box shadow="medium" p={2}>This is a box with a medium shadow.</Box>
This is a box with a large shadow.
<Box shadow="large" p={2}>This is a box with a large shadow.</Box>
This is a box with an extra-large shadow.
<Box shadow="extra-large" p={2}>This is a box with an extra-large shadow.</Box>
This is a box with a green border.
<Box borderColor="green" p={2}>This is a box with a green border.</Box>
<BranchName>a_new_feature_branch</BranchName>
<Button> Button </Button>
<Button size="sm"> Button small </Button>
<Button size="large"> Button large </Button>
<ButtonDanger> ButtonDanger </ButtonDanger>
<ButtonPrimary> ButtonPrimary </ButtonPrimary>
<ButtonOutline> ButtonOutline </ButtonOutline>
<Button block> Button block </Button>
<Button linkStyle> Button linkStyle </Button>
<ButtonLink href="https://www.goatslive.com/">This is an {'<a>'} styled as a button</ButtonLink>

Octicon Buttons

<OcticonButton icon={Pencil} label="Edit" onClick={() => alert('edit')} mr={3} />
<Text color="red"><OcticonButton icon={X} label="Close" onClick={() => alert('close')} mr={3} /></Text>
<OcticonButton icon={Hubot} size="large" label="ROBOT" onClick={() => alert('beep boop')} />
location='top'
<Box p={2} mb={4} position="relative" maxWidth={300} minHeight={96} shadow="small" key="top">
-  <Text fontSize={1} mono>
-    location='top'
-  </Text>
-  <Caret location="top" />
-</Box>
location='top-left'
<Box p={2} mb={4} position="relative" maxWidth={300} minHeight={96} shadow="small" key="top-left">
-  <Text fontSize={1} mono>
-    location='top-left'
-  </Text>
-  <Caret location="top-left" />
-</Box>
location='top-right'
<Box p={2} mb={4} position="relative" maxWidth={300} minHeight={96} shadow="small" key="top-right">
-  <Text fontSize={1} mono>
-    location='top-right'
-  </Text>
-  <Caret location="top-right" />
-</Box>
location='right'
<Box p={2} mb={4} position="relative" maxWidth={300} minHeight={96} shadow="small" key="right">
-  <Text fontSize={1} mono>
-    location='right'
-  </Text>
-  <Caret location="right" />
-</Box>
location='right-top'
<Box p={2} mb={4} position="relative" maxWidth={300} minHeight={96} shadow="small" key="right-top">
-  <Text fontSize={1} mono>
-    location='right-top'
-  </Text>
-  <Caret location="right-top" />
-</Box>
location='right-bottom'
<Box p={2} mb={4} position="relative" maxWidth={300} minHeight={96} shadow="small" key="right-bottom">
-  <Text fontSize={1} mono>
-    location='right-bottom'
-  </Text>
-  <Caret location="right-bottom" />
-</Box>
location='bottom'
<Box p={2} mb={4} position="relative" maxWidth={300} minHeight={96} shadow="small" key="bottom">
-  <Text fontSize={1} mono>
-    location='bottom'
-  </Text>
-  <Caret location="bottom" />
-</Box>
location='bottom-left'
<Box p={2} mb={4} position="relative" maxWidth={300} minHeight={96} shadow="small" key="bottom-left">
-  <Text fontSize={1} mono>
-    location='bottom-left'
-  </Text>
-  <Caret location="bottom-left" />
-</Box>
location='bottom-right'
<Box p={2} mb={4} position="relative" maxWidth={300} minHeight={96} shadow="small" key="bottom-right">
-  <Text fontSize={1} mono>
-    location='bottom-right'
-  </Text>
-  <Caret location="bottom-right" />
-</Box>
location='left'
<Box p={2} mb={4} position="relative" maxWidth={300} minHeight={96} shadow="small" key="left">
-  <Text fontSize={1} mono>
-    location='left'
-  </Text>
-  <Caret location="left" />
-</Box>
location='left-top'
<Box p={2} mb={4} position="relative" maxWidth={300} minHeight={96} shadow="small" key="left-top">
-  <Text fontSize={1} mono>
-    location='left-top'
-  </Text>
-  <Caret location="left-top" />
-</Box>
location='left-bottom'
<Box p={2} mb={4} position="relative" maxWidth={300} minHeight={96} shadow="small" key="left-bottom">
-  <Text fontSize={1} mono>
-    location='left-bottom'
-  </Text>
-  <Caret location="left-bottom" />
-</Box>

CaretBox

CaretBox
<CaretBox my={4} p={2} minHeight={100} borderColor="purple">
-  CaretBox
-</CaretBox>

Small, medium & large

<CircleBadge bg="blue" size="small"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
+    })();
 
color
bg={color}
borderColor
white
white
gray
black
gray-light
white
gray
black
gray-light
gray
white
gray
black
gray
gray-dark
white
gray
black
gray-dark
purple
white
gray
black
purple
blue
white
gray
black
blue
green
white
gray
black
green
yellow
white
gray
black
yellow
red
white
gray
black
red
purple-light
white
gray
black
blue-light
white
gray
black
blue-light
green-light
white
gray
black
green-light
yellow-light
white
gray
black
red-light
white
gray
black
red-light
This is a box
This is a box with padding.
This is a box with shadow.
This is a box with a medium shadow.
This is a box with a large shadow.
This is a box with an extra-large shadow.
This is a box with a green border.
Octicon Buttons
location='top'
location='top-left'
location='top-right'
location='right'
location='right-top'
location='right-bottom'
location='bottom'
location='bottom-left'
location='bottom-right'
location='left'
location='left-top'
location='left-bottom'
CaretBox
CaretBox
Small, medium & large
<CircleBadge bg="blue" size="small"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
 <CircleBadge bg="blue" size="medium"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
-<CircleBadge bg="blue" size="large"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
With Octicon as child
<CircleBadge size="medium">
+<CircleBadge bg="blue" size="large"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
With Octicon as child
<CircleBadge size="medium">
   <Octicon icon={Zap}/>
-</CircleBadge>
With <img> as a child & bg prop
<CircleBadge bg="blue" size="small"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
<CircleOcticon icon={Check} size={32} bg="green" color="white" />
gray.0
#fafbfc
gray.1
#f6f8fa
gray.2
#e1e4e8
gray.3
#d1d5da
gray.4
#959da5
gray.5
#6a737d
gray.6
#586069
gray.7
#444d56
gray.8
#2f363d
gray.9
#24292e
blue.0
#f1f8ff
blue.1
#dbedff
blue.2
#c8e1ff
blue.3
#79b8ff
blue.4
#2188ff
blue.5
#0366d6
blue.6
#005cc5
blue.7
#044289
blue.8
#032f62
blue.9
#05264c
green.0
#f0fff4
green.1
#dcffe4
green.2
#bef5cb
green.3
#85e89d
green.4
#34d058
green.5
#28a745
green.6
#22863a
green.7
#176f2c
green.8
#165c26
green.9
#144620
purple.0
#f5f0ff
purple.1
#e6dcfd
purple.2
#d1bcf9
purple.3
#b392f0
purple.4
#8a63d2
purple.5
#6f42c1
purple.6
#5a32a3
purple.7
#4c2889
purple.8
#3a1d6e
purple.9
#29134e
yellow.0
#fffdef
yellow.1
#fffbdd
yellow.2
#fff5b1
yellow.3
#ffea7f
yellow.4
#ffdf5d
yellow.5
#ffd33d
yellow.6
#f9c513
yellow.7
#dbab09
yellow.8
#b08800
yellow.9
#735c0f
orange.0
#fff8f2
orange.1
#ffebda
orange.2
#ffd1ac
orange.3
#ffab70
orange.4
#fb8532
orange.5
#f66a0a
orange.6
#e36209
orange.7
#d15704
orange.8
#c24e00
orange.9
#a04100
12
<CounterLabel>12</CounterLabel>
13
<CounterLabel theme={'gray'}>13</CounterLabel>
13
<CounterLabel theme={'gray-light'}>13</CounterLabel>
With static children
Click me
This should show and hide
<Details>
-  <summary className="btn">Click me</summary>
-  <p>This should show and hide</p>
-</Details>
-
With children as a function
Show
This should show and hide
<Details>
-  {({open, toggle}) => (
-    <React.Fragment>
-      <summary className="btn" onClick={toggle}>
-        {open ? 'Hide' : 'Show'}
-      </summary>
-      <p>This should show and hide</p>
-    </React.Fragment>
-  )}
-</Details>
-
With render prop
hi
<Details render={() => 'hi'} />
With data prop
<DonutChart mr={1} data={{error: 2, pending: 3, success: 5}} />
-<DonutChart mr={1} data={{error: 1, pending: 4, success: 2}} />
-<DonutChart mr={1} data={{pending: 2, success: 6}} />
-<DonutChart mr={1} data={{pending: 0, success: 1}} />
-<DonutChart mr={1} data={{pending: 1, queued: 1}} />
-<DonutChart mr={1} data={{unknown: 1}} />
With DonutSlice children
<DonutChart mr={1}>
-  <DonutSlice value={1} state="pending" />
-  <DonutSlice value={1} state="success" />
-  <DonutSlice value={1} state="error" />
-</DonutChart>
-
-<DonutChart mr={1}>
-  <DonutSlice value={1} state="error" />
-  <DonutSlice value={4} state="pending" />
-  <DonutSlice value={2} state="success" />
-</DonutChart>
-
-<DonutChart mr={1}>
-  <DonutSlice value={2} state="pending" />
-  <DonutSlice value={6} state="success" />
-</DonutChart>
-
-<DonutChart mr={1}>
-  <DonutSlice value={0} state="pending" />
-  <DonutSlice value={1} state="success" />
-</DonutChart>
-
-<DonutChart mr={1}>
-  <DonutSlice value={1} state="pending" />
-  <DonutSlice value={1} state="queued" />
-</DonutChart>
-
-<DonutChart>
-  <DonutSlice value={1} state="queued" />
-</DonutChart>
With custom fill colors
<DonutChart>
-  <DonutSlice value={1} fill={theme.colors.purple[0]} />
-  <DonutSlice value={1} fill={theme.colors.purple[1]} />
-  <DonutSlice value={1} fill={theme.colors.purple[2]} />
-  <DonutSlice value={1} fill={theme.colors.purple[3]} />
-  <DonutSlice value={1} fill={theme.colors.purple[4]} />
-</DonutChart>
Dropdown Primary
  • Item 1
  • Item 2
  • Item 3
<Dropdown scheme={'primary'}>
-  <ul>
-    <li>Item 1</li>
-    <li>Item 2</li>
-    <li>Item 3</li>
-  </ul>
-</Dropdown>
Dropdown
  • Item 1
  • Item 2
  • Item 3
<Dropdown>
-  <ul>
-    <li>Item 1</li>
-    <li>Item 2</li>
-    <li>Item 3</li>
-  </ul>
-</Dropdown>
Dropdown with title
Options
  • Item 1
  • Item 2
  • Item 3
<Dropdown title="Options">
-  <ul>
-    <li>Item 1</li>
-    <li>Item 2</li>
-    <li>Item 3</li>
-  </ul>
-</Dropdown>
Flash
<Flash> Flash </Flash>
Flash yellow
<Flash scheme="yellow"> Flash yellow </Flash>
Flash red
<Flash scheme="red"> Flash red </Flash>
Flash green
<Flash scheme="green"> Flash green </Flash>
Flash full
<Flash full> Flash full </Flash>
FlexContainer
Item 1
Item 2
Item 3
Item 4
Item 5
FlexContainer + FlexItems set to flexAuto
Item 1
Item 2
Item 3
<FlexContainer wrap="nowrap" width={300} height={300} border>
-  <FlexItem flexAuto>
-    <Block p={3} bg="blue">
-      Item 1
-    </Block>
-  </FlexItem>
-  <FlexItem flexAuto>
-    <Block p={3} bg="green">
-      Item 2
-    </Block>
-  </FlexItem>
-  <FlexItem flexAuto>
-    <Block p={3} bg="yellow">
-      Item 3
-    </Block>
-  </FlexItem>
-</FlexContainer>
FlexContainer + FlexItems with first item set to alignSelf='center'
Item 1
Item 2
Item 3
<FlexContainer wrap="nowrap" width={300} height={300} border>
-  <FlexItem alignSelf="center">
-    <Block p={3} bg="blue">
-      Item 1
-    </Block>
-  </FlexItem>
-  <FlexItem>
-    <Block p={3} bg="green">
-      Item 2
-    </Block>
-  </FlexItem>
-  <FlexItem>
-    <Block p={3} bg="yellow">
-      Item 3
-    </Block>
-  </FlexItem>
-</FlexContainer>
FlexContainer + FlexItems using tag prop set to "p"
Item 1
Item 2
Item 3
<FlexContainer wrap="nowrap" width={300} height={300} border>
-  <FlexItem tag="p">
-    <Block p={3} bg="blue">
-      Item 1
-    </Block>
-  </FlexItem>
-  <FlexItem tag="p">
-    <Block p={3} bg="green">
-      Item 2
-    </Block>
-  </FlexItem>
-  <FlexItem tag="p">
-    <Block p={3} bg="yellow">
-      Item 3
-    </Block>
-  </FlexItem>
-</FlexContainer>
-
fontSize 5
fontSize 4
fontSize 3
fontSize 2
fontSize 1
fontSize 0
Default Heading
With fontSize=0
<Heading fontSize={"0"} mb={2}>With fontSize={"0"}</Heading>
With fontSize=1
<Heading fontSize={"1"} mb={2}>With fontSize={"1"}</Heading>
With fontSize=2
<Heading fontSize={"2"} mb={2}>With fontSize={"2"}</Heading>
With fontSize=3
<Heading fontSize={"3"} mb={2}>With fontSize={"3"}</Heading>
With fontSize=4
<Heading fontSize={"4"} mb={2}>With fontSize={"4"}</Heading>
With fontSize=5
<Heading fontSize={"5"} mb={2}>With fontSize={"5"}</Heading>
With fontSize=00-light
<Heading fontSize={"00-light"} mb={2}>With fontSize={"00-light"}</Heading>
With fontSize=0-light
<Heading fontSize={"0-light"} mb={2}>With fontSize={"0-light"}</Heading>
With fontSize=1-light
<Heading fontSize={"1-light"} mb={2}>With fontSize={"1-light"}</Heading>
With fontSize=2-light
<Heading fontSize={"2-light"} mb={2}>With fontSize={"2-light"}</Heading>
With fontSize=3-light
<Heading fontSize={"3-light"} mb={2}>With fontSize={"3-light"}</Heading>
Default label
<Label>Default label</Label>
Darker gray label
<Label scheme="gray-darker">Darker gray label</Label>
Orange label
<Label scheme="orange">Orange label</Label>
Green label
<Label scheme="green">Green label</Label>
Default outline label
<Label outline>Default outline label</Label>
Green outline label
<Label outline scheme="green">Green outline label</Label>
<Link href="https://github.com">Link</Link>
<Link muted href="https://github.com">Link muted</Link>
<Link scheme="gray" href="https://github.com">Link gray</Link>
<Link scheme="gray-dark" href="https://github.com">Link gray-dark</Link>
<MergeStatus state="pending" />
<MergeStatus state="invalid" />
<MergeStatus state="merged" />
<MergeStatus state="ready" />
Open
Closed
Merged
<Block mb={2}>
-  <StateLabel state="open">Open</StateLabel>
-</Block>
-<Block mb={2}>
-  <StateLabel state="closed">Closed</StateLabel>
-</Block>
-<Block mb={4}>
-  <StateLabel state="merged">Merged</StateLabel>
-</Block>
By state (Octicons built in)
Unknown
Open
Closed
Merged
Reopened
<Block mb={2}>
-  <StateLabel>Unknown</StateLabel>
-</Block>
-<Block mb={2}>
-  <StateLabel state="open">Open</StateLabel>
-</Block>
-<Block mb={2}>
-  <StateLabel state="closed">Closed</StateLabel>
-</Block>
-<Block mb={2}>
-  <StateLabel state="merged">Merged</StateLabel>
-</Block>
-<Block mb={2}>
-  <StateLabel state="reopened">Reopened</StateLabel>
-</Block>
-
By color
Invalid
Green
Red
Purple
<Block mb={2}>
-  <StateLabel scheme="invalid">Invalid</StateLabel>
-</Block>
-<Block mb={2}>
-  <StateLabel scheme="green">Green</StateLabel>
-</Block>
-<Block mb={2}>
-  <StateLabel scheme="red">Red</StateLabel>
-</Block>
-<Block mb={2}>
-  <StateLabel scheme="purple">Purple</StateLabel>
-</Block>
Small, by state
UnknownOpenClosedMergedReopened
<Block mb={2}>
-  <span className="mr-2">
-    <StateLabel small>Unknown</StateLabel>
-  </span>
-  <span className="mr-2">
-    <StateLabel small state="open">
-      Open
-    </StateLabel>
-  </span>
-  <span className="mr-2">
-    <StateLabel small state="closed">
-      Closed
-    </StateLabel>
-  </span>
-  <span className="mr-2">
-    <StateLabel small state="merged">
-      Merged
-    </StateLabel>
-  </span>
-  <span className="mr-2">
-    <StateLabel small state="reopened">
-      Reopened
-    </StateLabel>
-  </span>
-</Block>
Small, by color
InvalidGreenRedPurpleCustom Octicon
<Block mb={2}>
-  <span className="mr-2">
-    <StateLabel small scheme="invalid">
-      Invalid
-    </StateLabel>
-  </span>
-  <span className="mr-2">
-    <StateLabel small scheme="green">
-      Green
-    </StateLabel>
-  </span>
-  <span className="mr-2">
-    <StateLabel small scheme="red">
-      Red
-    </StateLabel>
-  </span>
-  <span className="mr-2">
-    <StateLabel small scheme="purple">
-      Purple
-    </StateLabel>
-  </span>
-  <span className="mr-2">
-    <StateLabel small scheme="green" icon={<Octicon icon={GitBranch} />}>
-      Custom Octicon
-    </StateLabel>
-  </span>
-</Block>
Text
<Text tag="div">Text</Text>
Text bold
<Text tag="div" fontWeight="bold">Text bold</Text>
Text green
<Text tag="div" color="green">Text green</Text>
Text lineHeight 'condensed'
<Text tag="div" lineHeight="condensed">Text lineHeight 'condensed'</Text>
Text fontSize 4
<Text tag="div" fontSize={4}>Text fontSize 4</Text>
Text padding 4
<Text tag="div" p={4}>Text padding 4</Text>
Text Input
<TextInput name="zipcode" />
Text Input Sizes
<TextInput name="zipcode" size="small" placeholder="Small input" />
<TextInput name="zipcode" size="large" placeholder="Large input" />
Text Input - Block
<TextInput block placeholder="Full width block input" />
Basic Tooltip
Text with a tooltip
<Box p={3}>
-  <Tooltip text="Hello, Tooltip!">Text with a tooltip</Tooltip>
-</Box>
Directions
Tooltip direction="n"
<Box p={3} my={2} key="n">
-  <Tooltip text="Hello, Tooltip!" direction="n">
-    Tooltip direction="n"
-  </Tooltip>
-</Box>
-
Tooltip direction="ne"
<Box p={3} my={2} key="ne">
-  <Tooltip text="Hello, Tooltip!" direction="ne">
-    Tooltip direction="ne"
-  </Tooltip>
-</Box>
-
Tooltip direction="e"
<Box p={3} my={2} key="e">
-  <Tooltip text="Hello, Tooltip!" direction="e">
-    Tooltip direction="e"
-  </Tooltip>
-</Box>
-
Tooltip direction="se"
<Box p={3} my={2} key="se">
-  <Tooltip text="Hello, Tooltip!" direction="se">
-    Tooltip direction="se"
-  </Tooltip>
-</Box>
-
Tooltip direction="s"
<Box p={3} my={2} key="s">
-  <Tooltip text="Hello, Tooltip!" direction="s">
-    Tooltip direction="s"
-  </Tooltip>
-</Box>
-
Tooltip direction="sw"
<Box p={3} my={2} key="sw">
-  <Tooltip text="Hello, Tooltip!" direction="sw">
-    Tooltip direction="sw"
-  </Tooltip>
-</Box>
-
Tooltip direction="w"
<Box p={3} my={2} key="w">
-  <Tooltip text="Hello, Tooltip!" direction="w">
-    Tooltip direction="w"
-  </Tooltip>
-</Box>
-
Tooltip direction="nw"
<Box p={3} my={2} key="nw">
-  <Tooltip text="Hello, Tooltip!" direction="nw">
-    Tooltip direction="nw"
-  </Tooltip>
-</Box>
-
Alignment
Tooltip align="left"
<Box p={3} my={2} key="left">
-  <Tooltip text="Hello, Tooltip!" direction="ne" align="left">
-    Tooltip align="left"
-  </Tooltip>
-</Box>
Tooltip align="right"
<Box p={3} my={2} key="right">
-  <Tooltip text="Hello, Tooltip!" direction="ne" align="right">
-    Tooltip align="right"
-  </Tooltip>
-</Box>
Word wrap
Word wrapping tooltip
<Box p={3} my={2}>
-  <Tooltip
-    text="Hello, Tooltip! This tooltip has a sentence that will wrap to a newline."
-    wrap
-    direction="ne"
-    align="left"
-  >
-    Word wrapping tooltip
-  </Tooltip>
-</Box>
No Delay
Text with a tooltip
<Box p={3} my={2}>
-  <Tooltip noDelay text="Hello, Tooltip!">
-    Text with a tooltip
-  </Tooltip>
-</Box>
Using <UnderlineNavLink>
<UnderlineNav>
-  <UnderlineNavLink href="#foo" selected>
-    Selected
-  </UnderlineNavLink>
-  <UnderlineNavLink href="#bar">Bar</UnderlineNavLink>
-  <UnderlineNavLink href="#baz">Baz</UnderlineNavLink>
-</UnderlineNav>
Using <a> tags
<UnderlineNav>
-  <a href="#foo">Foo</a>
-  <a href="#bar" selected>
-    Selected
-  </a>
-  <a href="#baz">Baz</a>
-</UnderlineNav>
Using <NavLink> from react-router
<UnderlineNav>
-  <NavLink to="#foo">Foo</NavLink>
-  <NavLink to="#bar">Two</NavLink>
-  <NavLink to="/">Selected</NavLink>
-</UnderlineNav>

\ No newline at end of file
+</CircleBadge>

With <img> as a child & bg prop

<CircleBadge bg="blue" size="small"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
+

gray.0

#fafbfc

gray.1

#f6f8fa

gray.2

#e1e4e8

gray.3

#d1d5da

gray.4

#959da5

gray.5

#6a737d

gray.6

#586069

gray.7

#444d56

gray.8

#2f363d

gray.9

#24292e

blue.0

#f1f8ff

blue.1

#dbedff

blue.2

#c8e1ff

blue.3

#79b8ff

blue.4

#2188ff

blue.5

#0366d6

blue.6

#005cc5

blue.7

#044289

blue.8

#032f62

blue.9

#05264c

green.0

#f0fff4

green.1

#dcffe4

green.2

#bef5cb

green.3

#85e89d

green.4

#34d058

green.5

#28a745

green.6

#22863a

green.7

#176f2c

green.8

#165c26

green.9

#144620

purple.0

#f5f0ff

purple.1

#e6dcfd

purple.2

#d1bcf9

purple.3

#b392f0

purple.4

#8a63d2

purple.5

#6f42c1

purple.6

#5a32a3

purple.7

#4c2889

purple.8

#3a1d6e

purple.9

#29134e

yellow.0

#fffdef

yellow.1

#fffbdd

yellow.2

#fff5b1

yellow.3

#ffea7f

yellow.4

#ffdf5d

yellow.5

#ffd33d

yellow.6

#f9c513

yellow.7

#dbab09

yellow.8

#b08800

yellow.9

#735c0f

orange.0

#fff8f2

orange.1

#ffebda

orange.2

#ffd1ac

orange.3

#ffab70

orange.4

#fb8532

orange.5

#f66a0a

orange.6

#e36209

orange.7

#d15704

orange.8

#c24e00

orange.9

#a04100
121313

With static children

Click me

This should show and hide

With children as a function

Show

This should show and hide

With render prop

hi

Dropdown Primary

  • Item 1
  • Item 2
  • Item 3

Dropdown

  • Item 1
  • Item 2
  • Item 3

Dropdown with title

Options
  • Item 1
  • Item 2
  • Item 3

With data prop

With DonutSlice children

With custom fill colors

Flash
Flash yellow
Flash red
Flash green
Flash full

FlexContainer

Item 1
Item 2
Item 3
Item 4
Item 5

FlexContainer + FlexItems set to flexAuto

Item 1
Item 2
Item 3

FlexContainer + FlexItems with first item set to alignSelf='center'

Item 1
Item 2
Item 3

FlexContainer + FlexItems using tag prop set to "p"

Item 1

Item 2

Item 3

fontSize 5
fontSize 4
fontSize 3
fontSize 2
fontSize 1
fontSize 0

Input

Input Sizes

Block input

Default Heading

With fontSize=0

With fontSize=1

With fontSize=2

With fontSize=3

With fontSize=4

With fontSize=5

With fontSize=00-light

With fontSize=0-light

With fontSize=1-light

With fontSize=2-light

With fontSize=3-light

Default labelDarker gray labelOrange labelGreen label
Default outline labelGreen outline label
Open
Closed
Merged

By state (Octicons built in)

Unknown
Open
Closed
Merged
Reopened

By color

Invalid
Green
Red
Purple

Small, by state

UnknownOpenClosedMergedReopened

Small, by color

InvalidGreenRedPurpleCustom Octicon
Text
Text bold
Text green
Text lineHeight 'condensed'
Text fontSize 4
Text padding 4
Text with a tooltip

Directions

Tooltip direction=n
Tooltip direction=ne
Tooltip direction=e
Tooltip direction=se
Tooltip direction=s
Tooltip direction=sw
Tooltip direction=w
Tooltip direction=nw

Alignment

Tooltip align=left
Tooltip align=right

Word wrap

Word wrapping tooltip

No Delay

Text with a tooltip

Using <UnderlineNavLink>

Using <a> tags

Using <NavLink> from react-router

\ No newline at end of file diff --git a/docs/demos/index.html b/docs/demos/index.html index 6ca67445f4a..4a9b47c87e5 100644 --- a/docs/demos/index.html +++ b/docs/demos/index.html @@ -4,602 +4,18 @@ if (redirect && redirect != location.href) { history.replaceState(null, null, redirect); } - })();
<MergeBox
+    })();
<MergeBox
   state='pending'
   numCommits={21}
   repoUrl='https://github.com/primer/primer-react'
   branchName='master'
   onMerge={() => alert('merge!')}
-/>
  • Create a merge commit
    All commits from this branch will be added to the base branch via a merge commit.
  • Squash and merge
    The 2 commits from this branch will be combined into one commit in the base branch.
  • Rebase and merge
    The 2 commits from this branch will be rebased and added to the base branch
<MergeButton
+/>
  • Create a merge commit
    All commits from this branch will be added to the base branch via a merge commit.
  • Squash and merge
    The 2 commits from this branch will be combined into one commit in the base branch.
  • Rebase and merge
    The 2 commits from this branch will be rebased and added to the base branch
<MergeButton
   primary
   numCommits={2}
   onClick={() => alert('merge!')}
diff --git a/docs/index.html b/docs/index.html
index 06f1a33d30d..f1adc2a9612 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -4,943 +4,14 @@
       if (redirect && redirect != location.href) {
         history.replaceState(null, null, redirect);
       }
-    })();
<Avatar src="https://avatars.githubusercontent.com/primer?v=3&s=128" size={128} username="primer" />
<Avatar src="https://avatars.githubusercontent.com/primer?v=3&s=128" size={128} username="primer" />
<Avatar src="https://avatars.githubusercontent.com/reactjs?v=3&s=32" size={32} username="reactjs" />
<Avatar src="https://avatars.githubusercontent.com/npm?v=3&s=64" username="npm" />
color
bg={color}
borderColor
white
white
gray
black
gray-light
white
gray
black
gray-light
gray
white
gray
black
gray
gray-dark
white
gray
black
gray-dark
purple
white
gray
black
purple
blue
white
gray
black
blue
green
white
gray
black
green
yellow
white
gray
black
yellow
red
white
gray
black
red
purple-light
white
gray
black
blue-light
white
gray
black
blue-light
green-light
white
gray
black
green-light
yellow-light
white
gray
black
red-light
white
gray
black
red-light
Code Example
white
<Block width="400" display="inline-block" bg="blue" p={3} fg="white">white</Block>
This is a box
<Box>This is a box</Box>
This is a box with padding.
<Box p={2}>This is a box with padding.</Box>
This is a box with shadow.
<Box shadow="small" p={2}>This is a box with shadow.</Box>
This is a box with a medium shadow.
<Box shadow="medium" p={2}>This is a box with a medium shadow.</Box>
This is a box with a large shadow.
<Box shadow="large" p={2}>This is a box with a large shadow.</Box>
This is a box with an extra-large shadow.
<Box shadow="extra-large" p={2}>This is a box with an extra-large shadow.</Box>
This is a box with a green border.
<Box borderColor="green" p={2}>This is a box with a green border.</Box>
<BranchName>a_new_feature_branch</BranchName>
<Button> Button </Button>
<Button size="sm"> Button small </Button>
<Button size="large"> Button large </Button>
<ButtonDanger> ButtonDanger </ButtonDanger>
<ButtonPrimary> ButtonPrimary </ButtonPrimary>
<ButtonOutline> ButtonOutline </ButtonOutline>
<Button block> Button block </Button>
<Button linkStyle> Button linkStyle </Button>
<ButtonLink href="https://www.goatslive.com/">This is an {'<a>'} styled as a button</ButtonLink>
Octicon Buttons
<OcticonButton icon={Pencil} label="Edit" onClick={() => alert('edit')} mr={3} />
<Text color="red"><OcticonButton icon={X} label="Close" onClick={() => alert('close')} mr={3} /></Text>
<OcticonButton icon={Hubot} size="large" label="ROBOT" onClick={() => alert('beep boop')} />
location='top'
<Box p={2} mb={4} position="relative" maxWidth={300} minHeight={96} shadow="small" key="top">
-  <Text fontSize={1} mono>
-    location='top'
-  </Text>
-  <Caret location="top" />
-</Box>
location='top-left'
<Box p={2} mb={4} position="relative" maxWidth={300} minHeight={96} shadow="small" key="top-left">
-  <Text fontSize={1} mono>
-    location='top-left'
-  </Text>
-  <Caret location="top-left" />
-</Box>
location='top-right'
<Box p={2} mb={4} position="relative" maxWidth={300} minHeight={96} shadow="small" key="top-right">
-  <Text fontSize={1} mono>
-    location='top-right'
-  </Text>
-  <Caret location="top-right" />
-</Box>
location='right'
<Box p={2} mb={4} position="relative" maxWidth={300} minHeight={96} shadow="small" key="right">
-  <Text fontSize={1} mono>
-    location='right'
-  </Text>
-  <Caret location="right" />
-</Box>
location='right-top'
<Box p={2} mb={4} position="relative" maxWidth={300} minHeight={96} shadow="small" key="right-top">
-  <Text fontSize={1} mono>
-    location='right-top'
-  </Text>
-  <Caret location="right-top" />
-</Box>
location='right-bottom'
<Box p={2} mb={4} position="relative" maxWidth={300} minHeight={96} shadow="small" key="right-bottom">
-  <Text fontSize={1} mono>
-    location='right-bottom'
-  </Text>
-  <Caret location="right-bottom" />
-</Box>
location='bottom'
<Box p={2} mb={4} position="relative" maxWidth={300} minHeight={96} shadow="small" key="bottom">
-  <Text fontSize={1} mono>
-    location='bottom'
-  </Text>
-  <Caret location="bottom" />
-</Box>
location='bottom-left'
<Box p={2} mb={4} position="relative" maxWidth={300} minHeight={96} shadow="small" key="bottom-left">
-  <Text fontSize={1} mono>
-    location='bottom-left'
-  </Text>
-  <Caret location="bottom-left" />
-</Box>
location='bottom-right'
<Box p={2} mb={4} position="relative" maxWidth={300} minHeight={96} shadow="small" key="bottom-right">
-  <Text fontSize={1} mono>
-    location='bottom-right'
-  </Text>
-  <Caret location="bottom-right" />
-</Box>
location='left'
<Box p={2} mb={4} position="relative" maxWidth={300} minHeight={96} shadow="small" key="left">
-  <Text fontSize={1} mono>
-    location='left'
-  </Text>
-  <Caret location="left" />
-</Box>
location='left-top'
<Box p={2} mb={4} position="relative" maxWidth={300} minHeight={96} shadow="small" key="left-top">
-  <Text fontSize={1} mono>
-    location='left-top'
-  </Text>
-  <Caret location="left-top" />
-</Box>
location='left-bottom'
<Box p={2} mb={4} position="relative" maxWidth={300} minHeight={96} shadow="small" key="left-bottom">
-  <Text fontSize={1} mono>
-    location='left-bottom'
-  </Text>
-  <Caret location="left-bottom" />
-</Box>
CaretBox
CaretBox
<CaretBox my={4} p={2} minHeight={100} borderColor="purple">
-  CaretBox
-</CaretBox>
Small, medium & large
<CircleBadge bg="blue" size="small"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
+    })();
 
color
bg={color}
borderColor
white
white
gray
black
gray-light
white
gray
black
gray-light
gray
white
gray
black
gray
gray-dark
white
gray
black
gray-dark
purple
white
gray
black
purple
blue
white
gray
black
blue
green
white
gray
black
green
yellow
white
gray
black
yellow
red
white
gray
black
red
purple-light
white
gray
black
blue-light
white
gray
black
blue-light
green-light
white
gray
black
green-light
yellow-light
white
gray
black
red-light
white
gray
black
red-light
This is a box
This is a box with padding.
This is a box with shadow.
This is a box with a medium shadow.
This is a box with a large shadow.
This is a box with an extra-large shadow.
This is a box with a green border.
Octicon Buttons
location='top'
location='top-left'
location='top-right'
location='right'
location='right-top'
location='right-bottom'
location='bottom'
location='bottom-left'
location='bottom-right'
location='left'
location='left-top'
location='left-bottom'
CaretBox
CaretBox
Small, medium & large
<CircleBadge bg="blue" size="small"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
 <CircleBadge bg="blue" size="medium"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
-<CircleBadge bg="blue" size="large"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
With Octicon as child
<CircleBadge size="medium">
+<CircleBadge bg="blue" size="large"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
With Octicon as child
<CircleBadge size="medium">
   <Octicon icon={Zap}/>
-</CircleBadge>
With <img> as a child & bg prop
<CircleBadge bg="blue" size="small"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
<CircleOcticon icon={Check} size={32} bg="green" color="white" />
gray.0
#fafbfc
gray.1
#f6f8fa
gray.2
#e1e4e8
gray.3
#d1d5da
gray.4
#959da5
gray.5
#6a737d
gray.6
#586069
gray.7
#444d56
gray.8
#2f363d
gray.9
#24292e
blue.0
#f1f8ff
blue.1
#dbedff
blue.2
#c8e1ff
blue.3
#79b8ff
blue.4
#2188ff
blue.5
#0366d6
blue.6
#005cc5
blue.7
#044289
blue.8
#032f62
blue.9
#05264c
green.0
#f0fff4
green.1
#dcffe4
green.2
#bef5cb
green.3
#85e89d
green.4
#34d058
green.5
#28a745
green.6
#22863a
green.7
#176f2c
green.8
#165c26
green.9
#144620
purple.0
#f5f0ff
purple.1
#e6dcfd
purple.2
#d1bcf9
purple.3
#b392f0
purple.4
#8a63d2
purple.5
#6f42c1
purple.6
#5a32a3
purple.7
#4c2889
purple.8
#3a1d6e
purple.9
#29134e
yellow.0
#fffdef
yellow.1
#fffbdd
yellow.2
#fff5b1
yellow.3
#ffea7f
yellow.4
#ffdf5d
yellow.5
#ffd33d
yellow.6
#f9c513
yellow.7
#dbab09
yellow.8
#b08800
yellow.9
#735c0f
orange.0
#fff8f2
orange.1
#ffebda
orange.2
#ffd1ac
orange.3
#ffab70
orange.4
#fb8532
orange.5
#f66a0a
orange.6
#e36209
orange.7
#d15704
orange.8
#c24e00
orange.9
#a04100
12
<CounterLabel>12</CounterLabel>
13
<CounterLabel theme={'gray'}>13</CounterLabel>
13
<CounterLabel theme={'gray-light'}>13</CounterLabel>
With static children
Click me
This should show and hide
<Details>
-  <summary className="btn">Click me</summary>
-  <p>This should show and hide</p>
-</Details>
-
With children as a function
Show
This should show and hide
<Details>
-  {({open, toggle}) => (
-    <React.Fragment>
-      <summary className="btn" onClick={toggle}>
-        {open ? 'Hide' : 'Show'}
-      </summary>
-      <p>This should show and hide</p>
-    </React.Fragment>
-  )}
-</Details>
-
With render prop
hi
<Details render={() => 'hi'} />
With data prop
<DonutChart mr={1} data={{error: 2, pending: 3, success: 5}} />
-<DonutChart mr={1} data={{error: 1, pending: 4, success: 2}} />
-<DonutChart mr={1} data={{pending: 2, success: 6}} />
-<DonutChart mr={1} data={{pending: 0, success: 1}} />
-<DonutChart mr={1} data={{pending: 1, queued: 1}} />
-<DonutChart mr={1} data={{unknown: 1}} />
With DonutSlice children
<DonutChart mr={1}>
-  <DonutSlice value={1} state="pending" />
-  <DonutSlice value={1} state="success" />
-  <DonutSlice value={1} state="error" />
-</DonutChart>
-
-<DonutChart mr={1}>
-  <DonutSlice value={1} state="error" />
-  <DonutSlice value={4} state="pending" />
-  <DonutSlice value={2} state="success" />
-</DonutChart>
-
-<DonutChart mr={1}>
-  <DonutSlice value={2} state="pending" />
-  <DonutSlice value={6} state="success" />
-</DonutChart>
-
-<DonutChart mr={1}>
-  <DonutSlice value={0} state="pending" />
-  <DonutSlice value={1} state="success" />
-</DonutChart>
-
-<DonutChart mr={1}>
-  <DonutSlice value={1} state="pending" />
-  <DonutSlice value={1} state="queued" />
-</DonutChart>
-
-<DonutChart>
-  <DonutSlice value={1} state="queued" />
-</DonutChart>
With custom fill colors
<DonutChart>
-  <DonutSlice value={1} fill={theme.colors.purple[0]} />
-  <DonutSlice value={1} fill={theme.colors.purple[1]} />
-  <DonutSlice value={1} fill={theme.colors.purple[2]} />
-  <DonutSlice value={1} fill={theme.colors.purple[3]} />
-  <DonutSlice value={1} fill={theme.colors.purple[4]} />
-</DonutChart>
Dropdown Primary
  • Item 1
  • Item 2
  • Item 3
<Dropdown scheme={'primary'}>
-  <ul>
-    <li>Item 1</li>
-    <li>Item 2</li>
-    <li>Item 3</li>
-  </ul>
-</Dropdown>
Dropdown
  • Item 1
  • Item 2
  • Item 3
<Dropdown>
-  <ul>
-    <li>Item 1</li>
-    <li>Item 2</li>
-    <li>Item 3</li>
-  </ul>
-</Dropdown>
Dropdown with title
Options
  • Item 1
  • Item 2
  • Item 3
<Dropdown title="Options">
-  <ul>
-    <li>Item 1</li>
-    <li>Item 2</li>
-    <li>Item 3</li>
-  </ul>
-</Dropdown>
Flash
<Flash> Flash </Flash>
Flash yellow
<Flash scheme="yellow"> Flash yellow </Flash>
Flash red
<Flash scheme="red"> Flash red </Flash>
Flash green
<Flash scheme="green"> Flash green </Flash>
Flash full
<Flash full> Flash full </Flash>
FlexContainer
Item 1
Item 2
Item 3
Item 4
Item 5
FlexContainer + FlexItems set to flexAuto
Item 1
Item 2
Item 3
<FlexContainer wrap="nowrap" width={300} height={300} border>
-  <FlexItem flexAuto>
-    <Block p={3} bg="blue">
-      Item 1
-    </Block>
-  </FlexItem>
-  <FlexItem flexAuto>
-    <Block p={3} bg="green">
-      Item 2
-    </Block>
-  </FlexItem>
-  <FlexItem flexAuto>
-    <Block p={3} bg="yellow">
-      Item 3
-    </Block>
-  </FlexItem>
-</FlexContainer>
FlexContainer + FlexItems with first item set to alignSelf='center'
Item 1
Item 2
Item 3
<FlexContainer wrap="nowrap" width={300} height={300} border>
-  <FlexItem alignSelf="center">
-    <Block p={3} bg="blue">
-      Item 1
-    </Block>
-  </FlexItem>
-  <FlexItem>
-    <Block p={3} bg="green">
-      Item 2
-    </Block>
-  </FlexItem>
-  <FlexItem>
-    <Block p={3} bg="yellow">
-      Item 3
-    </Block>
-  </FlexItem>
-</FlexContainer>
FlexContainer + FlexItems using tag prop set to "p"
Item 1
Item 2
Item 3
<FlexContainer wrap="nowrap" width={300} height={300} border>
-  <FlexItem tag="p">
-    <Block p={3} bg="blue">
-      Item 1
-    </Block>
-  </FlexItem>
-  <FlexItem tag="p">
-    <Block p={3} bg="green">
-      Item 2
-    </Block>
-  </FlexItem>
-  <FlexItem tag="p">
-    <Block p={3} bg="yellow">
-      Item 3
-    </Block>
-  </FlexItem>
-</FlexContainer>
-
fontSize 5
fontSize 4
fontSize 3
fontSize 2
fontSize 1
fontSize 0
Default Heading
With fontSize=0
<Heading fontSize={"0"} mb={2}>With fontSize={"0"}</Heading>
With fontSize=1
<Heading fontSize={"1"} mb={2}>With fontSize={"1"}</Heading>
With fontSize=2
<Heading fontSize={"2"} mb={2}>With fontSize={"2"}</Heading>
With fontSize=3
<Heading fontSize={"3"} mb={2}>With fontSize={"3"}</Heading>
With fontSize=4
<Heading fontSize={"4"} mb={2}>With fontSize={"4"}</Heading>
With fontSize=5
<Heading fontSize={"5"} mb={2}>With fontSize={"5"}</Heading>
With fontSize=00-light
<Heading fontSize={"00-light"} mb={2}>With fontSize={"00-light"}</Heading>
With fontSize=0-light
<Heading fontSize={"0-light"} mb={2}>With fontSize={"0-light"}</Heading>
With fontSize=1-light
<Heading fontSize={"1-light"} mb={2}>With fontSize={"1-light"}</Heading>
With fontSize=2-light
<Heading fontSize={"2-light"} mb={2}>With fontSize={"2-light"}</Heading>
With fontSize=3-light
<Heading fontSize={"3-light"} mb={2}>With fontSize={"3-light"}</Heading>
Default label
<Label>Default label</Label>
Darker gray label
<Label scheme="gray-darker">Darker gray label</Label>
Orange label
<Label scheme="orange">Orange label</Label>
Green label
<Label scheme="green">Green label</Label>
Default outline label
<Label outline>Default outline label</Label>
Green outline label
<Label outline scheme="green">Green outline label</Label>
<Link href="https://github.com">Link</Link>
<Link muted href="https://github.com">Link muted</Link>
<Link scheme="gray" href="https://github.com">Link gray</Link>
<Link scheme="gray-dark" href="https://github.com">Link gray-dark</Link>
<MergeStatus state="pending" />
<MergeStatus state="invalid" />
<MergeStatus state="merged" />
<MergeStatus state="ready" />
Open
Closed
Merged
<Block mb={2}>
-  <StateLabel state="open">Open</StateLabel>
-</Block>
-<Block mb={2}>
-  <StateLabel state="closed">Closed</StateLabel>
-</Block>
-<Block mb={4}>
-  <StateLabel state="merged">Merged</StateLabel>
-</Block>
By state (Octicons built in)
Unknown
Open
Closed
Merged
Reopened
<Block mb={2}>
-  <StateLabel>Unknown</StateLabel>
-</Block>
-<Block mb={2}>
-  <StateLabel state="open">Open</StateLabel>
-</Block>
-<Block mb={2}>
-  <StateLabel state="closed">Closed</StateLabel>
-</Block>
-<Block mb={2}>
-  <StateLabel state="merged">Merged</StateLabel>
-</Block>
-<Block mb={2}>
-  <StateLabel state="reopened">Reopened</StateLabel>
-</Block>
-
By color
Invalid
Green
Red
Purple
<Block mb={2}>
-  <StateLabel scheme="invalid">Invalid</StateLabel>
-</Block>
-<Block mb={2}>
-  <StateLabel scheme="green">Green</StateLabel>
-</Block>
-<Block mb={2}>
-  <StateLabel scheme="red">Red</StateLabel>
-</Block>
-<Block mb={2}>
-  <StateLabel scheme="purple">Purple</StateLabel>
-</Block>
Small, by state
UnknownOpenClosedMergedReopened
<Block mb={2}>
-  <span className="mr-2">
-    <StateLabel small>Unknown</StateLabel>
-  </span>
-  <span className="mr-2">
-    <StateLabel small state="open">
-      Open
-    </StateLabel>
-  </span>
-  <span className="mr-2">
-    <StateLabel small state="closed">
-      Closed
-    </StateLabel>
-  </span>
-  <span className="mr-2">
-    <StateLabel small state="merged">
-      Merged
-    </StateLabel>
-  </span>
-  <span className="mr-2">
-    <StateLabel small state="reopened">
-      Reopened
-    </StateLabel>
-  </span>
-</Block>
Small, by color
InvalidGreenRedPurpleCustom Octicon
<Block mb={2}>
-  <span className="mr-2">
-    <StateLabel small scheme="invalid">
-      Invalid
-    </StateLabel>
-  </span>
-  <span className="mr-2">
-    <StateLabel small scheme="green">
-      Green
-    </StateLabel>
-  </span>
-  <span className="mr-2">
-    <StateLabel small scheme="red">
-      Red
-    </StateLabel>
-  </span>
-  <span className="mr-2">
-    <StateLabel small scheme="purple">
-      Purple
-    </StateLabel>
-  </span>
-  <span className="mr-2">
-    <StateLabel small scheme="green" icon={<Octicon icon={GitBranch} />}>
-      Custom Octicon
-    </StateLabel>
-  </span>
-</Block>
Text
<Text tag="div">Text</Text>
Text bold
<Text tag="div" fontWeight="bold">Text bold</Text>
Text green
<Text tag="div" color="green">Text green</Text>
Text lineHeight 'condensed'
<Text tag="div" lineHeight="condensed">Text lineHeight 'condensed'</Text>
Text fontSize 4
<Text tag="div" fontSize={4}>Text fontSize 4</Text>
Text padding 4
<Text tag="div" p={4}>Text padding 4</Text>
Text Input
<TextInput name="zipcode" />
Text Input Sizes
<TextInput name="zipcode" size="small" placeholder="Small input" />
<TextInput name="zipcode" size="large" placeholder="Large input" />
Text Input - Block
<TextInput block placeholder="Full width block input" />
Basic Tooltip
Text with a tooltip
<Box p={3}>
-  <Tooltip text="Hello, Tooltip!">Text with a tooltip</Tooltip>
-</Box>
Directions
Tooltip direction="n"
<Box p={3} my={2} key="n">
-  <Tooltip text="Hello, Tooltip!" direction="n">
-    Tooltip direction="n"
-  </Tooltip>
-</Box>
-
Tooltip direction="ne"
<Box p={3} my={2} key="ne">
-  <Tooltip text="Hello, Tooltip!" direction="ne">
-    Tooltip direction="ne"
-  </Tooltip>
-</Box>
-
Tooltip direction="e"
<Box p={3} my={2} key="e">
-  <Tooltip text="Hello, Tooltip!" direction="e">
-    Tooltip direction="e"
-  </Tooltip>
-</Box>
-
Tooltip direction="se"
<Box p={3} my={2} key="se">
-  <Tooltip text="Hello, Tooltip!" direction="se">
-    Tooltip direction="se"
-  </Tooltip>
-</Box>
-
Tooltip direction="s"
<Box p={3} my={2} key="s">
-  <Tooltip text="Hello, Tooltip!" direction="s">
-    Tooltip direction="s"
-  </Tooltip>
-</Box>
-
Tooltip direction="sw"
<Box p={3} my={2} key="sw">
-  <Tooltip text="Hello, Tooltip!" direction="sw">
-    Tooltip direction="sw"
-  </Tooltip>
-</Box>
-
Tooltip direction="w"
<Box p={3} my={2} key="w">
-  <Tooltip text="Hello, Tooltip!" direction="w">
-    Tooltip direction="w"
-  </Tooltip>
-</Box>
-
Tooltip direction="nw"
<Box p={3} my={2} key="nw">
-  <Tooltip text="Hello, Tooltip!" direction="nw">
-    Tooltip direction="nw"
-  </Tooltip>
-</Box>
-
Alignment
Tooltip align="left"
<Box p={3} my={2} key="left">
-  <Tooltip text="Hello, Tooltip!" direction="ne" align="left">
-    Tooltip align="left"
-  </Tooltip>
-</Box>
Tooltip align="right"
<Box p={3} my={2} key="right">
-  <Tooltip text="Hello, Tooltip!" direction="ne" align="right">
-    Tooltip align="right"
-  </Tooltip>
-</Box>
Word wrap
Word wrapping tooltip
<Box p={3} my={2}>
-  <Tooltip
-    text="Hello, Tooltip! This tooltip has a sentence that will wrap to a newline."
-    wrap
-    direction="ne"
-    align="left"
-  >
-    Word wrapping tooltip
-  </Tooltip>
-</Box>
No Delay
Text with a tooltip
<Box p={3} my={2}>
-  <Tooltip noDelay text="Hello, Tooltip!">
-    Text with a tooltip
-  </Tooltip>
-</Box>
Using <UnderlineNavLink>
<UnderlineNav>
-  <UnderlineNavLink href="#foo" selected>
-    Selected
-  </UnderlineNavLink>
-  <UnderlineNavLink href="#bar">Bar</UnderlineNavLink>
-  <UnderlineNavLink href="#baz">Baz</UnderlineNavLink>
-</UnderlineNav>
Using <a> tags
<UnderlineNav>
-  <a href="#foo">Foo</a>
-  <a href="#bar" selected>
-    Selected
-  </a>
-  <a href="#baz">Baz</a>
-</UnderlineNav>
Using <NavLink> from react-router
<UnderlineNav>
-  <NavLink to="#foo">Foo</NavLink>
-  <NavLink to="#bar">Two</NavLink>
-  <NavLink to="/">Selected</NavLink>
-</UnderlineNav>

\ No newline at end of file
+</CircleBadge>
With <img> as a child & bg prop
<CircleBadge bg="blue" size="small"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
+
gray.0
#fafbfc
gray.1
#f6f8fa
gray.2
#e1e4e8
gray.3
#d1d5da
gray.4
#959da5
gray.5
#6a737d
gray.6
#586069
gray.7
#444d56
gray.8
#2f363d
gray.9
#24292e
blue.0
#f1f8ff
blue.1
#dbedff
blue.2
#c8e1ff
blue.3
#79b8ff
blue.4
#2188ff
blue.5
#0366d6
blue.6
#005cc5
blue.7
#044289
blue.8
#032f62
blue.9
#05264c
green.0
#f0fff4
green.1
#dcffe4
green.2
#bef5cb
green.3
#85e89d
green.4
#34d058
green.5
#28a745
green.6
#22863a
green.7
#176f2c
green.8
#165c26
green.9
#144620
purple.0
#f5f0ff
purple.1
#e6dcfd
purple.2
#d1bcf9
purple.3
#b392f0
purple.4
#8a63d2
purple.5
#6f42c1
purple.6
#5a32a3
purple.7
#4c2889
purple.8
#3a1d6e
purple.9
#29134e
yellow.0
#fffdef
yellow.1
#fffbdd
yellow.2
#fff5b1
yellow.3
#ffea7f
yellow.4
#ffdf5d
yellow.5
#ffd33d
yellow.6
#f9c513
yellow.7
#dbab09
yellow.8
#b08800
yellow.9
#735c0f
orange.0
#fff8f2
orange.1
#ffebda
orange.2
#ffd1ac
orange.3
#ffab70
orange.4
#fb8532
orange.5
#f66a0a
orange.6
#e36209
orange.7
#d15704
orange.8
#c24e00
orange.9
#a04100
121313
With static children
Click me
This should show and hide
With children as a function
Show
This should show and hide
With render prop
hi
Dropdown Primary
  • Item 1
  • Item 2
  • Item 3
Dropdown
  • Item 1
  • Item 2
  • Item 3
Dropdown with title
Options
  • Item 1
  • Item 2
  • Item 3
With data prop
     
With DonutSlice children
     
With custom fill colors
Flash
Flash yellow
Flash red
Flash green
Flash full
FlexContainer
Item 1
Item 2
Item 3
Item 4
Item 5
FlexContainer + FlexItems set to flexAuto
Item 1
Item 2
Item 3
FlexContainer + FlexItems with first item set to alignSelf='center'
Item 1
Item 2
Item 3
FlexContainer + FlexItems using tag prop set to "p"
Item 1
Item 2
Item 3
fontSize 5
fontSize 4
fontSize 3
fontSize 2
fontSize 1
fontSize 0
Input
Input Sizes
Block input
Default Heading
With fontSize=0
With fontSize=1
With fontSize=2
With fontSize=3
With fontSize=4
With fontSize=5
With fontSize=00-light
With fontSize=0-light
With fontSize=1-light
With fontSize=2-light
With fontSize=3-light
Default labelDarker gray labelOrange labelGreen label
Default outline labelGreen outline label
Open
Closed
Merged
By state (Octicons built in)
Unknown
Open
Closed
Merged
Reopened
By color
Invalid
Green
Red
Purple
Small, by state
UnknownOpenClosedMergedReopened
Small, by color
InvalidGreenRedPurpleCustom Octicon
Text
Text bold
Text green
Text lineHeight 'condensed'
Text fontSize 4
Text padding 4
Text with a tooltip
Directions
Tooltip direction=n
Tooltip direction=ne
Tooltip direction=e
Tooltip direction=se
Tooltip direction=s
Tooltip direction=sw
Tooltip direction=w
Tooltip direction=nw
Alignment
Tooltip align=left
Tooltip align=right
Word wrap
Word wrapping tooltip
No Delay
Text with a tooltip
Using <UnderlineNavLink>
Using <a> tags
Using <NavLink> from react-router

\ No newline at end of file
diff --git a/docs/props/index.html b/docs/props/index.html
deleted file mode 100644
index b2efae93dd3..00000000000
--- a/docs/props/index.html
+++ /dev/null
@@ -1,700 +0,0 @@
-primer-react
bodytextblackwhite
gray.0gray.1gray.2gray.3gray.4gray.5gray.6gray.7gray.8gray.9
blue.0blue.1blue.2blue.3blue.4blue.5blue.6blue.7blue.8blue.9
green.0green.1green.2green.3green.4green.5green.6green.7green.8green.9
yellow.0yellow.1yellow.2yellow.3yellow.4yellow.5yellow.6yellow.7yellow.8yellow.9
orange.0orange.1orange.2orange.3orange.4orange.5orange.6orange.7orange.8orange.9
red.0red.1red.2red.3red.4red.5red.6red.7red.8red.9
purple.0purple.1purple.2purple.3purple.4purple.5purple.6purple.7purple.8purple.9
blackfade15blackfade20whitefade15
<Text mono m={1} color='bodytext'>bodytext</Text>
-<Text mono m={1} color='black'>black</Text>
-<Text mono m={1} color='white' bg='gray-dark'>white</Text>
-<Block mb={2}>
-  <Text mono m={1} color='gray.0'>gray.0</Text>
-  <Text mono m={1} color='gray.1'>gray.1</Text>
-  <Text mono m={1} color='gray.2'>gray.2</Text>
-  <Text mono m={1} color='gray.3'>gray.3</Text>
-  <Text mono m={1} color='gray.4'>gray.4</Text>
-  <Text mono m={1} color='gray.5'>gray.5</Text>
-  <Text mono m={1} color='gray.6'>gray.6</Text>
-  <Text mono m={1} color='gray.7'>gray.7</Text>
-  <Text mono m={1} color='gray.8'>gray.8</Text>
-  <Text mono m={1} color='gray.9'>gray.9</Text>
-</Block>
-<Block mb={2}>
-  <Text mono m={1} color='blue.0'>blue.0</Text>
-  <Text mono m={1} color='blue.1'>blue.1</Text>
-  <Text mono m={1} color='blue.2'>blue.2</Text>
-  <Text mono m={1} color='blue.3'>blue.3</Text>
-  <Text mono m={1} color='blue.4'>blue.4</Text>
-  <Text mono m={1} color='blue.5'>blue.5</Text>
-  <Text mono m={1} color='blue.6'>blue.6</Text>
-  <Text mono m={1} color='blue.7'>blue.7</Text>
-  <Text mono m={1} color='blue.8'>blue.8</Text>
-  <Text mono m={1} color='blue.9'>blue.9</Text>
-</Block>
-<Block mb={2}>
-  <Text mono m={1} color='green.0'>green.0</Text>
-  <Text mono m={1} color='green.1'>green.1</Text>
-  <Text mono m={1} color='green.2'>green.2</Text>
-  <Text mono m={1} color='green.3'>green.3</Text>
-  <Text mono m={1} color='green.4'>green.4</Text>
-  <Text mono m={1} color='green.5'>green.5</Text>
-  <Text mono m={1} color='green.6'>green.6</Text>
-  <Text mono m={1} color='green.7'>green.7</Text>
-  <Text mono m={1} color='green.8'>green.8</Text>
-  <Text mono m={1} color='green.9'>green.9</Text>
-</Block>
-<Block mb={2}>
-  <Text mono m={1} color='yellow.0'>yellow.0</Text>
-  <Text mono m={1} color='yellow.1'>yellow.1</Text>
-  <Text mono m={1} color='yellow.2'>yellow.2</Text>
-  <Text mono m={1} color='yellow.3'>yellow.3</Text>
-  <Text mono m={1} color='yellow.4'>yellow.4</Text>
-  <Text mono m={1} color='yellow.5'>yellow.5</Text>
-  <Text mono m={1} color='yellow.6'>yellow.6</Text>
-  <Text mono m={1} color='yellow.7'>yellow.7</Text>
-  <Text mono m={1} color='yellow.8'>yellow.8</Text>
-  <Text mono m={1} color='yellow.9'>yellow.9</Text>
-</Block>
-<Block mb={2}>
-  <Text mono m={1} color='orange.0'>orange.0</Text>
-  <Text mono m={1} color='orange.1'>orange.1</Text>
-  <Text mono m={1} color='orange.2'>orange.2</Text>
-  <Text mono m={1} color='orange.3'>orange.3</Text>
-  <Text mono m={1} color='orange.4'>orange.4</Text>
-  <Text mono m={1} color='orange.5'>orange.5</Text>
-  <Text mono m={1} color='orange.6'>orange.6</Text>
-  <Text mono m={1} color='orange.7'>orange.7</Text>
-  <Text mono m={1} color='orange.8'>orange.8</Text>
-  <Text mono m={1} color='orange.9'>orange.9</Text>
-</Block>
-<Block mb={2}>
-  <Text mono m={1} color='red.0'>red.0</Text>
-  <Text mono m={1} color='red.1'>red.1</Text>
-  <Text mono m={1} color='red.2'>red.2</Text>
-  <Text mono m={1} color='red.3'>red.3</Text>
-  <Text mono m={1} color='red.4'>red.4</Text>
-  <Text mono m={1} color='red.5'>red.5</Text>
-  <Text mono m={1} color='red.6'>red.6</Text>
-  <Text mono m={1} color='red.7'>red.7</Text>
-  <Text mono m={1} color='red.8'>red.8</Text>
-  <Text mono m={1} color='red.9'>red.9</Text>
-</Block>
-<Block mb={2}>
-  <Text mono m={1} color='purple.0'>purple.0</Text>
-  <Text mono m={1} color='purple.1'>purple.1</Text>
-  <Text mono m={1} color='purple.2'>purple.2</Text>
-  <Text mono m={1} color='purple.3'>purple.3</Text>
-  <Text mono m={1} color='purple.4'>purple.4</Text>
-  <Text mono m={1} color='purple.5'>purple.5</Text>
-  <Text mono m={1} color='purple.6'>purple.6</Text>
-  <Text mono m={1} color='purple.7'>purple.7</Text>
-  <Text mono m={1} color='purple.8'>purple.8</Text>
-  <Text mono m={1} color='purple.9'>purple.9</Text>
-</Block>
-<Text mono m={1} color='blackfade15'>blackfade15</Text>
-<Text mono m={1} color='blackfade20'>blackfade20</Text>
-<Text mono m={1} color='whitefade15'>whitefade15</Text>
fontSize=0 (12px)
fontSize=1 (14px)
fontSize=2 (16px)
fontSize=3 (20px)
fontSize=4 (24px)
fontSize=5 (32px)
fontSize=6 (40px)
fontSize=7 (48px)
<Block><Text fontSize={0}>fontSize={0} (12px)</Text></Block>
-<Block><Text fontSize={1}>fontSize={1} (14px)</Text></Block>
-<Block><Text fontSize={2}>fontSize={2} (16px)</Text></Block>
-<Block><Text fontSize={3}>fontSize={3} (20px)</Text></Block>
-<Block><Text fontSize={4}>fontSize={4} (24px)</Text></Block>
-<Block><Text fontSize={5}>fontSize={5} (32px)</Text></Block>
-<Block><Text fontSize={6}>fontSize={6} (40px)</Text></Block>
-<Block><Text fontSize={7}>fontSize={7} (48px)</Text></Block>
Margin props
The m prop sets uniform margins in the Primer spacing scale.
Directional variants mt, mr,mb, and ml set margins on each side individually, and the mx and my props set horizontal and vertical margins, respectively.
No margin
Uniform margin x1
Uniform margin x2
Uniform margin x3
Uniform margin x4
<Box m={0}>No margin</Box>
-<Box m={1}>Uniform margin x1</Box>
-<Box m={2}>Uniform margin x2</Box>
-<Box m={3}>Uniform margin x3</Box>
-<Box m={4}>Uniform margin x4</Box>
No padding
Uniform padding x1
Uniform padding x2
Uniform padding x3
Uniform padding x4
<Box p={0}>No padding</Box>
-<Box p={1}>Uniform padding x1</Box>
-<Box p={2}>Uniform padding x2</Box>
-<Box p={3}>Uniform padding x3</Box>
-<Box p={4}>Uniform padding x4</Box>

\ No newline at end of file
diff --git a/docs/sandbox/index.html b/docs/sandbox/index.html
index 072e1d92e70..7045a4c9ce4 100644
--- a/docs/sandbox/index.html
+++ b/docs/sandbox/index.html
@@ -4,596 +4,12 @@
       if (redirect && redirect != location.href) {
         history.replaceState(null, null, redirect);
       }
-    })();
Hello World!
All of the primer-react components are available in this sandbox!
This is a box with some mono text.
+    })();
Hello World!
All of the primer-react components are available in this sandbox!
This is a box with some mono text.
 
 <Block p={4}>
   <Heading>Hello World!</Heading>
diff --git a/examples/_app.js b/examples/_app.js
index f6fdebed557..2c181241e74 100644
--- a/examples/_app.js
+++ b/examples/_app.js
@@ -1,8 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import {NavLink} from 'react-router-dom'
+import Styles from './doc-components/Styles'
 import Octicon, {Package} from '@githubprimer/octicons-react'
-import {Block, Link, StyleProvider, Text, UnderlineNav} from '../src'
+import {Block, Link, Text, UnderlineNav} from '../src'
 import {name, repository, version} from '../package.json'
 
 const pkg = `${name}@${version}`
@@ -11,7 +12,7 @@ const releaseURL = `https://github.com/${repository}/releases/v${version}`
 export default function Page({render}) {
   return (
     
-      
+      
       

         
             Components
           
-          
-            Utility Props
-          
           
             Demos
           
diff --git a/examples/doc-components/Styles.js b/examples/doc-components/Styles.js
new file mode 100644
index 00000000000..6a0cf7e720f
--- /dev/null
+++ b/examples/doc-components/Styles.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {theme} from '../../src'
+
+/* eslint-disable-next-line react/no-danger */
+const Styles = ({css}) =>