<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import { Text, TextProps } from 'rebass/styled-components';
import isString from 'lodash/isString';

const namedPalletMap = {
  blues: ['blues.0', 'blues.9'],
  cyans: ['cyans.0', 'cyans.9'],
  grays: ['grays.0', 'grays.9'],
  greens: ['greens.0', 'greens.9'],
  indigos: ['indigos.0', 'indigos.9'],
  oranges: ['oranges.0', 'oranges.8'],
  pinks: ['pinks.0', 'pinks.9'],
  purples: ['purples.0', 'purples.9'],
};

const Pill = (props) => {
  const { variant, colorPalette, label, text, round, width, ...themeProps } = props;
  const palette = isString(colorPalette) ? namedPalletMap[colorPalette] : colorPalette;
  const darkShade = palette[palette.length - 1];
  const lightShade = palette[0];
  const color = variant === 'inverse' ? lightShade : darkShade;
  const bg = variant === 'inverse' ? darkShade : lightShade;
  const borderRadius = round ? '100%' : 4;
  const height = round ? width : 'auto';
  const lineHeight = round ? width : 'inherit';

  return (
    <Text
      aria-label={label}
      fontFamily="default"
      fontSize={0}
      fontWeight="medium"
      as="span"
      px={round ? 0 : 2}
      py={round ? 0 : 1}
      sx={{ borderRadius, textTransform: 'upperCase' }}
      color={color}
      bg={bg}
      width={width}
      height={height}
      lineHeight={lineHeight}
      textAlign="center"
      {...themeProps}
    >
      {text}
    </Text>
  );
};

Pill.propTypes = {
  ...TextProps,
  round: PropTypes.bool,
  colorPalette: PropTypes.oneOfType([
    PropTypes.oneOf([
      'blues',
      'cyans',
      'grays',
      'greens',
      'indigos',
      'oranges',
      'pinks',
      'purples',
    ]),
    PropTypes.arrayOf(PropTypes.string),
  ]),
  label: PropTypes.string.isRequired,
  text: PropTypes.string.isRequired,
  variant: PropTypes.oneOf(['default', 'inverse']),
};

Pill.defaultProps = {
  width: 'auto',
  variant: 'default',
};

export default Pill;<commit_msg>[WEB-1338] Make Pill component sx prop extensible<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import { Text, TextProps } from 'rebass/styled-components';
import isString from 'lodash/isString';

const namedPalletMap = {
  blues: ['blues.0', 'blues.9'],
  cyans: ['cyans.0', 'cyans.9'],
  grays: ['grays.0', 'grays.9'],
  greens: ['greens.0', 'greens.9'],
  indigos: ['indigos.0', 'indigos.9'],
  oranges: ['oranges.0', 'oranges.8'],
  pinks: ['pinks.0', 'pinks.9'],
  purples: ['purples.0', 'purples.9'],
};

const Pill = (props) => {
  const { variant, colorPalette, label, text, round, width, sx = {}, ...themeProps } = props;
  const palette = isString(colorPalette) ? namedPalletMap[colorPalette] : colorPalette;
  const darkShade = palette[palette.length - 1];
  const lightShade = palette[0];
  const color = variant === 'inverse' ? lightShade : darkShade;
  const bg = variant === 'inverse' ? darkShade : lightShade;
  const borderRadius = round ? '100%' : 4;
  const height = round ? width : 'auto';
  const lineHeight = round ? width : 'inherit';

  return (
    <Text
      aria-label={label}
      fontFamily="default"
      fontSize={0}
      fontWeight="medium"
      as="span"
      px={round ? 0 : 2}
      py={round ? 0 : 1}
      sx={{ borderRadius, textTransform: 'upperCase', ...sx }}
      color={color}
      bg={bg}
      width={width}
      height={height}
      lineHeight={lineHeight}
      textAlign="center"
      {...themeProps}
    >
      {text}
    </Text>
  );
};

Pill.propTypes = {
  ...TextProps,
  round: PropTypes.bool,
  colorPalette: PropTypes.oneOfType([
    PropTypes.oneOf([
      'blues',
      'cyans',
      'grays',
      'greens',
      'indigos',
      'oranges',
      'pinks',
      'purples',
    ]),
    PropTypes.arrayOf(PropTypes.string),
  ]),
  label: PropTypes.string.isRequired,
  text: PropTypes.string.isRequired,
  variant: PropTypes.oneOf(['default', 'inverse']),
};

Pill.defaultProps = {
  colorPalette: 'purples',
  width: 'auto',
  variant: 'default',
};

export default Pill;
{'fraction_non_alphanumeric': 0.1737527648070779, 'fraction_numerical': 0.014254116490538215, 'mean_word_length': 3.191555097837281, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 9, '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': '2862461', 'n_tokens_mistral': 1449, 'n_tokens_neox': 1420, 'n_words': 311}