hunk.code_window:   variant: Variant.info,
   };
   function Callout(props: CalloutProps) {
     return (
       <CalloutContainer fill={props.fill} variant={props.variant || Variant.info}>
         {props.text && props.variant !== Variant.info ? (
           <Icon name={props.variant} size={IconSize.MEDIUM} />
         ) : null}
  
hunk.labels: keep keep keep keep keep replace keep keep keep
hunk.after_edit:     <CalloutContainer
         className={props.className}
         fill={props.fill}
         variant={props.variant || Variant.info}
       >
  
hunk.file_path: app/client/src/components/ads/Callout.tsx
hunk.type: replace
file: import React, { ReactNode } from "react";
  import { CommonComponentProps, Classes, Variant } from "./common";
  import styled from "styled-components";
  import Icon, { IconSize } from "./Icon";
  import { Colors } from "constants/Colors";
  import Text, { TextType } from "./Text";
  
  type CalloutProps = CommonComponentProps & {
    variant?: Variant;
    fill?: boolean;
    closeButton?: boolean;
    text?: string;
    label?: ReactNode;
    onClose?: () => void;
  };
  
  const CalloutContainer = styled.div<{
    variant: Variant;
    fill?: boolean;
  }>`
    position: relative;
    padding: ${(props) => props.theme.spaces[4]}px
      ${(props) => props.theme.spaces[12]}px;
    background: ${(props) => props.theme.colors.callout[props.variant].bgColor};
  
    ${(props) =>
      props.fill
        ? `
    display: flex;
    align-items: center;
    justify-content: center;
    `
        : null};
  
    .${Classes.ICON} {
      cursor: default;
      margin-right: ${(props) => props.theme.spaces[4]}px;
      svg path {
        fill: ${(props) =>
          props.variant === Variant.danger
            ? Colors.WHITE
            : props.theme.colors.callout[props.variant].color};
      }
    }
    a {
      color: ${(props) => props.theme.colors.callout[props.variant].color};
      &:hover {
        text-decoration-color: ${(props) =>
          props.theme.colors.callout[props.variant].color};
      }
      span {
        color: ${(props) => props.theme.colors.callout[props.variant].color};
      }
    }
  `;
  const Label = styled.div<{ variant: Variant }>`
    position: absolute;
    right: ${(props) => props.theme.spaces[12]}px;
    top: ${(props) => props.theme.spaces[5]}px;
    .${Classes.ICON} {
      margin-right: 0px !important;
      cursor: pointer;
      svg path {
        fill: ${(props) => props.theme.colors.callout[props.variant].color};
      }
    }
  `;
  
  Callout.defaultProps = {
    fill: false,
    variant: Variant.info,
  };
  
  function Callout(props: CalloutProps) {
    return (
      <CalloutContainer fill={props.fill} variant={props.variant || Variant.info}>
        {props.text && props.variant !== Variant.info ? (
          <Icon name={props.variant} size={IconSize.MEDIUM} />
        ) : null}
        <Text type={TextType.P2}>{props.text}</Text>
        {props.label ? props.label : null}
        {props.closeButton ? (
          <Label onClick={props.onClose} variant={props.variant || Variant.info}>
            <Icon name="close-modal" />
          </Label>
        ) : null}
      </CalloutContainer>
    );
  }
  
  export default Callout;
  