@hashicorp/react-components 0.0.0

package/packages/subnav/icons/consul-logo-color.svgr.js

@@ -0,0 +1,44 @@
+import React from 'react'
+
+function ConsulLogoColor({ title, ...props }) {
+  return (
+    <div className="g-svg">
+      <img
+        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKIAAAAwCAYAAACSXKFTAAAANUlEQVR4Ae3BAQ0AAADCIPunfg43YAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOcCebAAAc6U718AAAAASUVORK5CYII="
+        className="svg-sizer"
+        alt=""
+        role="presentation"
+      />
+      <svg
+        width={162}
+        height={48}
+        viewBox="0 0 162 48"
+        fill="none"
+        role="img"
+        {...props}
+      >
+        {title ? <title>{title}</title> : null}
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M156.666 36.269V10.447l4.592-.64v26.462h-4.592zm-14.791-18.331v12.798c0 .978.414 1.468 1.468 1.468 1.129 0 3.123-.678 4.78-1.544V17.937h4.592V36.27h-3.501l-.452-1.543c-2.296 1.129-5.194 1.92-7.339 1.92-3.048 0-4.14-2.146-4.14-5.42V17.937h4.592zm-14.227 18.707c-1.958 0-4.63-.451-6.323-1.054l.64-3.5c1.542.451 3.575.79 5.458.79 2.032 0 2.333-.451 2.333-1.845 0-1.128-.226-1.693-3.2-2.409-4.478-1.09-5.006-2.22-5.006-5.758 0-3.69 1.619-5.308 6.851-5.308 1.693 0 3.914.226 5.494.639l-.451 3.652c-1.392-.263-3.612-.527-5.043-.527-1.995 0-2.334.452-2.334 1.581 0 1.468.113 1.58 2.597 2.221 5.119 1.355 5.608 2.033 5.608 5.796 0 3.539-1.091 5.722-6.624 5.722zm-14.039-.376V23.47c0-.978-.413-1.467-1.467-1.467-1.129 0-3.124.677-4.78 1.543v12.723h-4.592V17.937h3.5l.452 1.543c2.296-1.129 5.194-1.92 7.339-1.92 3.049 0 4.141 2.147 4.141 5.421V36.27h-4.593zM91.667 21.476c-2.446 0-3.387 1.091-3.387 3.162v4.931c0 2.07.941 3.162 3.387 3.162 2.447 0 3.388-1.092 3.388-3.162v-4.931c0-2.07-.94-3.162-3.388-3.162zm0 15.17c-6.285 0-7.979-3.464-7.979-7.228v-4.63c0-3.764 1.694-7.227 7.98-7.227 6.285 0 7.979 3.463 7.979 7.227v4.63c0 3.764-1.694 7.227-7.98 7.227zM65.774 18.087c0-4.593 2.671-7.265 8.92-7.265 2.333 0 4.742.3 6.812.828l-.527 4.103c-2.032-.376-4.404-.64-6.135-.64-3.274 0-4.328 1.13-4.328 3.802v9.637c0 2.672 1.054 3.801 4.328 3.801 1.731 0 4.103-.263 6.135-.64l.527 4.104c-2.07.526-4.479.827-6.813.827-6.248 0-8.92-2.672-8.92-7.265V18.088z"
+          fill={props.color || '#000'}
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M24.383 42.776c-5.043 0-9.776-1.95-13.323-5.487-3.552-3.555-5.508-8.274-5.508-13.285 0-5.026 1.954-9.745 5.5-13.282a18.816 18.816 0 0113.331-5.491c4.18 0 8.133 1.332 11.433 3.852l2.88-3.746C34.561 2.181 29.612.512 24.382.512c-6.285 0-12.205 2.438-16.674 6.87C3.265 11.815.818 17.718.818 24.005c0 6.267 2.446 12.168 6.891 16.62 4.445 4.431 10.366 6.87 16.674 6.87 5.225 0 10.172-1.668 14.31-4.822l-2.875-3.75a18.697 18.697 0 01-11.435 3.854zM45.06 14.845a2.34 2.34 0 001.183-1.84 2.172 2.172 0 00-.29-1.353 2.373 2.373 0 00-3.202-.891 2.36 2.36 0 00-.894 3.192 2.374 2.374 0 003.203.892zm-.037 18.283a2.347 2.347 0 00-3.203.88c-.65 1.133-.244 2.545.883 3.192a2.347 2.347 0 003.203-.879c.174-.313.278-.624.29-.96a2.34 2.34 0 00-1.173-2.233zm-.172-12.685a2.338 2.338 0 002.693 1.92 2.323 2.323 0 001.949-2.082c.024-.209 0-.393-.024-.602a2.338 2.338 0 00-2.692-1.92 2.332 2.332 0 00-1.926 2.684zm2.695 5.076c-1.277-.231-2.506.626-2.716 1.898a2.322 2.322 0 001.904 2.707c1.276.231 2.506-.625 2.715-1.897 0-.082.023-.139.046-.21.105-1.19-.743-2.29-1.95-2.498zm-9.257-4.801c.29 1.272 1.567 2.037 2.82 1.747a2.253 2.253 0 001.765-1.898c.057-.289.035-.6-.023-.914-.29-1.272-1.568-2.035-2.821-1.746-1.265.289-2.03 1.561-1.741 2.81zm4.481 7.768c.023-.07.023-.127.046-.186.21-1.19-.546-2.336-1.74-2.65-1.254-.31-2.53.44-2.845 1.69a2.336 2.336 0 001.695 2.835 2.345 2.345 0 002.844-1.689zm-10.923-4.54a2.334 2.334 0 002.345 2.336c1.299 0 2.344-1.04 2.344-2.336a2.334 2.334 0 00-2.344-2.338 2.334 2.334 0 00-2.345 2.338z"
+          fill="#CA2171"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M19.204 23.955c0 2.808 2.276 5.059 5.092 5.059 2.817-.01 5.094-2.27 5.074-5.078 0-2.807-2.276-5.058-5.092-5.058a5.063 5.063 0 00-5.074 5.077z"
+          fill="#961D59"
+        />
+      </svg>
+    </div>
+  )
+}
+
+export default ConsulLogoColor

package/packages/subnav/icons/hcp-logo-black-white.svgr.js

