is to as

docs/CodeExample.js

@@ -12,7 +12,7 @@ const StyledLiveProvider = styled(LiveProvider)`
   ${CodeExampleStyles}
 `
 
-const LANG_PATTERN = /\blanguage-\.?(jsx?|html)\b/
+const LANG_PATTERN = /\blanguage-\.?(jsx|html)\b/
 
 const converter = new HTMLtoJSX({
   indent: '  ',
@@ -27,9 +27,9 @@ const languageTransforms = {
 }
 
 export default function CodeExample(props) {
-  const {children, dangerouslySetInnerHTML, dead, source, ...rest} = props
+  const {children, dangerouslySetInnerHTML, inert, source, ...rest} = props
   const lang = getLanguage(props.className)
-  if (lang && !dead) {
+  if (lang && !inert) {
     const liveProps = {
       code: source,
       scope: {Octicon, getIconByName},
@@ -39,7 +39,7 @@ export default function CodeExample(props) {
     return (
       <StyledLiveProvider {...liveProps}>
         <BorderBox {...rest}>
-          <BorderBox bg="white" p={3} border={0} borderBottom={1} borderRadius={0}>
+          <BorderBox bg="white" border={0} borderBottom={1} borderRadius={0}>
             <Frame>
               <LivePreview />
             </Frame>

package-lock.json

@@ -1365,6 +1365,101 @@
         "url-template": "^2.0.8"
       }
     },
+    "@primer/blueprints": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@primer/blueprints/-/blueprints-3.0.1.tgz",
+      "integrity": "sha512-B+YBA/S9GpkdC2PqKHsLqbjIXf7MjO+6Cl7jgDyvI6dg3PuNld7JmZSAGzV9NPbK6gI9F4yI9KIl4iSVPjSBgw==",
+      "dev": true,
+      "requires": {
+        "@githubprimer/octicons-react": "^8.1.3",
+        "@primer/components": "12.0.1",
+        "@primer/next-pages": "0.0.3",
+        "downshift": "3.2.7",
+        "globby": "9.1.0",
+        "lunr": "2.3.6",
+        "prism-github": "^1.1.0",
+        "prop-types": "^15.6.2",
+        "react": "16.8.0",
+        "react-dom": "16.8.1",
+        "react-live": "2.0.0",
+        "react-measure": "^2.2.2",
+        "slugify": "1.3.4",
+        "styled-components": "4.1.3",
+        "styled-system": "4.0.4",
+        "val-loader": "1.1.1"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.5",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.5.tgz",
+          "integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A==",
+          "dev": true
+        },
+        "globby": {
+          "version": "9.1.0",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-9.1.0.tgz",
+          "integrity": "sha512-VtYjhHr7ncls724Of5W6Kaahz0ag7dB4G62/2HsN+xEKG6SrPzM1AJMerGxQTwJGnN9reeyxdvXbuZYpfssCvg==",
+          "dev": true,
+          "requires": {
+            "@types/glob": "^7.1.1",
+            "array-union": "^1.0.2",
+            "dir-glob": "^2.2.1",
+            "fast-glob": "^2.2.6",
+            "glob": "^7.1.3",
+            "ignore": "^4.0.3",
+            "pify": "^4.0.1",
+            "slash": "^2.0.0"
+          }
+        },
+        "react": {
+          "version": "16.8.0",
+          "resolved": "https://registry.npmjs.org/react/-/react-16.8.0.tgz",
+          "integrity": "sha512-g+nikW2D48kqgWSPwNo0NH9tIGG3DsQFlrtrQ1kj6W77z5ahyIHG0w8kPpz4Sdj6gyLnz0lEd/xsjOoGge2MYQ==",
+          "dev": true,
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1",
+            "prop-types": "^15.6.2",
+            "scheduler": "^0.13.0"
+          }
+        },
+        "react-live": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/react-live/-/react-live-2.0.0.tgz",
+          "integrity": "sha512-lo0HBSFJvwIK/Nv4pcMNhTRbQIZkNAwic8fNfYlnTT5rbciaSWDFvRbhvLDBRFNJYq4ZnpPFkgpnufzCq8C96g==",
+          "dev": true,
+          "requires": {
+            "buble": "0.19.6",
+            "core-js": "^2.4.1",
+            "create-react-context": "^0.2.3",
+            "dom-iterator": "^1.0.0",
+            "prism-react-renderer": "^0.1.0",
+            "prop-types": "^15.5.8",
+            "react-simple-code-editor": "^0.9.0",
+            "unescape": "^0.2.0"
+          }
+        },
+        "styled-components": {
+          "version": "4.1.3",
+          "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.1.3.tgz",
+          "integrity": "sha512-0quV4KnSfvq5iMtT0RzpMGl/Dg3XIxIxOl9eJpiqiq4SrAmR1l1DLzNpMzoy3DyzdXVDMJS2HzROnXscWA3SEw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-module-imports": "^7.0.0",
+            "@emotion/is-prop-valid": "^0.7.3",
+            "@emotion/unitless": "^0.7.0",
+            "babel-plugin-styled-components": ">= 1",
+            "css-to-react-native": "^2.2.2",
+            "memoize-one": "^4.0.0",
+            "prop-types": "^15.5.4",
+            "react-is": "^16.6.0",
+            "stylis": "^3.5.0",
+            "stylis-rule-sheet": "^0.0.10",
+            "supports-color": "^5.5.0"
+          }
+        }
+      }
+    },
     "@primer/components": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/@primer/components/-/components-12.0.1.tgz",
@@ -6934,6 +7029,12 @@
       "integrity": "sha1-xV2DzMG5TNUImk6T+niRxyY+Wao=",
       "dev": true
     },
