import cn from "classnames" ; import React , { FunctionComponent , ReactNode } from "react" ; import { withStyles } from "coral-ui/hocs" ; import styles from "./CallOut.css" ; export interface CallOutProps { /**
     * The content of the component.
     */ children : ReactNode ; /**
     * Convenient prop to override the root styling.
     */ className ? : string ; /**
     * Override or extend the styles applied to the component.
     */ classes : typeof styles ; /**
     * Color of the CallOut
     */ color ? : "regular" | "primary" | "error" | "success" ; fullWidth ? : boolean ; borderless ? : boolean ; } const CallOut = ( props ) => { const { borderless , className , classes , color , fullWidth , children , ... rest } = props ; const rootClassName = cn ( classes . root , { [ classes . colorRegular ] : color === "regular" , [ classes . colorError ] : color === "error" , [ classes . colorPrimary ] : color === "primary" , [ classes . colorSuccess ] : color === "success" , [ classes . borderless ] : borderless , [ classes . fullWidth ] : fullWidth , } , className ) ; return ( < div className = { rootClassName } { ... rest } > < div className = { classes . inner } > { children } < /div> < /div>); } ; CallOut . defaultProps = { color : "regular" , fullWidth : false , } as Partial < CallOutProps > ; const enhanced = withStyles ( styles ) ( CallOut ) ; export default enhanced ;