removed site's table and use Salt table

Author: mark-tate

site/src/components/components/PropsTable.tsx

@@ -1,7 +1,7 @@
+import { Table, TBody, TD, TH, THead, TR } from "@salt-ds/core";
 import dynamic from "next/dynamic";
 import { type FC, useEffect, useState } from "react";
 import { Code } from "../mdx/code";
-import { Table } from "../mdx/table";
 import styles from "./PropsTable.module.css";
 
 const Markdown = dynamic(import("../markdown/Markdown"));
@@ -77,33 +77,33 @@ export const PropsTable: FC<PropsTableType> = ({
 
   return (
     <Table>
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Type</th>
-          <th>Description</th>
-          <th>Default</th>
-        </tr>
-      </thead>
-      <tbody>
+      <THead>
+        <TR>
+          <TH>Name</TH>
+          <TH>Type</TH>
+          <TH>Description</TH>
+          <TH>Default</TH>
+        </TR>
+      </THead>
+      <TBody>
         {props &&
           Object.values(props).map(
             ({ name, type, description, defaultValue }) => (
-              <tr key={name}>
-                <td className={styles.overflowWrap}>{name}</td>
-                <td>
+              <TR key={name}>
+                <TD className={styles.overflowWrap}>{name}</TD>
+                <TD>
                   <Code>{type.name}</Code>
-                </td>
-                <td>
+                </TD>
+                <TD>
                   <Markdown>{description}</Markdown>
-                </td>
-                <td>
+                </TD>
+                <TD>
                   <Code>{defaultValue ? defaultValue.value : "-"}</Code>
-                </td>
-              </tr>
+                </TD>
+              </TR>
             ),
           )}
-      </tbody>
+      </TBody>
     </Table>
   );
 };

site/src/components/css-display/CharacteristicsTokenTable.tsx

@@ -4,11 +4,16 @@ import {
   SaltProviderNext,
   Spinner,
   StackLayout,
+  Table,
+  TBody,
+  TD,
+  TH,
+  THead,
+  TR,
 } from "@salt-ds/core";
 import { useEffect, useState } from "react";
 import { CopyToClipboard } from "../copy-to-clipboard";
 import { Code } from "../mdx/code";
-import { Table, Thead, Tr } from "../mdx/table";
 import { BlockView } from "./BlockView";
 import styles from "./CharacteristicsTokenTable.module.css";
 
@@ -76,31 +81,31 @@ export const CharacteristicsTokenTable = ({
 
   return (
     <Table>
-      <Thead>
-        <Tr>
-          <th>Preview</th>
-          <th>Token name & token value</th>
-        </Tr>
-      </Thead>
-      <tbody>
+      <THead>
+        <TR>
+          <TH>Preview</TH>
+          <TH>Token name & token value</TH>
+        </TR>
+      </THead>
+      <TBody>
         {Object.entries(cssVariablesData).map(([name, value]) => (
-          <Tr key={name}>
-            <td>
+          <TR key={name}>
+            <TD>
               <ChosenProvider theme="">
                 <BlockView name={name} />
               </ChosenProvider>
-            </td>
-            <td>
+            </TD>
+            <TD>
               <StackLayout gap={0} align="start">
                 <FlowLayout align="center" gap={1}>
                   <CopyToClipboard value={name} />
                 </FlowLayout>
                 <Code>{value}</Code>
               </StackLayout>
-            </td>
-          </Tr>
+            </TD>
+          </TR>
         ))}
-      </tbody>
+      </TBody>
     </Table>
   );
 };

site/src/components/keyboard-controls/KeyboardControls.tsx

@@ -1,6 +1,6 @@
+import { Table, TBody, TH, THead, TR } from "@salt-ds/core";
 import { clsx } from "clsx";
 import type { FC, ReactNode } from "react";
-import { Table } from "../mdx/table";
 import styles from "./KeyboardControls.module.css";
 
 export interface KeyboardControlsProps {
@@ -14,13 +14,13 @@ export const KeyboardControls: FC<KeyboardControlsProps> = ({
 }) => {
   return (
     <Table className={clsx(styles.table, className)}>
-      <thead>
-        <tr>
-          <th className={styles.keyCol}>Key</th>
+      <THead>
+        <TR>
+          <TH className={styles.keyCol}>Key</TH>
           <th>Function</th>
-        </tr>
-      </thead>
-      <tbody>{children}</tbody>
+        </TR>
+      </THead>
+      <TBody>{children}</TBody>
     </Table>
   );
 };

site/src/components/mdx/index.ts

@@ -1,3 +1,4 @@
+import { Table as table, THead as thead, TR as tr } from "@salt-ds/core";
 import { withAnchorHeading } from "./anchorHeading";
 import { Code as code } from "./code";
 import { Heading2 } from "./h2";
@@ -7,7 +8,6 @@ import { Image } from "./image";
 import { Link as a } from "./link";
 import { Paragraph as p } from "./p";
 import { Pre as pre } from "./pre";
-import { Table as table, Thead as thead, Tr as tr } from "./table";
 import { UnorderedList as ul } from "./ul";
 
 const h2 = withAnchorHeading(Heading2);