feat: basic Alert component

package.json

@@ -50,6 +50,7 @@
     "@changesets/changelog-github": "0.5.0",
     "@changesets/cli": "2.27.1",
     "@evilmartians/harmony": "1.2.0",
+    "@heroicons/react": "2.0.18",
     "@rollup/plugin-babel": "6.0.4",
     "@rollup/plugin-typescript": "11.1.5",
     "@storybook/addon-a11y": "7.6.4",

src/components/Alert.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Alert } from "./Alert";
+
+const meta = {
+  component: Alert,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Alert>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic = {
+  args: {
+    children:
+      "An alert displays a brief, important message, usually at the top of a page. Only text content updates are conveyed to screen readers, preserving focus.",
+  },
+} satisfies Story;

src/components/Alert.tsx

@@ -0,0 +1,17 @@
+import { InformationCircleIcon } from "@heroicons/react/24/solid";
+
+export interface AlertProps {
+  children?: React.ReactNode;
+}
+
+export function Alert({ children }: AlertProps) {
+  return (
+    <div
+      role="alert"
+      className="grid grid-cols-[auto_1fr] gap-x-2 rounded-2xl bg-ui-neutral-1 p-4 text-base text-ui-neutral-5"
+    >
+      <InformationCircleIcon className="h-6 w-6" />
+      {children}
+    </div>
+  );
+}