updated pnpm-lock to ensure ts up to date

components/src/components/atoms/Banner/Banner.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import styled, { css } from 'styled-components'
 
-import { WithAlert, WithIcon } from '@/src/types'
+import { WithAlert, WithIcon } from '../../../types'
 
 import { Typography } from '../Typography'
 

docs/package.json

@@ -14,7 +14,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "@ensdomains/thorin": "workspace:components",
+    "@ensdomains/thorin": "workspace:*",
     "@reach/skip-nav": "^0.16.0",
     "@sindresorhus/slugify": "^2.1.0",
     "copy-to-clipboard": "^3.3.1",

docs/src/components/PropsTable.tsx

@@ -25,8 +25,7 @@ const Container = styled.div(
 )
 
 const TableHead = styled.th(
-  ({ theme }) => css`
-    background-color: ${theme.colors.background};
+  () => css`
     position: sticky;
     top: 0;
   `,
@@ -40,17 +39,17 @@ const TableHeadLabelContainer = styled.div<{
     text-transform: capitalize;
     background-color: ${theme.colors.greySurface};
     border-color: ${theme.colors.greyBright};
-    ${$i === 0 ? `border-left-radius: ${theme.radii['large']};` : ``}
+    ${$i === 0 ? `border-top-left-radius: ${theme.radii.card};` : ``}
     ${$i === $headers.length - 1
-      ? `border-right-radius: ${theme.radii['large']};`
+      ? `border-top-right-radius: ${theme.radii.card};`
       : ``}
       padding: ${theme.space['2.5']} ${theme.space['4']};
   `,
 )
 
 const Name = styled(Typography)(
   ({ theme }) => css`
-    color: ${theme.colors.text};
+    color: ${theme.colors.textPrimary};
     font-size: ${theme.fontSizes['small']};
   `,
 )
@@ -79,14 +78,14 @@ const DefaultValue = styled(Typography)(
 
 const Description = styled(Typography)(
   ({ theme }) => css`
-    color: ${theme.colors.textSecondary};
-    font-size: ${theme.fontSizes['small']};
+    color: ${theme.colors.greyPrimary};
+    font-size: ${theme.fontSizes.small};
   `,
 )
 
 const NoProps = styled(Typography)(
   ({ theme }) => css`
-    color: ${theme.colors.textSecondary};
+    color: ${theme.colors.greyPrimary};
   `,
 )
 
@@ -164,7 +163,6 @@ export const PropsTable = ({ sourceLink, types }: Props) => {
                 ))}
               </tr>
             </thead>
-
             <tbody>
               {props.map((x) => (
                 <tr
@@ -183,7 +181,13 @@ export const PropsTable = ({ sourceLink, types }: Props) => {
                   </DataCell>
 
                   <DataCell>
-                    <RawName>{formatPropType(x.type)}</RawName>
+                    <RawName
+                      color="accent"
+                      font="mono"
+                      typography="Small/Normal"
+                    >
+                      {formatPropType(x.type)}
+                    </RawName>
                   </DataCell>
 
                   <DataCell>

docs/src/reference/snippets/atoms/Banner.snippets.tsx

@@ -6,6 +6,6 @@ import { Snippet } from '../../../types'
 export const snippets: Snippet[] = [
   {
     name: 'Basic',
-    code: <Banner />,
+    code: <Banner message="Content here" />,
   },
 ]

docs/tsconfig.json

@@ -3,8 +3,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "~/*": ["./src/*"],
-      "@/*": ["../components/*"]
+      "~/*": ["./src/*"]
     },
     "incremental": true,
     "target": "esnext",