@@ -0,0 +1,29 @@
+import * as React from 'react'
+
+export default function HCPLogoBlackWhite({ title, ...props }) {
+  return (
+    <div className="g-svg">
+      <img
+        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKIAAAAwCAYAAACSXKFTAAAANUlEQVR4Ae3BAQ0AAADCIPunfg43YAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOcCebAAAc6U718AAAAASUVORK5CYII="
+        className="svg-sizer"
+        alt=""
+        role="presentation"
+      />
+      <svg width={263} height={30} viewBox="0 0 263 30" fill="none" {...props}>
+        {title ? <title>{title}</title> : null}
+        <path
+          d="M41.272 23.25v-6.793h-5.969v6.794H32.26V7.158h3.044v6.62h5.969v-6.62h3.044V23.25h-3.045zm14.182.001h-2.416l-.219-.795a6.43 6.43 0 01-3.488 1.03c-2.148 0-3.067-1.47-3.067-3.501 0-2.39 1.04-3.309 3.43-3.309h2.828v-1.233c0-1.303-.363-1.764-2.247-1.764-1.097.013-2.19.134-3.264.363l-.362-2.247a15.406 15.406 0 014.036-.562c3.696 0 4.774 1.306 4.774 4.252l-.005 7.766zm-2.946-4.449H50.33c-.966 0-1.23.264-1.23 1.16 0 .82.264 1.183 1.182 1.183a4.638 4.638 0 002.225-.604v-1.739zm8.646 4.685a13.928 13.928 0 01-4.059-.674l.41-2.247c1.14.325 2.318.495 3.502.506 1.307 0 1.5-.281 1.5-1.183 0-.724-.146-1.087-2.053-1.547-2.876-.7-3.213-1.424-3.213-3.696 0-2.368 1.037-3.407 4.396-3.407 1.188.001 2.371.14 3.527.413l-.28 2.342a20.827 20.827 0 00-3.239-.337c-1.28 0-1.497.28-1.497 1.014 0 .94.073 1.014 1.666 1.424 3.286.87 3.6 1.306 3.6 3.721-.008 2.272-.71 3.67-4.26 3.67zm13.02-.236v-8.218c0-.63-.264-.944-.94-.944-.725 0-2.006.436-3.07.992v8.17h-2.947V6.68l2.946-.41v6.105a10.39 10.39 0 014.303-1.123c1.966 0 2.657 1.379 2.657 3.48v8.518h-2.949zm5.124-13.436V6.4h2.946v3.415h-2.946zm0 13.43V11.48h2.946v11.771l-2.946-.006zm4.998-11.667c0-2.949 1.716-4.662 5.727-4.662 1.473 0 2.942.179 4.373.531l-.34 2.635a23.72 23.72 0 00-3.932-.413c-2.101 0-2.778.724-2.778 2.44v6.18c0 1.715.677 2.44 2.778 2.44a23.701 23.701 0 003.932-.41l.34 2.631c-1.431.354-2.9.532-4.373.531-4.011 0-5.727-1.713-5.727-4.662v-7.24zm16.149 11.909c-4.033 0-5.12-2.222-5.12-4.637v-2.972c0-2.415 1.087-4.64 5.12-4.64s5.123 2.225 5.123 4.64v2.972c-.012 2.415-1.099 4.637-5.123 4.637zm0-9.735c-1.57 0-2.174.7-2.174 2.031v3.162c0 1.329.604 2.031 2.174 2.031 1.57 0 2.174-.702 2.174-2.03v-3.163c-.012-1.331-.616-2.03-2.174-2.03zm12.94.194a23.035 23.035 0 00-3.109 1.722v7.583h-2.954v-11.77h2.488l.194 1.305c.652-.435 2.053-1.255 3.089-1.547l.292 2.707zm11.175 5.387c0 2.61-1.16 4.154-3.889 4.154a16.193 16.193 0 01-3.14-.337v4.856l-2.949.41V11.48h2.345l.281.992a6.176 6.176 0 013.741-1.233c2.367 0 3.625 1.404 3.625 4.083l-.014 4.011zm-7.021 1.329c.857.192 1.731.297 2.609.314 1.062 0 1.472-.508 1.472-1.57V15.25c0-.966-.362-1.496-1.449-1.496a4.163 4.163 0 00-2.64 1.072l.008 5.837zM10.762 1.437L0 7.644v14.914l4.044 2.336V9.981l6.718-3.882V1.437z"
+          fill="#000"
+        />
+        <path
+          d="M15.06 1.437v11.878h-4.298V8.88l-4.044 2.334v15.22l4.044 2.339V16.929h4.297v4.404l4.045-2.334V3.771l-4.045-2.334z"
+          fill="#000"
+        />
+        <path
+          d="M15.059 28.776l10.762-6.207V7.655l-4.044-2.337v14.914l-6.718 3.881v4.662zM132.62 18.757c0 2.188.843 2.893 3.413 2.893a24.174 24.174 0 003.668-.329l.21 1.742c-1.3.269-2.623.41-3.951.42-3.831 0-5.362-1.645-5.362-4.608v-6.929c0-2.963 1.531-4.609 5.362-4.609 1.328.01 2.651.151 3.951.422l-.21 1.741a24.162 24.162 0 00-3.668-.329c-2.564 0-3.413.705-3.413 2.893v6.693zm9.622 4.477V7.102l1.966-.281v16.416l-1.966-.003zm8.982.236c-3.339 0-4.656-1.904-4.656-4.303V15.85c0-2.398 1.317-4.302 4.656-4.302 3.34 0 4.657 1.904 4.657 4.302v3.317c0 2.399-1.317 4.303-4.657 4.303zm0-10.206c-1.786 0-2.679.842-2.679 2.527v3.446c0 1.669.893 2.528 2.679 2.528 1.787 0 2.683-.842 2.683-2.528V15.78c0-1.671-.893-2.516-2.683-2.516zm8.869-1.483v8.748c0 .753.377 1.06 1.104 1.06.843 0 2.612-.517 3.834-1.152V11.78h1.966v11.453h-1.601l-.188-.986c-1.27.61-3.244 1.222-4.609 1.222-1.834 0-2.494-1.151-2.494-2.915V11.78h1.988zm9.221 3.505c0-2.28 1.034-3.738 3.716-3.738 1.098.019 2.192.136 3.269.35V7.103l1.966-.281v16.416h-1.685l-.163-1.033a6.098 6.098 0 01-3.786 1.269c-2.246 0-3.339-1.2-3.339-3.505l.022-4.682zm6.985-1.646a18.547 18.547 0 00-3.151-.354c-1.317 0-1.859.613-1.859 2v4.68c0 1.176.376 1.766 1.764 1.766 1.123 0 2.398-.612 3.246-1.365V13.64zm8.684-6.07h5.674c3.37 0 4.541 1.461 4.541 3.86v2.328c0 2.421-1.177 3.879-4.541 3.879h-3.651v5.597h-2.023V7.571zm5.618 1.812h-3.59v6.446h3.59c1.929 0 2.586-.542 2.586-2.07v-2.303c-.014-1.556-.671-2.073-2.586-2.073zm6.549 13.852V7.102l1.966-.281v16.416l-1.966-.003zm12.783-.04h-1.685l-.115-.842a6.53 6.53 0 01-3.719 1.084c-2.137 0-3.033-1.272-3.033-3.294 0-2.376 1.199-3.221 3.505-3.221h3.073v-1.792c0-1.435-.638-1.93-2.494-1.93a18.95 18.95 0 00-3.435.377L201.819 12a16.071 16.071 0 013.763-.494c3.27 0 4.351 1.27 4.351 3.715v7.974zm-1.966-4.633h-2.927c-1.221 0-1.668.376-1.668 1.528s.211 1.648 1.621 1.648a5.734 5.734 0 002.966-.94l.008-2.236zm10.595 4.488a7.195 7.195 0 01-2.398.421c-1.927 0-2.845-.705-2.845-2.61v-7.439h-2.023v-1.64h2.023V8.972l1.966-.28v3.089h3.151l-.158 1.64h-2.985v7.109c0 .842.118 1.272 1.177 1.272a7.264 7.264 0 001.834-.281l.258 1.528zm8.139-14.56a11.747 11.747 0 00-1.904-.21c-1.224 0-1.531.42-1.531 1.575v1.927h3.284l-.177 1.64h-3.107v9.805H221.3V13.42h-2.022l.163-1.649h1.859V9.666c0-2.022 1.124-3.036 3.244-3.036a8.041 8.041 0 012.32.331l-.163 1.528zm5.059 14.981c-3.342 0-4.656-1.904-4.656-4.303V15.85c0-2.398 1.314-4.302 4.656-4.302 3.342 0 4.657 1.904 4.657 4.302v3.317c0 2.399-1.318 4.303-4.657 4.303zm0-10.206c-1.789 0-2.682.842-2.682 2.527v3.446c0 1.669.893 2.528 2.682 2.528s2.679-.842 2.679-2.528V15.78c0-1.671-.893-2.516-2.679-2.516zm12.253.092a25.357 25.357 0 00-3.269 1.966v7.9h-1.966V11.782h1.719l.115 1.6c.97-.74 2.03-1.357 3.154-1.833l.259 1.808h-.012zm15.007 9.878v-8.749c0-.752-.376-1.056-1.107-1.056-.94 0-2.611.517-3.833 1.152v8.653h-1.966v-8.749c0-.752-.377-1.056-1.107-1.056-.842 0-2.609.517-3.833 1.152v8.653h-1.966V11.781h1.598l.188.988c1.269-.612 3.246-1.221 4.609-1.221 1.176 0 1.859.446 2.188 1.221 1.364-.657 3.294-1.221 4.726-1.221 1.837 0 2.494 1.151 2.494 2.915v8.771h-1.991z"
+          fill="#000"
+        />
+      </svg>
+    </div>
+  )
+}

