feat: add callout component to docs

docs/api.mdx

@@ -7,6 +7,7 @@ import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 
 import { QuickLinks } from "@site/src/components/api/QuickLinks.tsx";
+import { Callout, Callouts } from "@site/src/components/shared/Callout";
 
 # API Reference
 
@@ -61,8 +62,10 @@ go get github.com/Basis-Theory/basistheory-go/v3
 
 Our SDKs enable you to quickly and easily integrate with the API. Select one of the language tabs to see instructions on how to install the SDK and view code examples in that language.
 
-:::info
-
-If you don't see your language listed, [contact us](mailto:support@basistheory.com?subject=API%20SDK%20Language%20Support) about getting an official SDK added in your preferred language.
-
-:::
+<Callout type={Callouts.INFO}>
+  If you don't see your language listed,{" "}
+  <a href="mailto:support@basistheory.com?subject=API%20SDK%20Language%20Support">
+    contact us
+  </a>{" "}
+  about getting an official SDK added in your preferred language.
+</Callout>

docs/api/applications/applications.mdx

@@ -6,10 +6,11 @@ import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 
 import {
-HttpMethod,
-HttpMethods,
+  HttpMethod,
+  HttpMethods,
 } from "@site/src/components/shared/HttpMethod";
 import { Permission } from "@site/src/components/shared/Permission";
+import { Callout, Callouts } from "@site/src/components/shared/Callout";
 
 # Applications
 
