Update icons in Alert component

Author: Brijesh Bittu

docs/src/components/Alert.tsx

@@ -1,25 +1,27 @@
 import * as React from 'react';
 
-import { InfoIcon } from 'docs/icons/InfoIcon';
-import { LightBulbIcon } from 'docs/icons/LightBulbIcon';
+import { InfoIcon, LightbulbIcon, TriangleAlertIcon, NotebookTextIcon } from 'lucide-react';
+
 import { AlertRoot, AlertTitle } from './Alert.pigment';
 
 type AlertProps = {
   type: 'important' | 'info' | 'tip' | 'note';
   children?: React.ReactNode;
 };
 
-const Icon: Partial<Record<AlertProps['type'], React.ReactNode>> = {
-  important: <InfoIcon />,
-  tip: <LightBulbIcon />,
+const IconMap: Partial<Record<AlertProps['type'], typeof InfoIcon>> = {
+  important: TriangleAlertIcon,
+  info: InfoIcon,
+  tip: LightbulbIcon,
+  note: NotebookTextIcon,
 };
 
 export function Alert({ type = 'info', children }: AlertProps) {
-  const icon = Icon[type];
+  const Icon = IconMap[type];
   return (
     <AlertRoot variant={type}>
       <AlertTitle>
-        {icon}
+        {!!Icon && <Icon width={16} height={16} />}
         <strong>{type}</strong>
       </AlertTitle>
       {children}

docs/src/icons/InfoIcon.tsx

@@ -37,6 +37,10 @@ export const nav: NavItem[] = [
         label: 'Styling',
         href: '/features/styling',
       },
+      {
+        label: 'Composition',
+        href: '/features/composition',
+      },
       {
         label: 'Theming',
         href: '/features/theming',

docs/src/icons/LightBulbIcon.tsx

@@ -21,7 +21,7 @@ export const rehypeGithubAlert: Pluggable = () => {
         const regex = new RegExp(`^\\[!(?<type>${ALERT_TYPES.join('|')})\\]`, 'gi');
         const match = regex.exec(firstText.value as string);
         if (match) {
-          firstText.value = (firstText.value as string).replace(regex, '').trim();
+          firstText.value = (firstText.value as string).replace(regex, '');
         }
         node.type = 'mdxJsxFlowElement';
         node.name = 'Alert';