Align props with figma

app/components/Alert/Alert.container.tsx

@@ -3,16 +3,20 @@
 import { memo } from "react";
 import { AlertView } from "./Alert.view";
 import type { AlertProps } from "./Alert.types";
+import { normalizeAlertStatus, normalizeAlertType } from "../../../lib/propNormalization";
 
 const AlertContainer = memo<AlertProps>(
   ({
     title,
     description,
-    status = "default",
-    type = "toast",
+    status: statusProp = "default",
+    type: typeProp = "toast",
     onClose,
     className = "",
   }) => {
+    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
+    const status = normalizeAlertStatus(statusProp);
+    const type = normalizeAlertType(typeProp);
     // Determine background and border colors based on status and type
     const getStatusStyles = () => {
       switch (status) {

app/components/Alert/Alert.types.ts

@@ -1,8 +1,28 @@
+export type AlertStatusValue =
+  | "default"
+  | "positive"
+  | "warning"
+  | "danger"
+  | "Default"
+  | "Positive"
+  | "Warning"
+  | "Danger";
+
+export type AlertTypeValue = "toast" | "banner" | "Toast" | "Banner";
+
 export interface AlertProps {
   title: string;
   description?: string;
-  status?: "default" | "positive" | "warning" | "danger";
-  type?: "toast" | "banner";
+  /**
+   * Alert status. Accepts both lowercase and PascalCase (case-insensitive).
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   */
+  status?: AlertStatusValue;
+  /**
+   * Alert type. Accepts both lowercase and PascalCase (case-insensitive).
+   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   */
+  type?: AlertTypeValue;
   onClose?: () => void;
   className?: string;
 }