| 155 | } |
| 156 | |
| 157 | export function H4({children, ...props}) { |
| 158 | let {hoverProps, isHovered} = useHover({}); |
| 159 | let id = anchorId(children); |
| 160 | return ( |
| 161 | <h4 |
| 162 | {...props} |
| 163 | data-anchor-link |
| 164 | id={id} |
| 165 | className={style({ |
| 166 | font: 'heading-sm', |
| 167 | maxWidth: '--text-width', |
| 168 | marginX: 'auto', |
| 169 | textWrap: 'balance', |
| 170 | position: 'relative', |
| 171 | overflowX: 'clip' |
| 172 | })} |
| 173 | {...hoverProps}> |
| 174 | {children} |
| 175 | <AnchorLink anchorId={id} isHovered={isHovered} level={4} headingText={children} /> |
| 176 | </h4> |
| 177 | ); |
| 178 | } |
| 179 | |
| 180 | export function PageDescription(props: HTMLAttributes<HTMLParagraphElement>) { |
| 181 | return ( |