@chronogrove/ui 0.76.0

package/src/button.js

@@ -0,0 +1,25 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui'
+
+const Button = ({ variant = 'primary', ...props }) => (
+  <button
+    {...props}
+    sx={{
+      appearance: 'none',
+      display: 'inline-block',
+      textAlign: 'center',
+      lineHeight: 'inherit',
+      textDecoration: 'none',
+      fontSize: 'inherit',
+      fontWeight: 'bold',
+      m: 0,
+      px: 3,
+      py: 2,
+      border: 0,
+      borderRadius: 4,
+      variant: `buttons.${variant}`
+    }}
+  />
+)
+
+export default Button

package/src/button.spec.js

@@ -0,0 +1,16 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import Button from './button'
+
+describe('Button', () => {
+  it('renders with label and handles click', () => {
+    const onClick = jest.fn()
+    render(<Button onClick={onClick}>Save</Button>)
+    fireEvent.click(screen.getByRole('button', { name: /save/i }))
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+})

package/src/color-mode/browser-sync.js

@@ -0,0 +1,61 @@
+import { THEME_UI_COLOR_MODE_STORAGE_KEY } from './constants.js'
+import { normalizeThemeUiColorMode } from './normalize.js'
+
+export function resolveThemeUiColorMode(storageKey = THEME_UI_COLOR_MODE_STORAGE_KEY) {
+  let mode
+  try {
+    mode = typeof window !== 'undefined' ? window.localStorage.getItem(storageKey) : null
+  } catch {
+    mode = null
+  }
+  mode = normalizeThemeUiColorMode(mode)
+  if (mode) {
+    return mode
+  }
+
+  if (typeof document !== 'undefined') {
+    const htmlElement = document.documentElement
+    const domAttributeMode = normalizeThemeUiColorMode(htmlElement?.getAttribute('data-theme-ui-color-mode'))
+    if (domAttributeMode) {
+      return domAttributeMode
+    }
+    if (htmlElement?.classList?.contains('theme-ui-dark')) {
+      return 'dark'
+    }
+    if (htmlElement?.classList?.contains('theme-ui-default') || htmlElement?.classList?.contains('theme-ui-light')) {
+      return 'default'
+    }
+  }
+
+  const prefersDark =
+    typeof window !== 'undefined' &&
+    typeof window.matchMedia === 'function' &&
+    window.matchMedia('(prefers-color-scheme: dark)').matches
+
+  return prefersDark ? 'dark' : 'default'
+}
+
+export function syncThemeUiColorMode(storageKey = THEME_UI_COLOR_MODE_STORAGE_KEY) {
+  if (typeof document === 'undefined') {
+    return
+  }
+  const htmlElement = document.documentElement
+  if (!htmlElement) {
+    return
+  }
+  const mode = resolveThemeUiColorMode(storageKey)
+  Array.from(htmlElement.classList)
+    .filter(className => className.startsWith('theme-ui-'))
+    .forEach(className => htmlElement.classList.remove(className))
+  htmlElement.classList.add(`theme-ui-${mode}`)
+  htmlElement.setAttribute('data-theme-ui-color-mode', mode)
+}
+
+export function scheduleThemeUiColorModeSync(storageKey = THEME_UI_COLOR_MODE_STORAGE_KEY) {
+  syncThemeUiColorMode(storageKey)
+  if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
+    window.requestAnimationFrame(() => syncThemeUiColorMode(storageKey))
+  } else {
+    setTimeout(() => syncThemeUiColorMode(storageKey), 0)
+  }
+}

package/src/color-mode/browser-sync.node.spec.js

@@ -0,0 +1,15 @@
+/**
+ * @jest-environment node
+ */
+
+import { resolveThemeUiColorMode, syncThemeUiColorMode } from './browser-sync'
+
+describe('browser-sync (node)', () => {
+  it('resolve falls back to default without browser APIs', () => {
+    expect(resolveThemeUiColorMode()).toBe('default')
+  })
+
+  it('sync is a no-op without document', () => {
+    expect(() => syncThemeUiColorMode()).not.toThrow()
+  })
+})

package/src/color-mode/browser-sync.spec.js

@@ -0,0 +1,137 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { resolveThemeUiColorMode, scheduleThemeUiColorModeSync, syncThemeUiColorMode } from './browser-sync'
+
+describe('resolveThemeUiColorMode', () => {
+  beforeEach(() => {
+    document.documentElement.className = ''
+    document.documentElement.removeAttribute('data-theme-ui-color-mode')
+    window.localStorage.clear()
+    window.matchMedia = jest.fn(() => ({
+      matches: false,
+      media: '(prefers-color-scheme: dark)',
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+      onchange: null
+    }))
+  })
+
+  it('reads normalized mode from localStorage', () => {
+    window.localStorage.setItem('theme-ui-color-mode', 'dark')
+    expect(resolveThemeUiColorMode()).toBe('dark')
+  })
+
+  it('reads from data-theme-ui-color-mode on documentElement', () => {
+    document.documentElement.setAttribute('data-theme-ui-color-mode', 'dark')
+    expect(resolveThemeUiColorMode()).toBe('dark')
+  })
+
+  it('infers default from theme-ui-light class', () => {
+    document.documentElement.classList.add('theme-ui-light')
+    expect(resolveThemeUiColorMode()).toBe('default')
+  })
+
+  it('infers dark from theme-ui-dark class when storage is empty', () => {
+    document.documentElement.classList.add('theme-ui-dark')
+    expect(resolveThemeUiColorMode()).toBe('dark')
+  })
+
+  it('treats unreadable localStorage as empty', () => {
+    jest.spyOn(Storage.prototype, 'getItem').mockImplementation(() => {
+      throw new Error('blocked')
+    })
+    expect(resolveThemeUiColorMode()).toBe('default')
+    Storage.prototype.getItem.mockRestore()
+  })
+
+  it('falls back to prefers-color-scheme: dark', () => {
+    window.matchMedia = jest.fn(() => ({
+      matches: true,
+      media: '(prefers-color-scheme: dark)',
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+      onchange: null
+    }))
+    expect(resolveThemeUiColorMode()).toBe('dark')
+  })
+})
+
+describe('syncThemeUiColorMode', () => {
+  beforeEach(() => {
+    document.documentElement.className = ''
+    document.documentElement.removeAttribute('data-theme-ui-color-mode')
+    window.localStorage.clear()
+    window.matchMedia = jest.fn(() => ({
+      matches: false,
+      media: '(prefers-color-scheme: dark)',
+      addListener: jest.fn(),
+      removeListener: jest.fn(),
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+      onchange: null
+    }))
+  })
+
+  it('applies theme-ui class and data attribute from resolved mode', () => {
+    window.localStorage.setItem('theme-ui-color-mode', 'dark')
+    syncThemeUiColorMode()
+    expect(document.documentElement.classList.contains('theme-ui-dark')).toBe(true)
+    expect(document.documentElement.getAttribute('data-theme-ui-color-mode')).toBe('dark')
+  })
+
+  it('strips prior theme-ui-* classes before applying', () => {
+    document.documentElement.classList.add('theme-ui-light', 'theme-ui-other')
+    window.localStorage.setItem('theme-ui-color-mode', 'dark')
+    syncThemeUiColorMode()
+    expect(document.documentElement.classList.contains('theme-ui-light')).toBe(false)
+    expect(document.documentElement.classList.contains('theme-ui-other')).toBe(false)
+    expect(document.documentElement.classList.contains('theme-ui-dark')).toBe(true)
+  })
+
+  it('returns early when documentElement is missing', () => {
+    const spy = jest.spyOn(document, 'documentElement', 'get').mockReturnValue(null)
+    expect(() => syncThemeUiColorMode()).not.toThrow()
+    spy.mockRestore()
+  })
+})
+
+describe('scheduleThemeUiColorModeSync', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+    document.documentElement.className = ''
+    window.localStorage.setItem('theme-ui-color-mode', 'light')
+    window.requestAnimationFrame = jest.fn(cb => {
+      cb()
+      return 1
+    })
+  })
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers()
+    jest.useRealTimers()
+  })
+
+  it('runs sync immediately and again on requestAnimationFrame when available', () => {
+    const spy = jest.spyOn(window, 'requestAnimationFrame')
+    scheduleThemeUiColorModeSync()
+    expect(document.documentElement.classList.contains('theme-ui-default')).toBe(true)
+    expect(spy).toHaveBeenCalled()
+    spy.mockRestore()
+  })
+
+  it('uses setTimeout when requestAnimationFrame is missing', () => {
+    delete window.requestAnimationFrame
+    scheduleThemeUiColorModeSync()
+    jest.runAllTimers()
+    expect(document.documentElement.classList.contains('theme-ui-default')).toBe(true)
+  })
+})

