refactor(site/typography): rename Typography to typography, add index…

….ts like system, unify with export arrow func style

site/src/Typography/Heading.tsx → site/src/typography/Heading.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 
 import * as styles from './typography.css';
 import { Box } from '../system';
-import { sprinkles, Sprinkles } from '../system/styles/sprinkles.css';
+import { sprinkles, Sprinkles } from '../system/styles';
 
 export type HeadingLevel = keyof typeof styles.heading;
 

site/src/Typography/Link.tsx → site/src/typography/Link.tsx

@@ -1,11 +1,14 @@
-import { Link, LinkProps } from 'react-router-dom';
+import {
+  Link as RouterLink,
+  LinkProps as RouterLinkProps,
+} from 'react-router-dom';
 import { HashLink } from 'react-router-hash-link';
 import classnames from 'classnames';
 import { TextProps, useTextStyles } from './Text';
 import * as styles from './Link.css';
 import { sprinkles } from '../system/styles/sprinkles.css';
 
-interface Props extends LinkProps {
+export interface LinkProps extends RouterLinkProps {
   baseline?: boolean;
   size?: 'standard' | 'small' | 'xsmall';
   underline?: 'always' | 'hover' | 'never';
@@ -16,7 +19,7 @@ interface Props extends LinkProps {
   inline?: boolean;
   highlightOnFocus?: boolean;
 }
-export default ({
+export const Link = ({
   to,
   baseline = false,
   size = 'standard',
@@ -28,7 +31,7 @@ export default ({
   inline = false,
   className,
   ...restProps
-}: Props) => {
+}: LinkProps) => {
   const classNames = classnames(
     inline ? undefined : sprinkles({ display: 'block' }),
     underline === 'hover' ? styles.underlineOnHover : undefined,
@@ -47,7 +50,7 @@ export default ({
   }
 
   return (
-    <Link
+    <RouterLink
       onClick={() => window.scrollTo(0, 0)}
       to={to}
       {...restProps}

site/src/Typography/Text.tsx → site/src/typography/Text.tsx

@@ -42,7 +42,7 @@ export const useTextStyles = ({
     styles.weight[weight],
   );
 
-export default ({
+export const Text = ({
   component = 'span',
   size,
   color,

site/src/typography/index.ts

@@ -0,0 +1,8 @@
+export {
+  Heading,
+  useHeadingStyles,
+  type HeadingProps,
+  type HeadingLevel,
+} from './Heading';
+export { Link, type LinkProps } from './Link';
+export { Text, useTextStyles, type TextProps } from './Text';