Now I have the full spec. Let me build this item modifier panel. I'll create the components and page, plus generate a placeholder coffee image.

Now let me build all the components. I'll split this into well-organized component files:

Now let me update the page and layout:

The DEXA POS item modifier panel is built. Here's what I created across 7 component files:

• TopBar — "Back to Menu" link, neutral X cancel button, and teal "Done" primary action
• ItemIdentity — Cold brew image, name, description, and $4.75 base price in neutral text
• ModifierGroupTabs — Compact pill tabs with all 4 states: active+completed (teal tint), inactive+completed (green check), inactive+incomplete+required (amber dot), and inactive+incomplete+optional (neutral)
• ModifierChipsGrid — Generously-sized 60px-tall tappable chips with triple-signal selected state (teal tint bg, 2px teal border, teal text + check icon), amber surcharges for +$1.00 options
• QuantityStepper — Identical neutral rectangular +/- buttons with disabled state at quantity 1
• NotesInput — Single-line h-12 input with teal focus border

Every color, spacing, border weight, and interaction follows the spec exactly — zero pure black/white, teal as the sole accent, amber for surcharges and "Required" labels, and generous px-6/py-5 breathing room throughout.