Use gap CSS property for multi-select input

Author: ericgio

docs/Upgrading.md

@@ -20,6 +20,9 @@ The following HOCs were deprecated in a previous version and have been removed:
 ### Drop support for Bootstrap 4
 Bootstrap 5 is now over 3 years old. BS4 should still mostly work, but you may need to add some custom CSS in a few cases.
 
+### Use `gap` CSS property in multi-select component
+The use of `gap` in flexbox is [widely supported](https://caniuse.com/flexbox-gap) and much cleaner than using negative margins.
+
 ## v6.0 Breaking Changes
 
 ### `"small"` and `"large"` are no longer valid `size` values

styles/Typeahead.scss

@@ -98,14 +98,9 @@ $rbt-placeholder-color: #6c757d !default;
     align-items: flex-start;
     display: flex;
     flex-wrap: wrap;
-    margin-bottom: -4px;
-    margin-top: -1px;
+    gap: 0.25rem;
     overflow: hidden;
   }
-
-  .rbt-input-main {
-    margin: 1px 0 4px;
-  }
 }
 
 /**
@@ -147,8 +142,6 @@ $rbt-token-active-color: $rbt-color-white !default;
   color: $rbt-token-color;
   display: inline-flex;
   line-height: 1rem;
-  // TODO: Use `gap` when it's better supported
-  margin: 1px 3px 2px 0;
 
   .rbt-token-label {
     padding: 0.25rem 0.5rem;