const img = "https://www.figma.com/api/mcp/asset/cf7c6179-28b5-49a3-80b1-a10b84620bee"; const imgSubtract = "https://www.figma.com/api/mcp/asset/3dfa5c0f-f9f6-4679-b66f-08f9aeaa1553"; const imgUnion = "https://www.figma.com/api/mcp/asset/4b2c22ef-2ba7-43b9-95dd-1bb5c4e7b903"; const img1 = "https://www.figma.com/api/mcp/asset/556bb417-b0eb-4ee6-9479-9ad622fd4bd7"; const img2 = "https://www.figma.com/api/mcp/asset/4804ee79-6f1a-414e-8e54-06d138b4fadf"; function IconMessageInfo2({ className }: { className?: string }) { return (
); } type PromptMessageProps = { className?: string; children?: React.ReactNode | null; showCloseIcon?: boolean; size?: "M" | "L"; status?: "success" | "info" | "error" | "warning"; }; export default function PromptMessage({ className, children = null, showCloseIcon = true, size = "L", status = "info" }: PromptMessageProps) { const isError = status === "error"; const isErrorAndL = status === "error" && size === "L"; const isErrorAndM = status === "error" && size === "M"; const isInfo = status === "info"; const isInfoAndL = status === "info" && size === "L"; const isInfoAndM = status === "info" && size === "M"; const isSuccessAndL = status === "success" && size === "L"; const isSuccessAndM = status === "success" && size === "M"; const isWarning = status === "warning"; const isWarningAndL = status === "warning" && size === "L"; const isWarningAndM = status === "warning" && size === "M"; return (
{size === "M" && (
{status === "success" && (
)} {isWarning && (
)} {isError && (
)} {isInfo && }
)} {isSuccessAndL && ( <>
{children || (

This is a success message and click close to disappear.

)}
)} {isSuccessAndL && showCloseIcon && (
)} {isWarningAndL && ( <>
{children || (

This is a prompt message and click close to disappear.

)}
)} {isWarningAndL && showCloseIcon && (
)} {isErrorAndL && ( <>
{children || (

This is an abnormal message and click close to disappear.

)}
)} {isErrorAndL && showCloseIcon && (
)} {isInfoAndL && ( <>
{children || (

This is an information message and click close to disappear.

)}
)} {isInfoAndL && showCloseIcon && (
)} {isSuccessAndM && (
{children || (

This is a success message and will disappear voluntarily.

)}
)} {isSuccessAndM && showCloseIcon && (
)} {isWarningAndM && (
{children || (

This is a prompt message and will disappear voluntarily.

)}
)} {isWarningAndM && showCloseIcon && (
)} {isErrorAndM && (
{children || (

This is an abnormal message and will disappear voluntarily.

)}
)} {isErrorAndM && showCloseIcon && (
)} {isInfoAndM && (
{children || (

This is an information message and will disappear voluntarily.

)}
)} {isInfoAndM && showCloseIcon && (
)}
); }SUPER CRITICAL: The generated React+Tailwind code MUST be converted to match the target project's technology stack and styling system. 1. Analyze the target codebase to identify: technology stack, styling approach, component patterns, and design tokens 2. Convert React syntax to the target framework/library 3. Transform all Tailwind classes to the target styling system while preserving exact visual design 4. Follow the project's existing patterns and conventions DO NOT install any Tailwind as a dependency unless the user instructs you to do so. Node ids have been added to the code as data attributes, e.g. `data-node-id="1:2"`.These styles are contained in the design: Roboto/14 body: Font(family: "Roboto", style: Regular, size: 14, weight: 400, lineHeight: 1.5, letterSpacing: 0).Images and SVGs will be stored as constants, e.g. const image = 'https://www.figma.com/api/mcp/asset/550e8400-e29b-41d4-a716-446655440000'. These constants will be used in the code as the source for the image, ex: . Image assets are stored on a remote server for 7 days and can be fetched using the provided URLs until they expire.