+    "compute-scroll-into-view": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.11.tgz",
+      "integrity": "sha512-uUnglJowSe0IPmWOdDtrlHXof5CTIJitfJEyITHBW6zDVOGu9Pjk5puaLM73SLcwak0L4hEjO7Td88/a6P5i7A==",
+      "dev": true
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -8697,6 +8798,18 @@
         "dotenv-defaults": "^1.0.2"
       }
     },
+    "downshift": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/downshift/-/downshift-3.2.7.tgz",
+      "integrity": "sha512-mbUO9ZFhMGtksIeVWRFFjNOPN237VsUqZSEYi0VS0Wj38XNLzpgOBTUcUjdjFeB8KVgmrcRa6GGFkTbACpG6FA==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.1.2",
+        "compute-scroll-into-view": "^1.0.9",
+        "prop-types": "^15.6.0",
+        "react-is": "^16.5.2"
+      }
+    },
     "duplexer": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
@@ -14362,6 +14475,12 @@
         "yallist": "^2.1.2"
       }
     },
+    "lunr": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.6.tgz",
+      "integrity": "sha512-swStvEyDqQ85MGpABCMBclZcLI/pBIlu8FFDtmX197+oEgKloJ67QnB+Tidh0340HmLMs39c4GrkPY3cmkXp6Q==",
+      "dev": true
+    },
     "macos-release": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/macos-release/-/macos-release-2.2.0.tgz",
@@ -19383,6 +19502,12 @@
       "integrity": "sha1-MBvwXU9Y/2+tY/Ok0mybNYHJ/sg=",
       "dev": true
     },
+    "prism-react-renderer": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-0.1.6.tgz",
+      "integrity": "sha512-uZJn5wrygCH0ZMue+2JRd0qJharrmpxa6/uK7deKgvCtJFFE+VsyvJ49LS8/ATt0mlAJS6vFQTDvhXBEXsda+A==",
+      "dev": true
+    },
     "prismjs": {
       "version": "1.16.0",
       "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.16.0.tgz",
@@ -20202,6 +20327,12 @@
         "resize-observer-polyfill": "^1.5.1"
       }
     },
+    "react-simple-code-editor": {
+      "version": "0.9.10",
+      "resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.9.10.tgz",
+      "integrity": "sha512-80LJwRQS7Wi9Ugh/e6FRHWdcg4oQOpMBDFxyDpORILffrHdV3EIQ1IeX5x7488r05iFgLbVDV4nQ1LRKjgCm0g==",
+      "dev": true
+    },
     "react-syntax-highlighter": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-8.1.0.tgz",
@@ -21662,6 +21793,12 @@
       "integrity": "sha1-VusCfWW00tzmyy4tMsTUr8nh1wc=",
       "dev": true
     },
+    "slugify": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.3.4.tgz",
+      "integrity": "sha512-KP0ZYk5hJNBS8/eIjGkFDCzGQIoZ1mnfQRYS5WM3273z+fxGWXeN0fkwf2ebEweydv9tioZIHGZKoF21U07/nw==",
+      "dev": true
+    },
     "snake-case": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-2.1.0.tgz",
@@ -22476,6 +22613,16 @@
         }
       }
     },
+    "styled-system": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/styled-system/-/styled-system-4.0.4.tgz",
+      "integrity": "sha512-VXtfYSqCOprXv9AEFod4AXkFcvjueEl2b6KBN6k+FecMUiR6PkLmybhzSsjbAtCFK1G0bmmNAVuuqiB9C8i2jg==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.3.4",
+        "prop-types": "^15.7.2"
+      }
+    },
     "stylehacks": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-2.3.2.tgz",

package.json

@@ -123,6 +123,7 @@
     "fs": "0.0.1-security",
     "html-2-jsx": "0.5.1-dev",
     "react": "16.8.1",
-    "react-dom": "16.8.1"
+    "react-dom": "16.8.1",
+    "@primer/blueprints": "3.0.1"
   }
 }