<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import { withState } from 'recompose';

import { styled, withTheme } from '@storybook/theming';
import { StorybookLogo, WithTooltip, TooltipLinkList, Button, Icons } from '@storybook/components';

const BrandArea = styled.div(({ theme }) => ({
  fontSize: theme.typography.size.s2,
  fontWeight: theme.typography.weight.bold,
}));

const Logo = styled(StorybookLogo)({
  width: 'auto',
  height: 22,
  display: 'block',
});

const LogoLink = styled.a(
  {
    display: 'block',
    color: 'inherit',
    textDecoration: 'none',
  },
  ({ theme }) => theme.animation.hoverable
);

const MenuButton = styled(Button)(props => ({
  position: 'relative',
  overflow: 'visible',

  ...(props.highlighted && {
    '&:after': {
      content: '""',
      position: 'absolute',
      top: 0,
      right: 0,
      width: 8,
      height: 8,
      borderRadius: 8,
      background: `${props.theme.color.positive}`,
    },
  }),
}));

const Head = styled.div({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
});

const Brand = withTheme(({ theme: { brand } }) => (
  <BrandArea>
    {brand || (
      <LogoLink href="./">
        <Logo />
      </LogoLink>
    )}
  </BrandArea>
));

const SidebarHeading = withState('tooltipShown', 'onVisibilityChange', false)(<commit_msg>Rework brand to expect a DOM element (i.e., an SVG)<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import { withState } from 'recompose';

import { styled, withTheme } from '@storybook/theming';
import { StorybookLogo, WithTooltip, TooltipLinkList, Button, Icons } from '@storybook/components';

const BrandArea = styled.div(({ theme }) => ({
  fontSize: theme.typography.size.s2,
  fontWeight: theme.typography.weight.bold,
}));

const Logo = styled(StorybookLogo)({
  width: 'auto',
  height: 22,
  display: 'block',
});

const LogoLink = styled.a(
  {
    display: 'block',
    color: 'inherit',
    textDecoration: 'none',
  },
  ({ theme }) => theme.animation.hoverable
);

const MenuButton = styled(Button)(props => ({
  position: 'relative',
  overflow: 'visible',

  ...(props.highlighted && {
    '&:after': {
      content: '""',
      position: 'absolute',
      top: 0,
      right: 0,
      width: 8,
      height: 8,
      borderRadius: 8,
      background: `${props.theme.color.positive}`,
    },
  }),
}));

const Head = styled.div({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
});

const Brand = withTheme(({ theme: { brand } }) =>
  brand ? (
    <BrandArea dangerouslySetInnerHTML={{ __html: brand }} />
  ) : (
    <BrandArea>
      <LogoLink href="./">
        <Logo />
      </LogoLink>
    </BrandArea>
  )
);

const SidebarHeading = withState('tooltipShown', 'onVisibilityChange', false)(
{'fraction_non_alphanumeric': 0.17485955056179775, 'fraction_numerical': 0.0056179775280898875, 'mean_word_length': 3.3763440860215055, 'pattern_counts': {'":': 0, '<': 14, '<?xml version=': 0, '>': 22, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6952594', 'n_tokens_mistral': 968, 'n_tokens_neox': 946, 'n_words': 218}