{"version":3,"file":"Alert.cjs","names":[],"sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Alert.module.css\";\n\nexport type AlertVariant = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\";\nexport type AlertAppearance = \"soft\" | \"solid\" | \"outline\";\n\nexport interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n    variant?: AlertVariant;\n    /** Visual style: soft (default tinted bg), solid (filled), outline (bordered). */\n    appearance?: AlertAppearance;\n    title?: ReactNode;\n    description?: ReactNode;\n    icon?: ReactNode;\n    /** Show a close button and invoke this when clicked. */\n    onClose?: () => void;\n    /** Custom close button label for screen readers. */\n    closeLabel?: string;\n}\n\n/**\n * Inline alert / notice with tone (info/success/warning/danger) and appearance\n * (soft/solid/outline). Accepts optional `icon`, `title`, `description` and\n * a dismiss button via `onClose`.\n */\nexport function Alert({\n    variant = \"info\",\n    appearance = \"soft\",\n    title,\n    description,\n    icon,\n    onClose,\n    closeLabel = \"Dismiss\",\n    className,\n    children,\n    ...props\n}: AlertProps) {\n    return (\n        <div\n            role=\"alert\"\n            className={cn(\n                styles.alert,\n                styles[variant],\n                appearance === \"solid\" && styles.solid,\n                appearance === \"outline\" && styles.outline,\n                className,\n            )}\n            {...props}\n        >\n            {icon && <span className={styles.icon}>{icon}</span>}\n            <div className={styles.content}>\n                {title && <p className={styles.title}>{title}</p>}\n                {description && <p className={styles.description}>{description}</p>}\n                {children}\n            </div>\n            {onClose && (\n                <button\n                    type=\"button\"\n                    className={styles.close}\n                    onClick={onClose}\n                    aria-label={closeLabel}\n                >\n                    <CloseIcon />\n                </button>\n            )}\n        </div>\n    );\n}\n\nfunction CloseIcon() {\n    return (\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden>\n            <path\n                d=\"M6 6l12 12M18 6L6 18\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n            />\n        </svg>\n    );\n}\n"],"mappings":"yGAyBA,SAAgB,EAAM,CAClB,UAAU,OACV,aAAa,OACb,QACA,cACA,OACA,UACA,aAAa,UACb,YACA,WACA,GAAG,GACQ,CACX,OACI,EAAA,EAAA,KAAA,CAAC,MAAD,CACI,KAAK,QACL,UAAW,EAAA,GACP,EAAA,QAAO,MACP,EAAA,QAAO,GACP,IAAe,SAAW,EAAA,QAAO,MACjC,IAAe,WAAa,EAAA,QAAO,QACnC,CACJ,EACA,GAAI,EATR,SAAA,CAWK,IAAQ,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,KAAO,SAAA,CAAW,CAAA,GACnD,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAvB,SAAA,CACK,IAAS,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAW,EAAA,QAAO,MAAQ,SAAA,CAAS,CAAA,EAC/C,IAAe,EAAA,EAAA,IAAA,CAAC,IAAD,CAAG,UAAW,EAAA,QAAO,YAAc,SAAA,CAAe,CAAA,EACjE,CACA,IACJ,IACG,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,QAAO,MAClB,QAAS,EACT,aAAY,EAEZ,UAAA,EAAA,EAAA,IAAA,CAAC,EAAD,CAAY,CAAA,CACR,CAAA,CAEX,GAEb,CAEA,SAAS,GAAY,CACjB,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,cAAA,GACxD,UAAA,EAAA,EAAA,IAAA,CAAC,OAAD,CACI,EAAE,uBACF,OAAO,eACP,YAAY,IACZ,cAAc,OACjB,CAAA,CACA,CAAA,CAEb"}