| 105 | } |
| 106 | |
| 107 | export function H2({children, ...props}) { |
| 108 | let {hoverProps, isHovered} = useHover({}); |
| 109 | let id = anchorId(children); |
| 110 | return ( |
| 111 | <h2 |
| 112 | {...props} |
| 113 | data-anchor-link |
| 114 | id={id} |
| 115 | className={style({ |
| 116 | font: 'heading-lg', |
| 117 | marginTop: 48, |
| 118 | marginBottom: 24, |
| 119 | maxWidth: '--text-width', |
| 120 | marginX: 'auto', |
| 121 | textWrap: 'balance', |
| 122 | position: 'relative', |
| 123 | overflowX: 'clip' |
| 124 | })} |
| 125 | {...hoverProps}> |
| 126 | {children} |
| 127 | <AnchorLink anchorId={id} isHovered={isHovered} level={2} headingText={children} /> |
| 128 | </h2> |
| 129 | ); |
| 130 | } |
| 131 | |
| 132 | export function H3({children, ...props}) { |
| 133 | let {hoverProps, isHovered} = useHover({}); |