@primer/blueprints - npm Package Compare versions

Comparing version 0.0.0-3f63f48 to 0.0.0-4790a59

dist/index.esm.js

 import React, { useEffect, useState } from 'react';
 import ReactDOM, { findDOMNode } from 'react-dom';
-import { Button, BorderBox, Absolute, Box, StyledOcticon, Relative, Text, Link, Avatar, Flex, theme, Sticky } from '@primer/components';
-import Octicon, { Clippy, getIconByName, ChevronDown, MarkGithub, ChevronRight, PrimitiveDot, Comment, Info, FileCode, Alert } from '@githubprimer/octicons-react';
+import { Button, BorderBox, Absolute, Box, StyledOcticon, Relative, Text, Link, Avatar, Flex, theme, TextInput, Sticky, Heading } from '@primer/components';
+import Octicon, { Clippy, getIconByName, ChevronDown, MarkGithub, ChevronRight, Link as Link$1, PrimitiveDot, Comment, Info, FileCode, Alert } from '@githubprimer/octicons-react';
 import getConfig from 'next/config';
@@ -17,2 +17,5 @@ import TreeModel from 'tree-model';
 import { withRouter } from 'next/router';
+import lunr from 'lunr';
+import Downshift from 'downshift';
+import classnames from 'classnames';
 
