@primer/react-brand 0.0.0-20220404005849 → 0.0.3-rc.05d1b9f

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @primer/react-brand
+
+## 0.0.3
+
+### Patch Changes
+
+- [#18](https://github.com/primer/react-brand/pull/18) [`0835830`](https://github.com/primer/react-brand/commit/0835830fc15c582e280ac692ff3d578d6bcf282e) Thanks [@rezrah](https://github.com/rezrah)! - Fixes for production bundles
+
+## 0.0.2
+
+### Patch Changes
+
+- [#2](https://github.com/primer/react-brand/pull/2) [`ab01a8a`](https://github.com/primer/react-brand/commit/ab01a8ad1dc504f7a2865213b6f41c0b0adba131) Thanks [@colebemis](https://github.com/colebemis)! - Initialize releases with [changesets](https://github.com/changesets/changesets)

package/lib/{src/Hero → Hero}/Hero.d.ts

@@ -9,7 +9,6 @@ export declare type HeroProps = {
     primaryAction: Action;
     secondaryAction?: Action;
     align?: 'start' | 'center';
-    size?: 'small' | 'large';
 };
-export declare function Hero({ heading, description, primaryAction, secondaryAction, align, size }: HeroProps): JSX.Element;
+export declare function Hero({ heading, description, primaryAction, secondaryAction, align }: HeroProps): JSX.Element;
 export {};

package/lib/index.js

@@ -1,2 +1,2 @@
 /*! For license information please see index.js.LICENSE.txt */
-!function(e,n){if("object"==typeof exports&&"object"==typeof module)module.exports=n(require("react"));else if("function"==typeof define&&define.amd)define(["react"],n);else{var r="object"==typeof exports?n(require("react")):n(e.react);for(var o in r)("object"==typeof exports?exports:e)[o]=r[o]}}(this,(function(e){return(()=>{"use strict";var n={99:(e,n,r)=>{r.d(n,{Z:()=>a});var o=r(645),t=r.n(o)()((function(e){return e[1]}));t.push([e.id,".ExpandableArrow-module__ExpandableArrow___hEnrq {\n  transition: transform 200ms;\n  transform: translateX(0);\n}\n\n.ExpandableArrow-module__ExpandableArrow--expanded___m7vPm {\n  transform: translateX(4px);\n}\n\n.ExpandableArrow-module__ExpandableArrow-stem___kCRtH {\n  stroke-dasharray: 10;\n  stroke-dashoffset: 10;\n  transition: stroke-dashoffset 200ms;\n}\n\n.ExpandableArrow-module__ExpandableArrow-stem--expanded___9m4fa {\n  stroke-dashoffset: 20;\n}\n",""]),t.locals={ExpandableArrow:"ExpandableArrow-module__ExpandableArrow___hEnrq","ExpandableArrow--expanded":"ExpandableArrow-module__ExpandableArrow--expanded___m7vPm","ExpandableArrow-stem":"ExpandableArrow-module__ExpandableArrow-stem___kCRtH","ExpandableArrow-stem--expanded":"ExpandableArrow-module__ExpandableArrow-stem--expanded___9m4fa"};const a=t},348:(e,n,r)=>{r.d(n,{Z:()=>a});var o=r(645),t=r.n(o)()((function(e){return e[1]}));t.push([e.id,"/* TODO: Extract these global styles */\nbody {\n  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; /* TODO: Use Alliance No. 1 or Mona Sans */\n  line-height: 1.5;\n}\n\n/* TODO: Replace hard-coded values with design tokens */\n\n.Hero-module__Hero___V9nXN {\n  padding: 6rem 0;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--gh-color-canvas-default);\n}\n\n.Hero-module__Hero--align-start___560cZ {\n  align-items: start;\n  text-align: left;\n}\n\n.Hero-module__Hero--align-center___oeAFd {\n  align-items: center;\n  text-align: center;\n}\n\n.Hero-module__Hero-heading___XWCFo {\n  margin: 0;\n  font-weight: 700;\n  line-height: 1.1;\n  max-width: 18ch;\n  color: var(--gh-color-fg-default);\n}\n\n.Hero-module__Hero--size-small___pKefA .Hero-module__Hero-heading___XWCFo {\n  font-size: 2.5rem;\n}\n\n.Hero-module__Hero--size-large___CoMDt .Hero-module__Hero-heading___XWCFo {\n  font-size: 3rem;\n}\n\n.Hero-module__Hero-description___z0X7e {\n  margin: 1.5rem 0 0;\n  font-size: 1rem;\n  max-width: 50ch;\n  color: var(--gh-color-fg-muted);\n}\n\n.Hero-module__Hero-actions___r5GSi {\n  margin-top: 2rem;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  width: 100%;\n}\n\n.Hero-module__Hero-actions___r5GSi > :not(:last-child) {\n  margin: 0 0 1rem;\n}\n\n/* Small breakpoint and up */\n@media screen and (min-width: 544px) {\n  .Hero-module__Hero___V9nXN {\n    padding: 10.75rem 0;\n  }\n\n  .Hero-module__Hero--size-small___pKefA .Hero-module__Hero-heading___XWCFo {\n    font-size: 3.5rem;\n  }\n\n  .Hero-module__Hero--size-large___CoMDt .Hero-module__Hero-heading___XWCFo {\n    font-size: 4.5rem;\n  }\n\n  .Hero-module__Hero-description___z0X7e {\n    font-size: 1.25rem;\n  }\n\n  .Hero-module__Hero-actions___r5GSi {\n    flex-direction: row;\n    width: auto;\n  }\n\n  .Hero-module__Hero-actions___r5GSi > :not(:last-child) {\n    margin: 0 1rem 0 0;\n  }\n}\n\n/* Medium breakpoint and up */\n@media screen and (min-width: 768px) {\n  .Hero-module__Hero--size-small___pKefA .Hero-module__Hero-heading___XWCFo {\n    font-size: 4.5rem;\n  }\n\n  .Hero-module__Hero--size-large___CoMDt .Hero-module__Hero-heading___XWCFo {\n    font-size: 6rem;\n  }\n\n  .Hero-module__Hero--size-large___CoMDt .Hero-module__Hero-description___z0X7e {\n    font-size: 1.5rem;\n  }\n}\n",""]),t.locals={Hero:"Hero-module__Hero___V9nXN","Hero--align-start":"Hero-module__Hero--align-start___560cZ","Hero--align-center":"Hero-module__Hero--align-center___oeAFd","Hero-heading":"Hero-module__Hero-heading___XWCFo","Hero--size-small":"Hero-module__Hero--size-small___pKefA","Hero--size-large":"Hero-module__Hero--size-large___CoMDt","Hero-description":"Hero-module__Hero-description___z0X7e","Hero-actions":"Hero-module__Hero-actions___r5GSi"};const a=t},792:(e,n,r)=>{r.d(n,{Z:()=>a});var o=r(645),t=r.n(o)()((function(e){return e[1]}));t.push([e.id,".LinkButton-module__LinkButton___IJbnC {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 1rem 1.5rem;\n  font-size: 1rem;\n  font-weight: 600;\n  line-height: 1;\n  text-decoration: none;\n  border-radius: 6px;\n  cursor: pointer;\n}\n\n.LinkButton-module__LinkButton-arrow___ebnk8 {\n  margin-left: 4px;\n}\n\n.LinkButton-module__LinkButton--primary___h\\+njR {\n  color: var(--gh-color-fg-onEmphasis);\n  background-color: var(--gh-color-neutral-emphasisPlus);\n}\n\n.LinkButton-module__LinkButton--secondary___uSMMd {\n  color: var(--gh-color-fg-default);\n  box-shadow: inset 0 0 0 1px var(--gh-color-border-default);\n  transition: box-shadow 200ms;\n}\n\n.LinkButton-module__LinkButton--secondary___uSMMd:hover {\n  box-shadow: inset 0 0 0 2px var(--gh-color-neutral-emphasisPlus);\n}\n\n/* Small breakpoint and up */\n@media screen and (min-width: 544px) {\n  .LinkButton-module__LinkButton___IJbnC {\n    font-size: 1.25rem;\n  }\n}\n",""]),t.locals={LinkButton:"LinkButton-module__LinkButton___IJbnC","LinkButton-arrow":"LinkButton-module__LinkButton-arrow___ebnk8","LinkButton--primary":"LinkButton-module__LinkButton--primary___h+njR","LinkButton--secondary":"LinkButton-module__LinkButton--secondary___uSMMd"};const a=t},645:e=>{e.exports=function(e){var n=[];return n.toString=function(){return this.map((function(n){var r=e(n);return n[2]?"@media ".concat(n[2]," {").concat(r,"}"):r})).join("")},n.i=function(e,r,o){"string"==typeof e&&(e=[[null,e,""]]);var t={};if(o)for(var a=0;a<this.length;a++){var i=this[a][0];null!=i&&(t[i]=!0)}for(var s=0;s<e.length;s++){var l=[].concat(e[s]);o&&t[l[0]]||(r&&(l[2]?l[2]="".concat(r," and ").concat(l[2]):l[2]=r),n.push(l))}},n}},418:e=>{var n=Object.getOwnPropertySymbols,r=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable;function t(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}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 n={},r=0;r<10;r++)n["_"+String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(n).map((function(e){return n[e]})).join(""))return!1;var o={};return"abcdefghijklmnopqrst".split("").forEach((function(e){o[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},o)).join("")}catch(e){return!1}}()?Object.assign:function(e,a){for(var i,s,l=t(e),d=1;d<arguments.length;d++){for(var _ in i=Object(arguments[d]))r.call(i,_)&&(l[_]=i[_]);if(n){s=n(i);for(var u=0;u<s.length;u++)o.call(i,s[u])&&(l[s[u]]=i[s[u]])}}return l}},251:(e,n,r)=>{r(418);var o=r(156),t=60103;if("function"==typeof Symbol&&Symbol.for){var a=Symbol.for;t=a("react.element"),a("react.fragment")}var i=o.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,s=Object.prototype.hasOwnProperty,l={key:!0,ref:!0,__self:!0,__source:!0};function d(e,n,r){var o,a={},d=null,_=null;for(o in void 0!==r&&(d=""+r),void 0!==n.key&&(d=""+n.key),void 0!==n.ref&&(_=n.ref),n)s.call(n,o)&&!l.hasOwnProperty(o)&&(a[o]=n[o]);if(e&&e.defaultProps)for(o in n=e.defaultProps)void 0===a[o]&&(a[o]=n[o]);return{$$typeof:t,type:e,key:d,ref:_,props:a,_owner:i.current}}n.jsx=d,n.jsxs=d},893:(e,n,r)=>{e.exports=r(251)},379:e=>{var n=[];function r(e){for(var r=-1,o=0;o<n.length;o++)if(n[o].identifier===e){r=o;break}return r}function o(e,o){for(var a={},i=[],s=0;s<e.length;s++){var l=e[s],d=o.base?l[0]+o.base:l[0],_=a[d]||0,u="".concat(d," ").concat(_);a[d]=_+1;var c=r(u),m={css:l[1],media:l[2],sourceMap:l[3],supports:l[4],layer:l[5]};if(-1!==c)n[c].references++,n[c].updater(m);else{var p=t(m,o);o.byIndex=s,n.splice(s,0,{identifier:u,updater:p,references:1})}i.push(u)}return i}function t(e,n){var r=n.domAPI(n);return r.update(e),function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap&&n.supports===e.supports&&n.layer===e.layer)return;r.update(e=n)}else r.remove()}}e.exports=function(e,t){var a=o(e=e||[],t=t||{});return function(e){e=e||[];for(var i=0;i<a.length;i++){var s=r(a[i]);n[s].references--}for(var l=o(e,t),d=0;d<a.length;d++){var _=r(a[d]);0===n[_].references&&(n[_].updater(),n.splice(_,1))}a=l}}},569:e=>{var n={};e.exports=function(e,r){var o=function(e){if(void 0===n[e]){var r=document.querySelector(e);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(e){r=null}n[e]=r}return n[e]}(e);if(!o)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");o.appendChild(r)}},216:e=>{e.exports=function(e){var n=document.createElement("style");return e.setAttributes(n,e.attributes),e.insert(n,e.options),n}},565:(e,n,r)=>{e.exports=function(e){var n=r.nc;n&&e.setAttribute("nonce",n)}},795:e=>{e.exports=function(e){var n=e.insertStyleElement(e);return{update:function(r){!function(e,n,r){var o="";r.supports&&(o+="@supports (".concat(r.supports,") {")),r.media&&(o+="@media ".concat(r.media," {"));var t=void 0!==r.layer;t&&(o+="@layer".concat(r.layer.length>0?" ".concat(r.layer):""," {")),o+=r.css,t&&(o+="}"),r.media&&(o+="}"),r.supports&&(o+="}");var a=r.sourceMap;a&&"undefined"!=typeof btoa&&(o+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),n.styleTagTransform(o,e,n.options)}(n,e,r)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)}}}},589:e=>{e.exports=function(e,n){if(n.styleSheet)n.styleSheet.cssText=e;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(e))}}},156:n=>{n.exports=e}},r={};function o(e){var t=r[e];if(void 0!==t)return t.exports;var a=r[e]={id:e,exports:{}};return n[e](a,a.exports,o),a.exports}o.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return o.d(n,{a:n}),n},o.d=(e,n)=>{for(var r in n)o.o(n,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},o.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var t={};return(()=>{o.r(t),o.d(t,{Hero:()=>S,ThemeProvider:()=>T,useTheme:()=>Z});var e=o(893);function n(e){var r,o,t="";if("string"==typeof e||"number"==typeof e)t+=e;else if("object"==typeof e)if(Array.isArray(e))for(r=0;r<e.length;r++)e[r]&&(o=n(e[r]))&&(t&&(t+=" "),t+=o);else for(r in e)e[r]&&(t&&(t+=" "),t+=r);return t}function r(){for(var e,r,o=0,t="";o<arguments.length;)(e=arguments[o++])&&(r=n(e))&&(t&&(t+=" "),t+=r);return t}var a=o(379),i=o.n(a),s=o(795),l=o.n(s),d=o(569),_=o.n(d),u=o(565),c=o.n(u),m=o(216),p=o.n(m),f=o(589),h=o.n(f),g=o(348),v={};v.styleTagTransform=h(),v.setAttributes=c(),v.insert=_().bind(null,"head"),v.domAPI=l(),v.insertStyleElement=p(),i()(g.Z,v);const x=g.Z&&g.Z.locals?g.Z.locals:void 0;var b=o(156),y=o.n(b),H=o(99),w={};w.styleTagTransform=h(),w.setAttributes=c(),w.insert=_().bind(null,"head"),w.domAPI=l(),w.insertStyleElement=p(),i()(H.Z,w);const L=H.Z&&H.Z.locals?H.Z.locals:void 0;function k({className:n,expanded:o=!1}){return(0,e.jsxs)("svg",{className:r(L.ExpandableArrow,o&&L["ExpandableArrow--expanded"],n),width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:[(0,e.jsx)("path",{fill:"currentColor",d:"M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"}),(0,e.jsx)("path",{className:r(L["ExpandableArrow-stem"],o&&L["ExpandableArrow-stem--expanded"]),stroke:"currentColor",d:"M1.75 8H11",strokeWidth:"1.5",strokeLinecap:"round"})]})}var A=o(792),E={};E.styleTagTransform=h(),E.setAttributes=c(),E.insert=_().bind(null,"head"),E.domAPI=l(),E.insertStyleElement=p(),i()(A.Z,E);const j=A.Z&&A.Z.locals?A.Z.locals:void 0;function C({variant:n="secondary",className:o,children:t,onMouseEnter:a,onMouseLeave:i,onFocus:s,onBlur:l,...d}){const[_,u]=y().useState(!1),[c,m]=y().useState(!1);return(0,e.jsxs)("a",{className:r(j.LinkButton,j[`LinkButton--${n}`],o),onMouseEnter:e=>{u(!0),a?.(e)},onMouseLeave:e=>{u(!1),i?.(e)},onFocus:e=>{m(!0),s?.(e)},onBlur:e=>{m(!1),l?.(e)},...d,children:[t,(0,e.jsx)(k,{className:j["LinkButton-arrow"],expanded:_||c})]})}function S({heading:n,description:o,primaryAction:t,secondaryAction:a,align:i="start",size:s="large"}){return(0,e.jsxs)("div",{className:r(x.Hero,x[`Hero--align-${i}`],x[`Hero--size-${s}`]),children:[(0,e.jsx)("h1",{className:x["Hero-heading"],children:n}),o?(0,e.jsx)("p",{className:x["Hero-description"],children:o}):null,(0,e.jsxs)("div",{className:x["Hero-actions"],children:[(0,e.jsx)(C,{variant:"primary",href:t.href,children:t.text}),a?(0,e.jsx)(C,{variant:"secondary",href:a.href,children:a.text}):null]})]})}var O;!function(e){e.LIGHT="light",e.DARK="dark",e.AUTO="auto"}(O||(O={}));const M=O.LIGHT,B=(0,b.createContext)({colorMode:M});function T({colorMode:n=M,children:r}){const[o,t]=(0,b.useState)(n);return(0,b.useEffect)((()=>(n===O.AUTO?t(N()):o!==n&&t(n),P(t))),[n,o,t]),(0,e.jsx)(B.Provider,{value:{colorMode:o},children:(0,e.jsx)("div",{"data-color-mode":o,children:r})})}const z=()=>window.matchMedia(`(prefers-color-scheme: ${O.DARK})`),N=()=>z().matches?O.DARK:O.LIGHT,P=e=>{const n=z(),r=n=>e(n.matches?O.DARK:O.LIGHT);return n.addEventListener("change",r),()=>n.removeEventListener("change",r)},Z=()=>(0,b.useContext)(B)})(),t})()}));
+!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("react")):"function"==typeof define&&define.amd?define("@primer/react-brand",[],r):"object"==typeof exports?exports["@primer/react-brand"]=r(require("react")):e["@primer/react-brand"]=r(e.React)}(this,(function(e){return(()=>{"use strict";var r={418:e=>{var r=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,t=Object.prototype.propertyIsEnumerable;function n(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}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 r={},o=0;o<10;o++)r["_"+String.fromCharCode(o)]=o;if("0123456789"!==Object.getOwnPropertyNames(r).map((function(e){return r[e]})).join(""))return!1;var t={};return"abcdefghijklmnopqrst".split("").forEach((function(e){t[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},t)).join("")}catch(e){return!1}}()?Object.assign:function(e,a){for(var i,s,c=n(e),l=1;l<arguments.length;l++){for(var u in i=Object(arguments[l]))o.call(i,u)&&(c[u]=i[u]);if(r){s=r(i);for(var d=0;d<s.length;d++)t.call(i,s[d])&&(c[s[d]]=i[s[d]])}}return c}},251:(e,r,o)=>{o(418);var t=o(697),n=60103;if("function"==typeof Symbol&&Symbol.for){var a=Symbol.for;n=a("react.element"),a("react.fragment")}var i=t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,s=Object.prototype.hasOwnProperty,c={key:!0,ref:!0,__self:!0,__source:!0};function l(e,r,o){var t,a={},l=null,u=null;for(t in void 0!==o&&(l=""+o),void 0!==r.key&&(l=""+r.key),void 0!==r.ref&&(u=r.ref),r)s.call(r,t)&&!c.hasOwnProperty(t)&&(a[t]=r[t]);if(e&&e.defaultProps)for(t in r=e.defaultProps)void 0===a[t]&&(a[t]=r[t]);return{$$typeof:n,type:e,key:l,ref:u,props:a,_owner:i.current}}r.jsx=l,r.jsxs=l},893:(e,r,o)=>{e.exports=o(251)},697:r=>{r.exports=e}},o={};function t(e){var n=o[e];if(void 0!==n)return n.exports;var a=o[e]={exports:{}};return r[e](a,a.exports,t),a.exports}t.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return t.d(r,{a:r}),r},t.d=(e,r)=>{for(var o in r)t.o(r,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:r[o]})},t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{t.r(n),t.d(n,{Hero:()=>d,ThemeProvider:()=>m,useTheme:()=>v});var e=t(893);function r(e){var o,t,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(o=0;o<e.length;o++)e[o]&&(t=r(e[o]))&&(n&&(n+=" "),n+=t);else for(o in e)e[o]&&(n&&(n+=" "),n+=o);return n}function o(){for(var e,o,t=0,n="";t<arguments.length;)(e=arguments[t++])&&(o=r(e))&&(n&&(n+=" "),n+=o);return n}const a={Hero:"Hero-module__Hero___-LIGB","Hero--align-start":"Hero-module__Hero--align-start___+ux3o","Hero--align-center":"Hero-module__Hero--align-center___L5ing","Hero-heading":"Hero-module__Hero-heading___Ns+oe","Hero-description":"Hero-module__Hero-description___5DYuI","Hero-actions":"Hero-module__Hero-actions___TSUhJ"};var i=t(697),s=t.n(i);function c({className:r,expanded:t=!1}){return(0,e.jsxs)("svg",{className:o("ExpandableArrow-module__ExpandableArrow___Zzb6R",t&&"ExpandableArrow-module__ExpandableArrow--expanded___02I33",r),width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:[(0,e.jsx)("path",{fill:"currentColor",d:"M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"}),(0,e.jsx)("path",{className:o("ExpandableArrow-module__ExpandableArrow-stem___o-Z1H",t&&"ExpandableArrow-module__ExpandableArrow-stem--expanded___omLNO"),stroke:"currentColor",d:"M1.75 8H11",strokeWidth:"1.5",strokeLinecap:"round"})]})}const l={LinkButton:"LinkButton-module__LinkButton___73d6V","LinkButton-arrow":"LinkButton-module__LinkButton-arrow___bd7ZC","LinkButton--primary":"LinkButton-module__LinkButton--primary___5T51r","LinkButton--secondary":"LinkButton-module__LinkButton--secondary___Oc3L1"};function u({variant:r="secondary",className:t,children:n,onMouseEnter:a,onMouseLeave:i,onFocus:u,onBlur:d,..._}){const[f,p]=s().useState(!1),[m,h]=s().useState(!1);return(0,e.jsxs)("a",{className:o(l.LinkButton,l[`LinkButton--${r}`],t),onMouseEnter:e=>{p(!0),a?.(e)},onMouseLeave:e=>{p(!1),i?.(e)},onFocus:e=>{h(!0),u?.(e)},onBlur:e=>{h(!1),d?.(e)},..._,children:[n,(0,e.jsx)(c,{className:l["LinkButton-arrow"],expanded:f||m})]})}function d({heading:r,description:t,primaryAction:n,secondaryAction:i,align:s="start"}){return(0,e.jsxs)("div",{className:o(a.Hero,a[`Hero--align-${s}`]),children:[(0,e.jsx)("h1",{className:a["Hero-heading"],children:r}),t?(0,e.jsx)("p",{className:a["Hero-description"],children:t}):null,(0,e.jsxs)("div",{className:a["Hero-actions"],children:[(0,e.jsx)(u,{variant:"primary",href:n.href,children:n.text}),i?(0,e.jsx)(u,{variant:"secondary",href:i.href,children:i.text}):null]})]})}var _;!function(e){e.LIGHT="light",e.DARK="dark",e.AUTO="auto"}(_||(_={}));const f=_.LIGHT,p=(0,i.createContext)({colorMode:f});function m({colorMode:r=f,children:o}){const[t,n]=(0,i.useState)(r);return(0,i.useEffect)((()=>(r===_.AUTO?n(y()):t!==r&&n(r),b(n))),[r,t,n]),(0,e.jsx)(p.Provider,{value:{colorMode:t},children:(0,e.jsx)("div",{"data-color-mode":t,children:o})})}const h=()=>window.matchMedia(`(prefers-color-scheme: ${_.DARK})`),y=()=>h().matches?_.DARK:_.LIGHT,b=e=>{const r=h(),o=r=>e(r.matches?_.DARK:_.LIGHT);return r.addEventListener("change",o),()=>r.removeEventListener("change",o)},v=()=>(0,i.useContext)(p)})(),n})()}));

