export function Banner()

in src/banner/banner.tsx [189:264]
70 lines of code
7 McCabe index (conditional complexity)

export function Banner({
  action,
  artwork,
  children,
  hierarchy = HIERARCHY.low,
  kind = KIND.info,
  overrides = {},
  nested = false,
  title,
}: BannerProps) {
  const [, theme] = useStyletron();
  const styles = hierarchy === HIERARCHY.high ? high(theme, kind) : low(theme, kind);
  const actionPosition = action && action.position ? action.position : ACTION_POSITION.trailing;

  const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
  const [LeadingContent, leadingContentProps] = getOverrides(
    overrides.LeadingContent,
    StyledLeadingContent
  );
  const [MessageContent, messageContentProps] = getOverrides(
    overrides.MessageContent,
    StyledMessageContent
  );
  const [TrailingContent, trailingContentProps] = getOverrides(
    overrides.TrailingContent,
    StyledTrailingContent
  );
  const [BelowContent, belowContentProps] = getOverrides(
    overrides.BelowContent,
    StyledBelowContent
  );
  const [Title, titleProps] = getOverrides(overrides.Title, StyledTitle);
  const [Message, messageProps] = getOverrides(overrides.Message, StyledMessage);
  const ariaLabel = rootProps.hasOwnProperty('aria-label')
    ? rootProps['aria-label']
    : 'this is an announcement banner';

  return (
    <Root
      $backgroundColor={styles.backgroundColor}
      $color={styles.color}
      $nested={nested}
      {...rootProps}
      role="complementary"
      aria-label={ariaLabel}
    >
      <LeadingContent $includesArtwork={Boolean(artwork)} {...leadingContentProps}>
        <Leading artwork={artwork} />
      </LeadingContent>

      <MessageContent $actionPosition={actionPosition} {...messageContentProps}>
        {Boolean(title) && <Title {...titleProps}>{title}</Title>}

        {Boolean(children) && <Message {...messageProps}>{children}</Message>}
      </MessageContent>

      <TrailingContent {...trailingContentProps}>
        <Trailing
          action={action}
          backgroundColor={styles.actionBackgroundColor}
          color={styles.color}
          overrides={overrides}
          nested={nested}
        />
      </TrailingContent>

      <BelowContent $actionPosition={actionPosition} {...belowContentProps}>
        <Below
          action={action}
          backgroundColor={styles.actionBackgroundColor}
          color={styles.color}
        />
      </BelowContent>
    </Root>
  );
}