fix(Styleguide): Clarified callout variants

src/content/docs/alerts-applied-intelligence/new-relic-alerts/advanced-alerts/understand-technical-concepts/streaming-alerts-key-terms-concepts.mdx

@@ -150,7 +150,7 @@ For example, suppose you're monitoring CPU usage in window durations of 1 minute
 
 When a CPU usage data point comes in with a timestamp between 12:00pm and 12:01pm, event flow will not aggregate that window until a data point shows up with a timestamp between 12:04pm and 12:05pm. When event flow receives the first data point with a timestamp of 12:04pm or later, it sends the 12:00 to 12:01 data to be aggregated.
 
-<Callout variant="callout-caution">
+<Callout variant="caution">
   If you expect your data points to arrive more than 30 minutes apart, please use the Event Timer method described below.
 </Callout>
 

src/content/docs/style-guide/quick-reference/callouts.mdx

@@ -13,7 +13,9 @@ Use your callouts judiciously. **Recommendation:** Skim the complete doc. If the
 
 ## Types of callouts [#classes]
 
-Here's an example of the `callout` format:
+We have a number of callout types, and each is controlled by the `variant` you include in the `<Callout>` tag.
+
+Here's an example of the format for a tip callout:
 
 ```
 <Callout variant="tip">
@@ -23,14 +25,14 @@ Here's an example of the `callout` format:
 </Callout>
 ```
 
-On our docs site, we use these callout classes:
+Here are examples of our callout variants:
 
 <CollapserGroup>
   <Collapser
     id="tr-caution"
-    title={<>Caution (<InlineCode>callout-caution</InlineCode>)</>}
+    title="Caution"
   >
-    **Cautions** scream at you that this could cause a crash or cost you data loss beyond the task at hand. Cautions use the `callout-caution` class. At a traffic light, a **Caution** would be red.
+    **Cautions** scream at you that this could cause a crash or cost you data loss beyond the task at hand. Cautions use `<Callout variant="caution">`. At a traffic light, a **Caution** would be red.
 
     <Callout variant="caution">
       Avoid disabling auto-transaction naming, because metric grouping issues will likely occur. Instead, use API calls to name your transactions.
@@ -39,9 +41,9 @@ On our docs site, we use these callout classes:
 
   <Collapser
     id="tr-important"
-    title={<>Important (<InlineCode>callout-important</InlineCode>)</>}
+    title="Important"
   >
-    **Important** notes urge awareness that this could impair the task at hand or cost you time if you ignore the text. Important notes use the `callout-important` class. At a traffic light, an **Important** note would be yellow.
+    **Important** notes urge awareness that this could impair the task at hand or cost you time if you ignore the text. Important notes use `<Callout variant="important">`. At a traffic light, an **Important** note would be yellow.
 
     <Callout variant="important">
       Custom events sent via the agent API are not compatible with high security mode.
@@ -50,9 +52,9 @@ On our docs site, we use these callout classes:
 
   <Collapser
     id="tr-tip"
-    title={<>Tip (<InlineCode>callout-tip</InlineCode>)</>}
+    title="Tip"
   >
-    **Tips** whisper to you that this is nice to know, like a shortcut, best practice, or reminder, but is unnecessary to complete the task at hand. Tips use the `callout-tip` class. At a traffic light, a **Tip** would be a green light.
+    **Tips** whisper to you that this is nice to know, like a shortcut, best practice, or reminder, but is unnecessary to complete the task at hand. Tips use `<Callout variant="tip">`. At a traffic light, a **Tip** would be a green light.
 
     <Callout variant="tip">
       If you have integrated your New Relic account with a [ticketing system](/docs/site/ticketing-integrations) such as Lighthouse, Pivotal Tracker, or Atlassian JIRA, you can use the note to file a ticket or story.
@@ -65,24 +67,9 @@ On our docs site, we use these callout classes:
   >
     For recommended wording, see [User-related language and styles](/docs/new-relic-only/basic-style-guide/style-guide-quick-reference/user-related-language-styles-recommended-phrasings).
   </Collapser>
-
-  <Collapser
-    id="tr-pricing"
-    title={<>Pricing (<InlineCode>callout-pricing</InlineCode>) <strong>Do not use.</strong></>}
-  >
-    **Pricing** callouts let you know that you may need a specific subscription level in order to access the product or feature. Pricing callouts use the `callout-pricing` class.
-
-    Typically, pricing callouts appear in the intro of a doc. See the example below for standard verbiage in the callout.
-
-    With the new pricing model, these are rarely used.
-
-    <Callout variant="tip">
-      Access to this feature depends on your [subscription level](http://newrelic.com/application-monitoring/pricing).
-    </Callout>
-  </Collapser>
   <Collapser
     id="tr-custom-callout"
-    title={<>Custom callouts</>}
+    title="Custom callouts"
   >
     Custom callouts are available for special cases, such as beta docs. Here's what you can control with custom callouts: