@chronogrove/ui 0.78.0 → 0.80.0

package/src/lazy-load.spec.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, screen } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import LazyLoad from './lazy-load.js'
 
@@ -31,7 +31,7 @@ describe('LazyLoad', () => {
     expect(screen.queryByTestId('content')).not.toBeInTheDocument()
   })
 
-  it('renders the children when visible', () => {
+  it('renders the children when visible', async () => {
     mockInView = true
 
     render(
@@ -40,7 +40,9 @@ describe('LazyLoad', () => {
       </LazyLoad>
     )
 
-    expect(screen.getByTestId('content')).toBeInTheDocument()
+    await waitFor(() => {
+      expect(screen.getByTestId('content')).toBeInTheDocument()
+    })
   })
 
   it('renders the custom placeholder when provided', () => {
@@ -54,7 +56,7 @@ describe('LazyLoad', () => {
     expect(screen.queryByTestId('content')).not.toBeInTheDocument()
   })
 
-  it('does not re-render children if already visible', () => {
+  it('does not re-render children if already visible', async () => {
     mockInView = true
 
     const { rerender } = render(
@@ -63,7 +65,9 @@ describe('LazyLoad', () => {
       </LazyLoad>
     )
 
-    expect(screen.getByTestId('content')).toBeInTheDocument()
+    await waitFor(() => {
+      expect(screen.getByTestId('content')).toBeInTheDocument()
+    })
 
     mockInView = false
 

package/src/next/app-shell.js

@@ -0,0 +1,34 @@
+'use client'
+
+import { Box } from '@theme-ui/components'
+
+import { ChronogroveAnimatedPageBackground } from '../animated-page-background/index.js'
+import { useDocumentColorModeSurface } from '../color-mode/index.js'
+import { ChronogroveThemeProvider } from '../provider.js'
+import chronogroveTheme from '../theme.js'
+
+import { ChronogroveNextThemeUiColorModeRouteSync } from './theme-ui-color-mode-route-sync.js'
+
+/** Mirrors Gatsby `RootWrapper`: sync html class, data attribute, and surface bg from the live theme. */
+function DocumentColorModeSurface() {
+  useDocumentColorModeSurface()
+  return null
+}
+
+/**
+ * Default Next.js App Router shell: Theme UI provider, three.js Color Bends background (same as
+ * Gatsby home), document surface sync, and soft-navigation color-mode reconcile. Wrap with
+ * {@link ChronogroveNextEmotionRegistry} in `layout.jsx` outside this component.
+ */
+export function ChronogroveNextAppShell({ children, theme = chronogroveTheme }) {
+  return (
+    <ChronogroveThemeProvider theme={theme}>
+      <ChronogroveAnimatedPageBackground />
+      <DocumentColorModeSurface />
+      <Box sx={{ position: 'relative', zIndex: 1, bg: 'transparent', color: 'text' }}>
+        <ChronogroveNextThemeUiColorModeRouteSync />
+        {children}
+      </Box>
+    </ChronogroveThemeProvider>
+  )
+}

package/src/next/emotion-registry.js

@@ -0,0 +1,68 @@
+'use client'
+
+import * as React from 'react'
+import { CacheProvider } from '@emotion/react'
+import createCache from '@emotion/cache'
+import { useServerInsertedHTML } from 'next/navigation'
+
+/**
+ * Emotion cache for Next.js App Router: streaming SSR via `useServerInsertedHTML`, key `css`
+ * to match Theme UI / Chronogrove.
+ *
+ * Intercepts `cache.insert` and flushes only *new* rule names on each `useServerInsertedHTML`
+ * invocation. Do **not** use `Object.keys(cache.inserted)` (or similar) in the hook body — that
+ * re-emits every rule on every chunk during streaming SSR. Here, `flush()` drains a per-request
+ * queue so each rule is serialized once; `cache.inserted` stays as Emotion’s dedupe store.
+ *
+ * Next.js **pushes** a new callback from every render (`serverInsertedHTMLCallbacks.push`); all
+ * closures call the same `flush`, so only the first callback in a flush pass drains pending names.
+ *
+ * @see https://github.com/emotion-js/emotion/issues/2928
+ *
+ * @see https://nextjs.org/docs/app/building-your-application/styling/css-in-js
+ */
+export function ChronogroveNextEmotionRegistry({ children }) {
+  const [{ cache, flush }] = React.useState(() => {
+    const c = createCache({ key: 'css' })
+    c.compat = true
+    const prevInsert = c.insert
+    let pendingNames = []
+    c.insert = (...args) => {
+      const serialized = args[1]
+      if (serialized != null && c.inserted[serialized.name] === undefined) {
+        pendingNames.push(serialized.name)
+      }
+      return prevInsert(...args)
+    }
+    const flush = () => {
+      const names = pendingNames
+      pendingNames = []
+      return names
+    }
+    return { cache: c, flush }
+  })
+
+  useServerInsertedHTML(() => {
+    const names = flush()
+    if (names.length === 0) {
+      return null
+    }
+    let styles = ''
+    for (const name of names) {
+      const inserted = cache.inserted[name]
+      // `inserted` can be `true` for Global/keyframes when rules are already in a sheet (Next.js + Emotion pattern).
+      if (typeof inserted === 'string') {
+        styles += inserted
+      }
+    }
+    return (
+      <style
+        key={cache.key}
+        data-emotion={`${cache.key} ${names.join(' ')}`}
+        dangerouslySetInnerHTML={{ __html: styles }}
+      />
+    )
+  })
+
+  return <CacheProvider value={cache}>{children}</CacheProvider>
+}

package/src/next/emotion-registry.spec.js

@@ -0,0 +1,99 @@
+/**
+ * @jest-environment jsdom
+ */
+
+jest.mock('next/navigation', () => ({
+  useServerInsertedHTML: jest.fn()
+}))
+
+import React from 'react'
+import { render } from '@testing-library/react'
+import { Global, css } from '@emotion/react'
+import { useServerInsertedHTML } from 'next/navigation'
+
+import { ChronogroveNextEmotionRegistry } from './emotion-registry.js'
+
+/** `className={css({...})}` does not always hit `cache.insert` in Jest/jsdom; `Global` does. */
+function EmotionChild({ color }) {
+  return (
+    <Global
+      styles={css`
+        body {
+          color: ${color};
+        }
+      `}
+    />
+  )
+}
+
+describe('ChronogroveNextEmotionRegistry', () => {
+  let flushCallbacks
+
+  beforeEach(() => {
+    flushCallbacks = []
+    useServerInsertedHTML.mockImplementation(cb => {
+      flushCallbacks.push(cb)
+    })
+  })
+
+  it('flushes only new insertions per useServerInsertedHTML call (avoids duplicate style tags when streaming)', () => {
+    const { rerender } = render(
+      <ChronogroveNextEmotionRegistry>
+        <EmotionChild color='tomato' />
+      </ChronogroveNextEmotionRegistry>
+    )
+
+    const first = flushCallbacks[flushCallbacks.length - 1]()
+    expect(first).not.toBeNull()
+    // `cache.inserted[id]` can be `true` for Global in jsdom; must not stringify to invalid CSS.
+    expect(first.props.dangerouslySetInnerHTML.__html).not.toMatch(/^true+$/)
+
+    expect(flushCallbacks[flushCallbacks.length - 1]()).toBeNull()
+
+    rerender(
+      <ChronogroveNextEmotionRegistry>
+        <EmotionChild color='steelblue' />
+      </ChronogroveNextEmotionRegistry>
+    )
+
+    const afterNewRules = flushCallbacks[flushCallbacks.length - 1]()
+    expect(afterNewRules).not.toBeNull()
+    expect(flushCallbacks[flushCallbacks.length - 1]()).toBeNull()
+  })
+
+  /**
+   * Next.js registers `useServerInsertedHTML` once per render (`push` onto an array). All handlers
+   * share one `flush`; only the first invocation per drain should emit — not N copies of the full
+   * `cache.inserted` map.
+   */
+  it('drains pending styles once when multiple handlers run (matches Next.js callback stacking)', () => {
+    const { rerender } = render(
+      <ChronogroveNextEmotionRegistry>
+        <EmotionChild color='tomato' />
+      </ChronogroveNextEmotionRegistry>
+    )
+
+    expect(flushCallbacks).toHaveLength(1)
+
+    rerender(
+      <ChronogroveNextEmotionRegistry>
+        <EmotionChild color='tomato' />
+      </ChronogroveNextEmotionRegistry>
+    )
+    rerender(
+      <ChronogroveNextEmotionRegistry>
+        <EmotionChild color='tomato' />
+      </ChronogroveNextEmotionRegistry>
+    )
+
+    expect(flushCallbacks).toHaveLength(3)
+
+    const html0 = flushCallbacks[0]()
+    const html1 = flushCallbacks[1]()
+    const html2 = flushCallbacks[2]()
+
+    expect(html0).not.toBeNull()
+    expect(html1).toBeNull()
+    expect(html2).toBeNull()
+  })
+})

package/src/next/index.js

@@ -0,0 +1,4 @@
+export { ChronogroveNextAppShell } from './app-shell.js'
+export { ChronogroveNextEmotionRegistry } from './emotion-registry.js'
+export { ChronogroveNextRootLayoutHead } from './root-layout-head.js'
+export { ChronogroveNextThemeUiColorModeRouteSync } from './theme-ui-color-mode-route-sync.js'

package/src/next/root-layout-head.js

@@ -0,0 +1,42 @@
+import {
+  chronogroveHeadTheme,
+  resolveChronogroveSurfaceColors,
+  buildThemeUiNoFlashInlineScript,
+  buildHtmlBackgroundInlineScript,
+  buildThemeUiColorModeFallbackCss
+} from '../color-mode/index.js'
+
+/**
+ * Server Component fragment for the root `<head>`: Emotion insertion point, Theme UI no-flash
+ * script, HTML background script, and fallback CSS (same composition as
+ * `buildThemeUiColorModeHeadComponents` for Gatsby).
+ */
+export function ChronogroveNextRootLayoutHead() {
+  const surface = resolveChronogroveSurfaceColors(chronogroveHeadTheme)
+  const colorModeScript = buildThemeUiNoFlashInlineScript()
+  const htmlBackgroundScript = buildHtmlBackgroundInlineScript({
+    defaultBackgroundHex: surface.defaultBackgroundHex,
+    darkBackgroundHex: surface.darkBackgroundHex
+  })
+  const colorModeFallbackCSS = buildThemeUiColorModeFallbackCss({
+    defaultBackgroundHex: surface.defaultBackgroundHex,
+    darkBackgroundHex: surface.darkBackgroundHex,
+    defaultTextHex: surface.defaultTextHex,
+    defaultTextMutedHex: surface.defaultTextMutedHex,
+    darkTextHex: surface.darkTextHex,
+    darkTextMutedHex: surface.darkTextMutedHex,
+    defaultPanelBackground: surface.defaultPanelBackground,
+    darkPanelBackground: surface.darkPanelBackground,
+    defaultPanelText: surface.defaultPanelText,
+    darkPanelText: surface.darkPanelText
+  })
+
+  return (
+    <>
+      <meta name='emotion-insertion-point' content='' />
+      <script dangerouslySetInnerHTML={{ __html: colorModeScript }} />
+      <script dangerouslySetInnerHTML={{ __html: htmlBackgroundScript }} />
+      <style dangerouslySetInnerHTML={{ __html: colorModeFallbackCSS }} />
+    </>
+  )
+}

package/src/next/root-layout-head.spec.js

@@ -0,0 +1,17 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { ChronogroveNextRootLayoutHead } from './root-layout-head.js'
+
+describe('ChronogroveNextRootLayoutHead', () => {
+  it('emits scripts and fallback CSS (meta belongs in document <head> in real App Router layouts)', () => {
+    const { container } = render(<ChronogroveNextRootLayoutHead />)
+    // RTL renders into a div; React omits invalid <meta> there — in Next, `<head><ChronogroveNextRootLayoutHead /></head>` keeps the meta.
+    expect(container.querySelectorAll('script')).toHaveLength(2)
+    expect(container.querySelector('style')).toBeTruthy()
+    expect(container.textContent).toMatch(/theme-ui-color-mode/)
+  })
+})

package/src/next/theme-ui-color-mode-route-sync.js

@@ -0,0 +1,32 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+import { usePathname } from 'next/navigation'
+
+import { reconcileThemeUiColorModeOnNavigation } from '../color-mode/index.js'
+
+/**
+ * Keeps Theme UI color mode aligned after Next.js **client-side navigations** (same role as Gatsby
+ * `onRouteUpdate`). Do **not** run on initial mount: `reconcileThemeUiColorModeOnNavigation` syncs the
+ * DOM from `localStorage`, while Theme UI applies a toggle by updating React state first and writing
+ * `localStorage` in a `useEffect` — an eager reconcile can re-read stale `localStorage` and force
+ * the page back to the previous mode (e.g. stuck in dark).
+ */
+export function ChronogroveNextThemeUiColorModeRouteSync() {
+  const pathname = usePathname()
+  const previousPathname = useRef(null)
+
+  useEffect(() => {
+    if (previousPathname.current === null) {
+      previousPathname.current = pathname
+      return
+    }
+    if (previousPathname.current === pathname) {
+      return
+    }
+    previousPathname.current = pathname
+    reconcileThemeUiColorModeOnNavigation()
+  }, [pathname])
+
+  return null
+}

package/src/page-backdrop.js

@@ -0,0 +1,42 @@
+'use client'
+
+import { Box } from '@theme-ui/components'
+import { useColorMode } from 'theme-ui'
+
+import isDarkMode from './helpers/isDarkMode.js'
+
+/**
+ * Fixed viewport layer behind page content (`z-index: 0`), matching the role of
+ * `AnimatedPageBackground` on the Gatsby home: a real surface under `z-index: 1` UI so
+ * frosted panels (`backdrop-filter` + `panel-background`) have something to blur and tint
+ * against. The full site uses WebGL Color Bends there; this package ships a **lightweight**
+ * CSS gradient treatment only (no three.js).
+ */
+export function ChronogrovePageBackdrop() {
+  const [colorMode] = useColorMode()
+  const dark = isDarkMode(colorMode)
+
+  return (
+    <Box
+      aria-hidden
+      sx={{
+        position: 'fixed',
+        inset: 0,
+        width: '100vw',
+        minHeight: '100vh',
+        zIndex: 0,
+        pointerEvents: 'none',
+        bg: 'background',
+        // Dark: subtle primary/secondary glows — same intent as Color Bends, fraction of the cost.
+        backgroundImage: dark
+          ? `
+            radial-gradient(ellipse 120% 85% at 50% -15%, rgba(74, 158, 255, 0.16) 0%, transparent 52%),
+            radial-gradient(ellipse 90% 70% at 95% 85%, rgba(113, 30, 155, 0.12) 0%, transparent 48%),
+            radial-gradient(ellipse 70% 50% at 10% 60%, rgba(128, 0, 128, 0.08) 0%, transparent 45%)
+          `
+          : 'none',
+        transition: 'background-image 0.3s ease'
+      }}
+    />
+  )
+}

package/src/page-backdrop.spec.js

@@ -0,0 +1,41 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react'
+import { render } from '@testing-library/react'
+import { ThemeUIProvider } from 'theme-ui'
+
+import chronogroveTheme from './theme.js'
+import { ChronogrovePageBackdrop } from './page-backdrop.js'
+
+describe('ChronogrovePageBackdrop', () => {
+  beforeEach(() => {
+    window.localStorage.removeItem('theme-ui-color-mode')
+  })
+
+  it('renders a fixed backdrop layer', () => {
+    const { container } = render(
+      <ThemeUIProvider theme={chronogroveTheme}>
+        <ChronogrovePageBackdrop />
+      </ThemeUIProvider>
+    )
+    const layer = container.querySelector('[aria-hidden="true"]')
+    expect(layer).toBeTruthy()
+  })
+
+  it('adds gradient overlays in dark mode', () => {
+    window.localStorage.setItem('theme-ui-color-mode', 'dark')
+    const { container } = render(
+      <ThemeUIProvider
+        theme={{
+          ...chronogroveTheme,
+          config: { useLocalStorage: true, useColorSchemeMediaQuery: false }
+        }}
+      >
+        <ChronogrovePageBackdrop />
+      </ThemeUIProvider>
+    )
+    const layer = container.querySelector('[aria-hidden="true"]')
+    expect(window.getComputedStyle(layer).backgroundImage).toMatch(/radial-gradient/)
+  })
+})

package/src/pagination-button.js

@@ -1,6 +1,6 @@
-/** @jsx jsx */
 import React from 'react'
-import { jsx, useThemeUI } from 'theme-ui'
+import { Box } from '@theme-ui/components'
+import { useThemeUI } from 'theme-ui'
 import isDarkMode from './helpers/isDarkMode.js'
 import { hexToRgb } from './color-utils.js'
 
@@ -97,9 +97,9 @@ const PaginationButton = ({
   )
 
   return (
-    <button type='button' onClick={onClick} disabled={disabled} sx={baseStyles} {...props}>
+    <Box as='button' type='button' onClick={onClick} disabled={disabled} sx={baseStyles} {...props}>
       {content}
-    </button>
+    </Box>
   )
 }
 

package/src/pagination-button.spec.js

@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from 'theme-ui'
 import { render, screen, fireEvent } from '@testing-library/react'
 import { ThemeUIProvider } from 'theme-ui'
 
@@ -96,6 +94,20 @@ describe('PaginationButton', () => {
     })
   })
 
+  it('uses dark secondary palette when color mode is dark', () => {
+    mockUseThemeUI.mockReturnValueOnce({
+      colorMode: 'dark',
+      theme: {
+        colors: {
+          primary: BUTTON_PRIMARY_COLORS.light,
+          primaryRgb: '66, 46, 163'
+        }
+      }
+    })
+    renderWithProviders(<PaginationButton variant='secondary'>2</PaginationButton>)
+    expect(screen.getByRole('button', { name: /2/i })).toHaveStyle({ color: '#888' })
+  })
+
   it('applies small size styles', () => {
     renderWithProviders(<PaginationButton size='small'>1</PaginationButton>)
 
@@ -118,6 +130,18 @@ describe('PaginationButton', () => {
     })
   })
 
+  it('falls back to medium size when size is invalid', () => {
+    renderWithProviders(<PaginationButton size='invalid'>1</PaginationButton>)
+
+    const button = screen.getByRole('button', { name: /1/i })
+    expect(button).toHaveStyle({
+      fontSize: '11px',
+      minWidth: '28px',
+      height: '28px',
+      padding: '6px 10px'
+    })
+  })
+
   it('renders with icon', () => {
     const TestIcon = () => <span data-testid='test-icon'>←</span>
     renderWithProviders(<PaginationButton icon={<TestIcon />}>Prev</PaginationButton>)

package/src/skip-nav/SkipNavLink.js

@@ -1,7 +1,7 @@
-/** @jsx jsx */
-import { jsx, useThemeUI } from 'theme-ui'
-import { forwardRef } from 'react'
-import isDarkMode from '@chronogrove/ui/is-dark-mode'
+import React, { forwardRef } from 'react'
+import { Box } from '@theme-ui/components'
+import { useThemeUI } from 'theme-ui'
+import isDarkMode from '../helpers/isDarkMode.js'
 
 const SkipNavLink = forwardRef(function SkipNavLink(
   { as: Comp = 'a', children = 'Skip to content', contentId = 'skip-nav-content', ...props },
@@ -13,7 +13,8 @@ const SkipNavLink = forwardRef(function SkipNavLink(
   const primaryRgb = theme?.colors?.primaryRgb ?? (darkModeActive ? '74, 158, 255' : '66, 46, 163')
 
   return (
-    <Comp
+    <Box
+      as={Comp}
       {...props}
       ref={forwardedRef}
       href={`#${contentId}`}
@@ -63,7 +64,7 @@ const SkipNavLink = forwardRef(function SkipNavLink(
       }}
     >
       {children}
-    </Comp>
+    </Box>
   )
 })
 

package/src/skip-nav/SkipNavLink.spec.js

@@ -30,6 +30,17 @@ describe('SkipNavLink', () => {
     expect(link).toHaveAttribute('data-skip-nav-link', '')
   })
 
+  it('respects custom contentId for the hash target', () => {
+    renderLink(<SkipNavLink contentId='main'>Jump</SkipNavLink>)
+    expect(screen.getByRole('link', { name: /jump/i })).toHaveAttribute('href', '#main')
+  })
+
+  it('uses default label and skip target when props are omitted', () => {
+    renderLink(<SkipNavLink />)
+    const link = screen.getByRole('link', { name: /skip to content/i })
+    expect(link).toHaveAttribute('href', '#skip-nav-content')
+  })
+
   it('uses fallback colors when theme omits primary tokens', () => {
     render(
       <ThemeUIProvider theme={{ colors: {} }}>

package/src/theme.js

@@ -1,6 +1,11 @@
 import { tailwind } from '@theme-ui/presets'
 import { merge } from 'theme-ui'
 
+import {
+  chronogroveThemeSurfaceColorsDark,
+  chronogroveThemeSurfaceColorsLight
+} from './chronogrove-theme-surface-colors.js'
+
 const fonts = {
   sans: '-apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif',
   serif:
@@ -74,8 +79,8 @@ export const backdropBlurLight = {
 
 export const card = {
   borderRadius: 'card',
-  background: 'var(--theme-ui-colors-panel-background)',
-  color: 'var(--theme-ui-colors-panel-text)',
+  bg: 'panel-background',
+  color: 'text',
   boxShadow: 'default',
   flexGrow: 1,
   padding: 3,
@@ -86,9 +91,9 @@ export const card = {
 }
 
 export const metricCard = {
-  backgroundColor: 'var(--theme-ui-colors-panel-background)',
+  backgroundColor: 'panel-background',
   boxShadow: 'none',
-  color: 'var(--theme-ui-colors-panel-text)',
+  color: 'text',
   span: {
     fontFamily: 'heading',
     fontWeight: 'bold',
@@ -100,8 +105,6 @@ export const PostCard = {
   ...card,
   ...floatOnHover,
   ...glassmorhismPanel,
-  backgroundColor: 'var(--theme-ui-colors-panel-background)',
-  color: 'var(--theme-ui-colors-panel-text)',
   display: 'flex',
   height: '100%',
   flexDirection: 'column',
@@ -369,20 +372,16 @@ export default merge(tailwind, {
 
   colors: {
     accent: 'deeppink',
-    background: '#fdf8f5',
-    'panel-background': 'rgba(255, 255, 255, 0.45)',
+    ...chronogroveThemeSurfaceColorsLight,
     'panel-divider': () => '1px solid rgba(255, 229, 224, 0.17)',
     'panel-highlight': theme => theme.colors.gray[1],
     modes: {
       dark: {
-        background: '#14141F',
-        'panel-background': 'rgba(20, 20, 31, 0.45)',
+        ...chronogroveThemeSurfaceColorsDark,
         'panel-divider': theme => `1px solid ${theme.colors.gray[8]}`,
         'panel-highlight': theme => theme.colors.gray[8],
         primary: '#4a9eff',
         primaryRgb: '74, 158, 255',
-        text: '#fff',
-        textMuted: '#d8d8d8',
         tableText: '#fff',
         tableBackground: 'rgba(30, 30, 47, 0.45)',
         tableHeaderBackground: 'rgba(30, 37, 48, 0.8)',
@@ -400,9 +399,7 @@ export default merge(tailwind, {
     tableHeaderBackground: '#f4f4f9',
     tableRowBackground: 'transparent',
     tableRowAlternateBackground: '#fafafa',
-    tableBorder: 'muted',
-    text: '#111',
-    textMuted: '#333'
+    tableBorder: 'muted'
   },
 
   fonts: {

package/babel.config.cjs

@@ -1,9 +0,0 @@
-/**
- * Jest transforms @emotion and JSX; mirror theme with classic runtime.
- */
-module.exports = {
-  presets: [
-    [require.resolve('@babel/preset-env'), { targets: { node: 'current' } }],
-    [require.resolve('@babel/preset-react'), { runtime: 'classic', useBuiltIns: true }]
-  ]
-}

package/jest.config.cjs

@@ -1,33 +0,0 @@
-/** @type {import('jest').Config} */
-module.exports = {
-  testEnvironment: 'jsdom',
-  clearMocks: true,
-  setupFilesAfterEnv: ['<rootDir>/jest.setup.cjs'],
-  testMatch: ['**/?(*.)+(spec|test).js'],
-  transform: {
-    '^.+\\.jsx?$': 'babel-jest'
-  },
-  transformIgnorePatterns: ['node_modules/(?!theme-ui)'],
-  collectCoverageFrom: ['src/**/*.js', '!src/**/*.spec.js'],
-  coverageDirectory: 'coverage',
-  coveragePathIgnorePatterns: [
-    '/node_modules/',
-    'src/index.js',
-    'src/skip-nav/index.js',
-    'src/color-mode/index.js',
-    'src/gatsby/index.js',
-    'src/theme.js'
-  ],
-  moduleNameMapper: {
-    '^@chronogrove/ui/is-dark-mode$': '<rootDir>/src/helpers/isDarkMode.js',
-    '^@theme-toggles/react$': '<rootDir>/test-utils/mock-theme-toggles-react.js'
-  },
-  coverageThreshold: {
-    global: {
-      statements: 95,
-      branches: 90,
-      functions: 95,
-      lines: 95
-    }
-  }
-}

package/jest.setup.cjs

@@ -1 +0,0 @@
-require('@testing-library/jest-dom')