package/lib/main.css

@@ -0,0 +1,142 @@
+/* TODO: Extract these global styles */
+body {
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; /* TODO: Use Alliance No. 1 or Mona Sans */
+  line-height: 1.5;
+}
+
+/* TODO: Replace hard-coded values with design tokens */
+
+.Hero-module__Hero___-LIGB {
+  padding: 6rem 0;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--gh-color-canvas-default);
+}
+
+.Hero-module__Hero--align-start___\+ux3o {
+  align-items: start;
+  text-align: left;
+}
+
+.Hero-module__Hero--align-center___L5ing {
+  align-items: center;
+  text-align: center;
+}
+
+.Hero-module__Hero-heading___Ns\+oe {
+  margin: 0;
+  font-size: 2.5rem;
+  font-weight: 700;
+  line-height: 1.1;
+  max-width: 20ch;
+  color: var(--gh-color-fg-default);
+}
+
+.Hero-module__Hero-description___5DYuI {
+  margin: 1.5rem 0 0;
+  font-size: 1rem;
+  max-width: 50ch;
+  color: var(--gh-color-fg-muted);
+}
+
+.Hero-module__Hero-actions___TSUhJ {
+  margin-top: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+}
+
+.Hero-module__Hero-actions___TSUhJ > :not(:last-child) {
+  margin: 0 0 1rem;
+}
+
+/* Small breakpoint and up */
+@media screen and (min-width: 544px) {
+  .Hero-module__Hero___-LIGB {
+    padding: 10.75rem 0;
+  }
+
+  .Hero-module__Hero-heading___Ns\+oe {
+    font-size: 3.5rem;
+  }
+
+  .Hero-module__Hero-description___5DYuI {
+    font-size: 1.25rem;
+  }
+
+  .Hero-module__Hero-actions___TSUhJ {
+    flex-direction: row;
+    width: auto;
+  }
+
+  .Hero-module__Hero-actions___TSUhJ > :not(:last-child) {
+    margin: 0 1rem 0 0;
+  }
+}
+
+/* Medium breakpoint and up */
+@media screen and (min-width: 768px) {
+  .Hero-module__Hero-heading___Ns\+oe {
+    font-size: 4.5rem;
+  }
+}
+
+.ExpandableArrow-module__ExpandableArrow___Zzb6R {
+  transition: transform 200ms;
+  transform: translateX(0);
+}
+
+.ExpandableArrow-module__ExpandableArrow--expanded___02I33 {
+  transform: translateX(4px);
+}
+
+.ExpandableArrow-module__ExpandableArrow-stem___o-Z1H {
+  stroke-dasharray: 10;
+  stroke-dashoffset: 10;
+  transition: stroke-dashoffset 200ms;
+}
+
+.ExpandableArrow-module__ExpandableArrow-stem--expanded___omLNO {
+  stroke-dashoffset: 20;
+}
+
+.LinkButton-module__LinkButton___73d6V {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem 1.5rem;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1;
+  text-decoration: none;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.LinkButton-module__LinkButton-arrow___bd7ZC {
+  margin-left: 4px;
+}
+
+.LinkButton-module__LinkButton--primary___5T51r {
+  color: var(--gh-color-fg-onEmphasis);
+  background-color: var(--gh-color-neutral-emphasisPlus);
+}
+
+.LinkButton-module__LinkButton--secondary___Oc3L1 {
+  color: var(--gh-color-fg-default);
+  box-shadow: inset 0 0 0 1px var(--gh-color-border-default);
+  transition: box-shadow 200ms;
+}
+
+.LinkButton-module__LinkButton--secondary___Oc3L1:hover {
+  box-shadow: inset 0 0 0 2px var(--gh-color-neutral-emphasisPlus);
+}
+
+/* Small breakpoint and up */
+@media screen and (min-width: 544px) {
+  .LinkButton-module__LinkButton___73d6V {
+    font-size: 1.25rem;
+  }
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/react-brand",
-  "version": "0.0.0-20220404005849",
+  "version": "0.0.3-rc.05d1b9f",
   "author": "GitHub, Inc.",
   "license": "MIT",
   "bugs": {
@@ -39,8 +39,8 @@
   },
   "prettier": "@github/prettier-config",
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": ">=17.0.0 <= 18.0.0",
+    "react-dom": ">=17.0.0 <= 18.0.0"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.4.3",
@@ -80,6 +80,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.5.1",
     "jest-axe": "^6.0.0",
+    "mini-css-extract-plugin": "^2.6.0",
     "postcss": "^8.4.7",
     "postcss-loader": "^6.2.1",
     "postcss-preset-env": "^7.4.2",

package/lib/scripts/build-css-variables.d.ts

@@ -1,49 +0,0 @@
-declare const primitives: IPrimitives;
-declare const fs: any;
-declare const path: any;
-declare const prettier: any;
-interface IScale {
-    [name: string]: string[];
-}
-interface IToken {
-    [name: string]: string;
-}
-interface IColorMode {
-    [name: string]: IToken | IScale | string;
-}
-interface IPrimitives {
-    colors: {
-        light: IColorMode;
-        dark: IColorMode;
-    };
-}
-declare const prefix = "--gh-color";
-declare const supportedModes: string[];
-/**
- * Recursively flattens raw Primitive data into a map of CSS variables
- */
-declare function recursivelyFlatten(currentObject: any, acc: any, previousKeyName: any): void;
-/**
- * Converts raw Primitives data for color modes to CSS variables
- * @param {IColorMode} a map of color primitives specific to a color mode
- * @return {string} of css variables
- */
-declare function composeCSSVariables(colorModeObject: IColorMode): string;
-/**
- *
- * @param {string} any unformatted string of css
- * @returns {string} formatted string of css
- */
-declare function formatVariables(variables: string): Promise<string>;
-/**
- * Return a string of CSS variables for the default color mode
- * @param {IColorMode} a map of color primitives specific to the default color mode
- * @returns {string} of css variables
- */
-declare function buildRoot(defaultModePrimitives: any): string;
-/**
- * Return a string of CSS variables for all color modes using HTML data attributes
- * @param {IColorMode} a map of color primitives specific to the default color mode
- * @returns {string} of css variables
- */
-declare function buildVarsForDataAttribute(colorModePrimitives: IColorMode, key: any): string;