package/src/color-mode/constants.js

@@ -0,0 +1,12 @@
+/** Theme UI localStorage key (aligned with theme-ui/color-mode). */
+export const THEME_UI_COLOR_MODE_STORAGE_KEY = 'theme-ui-color-mode'
+
+/** Dispatched on route changes so hosts can reconcile React color-mode context with `localStorage`. */
+export const RECONCILE_COLOR_MODE_EVENT = 'theme-ui-reconcile-color-mode'
+
+/** `key` props for Gatsby `onPreRenderHTML` head ordering (color-mode first). */
+export const CHRONOGROVE_COLOR_MODE_HEAD_PRIORITY_KEYS = [
+  'theme-ui-no-flash',
+  'html-bg-color',
+  'theme-ui-color-mode-fallback'
+]

package/src/color-mode/head-inline.js

@@ -0,0 +1,73 @@
+import { THEME_UI_COLOR_MODE_STORAGE_KEY } from './constants.js'
+
+function q(str) {
+  return JSON.stringify(str)
+}
+
+export function buildThemeUiNoFlashInlineScript(storageKey = THEME_UI_COLOR_MODE_STORAGE_KEY) {
+  const key = q(storageKey)
+  return `
+    (function() {
+      try {
+        var mode = localStorage.getItem(${key});
+        if (!mode) {
+          var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+          mode = prefersDark ? 'dark' : 'default';
+          localStorage.setItem(${key}, mode);
+        }
+        if (mode === 'light') {
+          mode = 'default';
+        }
+        var htmlElement = document.documentElement;
+        var classesToRemove = [];
+        for (var i = 0; i < htmlElement.classList.length; i++) {
+          var className = htmlElement.classList[i];
+          if (className.indexOf('theme-ui-') === 0) {
+            classesToRemove.push(className);
+          }
+        }
+        for (var j = 0; j < classesToRemove.length; j++) {
+          htmlElement.classList.remove(classesToRemove[j]);
+        }
+        htmlElement.classList.add('theme-ui-' + mode);
+        htmlElement.setAttribute('data-theme-ui-color-mode', mode);
+      } catch (e) {}
+    })();
+  `
+}
+
+export function buildHtmlBackgroundInlineScript({
+  storageKey = THEME_UI_COLOR_MODE_STORAGE_KEY,
+  defaultBackgroundHex,
+  darkBackgroundHex
+}) {
+  const key = q(storageKey)
+  const lightBg = q(defaultBackgroundHex)
+  const darkBg = q(darkBackgroundHex)
+  return `
+    (function() {
+      try {
+        var mode = localStorage.getItem(${key});
+        if (!mode) {
+          var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+          mode = prefersDark ? 'dark' : 'default';
+          localStorage.setItem(${key}, mode);
+        }
+        var bgColor = mode === 'dark' ? ${darkBg} : ${lightBg};
+        document.documentElement.style.backgroundColor = bgColor;
+      } catch (e) {}
+    })();
+  `
+}
+
+export function buildThemeUiColorModeFallbackCss({
+  defaultTextHex,
+  defaultTextMutedHex,
+  darkTextHex,
+  darkTextMutedHex
+}) {
+  return `
+:root[data-theme-ui-color-mode="default"], :root[data-theme-ui-color-mode="default"] * { --theme-ui-colors-text: ${defaultTextHex} !important; --theme-ui-colors-text-muted: ${defaultTextMutedHex} !important; }
+:root[data-theme-ui-color-mode="dark"], :root[data-theme-ui-color-mode="dark"] * { --theme-ui-colors-text: ${darkTextHex} !important; --theme-ui-colors-text-muted: ${darkTextMutedHex} !important; }
+  `.trim()
+}

