1import { PropsWithChildren } from 'react'; 2 3import { HEADLINE } from '~/ui/components/Text'; 4 5type Props = PropsWithChildren<{ 6 label: string; 7}>; 8 9export const Step = ({ children, label }: Props) => { 10 return ( 11 <div className="flex gap-4 mt-6 mb-4"> 12 <HEADLINE className="flex min-w-[28px] h-7 bg-element rounded-full items-center justify-center mt-1"> 13 {label} 14 </HEADLINE> 15 <div className="pt-1.5 w-full max-w-[calc(100%-44px)] prose-headings:!-mt-1 prose-ul:!mb-0 prose-ol:!mb-0"> 16 {children} 17 </div> 18 </div> 19 ); 20}; 21