<commit_before>import {
	Select as GrommetSelect,
	SelectProps as GrommetSelectProps,
} from 'grommet';
import * as React from 'react';
import styled from 'styled-components';
import asRendition from '../../asRendition';
import { Omit, RenditionSystemProps } from '../../common-types';
import { px } from '../../utils';
import { Theme } from '../../theme';

type AdjustedGrommetSelectProps = Omit<
	GrommetSelectProps,
	'onChange' | 'children'
>;

const StyledGrommetSelect = styled(
	GrommetSelect as React.ComponentClass<AdjustedGrommetSelectProps, any>,
)<InternalSelectProps<any>>`
	font-family: ${(props) => props.theme.font};
	font-size: ${(props) => px(props.theme.fontSizes[2])};
	font-weight: normal;
	/* The wrapping button component has borders of 1px, and changing it's height messes up the drop alignment, so we subtract the border width on the input */
	height: ${(props) =>
		px((props.emphasized ? props.theme.space[5] : props.theme.space[4]) - 2)};
	padding: ${(props) => (props.emphasized ? '14px' : '10px')};
	padding-right: 0px;
	padding-left: 20px;
`;

// Set button to occupy parent's width, and a default width.
const Container = styled.div<ContainerProps>`
	& > button {
		width: 100%;
		border-color: ${({ invalid, theme }: ContainerProps) =>
			invalid ? theme?.colors?.danger.main : ''};
	}
`;

// TODO: Remove the border and radius when the drop is open (it can open either on bottom or top, so it should be handled in Grommet)
// Issue in grommet: https://github.com/grommet/grommet/issues/3156<commit_msg>Fix GrommetSelect type casting for latest Grommet<commit_after>import {
	Select as GrommetSelect,
	SelectProps as GrommetSelectProps,
} from 'grommet';
import * as React from 'react';
import styled from 'styled-components';
import asRendition from '../../asRendition';
import { Omit, RenditionSystemProps } from '../../common-types';
import { px } from '../../utils';
import { Theme } from '../../theme';

type AdjustedGrommetSelectProps = Omit<
	GrommetSelectProps,
	'onChange' | 'children'
>;

const StyledGrommetSelect = styled(
	GrommetSelect as React.ComponentType<AdjustedGrommetSelectProps>,
)<InternalSelectProps<any>>`
	font-family: ${(props) => props.theme.font};
	font-size: ${(props) => px(props.theme.fontSizes[2])};
	font-weight: normal;
	/* The wrapping button component has borders of 1px, and changing it's height messes up the drop alignment, so we subtract the border width on the input */
	height: ${(props) =>
		px((props.emphasized ? props.theme.space[5] : props.theme.space[4]) - 2)};
	padding: ${(props) => (props.emphasized ? '14px' : '10px')};
	padding-right: 0px;
	padding-left: 20px;
`;

// Set button to occupy parent's width, and a default width.
const Container = styled.div<ContainerProps>`
	& > button {
		width: 100%;
		border-color: ${({ invalid, theme }: ContainerProps) =>
			invalid ? theme?.colors?.danger.main : ''};
	}
`;

// TODO: Remove the border and radius when the drop is open (it can open either on bottom or top, so it should be handled in Grommet)
// Issue in grommet: https://github.com/grommet/grommet/issues/3156
{'fraction_non_alphanumeric': 0.15, 'fraction_numerical': 0.012258064516129033, 'mean_word_length': 4.459507042253521, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 25, 'https://': 2, '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': '6936868', 'n_tokens_mistral': 1040, 'n_tokens_neox': 1007, 'n_words': 304}