fix: ensure alerts are animated correctly with new framer-motion

This commit is basically a copy of the changes in
d071be0 and
d0bcf4d, but in Alert.tsx.

Prior to this commit alerts would be rendered with opacity 0, making
them completely invisible to a user. These tests still worked because
the elements were in the DOM, but they did render as visible elements.

With these changes, alerts render visibly again.

src/components/views/Alert/Alert.stories.tsx

@@ -1,6 +1,6 @@
 import { useDisclosure } from "@einride/hooks"
 import { Meta, StoryObj } from "@storybook/react"
-import { expect, userEvent, within } from "@storybook/test"
+import { expect, userEvent, waitFor, within } from "@storybook/test"
 import { PrimaryButton } from "../../controls/buttons/PrimaryButton/PrimaryButton"
 import { Alert } from "./Alert"
 
@@ -55,7 +55,9 @@ export const Pointer = {
     await expect(openButton).toHaveStyle("pointer-events: none")
     const secondaryButton = canvas.getByRole("button", { name: "Secondary" })
     await userEvent.click(secondaryButton)
-    await expect(alert).not.toBeInTheDocument()
+    await waitFor(async () => {
+      await expect(alert).not.toBeInTheDocument()
+    })
   },
 } satisfies StoryObj
 
@@ -75,6 +77,8 @@ export const Keyboard = {
     const secondaryButton = canvas.getByRole("button", { name: "Secondary" })
     await expect(secondaryButton).toHaveFocus()
     await userEvent.keyboard("[Enter]")
-    await expect(alert).not.toBeInTheDocument()
+    await waitFor(async () => {
+      await expect(alert).not.toBeInTheDocument()
+    })
   },
 } satisfies StoryObj

src/components/views/Alert/Alert.tsx

@@ -73,71 +73,67 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
   ) => {
     return (
       <AnimatePresence>
-        <AlertDialog.Root open={isOpen}>
-          <AlertDialog.Portal>
-            <AlertDialogOverlay
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              initial={{ opacity: 0 }}
-              {...overlayProps}
-            />
-            <AlertDialogContent
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              initial={{ opacity: 0 }}
-              onEscapeKeyDown={closeHandler}
-              {...props}
-              ref={forwardedRef}
-            >
-              {title && (
-                <AlertDialog.Title asChild>
-                  <Text>{title}</Text>
-                </AlertDialog.Title>
-              )}
-              {description && (
-                <AlertDialog.Description asChild>
-                  <Text color="secondary">{description}</Text>
-                </AlertDialog.Description>
-              )}
-              {children && <Box>{children}</Box>}
-              <VerticalSpacing size="xl" />
-              <VerticalSpacing size="md" />
-              <Box display="flex" flexDirection="column" gap="sm">
-                {primaryAction && (
-                  <AlertDialog.Action asChild>
-                    <PrimaryButton {...primaryAction} isFullWidth onClick={primaryAction.onClick}>
-                      {primaryAction.children}
-                    </PrimaryButton>
-                  </AlertDialog.Action>
-                )}
-                {secondaryAction && (
-                  <AlertDialog.Cancel asChild>
-                    <SecondaryButton
-                      {...secondaryAction}
-                      isFullWidth
-                      onClick={secondaryAction.onClick}
-                    >
-                      {secondaryAction.children}
-                    </SecondaryButton>
-                  </AlertDialog.Cancel>
-                )}
-              </Box>
-            </AlertDialogContent>
-          </AlertDialog.Portal>
-        </AlertDialog.Root>
+        {isOpen && (
+          <AlertDialog.Root open={isOpen}>
+            <AlertDialog.Portal>
+              <motion.div animate={{ opacity: 1 }} exit={{ opacity: 0 }} initial={{ opacity: 0 }}>
+                <AlertDialogOverlay {...overlayProps} />
+                <AlertDialogContent onEscapeKeyDown={closeHandler} {...props} ref={forwardedRef}>
+                  {title && (
+                    <AlertDialog.Title asChild>
+                      <Text>{title}</Text>
+                    </AlertDialog.Title>
+                  )}
+                  {description && (
+                    <AlertDialog.Description asChild>
+                      <Text color="secondary">{description}</Text>
+                    </AlertDialog.Description>
+                  )}
+                  {children && <Box>{children}</Box>}
+                  <VerticalSpacing size="xl" />
+                  <VerticalSpacing size="md" />
+                  <Box display="flex" flexDirection="column" gap="sm">
+                    {primaryAction && (
+                      <AlertDialog.Action asChild>
+                        <PrimaryButton
+                          {...primaryAction}
+                          isFullWidth
+                          onClick={primaryAction.onClick}
+                        >
+                          {primaryAction.children}
+                        </PrimaryButton>
+                      </AlertDialog.Action>
+                    )}
+                    {secondaryAction && (
+                      <AlertDialog.Cancel asChild>
+                        <SecondaryButton
+                          {...secondaryAction}
+                          isFullWidth
+                          onClick={secondaryAction.onClick}
+                        >
+                          {secondaryAction.children}
+                        </SecondaryButton>
+                      </AlertDialog.Cancel>
+                    )}
+                  </Box>
+                </AlertDialogContent>
+              </motion.div>
+            </AlertDialog.Portal>
+          </AlertDialog.Root>
+        )}
       </AnimatePresence>
     )
   },
 )
 
-const AlertDialogOverlay = styled(motion(AlertDialog.Overlay))`
+const AlertDialogOverlay = styled(AlertDialog.Overlay)`
   position: fixed;
   inset: 0;
   background: ${({ theme }) => theme.colors.background.focus};
   z-index: ${zIndex.alert - 10}; // below but close to alert
 `
 
-const AlertDialogContent = styled(motion(AlertDialog.Content))`
+const AlertDialogContent = styled(AlertDialog.Content)`
   position: fixed;
   inset-block-start: 50%;
   inset-inline-start: 50%;