<commit_before>import React from 'react';
import styled from '@emotion/styled';
import { variant } from 'styled-system';

import Box from './Box';
import Text from './Text';

const BUTTON_HEIGHT = 34;

const StyledButton = styled.button(
  (props) =>
    `
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    height: ${BUTTON_HEIGHT}px;
    border-radius: ${BUTTON_HEIGHT / 2}px;
    border: none;
    padding: 0 ${props.theme.space[3]}px;
    border-style: solid;
    border-width: 2px;
  `,
  variant({
    variants: {
      primary: {
        bg: 'secondary',
        borderColor: 'secondary',
      },
      secondary: {
        borderColor: 'primary',
      },
      link: {
        border: 'none',
        height: 'auto',
        background: 'none',
        textDecoration: 'underline',
        fontWeight: 'normal',
        padding: 0,
      },
    },
  })
);

const ButtonIcon = ({ icon }) => {
  return <Box mr={2}>{icon}</Box>;
};

const Button = ({ children, icon, ...props }) => (
  <StyledButton type="button" {...props}>
    {Boolean(icon) && (
      <Text color="primary">
        <ButtonIcon icon={icon} />
      </Text>
    )}

    <Text fontWeight="bold" color="primary">
      {children}
    </Text><commit_msg>fix: improve Button link variant<commit_after>import React from 'react';
import styled from '@emotion/styled';
import { variant } from 'styled-system';

import Box from './Box';
import Text from './Text';

const BUTTON_HEIGHT = 34;

const StyledButton = styled.button(
  (props) =>
    `
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    height: ${BUTTON_HEIGHT}px;
    border-radius: ${BUTTON_HEIGHT / 2}px;
    border: none;
    padding: 0 ${props.theme.space[3]}px;
    border-style: solid;
    border-width: 2px;
    color: primary;
  `,
  variant({
    variants: {
      primary: {
        color: 'primary',
        fontWeight: 'bold',
        bg: 'secondary',
        borderColor: 'secondary',
      },
      secondary: {
        color: 'primary',
        fontWeight: 'bold',
        borderColor: 'primary',
      },
      link: {
        color: 'primary',
        border: 'none',
        height: 'auto',
        background: 'none',
        textDecoration: 'underline',
        fontWeight: 'normal',
        padding: 0,
      },
    },
  })
);

const ButtonIcon = ({ icon }) => {
  return <Box mr={2}>{icon}</Box>;
};

const Button = ({ children, icon, ...props }) => (
  <StyledButton type="button" {...props}>
    {Boolean(icon) && (
      <Text color="primary">
        <ButtonIcon icon={icon} />
      </Text>
    )}

    <Text>{children}</Text>
{'fraction_non_alphanumeric': 0.1657397107897664, 'fraction_numerical': 0.005932517612161661, 'mean_word_length': 2.376720901126408, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 25, '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': '780151', 'n_tokens_mistral': 874, 'n_tokens_neox': 857, 'n_words': 205}