@guruhotel/aura-ui/esm/alert/alert.js

⚛️ React UI library by GuruHotel

import{VStack as t,HStack as e}from"../stack";import o,{forwardRef as s}from"react";import{DEFAULT_COLORS as r,DEFAULT_ICONS as l}from"./alert.constants";import{AlertDescription as i,AlertTitle as n,StyledAlert as c,StyledCloseButton as a}from"./alert.styles";import{CrossRegular as m}from"../icons";import{jsx as p}from"react/jsx-runtime";import{jsxs as f}from"react/jsx-runtime";const d=o.forwardRef((({closeIcon:t,...e},o)=>p(a,{...e,ref:o,children:t||p(m,{label:"Close icon"})})));d.displayName="CloseButton";const u=s((({css:o={},variant:s="solid",status:i="success",icon:n,closeIcon:a,onClose:m,showCloseButton:u=!0,children:x,...A},h)=>{if(u&&!m)throw new Error("Missing onClose function to handle close button");return f(c,{...A,ref:h,css:o,variant:s,status:i,alignItems:"flex-start",justifyContent:"space-between",children:[f(e,{spacing:"4",alignItems:"flex-start",children:[p((()=>n||l[i]),{}),p(t,{alignItems:"flex-start",spacing:"1",children:x})]}),u&&p(d,{closeIcon:a,onClick:m,css:{color:`$${r[i]}12`,fontSize:10,p:6,_hover:{backgroundColor:`$${r[i]}7`},_active:{backgroundColor:`$${r[i]}8`},_focusVisible:{boxShadow:`0 0 0 2px $colors$${r[i]}11`}}})]})}));u.displayName="Alert";export const Alert=Object.assign(u,{Title:n,Description:i});Alert.displayName="Alert",Alert.Title=n,Alert.Title.displayName="AlertTitle",Alert.Description=i,Alert.Description.displayName="AlertDescription";export default Alert;