Stablized with all CSS working now

app/assets/sass/uswds/components/_forms.scss

@@ -0,0 +1,45 @@
+@use 'uswds-core' as *;
+
+.js-enabled .live-search {
+  display: flex;
+  margin-bottom: units(2);
+
+  .usa-form-group {
+    @include u-width('mobile-lg');
+    margin-top: units(2);
+  }
+
+  input#search-by-name {
+    margin-top: units(1);
+    width: 100%;
+    border: 1px solid color('gray-60');
+    height: 40px;
+  }
+}
+
+.button-flex-header {
+  flex-direction: column;
+  align-items: flex-start;
+  margin-bottom: units(2);
+
+  @include at-media(desktop) {
+    flex-direction: row;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+
+.usa-button img {
+  margin-left: 0.5rem;
+  height: 1rem;
+}
+
+.usa-button.login-button.login-button--primary,
+.login-button.login-button--primary:hover {
+  color: color('blue-80');
+  background-color: color('white');
+  border: 1px solid color('gray-50');
+  display: inline-flex;
+  justify-content: center;
+}

app/assets/sass/uswds/components/_guides.scss

@@ -0,0 +1,193 @@
+@use "uswds-core" as *;
+
+.best-practices_card_img {
+  display: block;
+  width: 50%;
+  height: auto;
+  margin: 0 auto;
+}
+
+ol.guides-list {
+  counter-reset: item;
+  list-style-type: none;
+  padding-left: 0;
+}
+
+ol.guides-list.set-two {
+  counter-reset: item 6;
+}
+
+ol.guides-list.set-three {
+  counter-reset: item 10;
+}
+
+ol.guides-list li {
+  counter-increment: item;
+  margin-bottom: units(2);
+  position: relative;
+  padding-left: units(5);
+}
+
+ol.guides-list li::before {
+  content: counter(item);
+  background-color: color('blue-60v');
+  color: color('white');
+  width: units(4);
+  height: units(4);
+  border-radius: 50%;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 1;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+li.guides {
+  padding-bottom: units(6);
+}
+
+div.guides {
+  height: units('mobile');
+
+  &.auto-response-container {
+    height: calc(#{units('mobile')} + #{units(4)});
+  }
+}
+
+$do-dont-color-do: 'green-cool-50v';
+$do-dont-color-dont: 'red-cool-50v';
+$do-dont-color-border: 'gray-cool-20';
+$do-dont-padding: 3;
+$do-dont-top-bar-width: 1;
+
+.do-dont {
+  display: flex;
+  height: 100%;
+  padding-top: units(2);
+}
+
+.do-dont__do,
+.do-dont__dont {
+  background-color: color('white');
+  border: 1px solid color($do-dont-color-border);
+  flex: 1 0 0;
+  height: 100%;
+  position: relative;
+}
+
+.do-dont__do {
+  padding: 0rem;
+}
+
+.do-dont__do:before,
+.do-dont__dont:before {
+  content: '';
+  position: absolute;
+  height: units($do-dont-top-bar-width);
+  width: calc(100% + 2px);
+  top: -1px;
+  left: -1px;
+}
+
+.do-dont__do:before {
+  background-color: color($do-dont-color-do);
+}
+
+.do-dont__dont:before {
+  background-color: color($do-dont-color-dont);
+}
+
+.do-dont__heading {
+  align-items: center;
+  border-bottom: 1px solid color($do-dont-color-border);
+  display: flex;
+  font-weight: fw('bold');
+  margin: 0;
+  padding: units(4) units($do-dont-padding) units($do-dont-padding);
+
+  .usa-icon {
+    @include u-square(3);
+    margin-right: units(0.5);
+  }
+}
+
+.do-dont__do .do-dont__heading {
+  color: color($do-dont-color-do);
+}
+
+.do-dont__dont .do-dont__heading {
+  color: color($do-dont-color-dont);
+}
+
+.do-dont__content {
+  padding: 0 units($do-dont-padding) units($do-dont-padding)
+    units($do-dont-padding);
+
+  ul {
+    margin-bottom: 0;
+    overflow-wrap: anywhere;
+  }
+
+  li + li {
+    margin-top: units(1);
+  }
+}
+
+.svg-circle-icon {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  vertical-align: text-bottom;
+  margin-right: -2px;
+}
+
+.height-phone-lg {
+  max-height: units('mobile-lg');
+}
+
+.height-mobile {
+  max-height: units('mobile');
+}
+
+.maxh-mobile-lg {
+  max-height: units('mobile');
+}
+
+@include at-media-max('tablet') {
+  .guides-flex-container {
+    flex-direction: column;
+  }
+}
+
+.linked-card a {
+  text-decoration: none;
+  .usa-card__header, .usa-card__media {
+    @include at-media('tablet') {
+      padding-top: units(1);
+    }
+  }
+  &:visited {
+    color: color('ink');
+  }
+  &:focus .usa-card__container {
+    outline: units(0.5) solid color('blue-40v');
+    outline-offset: units(0.5);
+  }
+  &:hover .usa-card__container, &:focus .usa-card__container {
+    border-color: color('blue-60v');
+    background: color('blue-60v');
+    p, h3 {
+      color: color('white');
+    }
+    svg {
+      filter: brightness(0) invert(1);
+    }
+  }
+
+  &.linked-content:hover, &.linked-content:focus {
+    cursor: pointer;
+    transition: transform 0.3s ease, background-color 0.3s ease;
+  }
+}

app/assets/sass/uswds/components/_links.scss

@@ -0,0 +1,35 @@
+@use 'uswds-core' as *;
+
+.usa-link--downloadable {
+  position: relative;
+
+  &::after {
+    background-image: url(../img/material-icons/download.svg);
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 1.75ex 1.75ex;
+    height: 1.75ex;
+    width: 1.75ex;
+    content: '';
+    display: inline;
+    margin-top: 0.7ex;
+    margin-left: 2px;
+    padding-left: 1.75ex;
+    vertical-align: middle;
+  }
+
+  &::after {
+    background: 0 0;
+    background-color: currentColor;
+    -webkit-mask-image: url(../img/material-icons/download.svg),
+      linear-gradient(transparent, transparent);
+    mask-image: url(../img/material-icons/download.svg),
+      linear-gradient(transparent, transparent);
+    -webkit-mask-position: center center;
+    mask-position: center center;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: 1.75ex 1.75ex;
+    mask-size: 1.75ex 1.75ex;
+  }
+}

app/assets/sass/uswds/components/_pill.scss

@@ -0,0 +1,17 @@
+@use 'uswds-core' as *;
+
+.usa-dark-background .pill-item__container {
+  color: color('white');
+}
+
+.pill-separate-item {
+  &:link,
+  &:visited {
+    text-decoration: none;
+    background: initial;
+  }
+}
+
+.pill-item.usa-link {
+  text-decoration: none;
+}

app/assets/sass/uswds/components/_sms-message.scss

@@ -9,13 +9,12 @@
   padding: units(2);
   background: color('gray-cool-10');
   border: 1px solid color('gray-cool-10');
-  border-radius: units(1);
+  border-radius: 5px;
   white-space: normal;
   margin: 0 0 units(1) 0;
   clear: both;
   word-wrap: break-word;
 
-  // Speech bubble arrow
   &:after {
     content: "";
     display: block;
@@ -31,7 +30,6 @@
   }
 }
 
-// Inbound messages
 .sms-message-inbound {
   .sms-message-wrapper {
     &:after {
@@ -59,7 +57,7 @@
 
 .sms-message-status {
   color: color('gray-cool-90');
-  margin: units('neg-205') units(1) units('205') units(1); // Specific spacing requirement
+  margin: units('neg-205') units(1) units('205') units(1);
 }
 
 .sms-message-status-outbound {

app/assets/sass/uswds/components/_tables.scss

@@ -0,0 +1,49 @@
+@use 'uswds-core' as *;
+
+.usa-table {
+  th {
+    border-bottom: 0;
+  }
+
+  td {
+    min-height: units(5);
+
+    div:empty::before {
+      content: '\00a0';
+    }
+  }
+}
+
+.usa-table th[data-sortable][aria-sort='ascending'],
+.usa-table th[data-sortable][aria-sort='descending'] {
+  background-color: color('blue-10');
+}
+
+.table-overflow-x-auto {
+  &.hidden {
+    display: none;
+  }
+
+  @media (max-width: units('desktop-lg')) {
+    overflow-x: auto;
+  }
+}
+
+@include at-media-max('tablet') {
+  .usa-table-container--scrollable-mobile {
+    margin: 0;
+    overflow-y: hidden;
+  }
+}
+
+.table-empty-message,
+td.table-empty-message {
+  font-size: size('body', 'sm');
+}
+
+.table-field-right-aligned a {
+  &:active:before,
+  &:focus:before {
+    box-shadow: none;
+  }
+}

app/assets/sass/uswds/components/_template-list.scss

@@ -0,0 +1,225 @@
+@use 'uswds-core' as *;
+
+.template-list-item-without-ancestors {
+  .template-list-folder,
+  .template-list-template {
+    &:active,
+    &:active::before,
+    &:focus,
+    &:focus::before {
+      background-color: transparent;
+      box-shadow: none;
+    }
+  }
+}
+
+.template-list-item-hidden-by-default {
+  display: none;
+}
+
+.folder-heading a.folder-heading-folder,
+.template-list-folder {
+  background: url(../img/material-icons/folder.svg) no-repeat;
+  background-size: units(3) units(3);
+  background-position: 0 center;
+  padding-left: units(4);
+  display: inline-flex;
+  align-items: center;
+}
+
+.folder-heading-template {
+  background: url(../img/material-icons/wysiwyg.svg) no-repeat;
+  padding-left: units(4);
+  display: inline-block;
+  background-position: 0;
+  font-weight: bold;
+  font-size: size('body', 'lg');
+}
+
+.folder-heading-folder {
+  background: url(../img/material-icons/folder_open.svg) no-repeat;
+  padding-left: units(4);
+  display: inline-block;
+  background-size: units(3) units(3);
+  background-position: 0;
+}
+
+#breadcrumb-template-folders {
+  font-weight: bold;
+  font-size: size('body', 'lg');
+
+  a {
+    font-weight: bold;
+  }
+}
+
+.copy-template {
+  .folder-heading {
+    margin: units(2) 0;
+    padding: units(1) 0;
+    border-bottom: 1px solid color('gray-cool-10');
+  }
+
+  .template-list-item {
+    display: flex;
+    align-items: center;
+
+    .template-list-folder,
+    .template-list-template {
+      margin-right: units(1);
+    }
+  }
+}
+
+.copy-template-search {
+  margin: units(2) 0;
+
+  .usa-search {
+    margin-bottom: units(1);
+  }
+}
+
+.template-list-template {
+  background: url(../img/material-icons/description.svg) no-repeat;
+  background-size: units(3) units(3);
+  background-position: 0 center;
+  padding-left: units(4);
+  display: inline-flex;
+  align-items: center;
+}
+
+.message-name-separator:before,
+.folder-heading-separator:before {
+  content: '›';
+  margin: 0 units(1);
+  color: color('gray-50');
+  font-size: size('body', 'lg');
+}
+
+.usa-checkbox.template-list-item.template-list-item-with-checkbox.template-list-item-without-ancestors {
+  display: flex;
+  flex-direction: column;
+}
+
+.usa-checkbox__label-description {
+  margin: units(2px) 0 units(1) units(4);
+}
+
+.usa-checkbox .usa-checkbox__label {
+  + a.template-list-folder {
+    margin-left: units(4);
+  }
+}
+
+.template-footer .usa-link,
+.template-content-count {
+  font-size: size('body', 'sm');
+}
+
+#template-list,
+#template-list > div,
+.sticky-scroll-area {
+  position: relative;
+}
+
+#template-list {
+  max-height: 500px;
+  overflow-y: auto;
+  padding: 0;
+  margin: units(2) 0;
+
+  ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  .template-list-item {
+    padding: units(1) 0;
+
+    &:empty {
+      display: none;
+    }
+
+    &:not(:has(a)) {
+      display: none;
+    }
+
+    &:hover {
+      background-color: color('gray-cool-5');
+      padding-left: units(1);
+      margin-left: units(-1);
+      padding-right: units(1);
+      margin-right: units(-1);
+    }
+  }
+
+  li.template-list-item.margin-bottom-2 {
+    margin-bottom: units(1);
+  }
+}
+
+.template-list-empty {
+  padding: units(3);
+  background-color: color('gray-cool-5');
+  border: 1px solid color('gray-cool-10');
+  border-radius: units(0.5);
+  text-align: center;
+  margin: units(2) 0;
+  color: color('gray-60');
+}
+
+.sticky-template-form {
+  margin: 0;
+  border: 1px solid color('gray-cool-10');
+  padding: units(2);
+  margin-bottom: units(2);
+
+  &:focus {
+    outline-offset: units(1);
+  }
+
+  .js-stick-at-bottom-when-scrolling {
+    display: block;
+
+    .usa-form-group {
+      margin-bottom: 0;
+    }
+
+    fieldset {
+      margin-bottom: 0;
+    }
+
+    .usa-fieldset {
+      margin-top: 0;
+    }
+
+    .radios-nested {
+      .usa-radio {
+        margin-top: units(1);
+        max-width: units('mobile');
+      }
+    }
+
+    .page-footer {
+      margin-top: units(3);
+      margin-bottom: 0;
+    }
+  }
+}
+
+.js-stick-at-bottom-when-scrolling {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  overflow: visible;
+
+  button {
+    margin-right: units(2);
+  }
+
+  .template-list-selected-counter {
+    position: relative;
+    top: 0;
+  }
+}

app/assets/sass/uswds/components/_textbox-highlight.scss

@@ -0,0 +1,90 @@
+@use 'uswds-core' as *;
+@use 'settings/tokens' as *;
+
+.textbox-highlight {
+  &-wrapper {
+    position: relative;
+  }
+
+  &-textbox {
+    resize: none;
+    z-index: 20;
+    background: none;
+  }
+
+  &-textbox,
+  &-background,
+  &-foreground,
+  &-mask {
+    font-size: units(2);
+    display: block;
+    box-sizing: border-box;
+    position: relative;
+    padding: 4px;
+    overflow: hidden;
+    line-height: 1.6;
+  }
+
+  &-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    color: transparent;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    border: 2px solid transparent;
+    padding-bottom: units(3);
+    z-index: 10;
+
+    @media (-ms-high-contrast: active), (forced-colors: active) {
+      border-color: Canvas;
+    }
+
+    .placeholder,
+    .placeholder-conditional {
+      background-color: #fff;
+      position: relative;
+
+      &:after {
+        content: '';
+        background-color: $color-placeholder-highlight;
+        border: 1px solid $color-placeholder-highlight;
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 5px;
+        right: 6px;
+        height: 100%;
+        border-radius: 7px;
+      }
+    }
+  }
+}
+
+.textbox-highlight-background,
+.textbox-highlight-foreground,
+.textbox-highlight-mask,
+.textbox-highlight-textbox {
+  font-size: units(2);
+  line-height: 1.2;
+  padding: units(1);
+  font-family: family('sans');
+}
+
+.placeholder,
+.placeholder-conditional {
+  background-color: $color-placeholder-highlight;
+  border: 1px solid $color-placeholder-highlight;
+  border-radius: 7px;
+  padding: 0 units(0.5);
+}
+
+.textbox-help-link {
+  margin: 10px 0 0 0;
+}
+
+.textbox-right-aligned {
+  text-align: right;
+}

app/assets/sass/uswds/components/_tooltip.scss

@@ -0,0 +1,15 @@
+@use 'uswds-core' as *;
+
+.usa-tooltip__information {
+  background: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+
+  .usa-icon {
+    width: units(3);
+    height: units(3);
+  }
+}

app/assets/sass/uswds/components/_usage.scss

@@ -0,0 +1,74 @@
+@use 'uswds-core' as *;
+
+.usage-table {
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .big-number-smallest {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .table-field,
+  .table-field-left-aligned,
+  .table-field-right-aligned {
+    width: auto;
+  }
+}
+
+.tabs {
+  .pill {
+    display: flex;
+    list-style: none;
+    padding: 0;
+
+    .pill-item__container {
+      border: 1px solid color('gray-cool-10');
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      text-align: center;
+      font-size: units(2);
+
+      a {
+        padding: units(4);
+
+        .big-number-smaller {
+          font-size: units(5);
+          line-height: units(6);
+        }
+
+        .big-number-smallest {
+          font-size: units(3);
+        }
+
+        .pill-item__label {
+          color: white;
+        }
+
+        &:not(.pill-item--selected):hover {
+          background: color('blue-warm-70v');
+
+          .pill-item__label {
+            color: white;
+          }
+        }
+
+        &.pill-item--selected {
+          .pill-item__label {
+            color: color('blue-60v');
+          }
+        }
+      }
+    }
+  }
+}
+
+.keyline-block {
+  border-left: 4px solid color('blue-60v');
+  padding-left: units(2);
+  margin: units(2) 0;
+}

app/assets/sass/uswds/components/_user-list.scss

@@ -0,0 +1,48 @@
+@use 'uswds-core' as *;
+
+.user-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 1rem 0;
+}
+
+.user-list-item {
+  border: 2px solid color('gray-5');
+  padding: units(2);
+
+  button,
+  .usa-accordion__content {
+    background-color: white;
+    border: 2px solid color('gray-5');
+  }
+
+  button:hover,
+  button[aria-expanded="true"] {
+    background-color: color('gray-5');
+  }
+
+  @include at-media(desktop) {
+    width: calc(50% - units(1));
+    margin-bottom: 1rem;
+    box-sizing: border-box;
+  }
+
+  .user-list-item-heading .live-search-relevant {
+    display: block;
+    word-wrap: break-word;
+  }
+
+  .tick-cross-list-permissions {
+    margin: units(1) 0;
+    padding-left: units(2);
+  }
+}
+
+.user-list-edit-link {
+  &:active:before,
+  &:focus:before {
+    box-shadow: none;
+    border: 0;
+  }
+}