Inverted alert variant

<script setup lang="ts">
import { Alert, AlertAction, AlertDescription, AlertTitle } from "@/components/reui/alert"
import { Frame, FramePanel } from "@/components/reui/frame"
import { Button } from "@/components/ui/button"
</script>

<template>
  <div class="mx-auto mb-auto w-full max-w-lg">
    <Frame>
      <FramePanel class="overflow-hidden p-0!">
        <Alert variant="invert" class="border-0 shadow-none">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
            class="lucide lucide-zap text-yellow-500"
          >
            <path
              d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"
            />
          </svg>
          <AlertTitle>Pro Feature</AlertTitle>
          <AlertAction>
            <Button
              variant="outline"
              size="xs"
              class="bg-background/10 border-border/10"
            >
              Dismiss
            </Button>
            <Button
              size="xs"
              class="border-blue-800 bg-blue-500 text-white hover:border-blue-900 hover:bg-blue-600"
            >
              Upgrade
            </Button>
          </AlertAction>
          <AlertDescription>
            This feature is only available for Pro users. Upgrade your plan to
            get access.
          </AlertDescription>
        </Alert>
      </FramePanel>
    </Frame>
  </div>
</template>