Updating Callouts to resolve following defects found in testing.

- Icon does not start at top of the page with text.

Markdoc changes the order that CSS classes get applied to child elements compared to preexisting MDX approach so some changes are required to make sure the child elements style correctly.
- Child text does not receive colors.text style for some element types.
- Child text does not receive text-sm class in some cases.

The function applyTextStyles addresses this.

docs/next/components/markdoc/Callouts.tsx

@@ -1,4 +1,4 @@
-// import * as React from 'react';
+import * as React from 'react';
 
 import Icons from '../Icons';
 
@@ -16,14 +16,25 @@ const ADMONITION_STYLES = {
     icon: Icons.About,
   },
 };
+
+const applyTextStyles = (children, colors) => {
+  return React.Children.map(children, (child) => {
+    const existingStyles = child.props.className || '';
+    const newStyles = `text-sm text-${colors.text} ${existingStyles}`;
+    return React.cloneElement(child, {className: newStyles});
+  });
+};
+
 const Admonition = ({style, children}) => {
   const {colors, icon} = ADMONITION_STYLES[style];
+  console.log(children);
   return (
     <div className={`bg-${colors.bg} border-l-4 border-${colors.borderIcon} p-4 my-4`}>
-      <div className="flex items-center">
+      <div className="flex">
+        {/* Make container for the svg element that aligns it with the top right of the parent flex container */}
         <div className="flex-shrink-0">
           <svg
-            className={`h-5 w-5 text-${colors.borderIcon}`}
+            className={`mt-.5 h-5 w-5 text-${colors.borderIcon}`}
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 25 25"
             fill="currentColor"
@@ -32,8 +43,8 @@ const Admonition = ({style, children}) => {
             {icon && icon}
           </svg>
         </div>
-        <div className="ml-3">
-          <span className={`text-sm text-${colors.text}`}>{children}</span>
+        <div className="flex-shrink-1 ml-3">
+          <div className="admonition"> {applyTextStyles(children, colors)} </div>
         </div>
       </div>
     </div>

docs/next/styles/globals.css

@@ -608,3 +608,13 @@ dl, dl * {
 td {
   word-break:break-word
 }
+
+/* These classes make sure the .prose p margins don't make the admonition look bad. */
+
+.admonition > :first-child {
+  margin-top: 0;
+}
+
+.admonition > :last-child {
+  margin-bottom: 0;
+}