package/packages/subnav/icons/nomad-logo-color.svgr.js

@@ -0,0 +1,50 @@
+import React from 'react'
+
+function NomadLogoColor({ title, ...props }) {
+  return (
+    <div className="g-svg">
+      <img
+        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKYAAAAwCAYAAACbtwEpAAAANklEQVR4Ae3BAQ0AAADCIPunfg43YAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMCtAHywAAGoU7/pAAAAAElFTkSuQmCC"
+        className="svg-sizer"
+        alt=""
+        role="presentation"
+      />
+      <svg
+        width={166}
+        height={48}
+        viewBox="0 0 166 48"
+        fill="none"
+        role="img"
+        {...props}
+      >
+        {title ? <title>{title}</title> : null}
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M159.444 21.965c-1.204-.264-2.745-.49-4.062-.49-1.655 0-2.294.791-2.294 2.447v6.475c0 1.505.564 2.334 2.256 2.334 1.504 0 3.122-.754 4.1-1.657v-9.11zm-10.945 2.07c0-4.065 1.806-6.474 6.055-6.474 1.618 0 3.46.226 4.89.527v-7.641l4.588-.64v26.462h-3.648l-.451-1.544c-1.617 1.167-3.498 1.92-5.792 1.92-3.686 0-5.642-2.183-5.642-6.361v-6.248zm-7.407 5.307h-3.385c-1.505 0-1.918.415-1.918 1.807 0 1.28.413 1.844 1.843 1.844 1.354 0 2.595-.45 3.46-.94v-2.71zm4.588 6.927h-3.76l-.339-1.243c-1.655 1.092-3.611 1.62-5.454 1.62-3.348 0-4.776-2.297-4.776-5.459 0-3.726 1.617-5.157 5.341-5.157h4.4v-1.92c0-2.032-.565-2.747-3.498-2.747-1.655 0-3.46.225-5.077.564l-.564-3.5c1.73-.527 4.249-.866 6.28-.866 5.755 0 7.447 2.033 7.447 6.625V36.27zm-32.756 0V23.47c0-.979-.414-1.468-1.466-1.468-1.129 0-3.122.677-4.778 1.543v12.723h-4.588V17.938h3.498l.451 1.543c2.295-1.13 5.19-1.92 7.334-1.92 1.768 0 2.858.715 3.46 1.957 2.219-1.129 5.153-1.957 7.373-1.957 3.046 0 4.136 2.145 4.136 5.42v13.288h-4.588V23.47c0-.979-.414-1.468-1.467-1.468-1.129 0-3.347.714-4.776 1.543v12.723h-4.589zM90.999 21.476c-2.444 0-3.384 1.09-3.384 3.161v4.931c0 2.07.94 3.162 3.384 3.162 2.445 0 3.386-1.092 3.386-3.162v-4.93c0-2.071-.941-3.162-3.386-3.162zm0 15.17c-6.28 0-7.973-3.464-7.973-7.228v-4.63c0-3.765 1.692-7.227 7.973-7.227s7.974 3.462 7.974 7.227v4.63c0 3.764-1.693 7.227-7.974 7.227zM63.885 17.26v19.009h-4.627v-25.07h6.32l9.515 19.047V11.199h4.626v25.07H73.4L63.885 17.26z"
+          fill={props.color || '#000'}
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M31.239 18.348v7.918l-5.494 3.184-3.842-2.385v20.67l.108.002L42.72 35.802V11.963l-.387-.002-11.093 6.387z"
+          fill="#1F9967"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M21.73 0L1.086 11.968l13.928 8.206 2.818-1.72 6.846 3.83v-7.958l6.56-3.955v7.977l11.48-6.385v-.029L21.73 0z"
+          fill="#00BC7F"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M19.128 25.474v7.951L12.883 37.4V21.493l2.368-1.463-14.042-8.065-.122.004v23.833l20.816 11.932v-20.67l-2.775-1.59z"
+          fill="#00BC7F"
+        />
+      </svg>
+    </div>
+  )
+}
+
+export default NomadLogoColor

