Add mdx info support

docs/components/MdxElements/MdxElements.tsx

@@ -4,6 +4,7 @@ import type { MDXComponents } from 'mdx/types';
 import { Anchor, Code, Image, Title } from '@mantine/core';
 import { Demo } from '@mantinex/demo';
 import { CodeHighlight } from '@mantinex/shiki';
+import { MdxInfo } from '../MdxInfo/MdxInfo';
 import classes from './MdxElements.module.css';
 
 export function MdxTitle({
@@ -72,6 +73,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
     p: MdxParagraph,
     a: MdxLink,
     code: Code as any,
+    blockquote: MdxInfo,
     h1: h(1),
     h2: h(2),
     h3: h(3),

docs/components/MdxInfo/MdxInfo.module.css

@@ -0,0 +1,62 @@
+.root {
+  margin-top: calc(var(--mantine-spacing-xl) * 1.5);
+  margin-bottom: var(--mantine-spacing-lg);
+
+  & > p {
+    line-height: 1.65;
+    font-size: rem(15px);
+  }
+
+  /* Considered to be a heading of the info */
+  & > p > strong:only-child {
+    font-family: var(--docs-font-primary);
+    font-size: var(--mantine-font-size-lg);
+
+    @mixin light {
+      color: var(--mantine-color-black);
+    }
+
+    @mixin dark {
+      color: var(--mantine-color-white);
+    }
+
+    & > code {
+      font-size: 80%;
+    }
+  }
+
+  & > p:first-of-type {
+    margin-top: 0;
+  }
+
+  & > p:last-of-type {
+    margin-bottom: 0;
+  }
+
+  & :global(.mantine-Code-root) {
+    @mixin light {
+      background-color: var(--docs-bq-code-bg-light);
+    }
+
+    @mixin dark {
+      background-color: var(--docs-bq-code-bg-dark);
+    }
+  }
+
+  & :global(.mantine-CodeHighlight-root) {
+    margin-top: var(--mantine-spacing-md);
+
+    @mixin light {
+      background-color: var(--mantine-color-white);
+    }
+
+    @mixin dark {
+      background-color: var(--mantine-color-dark-7);
+    }
+  }
+}
+
+.icon {
+  width: rem(28px);
+  height: rem(28px);
+}

docs/components/MdxInfo/MdxInfo.tsx

@@ -0,0 +1,20 @@
+import { IconInfoCircle } from '@tabler/icons-react';
+import cx from 'clsx';
+import { Blockquote, BlockquoteProps, rgba, useMantineTheme } from '@mantine/core';
+import classes from './MdxInfo.module.css';
+
+export function MdxInfo({ className, ...others }: BlockquoteProps) {
+  const theme = useMantineTheme();
+  return (
+    <Blockquote
+      className={cx(classes.root, className)}
+      icon={<IconInfoCircle className={classes.icon} />}
+      radius="md"
+      __vars={{
+        '--docs-bq-code-bg-light': rgba(theme.colors.blue[6], 0.2),
+        '--docs-bq-code-bg-dark': rgba(theme.colors.blue[4], 0.2),
+      }}
+      {...others}
+    />
+  );
+}

docs/docs.mdx

@@ -16,3 +16,22 @@ import * as demos from './demos';
 ## Other subtitle
 
 Other content
+
+> **Note:** This is a note
+> You can use markdown in this block as well
+>
+> - List item 1
+> - List item 2
+>   As well as links: [Mantine](https://mantine.dev)
+>
+> And inline code `npm install mantine`
+>
+> And code blocks:
+>
+> ```tsx
+> import { Button } from '@mantine/core';
+>
+> function App() {
+>   return <Button>Hello</Button>;
+> }
+> ```