scoobie 18.2.0 → 19.0.0

package/README.md

@@ -78,16 +78,33 @@ export const MyFirstBlockquote = () => (
 
 ### CodeBlock
 
-Render lines of code with [Prism] syntax highlighting.
-
-[prism]: https://github.com/PrismJS/prism
+Render a rich [`CodeContainer`](#codecontainer) with interactive copy & GraphQL playground link buttons.
 
 ```tsx
 import React from 'react';
 import { CodeBlock } from 'scoobie';
 
 export const MyFirstCodeBlock = () => (
-  <CodeBlock language="javascript">console.log('hello, world');</CodeBlock>
+  <CodeBlock language="javascript" label="Here is the code">
+    console.log('hello, world');
+  </CodeBlock>
+);
+```
+
+### CodeContainer
+
+Render code with [Prism] syntax highlighting, with optional `lineNumbers`.
+
+[prism]: https://github.com/PrismJS/prism
+
+```tsx
+import React from 'react';
+import { CodeContainer } from 'scoobie';
+
+export const MyFirstCodeContainer = () => (
+  <CodeContainer language="javascript">
+    console.log('hello, world');
+  </CodeContainer>
 );
 ```
 
@@ -217,33 +234,6 @@ export const SomeLinks = () => (
 );
 ```
 
-### Table
-
-```tsx
-import React, { Fragment } from 'react';
-import { Table, TableRow } from 'scoobie';
-
-export const MyFirstTable = () => (
-  <Table header={['Column A', 'Column B']}>
-    <TableRow>
-      <Fragment>This is body cell A1.</Fragment>
-      <Fragment>B1</Fragment>
-    </TableRow>
-
-    <TableRow>
-      <Fragment>A2</Fragment>
-      <Fragment>This is body cell B2.</Fragment>
-    </TableRow>
-  </Table>
-);
-```
-
-### TableRow
-
-`<tr>` component for use with [Table](#table).
-
-Row children are flattened then wrapped with `<td>`s.
-
 ## Styling reference
 
 Scoobie distributes some vanilla-extract styles via `scoobie/styles` submodules.

package/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "main": "src/index.ts",
   "sideEffects": false,
-  "version": "18.2.0",
+  "version": "19.0.0",
   "dependencies": {
     "@capsizecss/core": "^4.0.0",
     "@vanilla-extract/css": "^1.2.3",
@@ -55,13 +55,13 @@
   "scripts": {
     "format": "sku format",
     "lint": "sku lint",
-    "loki:test": "loki test --host host.docker.internal --port 8081",
+    "loki:test": "loki test --port 12228",
     "loki:test:ci": "cp -R dist-storybook/. dist-storybook-tmp/ && loki --requireReference --reactUri file:./dist-storybook-tmp --chromeFlags='--headless --hide-scrollbars --no-sandbox'",
-    "loki:update": "loki update --host host.docker.internal --port 8081",
+    "loki:update": "loki update --port 12228",
     "release": "changeset publish",
     "stage": "changeset version && yarn format",
     "storybook:build": "storybook build --output-dir dist-storybook",
-    "storybook:start": "storybook dev",
+    "storybook:start": "storybook dev --port 12228",
     "test": "sku test",
     "test:ci": "sku test --coverage"
   },

package/src/components/Blockquote.tsx

@@ -1,27 +1,19 @@
 import { Box, Heading, Secondary, Stack } from 'braid-design-system';
-import React from 'react';
 
-import { DEFAULT_SIZE, SIZE_TO_SPACE, type Size } from '../private/size';
 import type { StackChildrenProps } from '../private/types';
 
 import * as styles from './Blockquote.css';
 
-interface Props extends StackChildrenProps {
-  size: Size;
-}
+interface Props extends StackChildrenProps {}
 
-export const Blockquote = ({ children, size = DEFAULT_SIZE }: Props) => {
-  const space = SIZE_TO_SPACE[size];
+export const Blockquote = ({ children }: Props) => (
+  <Box className={styles.quoteBlock} padding="medium">
+    <Stack space="medium">{children}</Stack>
 
-  return (
-    <Box className={styles.quoteBlock} padding={space}>
-      <Stack space={space}>{children}</Stack>
-
-      <Box position="absolute" right={0} top={0} userSelect="none" zIndex={0}>
-        <Heading component="div" level="2">
-          <Secondary>”</Secondary>
-        </Heading>
-      </Box>
+    <Box position="absolute" right={0} top={0} userSelect="none" zIndex={0}>
+      <Heading component="div" level="2">
+        <Secondary>”</Secondary>
+      </Heading>
     </Box>
-  );
-};
+  </Box>
+);

package/src/components/CodeBlock/GraphQLPlaygroundAction.tsx

@@ -1,30 +1,23 @@
 import { IconVideo, Text, TextLink } from 'braid-design-system';
-import React from 'react';
-
-import { SIZE_TO_SMALLER, type Size } from '../../private/size';
 
 interface Props {
   query: string;
   variables: string | undefined;
   graphqlPlayground: string;
-  size: Size;
 }
 
 export const GraphQLPlaygroundAction = ({
   query,
   variables,
   graphqlPlayground,
-  size,
 }: Props) => {
   const playgroundUrl = new URL(graphqlPlayground);
   playgroundUrl.searchParams.set('query', query);
   playgroundUrl.searchParams.set('variables', variables ?? '{}');
   const href = playgroundUrl.toString();
 
-  const smallerSize = SIZE_TO_SMALLER[size];
-
   return (
-    <Text size={smallerSize} weight="medium">
+    <Text size="small" weight="medium">
       <TextLink
         href={href}
         icon={<IconVideo alignY="lowercase" />}

package/src/components/CodeBlock.tsx

@@ -1,35 +1,22 @@
 import { Box, Stack, Text, TextLinkButton } from 'braid-design-system';
 import { parse } from 'jsonc-parser';
-import { Highlight } from 'prism-react-renderer';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
-import { Prism, themes } from '../private/Prism';
 import { ScrollableInline } from '../private/ScrollableInline';
-import {
-  DEFAULT_SIZE,
-  SIZE_TO_SMALLER,
-  SIZE_TO_TABLE_PADDING,
-  type Size,
-} from '../private/size';
 
 import { type CodeChildProps, normaliseChildren } from './CodeBlock/CodeChild';
 import { GraphQLPlaygroundAction } from './CodeBlock/GraphQLPlaygroundAction';
-import { LineNumbers } from './CodeBlock/LineNumbers';
-import { Lines } from './CodeBlock/Lines';
+import { CodeContainer } from './CodeContainer';
 import { CopyableText } from './CopyableText';
 
-import * as styles from './CodeBlock.css';
-
 interface Props {
   children: readonly CodeChildProps[] | string;
   graphqlPlayground?: string;
   initialIndex?: number;
-  label?: string;
-  language?: string;
-  size?: Size;
+  label: string;
+  language: string;
   trim?: boolean;
   lineNumbers?: boolean;
-  copy?: boolean;
 }
 
 export const CodeBlock = ({
@@ -38,10 +25,8 @@ export const CodeBlock = ({
   initialIndex = 0,
   label: rawLabel,
   language: rawLanguage,
-  size = DEFAULT_SIZE,
   trim = true,
   lineNumbers = true,
-  copy = true,
 }: Props) => {
   const children = normaliseChildren(
     typeof rawChildren === 'string'
@@ -56,9 +41,6 @@ export const CodeBlock = ({
     trim,
   );
 
-  const smallerSize = SIZE_TO_SMALLER[size];
-  const tablePadding = SIZE_TO_TABLE_PADDING[size];
-
   const [index, setIndex] = useState({ dirty: false, value: initialIndex });
 
   useEffect(
@@ -84,87 +66,64 @@ export const CodeBlock = ({
 
   const graphqlPlaygroundButton =
     children[0].language === 'graphql' && graphqlPlayground ? (
-      <Box component="span" paddingLeft={tablePadding}>
+      <Box component="span" paddingLeft="small">
         <GraphQLPlaygroundAction
           graphqlPlayground={graphqlPlayground}
-          size={size}
           query={children[0].code}
           variables={variables}
         />
       </Box>
     ) : undefined;
 
-  const topRow =
-    children.some(({ label }) => label) || copy || graphqlPlaygroundButton;
-
   return (
-    <Stack space={tablePadding}>
-      {topRow ? (
-        <ScrollableInline whiteSpace="nowrap">
-          <Box display="flex" justifyContent="spaceBetween">
-            <Box display="flex">
-              {children.map(({ label }, labelIndex) =>
-                label ? (
-                  <Box
-                    component="span"
-                    key={label}
-                    paddingLeft={labelIndex === 0 ? undefined : tablePadding}
+    <Stack space="small">
+      <ScrollableInline whiteSpace="nowrap">
+        <Box display="flex" justifyContent="spaceBetween">
+          <Box display="flex">
+            {children.map(({ label }, labelIndex) =>
+              label ? (
+                <Box
+                  component="span"
+                  key={label}
+                  paddingLeft={labelIndex === 0 ? undefined : 'small'}
+                >
+                  <Text
+                    size="small"
+                    tone={index.value === labelIndex ? 'secondary' : undefined}
+                    weight="medium"
                   >
-                    <Text
-                      size={smallerSize}
-                      tone={
-                        index.value === labelIndex ? 'secondary' : undefined
-                      }
-                      weight="medium"
-                    >
-                      {children.length === 1 || index.value === labelIndex ? (
-                        label
-                      ) : (
-                        <TextLinkButton
-                          onClick={() =>
-                            setIndex({ dirty: true, value: labelIndex })
-                          }
-                        >
-                          {label}
-                        </TextLinkButton>
-                      )}
-                    </Text>
-                  </Box>
-                ) : null,
-              )}
-            </Box>
-
-            <Box display="flex">
-              {copy ? (
-                <Box component="span" paddingLeft={tablePadding}>
-                  <CopyableText size={smallerSize}>{child.code}</CopyableText>
+                    {children.length === 1 || index.value === labelIndex ? (
+                      label
+                    ) : (
+                      <TextLinkButton
+                        onClick={() =>
+                          setIndex({ dirty: true, value: labelIndex })
+                        }
+                      >
+                        {label}
+                      </TextLinkButton>
+                    )}
+                  </Text>
                 </Box>
-              ) : null}
-
-              {graphqlPlaygroundButton}
-            </Box>
+              ) : null,
+            )}
           </Box>
-        </ScrollableInline>
-      ) : null}
-
-      <Box borderRadius="large" className={styles.codeContainer}>
-        <Highlight
-          prism={Prism}
-          code={child.code}
-          language={child.language}
-          theme={themes.github}
-        >
-          {({ getTokenProps, tokens }) => (
-            <Box display="flex">
-              {lineNumbers ? (
-                <LineNumbers count={tokens.length} size={size} />
-              ) : null}
 
-              <Lines getTokenProps={getTokenProps} lines={tokens} size={size} />
+          <Box display="flex">
+            <Box component="span" paddingLeft="small">
+              <CopyableText size="small">{child.code}</CopyableText>
             </Box>
-          )}
-        </Highlight>
-      </Box>
+
+            {graphqlPlaygroundButton}
+          </Box>
+        </Box>
+      </ScrollableInline>
+
+      <CodeContainer
+        code={child.code}
+        language={child.language}
+        lineNumbers={lineNumbers}
+      />
     </Stack>
   );
 };

package/src/components/{CodeBlock.css.ts → CodeContainer.css.ts}

@@ -1,4 +1,4 @@
-import { composeStyles, style } from '@vanilla-extract/css';
+import { style } from '@vanilla-extract/css';
 import { calc } from '@vanilla-extract/css-utils';
 import { responsiveStyle, vars } from 'braid-design-system/css';
 import { darken } from 'polished';
@@ -13,26 +13,24 @@ export const lineNumberContainer = style({
   userSelect: 'none',
 });
 
-export const codeContainer = composeStyles(
-  style({
+export const codeContainer = style([
+  {
     backgroundColor: codeBackgroundColor,
     borderColor: darken(0.05, codeBackgroundColor),
     borderStyle: 'solid',
     borderWidth: vars.borderWidth.standard,
 
     overflow: 'auto',
-  }),
+  },
 
-  style(
-    responsiveStyle({
-      mobile: {
-        // Roughly 15 lines of code at standard size.
-        maxHeight: calc.multiply(vars.grid, 90),
-      },
-      tablet: {
-        // Roughly 30 lines of code at standard size.
-        maxHeight: calc.multiply(vars.grid, 172),
-      },
-    }),
-  ),
-);
+  responsiveStyle({
+    mobile: {
+      // Roughly 15 lines of code at standard size.
+      maxHeight: calc.multiply(vars.grid, 90),
+    },
+    tablet: {
+      // Roughly 30 lines of code at standard size.
+      maxHeight: calc.multiply(vars.grid, 172),
+    },
+  }),
+]);

package/src/components/CodeContainer.tsx

@@ -0,0 +1,78 @@
+import { Box, Stack } from 'braid-design-system';
+import { Highlight, type Token } from 'prism-react-renderer';
+
+import { Prism, themes } from '../private/Prism';
+
+import * as styles from './CodeContainer.css';
+import * as codeStyles from '../../styles/code.css';
+
+export const CodeContainer = ({
+  code,
+  language,
+  lineNumbers,
+}: {
+  code: string;
+  language: string;
+  lineNumbers?: boolean;
+}) => (
+  <Box borderRadius="large" className={styles.codeContainer}>
+    <Highlight
+      prism={Prism}
+      code={code}
+      language={language}
+      theme={themes.github}
+    >
+      {({ getTokenProps, tokens }) => (
+        <Box display="flex">
+          {lineNumbers ? <LineNumbers count={tokens.length} /> : null}
+
+          <Lines getTokenProps={getTokenProps} lines={tokens} />
+        </Box>
+      )}
+    </Highlight>
+  </Box>
+);
+
+const LineNumbers = ({ count }: { count: number }) => {
+  const numbers = [...new Array(count)].map((_, index) => index + 1);
+
+  return (
+    <Box aria-hidden className={styles.lineNumberContainer} padding="medium">
+      <Stack align="right" space="small">
+        {numbers.map((number) => (
+          <Box className={codeStyles.code} key={number}>
+            <Box component="pre">{number}</Box>
+          </Box>
+        ))}
+      </Stack>
+    </Box>
+  );
+};
+
+type HighlightProps = Parameters<
+  Parameters<typeof Highlight>[0]['children']
+>[0];
+
+const Lines = ({
+  getTokenProps,
+  lines,
+}: {
+  getTokenProps: HighlightProps['getTokenProps'];
+  lines: Token[][];
+}) => (
+  <Box padding="medium">
+    <Stack space="small">
+      {lines.map((line, lineIndex) => (
+        <Box className={codeStyles.code} key={lineIndex}>
+          <Box component="pre">
+            {line.map((token, tokenIndex) => {
+              const props = getTokenProps({ token });
+
+              return <Box component="span" {...props} key={tokenIndex} />;
+            })}
+          </Box>
+        </Box>
+      ))}
+    </Stack>
+  </Box>
+);

package/src/index.ts

@@ -1,10 +1,9 @@
 export { Blockquote } from './components/Blockquote';
 export { CodeBlock } from './components/CodeBlock';
+export { CodeContainer } from './components/CodeContainer';
 export { CopyableText } from './components/CopyableText';
 export { InlineCode } from './components/InlineCode';
 export { InternalLink } from './components/InternalLink';
 export { ScoobieLink } from './components/ScoobieLink';
 export { ScoobieLinkProvider } from './components/ScoobieLinkProvider';
 export { SmartTextLink } from './components/SmartTextLink';
-export { Table } from './components/Table';
-export { TableRow } from './components/TableRow';

package/styles/code.css.ts

@@ -1,9 +1,7 @@
 import { createStyleObject, getCapHeight } from '@capsizecss/core';
-import { styleVariants } from '@vanilla-extract/css';
+import { style } from '@vanilla-extract/css';
 import { responsiveStyle } from 'braid-design-system/css';
 
-import type { Size } from '../src/private/size';
-
 import { monospaceFontFamily } from '.';
 
 // Roboto Mono metrics from seek-oss.github.io/capsize
@@ -26,53 +24,33 @@ const tokens = {
   grid: 4,
   typography: {
     code: {
-      // Matches `small` text
-      standard: {
-        mobile: {
-          fontSize: 14,
-          rows: 5,
-        },
-        tablet: {
-          fontSize: 14,
-          rows: 5,
-        },
+      mobile: {
+        fontSize: 14,
+        rows: 5,
       },
-      // Matches `standard` text
-      large: {
-        mobile: {
-          fontSize: 16,
-          rows: 6,
-        },
-        tablet: {
-          fontSize: 16,
-          rows: 6,
-        },
+      tablet: {
+        fontSize: 14,
+        rows: 5,
       },
     },
   },
 };
 
-const monospaceFontStylesForTarget = (
-  size: Size,
-  target: 'mobile' | 'tablet',
-) =>
+const monospaceFontStylesForTarget = (target: 'mobile' | 'tablet') =>
   createStyleObject({
     capHeight: getCapHeight({
-      fontSize: tokens.typography.code[size][target].fontSize,
+      fontSize: tokens.typography.code[target].fontSize,
       fontMetrics: monospaceFontMetrics,
     }),
     fontMetrics: monospaceFontMetrics,
-    leading: tokens.typography.code[size][target].rows * tokens.grid,
+    leading: tokens.typography.code[target].rows * tokens.grid,
   });
 
-export const code = styleVariants(
-  { standard: null, large: null },
-  (_, size) => ({
-    fontFamily: monospaceFontFamily,
+export const code = style({
+  fontFamily: monospaceFontFamily,
 
-    ...responsiveStyle({
-      mobile: monospaceFontStylesForTarget(size, 'mobile'),
-      tablet: monospaceFontStylesForTarget(size, 'tablet'),
-    }),
+  ...responsiveStyle({
+    mobile: monospaceFontStylesForTarget('mobile'),
+    tablet: monospaceFontStylesForTarget('tablet'),
   }),
-);
+});

package/src/components/CodeBlock/LineNumbers.tsx

@@ -1,28 +0,0 @@
-import { Box, Stack } from 'braid-design-system';
-import React from 'react';
-
-import type { Size } from '../../private/size';
-
-import { code } from '../../../styles/code.css';
-import * as styles from '../CodeBlock.css';
-
-interface Props {
-  count: number;
-  size: Size;
-}
-
-export const LineNumbers = ({ count, size }: Props) => {
-  const numbers = [...new Array(count)].map((_, index) => index + 1);
-
-  return (
-    <Box aria-hidden className={styles.lineNumberContainer} padding="medium">
-      <Stack align="right" space="small">
-        {numbers.map((number) => (
-          <Box className={code[size]} key={number}>
-            <Box component="pre">{number}</Box>
-          </Box>
-        ))}
-      </Stack>
-    </Box>
-  );
-};

package/src/components/CodeBlock/Lines.tsx

@@ -1,35 +0,0 @@
-import { Box, Stack } from 'braid-design-system';
-import type { Highlight } from 'prism-react-renderer';
-import React from 'react';
-
-import type { Size } from '../../private/size';
-
-import { code } from '../../../styles/code.css';
-
-type Highlight = Parameters<Parameters<typeof Highlight>[0]['children']>[0];
-
-type Token = Parameters<Highlight['getTokenProps']>[0]['token'];
-
-interface Props {
-  getTokenProps: Highlight['getTokenProps'];
-  lines: Token[][];
-  size: Size;
-}
-
-export const Lines = ({ getTokenProps, lines, size }: Props) => (
-  <Box padding="medium">
-    <Stack space="small">
-      {lines.map((line, lineIndex) => (
-        <Box className={code[size]} key={lineIndex}>
-          <Box component="pre">
-            {line.map((token, tokenIndex) => {
-              const props = getTokenProps({ token });
-
-              return <Box component="span" {...props} key={tokenIndex} />;
-            })}
-          </Box>
-        </Box>
-      ))}
-    </Stack>
-  </Box>
-);

package/src/components/Table.tsx

@@ -1,71 +0,0 @@
-import { Box, type Stack } from 'braid-design-system';
-import React, { type ComponentProps, type ReactNode } from 'react';
-
-import { BaseTable } from '../private/Table';
-import {
-  DEFAULT_TABLE_TYPE,
-  type TableAlign,
-  TableContext,
-  type TableType,
-} from '../private/TableContext';
-import { DEFAULT_SIZE, type Size } from '../private/size';
-
-import { TableRow } from './TableRow';
-
-interface BaseProps {
-  align?: readonly TableAlign[];
-  children: ReactNode;
-  header: ComponentProps<typeof Stack>['children'] | readonly string[];
-  size?: Size;
-  type?: TableType;
-  width?: 'full';
-}
-
-type Props = BaseProps &
-  (
-    | {
-        overflowX: 'scroll';
-        whiteSpace?: 'nowrap';
-      }
-    | {
-        overflowX?: never;
-        whiteSpace?: never;
-      }
-  );
-
-export const Table = ({
-  align,
-  children,
-  header,
-  overflowX,
-  size = DEFAULT_SIZE,
-  type = DEFAULT_TABLE_TYPE,
-  whiteSpace,
-  width,
-}: Props) => (
-  <BaseTable overflowX={overflowX} whiteSpace={whiteSpace} width={width}>
-    <TableContext.Provider
-      value={{
-        align,
-        component: 'th',
-        size,
-        type,
-      }}
-    >
-      <Box component="thead">
-        <TableRow>{header}</TableRow>
-      </Box>
-    </TableContext.Provider>
-
-    <TableContext.Provider
-      value={{
-        align,
-        component: 'td',
-        size,
-        type,
-      }}
-    >
-      <Box component="tbody">{children}</Box>
-    </TableContext.Provider>
-  </BaseTable>
-);

package/src/components/TableRow.tsx

@@ -1,32 +0,0 @@
-import { type Stack, Text } from 'braid-design-system';
-import React, { Children, type ComponentProps, useContext } from 'react';
-import flattenChildren from 'react-keyed-flatten-children';
-
-import { TableCell } from '../private/TableCell';
-import { TableContext } from '../private/TableContext';
-import { BaseTableRow } from '../private/TableRow';
-
-interface Props {
-  children: ComponentProps<typeof Stack>['children'] | readonly string[];
-  selected?: boolean;
-}
-
-export const TableRow = ({ children, selected }: Props) => {
-  const { align, component } = useContext(TableContext);
-
-  return (
-    <BaseTableRow selected={selected}>
-      {Children.map(flattenChildren(children), (child, index) => (
-        <TableCell align={align?.[index]} component={component}>
-          {typeof child === 'number' || typeof child === 'string' ? (
-            <Text weight={component === 'td' ? undefined : 'strong'}>
-              {child}
-            </Text>
-          ) : (
-            child
-          )}
-        </TableCell>
-      ))}
-    </BaseTableRow>
-  );
-};

package/src/private/Table.css.ts

@@ -1,10 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-export const fullWidth = style({
-  width: '100%',
-});
-
-export const table = style({
-  borderCollapse: 'separate',
-  borderSpacing: 0,
-});

package/src/private/Table.tsx

@@ -1,36 +0,0 @@
-import { Box } from 'braid-design-system';
-import React, { Fragment, type ReactNode } from 'react';
-
-import { ScrollableInline } from './ScrollableInline';
-
-import * as styles from './Table.css';
-
-interface BaseTableProps {
-  children: ReactNode;
-  overflowX?: 'scroll';
-  whiteSpace?: 'nowrap';
-  width?: 'full';
-}
-
-export const BaseTable = ({
-  children,
-  overflowX,
-  whiteSpace,
-  width,
-}: BaseTableProps) => {
-  const Wrapper = overflowX === 'scroll' ? ScrollableInline : Fragment;
-
-  return (
-    <Wrapper {...(overflowX === 'scroll' ? { whiteSpace } : {})}>
-      <Box
-        component="table"
-        className={{
-          [styles.table]: true,
-          [styles.fullWidth]: width === 'full',
-        }}
-      >
-        {children}
-      </Box>
-    </Wrapper>
-  );
-};

package/src/private/TableCell.css.ts

@@ -1,108 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-import { vars } from 'braid-design-system/css';
-
-import { SIZE_TO_TABLE_PADDING, type Size } from './size';
-
-import { tableRowSelection } from './TableRow.css';
-
-export const tableCell = styleVariants({
-  stripe: {
-    borderBottomWidth: vars.borderWidth.standard,
-    borderColor: vars.borderColor.neutralLight,
-    borderRightWidth: vars.borderWidth.standard,
-    borderStyle: 'solid',
-    verticalAlign: 'top',
-
-    ':first-child': {
-      borderLeftWidth: vars.borderWidth.standard,
-    },
-  },
-  subtle: {
-    borderBottomWidth: vars.borderWidth.standard,
-    borderColor: vars.borderColor.neutralLight,
-    borderStyle: 'solid',
-    verticalAlign: 'top',
-
-    ':first-child': {
-      paddingLeft: 0,
-    },
-
-    ':last-child': {
-      paddingRight: 0,
-    },
-  },
-});
-
-const tdForSize = (size: Size) =>
-  styleVariants({
-    stripe: {
-      selectors: {
-        [`${tableRowSelection} &:first-child`]: {
-          borderLeftColor: vars.borderColor.focus,
-          borderLeftWidth: vars.borderWidth.large,
-        },
-        [`${tableRowSelection} &:last-child`]: {
-          borderRightColor: vars.borderColor.focus,
-          borderRightWidth: vars.borderWidth.large,
-        },
-        'tr:last-child &:first-child': {
-          borderBottomLeftRadius: vars.borderRadius.large,
-        },
-        'tr:last-child &:last-child': {
-          borderBottomRightRadius: vars.borderRadius.large,
-        },
-      },
-    },
-    subtle: {
-      selectors: {
-        [`${tableRowSelection} &:first-child`]: {
-          borderLeftColor: vars.borderColor.focus,
-          borderLeftWidth: vars.borderWidth.large,
-          borderLeftStyle: 'solid',
-          paddingLeft: vars.space[SIZE_TO_TABLE_PADDING[size]],
-        },
-        [`${tableRowSelection} &:last-child`]: {
-          borderRightColor: vars.borderColor.focus,
-          borderRightWidth: vars.borderWidth.large,
-          borderRightStyle: 'solid',
-          paddingRight: vars.space[SIZE_TO_TABLE_PADDING[size]],
-        },
-        'tr:last-child &': {
-          borderBottomWidth: 0,
-          paddingBottom: 0,
-        },
-      },
-    },
-  });
-
-export const td = {
-  large: tdForSize('large'),
-  standard: tdForSize('standard'),
-};
-
-export const th = styleVariants({
-  stripe: {
-    selectors: {
-      'tr:first-child &': {
-        borderTopWidth: 1,
-      },
-      'tr:first-child &:first-child': {
-        borderTopLeftRadius: vars.borderRadius.large,
-      },
-      'tr:first-child &:last-child': {
-        borderTopRightRadius: vars.borderRadius.large,
-      },
-    },
-  },
-  subtle: {
-    selectors: {
-      'tr:first-child &': {
-        paddingTop: 0,
-      },
-      'tr:last-child &': {
-        borderBottomColor: vars.borderColor.field,
-        borderBottomWidth: vars.borderWidth.large,
-      },
-    },
-  },
-});

package/src/private/TableCell.tsx

@@ -1,34 +0,0 @@
-import { Box, Stack } from 'braid-design-system';
-import React, { useContext } from 'react';
-
-import { type TableAlign, TableContext } from './TableContext';
-import { SIZE_TO_SPACE, SIZE_TO_TABLE_PADDING } from './size';
-import type { StackChildrenProps } from './types';
-
-import * as styles from './TableCell.css';
-
-interface Props extends StackChildrenProps {
-  align?: TableAlign | null;
-  component: 'td' | 'th';
-}
-
-export const TableCell = ({ align, children, component }: Props) => {
-  const { size, type } = useContext(TableContext);
-
-  const padding = SIZE_TO_TABLE_PADDING[size];
-  const space = SIZE_TO_SPACE[size];
-
-  return (
-    <Box
-      className={[
-        styles.tableCell[type],
-        component === 'td' ? styles.td[size][type] : styles.th[type],
-      ]}
-      component={component}
-      padding={padding}
-      textAlign={align ?? (component === 'td' ? 'left' : 'center')}
-    >
-      <Stack space={space}>{children}</Stack>
-    </Box>
-  );
-};

package/src/private/TableContext.ts

@@ -1,26 +0,0 @@
-import { createContext } from 'react';
-
-import { DEFAULT_SIZE, type Size } from './size';
-
-interface TableContextValue {
-  align?: readonly TableAlign[];
-  component: TableCellComponent;
-  size: Size;
-  type: TableType;
-}
-
-export type TableAlign = 'left' | 'center' | 'right';
-
-type TableCellComponent = 'td' | 'th';
-
-export type TableType = 'stripe' | 'subtle';
-
-export const DEFAULT_TABLE_CELL_COMPONENT: TableCellComponent = 'td';
-
-export const DEFAULT_TABLE_TYPE: TableType = 'stripe';
-
-export const TableContext = createContext<TableContextValue>({
-  component: DEFAULT_TABLE_CELL_COMPONENT,
-  size: DEFAULT_SIZE,
-  type: DEFAULT_TABLE_TYPE,
-});

package/src/private/TableRow.css.ts

@@ -1,16 +0,0 @@
-import { style, styleVariants } from '@vanilla-extract/css';
-
-import { codeBackgroundColor } from '../../styles';
-
-export const tableRow = styleVariants({
-  stripe: {
-    selectors: {
-      'tbody &:nth-child(odd)': {
-        backgroundColor: codeBackgroundColor,
-      },
-    },
-  },
-  subtle: {},
-});
-
-export const tableRowSelection = style({});

package/src/private/TableRow.tsx

@@ -1,28 +0,0 @@
-import { Box } from 'braid-design-system';
-import React, { useContext } from 'react';
-
-import { TableContext } from '../private/TableContext';
-
-import type { StackChildrenProps } from './types';
-
-import * as styles from './TableRow.css';
-
-interface Props extends StackChildrenProps {
-  selected?: boolean;
-}
-
-export const BaseTableRow = ({ children, selected }: Props) => {
-  const { type } = useContext(TableContext);
-
-  return (
-    <Box
-      className={{
-        [styles.tableRow[type]]: true,
-        [styles.tableRowSelection]: selected,
-      }}
-      component="tr"
-    >
-      {children}
-    </Box>
-  );
-};

package/src/private/Wrapper.tsx

@@ -1,34 +0,0 @@
-import { Box, Stack } from 'braid-design-system';
-import React, { type FunctionComponent } from 'react';
-
-import { SIZE_TO_SPACE, type Size } from './size';
-import type { StackChildrenProps } from './types';
-
-import * as styles from './Wrapper.css';
-
-export type WrapperComponent = FunctionComponent<StackChildrenProps>;
-
-type WrapperProps = StackChildrenProps & {
-  component?: WrapperComponent;
-  size: Size;
-};
-
-export const Wrapper = ({
-  children,
-  component: Component,
-  size,
-}: WrapperProps) => {
-  const space = SIZE_TO_SPACE[size];
-
-  return (
-    <Box className={styles.wrapper}>
-      <Stack space={space}>
-        {typeof Component === 'undefined' ? (
-          children
-        ) : (
-          <Component>{children}</Component>
-        )}
-      </Stack>
-    </Box>
-  );
-};

package/src/private/size.ts

@@ -1,28 +0,0 @@
-type TablePadding = 'small' | 'medium';
-
-type Space = 'medium' | 'large';
-
-export const DEFAULT_SIZE: Size = 'standard';
-
-export const SIZES = ['standard', 'large'] as const;
-
-export const SMALLER_SIZES = ['small', 'standard'] as const;
-
-export type SmallerSize = (typeof SMALLER_SIZES)[number];
-
-export type Size = (typeof SIZES)[number];
-
-export const SIZE_TO_SMALLER: Record<Size, SmallerSize> = {
-  standard: 'small',
-  large: 'standard',
-};
-
-export const SIZE_TO_TABLE_PADDING: Record<Size, TablePadding> = {
-  standard: 'small',
-  large: 'medium',
-};
-
-export const SIZE_TO_SPACE: Record<Size, Space> = {
-  standard: 'medium',
-  large: 'large',
-};