added new tooltip props and callout component

components/callouts.mdx

@@ -1,10 +1,10 @@
 ---
 title: 'Callouts'
 description: 'Use callouts to add eye-catching context to your content'
 icon: 'info'
 ---
 
-Callouts can be styled as a Note, Warning, Info, Tip, or Check:
+Callouts can be styled as a Note, Warning, Info, Tip, Check, Danger, or create your own callout:
 
 <Note>This adds a note in the content</Note>
 
@@ -38,14 +38,12 @@
 
 <Danger>This is a danger callout</Danger>
 
-```jsx
+```mdx
 <Danger>This is a danger callout</Danger>
 ```
 
-<RequestExample>
+<Callout icon="key" color="#FFC107" iconType="regular"> This is a custom callout</Callout>
 
-```mdx Callout Example
-<Note>This adds a note in the content</Note>
+```mdx
+<Callout icon="key" color="#FFC107" iconType="regular">This is a custom callout</Callout>
 ```
-
-</RequestExample>

components/tooltips.mdx

@@ -1,17 +1,17 @@
 ---
 title: 'Tooltips'
 description: 'Show a definition when you hover over text'
 icon: 'message-square'
 ---
 
 Tooltips are a way to show a definition when you hover over text.
 
-<Tooltip tip="This is a tooltip!">Hover over me</Tooltip> and see a tooltip in action
+<Tooltip tip="This is a tooltip!" cta="Learn more about changelogs" href="/components/update">Hover over me</Tooltip> and see a tooltip in action
 
 <RequestExample>
 
-```mdx Tooltip Example
-<Tooltip tip="This is a tooltip!">Hover over me</Tooltip>
+```mdx Tooltip Example wrap
+<Tooltip tip="This is a tooltip!" cta="Learn more about changelogs" href="/components/update">Hover over me</Tooltip>
 ```
 
 </RequestExample>