package/src/color-mode/head-inline.spec.js

@@ -0,0 +1,33 @@
+import {
+  buildHtmlBackgroundInlineScript,
+  buildThemeUiColorModeFallbackCss,
+  buildThemeUiNoFlashInlineScript
+} from './head-inline.js'
+
+describe('head-inline scripts', () => {
+  it('buildThemeUiNoFlashInlineScript references storage and data attribute', () => {
+    const s = buildThemeUiNoFlashInlineScript()
+    expect(s).toContain('theme-ui-color-mode')
+    expect(s).toContain('data-theme-ui-color-mode')
+  })
+
+  it('buildHtmlBackgroundInlineScript embeds background hexes', () => {
+    const s = buildHtmlBackgroundInlineScript({
+      defaultBackgroundHex: '#aaa',
+      darkBackgroundHex: '#bbb'
+    })
+    expect(s).toContain('#aaa')
+    expect(s).toContain('#bbb')
+  })
+
+  it('buildThemeUiColorModeFallbackCss sets CSS vars', () => {
+    const css = buildThemeUiColorModeFallbackCss({
+      defaultTextHex: '#111',
+      defaultTextMutedHex: '#333',
+      darkTextHex: '#fff',
+      darkTextMutedHex: '#ccc'
+    })
+    expect(css).toContain('--theme-ui-colors-text: #111')
+    expect(css).toContain('--theme-ui-colors-text: #fff')
+  })
+})

