One 320-wide floating panel with a near-black edge: a title, a description, and a slot in the middle that the component deliberately leaves empty.
One component, no variants
Popover - none: 320 × 132 - base.popover on a 1px base.foreground edge, radius.lg, two drop shadows
Using the Popover
Why does it have no variants at all?
Because nothing about the panel changes. Size is set when you place it - the three panels in the usage frame are 320, 340 and 300 wide - and side and align are runtime props, decided by where the trigger happens to sit on screen. Drawing Top, Right, Bottom and Left as variants would be four copies of one shape.
Why a base.foreground border and not base.border?
Because a popover floats over content it does not own. A hairline grey edge lets it dissolve into whatever is behind it; the near-black line is what actually separates the two planes. The two drop shadows only lift it - they are not what defines the edge.
What is the grey block in the middle?
The content slot, and it is meant to be replaced. The component fixes the frame, the 16 of padding, the 8 gap and the type ramp, then hands you a base.muted rectangle reading "Your content goes here". Each usage panel swaps exactly that block: two labelled fields, a link beside a copy button, or a pair of buttons.
Why are the usage panels not instances of it?
A component copy in Penpot cannot take new children, so there is no way to drop two rows of fields into the content slot of an instance. The three panels are drawn locally for that reason. Everything inside them is shared, though - the fields are Input instances and the buttons are Button instances.