{"version":3,"sources":["../src/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clsx } from 'clsx';\nimport { AlertCircle, AlertTriangle, Info, X } from 'lucide-react';\n\nexport type BannerVariant = 'warning' | 'destructive' | 'information' | 'neutral';\n\nexport interface BannerProps {\n /**\n * Banner variant - determines color scheme\n */\n variant?: BannerVariant;\n /**\n * Optional title text\n */\n title?: string;\n /**\n * Main message/description text\n */\n message: string;\n /**\n * Optional icon (pass false to hide default icon, or pass custom ReactNode)\n */\n icon?: React.ReactNode | boolean;\n /**\n * Optional action button label\n */\n actionLabel?: string;\n /**\n * Action button click handler\n */\n onAction?: () => void;\n /**\n * Optional close button\n */\n onClose?: () => void;\n /**\n * Custom className\n */\n className?: string;\n /**\n * Custom style\n */\n style?: React.CSSProperties;\n /**\n * Test ID for testing\n */\n 'data-testid'?: string;\n}\n\nconst containerStyles: React.CSSProperties = {\n display: 'flex',\n alignItems: 'flex-start',\n padding: '16px',\n borderRadius: '8px',\n border: '1px solid',\n width: '100%',\n fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n};\n\nconst iconContainerStyles: React.CSSProperties = {\n flexShrink: 0,\n width: '24px',\n height: '24px',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n};\n\nconst contentContainerStyles: React.CSSProperties = {\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n minWidth: 0,\n};\n\nconst titleStyles: React.CSSProperties = {\n fontSize: '18px',\n fontWeight: 600,\n lineHeight: '1.25',\n marginBottom: '8px',\n};\n\nconst messageStyles: React.CSSProperties = {\n fontSize: '13px',\n fontWeight: 400,\n lineHeight: '1.5',\n margin: 0,\n};\n\nconst actionContainerStyles: React.CSSProperties = {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'flex-end',\n alignItems: 'flex-end',\n alignSelf: 'stretch',\n flexShrink: 0,\n};\n\nconst actionButtonStyles: React.CSSProperties = {\n background: 'none',\n border: 'none',\n padding: 0,\n fontSize: '13px',\n fontWeight: 600,\n lineHeight: '1.5',\n textDecoration: 'underline',\n textUnderlinePosition: 'from-font',\n cursor: 'pointer',\n fontFamily: 'inherit',\n};\n\nconst closeButtonStyles: React.CSSProperties = {\n background: 'none',\n border: 'none',\n padding: '4px',\n cursor: 'pointer',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n marginLeft: '8px',\n};\n\nconst variantConfig = {\n warning: {\n backgroundColor: '#fffaf5',\n borderColor: '#e4720d',\n textColor: '#611f00',\n actionColor: '#a74102',\n icon: AlertTriangle,\n },\n destructive: {\n backgroundColor: '#fff5f5',\n borderColor: '#c93232',\n textColor: '#610202',\n actionColor: '#920a0a',\n icon: AlertCircle,\n },\n information: {\n backgroundColor: '#f5fbff',\n borderColor: '#2c8bca',\n textColor: '#053a61',\n actionColor: '#024f83',\n icon: Info,\n },\n neutral: {\n backgroundColor: 'transparent',\n borderColor: '#b3b3b3',\n textColor: '#2f2f2f',\n actionColor: '#2f2f2f',\n icon: Info,\n },\n};\n\n/**\n * Banner component - Arbor Design System\n *\n * Informational banners with 4 variants (warning, destructive, information, neutral)\n * and optional title, icon, and action button.\n *\n * IMPORTANT: Banners are always displayed inline with page content (not overlays).\n * They flow with the document layout and push other content down.\n *\n * For overlay notifications in the top-right corner, use the Toast component instead.\n */\nexport const Banner = React.forwardRef(\n (\n {\n variant = 'information',\n title,\n message,\n icon = true,\n actionLabel,\n onAction,\n onClose,\n className,\n style,\n 'data-testid': dataTestId,\n },\n ref\n ) => {\n const config = variantConfig[variant];\n const DefaultIcon = config.icon;\n\n // Determine what icon to show\n const showIcon = icon !== false;\n const iconElement =\n icon === true || icon === undefined ? (\n \n ) : (\n icon\n );\n\n const containerStylesCombined: React.CSSProperties = {\n ...containerStyles,\n backgroundColor: config.backgroundColor,\n borderColor: config.borderColor,\n color: config.textColor,\n gap: showIcon ? '16px' : '0px',\n ...style,\n };\n\n const titleStylesCombined: React.CSSProperties = {\n ...titleStyles,\n color: config.textColor,\n };\n\n const messageStylesCombined: React.CSSProperties = {\n ...messageStyles,\n color: config.textColor,\n };\n\n const actionButtonStylesCombined: React.CSSProperties = {\n ...actionButtonStyles,\n color: config.actionColor,\n };\n\n const closeButtonStylesCombined: React.CSSProperties = {\n ...closeButtonStyles,\n color: config.textColor,\n };\n\n return (\n \n {showIcon && (\n
\n {iconElement}\n
\n )}\n\n
\n {title &&
{title}
}\n

{message}

\n
\n\n {actionLabel && onAction && (\n
\n \n {actionLabel}\n \n
\n )}\n\n {onClose && (\n \n \n \n )}\n \n );\n }\n);\n\nBanner.displayName = 'Banner';\n"],"mappings":"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","names":[]}