package/src/color-mode/index.js

@@ -0,0 +1,13 @@
+export {
+  THEME_UI_COLOR_MODE_STORAGE_KEY,
+  RECONCILE_COLOR_MODE_EVENT,
+  CHRONOGROVE_COLOR_MODE_HEAD_PRIORITY_KEYS
+} from './constants.js'
+export { normalizeThemeUiColorMode } from './normalize.js'
+export { resolveChronogroveSurfaceColors } from './resolve-theme-colors.js'
+export {
+  buildThemeUiNoFlashInlineScript,
+  buildHtmlBackgroundInlineScript,
+  buildThemeUiColorModeFallbackCss
+} from './head-inline.js'
+export { resolveThemeUiColorMode, syncThemeUiColorMode, scheduleThemeUiColorModeSync } from './browser-sync.js'

package/src/color-mode/normalize.js

@@ -0,0 +1,9 @@
+export function normalizeThemeUiColorMode(mode) {
+  if (mode === 'light') {
+    return 'default'
+  }
+  if (mode === 'dark' || mode === 'default') {
+    return mode
+  }
+  return null
+}

package/src/color-mode/normalize.spec.js

@@ -0,0 +1,17 @@
+import { normalizeThemeUiColorMode } from './normalize'
+
+describe('normalizeThemeUiColorMode', () => {
+  it('maps light to default', () => {
+    expect(normalizeThemeUiColorMode('light')).toBe('default')
+  })
+
+  it('passes through dark and default', () => {
+    expect(normalizeThemeUiColorMode('dark')).toBe('dark')
+    expect(normalizeThemeUiColorMode('default')).toBe('default')
+  })
+
+  it('returns null for unknown values', () => {
+    expect(normalizeThemeUiColorMode('sepia')).toBe(null)
+    expect(normalizeThemeUiColorMode(null)).toBe(null)
+  })
+})

package/src/color-mode/resolve-theme-colors.js