package/packages/subnav/icons/packer-logo-color.svgr.js

@@ -0,0 +1,40 @@
+import React from 'react'
+
+function PackerLogoColor({ title, ...props }) {
+  return (
+    <div className="g-svg">
+      <img
+        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAAAwCAYAAAD+WvNWAAAAMUlEQVR4Ae3BMQEAAADCIPunXgo/YAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwE1sMAABYJ07HwAAAABJRU5ErkJggg=="
+        className="svg-sizer"
+        alt=""
+        role="presentation"
+      />
+      <svg
+        width={144}
+        height={48}
+        viewBox="0 0 144 48"
+        fill="none"
+        role="img"
+        {...props}
+      >
+        {title ? <title>{title}</title> : null}
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M.527 5.871l15.533 8.99v33.14L.527 39.01V5.87z"
+          fill="#1DAEFF"
+        />
+        <path
+          d="M23.742 9.75L6.868 0v6.775l11.476 6.639v20.284l5.398 3.096c3.346 1.936 6.077.8 6.077-2.576v-14.87c0-3.35-2.73-7.67-6.077-9.598z"
+          fill="#1D94DD"
+        />
+        <path
+          d="M45.862 11.278h9.966c5.91 0 8.09 2.4 8.09 6.919v3.495c0 4.456-2.396 6.88-8.321 6.88h-4.903v8.294h-4.832V11.278zm9.703 4.263h-4.871v8.799h4.871c2.723 0 3.53-1 3.53-3.112v-2.655c0-2.112-.887-3.032-3.53-3.032zM80.265 36.866h-3.873l-.343-1.264a10.202 10.202 0 01-5.59 1.656c-3.41 0-4.872-2.344-4.872-5.6 0-3.806 1.653-5.262 5.447-5.262h4.56v-1.944c0-2.072-.575-2.808-3.57-2.808-1.74.02-3.473.212-5.175.576l-.575-3.575a24.338 24.338 0 016.389-.88c5.87 0 7.594 2.072 7.594 6.759l.008 12.342zm-4.671-7.07h-3.458c-1.533 0-1.957.423-1.957 1.847s.424 1.88 1.877 1.88a7.353 7.353 0 003.538-.96v-2.768zM83.06 30.067v-5.111c0-5.031 2.188-7.199 8.058-7.199 1.547.008 3.086.24 4.568.688l-.575 3.84a16.991 16.991 0 00-3.874-.497c-2.683 0-3.49.8-3.49 3.112v5.183c0 2.304.8 3.111 3.49 3.111a15.78 15.78 0 003.874-.495l.575 3.839c-1.48.458-3.02.69-4.568.688-5.87.024-8.058-2.128-8.058-7.159zM98.632 36.866V10.51l4.68-.656v27.012h-4.68zm15.884-18.71l-5.486 9.263 5.694 9.447h-5.143l-5.638-9.455 5.334-9.262 5.239.008zM124.259 33.403a19.535 19.535 0 005.717-.88l.727 3.535a20.018 20.018 0 01-6.868 1.192c-5.869 0-7.897-2.728-7.897-7.199v-4.96c0-3.959 1.764-7.302 7.746-7.302 5.981 0 7.323 3.495 7.323 7.527v4h-10.382v.959c-.016 2.248.791 3.128 3.634 3.128zm-3.642-7.88h5.942v-.911c0-1.768-.535-3-2.835-3s-3.107 1.232-3.107 3v.912zM143.473 22.076a36.563 36.563 0 00-4.952 2.728v12.062h-4.631v-18.71h3.953l.303 2.073a20.924 20.924 0 014.911-2.456l.416 4.303z"
+          fill={props.color || '#000'}
+        />
+      </svg>
+    </div>
+  )
+}
+
+export default PackerLogoColor

package/packages/subnav/icons/terraform-logo-color.svgr.js

@@ -0,0 +1,44 @@
+import React from 'react'
+
+function TerraformLogoColor({ title, ...props }) {
+  return (
+    <div className="g-svg">
+      <img
+        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAwCAYAAABUmTXqAAAAO0lEQVR4Ae3BAQ0AAADCIPun/mYOYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABcljAAAQrZGS0AAAAASUVORK5CYII="
+        className="svg-sizer"
+        alt=""
+        role="presentation"
+      />
+      <svg
+        width={200}
+        height={48}
+        viewBox="0 0 200 48"
+        fill="none"
+        role="img"
+        {...props}
+      >
+        {title ? <title>{title}</title> : null}
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M183.614 36.233V23.508c0-.974-.411-1.46-1.459-1.46-1.123 0-3.107.674-4.754 1.535v12.651h-4.567v-18.23h3.481l.45 1.536c2.283-1.123 5.165-1.91 7.299-1.91 1.76 0 2.844.712 3.443 1.948 2.209-1.123 5.129-1.948 7.337-1.948 3.032 0 4.118 2.134 4.118 5.391v13.213h-4.567V23.508c0-.974-.411-1.46-1.46-1.46-1.123 0-3.331.711-4.754 1.535v12.651h-4.567zm-12.538-14.41c-1.76.786-3.182 1.608-4.829 2.657v11.753h-4.566v-18.23h3.855l.3 2.022c1.011-.673 3.181-1.946 4.791-2.395l.449 4.193zm-20.437-.3c-2.433 0-3.37 1.086-3.37 3.144v4.904c0 2.058.937 3.144 3.37 3.144 2.432 0 3.369-1.086 3.369-3.144v-4.904c0-2.058-.937-3.145-3.369-3.145zm0 15.085c-6.251 0-7.936-3.444-7.936-7.187v-4.605c0-3.742 1.685-7.186 7.936-7.186 6.251 0 7.935 3.444 7.935 7.186v4.605c0 3.743-1.684 7.187-7.935 7.187zm-8.909-22.759c-.861-.187-1.871-.3-2.62-.3-1.796 0-2.059.787-2.059 2.172v2.283h4.642l-.261 3.63h-4.381v14.6h-4.566v-14.6h-2.92v-3.63h2.92v-2.545c0-3.781 1.759-5.653 5.802-5.653 1.422 0 2.732.188 3.93.525l-.487 3.518zm-18.603 15.497h-3.369c-1.497 0-1.909.412-1.909 1.797 0 1.273.412 1.834 1.834 1.834 1.348 0 2.583-.45 3.444-.936v-2.695zm4.567 6.887h-3.743l-.337-1.235c-1.647 1.086-3.594 1.61-5.428 1.61-3.331 0-4.754-2.283-4.754-5.428 0-3.705 1.61-5.128 5.316-5.128h4.379v-1.909c0-2.021-.561-2.733-3.481-2.733-1.647 0-3.444.225-5.053.562l-.562-3.482c1.722-.524 4.23-.86 6.251-.86 5.727 0 7.412 2.02 7.412 6.588v12.015zm-15.272-14.41c-1.759.786-3.182 1.608-4.829 2.657v11.753h-4.566v-18.23h3.855l.299 2.022c1.011-.673 3.182-1.946 4.792-2.395l.449 4.193zm-11.154 0c-1.76.786-3.182 1.608-4.829 2.657v11.753h-4.566v-18.23h3.855l.3 2.022c1.011-.673 3.181-1.946 4.791-2.395l.449 4.193zM78.922 25.19h5.801v-.899c0-1.72-.524-2.919-2.769-2.919-2.246 0-3.032 1.198-3.032 2.92v.898zm3.556 7.674c1.76 0 3.593-.262 5.578-.862l.71 3.444c-2.059.786-4.529 1.16-6.7 1.16-5.727 0-7.711-2.657-7.711-7.036v-4.829c0-3.856 1.722-7.113 7.561-7.113 5.84 0 7.15 3.407 7.15 7.338v3.893H78.922v.935c0 2.208.786 3.07 3.556 3.07zM65.415 15.459h-6.963v-4.155h18.64v4.155H70.13v20.775h-4.715V15.459z"
+          fill={props.color || '#000'}
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M29.436 15.982V30.8l12.975-7.41V8.572l-12.976 7.41z"
+          fill="#4040B2"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M15.04 39.834l12.974 7.412V32.425l-12.973-7.41v14.82zM.646 15.118l12.973 7.41V7.71L.645.3v14.818zm14.396-6.547v14.82l12.974 7.41V15.98L15.04 8.571z"
+          fill="#5F43E9"
+        />
+      </svg>
+    </div>
+  )
+}
+
+export default TerraformLogoColor

