The mobile package card was previously duplicated inline in both
ComparisonPage (V2) and ComparisonPageV1 — same ~250-line component
pasted twice. Extract it as a proper molecule so card-level tweaks
land in one file and both pages stay in sync.
New molecule: src/components/molecules/ComparisonPackageCard/ with
component, stories (Verified, Unverified, Recommended,
ItemizedUnavailable), and index. API reuses the existing
ComparisonPackage type from ComparisonTable.
Both pages drop their inline MobilePackageCard + MobileCellValue
helpers and a handful of now-unused imports (Tooltip, Badge, Divider,
several icons, ComparisonCellValue type).
The desktop column header inside ComparisonTable is left inline —
it's tightly coupled to the grid/sticky behaviour and has a floating
verified badge + Remove link that differ meaningfully from the mobile
card. Extracting both variants into one molecule would need an
awkward variant prop for marginal gain.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Richie
b7a2a4e136