| 130 | } |
| 131 | |
| 132 | export function H3({children, ...props}) { |
| 133 | let {hoverProps, isHovered} = useHover({}); |
| 134 | let id = anchorId(children); |
| 135 | return ( |
| 136 | <h3 |
| 137 | {...props} |
| 138 | data-anchor-link |
| 139 | id={id} |
| 140 | className={style({ |
| 141 | font: 'heading', |
| 142 | marginTop: 36, |
| 143 | marginBottom: 24, |
| 144 | maxWidth: '--text-width', |
| 145 | marginX: 'auto', |
| 146 | textWrap: 'balance', |
| 147 | position: 'relative', |
| 148 | overflowX: {default: 'clip', ':has([data-step])': 'visible'} |
| 149 | })} |
| 150 | {...hoverProps}> |
| 151 | {children} |
| 152 | <AnchorLink anchorId={id} isHovered={isHovered} level={3} headingText={children} /> |
| 153 | </h3> |
| 154 | ); |
| 155 | } |
| 156 | |
| 157 | export function H4({children, ...props}) { |
| 158 | let {hoverProps, isHovered} = useHover({}); |