Offload styles from main application stylesheet

Makefile

@@ -126,7 +126,7 @@ lint_asset_bundle_size: ## Lints JavaScript and CSS compiled bundle size
 	@# and you have no options to split that from the common bundles. If you need to increase this
 	@# budget and accept the fact that this will force end-users to endure longer load times, you
 	@# should set the new budget to within a few thousand bytes of the production-compiled size.
-	find app/assets/builds/application.css -size -235000c | grep .
+	find app/assets/builds/application.css -size -220000c | grep .
 	find public/packs/js/application-*.digested.js -size -5000c | grep .
 
 lint_migrations:

app/assets/stylesheets/_uswds.scss

@@ -6,19 +6,15 @@
 @forward 'usa-alert';
 @forward 'usa-banner';
 @forward 'usa-button';
-@forward 'usa-collection';
 @forward 'usa-form';
 @forward 'usa-header';
 @forward 'usa-layout-grid';
 @forward 'usa-link';
 @forward 'usa-list';
 @forward 'usa-media-block';
 @forward 'usa-modal';
-@forward 'usa-nav';
 @forward 'usa-process-list';
-@forward 'usa-sidenav';
 @forward 'usa-skipnav';
-@forward 'usa-step-indicator';
 @forward 'usa-tag';
 @forward 'uswds-form-controls';
 @forward 'uswds-utilities';

app/assets/stylesheets/components/_header.scss

@@ -0,0 +1,12 @@
+@use 'uswds-core' as *;
+
+.page-header--basic {
+  @include u-flex('align-center', 'justify-center');
+  @include u-display('flex');
+  @include u-height(7);
+  @include u-bg('primary-lighter');
+
+  @include at-media('tablet') {
+    @include u-height(9);
+  }
+}

app/assets/stylesheets/components/_index.scss

@@ -13,7 +13,7 @@
 @forward 'hr';
 @forward 'language-picker';
 @forward 'modal';
-@forward 'nav';
+@forward 'header';
 @forward 'page-heading';
 @forward 'profile-section';
 @forward 'personal-key';

app/assets/stylesheets/components/_nav.scss → app/assets/stylesheets/navigation.css.scss

@@ -1,15 +1,7 @@
 @use 'uswds-core' as *;
 
-.page-header--basic {
-  @include u-flex('align-center', 'justify-center');
-  @include u-display('flex');
-  @include u-height(7);
-  @include u-bg('primary-lighter');
-
-  @include at-media('tablet') {
-    @include u-height(9);
-  }
-}
+@forward 'usa-nav/src/styles';
+@forward 'usa-sidenav/src/styles';
 
 .sidenav-mobile .usa-nav__close {
   @include u-display('flex');

app/javascript/packages/document-capture/styles.scss

@@ -1,3 +1,5 @@
+@forward 'usa-collection/src/styles';
+
 @forward './components/acuant-capture';
 @forward './components/acuant-capture-canvas';
 @forward './components/acuant-selfie-capture-canvas';

app/views/layouts/account_side_nav.html.erb

@@ -6,6 +6,7 @@
   <%= render 'accounts/mobile_nav' %>
 <% end %>
 
+<%= stylesheet_tag_once('navigation') %>
 <%= javascript_packs_tag_once('navigation') %>
 
 <%= extends_layout :application, body_class: 'site', disable_card: true, user_main_tag: false do %>