package/packages/subnav/icons/vagrant-logo-color.svgr.js

@@ -0,0 +1,38 @@
+import React from 'react'
+
+function VagrantLogoColor({ title, ...props }) {
+  return (
+    <div className="g-svg">
+      <img
+        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALIAAAAwCAYAAAC18iC7AAAAOElEQVR4Ae3BAQ0AAADCIPunfg43YAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACcChbAAAXlm7PkAAAAASUVORK5CYII="
+        className="svg-sizer"
+        alt=""
+        role="presentation"
+      />
+      <svg
+        width={178}
+        height={48}
+        viewBox="0 0 178 48"
+        fill="none"
+        role="img"
+        {...props}
+      >
+        {title ? <title>{title}</title> : null}
+        <path
+          d="M79.91 11.272h5.024l-7.637 25.6h-7.134l-7.637-25.6h5.025L73.726 32.6l6.183-21.328zM98.906 36.872h-3.835l-.343-1.272a10.213 10.213 0 01-5.592 1.656c-3.419 0-4.873-2.344-4.873-5.6 0-3.808 1.654-5.264 5.448-5.264h4.49v-1.936c0-2.072-.575-2.808-3.571-2.808-1.743.018-3.48.211-5.184.576l-.576-3.576a24.358 24.358 0 016.391-.888c5.871 0 7.597 2.072 7.597 6.768l.048 12.344zM94.225 29.8h-3.451c-1.534 0-1.957.424-1.957 1.848 0 1.424.423 1.88 1.877 1.88a7.364 7.364 0 003.53-.96V29.8zM107.845 31.832a2.02 2.02 0 00-1.111 1.496c0 .496.304.728 1.039.8 2.069.232 3.195.344 5.408.576 3.036.344 3.994 1.848 3.994 4.536 0 4-1.462 5.6-8.443 5.6a27.17 27.17 0 01-7.19-.96l.575-3.496a25.92 25.92 0 006.295.8c3.723 0 4.45-.272 4.45-1.496s-.344-1.344-1.766-1.496c-2.149-.232-3.035-.344-5.408-.616-2.644-.304-3.683-1.192-3.683-3.576a4.007 4.007 0 011.958-3.2c-1.726-1.04-2.533-2.768-2.533-5.032v-1.776c.08-3.88 2.109-6.224 7.525-6.224 1.077-.008 2.151.12 3.196.384h5.759v2.344c-.655.192-1.422.384-2.069.576.446.908.67 1.908.655 2.92v1.768c0 3.808-2.3 6.112-7.525 6.112a9.682 9.682 0 01-1.126-.04zm1.07-10.304c-2.3 0-3.107.848-3.107 2.616v1.448c0 1.848.918 2.536 3.107 2.536s3.148-.728 3.148-2.536v-1.448c.008-1.752-.799-2.608-3.14-2.608l-.008-.008zM129.605 22.072a36.678 36.678 0 00-4.945 2.72v12.08h-4.713v-18.72h3.994l.304 2.072a20.943 20.943 0 014.913-2.456l.447 4.304zM145.262 36.872h-3.834l-.344-1.272a10.208 10.208 0 01-5.591 1.656c-3.419 0-4.873-2.344-4.873-5.6 0-3.808 1.653-5.264 5.448-5.264h4.489v-1.936c0-2.072-.575-2.808-3.571-2.808a26.081 26.081 0 00-5.184.576l-.575-3.576a24.35 24.35 0 016.39-.888c5.872 0 7.597 2.072 7.597 6.768l.048 12.344zm-4.681-7.072h-3.451c-1.534 0-1.957.424-1.957 1.848 0 1.424.423 1.88 1.877 1.88a7.365 7.365 0 003.531-.96V29.8zM159.194 36.872V23.8c0-1-.423-1.496-1.493-1.496a12.895 12.895 0 00-4.873 1.6v12.968h-4.682v-18.72h3.571l.464 1.6a18.692 18.692 0 017.485-1.96c3.107 0 4.218 2.192 4.218 5.536v13.6l-4.69-.056zM177.656 36.52a12.97 12.97 0 01-4.106.728c-3.419 0-5.145-1.6-5.145-4.96v-10.4h-2.804v-3.736h2.804v-4.648l4.681-.656v5.304h4.793l-.303 3.728h-4.49v9.8a1.488 1.488 0 00.431 1.249 1.47 1.47 0 001.255.407 8.983 8.983 0 002.34-.384l.544 3.568z"
+          fill={props.color || '#000'}
+        />
+        <path
+          d="M46.478 8.088V3.696L35.94 9.832v3.712l-8.428 18.208-4.218 2.912V48l9.035-5.216L46.478 8.088zM23.295 25.168l-6.318-14.776V6.216l-.04-.016-6.28 3.632v3.712l8.428 19.008 4.21-2.088v-5.296z"
+          fill="#1159CC"
+        />
+        <path
+          d="M40.159 0L29.63 6.176h-.008v4.216l-6.326 14.776v4.936l-4.21 2.448-8.428-19.008v-3.72l6.327-3.64L6.44 0 .12 3.696v4.528l14.227 34.6L23.295 48V35l4.218-2.448-.056-.032 8.484-18.976v-3.72l10.537-6.128L40.159 0z"
+          fill="#127EFF"
+        />
+      </svg>
+    </div>
+  )
+}
+
+export default VagrantLogoColor

package/packages/subnav/icons/vault-logo-color.svgr.js

@@ -0,0 +1,32 @@
+import React from 'react'
+
+function VaultLogoColor({ title, ...props }) {
+  return (
+    <div className="g-svg">
+      <img
+        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIgAAAAwCAYAAADKIzJKAAAAMElEQVR4Ae3BMQEAAADCIPunXgsvYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABcBGYwAAECm5clAAAAAElFTkSuQmCC"
+        className="svg-sizer"
+        alt=""
+        role="presentation"
+      />
+      <svg
+        width={136}
+        height={48}
+        viewBox="0 0 136 48"
+        fill="none"
+        role="img"
+        {...props}
+      >
+        {title ? <title>{title}</title> : null}
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M134.509 35.895c-.978.414-2.857.714-4.023.714-3.346 0-5.037-1.579-5.037-4.849V21.574h-2.744v-3.646h2.744v-4.549l4.586-.64v5.189h4.698l-.3 3.646h-4.398v9.585c0 .978.451 1.617 1.654 1.617.677 0 1.503-.15 2.293-.375l.527 3.495zm-18.269.338V10.446l4.586-.64v26.427h-4.586zm-14.773-18.306v12.78c0 .978.414 1.466 1.466 1.466 1.128 0 3.12-.676 4.774-1.54V17.926h4.586v18.306h-3.496l-.451-1.541c-2.293 1.128-5.187 1.917-7.33 1.917-3.044 0-4.135-2.143-4.135-5.413v-13.27h4.586zm-12.555 11.39H85.53c-1.503 0-1.917.414-1.917 1.805 0 1.278.414 1.84 1.841 1.84 1.354 0 2.595-.45 3.46-.939v-2.706zm4.586 6.916H89.74l-.338-1.24c-1.654 1.09-3.609 1.616-5.45 1.616-3.347 0-4.775-2.293-4.775-5.45 0-3.721 1.617-5.15 5.338-5.15h4.398V24.09c0-2.03-.564-2.744-3.496-2.744-1.654 0-3.458.226-5.074.564l-.564-3.496c1.728-.526 4.247-.865 6.277-.865 5.752 0 7.443 2.03 7.443 6.617v12.066zm-20.11-25.036h4.924l-7.48 25.036h-6.993l-7.48-25.036h4.924l6.052 20.864 6.053-20.864zM27.428 20.764h2.782v-2.783h-2.782v2.783zm-.024-4.174h2.782v-2.783h-2.782v2.783zm-4.15-4.174h2.782V9.633h-2.783v2.783zm0 4.174h2.782v-2.783h-2.783v2.783zm0 4.174h2.782V17.98h-2.783v2.783zm0 4.174h2.782v-2.783h-2.783v2.782zM19.08 12.415h2.783V9.633H19.08v2.783zm0 4.174h2.783v-2.783H19.08v2.783zm0 4.174h2.783V17.98H19.08v2.783zm8.324-8.348h2.782V9.633h-2.782v2.783zM.645 0l23.913 48L48.645 0h-48z"
+          fill={props.color || '#000'}
+        />
+      </svg>
+    </div>
+  )
+}
+
+export default VaultLogoColor

package/packages/subnav/icons/waypoint-logo-color.svgr.js