@@ -0,0 +1,23 @@
+function pickColor(value) {
+  if (typeof value === 'string') {
+    return value
+  }
+  return null
+}
+
+/**
+ * Surface colors used by inline SSR/CSR scripts and fallbacks.
+ * Pass the same Theme UI theme object as `ThemeUIProvider`.
+ */
+export function resolveChronogroveSurfaceColors(theme) {
+  const colors = theme?.colors || {}
+  const dark = colors.modes?.dark || {}
+  return {
+    defaultBackgroundHex: pickColor(colors.background) || '#fdf8f5',
+    darkBackgroundHex: pickColor(dark.background) || '#14141F',
+    defaultTextHex: pickColor(colors.text) || '#111',
+    defaultTextMutedHex: pickColor(colors.textMuted) || '#333',
+    darkTextHex: pickColor(dark.text) || '#fff',
+    darkTextMutedHex: pickColor(dark.textMuted) || '#d8d8d8'
+  }
+}

package/src/color-mode/resolve-theme-colors.spec.js

@@ -0,0 +1,39 @@
+import { resolveChronogroveSurfaceColors } from './resolve-theme-colors.js'
+
+describe('resolveChronogroveSurfaceColors', () => {
+  it('reads string colors from Theme UI-shaped theme', () => {
+    const theme = {
+      colors: {
+        background: '#fdf8f5',
+        text: '#111',
+        textMuted: '#333',
+        modes: {
+          dark: {
+            background: '#14141F',
+            text: '#fff',
+            textMuted: '#d8d8d8'
+          }
+        }
+      }
+    }
+    expect(resolveChronogroveSurfaceColors(theme)).toEqual({
+      defaultBackgroundHex: '#fdf8f5',
+      darkBackgroundHex: '#14141F',
+      defaultTextHex: '#111',
+      defaultTextMutedHex: '#333',
+      darkTextHex: '#fff',
+      darkTextMutedHex: '#d8d8d8'
+    })
+  })
+
+  it('uses fallbacks when theme is empty', () => {
+    expect(resolveChronogroveSurfaceColors(null)).toEqual({
+      defaultBackgroundHex: '#fdf8f5',
+      darkBackgroundHex: '#14141F',
+      defaultTextHex: '#111',
+      defaultTextMutedHex: '#333',
+      darkTextHex: '#fff',
+      darkTextMutedHex: '#d8d8d8'
+    })
+  })
+})

package/src/color-toggle.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { useColorMode } from 'theme-ui'
+import { Expand } from '@theme-toggles/react'
+import isDarkMode from '@chronogrove/ui/is-dark-mode'
+
+export default function ColorToggle() {
+  const [colorMode, setColorMode] = useColorMode()
+
+  return (
+    <Expand
+      className='theme-toggle'
+      toggled={isDarkMode(colorMode)}
+      toggle={() => setColorMode(colorMode === 'default' ? 'dark' : 'default')}
+      duration={750}
+      aria-label='Toggle color mode'
+      id='theme-toggle'
+    />
+  )
+}

package/src/color-toggle.spec.js

@@ -0,0 +1,35 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import ColorToggle from './color-toggle'
+
+const mockUseColorMode = jest.fn()
+
+jest.mock('theme-ui', () => ({
+  useColorMode: (...args) => mockUseColorMode(...args)
+}))
+
+describe('ColorToggle', () => {
+  beforeEach(() => {
+    mockUseColorMode.mockReset()
+  })
+
+  it('toggles from default to dark', () => {
+    const setColorMode = jest.fn()
+    mockUseColorMode.mockReturnValue(['default', setColorMode])
+    render(<ColorToggle />)
+    fireEvent.click(screen.getByRole('button', { name: /toggle color mode/i }))
+    expect(setColorMode).toHaveBeenCalledWith('dark')
+  })
+
+  it('toggles from dark to default', () => {
+    const setColorMode = jest.fn()
+    mockUseColorMode.mockReturnValue(['dark', setColorMode])
+    render(<ColorToggle />)
+    fireEvent.click(screen.getByRole('button', { name: /toggle color mode/i }))
+    expect(setColorMode).toHaveBeenCalledWith('default')
+  })
+})

package/src/emotion-cache.js