@@ -57,12 +58,13 @@ Application. Below, we describe each Application Type and how to choose between
 
 See [Access Rules](/docs/concepts/access-controls#what-are-access-rules) for more information.
 
-:::info
-
-`container` is only required for `public` and `private` applications,
-whilst `conditions` is only required for `expiring` ones. They are mutually exclusive.
-
-:::
+<Callout type={Callouts.INFO}>
+  <code>container</code> is only required for <code>public</code> and{" "}
+  <code>private</code>
+  applications, whilst <code>conditions</code> is only required for <code>
+    expiring
+  </code> ones. They are mutually exclusive.
+</Callout>
 
 #### Access Rule Transforms
 
@@ -697,11 +699,10 @@ Regenerate the API key for an application.
   endpoint="https://api.basistheory.com/applications/{id}/regenerate"
 />
 
-:::caution
-
-Regenerating the API key for an application will immediately invalidate the previous API key associated with the application.
-
-:::
+<Callout
+  type={Callouts.WARNING}
+  content="Regenerating the API key for an application will immediately invalidate the previous API key associated with the application."
+/>
 
 #### Permissions
 

docs/api/authentication.mdx

@@ -4,6 +4,7 @@ title: Authentication
 
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
+import { Callout, Callouts } from "@site/src/components/shared/Callout";
 
 # Authentication
 
@@ -13,11 +14,11 @@ Basis Theory requires the API key to be included in all API requests to the serv
 
 `BT-API-KEY: key_N88mVGsp3sCXkykyN2EFED`
 
-:::info
-
-You must replace `key_N88mVGsp3sCXkykyN2EFED` with your API key supplied when you [created an Application](/docs/api/applications#create-application).
-
-:::
+<Callout type={Callouts.INFO}>
+  You must replace <code>key_N88mVGsp3sCXkykyN2EFED</code> with your API key
+  supplied when you{" "}
+  <a href="/docs/api/applications#create-application">created an Application</a>.
+</Callout>
 
 ### Request
 

docs/api/proxies/invoke-proxy.mdx

@@ -7,6 +7,7 @@ import {
   HttpMethods,
 } from "@site/src/components/shared/HttpMethod";
 import { Permission } from "@site/src/components/shared/Permission";
+import { Callout, Callouts } from "@site/src/components/shared/Callout";
 
 # Invoke Proxy
 
@@ -198,11 +199,14 @@ then the following request body will be sent to the destination:
 The `token:use` permission is required in order to detokenize tokens within a proxy request.
 At most, 100 tokens may be detokenized within a single proxy request. You can find more information about the supported detokenization expressions [here](/docs/expressions/detokenization).
 
-:::info
-
-For more detailed examples about how to detokenize within the Proxy, check out our [Detokenization Examples](/docs/expressions/detokenization#examples).
-
-:::
+<Callout type={Callouts.INFO}>
+  For more detailed examples about how to detokenize within the Proxy, check out
+  our{" "}
+  <a href="/docs/expressions/detokenization#examples">
+    Detokenization Examples
+  </a>
+  .
+</Callout>
 
 ## Proxy Responses
 
@@ -214,8 +218,11 @@ If an error occurs within the proxy (eg. missing or invalid `BT-PROXY-URL` heade
 | ------------- | ----- | ---------------------------------------- |
 | `proxy_error` | _any_ | A standard Basis Theory [error](#errors) |
 
-:::note
-
-If you are interested in using the proxy and your use case is not currently supported, please [submit a feature request](mailto:support@basistheory.com?subject=Proxy%20Feature%20Request)!
-
-:::
+<Callout type={Callouts.INFO}>
+  If you are interested in using the proxy and your use case is not currently
+  supported, please{" "}
+  <a href="mailto:support@basistheory.com?subject=Proxy%20Feature%20Request">
+    submit a feature request
+  </a>
+  !
+</Callout>

docs/api/reactors/reactors.mdx

@@ -10,6 +10,7 @@ import {
   HttpMethods,
 } from "@site/src/components/shared/HttpMethod";
 import { Permission } from "@site/src/components/shared/Permission";
+import { Callout, Callouts } from "@site/src/components/shared/Callout";
 
 # Reactors
 
@@ -911,8 +912,11 @@ a single complex token that contains several of the request parameters.
 
 At most, 100 tokens may be detokenized within a single Reactor request.
 
-:::info
-
-For more detailed examples about how to detokenize within Reactors, check out our [Detokenization Examples](/docs/expressions/detokenization#examples).
-
-:::
+<Callout type={Callouts.INFO}>
+  For more detailed examples about how to detokenize within Reactors, check out
+  our{" "}
+  <a href="/docs/expressions/detokenization#examples">
+    Detokenization Examples
+  </a>
+  .
+</Callout>

docs/api/tenants/tenants.mdx

@@ -10,6 +10,7 @@ import {
   HttpMethods,
 } from "@site/src/components/shared/HttpMethod";
 import { Permission } from "@site/src/components/shared/Permission";
+import { Callout, Callouts } from "@site/src/components/shared/Callout";
 
 # Tenants
 
@@ -48,11 +49,10 @@ Tenants provide a way to logically group your Applications and tokens. Common us
 | `included_monthly_active_tokens` | _long_                                                          | Number of included monthly active tokens for the billing plan               |
 | `monthly_active_tokens`          | _long_                                                          | Number of tokens that have been created, read, or used in the current month |
 
-:::info
-
-To learn more about Monthly Active Tokens (MATs), check out [our guide](/docs/concepts/what-are-mats/).
-
-:::
+<Callout type={Callouts.INFO}>
+  To learn more about Monthly Active Tokens (MATs), check out{" "}
+  <a href="/docs/concepts/what-are-mats/">our guide</a>.
+</Callout>
 
 ### Token Type Metrics Object
 

docs/api/tokens/search.mdx

@@ -10,6 +10,7 @@ import {
   HttpMethods,
 } from "@site/src/components/shared/HttpMethod";
 import { Permission } from "@site/src/components/shared/Permission";
+import { Callout, Callouts } from "@site/src/components/shared/Callout";
 
 # Search Tokens
 
@@ -241,11 +242,15 @@ Multiple terms may be combined using the `AND`, `OR` and `NOT` operators (case s
   (type:social_security_number AND !metadata.user_id:1234) OR data:111-11-1111
 ```
 
-:::info
-
-The supported Lucene syntax is currently limited to the operations documented above, and not all standard Lucene syntax is supported. If you would like to have support for any additional Lucene features, please [let us know](mailto:support@basistheory.com?subject=Token%20Search%20Feature%20Request).
-
-:::
+<Callout type={Callouts.INFO}>
+  The supported Lucene syntax is currently limited to the operations documented
+  above, and not all standard Lucene syntax is supported. If you would like to
+  have support for any additional Lucene features, please{" "}
+  <a href="mailto:support@basistheory.com?subject=Token%20Search%20Feature%20Request">
+    let us know
+  </a>
+  .
+</Callout>
 
 ### Searchable Token Fields
 

docs/api/tokens/token-associations.mdx

@@ -10,6 +10,7 @@ import {
   HttpMethods,
 } from "@site/src/components/shared/HttpMethod";
 import { Permission } from "@site/src/components/shared/Permission";
+import { Callout, Callouts } from "@site/src/components/shared/Callout";
 
 # Token Associations
 
@@ -39,11 +40,10 @@ Creating an association between two existing tokens requires read permission on
 | `parent_id` | true     | _string_ | `null`  | The ID of the parent token |
 | `child_id`  | true     | _string_ | `null`  | The ID of the child token  |
 
-:::info
-
-Bi-directional associations can be made between two tokens by creating a token association and swapping the `parent_id` and `child_id`.
-
-:::
+<Callout type={Callouts.INFO}>
+  Bi-directional associations can be made between two tokens by creating a token
+  association and swapping the <code>parent_id</code> and <code>child_id</code>.
+</Callout>
 
 <Tabs className="bt-tabs" groupId="languages">
   <TabItem value="shell" label="cURL">

docs/api/tokens/tokens.mdx

@@ -10,6 +10,7 @@ import {
   HttpMethods,
 } from "@site/src/components/shared/HttpMethod";
 import { Permission } from "@site/src/components/shared/Permission";
+import { Callout, Callouts } from "@site/src/components/shared/Callout";
 
 # Tokens
 
@@ -63,13 +64,16 @@ An expired token is **deleted** from the tenant up to **1 hour** after it's expi
 | `DateTime` String w/ Offset | 8/26/2030 7:23:57 PM -07:00 |
 | `ShortDate` String          | 9/27/2030                   |
 
-:::info
-
-If an offset is not provided with the `DateTime` string, it's considered that the provided time is in **UTC**.
-
-When using the `ShortDate` format, the expiration time will be set as **12AM UTC**.
-
-:::
+<Callout type={Callouts.INFO}>
+  <p>
+    If an offset is not provided with the <code>DateTime</code> string, it's
+    considered that the provided time is in <b>UTC</b>.
+  </p>
+  <p>
+    When using the <code>ShortDate</code> format, the expiration time will be
+    set as <b>12AM UTC</b>.
+  </p>
+</Callout>
 
 ## Create Token
 
@@ -238,17 +242,17 @@ func main() {
   </TabItem>
 </Tabs>
 
-:::caution
-
-Never reveal sensitive information in the <code>id</code> of your token. See the documentation on [Aliasing](/docs/expressions/aliasing#best-practices) to learn more about best practices when specifying your own token ID.
-
-:::
-
-:::caution
-
-Never store sensitive plaintext information in the `metadata` of your token.
+<Callout type={Callouts.WARNING}>
+  Never reveal sensitive information in the <code>id</code> of your token. See
+  the documentation on{" "}
+  <a href="/docs/expressions/aliasing#best-practices">Aliasing</a> to learn more
+  about best practices when specifying your own token ID.
+</Callout>
 
-:::
+<Callout type={Callouts.WARNING}>
+  Never store sensitive plaintext information in the <code>metadata</code> of
+  your token.
+</Callout>
 
 ### Response
 
@@ -517,11 +521,22 @@ Update an existing token for the Tenant.
 
 <Permission content="token:update" />
 
-:::info
-
-The Update Tokens endpoint uses a different content-type to support merge-patch operations. Requests need the `Content-Type` header to be set to `application/merge-patch+json`. Requests made with a different Content-Type header value will receive a `415 Unsupported Media Type` response code. For more information on merge-patch, see [RFC 7386](https://datatracker.ietf.org/doc/html/rfc7386).
-
-:::
+<Callout type={Callouts.INFO}>
+  The Update Tokens endpoint uses a different content-type to support
+  merge-patch operations. Requests need the <code>Content-Type</code> header to
+  be set to <code>application/merge-patch+json</code>. Requests made with a
+  different <code>Content-Type</code> header value will receive a{" "}
+  <code>415 Unsupported Media Type</code> response code. For more information on
+  merge-patch, see{" "}
+  <a
+    href="https://datatracker.ietf.org/doc/html/rfc7386"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    RFC 7386
+  </a>
+  .
+</Callout>
 
 ### Request
 
@@ -683,11 +698,12 @@ Returns the updated [token](#token-object) if successful. Returns [an error](/do
 }
 ```
 
-:::info
-
-If the updated token results in a duplicate of an existing token and the application does not have the original token's read permission, the `data`, `metadata`, `fingerprint_expression`, `search_indexes` and `mask` attributes will be redacted.
-
-:::
+<Callout type={Callouts.INFO}>
+  If the updated token results in a duplicate of an existing token and the
+  application does not have the original token's read permission, the{" "}
+  <code>data</code>,<code>metadata</code>, <code>fingerprint_expression</code>,{" "}
+  <code>search_indexes</code> and <code>mask</code> attributes will be redacted.
+</Callout>
 
 ## Delete Token
 
@@ -702,11 +718,10 @@ Delete a token by ID in the Tenant.
 
 <Permission content="token:delete" />
 
-:::caution
-
-The data associated with a deleted token will be removed forever. The reference will still exist for audit purposes.
-
-:::
+<Callout type={Callouts.WARNING}>
+  The data associated with a deleted token will be removed forever. The
+  reference will still exist for audit purposes.
+</Callout>
 
 ### Request