┌─ ASTRO ───────────────────────────────────────────────────────────────────[ COPY ]─┐
│ ---                                                                                │
│ import type { Props } from "./TextField";                                          │
│ import "./TextField.scss";                                                         │
│                                                                                    │
│ const { name, cells, type = "text", value } = Astro.props as Props;                │
│ const seat = "_".repeat(cells);                                                    │
│ ---                                                                                │
│ <input class="text-field" type={type} name={name} value={value} placeholder={seat} │
│  maxlength={cells} autocomplete="off" spellcheck="false" style={`width: calc(var(- │
│ -cell-w) * ${cells})`} aria-label={name} />                                        │
└────────────────────────────────────────────────────────────────────────────────────┘

┌─ ASTRO ─────────────────────────────[ COPY ]─┐
│ ---                                          │
│ import type { Props } from "./TextField";    │
│ import "./TextField.scss";                   │
│                                              │
│ const { name, cells, type = "text", value }  │
│ = Astro.props as Props;                      │
│ const seat = "_".repeat(cells);              │
│ ---                                          │
│ <input class="text-field" type={type} name={ │
│ name} value={value} placeholder={seat} maxle │
│ ngth={cells} autocomplete="off" spellcheck=" │
│ false" style={`width: calc(var(--cell-w) * $ │
│ {cells})`} aria-label={name} />              │
└──────────────────────────────────────────────┘