@@ -0,0 +1,28 @@
+import * as React from "react";
+
+function SvgWaypointLogoColor(props) {
+  return (
+    <div className="g-svg">
+      <img
+        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUgAAAA/CAYAAACCRFH+AAAABmJLR0QAzgDUANit7irPAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5AkcFig3q5WtBQAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAABnSURBVHja7cExAQAAAMKg9U9tDQ+gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACuDUMuAAFgiY0FAAAAAElFTkSuQmCC"
+        className="svg-sizer"
+        alt=""
+        role="presentation"
+      />
+      <svg viewBox="0 0 328 63" height={63} width={328} {...props}>
+        <defs>
+          <style>{".waypoint-logo-color_svg__cls-1{fill:#14c6cb}"}</style>
+        </defs>
+        <g id="waypoint-logo-color_svg__LOGOS">
+          <path d="M137.82 39.22L145.51 8h7.56l-10 40.28H132.8l-7.38-32.42-7.37 32.42h-10.29L97.78 8h7.56L113 39.22 120.34 8h10.17zM175.8 48.29h-6.05l-.54-2a16.15 16.15 0 01-8.77 2.6c-5.38 0-7.68-3.69-7.68-8.77 0-6 2.6-8.29 8.59-8.29h7.07v-3.08c0-3.26-.9-4.41-5.62-4.41a40.82 40.82 0 00-8.17.91l-.9-5.63a38.26 38.26 0 0110.1-1.39c9.25 0 12 3.27 12 10.65zm-7.38-11.13H163c-2.42 0-3.08.67-3.08 2.91 0 2 .66 3 3 3a11.65 11.65 0 005.56-1.51zM196.49 48.29l-3.93 11.92h-7l3.69-11.92h-2.6l-9.32-29.46h7.56l6.72 22.38 6.77-22.38h7.56zM232.72 38.49c0 6.53-2.91 10.41-9.74 10.41a41.07 41.07 0 01-7.87-.85v12.16l-7.38 1V18.83h5.87l.73 2.48a15.52 15.52 0 019.31-3.08c5.93 0 9.08 3.51 9.08 10.22zm-17.61 3.33a33.06 33.06 0 006.54.79c2.66 0 3.69-1.27 3.69-3.94v-10.4c0-2.42-.91-3.75-3.63-3.75a10.48 10.48 0 00-6.6 2.66zM249 48.9c-10.1 0-12.82-5.57-12.82-11.62v-7.44c0-6.05 2.72-11.61 12.82-11.61s12.83 5.56 12.83 11.61v7.44c.04 6.05-2.69 11.62-12.83 11.62zm0-24.38c-3.93 0-5.44 1.75-5.44 5.08v7.92c0 3.33 1.51 5.09 5.44 5.09s5.45-1.76 5.45-5.09V29.6c.04-3.33-1.45-5.08-5.45-5.08zM266.34 14.66V6.13h7.38v8.53zm0 33.63V18.83h7.38v29.46zM297.18 48.29V27.73c0-1.58-.66-2.36-2.35-2.36s-5 1.09-7.69 2.48v20.44h-7.38V18.83h5.63l.73 2.48a29.54 29.54 0 0111.79-3.08c4.9 0 6.65 3.45 6.65 8.71v21.35zM326 47.75a20.57 20.57 0 01-6.47 1.15c-5.38 0-8.1-2.54-8.1-7.81V24.7H307v-5.87h4.42v-7.31l7.37-1v8.34h7.57l-.49 5.87h-7.08v15.4c0 1.57.73 2.6 2.67 2.6a14.34 14.34 0 003.69-.61z" />
+          <path
+            className="waypoint-logo-color_svg__cls-1"
+            d="M83.07 1.76L72.9 19.37 62.74 1.76h20.33zM28.8 13.52h-6.78l16.95 29.37-6.78 11.75L1.66 1.76h33.92l16.96 29.38 3.39-5.87L42.37 1.76h13.56l6.79 11.76 6.78 11.75-16.96 29.37L28.8 13.52z"
+          />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+export default SvgWaypointLogoColor;

package/packages/subnav/index.js

@@ -0,0 +1,107 @@
+import './helpers/globalThis'
+
+import useNavRef from './helpers/useNavRef'
+
+import MenuItemsOverflow from './partials/MenuItemsOverflow/index.js'
+import TitleLink from './partials/TitleLink/index.js'
+import MenuItemsDefault from './partials/MenuItemsDefault/index.js'
+import CtaLinks from './partials/CtaLinks/index.js'
+import traverse, { isObject } from './helpers/traverse/index.js'
+
+const brandWhitelist = {
+  consul: 'consul',
+  hcp: 'hcp',
+  nomad: 'nomad',
+  packer: 'packer',
+  terraform: 'terraform',
+  vagrant: 'vagrant',
+  vault: 'vault',
+  boundary: 'boundary',
+  waypoint: 'waypoint',
+}
+
+function SubnavInner(props) {
+  const {
+    hasOverflow,
+    titleLink,
+    ctaLinks,
+    hideGithubStars,
+    menuItems,
+    menuItemsAlign,
+    constrainWidth,
+    currentPath,
+    Link,
+  } = props
+  // Set the brand theme automatically based on the nav's title
+  const brand = brandWhitelist[titleLink.text.toLowerCase()] || 'hashicorp'
+  // Add _isActiveUrl to menuItems so we can highlight them appropriately
+  const menuItemsWithActive = traverse(menuItems, (_key, value) => {
+    const hasUrl = isObject(value) && value.url
+    if (hasUrl) value._isActiveUrl = value.url === currentPath
+    return value
+  })
+
+  return (
+    <div
+      className={`constrain-width-wrapper ${
+        constrainWidth ? 'g-grid-container' : ''
+      }`}
+    >
+      <div
+        className={`g-subnav-inner  brand-${brand}  ${
+          constrainWidth ? 'is-constrained' : ''
+        }`}
+        data-overflow-target
+      >
+        <TitleLink
+          text={titleLink.text}
+          url={titleLink.url}
+          brand={brand}
+          Link={Link}
+        />
+        {!hasOverflow && (
+          <MenuItemsDefault
+            menuItems={menuItemsWithActive}
+            menuItemsAlign={menuItemsAlign}
+            brand={brand}
+            Link={Link}
+          />
+        )}
+        {!hasOverflow && (
+          <CtaLinks
+            links={ctaLinks}
+            brand={brand}
+            Link={Link}
+            hideGithubStars={hideGithubStars}
+          />
+        )}
+        {hasOverflow && (
+          <MenuItemsOverflow
+            menuItems={menuItemsWithActive}
+            ctaLinks={ctaLinks}
+            hideGithubStars={hideGithubStars}
+            brand={brand}
+            Link={Link}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+function Subnav(props) {
+  const [isSticky, hasOverflow, wrapperRef] = useNavRef()
+
+  return (
+    <nav ref={wrapperRef} className={`g-subnav ${isSticky ? 'is-sticky' : ''}`}>
+      <SubnavInner {...props} hasOverflow={hasOverflow} isSticky={isSticky} />
+    </nav>
+  )
+}
+
+Subnav.defaultProps = {
+  menuItemsAlign: 'center',
+  ctaLinks: [],
+}
+
+export default Subnav

package/packages/subnav/package-lock.json

@@ -0,0 +1,56 @@
+{
+	"name": "@hashicorp/react-subnav",
+	"version": "7.0.0",
+	"lockfileVersion": 1,
+	"requires": true,
+	"dependencies": {
+		"@hashicorp/react-button": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/@hashicorp/react-button/-/react-button-2.3.0.tgz",
+			"integrity": "sha512-1C6V8OxadkdDAkwgItDfNxx7ns9EB6znK39V94RBiPvElmsNLCEG7zujcQX71V2n+HMSv1JPgDvXp4WLICzK+Q==",
+			"requires": {
+				"@hashicorp/react-inline-svg": "^1.0.0",
+				"slugify": "^1.3.6"
+			}
+		},
+		"@hashicorp/react-global-styles": {
+			"version": "4.5.0",
+			"resolved": "https://registry.npmjs.org/@hashicorp/react-global-styles/-/react-global-styles-4.5.0.tgz",
+			"integrity": "sha512-CBLEL2PnjMHaT2XT7rLs/QvkamcIKD3ckvUWcCf9mSiYHTuTNbb8gJpQvVSEenN+ISFxAt1FVRQ7aJnnBYjVWg=="
+		},
+		"@hashicorp/react-inline-svg": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/@hashicorp/react-inline-svg/-/react-inline-svg-1.0.2.tgz",
+			"integrity": "sha512-AAFnBslSTgnEr++dTbMn3sybAqvn7myIj88ijGigF6u11eSRiV64zqEcyYLQKWTV6dF4AvYoxiYC6GSOgiM0Yw=="
+		},
+		"@hashicorp/react-link-wrap": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/@hashicorp/react-link-wrap/-/react-link-wrap-1.0.2.tgz",
+			"integrity": "sha512-Eypcd6LkYFb56cltIARJTlcKQPkZDkRXU3sDxLz+vlQDl5kmxFsh5iiPnRn2/JkpOwfC91x92OXpBNUszqHfbA=="
+		},
+		"isomorphic-unfetch": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/isomorphic-unfetch/-/isomorphic-unfetch-3.0.0.tgz",
+			"integrity": "sha512-V0tmJSYfkKokZ5mgl0cmfQMTb7MLHsBMngTkbLY0eXvKqiVRRoZP04Ly+KhKrJfKtzC9E6Pp15Jo+bwh7Vi2XQ==",
+			"requires": {
+				"node-fetch": "^2.2.0",
+				"unfetch": "^4.0.0"
+			}
+		},
+		"node-fetch": {
+			"version": "2.6.1",
+			"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+			"integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw=="
+		},
+		"slugify": {
+			"version": "1.4.5",
+			"resolved": "https://registry.npmjs.org/slugify/-/slugify-1.4.5.tgz",
+			"integrity": "sha512-WpECLAgYaxHoEAJ8Q1Lo8HOs1ngn7LN7QjXgOLbmmfkcWvosyk4ZTXkTzKyhngK640USTZUlgoQJfED1kz5fnQ=="
+		},
+		"unfetch": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/unfetch/-/unfetch-4.1.0.tgz",
+			"integrity": "sha512-crP/n3eAPUJxZXM9T80/yv0YhkTEx2K1D3h7D1AJM6fzsWZrxdyRuLN0JH/dkZh1LNH8LxCnBzoPFCPbb2iGpg=="
+		}
+	}
+}

package/packages/subnav/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@hashicorp/react-subnav",
+  "description": "Displays a navigation bar, with links and a call-to-action.",
+  "version": "7.0.0",
+  "author": "HashiCorp",
+  "contributors": [
+    "Zach Shilton"
+  ],
+  "dependencies": {
+    "@hashicorp/react-button": "^2.2.4",
+    "@hashicorp/react-global-styles": "^4.4.2",
+    "@hashicorp/react-inline-svg": "^1.0.2",
+    "@hashicorp/react-link-wrap": "^1.0.2",
+    "isomorphic-unfetch": "^3.0.0"
+  },
+  "keywords": [
+    "component",
+    "navigation",
+    "react"
+  ],
+  "license": "MPL-2.0",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/packages/subnav/partials/CtaLinks/github-stars-link/formatStarCount/index.js

@@ -0,0 +1,17 @@
+/*
+ * Given:
+ * starCount (int)
+ * Return:
+ * Formatted string, to match GitHub's typical display of star counts,
+ * that is, expressed as thousands of stars
+ * Or returns false for falsy starCount values
+ */
+function formatStarCount(starCount) {
+  if (!starCount || starCount <= 0) return false
+  if (starCount < 1000) return `${starCount}`
+  const thousands = Math.floor(starCount / 100.0) / 10.0
+  if (starCount < 100000) return `${thousands.toFixed(1)}k`
+  return `${Math.floor(thousands)}k`
+}
+
+export default formatStarCount

package/packages/subnav/partials/CtaLinks/github-stars-link/index.js

@@ -0,0 +1,71 @@
+import React, { useEffect, useState } from 'react'
+import fetch from 'isomorphic-unfetch'
+import formatStarCount from './formatStarCount/index.js'
+import parseGithubUrl from './parseGithubUrl/index.js'
+import StarIcon from '../icons/star'
+import GithubIcon from '../icons/github-logo'
+
+function GithubStarsButton(props) {
+  const { url, hideGithubStars } = props
+  const [starCount, setStarcount] = useState(-1)
+
+  useEffect(() => {
+    if (hideGithubStars) return setStarcount(0)
+    const { org, repo } = parseGithubUrl(url)
+    if (!org || !repo) return setStarcount(0)
+    const githubApiUrl = `https://api.github.com/repos/${org}/${repo}`
+    fetch(githubApiUrl)
+      .then((response) => {
+        response.json().then((data) => {
+          // Github's rate limit for unauthenticated requests is 60 per hour
+          // When the limit is hit, data.stargazers_count is undefined,
+          // and setStarcount falls back to not showing the star count
+          setStarcount(data.stargazers_count)
+          // Warn if this limit is hit, to avoid otherwise confusing behavior
+          //  We're still using the response to provide a documentation link
+          if (!data.stargazers_count) {
+            const { headers } = response
+            if (headers.get('x-ratelimit-remaining') === '0') {
+              const resetAtSeconds = parseInt(headers.get('x-ratelimit-reset'))
+              const resetDate = new Date(resetAtSeconds * 1000)
+              const rateLimit = headers.get('x-ratelimit-limit')
+              console.warn(
+                `⭐ Stargazers count could not be fetched. Rate limit exceeded for unauthenticated GitHub API. Limit will be reset to ${rateLimit} at ${resetDate}. See ${data.documentation_url} for more details.`
+              )
+            } else {
+              console.warn(
+                `Request for stargazers was successful, but the returned value was undefined or falsy. This might be because the repo has no stars, or it might be a different issue.`
+              )
+            }
+          }
+        })
+      })
+      .catch((err) => {
+        setStarcount(0)
+        console.warn(JSON.stringify(err, null, 2))
+      })
+  }, [url])
+
+  const isLoadingStarcount = starCount === -1
+  const isFailedStarcount = formatStarCount(starCount) === false
+  const showStarcount =
+    !hideGithubStars && (isLoadingStarcount || !isFailedStarcount)
+  return (
+    <a href={url} className="github-button">
+      <span className="github">
+        <GithubIcon />
+        <span className="hidden-text">GitHub</span>
+      </span>
+      {showStarcount && (
+        <span className="stars">
+          <StarIcon />
+          <span className="g-type-body-small-strong" data-testid="github-stars">
+            {formatStarCount(starCount) || <span>&mdash;</span>}
+          </span>
+        </span>
+      )}
+    </a>
+  )
+}
+
+export default GithubStarsButton

package/packages/subnav/partials/CtaLinks/github-stars-link/parseGithubUrl/index.js

@@ -0,0 +1,25 @@
+/*
+ * Given:
+ * urlString (string) valid URL string
+ * Return:
+ * { org, repo }, where the url is ~= www.github.com/{org}/{repo}
+ * or false otherwise (eg if not a valid URL, or if not a GitHub url)
+ */
+function parseGithubUrl(urlString) {
+  try {
+    const urlObj = new URL(urlString)
+    if (urlObj.hostname !== 'www.github.com') return false
+    const parts = urlObj.pathname.split('/').filter(Boolean)
+    const org = parts[0]
+    const repo = parts[1]
+    return { org, repo }
+  } catch (err) {
+    console.warn(
+      'Warning! An invalid URL has probably been supplied to the GitHub ctaLink in <Subnav />. The corresponding error:'
+    )
+    console.warn(err)
+    return false
+  }
+}
+
+export default parseGithubUrl