@infinityfx/fluid/dist/components/display/toast.js

React UI library, using zero-runtime CSS-in-JS.

import{jsxs as o,jsx as r}from"react/jsx-runtime";import e from"../input/button.js";import{combineClasses as i,classes as a}from"../../core/utils.js";import{createStyles as t}from"../../core/style.js";import{Icon as n}from"../../core/icons.js";const l=t("toast",{".toast":{padding:".4em",backgroundColor:"var(--f-clr-fg-100)",borderRadius:"var(--f-radius-med)",border:"solid 1px var(--f-clr-fg-200)",display:"flex",alignItems:"flex-start",gap:"var(--f-spacing-med)",minWidth:"min(100vw, 16em)"},".toast.round":{borderRadius:"calc(1.4em + 1px)"},".icon":{position:"relative",padding:".4em",display:"flex",fontSize:"1.2em",lineHeight:1,color:"white",zIndex:1},".background":{position:"absolute",inset:0,borderRadius:"var(--f-radius-sml)",opacity:.6,zIndex:-1},".toast.round .background":{borderRadius:"999px"},".content":{display:"flex",flexDirection:"column",gap:"var(--f-spacing-xxs)",color:"var(--f-clr-grey-700)",alignSelf:"center",flexGrow:1,paddingBlock:".4em"},".title":{fontWeight:700,fontSize:".9em",color:"var(--f-clr-text-100)"}});function c({children:t,cc:c={},icon:s,color:d,title:m,round:f,action:p=r(n,{type:"close"}),onClose:u,...g}){const v=i(l,c);return o("div",{...g,className:a(v.toast,f&&v.round,g.className),children:[o("div",{className:v.icon,children:[r("div",{className:v.background,style:{backgroundColor:d}}),s]}),o("div",{className:v.content,children:[r("div",{className:v.title,children:m}),t]}),p&&r(e,{compact:!0,variant:"minimal",round:f,onClick:u,"aria-label":"Close",children:p})]})}export{c as default};
//# sourceMappingURL=toast.js.map