Differential D19604 Diff 58919 cashtab/src/components/Common/Inputs.tsx

Changeset View

Standalone View

cashtab/src/components/Common/Inputs.tsx

Show All 12 Lines	const CashtabInputWrapper = styled.div`
*,		*,
*:before,		*:before,
*:after {		*:after {
box-sizing: inherit;		box-sizing: inherit;
}		}
width: 100%;		width: 100%;
`;		`;

		const InputLabel = styled.div`
		color: ${props => props.theme.primaryText};
		margin-bottom: 6px;
		font-weight: 700;
		text-align: left;
		font-size: var(--text-lg);
		@media (max-width: 768px) {
		font-size: var(--text-base);
		}
		`;

const InputRow = styled.div<{ invalid?: boolean }>`		const InputRow = styled.div<{ invalid?: boolean }>`
position: relative;		position: relative;
display: flex;		display: flex;
align-items: stretch;		align-items: stretch;
input,		input,
button,		button,
select {		select {
border: ${props =>		border: ${props =>
props.invalid		props.invalid
? `1px solid ${props.theme.formError}`		? `1px solid ${props.theme.formError}`
: `1px solid ${props.theme.border}`};		: `1px solid transparent`};
}		}
button,		button,
select {		select {
color: ${props =>		color: ${props =>
props.invalid ? props.theme.formError : props.theme.primaryText};		props.invalid ? props.theme.formError : props.theme.primaryText};
}		}
`;		`;

const CashtabInput = styled.input<{ invalid?: boolean }>`		const CashtabInput = styled.input<{ invalid?: boolean }>`
${props => props.disabled && `cursor: not-allowed`};		${props => props.disabled && `cursor: not-allowed`};
background-color: ${props => props.theme.secondaryBackground};		background: ${props => props.theme.inputBackground};
font-size: var(--text-lg);		font-size: var(--text-base);
line-height: var(--text-lg--line-height);		line-height: var(--text-base--line-height);
padding: 16px 12px;		padding: 18px 12px;
border-radius: 9px;		border-radius: 10px;
width: 100%;		width: 100%;
color: ${props => props.theme.primaryText};		color: ${props => props.theme.primaryText};
:focus-visible {		:focus-visible {
outline: none;		outline: none;
}		}
${props => props.invalid && `border: 1px solid ${props.theme.formError}`};		${props => props.invalid && `border: 1px solid ${props.theme.formError}`};
		@media (max-width: 768px) {
		padding: 12px 12px;
		}
`;		`;

const ModalInputField = styled(CashtabInput)<{ invalid?: boolean }>`		const ModalInputField = styled(CashtabInput)<{ invalid?: boolean }>`
background-color: transparent;		background-color: transparent;
border: ${props =>		border: ${props =>
props.invalid		props.invalid
? `1px solid ${props.theme.formError}`		? `1px solid ${props.theme.formError}`
: `1px solid ${props.theme.accent} !important`};		: `1px solid ${props.theme.accent} !important`};
`;		`;

const CashtabTextArea = styled.textarea<{ height: number }>`		const CashtabTextArea = styled.textarea<{
background-color: ${props => props.theme.secondaryBackground};		height: number;
		invalid?: boolean;
		}>`
		${props => props.disabled && `cursor: not-allowed`};
		background: ${props => props.theme.inputBackground};
font-size: var(--text-sm);		font-size: var(--text-sm);
line-height: var(--text-sm--line-height);		line-height: var(--text-sm--line-height);
padding: 16px 12px;		padding: 12px 12px;
border-radius: 9px;		border-radius: 10px;
width: 100%;		width: 100%;
color: ${props => props.theme.primaryText};		color: ${props => props.theme.primaryText};
		border: ${props =>
		props.invalid
		? `1px solid ${props.theme.formError}`
		: `1px solid transparent`};
:focus-visible {		:focus-visible {
outline: none;		outline: none;
}		}
height: ${props => props.height}px;		height: ${props => props.height}px;
resize: none;		resize: none;
${props => props.disabled && `cursor: not-allowed`};
&::-webkit-scrollbar {		&::-webkit-scrollbar {
width: 12px;		width: 12px;
}		}
&::-webkit-scrollbar-track {		&::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: ${props => props.theme.accent};		background-color: ${props => props.theme.accent};
border-radius: 10px;		border-radius: 10px;
height: 80%;		height: 80%;
Show All 16 Lines
const LeftInput = styled(CashtabInput)`		const LeftInput = styled(CashtabInput)`
border-radius: 9px 0 0 9px;		border-radius: 9px 0 0 9px;
`;		`;

const OnMaxBtn = styled.button<{ invalid?: boolean }>`		const OnMaxBtn = styled.button<{ invalid?: boolean }>`
cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};		cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
color: ${props =>		color: ${props =>
props.invalid ? props.theme.formError : props.theme.primaryText};		props.invalid ? props.theme.formError : props.theme.primaryText};
border-radius: 0 9px 9px 0;		border-radius: 0 10px 10px 0;
background-color: ${props => props.theme.secondaryBackground};		background-color: ${props => props.theme.inputBackground};
border-left: none !important;		border-left-color: ${props => props.theme.primaryBackground} !important;
font-size: var(--text-lg);		font-size: var(--text-sm);
line-height: var(--text-lg--line-height);		line-height: var(--text-sm--line-height);
padding: 16px;		padding: 0 12px;
`;		`;

const OnMaxBtnToken = styled(OnMaxBtn)`		const OnMaxBtnToken = styled(OnMaxBtn)`
padding: 12px;		padding: 12px;
min-width: 59px;		min-width: 59px;
`;		`;

const AliasSuffixHolder = styled(OnMaxBtn)`		const AliasSuffixHolder = styled(OnMaxBtn)`
cursor: auto;		cursor: auto;
`;		`;

const CurrencyDropdown = styled.select<{ invalid?: boolean }>`		const CurrencyDropdown = styled.select<{ invalid?: boolean }>`
cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};		cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
font-size: var(--text-lg);		font-size: var(--text-sm);
line-height: var(--text-lg--line-height);		line-height: var(--text-sm--line-height);
padding: 6px;		padding: 6px;
color: ${props =>		color: ${props =>
props.invalid ? props.theme.formError : props.theme.primaryText};		props.invalid ? props.theme.formError : props.theme.primaryText};
background-color: ${props => props.theme.secondaryBackground};		background-color: ${props => props.theme.inputBackground};
border-color: ${props => props.theme.border};		border: none;
		border-radius: 8px;
:focus-visible {		:focus-visible {
outline: none;		outline: none;
}		}
`;		`;
const SendXecDropdown = styled(CurrencyDropdown)`		const SendXecDropdown = styled(CurrencyDropdown)`
width: 100px;		width: 100px;
		border-left: 1px solid ${props => props.theme.primaryBackground}!important;
		border-radius: 0;
`;		`;

const SellPriceDropdown = styled(CurrencyDropdown)`		const SellPriceDropdown = styled(CurrencyDropdown)`
width: 100px;		width: 100px;
border-radius: 0 9px 9px 0;		border-radius: 0 9px 9px 0;
`;		`;

const CurrencyOption = styled.option`		const CurrencyOption = styled.option`
▲ Show 20 Lines • Show All 53 Lines • ▼ Show 20 Lines	interface InputProps {
value: null \| string;		value: null \| string;
disabled?: boolean;		disabled?: boolean;
handleInput: React.ChangeEventHandler<HTMLInputElement>;		handleInput: React.ChangeEventHandler<HTMLInputElement>;
error?: string \| boolean;		error?: string \| boolean;
type?: string;		type?: string;
style?: React.CSSProperties;		style?: React.CSSProperties;
prefix?: InputLogoPrefixProps;		prefix?: InputLogoPrefixProps;
suffix?: string;		suffix?: string;
		label?: string;
autocomplete?: string;		autocomplete?: string;
spellCheck?: boolean;		spellCheck?: boolean;
autoCorrect?: string;		autoCorrect?: string;
autoCapitalize?: string;		autoCapitalize?: string;
}		}
export const Input: React.FC<InputProps> = ({		export const Input: React.FC<InputProps> = ({
placeholder = '',		placeholder = '',
name = '',		name = '',
value = '',		value = '',
disabled = false,		disabled = false,
handleInput,		handleInput,
error = false,		error = false,
type = 'text',		type = 'text',
style,		style,
prefix,		prefix,
suffix,		suffix,
		label,
autocomplete = 'off',		autocomplete = 'off',
spellCheck = false,		spellCheck = false,
autoCorrect = 'off',		autoCorrect = 'off',
autoCapitalize = 'off',		autoCapitalize = 'off',
}) => {		}) => {
return (		return (
<CashtabInputWrapper>		<CashtabInputWrapper>
		{label && <InputLabel>{label}</InputLabel>}
<InputRow invalid={typeof error === 'string'}>		<InputRow invalid={typeof error === 'string'}>
{typeof prefix !== 'undefined' && (		{typeof prefix !== 'undefined' && (
<InputLogoPrefix src={prefix.src} alt={prefix.alt} />		<InputLogoPrefix src={prefix.src} alt={prefix.alt} />
)}		)}
<CashtabInput		<CashtabInput
name={name}		name={name}
style={style}		style={style}
value={value === null ? '' : value}		value={value === null ? '' : value}
Show All 21 Lines

interface ModalInputProps {		interface ModalInputProps {
placeholder: string;		placeholder: string;
name: string;		name: string;
value: null \| string;		value: null \| string;
handleInput: React.ChangeEventHandler<HTMLInputElement>;		handleInput: React.ChangeEventHandler<HTMLInputElement>;
error: string \| boolean;		error: string \| boolean;
type?: string;		type?: string;
		label?: string;
autocomplete?: string;		autocomplete?: string;
spellCheck?: boolean;		spellCheck?: boolean;
autoCorrect?: string;		autoCorrect?: string;
autoCapitalize?: string;		autoCapitalize?: string;
}		}
export const ModalInput: React.FC<ModalInputProps> = ({		export const ModalInput: React.FC<ModalInputProps> = ({
placeholder = '',		placeholder = '',
name = '',		name = '',
value = '',		value = '',
handleInput,		handleInput,
error = false,		error = false,
type = 'text',		type = 'text',
		label,
autocomplete = 'off',		autocomplete = 'off',
spellCheck = false,		spellCheck = false,
autoCorrect = 'off',		autoCorrect = 'off',
autoCapitalize = 'off',		autoCapitalize = 'off',
}) => {		}) => {
return (		return (
<CashtabInputWrapper>		<CashtabInputWrapper>
		{label && <InputLabel>{label}</InputLabel>}
<InputRow invalid={typeof error === 'string'}>		<InputRow invalid={typeof error === 'string'}>
<ModalInputField		<ModalInputField
name={name}		name={name}
value={value === null ? '' : value}		value={value === null ? '' : value}
placeholder={placeholder}		placeholder={placeholder}
invalid={typeof error === 'string'}		invalid={typeof error === 'string'}
onChange={e => handleInput(e)}		onChange={e => handleInput(e)}
type={type}		type={type}
Show All 35 Lines	interface TextAreaProps {
value: string \| null;		value: string \| null;
handleInput?: React.ChangeEventHandler<HTMLTextAreaElement>;		handleInput?: React.ChangeEventHandler<HTMLTextAreaElement>;
disabled?: boolean;		disabled?: boolean;
height?: number;		height?: number;
error?: string \| boolean;		error?: string \| boolean;
showCount?: boolean;		showCount?: boolean;
customCount?: boolean \| number;		customCount?: boolean \| number;
max?: string \| number;		max?: string \| number;
		label?: string;
autocomplete?: string;		autocomplete?: string;
spellCheck?: boolean;		spellCheck?: boolean;
autoCorrect?: string;		autoCorrect?: string;
autoCapitalize?: string;		autoCapitalize?: string;
}		}
export const TextArea: React.FC<TextAreaProps> = ({		export const TextArea: React.FC<TextAreaProps> = ({
placeholder = '',		placeholder = '',
name = '',		name = '',
value = '',		value = '',
handleInput,		handleInput,
disabled = false,		disabled = false,
height = 142,		height = 142,
error = false,		error = false,
showCount = false,		showCount = false,
customCount = false,		customCount = false,
max = '',		max = '',
		label,
autocomplete = 'off',		autocomplete = 'off',
spellCheck = false,		spellCheck = false,
autoCorrect = 'off',		autoCorrect = 'off',
autoCapitalize = 'off',		autoCapitalize = 'off',
}) => {		}) => {
return (		return (
<CashtabInputWrapper>		<CashtabInputWrapper>
		{label && <InputLabel>{label}</InputLabel>}
<CashtabTextArea		<CashtabTextArea
placeholder={placeholder}		placeholder={placeholder}
name={name}		name={name}
value={value === null ? '' : value}		value={value === null ? '' : value}
height={height}		height={height}
disabled={disabled}		disabled={disabled}
		invalid={typeof error === 'string'}
onChange={handleInput}		onChange={handleInput}
autoComplete={autocomplete}		autoComplete={autocomplete}
spellCheck={spellCheck}		spellCheck={spellCheck}
autoCorrect={autoCorrect}		autoCorrect={autoCorrect}
autoCapitalize={autoCapitalize}		autoCapitalize={autoCapitalize}
/>		/>
<CountAndErrorFlex>		<CountAndErrorFlex>
<TextAreaErrorMsg>		<TextAreaErrorMsg>
Show All 19 Lines
interface ModalTextAreaProps {		interface ModalTextAreaProps {
placeholder: string;		placeholder: string;
name: string;		name: string;
value: string \| null;		value: string \| null;
handleInput?: React.ChangeEventHandler<HTMLTextAreaElement>;		handleInput?: React.ChangeEventHandler<HTMLTextAreaElement>;
disabled?: boolean;		disabled?: boolean;
height?: number;		height?: number;
error?: string \| boolean;		error?: string \| boolean;
		label?: string;
autocomplete?: string;		autocomplete?: string;
spellCheck?: boolean;		spellCheck?: boolean;
autoCorrect?: string;		autoCorrect?: string;
autoCapitalize?: string;		autoCapitalize?: string;
}		}
export const ModalTextArea: React.FC<ModalTextAreaProps> = ({		export const ModalTextArea: React.FC<ModalTextAreaProps> = ({
placeholder = '',		placeholder = '',
name = '',		name = '',
value = '',		value = '',
handleInput,		handleInput,
disabled = false,		disabled = false,
height = 142,		height = 142,
error = false,		error = false,
		label,
autocomplete = 'off',		autocomplete = 'off',
spellCheck = false,		spellCheck = false,
autoCorrect = 'off',		autoCorrect = 'off',
autoCapitalize = 'off',		autoCapitalize = 'off',
}) => {		}) => {
return (		return (
<CashtabInputWrapper>		<CashtabInputWrapper>
		{label && <InputLabel>{label}</InputLabel>}
<ModalTextAreaField		<ModalTextAreaField
placeholder={placeholder}		placeholder={placeholder}
name={name}		name={name}
value={value === null ? '' : value}		value={value === null ? '' : value}
height={height}		height={height}
disabled={disabled}		disabled={disabled}
onChange={handleInput}		onChange={handleInput}
invalid={typeof error === 'string'}		invalid={typeof error === 'string'}
Show All 13 Lines

interface InputWithScannerProps {		interface InputWithScannerProps {
placeholder: string;		placeholder: string;
name: string;		name: string;
value: null \| string;		value: null \| string;
disabled?: boolean;		disabled?: boolean;
handleInput: React.ChangeEventHandler<HTMLInputElement>;		handleInput: React.ChangeEventHandler<HTMLInputElement>;
error: false \| string;		error: false \| string;
		label?: string;
autocomplete?: string;		autocomplete?: string;
spellCheck?: boolean;		spellCheck?: boolean;
autoCorrect?: string;		autoCorrect?: string;
autoCapitalize?: string;		autoCapitalize?: string;
}		}
export const InputWithScanner: React.FC<InputWithScannerProps> = ({		export const InputWithScanner: React.FC<InputWithScannerProps> = ({
placeholder = '',		placeholder = '',
name = '',		name = '',
value = '',		value = '',
disabled = false,		disabled = false,
handleInput,		handleInput,
error = false,		error = false,
		label,
autocomplete = 'off',		autocomplete = 'off',
spellCheck = false,		spellCheck = false,
autoCorrect = 'off',		autoCorrect = 'off',
autoCapitalize = 'off',		autoCapitalize = 'off',
}) => {		}) => {
return (		return (
<CashtabInputWrapper>		<CashtabInputWrapper>
		{label && <InputLabel>{label}</InputLabel>}
<InputRow invalid={typeof error === 'string'}>		<InputRow invalid={typeof error === 'string'}>
<LeftInput		<LeftInput
name={name}		name={name}
value={value === null ? '' : value}		value={value === null ? '' : value}
disabled={disabled}		disabled={disabled}
placeholder={placeholder}		placeholder={placeholder}
invalid={typeof error === 'string'}		invalid={typeof error === 'string'}
onChange={handleInput}		onChange={handleInput}
Show All 24 Lines	interface SendXecInputProps {
selectValue: string;		selectValue: string;
inputDisabled: boolean;		inputDisabled: boolean;
selectDisabled: boolean;		selectDisabled: boolean;
fiatCode: string;		fiatCode: string;
error: false \| string;		error: false \| string;
handleInput: React.ChangeEventHandler<HTMLInputElement>;		handleInput: React.ChangeEventHandler<HTMLInputElement>;
handleSelect: React.ChangeEventHandler<HTMLSelectElement>;		handleSelect: React.ChangeEventHandler<HTMLSelectElement>;
handleOnMax: () => void;		handleOnMax: () => void;
		label?: string;
autocomplete?: string;		autocomplete?: string;
spellCheck?: boolean;		spellCheck?: boolean;
autoCorrect?: string;		autoCorrect?: string;
autoCapitalize?: string;		autoCapitalize?: string;
}		}
export const SendXecInput: React.FC<SendXecInputProps> = ({		export const SendXecInput: React.FC<SendXecInputProps> = ({
name = '',		name = '',
value = 0,		value = 0,
inputDisabled = false,		inputDisabled = false,
selectValue = '',		selectValue = '',
selectDisabled = false,		selectDisabled = false,
fiatCode = 'USD',		fiatCode = 'USD',
error = false,		error = false,
handleInput,		handleInput,
handleSelect,		handleSelect,
handleOnMax,		handleOnMax,
		label,
autocomplete = 'off',		autocomplete = 'off',
spellCheck = false,		spellCheck = false,
autoCorrect = 'off',		autoCorrect = 'off',
autoCapitalize = 'off',		autoCapitalize = 'off',
}) => {		}) => {
return (		return (
<CashtabInputWrapper>		<CashtabInputWrapper>
		{label && <InputLabel>{label}</InputLabel>}
<InputRow invalid={typeof error === 'string'}>		<InputRow invalid={typeof error === 'string'}>
<LeftInput		<LeftInput
placeholder="Amount"		placeholder="Amount"
type="number"		type="number"
step="0.01"		step="0.01"
name={name}		name={name}
value={value}		value={value}
onChange={handleInput}		onChange={handleInput}
Show All 32 Lines
interface SendTokenInputProps {		interface SendTokenInputProps {
name: string;		name: string;
placeholder: string;		placeholder: string;
value: number \| string;		value: number \| string;
inputDisabled?: boolean;		inputDisabled?: boolean;
error: false \| string;		error: false \| string;
handleInput: React.ChangeEventHandler<HTMLInputElement>;		handleInput: React.ChangeEventHandler<HTMLInputElement>;
handleOnMax: () => void;		handleOnMax: () => void;
		label?: string;
autocomplete?: string;		autocomplete?: string;
spellCheck?: boolean;		spellCheck?: boolean;
autoCorrect?: string;		autoCorrect?: string;
autoCapitalize?: string;		autoCapitalize?: string;
}		}
export const SendTokenInput: React.FC<SendTokenInputProps> = ({		export const SendTokenInput: React.FC<SendTokenInputProps> = ({
name = '',		name = '',
placeholder = '',		placeholder = '',
value = 0,		value = 0,
inputDisabled = false,		inputDisabled = false,
error = false,		error = false,
handleInput,		handleInput,
handleOnMax,		handleOnMax,
		label,
autocomplete = 'off',		autocomplete = 'off',
spellCheck = false,		spellCheck = false,
autoCorrect = 'off',		autoCorrect = 'off',
autoCapitalize = 'off',		autoCapitalize = 'off',
}) => {		}) => {
return (		return (
<CashtabInputWrapper>		<CashtabInputWrapper>
		{label && <InputLabel>{label}</InputLabel>}
<InputRow invalid={typeof error === 'string'}>		<InputRow invalid={typeof error === 'string'}>
<LeftInput		<LeftInput
placeholder={placeholder}		placeholder={placeholder}
name={name}		name={name}
value={value}		value={value}
onChange={e => handleInput(e)}		onChange={e => handleInput(e)}
disabled={inputDisabled}		disabled={inputDisabled}
autoComplete={autocomplete}		autoComplete={autocomplete}
Show All 14 Lines	interface ListPriceInputProps {
value: null \| number \| string;		value: null \| number \| string;
inputDisabled?: boolean;		inputDisabled?: boolean;
selectValue: string;		selectValue: string;
selectDisabled: boolean;		selectDisabled: boolean;
fiatCode: string;		fiatCode: string;
error: false \| string;		error: false \| string;
handleInput: React.ChangeEventHandler<HTMLInputElement>;		handleInput: React.ChangeEventHandler<HTMLInputElement>;
handleSelect: React.ChangeEventHandler<HTMLSelectElement>;		handleSelect: React.ChangeEventHandler<HTMLSelectElement>;
		label?: string;
autocomplete?: string;		autocomplete?: string;
spellCheck?: boolean;		spellCheck?: boolean;
autoCorrect?: string;		autoCorrect?: string;
autoCapitalize?: string;		autoCapitalize?: string;
}		}
export const ListPriceInput: React.FC<ListPriceInputProps> = ({		export const ListPriceInput: React.FC<ListPriceInputProps> = ({
name = 'listPriceInput',		name = 'listPriceInput',
placeholder = 'listPriceInput',		placeholder = 'listPriceInput',
value = 0,		value = 0,
inputDisabled = false,		inputDisabled = false,
selectValue = '',		selectValue = '',
selectDisabled = false,		selectDisabled = false,
fiatCode = 'USD',		fiatCode = 'USD',
error = false,		error = false,
handleInput,		handleInput,
handleSelect,		handleSelect,
		label,
autocomplete = 'off',		autocomplete = 'off',
spellCheck = false,		spellCheck = false,
autoCorrect = 'off',		autoCorrect = 'off',
autoCapitalize = 'off',		autoCapitalize = 'off',
}) => {		}) => {
return (		return (
<CashtabInputWrapper>		<CashtabInputWrapper>
		{label && <InputLabel>{label}</InputLabel>}
<InputRow invalid={typeof error === 'string'}>		<InputRow invalid={typeof error === 'string'}>
<LeftInput		<LeftInput
name={name}		name={name}
placeholder={placeholder}		placeholder={placeholder}
type="number"		type="number"
value={value === null ? '' : value}		value={value === null ? '' : value}
onChange={handleInput}		onChange={handleInput}
disabled={inputDisabled}		disabled={inputDisabled}
Show All 27 Lines

interface AliasInputProps {		interface AliasInputProps {
name: string;		name: string;
placeholder: string;		placeholder: string;
value: string;		value: string;
inputDisabled: boolean;		inputDisabled: boolean;
error: false \| string;		error: false \| string;
handleInput: React.ChangeEventHandler<HTMLInputElement>;		handleInput: React.ChangeEventHandler<HTMLInputElement>;
		label?: string;
autocomplete?: string;		autocomplete?: string;
spellCheck?: boolean;		spellCheck?: boolean;
autoCorrect?: string;		autoCorrect?: string;
autoCapitalize?: string;		autoCapitalize?: string;
}		}
export const AliasInput: React.FC<AliasInputProps> = ({		export const AliasInput: React.FC<AliasInputProps> = ({
name = '',		name = '',
placeholder = '',		placeholder = '',
value = '',		value = '',
inputDisabled = false,		inputDisabled = false,
error = false,		error = false,
handleInput,		handleInput,
		label,
autocomplete = 'off',		autocomplete = 'off',
spellCheck = false,		spellCheck = false,
autoCorrect = 'off',		autoCorrect = 'off',
autoCapitalize = 'off',		autoCapitalize = 'off',
}) => {		}) => {
return (		return (
<CashtabInputWrapper>		<CashtabInputWrapper>
		{label && <InputLabel>{label}</InputLabel>}
<InputRow invalid={typeof error === 'string'}>		<InputRow invalid={typeof error === 'string'}>
<LeftInput		<LeftInput
placeholder={placeholder}		placeholder={placeholder}
type="string"		type="string"
name={name}		name={name}
value={value}		value={value}
onChange={e => handleInput(e)}		onChange={e => handleInput(e)}
disabled={inputDisabled}		disabled={inputDisabled}
Show All 14 Lines	const CashtabSlider = styled.input<{
isInvalid?: boolean;		isInvalid?: boolean;
}>`		}>`
width: ${props => (props.fixedWidth ? '256px' : '100%')};		width: ${props => (props.fixedWidth ? '256px' : '100%')};
accent-color: ${props =>		accent-color: ${props =>
props.isInvalid ? props.theme.error : props.theme.accent};		props.isInvalid ? props.theme.error : props.theme.accent};
`;		`;
const SliderInput = styled.input<{ invalid?: boolean }>`		const SliderInput = styled.input<{ invalid?: boolean }>`
${props => props.disabled && `cursor: not-allowed`};		${props => props.disabled && `cursor: not-allowed`};
background-color: ${props => props.theme.secondaryBackground};		background-color: ${props => props.theme.inputBackground};
font-size: var(--text-base);		font-size: var(--text-base);
line-height: var(--text-base--line-height);		line-height: var(--text-base--line-height);
padding: 6px;		padding: 6px;
border-radius: 4px;		border-radius: 4px;
text-align: right;		text-align: right;
border: ${props =>		border: ${props =>
props.invalid ? `1px solid ${props.theme.formError}` : `none`};		props.invalid ? `1px solid ${props.theme.formError}` : `none`};
width: 100%;		width: 100%;
▲ Show 20 Lines • Show All 273 Lines • Show Last 20 Lines