docs: Fix typos (#1111)

.changeset/docs-typos.md

@@ -0,0 +1,5 @@
+---
+'react-magma-docs': patch
+---
+
+Update typos

website/react-magma-docs/src/pages/design/alert.mdx

@@ -80,7 +80,7 @@ Indicates that a system process completed successfully.
 
 ### Warning
 
-Indicates that something isn't quite right, but there wasn't an error.
+Indicates that something is not quite right, but there wasn't an error.
 
 <Alert variant="warning">Umm, something's not quite right here.</Alert>
 
@@ -106,7 +106,7 @@ Inline alerts are embedded within the content of a page. They can provide the us
   <img src="../../images/alerts/inline-alert-example.png" alt="" />
 </figure>
 
-If an inline alert is being used to communicate some general information to the user, then you can choose to allow them to dismiss the alert to get it out of their way. However, error messages are typically not dismissable by the user and persist until the issue is fixed either by the user or the system.
+If an inline alert is being used to communicate some general information to the user, then you can choose to allow them to dismiss the alert to get it out of their way. However, error messages are typically not dismissible by the user and persist until the issue is fixed either by the user or the system.
 
 <figure>
   <img src="../../images/alerts/inline-alert-example-2.png" alt="" />

website/react-magma-docs/src/pages/design/checkboxes.mdx

@@ -10,10 +10,10 @@ import { LeadParagraph } from '../../components/LeadParagraph';
 <PageContent componentName="checkbox" type="design">
 
 <LeadParagraph>
-  A checkbox is an input control that allows a user to select one or more options from a number of choices.
+  A checkbox is an input control that allows a user to select one or more
+  options from a number of choices.
 </LeadParagraph>
 
-
 ## Usage
 
 Use checkboxes to:
@@ -91,7 +91,7 @@ The default color used for checked checkboxes is primary-500 from the Magma pale
         <figcaption>
           <p class="title title-incorrect">Incorrect</p>
           <p>
-            Don't use multiple colors in the same UI. Pick one and stick with
+            Do not use multiple colors in the same UI. Pick one and stick with
             it.
           </p>
         </figcaption>
@@ -106,7 +106,7 @@ The default color used for checked checkboxes is primary-500 from the Magma pale
         <figcaption>
           <p class="title title-incorrect">Incorrect</p>
           <p>
-            If you're going to change the color, don't use a neutral color. This
+            If you are going to change the color, don't use a neutral color. This
             could be confused with a checkbox that is checked and disabled.
           </p>
         </figcaption>

website/react-magma-docs/src/pages/design/combobox.mdx

@@ -15,7 +15,7 @@ import { LeadParagraph } from '../../components/LeadParagraph';
 
 ## Usage
 
-The list is designed to help the user arrive at a value, but the value does not necessarily have to come from that list. Don't think of it like a Select, but more of a text input with some suggestions.
+The list is designed to help the user arrive at a value, but the value does not necessarily have to come from that list. Do not think of it like a Select, but more of a text input with some suggestions.
 
 ![](../../images/inputs/combobox-example.png)
 

website/react-magma-docs/src/pages/design/indeterminate.mdx

@@ -15,7 +15,7 @@ import { LeadParagraph } from '../../components/LeadParagraph';
 
 ## Usage
 
-Use the indeterminate state when the checkbox contains a sublist of selections, some of which are selected, and some unselected.
+Use the indeterminate state when the checkbox contains a sub list of selections, some of which are selected, and some unselected.
 
 View the <Link to="/design/checkboxes/">documentation for checkboxes</Link> for more details.
 

website/react-magma-docs/src/pages/design/input.mdx

@@ -71,7 +71,7 @@ View <Link to="/api/textarea/">component API</Link> for text areas.
 
 ### Password
 
-Use this input when you want keep the user's password masked for security.
+Use this input when you want to keep the user's password masked for security.
 
 View the <Link to="/design/password-input/">password input documentation</Link> for more detail.
 

website/react-magma-docs/src/pages/design/password-input.mdx

@@ -10,7 +10,7 @@ import { Link } from 'gatsby';
 <PageContent componentName="password_input" type="design">
 
 <LeadParagraph>
-  Use the password input when you want keep the user's password masked for security.
+  Use the password input when you want to keep the user's password masked for security.
 </LeadParagraph>
 
 <figure>

website/react-magma-docs/src/pages/design/tag.mdx

@@ -96,7 +96,7 @@ A leading icon may be added to the tag. This can help clarify the meaning of a t
 
 ---
 
-## Dismissable Tags
+## Dismissible Tags
 
 Tags can include a close button on the right side. Using this close button completely removes it from the UI. This can be especially useful for something like search filters. In this scenario, a tag could be used when applying a filter to a list of search results, and then dismissing the tag removes the filter.
 

website/react-magma-docs/src/pages/design/toast.mdx

@@ -83,7 +83,7 @@ Avoid displaying errors or warnings with toasts, but if you have to, then these
           <p class="title title-correct">Correct</p>
           <p>
             Toasts displaying error messages or warnings should only be manually
-            dismissable.
+            dismissible.
           </p>
         </figcaption>
       </figure>

website/react-magma-docs/src/pages/design/toggle.mdx

@@ -13,7 +13,7 @@ import { LeadParagraph } from '../../components/LeadParagraph';
 
 ## Usage
 
-Toggle switches are a great way to adjust settings when you're simply turning something on and off. The option that the switch controls, as well as the state it's in, should be made clear from the corresponding inline label.
+Toggle switches are a great way to adjust settings when you are simply turning something on and off. The option that the switch controls, as well as the state it is in, should be made clear from the corresponding inline label.
 
 <figure>
   <div class="image-container">