@@ -0,0 +1,22 @@
+import createCache from '@emotion/cache'
+
+const CACHE_KEY = 'css'
+
+export function createChronogroveEmotionCache() {
+  const insertionPoint =
+    typeof document !== 'undefined' ? document.querySelector('meta[name="emotion-insertion-point"]') : undefined
+
+  return createCache({
+    key: CACHE_KEY,
+    insertionPoint: insertionPoint || undefined
+  })
+}
+
+let emotionCacheSingleton
+
+export function getChronogroveEmotionCache() {
+  if (!emotionCacheSingleton) {
+    emotionCacheSingleton = createChronogroveEmotionCache()
+  }
+  return emotionCacheSingleton
+}

package/src/emotion-cache.spec.js

@@ -0,0 +1,30 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { getChronogroveEmotionCache } from './emotion-cache'
+
+describe('getChronogroveEmotionCache', () => {
+  beforeEach(() => {
+    document.querySelectorAll('style[data-emotion]').forEach(el => el.remove())
+  })
+
+  it('creates a cache with emotion key css', () => {
+    const cache1 = getChronogroveEmotionCache()
+    const cache2 = getChronogroveEmotionCache()
+    expect(cache1).toBe(cache2)
+    expect(cache1.key).toBe('css')
+    expect(typeof cache1.insert).toBe('function')
+  })
+
+  it('uses emotion insertion point meta when present', () => {
+    const meta = document.createElement('meta')
+    meta.setAttribute('name', 'emotion-insertion-point')
+    document.head.appendChild(meta)
+    jest.isolateModules(() => {
+      const { getChronogroveEmotionCache: getFresh } = require('./emotion-cache')
+      expect(getFresh()).toBeTruthy()
+    })
+    document.head.removeChild(meta)
+  })
+})

package/src/helpers/isDarkMode.js

@@ -0,0 +1,2 @@
+const isDarkMode = colorMode => colorMode === 'dark'
+export default isDarkMode

package/src/helpers/isDarkMode.spec.js

@@ -0,0 +1,9 @@
+import isDarkMode from './isDarkMode'
+
+describe('isDarkMode', () => {
+  it('is true only for dark', () => {
+    expect(isDarkMode('dark')).toBe(true)
+    expect(isDarkMode('default')).toBe(false)
+    expect(isDarkMode(undefined)).toBe(false)
+  })
+})

package/src/index.js

@@ -0,0 +1 @@
+export { ChronogroveThemeProvider } from './provider.js'

package/src/provider.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Global } from '@emotion/react'
+import { ThemeUIProvider, InitializeColorMode } from 'theme-ui'
+
+export function ChronogroveThemeProvider({ theme, children }) {
+  return (
+    <ThemeUIProvider theme={theme}>
+      <InitializeColorMode />
+      <Global styles={theme.global} />
+      {children}
+    </ThemeUIProvider>
+  )
+}

package/src/provider.spec.js

@@ -0,0 +1,25 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { ChronogroveThemeProvider } from './provider'
+
+const baseTheme = {
+  config: {},
+  fonts: { body: 'system-ui' },
+  colors: { text: '#111', background: '#fff' },
+  global: {}
+}
+
+describe('ChronogroveThemeProvider', () => {
+  it('renders children', () => {
+    render(
+      <ChronogroveThemeProvider theme={baseTheme}>
+        <span>hello</span>
+      </ChronogroveThemeProvider>
+    )
+    expect(screen.getByText('hello')).toBeInTheDocument()
+  })
+})

package/src/skip-nav/SkipNavContent.js

@@ -0,0 +1,16 @@
+import React, { forwardRef } from 'react'
+
+const SkipNavContent = forwardRef(function SkipNavContent(
+  { as: Comp = 'div', id = 'skip-nav-content', children, ...props },
+  forwardedRef
+) {
+  return (
+    <Comp {...props} ref={forwardedRef} id={id} data-skip-nav-content='' tabIndex={-1} style={{ outline: 'none' }}>
+      {children}
+    </Comp>
+  )
+})
+
+SkipNavContent.displayName = 'SkipNavContent'
+
+export default SkipNavContent