@props([
    'label' => null,
    'hint' => null,
    'for' => null,
])

{{-- One row of a settings panel: what it is on the left, the control on the
     right.

     The two-column shape is what uses the width. A single column of full-width
     inputs on a 1240px shell leaves two thirds of the line empty and makes a
     four-field form look like a questionnaire; a label column of 280px with the
     control beside it reads as a settings page and fits the screen it is on.

     Stacks below `sm`, because on a telephone the label belongs above its
     field. --}}
<div {{ $attributes->merge(['class' => 'grid gap-x-6 gap-y-2 px-6 py-4 sm:grid-cols-[minmax(0,280px)_minmax(0,1fr)] sm:items-start']) }}>
    @if ($label)
        <div class="min-w-0">
            <label @if ($for) for="{{ $for }}" @endif class="text-sm font-medium text-ink">{{ $label }}</label>
            @if ($hint)
                <p class="mt-0.5 text-xs leading-relaxed text-muted">{{ $hint }}</p>
            @endif
        </div>
    @endif
    <div class="min-w-0">{{ $slot }}</div>
</div>