@@ -74,2 +77,21 @@ function _classCallCheck(instance, Constructor) {
 
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+    var ownKeys = Object.keys(source);
+
+    if (typeof Object.getOwnPropertySymbols === 'function') {
+      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+      }));
+    }
+
+    ownKeys.forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    });
+  }
+
+  return target;
+}
+
 function _inherits(subClass, superClass) {
@@ -814,3 +836,3 @@ if (typeof superClass !== "function" && superClass !== null) {
 
-function Link$1(_ref) {
+function Link$2(_ref) {
   var href = _ref.href,
@@ -825,3 +847,3 @@ rest = _objectWithoutProperties(_ref, ["href"]);
 }
-Link$1.displayName = "Link";
+Link$2.displayName = "Link";
 
@@ -895,4 +917,86 @@ var get$1 = function get$$1(key) {
 
+var documents = {
+  "undefined": {
+    "content": "import {Box, Heading} from '@primer/components'\nimport {CONTENT_MAX_WIDTH} from '../../src/constants'\n\nexport const Hero = () => (\n  <Box bg=\"black\">\n    <Box maxWidth={CONTENT_MAX_WIDTH} p={6} mx=\"auto\" mb={3}>\n      <Box mt={4} mb={4}>\n        <Heading fontWeight=\"bold\" color=\"blue.4\" fontSize={7} pb={3} m={0}>\n          Primer Blueprints\n        </Heading>\n      </Box>\n    </Box>\n  </Box>\n)\n\n# Introduction\n\nThese components are to be used to build documentation sites across our different Primer projects.\n"
+  },
+  "content-components/clipboard-copy": {
+    "title": "ClipboardCopy",
+    "path": "content-components/clipboard-copy",
+    "content": "\nUse the ClipboardCopy component to add copying functionality next to code blocks in documentation.\nThe `value` prop must be provided with the current value of the code block.\n\n```.jsx\n<ClipboardCopy value={'hihihi'}/>\n\n```\n\n\n## Component props\n\n| Name | Type | Default | Description |\n| :- | :- | :-: | :- |\n| value | String | | The content that will be added to the user's clipboard when clicked.\n"
+  },
+  "content-components/frame": {
+    "title": "Frame",
+    "path": "content-components/frame",
+    "content": "\nThe Frame component wraps children components in an iframe\n\n\n```.jsx\n<Frame minHeight={50}>\n  <Text>Hi</Text>\n</Frame>\n```\n\n## Component props\n\n| Name | Type | Default | Description |\n| :- | :- | :-: | :- |\n| minHeight | String or Number | 0 | minHeight of iframe\n| border | String | 0 | border for element\n| borderRadius | String or Number | 0 | borderRadius for element\n| width | String or Number | 100% | width of iframe\n"
+  },
+  "content-components/code-example": {
+    "title": "CodeExample",
+    "path": "content-components/code-example",
+    "content": "\nUse the CodeExample component to wrap HTML code examples. This component was created to prevent CSS from our markdown styles from bleeding over into examples by displaying examples in an iframe.\n\nThis component can also be passed to the component prop of your MDXProvider to replace all code blocks with CodeExample like so:\n\n```\nconst components = {\n  code: CodeExample\n}\n\nreturn (\n  <MDXProvider components={components}>\n    <Component {...page} />\n  </MDXProvider>\n)\n\n```\n\n```.jsx\n<CodeExample>\n  <div>hello world!</div>\n</CodeExample>\n\n```\n"
+  },
+  "content-components/index": {
+    "title": "Content Components",
+    "path": "content-components/index",
+    "content": "\n Components are reusable React components that can be used to build UI for our documentation sites.\n"
+  },
+  "content-components/contributors": {
+    "title": "Contributors",
+    "path": "content-components/contributors",
+    "content": "\nUse the Contributors component to add contributor credit to the bottom of any docs page. With a provided file path & repo path, the component will fetch commit data from the GitHub API and display all contributors to that file. In instances where you'd like to add additional contributor credits that are not reflected in the commit data (for example, if a repository has been moved and the git history lost) you can use the `contributor` prop to add additional contributors.\n\n\n```.jsx\n<Contributors\n  filePath='README.md'\n  repoPath='primer/components'\n  contributors={[{login: 'emplums'}, {login: 'broccolini'}]}\n/>\n```\n\n## Component props\n\n| Name | Type | Default | Description |\n| :- | :- | :-: | :- |\n| filePath | String | | The path to the file you'd like to pull contributor data from. |\n| repoPath | String | | The repository path on GitHub. For example: `primer/components` |\n| contributors | Array | | Prop for adding additional contributors not reflected in commit history. Format is an array of objects with a `login` key. Ex. `[{login: 'emplums'}, {login: 'broccolini'}]` |\n"
+  },
+  "content-components/link": {
+    "title": "Link",
+    "path": "content-components/link",
+    "content": "\nUse the Link component to add links within documentation. The link component wraps the standard Primer link with Next's link component for easy routing in Next.js applications.\n\n```.jsx\n<Link href=\"https://github.com/primer\">Primer</Link>\n\n```\n"
+  },
+  "navigation-components/header": {
+    "title": "Header",
+    "path": "navigation-components/header",
+    "keywords": ["navigation", "header"],
+    "content": "\nUse Header to provide a top navigation for your site. Children of `Header` will be rendered on the right side of the component. Children should be top level navigation links. The `title` prop specifies what should be rendered to the right of the GitHub Mark. The `root` prop specifies where you'd like the GitHub Mark to link to. Leave blank if you'd like it to route to `/`.\n```.jsx\n<Header title=\"Hello world!\" root='/blueprints'>\n  <NavDropdown title={`What's new`}>\n    <NavItem>Overview</NavItem>\n    <NavItem>Interface Guidelines</NavItem>\n    <NavItem>Octicons</NavItem>\n  </NavDropdown>\n  <NavDropdown title='Design'>\n    <NavItem>Overview</NavItem>\n    <NavItem>Interface Guidelines</NavItem>\n    <NavItem>Octicons</NavItem>\n  </NavDropdown>\n  <NavDropdown title='Development'>\n    <NavItem>Overview</NavItem>\n    <NavItem>Interface Guidelines</NavItem>\n    <NavItem>Octicons</NavItem>\n  </NavDropdown>\n  <NavDropdown title='Content'>\n    <NavItem>Overview</NavItem>\n    <NavItem>Interface Guidelines</NavItem>\n    <NavItem>Octicons</NavItem>\n  </NavDropdown>\n  <NavDropdown title='Tools'>\n    <NavItem>Overview</NavItem>\n    <NavItem>Interface Guidelines</NavItem>\n    <NavItem>Octicons</NavItem>\n  </NavDropdown>\n</Header>\n```\n"
+  },
+  "navigation-components/index": {
+    "title": "Navigation Components",
+    "path": "navigation-components/index",
+    "content": "\nNavigation components can be used to build navigation on documentation sites\n"
+  },
+  "navigation-components/nav-list": {
+    "title": "NavList",
+    "path": "navigation-components/nav-list",
+    "content": "\n\nA `<NavList>` renders a `<Section.Link>` for the given `path` and looks up the\npath in the page tree. If a node is found, it renders a `<NavLink>` for each\nof the node's children.\n\nThe automatically generated page links in a NavList are sorted alphabetically by either the sort_title or title frontmatter keys. If a page has a non-empty sort_title, that value is used only to determine its position in the list; otherwise, the title determines their sort order. The title key is always used as a page's link text.\n\n\n```.jsx\n<NavList path='/blueprints/content-components'/>\n```\n"
+  },
+  "navigation-components/page-link": {
+    "title": "PageLink",
+    "path": "navigation-components/page-link",
+    "content": "\nThe PageLink component takes an `href` and optional `children`.\nIf no `children` are provided, we look up the \"node\" of the corresponding\npage in the tree (the one whose `path` matches the given `href`) and use\nthat node's `title` frontmatter key. In other words, given the following\npages/foo/bar.md:\n\n```md\n---\ntitle: Foo Bar\n---\n```\n\nThe following instance of PageLink should render a link to \"/foo/bar\" with\n\"Foo Bar\" as its text:\n```.jsx\n<PageLink href=\"/foo/bar\" />\n```\n"
+  },
+  "navigation-components/section": {
+    "title": "Section",
+    "path": "navigation-components/section",
+    "content": "\nA `Section` gets a `path` and optional children. If it has children it will\nrender those and prepend each child's `href` prop with the provided `path`.\nThis means that you can do:\n\n```.jsx\n<Section path=\"/section\">\n  <Section.Link href=\"foo\">Links to /section/foo</Section.Link>\n</Section>\n```\n\nIf no children are provided, it renders a [`NavList`](/blueprints/nav-components/NavList) with the provided\n`path`.\n"
+  },
+  "navigation-components/route-match": {
+    "title": "RouteMatch",
+    "path": "navigation-components/route-match",
+    "content": "\nUse `RouteMatch` to conditionally render content without a wrapper\nelement when contained directly in a `Router`. `RouteMatch` is most commonly used to conditionally render a chunk of side navigation links.\n\n\n```.jsx\n<Router>\n  <RouteMatch path=\"/blueprints/navigation-components\">\n    <Box>this will only show up on pages whose path begins with \"/blueprints/navigation-components\"</Box>\n  </RouteMatch>\n  <RouteMatch path=\"/blueprints/content-components\">\n    <Box>this will only show up on pages whose path begins with \"/blueprints/content-components\"</Box>\n  </RouteMatch>\n</Router>\n\n```\n"
+  },
+  "navigation-components/nav-link": {
+    "title": "NavLink",
+    "path": "navigation-components/nav-link",
+    "content": "\nThe NavLink component is a PageLink that turns black when it's href matches the current path. NavLinks are typically used in sidebar sub-navigation.\n\n\n```.jsx\nMatches current path:\n<NavLink mb={4} href='/blueprints/navigation-components/NavLink' />\n\nDoes not match current path:\n<NavLink href='/blueprints/navigation-components/Section' />\n```\n"
+  },
+  "navigation-components/side-nav": {
+    "title": "SideNav",
+    "path": "navigation-components/side-nav",
+    "content": "\n\nContainer component that takes children and nests them in a Router with layout styling. The `SideNav` of this site uses `Section` components to show both the Content Components and Navigation Components sections. See [the `Section` docs](/blueprints/navigation-components/section) for more details.\n\nYou may also use the `RouteMatch` components in your `SideNav` to conditionally show specific navigation links in the SideNav depending on where you are on the docs site. See [`RouteMatch` docs](/blueprints/navigation-components/section) for more details.\n\n\n```.jsx\n<SideNav>\n  <RouteMatch path=\"/blueprints\">\n    <Section path=\"content-components\" />\n  </RouteMatch>\n</SideNav>\n```\n"
+  },
+  "tools/index": {
+    "title": "Tools",
+    "path": "tools/index",
+    "content": "\nComing soon\n"
+  }
+};
+
 function _templateObject$3() {
-  var data = _taggedTemplateLiteral(["\n  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: block;\n  text-decoration: none;\n  color: ", ";\n  background-color: ", ";\n  padding: 8px;\n"]);
 
@@ -905,4 +1009,130 @@ _templateObject$3 = function _templateObject() {
 }
-var BoxShadow = styled(Box)(_templateObject$3());
+var SearchItem = styled(Link$2)(_templateObject$3(), function (props) {
+  return props.isHighlighted ? '#fff' : '#24292e';
+}, function (props) {
+  return props.isHighlighted ? '#0366d6' : '#fff';
+});
 
+function _templateObject$4() {
+  var data = _taggedTemplateLiteral(["\n  color: #fff;\n  background-color: rgba(255, 255, 255, 0.07);\n  border: 1px;\n  border: 1px solid transparent;\n  &:focus,\n  &:active {\n    border: 1px solid rgba(255, 255, 255, 0.15);\n    outline: none;\n    box-shadow: none;\n  }\n"]);
+
+  _templateObject$4 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var SearchInput = styled(TextInput)(_templateObject$4());
+
+function _templateObject$5() {
+  var data = _taggedTemplateLiteral(["\n  box-shadow: 0 1px 5px rgba(27, 31, 35, 0.15);\n  width: 100%;\n  overflow: auto;\n  right: 0;\n  background-color: #fff;\n  display: ", ";\n  position: absolute;\n\n  @media (min-width: 1012px) {\n    width: 0;\n    min-width: 320px;\n    height: auto;\n    max-height: 240px;\n    border-radius: 3px;\n    border: 1px solid #e1e4e8;\n    padding-bottom: 0;\n  }\n"]);
+
+  _templateObject$5 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var SearchResults = styled.div(_templateObject$5(), function (props) {
+  return props.open ? 'block' : 'none';
+});
+
+function Search(_ref) {
+  var root = _ref.root;
+  var idx = lunr(function () {
+    this.ref('path'); //eslint-disable-line
+
+    this.field('title'); //eslint-disable-line
+
+    this.field('content'); //eslint-disable-line
+
+    this.field('keywords'); //eslint-disable-line
+
+    var _arr = Object.values(documents);
+
+    for (var _i = 0; _i < _arr.length; _i++) {
+      var doc = _arr[_i];
+      this.add(doc); //eslint-disable-line
+    }
+  });
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      results = _useState2[0],
+      setResults = _useState2[1];
+
+  var onChange = function onChange(e) {
+    if (e.target) {
+      setResults(idx.search(e.target.value));
+    }
+  };
+
+  var renderResults = function renderResults(selectedItem, getItemProps, highlightedIndex) {
+    return results.map(function (result, index) {
+      var doc = documents[result.ref];
+      return React.createElement(SearchItem //eslint-disable-line
+      , getItemProps({
+        item: result,
+        index: index,
+        key: result.ref,
+        href: "/".concat(root, "/").concat(doc.path),
+        isHighlighted: highlightedIndex === index
+      }), doc.title);
+    });
+  };
+
+  function stateReducer(state, changes) {
+    switch (changes.type) {
+      case Downshift.stateChangeTypes.keyDownEnter:
+      case Downshift.stateChangeTypes.clickItem:
+        return _objectSpread({}, changes, {
+          inputValue: ''
+        });
+
+      default:
+        return changes;
+    }
+  }
+
+  return React.createElement(Box, {
+    is: Relative
+  }, React.createElement(Downshift, {
+    onChange: onChange,
+    itemToString: function itemToString(item) {
+      return item ? documents[item.ref].title : '';
+    },
+    stateReducer: stateReducer
+  }, function (_ref2) {
+    var getInputProps = _ref2.getInputProps,
+        getMenuProps = _ref2.getMenuProps,
+        getLabelProps = _ref2.getLabelProps,
+        getItemProps = _ref2.getItemProps,
+        isOpen = _ref2.isOpen,
+        highlightedIndex = _ref2.highlightedIndex,
+        selectedItem = _ref2.selectedItem;
+    return React.createElement("div", null, React.createElement("label", _extends({
+      hidden: true
+    }, getLabelProps()), ' ', "//eslint-disable-line Search docs"), React.createElement(SearchInput, _extends({
+      placeholder: "Search"
+    }, getInputProps({
+      onChange: onChange
+    }))), React.createElement(SearchResults, _extends({
+      open: isOpen
+    }, getMenuProps()), renderResults(selectedItem, getItemProps, highlightedIndex)));
+  }));
+}
+
+Search.displayName = "Search";
+
+function _templateObject$6() {
+  var data = _taggedTemplateLiteral(["\n  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);\n"]);
+
+  _templateObject$6 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var BoxShadow = styled(Box)(_templateObject$6());
+
 var HeaderText = function HeaderText(props) {
@@ -931,9 +1161,11 @@ return React.createElement(Text, _extends({
     justifyContent: "space-between"
-  }, React.createElement(Link$1, {
-    href: "/".concat(root),
-    color: "white",
-    ml: 3
   }, React.createElement(Flex, {
     alignItems: "center",
     justifyContent: "center"
+  }, React.createElement(Link$2, {
+    href: "https://primer.style/".concat(root),
+    color: "white",
+    mx: 3
+  }, React.createElement(Flex, {
+    alignItems: "center"
   }, React.createElement(StyledOcticon, {
@@ -953,7 +1185,9 @@ color: "blue.4",
     fontWeight: "bold"
-  }, subtitle))), React.createElement(Box, {
+  }, subtitle))), React.createElement(Search, {
+    root: root
+  })), React.createElement(Box, {
     display: ['none', 'none', 'flex']
   }, children), React.createElement(Box, {
     display: ['block', 'block', 'none']
-  }, React.createElement(Link$1, {
+  }, React.createElement(Link$2, {
     href: "#sidenav"
@@ -979,2 +1213,41 @@ }, React.createElement(BorderBox, {
 
+function _templateObject$7() {
+  var data = _taggedTemplateLiteral(["\n  .anchor {\n    display: none;\n  }\n  &:hover .anchor {\n    display: inline-block;\n  }\n  &:focus .anchor {\n    display: inline-block;\n  }\n"]);
+
+  _templateObject$7 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+
+var Anchor = function Anchor(_ref) {
+  var id = _ref.id,
+      className = _ref.className;
+  return React.createElement("a", {
+    href: "#".concat(id),
+    className: classnames('anchor', className)
+  }, React.createElement(StyledOcticon, {
+    color: "black",
+    icon: Link$1
+  }));
+};
+
+Anchor.displayName = "Anchor";
+var StyledHeading = styled(Heading)(_templateObject$7());
+
+var MarkdownHeading = function MarkdownHeading(_ref2) {
+  var children = _ref2.children,
+      id = _ref2.id,
+      rest = _objectWithoutProperties(_ref2, ["children", "id"]);
+
+  return React.createElement(StyledHeading, _extends({
+    id: id
+  }, rest), React.createElement(Anchor, {
+    id: id
+  }), children);
+};
+
+MarkdownHeading.displayName = "MarkdownHeading";
+
 /**
@@ -1006,3 +1279,3 @@ * The PageLink component takes an `href` and optional `children`.
   if (content) {
-    return React.createElement(Link$1, props);
+    return React.createElement(Link$2, props);
   }
@@ -1014,3 +1287,3 @@
   var children = (node ? node.meta.title : null) || href;
-  return React.createElement(Link$1, props, children);
+  return React.createElement(Link$2, props, children);
 }
@@ -1141,6 +1414,6 @@ PageLink.displayName = "PageLink";
 
-function _templateObject$4() {
+function _templateObject$8() {
   var data = _taggedTemplateLiteral(["\n  display: inline-block;\n  white-space: nowrap;\n"]);
 
-  _templateObject$4 = function _templateObject() {
+  _templateObject$8 = function _templateObject() {
     return data;
@@ -1151,3 +1424,3 @@ };
 }
-var StyledLabel = styled(BorderBox)(_templateObject$4());
+var StyledLabel = styled(BorderBox)(_templateObject$8());
 var STATUS_COLORS = {
@@ -1260,7 +1533,21 @@ stable: 'green.6',
     href: "https://primer.style#design"
-  }, "Overview"), React.createElement(NavItem, null, "Interface Guidelines"), React.createElement(NavItem, null, "Icons"), React.createElement(NavItem, null, "Illustrations"), React.createElement(NavItem, null, "Presentations")), React.createElement(NavDropdown, {
+  }, "Overview"), React.createElement(NavItem, {
+    href: "https://primer.style/design"
+  }, "Interface Guidelines"), React.createElement(NavItem, {
+    href: "https://octicons.github.com/"
+  }, "Icons"), React.createElement(NavItem, {
+    href: "https://github.com/primer/presentations"
+  }, "Presentations")), React.createElement(NavDropdown, {
     title: "Development"
   }, React.createElement(NavItem, {
     href: "https://primer.style#development"
-  }, "Overview"), React.createElement(NavItem, null, "Primer CSS"), React.createElement(NavItem, null, "Primer Components"), React.createElement(NavItem, null, "Deploy"), React.createElement(NavItem, null, "Prototype")), React.createElement(NavDropdown, {
+  }, "Overview"), React.createElement(NavItem, {
+    href: "https://primer.style/css"
+  }, "Primer CSS"), React.createElement(NavItem, {
+    href: "https://primer.style/components"
+  }, "Primer Components"), React.createElement(NavItem, {
+    href: "https://github.com/primer/deploy"
+  }, "Deploy"), React.createElement(NavItem, {
+    href: "https://primer.style/css/tools/prototyping"
+  }, "Prototyping")), React.createElement(NavDropdown, {
     direction: "sw",
@@ -1270,3 +1557,11 @@ title: "Tools"
     href: "https://primer.style#tools"
-  }, "Overview"), React.createElement(NavItem, null, "Atom packages"), React.createElement(NavItem, null, "Docs set"), React.createElement(NavItem, null, "GitHub local environment"), React.createElement(NavItem, null, "Linting")));
+  }, "Overview"), React.createElement(NavItem, {
+    href: "https://primer.style/css/tools/atom-packages"
+  }, "Atom packages"), React.createElement(NavItem, {
+    href: "https://primer.style/css/tools/docset"
+  }, "Docs set"), React.createElement(NavItem, {
+    href: "https://primer.style/css/tools/local-primer"
+  }, "GitHub local environment"), React.createElement(NavItem, {
+    href: "https://primer.style/css/tools/linting"
+  }, "Linting")));
 };
@@ -1332,2 +1627,2 @@
 
-export { ClipboardCopy, CodeExample, Contributors, Details, Frame, Header, Link$1 as Link, NavDropdown, NavItem, NavLink, NavList, Outline, PackageHeader, PageLink, PrimerHeader, RouteMatch, Router, Section, SideNav, StatusLabel, CommonStyles, CommonScripts, config, assetPrefix, assetPath, getAssetPath, requirePage, pathMap, pageTree, rootPage, sortCompare, nodeSort, addPath };
+export { ClipboardCopy, CodeExample, Contributors, Details, Frame, Header, Link$2 as Link, MarkdownHeading, NavDropdown, NavItem, NavLink, NavList, Outline, PackageHeader, PageLink, PrimerHeader, RouteMatch, Router, Section, Search, SearchInput, SearchItem, SearchResults, SideNav, StatusLabel, CommonStyles, CommonScripts, config, assetPrefix, assetPath, getAssetPath, requirePage, pathMap, pageTree, rootPage, sortCompare, nodeSort, addPath };

dist/index.umd.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom'), require('@primer/components'), require('@githubprimer/octicons-react'), require('next/config'), require('tree-model'), require('path'), require('react-measure'), require('html-2-jsx'), require('react-live'), require('prism-github/prism-github.scss'), require('prop-types'), require('styled-components'), require('styled-system'), require('next/link'), require('next/router')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom', '@primer/components', '@githubprimer/octicons-react', 'next/config', 'tree-model', 'path', 'react-measure', 'html-2-jsx', 'react-live', 'prism-github/prism-github.scss', 'prop-types', 'styled-components', 'styled-system', 'next/link', 'next/router'], factory) :
-  (factory((global.primer = {}),global.React,global.ReactDOM,global.components,global.Octicon,global.getConfig,global.TreeModel,global.path,global.Measure,global.HTMLtoJSX,global.reactLive,null,global.PropTypes,global.styled,global.styledSystem,global.NextLink,global.router));
-}(this, (function (exports,React,ReactDOM,components,Octicon,getConfig,TreeModel,path,Measure,HTMLtoJSX,reactLive,prismGithub_scss,PropTypes,styled,styledSystem,NextLink,router) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom'), require('@primer/components'), require('@githubprimer/octicons-react'), require('next/config'), require('tree-model'), require('path'), require('react-measure'), require('html-2-jsx'), require('react-live'), require('prism-github/prism-github.scss'), require('prop-types'), require('styled-components'), require('styled-system'), require('next/link'), require('next/router'), require('lunr'), require('downshift'), require('classnames')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom', '@primer/components', '@githubprimer/octicons-react', 'next/config', 'tree-model', 'path', 'react-measure', 'html-2-jsx', 'react-live', 'prism-github/prism-github.scss', 'prop-types', 'styled-components', 'styled-system', 'next/link', 'next/router', 'lunr', 'downshift', 'classnames'], factory) :
+  (factory((global.primer = {}),global.React,global.ReactDOM,global.components,global.Octicon,global.getConfig,global.TreeModel,global.path,global.Measure,global.HTMLtoJSX,global.reactLive,null,global.PropTypes,global.styled,global.styledSystem,global.NextLink,global.router,global.lunr,global.Downshift,global.classnames));
+}(this, (function (exports,React,ReactDOM,components,Octicon,getConfig,TreeModel,path,Measure,HTMLtoJSX,reactLive,prismGithub_scss,PropTypes,styled,styledSystem,NextLink,router,lunr,Downshift,classnames) { 'use strict';
 
@@ -17,2 +17,6 @@ var React__default = 'default' in React ? React['default'] : React;
   NextLink = NextLink && NextLink.hasOwnProperty('default') ? NextLink['default'] : NextLink;
+  var router__default = 'default' in router ? router['default'] : router;
+  lunr = lunr && lunr.hasOwnProperty('default') ? lunr['default'] : lunr;
+  Downshift = Downshift && Downshift.hasOwnProperty('default') ? Downshift['default'] : Downshift;
+  classnames = classnames && classnames.hasOwnProperty('default') ? classnames['default'] : classnames;
 
@@ -74,2 +78,21 @@ function _classCallCheck(instance, Constructor) {
 
+  function _objectSpread(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i] != null ? arguments[i] : {};
+      var ownKeys = Object.keys(source);
+
+      if (typeof Object.getOwnPropertySymbols === 'function') {
+        ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
+          return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+      }
+
+      ownKeys.forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    }
+
+    return target;
+  }
+
   function _inherits(subClass, superClass) {
@@ -893,4 +916,86 @@ if (typeof superClass !== "function" && superClass !== null) {
 
+  var documents = {
+    "undefined": {
+      "content": "import {Box, Heading} from '@primer/components'\nimport {CONTENT_MAX_WIDTH} from '../../src/constants'\n\nexport const Hero = () => (\n  <Box bg=\"black\">\n    <Box maxWidth={CONTENT_MAX_WIDTH} p={6} mx=\"auto\" mb={3}>\n      <Box mt={4} mb={4}>\n        <Heading fontWeight=\"bold\" color=\"blue.4\" fontSize={7} pb={3} m={0}>\n          Primer Blueprints\n        </Heading>\n      </Box>\n    </Box>\n  </Box>\n)\n\n# Introduction\n\nThese components are to be used to build documentation sites across our different Primer projects.\n"
+    },
+    "content-components/clipboard-copy": {
+      "title": "ClipboardCopy",
+      "path": "content-components/clipboard-copy",
+      "content": "\nUse the ClipboardCopy component to add copying functionality next to code blocks in documentation.\nThe `value` prop must be provided with the current value of the code block.\n\n```.jsx\n<ClipboardCopy value={'hihihi'}/>\n\n```\n\n\n## Component props\n\n| Name | Type | Default | Description |\n| :- | :- | :-: | :- |\n| value | String | | The content that will be added to the user's clipboard when clicked.\n"
+    },
+    "content-components/frame": {
+      "title": "Frame",
+      "path": "content-components/frame",
+      "content": "\nThe Frame component wraps children components in an iframe\n\n\n```.jsx\n<Frame minHeight={50}>\n  <Text>Hi</Text>\n</Frame>\n```\n\n## Component props\n\n| Name | Type | Default | Description |\n| :- | :- | :-: | :- |\n| minHeight | String or Number | 0 | minHeight of iframe\n| border | String | 0 | border for element\n| borderRadius | String or Number | 0 | borderRadius for element\n| width | String or Number | 100% | width of iframe\n"
+    },
+    "content-components/code-example": {
+      "title": "CodeExample",
+      "path": "content-components/code-example",
+      "content": "\nUse the CodeExample component to wrap HTML code examples. This component was created to prevent CSS from our markdown styles from bleeding over into examples by displaying examples in an iframe.\n\nThis component can also be passed to the component prop of your MDXProvider to replace all code blocks with CodeExample like so:\n\n```\nconst components = {\n  code: CodeExample\n}\n\nreturn (\n  <MDXProvider components={components}>\n    <Component {...page} />\n  </MDXProvider>\n)\n\n```\n\n```.jsx\n<CodeExample>\n  <div>hello world!</div>\n</CodeExample>\n\n```\n"
+    },
+    "content-components/index": {
+      "title": "Content Components",
+      "path": "content-components/index",
+      "content": "\n Components are reusable React components that can be used to build UI for our documentation sites.\n"
+    },
+    "content-components/contributors": {
+      "title": "Contributors",
+      "path": "content-components/contributors",
+      "content": "\nUse the Contributors component to add contributor credit to the bottom of any docs page. With a provided file path & repo path, the component will fetch commit data from the GitHub API and display all contributors to that file. In instances where you'd like to add additional contributor credits that are not reflected in the commit data (for example, if a repository has been moved and the git history lost) you can use the `contributor` prop to add additional contributors.\n\n\n```.jsx\n<Contributors\n  filePath='README.md'\n  repoPath='primer/components'\n  contributors={[{login: 'emplums'}, {login: 'broccolini'}]}\n/>\n```\n\n## Component props\n\n| Name | Type | Default | Description |\n| :- | :- | :-: | :- |\n| filePath | String | | The path to the file you'd like to pull contributor data from. |\n| repoPath | String | | The repository path on GitHub. For example: `primer/components` |\n| contributors | Array | | Prop for adding additional contributors not reflected in commit history. Format is an array of objects with a `login` key. Ex. `[{login: 'emplums'}, {login: 'broccolini'}]` |\n"
+    },
+    "content-components/link": {
+      "title": "Link",
+      "path": "content-components/link",
+      "content": "\nUse the Link component to add links within documentation. The link component wraps the standard Primer link with Next's link component for easy routing in Next.js applications.\n\n```.jsx\n<Link href=\"https://github.com/primer\">Primer</Link>\n\n```\n"
+    },
+    "navigation-components/header": {
+      "title": "Header",
+      "path": "navigation-components/header",
+      "keywords": ["navigation", "header"],
+      "content": "\nUse Header to provide a top navigation for your site. Children of `Header` will be rendered on the right side of the component. Children should be top level navigation links. The `title` prop specifies what should be rendered to the right of the GitHub Mark. The `root` prop specifies where you'd like the GitHub Mark to link to. Leave blank if you'd like it to route to `/`.\n```.jsx\n<Header title=\"Hello world!\" root='/blueprints'>\n  <NavDropdown title={`What's new`}>\n    <NavItem>Overview</NavItem>\n    <NavItem>Interface Guidelines</NavItem>\n    <NavItem>Octicons</NavItem>\n  </NavDropdown>\n  <NavDropdown title='Design'>\n    <NavItem>Overview</NavItem>\n    <NavItem>Interface Guidelines</NavItem>\n    <NavItem>Octicons</NavItem>\n  </NavDropdown>\n  <NavDropdown title='Development'>\n    <NavItem>Overview</NavItem>\n    <NavItem>Interface Guidelines</NavItem>\n    <NavItem>Octicons</NavItem>\n  </NavDropdown>\n  <NavDropdown title='Content'>\n    <NavItem>Overview</NavItem>\n    <NavItem>Interface Guidelines</NavItem>\n    <NavItem>Octicons</NavItem>\n  </NavDropdown>\n  <NavDropdown title='Tools'>\n    <NavItem>Overview</NavItem>\n    <NavItem>Interface Guidelines</NavItem>\n    <NavItem>Octicons</NavItem>\n  </NavDropdown>\n</Header>\n```\n"
+    },
+    "navigation-components/index": {
+      "title": "Navigation Components",
+      "path": "navigation-components/index",
+      "content": "\nNavigation components can be used to build navigation on documentation sites\n"
+    },
+    "navigation-components/nav-list": {
+      "title": "NavList",
+      "path": "navigation-components/nav-list",
+      "content": "\n\nA `<NavList>` renders a `<Section.Link>` for the given `path` and looks up the\npath in the page tree. If a node is found, it renders a `<NavLink>` for each\nof the node's children.\n\nThe automatically generated page links in a NavList are sorted alphabetically by either the sort_title or title frontmatter keys. If a page has a non-empty sort_title, that value is used only to determine its position in the list; otherwise, the title determines their sort order. The title key is always used as a page's link text.\n\n\n```.jsx\n<NavList path='/blueprints/content-components'/>\n```\n"
+    },
+    "navigation-components/page-link": {
+      "title": "PageLink",
+      "path": "navigation-components/page-link",
+      "content": "\nThe PageLink component takes an `href` and optional `children`.\nIf no `children` are provided, we look up the \"node\" of the corresponding\npage in the tree (the one whose `path` matches the given `href`) and use\nthat node's `title` frontmatter key. In other words, given the following\npages/foo/bar.md:\n\n```md\n---\ntitle: Foo Bar\n---\n```\n\nThe following instance of PageLink should render a link to \"/foo/bar\" with\n\"Foo Bar\" as its text:\n```.jsx\n<PageLink href=\"/foo/bar\" />\n```\n"
+    },
+    "navigation-components/section": {
+      "title": "Section",
+      "path": "navigation-components/section",
+      "content": "\nA `Section` gets a `path` and optional children. If it has children it will\nrender those and prepend each child's `href` prop with the provided `path`.\nThis means that you can do:\n\n```.jsx\n<Section path=\"/section\">\n  <Section.Link href=\"foo\">Links to /section/foo</Section.Link>\n</Section>\n```\n\nIf no children are provided, it renders a [`NavList`](/blueprints/nav-components/NavList) with the provided\n`path`.\n"
+    },
+    "navigation-components/route-match": {
+      "title": "RouteMatch",
+      "path": "navigation-components/route-match",
+      "content": "\nUse `RouteMatch` to conditionally render content without a wrapper\nelement when contained directly in a `Router`. `RouteMatch` is most commonly used to conditionally render a chunk of side navigation links.\n\n\n```.jsx\n<Router>\n  <RouteMatch path=\"/blueprints/navigation-components\">\n    <Box>this will only show up on pages whose path begins with \"/blueprints/navigation-components\"</Box>\n  </RouteMatch>\n  <RouteMatch path=\"/blueprints/content-components\">\n    <Box>this will only show up on pages whose path begins with \"/blueprints/content-components\"</Box>\n  </RouteMatch>\n</Router>\n\n```\n"
+    },
+    "navigation-components/nav-link": {
+      "title": "NavLink",
+      "path": "navigation-components/nav-link",
+      "content": "\nThe NavLink component is a PageLink that turns black when it's href matches the current path. NavLinks are typically used in sidebar sub-navigation.\n\n\n```.jsx\nMatches current path:\n<NavLink mb={4} href='/blueprints/navigation-components/NavLink' />\n\nDoes not match current path:\n<NavLink href='/blueprints/navigation-components/Section' />\n```\n"
+    },
+    "navigation-components/side-nav": {
+      "title": "SideNav",
+      "path": "navigation-components/side-nav",
+      "content": "\n\nContainer component that takes children and nests them in a Router with layout styling. The `SideNav` of this site uses `Section` components to show both the Content Components and Navigation Components sections. See [the `Section` docs](/blueprints/navigation-components/section) for more details.\n\nYou may also use the `RouteMatch` components in your `SideNav` to conditionally show specific navigation links in the SideNav depending on where you are on the docs site. See [`RouteMatch` docs](/blueprints/navigation-components/section) for more details.\n\n\n```.jsx\n<SideNav>\n  <RouteMatch path=\"/blueprints\">\n    <Section path=\"content-components\" />\n  </RouteMatch>\n</SideNav>\n```\n"
+    },
+    "tools/index": {
+      "title": "Tools",
+      "path": "tools/index",
+      "content": "\nComing soon\n"
+    }
+  };
+
   function _templateObject$3() {
-    var data = _taggedTemplateLiteral(["\n  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);\n"]);
+    var data = _taggedTemplateLiteral(["\n  display: block;\n  text-decoration: none;\n  color: ", ";\n  background-color: ", ";\n  padding: 8px;\n"]);
 
@@ -903,4 +1008,130 @@ _templateObject$3 = function _templateObject() {
   }
-  var BoxShadow = styled(components.Box)(_templateObject$3());
+  var SearchItem = styled(Link)(_templateObject$3(), function (props) {
+    return props.isHighlighted ? '#fff' : '#24292e';
+  }, function (props) {
+    return props.isHighlighted ? '#0366d6' : '#fff';
+  });
 
+  function _templateObject$4() {
+    var data = _taggedTemplateLiteral(["\n  color: #fff;\n  background-color: rgba(255, 255, 255, 0.07);\n  border: 1px;\n  border: 1px solid transparent;\n  &:focus,\n  &:active {\n    border: 1px solid rgba(255, 255, 255, 0.15);\n    outline: none;\n    box-shadow: none;\n  }\n"]);
+
+    _templateObject$4 = function _templateObject() {
+      return data;
+    };
+
+    return data;
+  }
+  var SearchInput = styled(components.TextInput)(_templateObject$4());
+
+  function _templateObject$5() {
+    var data = _taggedTemplateLiteral(["\n  box-shadow: 0 1px 5px rgba(27, 31, 35, 0.15);\n  width: 100%;\n  overflow: auto;\n  right: 0;\n  background-color: #fff;\n  display: ", ";\n  position: absolute;\n\n  @media (min-width: 1012px) {\n    width: 0;\n    min-width: 320px;\n    height: auto;\n    max-height: 240px;\n    border-radius: 3px;\n    border: 1px solid #e1e4e8;\n    padding-bottom: 0;\n  }\n"]);
+
+    _templateObject$5 = function _templateObject() {
+      return data;
+    };
+
+    return data;
+  }
+  var SearchResults = styled.div(_templateObject$5(), function (props) {
+    return props.open ? 'block' : 'none';
+  });
+
+  function Search(_ref) {
+    var root = _ref.root;
+    var idx = lunr(function () {
+      this.ref('path'); //eslint-disable-line
+
+      this.field('title'); //eslint-disable-line
+
+      this.field('content'); //eslint-disable-line
+
+      this.field('keywords'); //eslint-disable-line
+
+      var _arr = Object.values(documents);
+
+      for (var _i = 0; _i < _arr.length; _i++) {
+        var doc = _arr[_i];
+        this.add(doc); //eslint-disable-line
+      }
+    });
+
+    var _useState = React.useState([]),
+        _useState2 = _slicedToArray(_useState, 2),
+        results = _useState2[0],
+        setResults = _useState2[1];
+
+    var onChange = function onChange(e) {
+      if (e.target) {
+        setResults(idx.search(e.target.value));
+      }
+    };
+
+    var renderResults = function renderResults(selectedItem, getItemProps, highlightedIndex) {
+      return results.map(function (result, index) {
+        var doc = documents[result.ref];
+        return React__default.createElement(SearchItem //eslint-disable-line
+        , getItemProps({
+          item: result,
+          index: index,
+          key: result.ref,
+          href: "/".concat(root, "/").concat(doc.path),
+          isHighlighted: highlightedIndex === index
+        }), doc.title);
+      });
+    };
+
+    function stateReducer(state, changes) {
+      switch (changes.type) {
+        case Downshift.stateChangeTypes.keyDownEnter:
+        case Downshift.stateChangeTypes.clickItem:
+          return _objectSpread({}, changes, {
+            inputValue: ''
+          });
+
+        default:
+          return changes;
+      }
+    }
+
+    return React__default.createElement(components.Box, {
+      is: components.Relative
+    }, React__default.createElement(Downshift, {
+      onChange: onChange,
+      itemToString: function itemToString(item) {
+        return item ? documents[item.ref].title : '';
+      },
+      stateReducer: stateReducer
+    }, function (_ref2) {
+      var getInputProps = _ref2.getInputProps,
+          getMenuProps = _ref2.getMenuProps,
+          getLabelProps = _ref2.getLabelProps,
+          getItemProps = _ref2.getItemProps,
+          isOpen = _ref2.isOpen,
+          highlightedIndex = _ref2.highlightedIndex,
+          selectedItem = _ref2.selectedItem;
+      return React__default.createElement("div", null, React__default.createElement("label", _extends({
+        hidden: true
+      }, getLabelProps()), ' ', "//eslint-disable-line Search docs"), React__default.createElement(SearchInput, _extends({
+        placeholder: "Search"
+      }, getInputProps({
+        onChange: onChange
+      }))), React__default.createElement(SearchResults, _extends({
+        open: isOpen
+      }, getMenuProps()), renderResults(selectedItem, getItemProps, highlightedIndex)));
+    }));
+  }
+
+  Search.displayName = "Search";
+
+  function _templateObject$6() {
+    var data = _taggedTemplateLiteral(["\n  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);\n"]);
+
+    _templateObject$6 = function _templateObject() {
+      return data;
+    };
+
+    return data;
+  }
+  var BoxShadow = styled(components.Box)(_templateObject$6());
+
   var HeaderText = function HeaderText(props) {
@@ -929,9 +1160,11 @@ return React__default.createElement(components.Text, _extends({
       justifyContent: "space-between"
+    }, React__default.createElement(components.Flex, {
+      alignItems: "center",
+      justifyContent: "center"
     }, React__default.createElement(Link, {
-      href: "/".concat(root),
+      href: "https://primer.style/".concat(root),
       color: "white",
-      ml: 3
+      mx: 3
     }, React__default.createElement(components.Flex, {
-      alignItems: "center",
-      justifyContent: "center"
+      alignItems: "center"
     }, React__default.createElement(components.StyledOcticon, {
@@ -951,3 +1184,5 @@ color: "blue.4",
       fontWeight: "bold"
-    }, subtitle))), React__default.createElement(components.Box, {
+    }, subtitle))), React__default.createElement(Search, {
+      root: root
+    })), React__default.createElement(components.Box, {
       display: ['none', 'none', 'flex']
@@ -977,2 +1212,41 @@ }, children), React__default.createElement(components.Box, {
 
+  function _templateObject$7() {
+    var data = _taggedTemplateLiteral(["\n  .anchor {\n    display: none;\n  }\n  &:hover .anchor {\n    display: inline-block;\n  }\n  &:focus .anchor {\n    display: inline-block;\n  }\n"]);
+
+    _templateObject$7 = function _templateObject() {
+      return data;
+    };
+
+    return data;
+  }
+
+  var Anchor = function Anchor(_ref) {
+    var id = _ref.id,
+        className = _ref.className;
+    return React__default.createElement("a", {
+      href: "#".concat(id),
+      className: classnames('anchor', className)
+    }, React__default.createElement(components.StyledOcticon, {
+      color: "black",
+      icon: Octicon.Link
+    }));
+  };
+
+  Anchor.displayName = "Anchor";
+  var StyledHeading = styled(components.Heading)(_templateObject$7());
+
+  var MarkdownHeading = function MarkdownHeading(_ref2) {
+    var children = _ref2.children,
+        id = _ref2.id,
+        rest = _objectWithoutProperties(_ref2, ["children", "id"]);
+
+    return React__default.createElement(StyledHeading, _extends({
+      id: id
+    }, rest), React__default.createElement(Anchor, {
+      id: id
+    }), children);
+  };
+
+  MarkdownHeading.displayName = "MarkdownHeading";
+
   /**
@@ -1137,6 +1411,6 @@ * The PageLink component takes an `href` and optional `children`.
 
-  function _templateObject$4() {
+  function _templateObject$8() {
     var data = _taggedTemplateLiteral(["\n  display: inline-block;\n  white-space: nowrap;\n"]);
 
-    _templateObject$4 = function _templateObject() {
+    _templateObject$8 = function _templateObject() {
       return data;
@@ -1147,3 +1421,3 @@ };
   }
-  var StyledLabel = styled(components.BorderBox)(_templateObject$4());
+  var StyledLabel = styled(components.BorderBox)(_templateObject$8());
   var STATUS_COLORS = {
@@ -1256,7 +1530,21 @@ stable: 'green.6',
       href: "https://primer.style#design"
-    }, "Overview"), React__default.createElement(NavItem, null, "Interface Guidelines"), React__default.createElement(NavItem, null, "Icons"), React__default.createElement(NavItem, null, "Illustrations"), React__default.createElement(NavItem, null, "Presentations")), React__default.createElement(NavDropdown, {
+    }, "Overview"), React__default.createElement(NavItem, {
+      href: "https://primer.style/design"
+    }, "Interface Guidelines"), React__default.createElement(NavItem, {
+      href: "https://octicons.github.com/"
+    }, "Icons"), React__default.createElement(NavItem, {
+      href: "https://github.com/primer/presentations"
+    }, "Presentations")), React__default.createElement(NavDropdown, {
       title: "Development"
     }, React__default.createElement(NavItem, {
       href: "https://primer.style#development"
-    }, "Overview"), React__default.createElement(NavItem, null, "Primer CSS"), React__default.createElement(NavItem, null, "Primer Components"), React__default.createElement(NavItem, null, "Deploy"), React__default.createElement(NavItem, null, "Prototype")), React__default.createElement(NavDropdown, {
+    }, "Overview"), React__default.createElement(NavItem, {
+      href: "https://primer.style/css"
+    }, "Primer CSS"), React__default.createElement(NavItem, {
+      href: "https://primer.style/components"
+    }, "Primer Components"), React__default.createElement(NavItem, {
+      href: "https://github.com/primer/deploy"
+    }, "Deploy"), React__default.createElement(NavItem, {
+      href: "https://primer.style/css/tools/prototyping"
+    }, "Prototyping")), React__default.createElement(NavDropdown, {
       direction: "sw",
@@ -1266,3 +1554,11 @@ title: "Tools"
       href: "https://primer.style#tools"
-    }, "Overview"), React__default.createElement(NavItem, null, "Atom packages"), React__default.createElement(NavItem, null, "Docs set"), React__default.createElement(NavItem, null, "GitHub local environment"), React__default.createElement(NavItem, null, "Linting")));
+    }, "Overview"), React__default.createElement(NavItem, {
+      href: "https://primer.style/css/tools/atom-packages"
+    }, "Atom packages"), React__default.createElement(NavItem, {
+      href: "https://primer.style/css/tools/docset"
+    }, "Docs set"), React__default.createElement(NavItem, {
+      href: "https://primer.style/css/tools/local-primer"
+    }, "GitHub local environment"), React__default.createElement(NavItem, {
+      href: "https://primer.style/css/tools/linting"
+    }, "Linting")));
   };
@@ -1335,2 +1631,3 @@
   exports.Link = Link;
+  exports.MarkdownHeading = MarkdownHeading;
   exports.NavDropdown = NavDropdown;
@@ -1347,2 +1644,6 @@ exports.NavItem = NavItem;
   exports.Section = Section;
+  exports.Search = Search;
+  exports.SearchInput = SearchInput;
+  exports.SearchItem = SearchItem;
+  exports.SearchResults = SearchResults;
   exports.SideNav = SideNav;
@@ -1349,0 +1650,0 @@ exports.StatusLabel = StatusLabel;

package.json

 {
   "name": "@primer/blueprints",
-  "version": "0.0.0-3f63f48",
+  "version": "0.0.0-4790a59",
   "description": "Components for GitHub Documentation Sites",
@@ -94,3 +94,9 @@ "main": "dist/index.umd.js",
     "unist-util-visit": "^1.4.0"
+  },
+  "dependencies": {
+    "classnames": "2.2.6",
+    "downshift": "3.2.7",
+    "lunr": "2.3.6",
+    "uuid": "3.3.2"
   }
 }

src/components.js

@@ -8,2 +8,3 @@ export {default as ClipboardCopy} from './ClipboardCopy'
 export {default as Link} from './Link'
+export {default as MarkdownHeading} from './MarkdownHeading'
 export {default as NavDropdown} from './NavDropdown'
@@ -20,3 +21,7 @@ export {default as NavItem} from './NavItem'
 export {default as Section} from './Section'
+export {default as Search} from './Search'
+export {default as SearchInput} from './SearchInput'
+export {default as SearchItem} from './SearchItem'
+export {default as SearchResults} from './SearchResults'
 export {default as SideNav} from './SideNav'
 export {default as StatusLabel} from './StatusLabel'

src/Header.js

@@ -8,2 +8,3 @@ import React from 'react'
 import NavDropdown from './NavDropdown'
+import Search from './Search'
 
@@ -20,10 +21,14 @@ const BoxShadow = styled(Box)`
       <Flex className="p-responsive" alignItems="center" justifyContent="space-between">
-        <Link href={`/${root}`} color="white" ml={3}>
-          <Flex alignItems="center" justifyContent="center">
-            <StyledOcticon color='blue.4' icon={MarkGithub} size="medium" />
-            <HeaderText ml={3} color='blue.4' fontFamily='mono'>{title}</HeaderText>
-            <StyledOcticon icon={ChevronRight} mx={2} color='blue.2'/>
-            <HeaderText fontWeight='bold'>{subtitle}</HeaderText>
-          </Flex>
-        </Link>
+        <Flex alignItems="center" justifyContent="center">
+          <Link href={`https://primer.style/${root}`} color="white" mx={3}>
+            <Flex alignItems='center'>
+              <StyledOcticon color='blue.4' icon={MarkGithub} size="medium" />
+              <HeaderText ml={3} color='blue.4' fontFamily='mono'>{title}</HeaderText>
+              <StyledOcticon icon={ChevronRight} mx={2} color='blue.2'/>
+              <HeaderText fontWeight='bold'>{subtitle}</HeaderText>
+            </Flex>
+          </Link>
+          <Search root={root}/>
+        </Flex>
+
         <Box display={['none', 'none', 'flex']}>
@@ -30,0 +35,0 @@ {children}

src/PrimerHeader.js

@@ -12,20 +12,19 @@ import {Link} from '@primer/components'
         <NavItem href="https://primer.style#design">Overview</NavItem>
-        <NavItem>Interface Guidelines</NavItem>
-        <NavItem>Icons</NavItem>
-        <NavItem>Illustrations</NavItem>
-        <NavItem>Presentations</NavItem>
+        <NavItem href="https://primer.style/design">Interface Guidelines</NavItem>
+        <NavItem href="https://octicons.github.com/">Icons</NavItem>
+        <NavItem href="https://github.com/primer/presentations">Presentations</NavItem>
       </NavDropdown>
       <NavDropdown title='Development'>
         <NavItem href="https://primer.style#development">Overview</NavItem>
-        <NavItem>Primer CSS</NavItem>
-        <NavItem>Primer Components</NavItem>
-        <NavItem>Deploy</NavItem>
-        <NavItem>Prototype</NavItem>
+        <NavItem href="https://primer.style/css">Primer CSS</NavItem>
+        <NavItem href="https://primer.style/components">Primer Components</NavItem>
+        <NavItem href="https://github.com/primer/deploy">Deploy</NavItem>
+        <NavItem href="https://primer.style/css/tools/prototyping">Prototyping</NavItem>
       </NavDropdown>
       <NavDropdown direction='sw' title='Tools'>
         <NavItem href="https://primer.style#tools">Overview</NavItem>
-        <NavItem>Atom packages</NavItem>
-        <NavItem>Docs set</NavItem>
-        <NavItem>GitHub local environment</NavItem>
-        <NavItem>Linting</NavItem>
+        <NavItem href="https://primer.style/css/tools/atom-packages">Atom packages</NavItem>
+        <NavItem href="https://primer.style/css/tools/docset">Docs set</NavItem>
+        <NavItem href="https://primer.style/css/tools/local-primer">GitHub local environment</NavItem>
+        <NavItem href="https://primer.style/css/tools/linting">Linting</NavItem>
       </NavDropdown>
@@ -32,0 +31,0 @@ </Header>

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

160762

increased by32.91%

Number of package files

36

increased by16.13%

Lines of code

4120

increased by21.57%

Worsened metrics

Dependency count

4

increased byInfinity%

Number of low supply chain risk alerts

5

increased by400%

Dependency changes

• + Addedclassnames@2.2.6

• + Addeddownshift@3.2.7

• + Addedlunr@2.3.6

• + Addeduuid@3.3.2

• + Added@babel/runtime@7.26.9(transitive)

• + Addedclassnames@2.2.6(transitive)

• + Addedcompute-scroll-into-view@1.0.20(transitive)

• + Addeddownshift@3.2.7(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedlunr@2.3.6(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact@19.0.0(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addeduuid@3.3.2(transitive)