{label} {#if required} * {/if} {#if type === 'textarea'}

{:else}
		<input
			id={name}
			{name}
			{type}
			{value}
			{placeholder}
			{required}
			{disabled}
			onchange={handleChange}
		/>
	{/if}

{#if error}
		<div class="error-text">{error}</div>
	{:else if helpText}
		<div class="help-text">{helpText}</div>
	{/if}
</div>

&.has-error {
			input,
			textarea {
				border-color: #c33;
			}
		}
	}

label {
		display: block;
		margin-bottom: $unit;
		font-weight: 500;
		color: $gray-20;

.required {
			color: #c33;
			margin-left: 2px;
		}
	}

input,
	textarea {
		width: 100%;
		padding: $unit-2x $unit-3x;
		border: 1px solid $gray-80;
		border-radius: 6px;
		font-size: 1rem;
		font-family: inherit;
		transition: border-color 0.2s ease;
		background-color: white;

&:focus {
			outline: none;
			border-color: $primary-color;
		}

&:disabled {
			background-color: $gray-95;
			cursor: not-allowed;
		}
	}

textarea {
		resize: vertical;
		min-height: 100px;
	}

.error-text {
		margin-top: $unit;
		color: #c33;
		font-size: 0.875rem;
	}

.help-text {
		margin-top: $unit;
		color: $gray-40;
		font-size: 0.875rem;
	}
</style>