@duro-app/ui 4.4.0 → 5.0.0

package/src/components/ToggleGroup/styles.css.ts

@@ -1,16 +1,46 @@
 import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
-import {radii} from '@duro-app/tokens/tokens/spacing.css'
+import {radii, spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 export const styles = css.create({
   root: {
     display: 'inline-flex',
     borderRadius: radii.sm,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
     overflow: 'hidden',
   },
+  wrap: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: spacing.xs,
+    borderWidth: 0,
+    borderRadius: 0,
+    overflow: 'visible',
+  },
+  // the scroll content: room for focus rings to draw
+  scrollContent: {
+    position: 'relative',
+    padding: spacing.xs,
+  },
+  // shows rows + 0.5 rows so the cut-off row hints at more; shorter content
+  // sizes itself (max, not fixed). Row heights match the wrapped Toggles.
+  maxRowsSmall: (rows: number) => ({
+    maxHeight: {
+      default: `calc((${rows} + 0.5) * ${sizes.controlSm} + ${rows} * ${spacing.xs} + 2 * ${spacing.xs})`,
+      '@media (pointer: coarse)': `calc((${rows} + 0.5) * ${sizes.touchTarget} + ${rows} * ${spacing.xs} + 2 * ${spacing.xs})`,
+    },
+  }),
+  maxRowsDefault: (rows: number) => ({
+    maxHeight: {
+      default: `calc((${rows} + 0.5) * ${sizes.controlMd} + ${rows} * ${spacing.xs} + 2 * ${spacing.xs})`,
+      '@media (pointer: coarse)': `calc((${rows} + 0.5) * ${sizes.touchTarget} + ${rows} * ${spacing.xs} + 2 * ${spacing.xs})`,
+    },
+  }),
   vertical: {
     flexDirection: 'column',
   },

package/src/components/ToggleGroup/useRovingFocus.ts

@@ -0,0 +1,121 @@
+import {useCallback, useEffect, useLayoutEffect, useRef, useState, type RefObject} from 'react'
+
+const ROW_TOLERANCE = 2
+
+function sameOrder(a: string[], b: string[]) {
+  return a.length === b.length && a.every((v, i) => v === b[i])
+}
+
+/**
+ * Roving focus for a wrapping ToggleGroup (WAI-ARIA toolbar pattern): one tab
+ * stop — the focused item, else the first pressed one, else the first — with
+ * arrow keys in reading order, Up/Down by visual row, Home/End.
+ */
+export function useRovingFocus({
+  enabled,
+  pressed,
+  rootRef,
+}: {
+  enabled: boolean
+  pressed: string[]
+  rootRef: RefObject<HTMLElement | null>
+}) {
+  const items = useRef(new Map<string, HTMLElement>())
+  const [order, setOrder] = useState<string[]>([])
+  const [focusedValue, setFocusedValue] = useState<string | null>(null)
+
+  const sync = useCallback(() => {
+    const entries = [...items.current.entries()].sort(([, a], [, b]) =>
+      a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1,
+    )
+    const next = entries.map(([v]) => v)
+    setOrder((prev) => (sameOrder(prev, next) ? prev : next))
+  }, [])
+
+  const register = useCallback(
+    (value: string, el: HTMLElement) => {
+      items.current.set(value, el)
+      sync()
+      return () => {
+        if (items.current.get(value) === el) items.current.delete(value)
+        sync()
+      }
+    },
+    [sync],
+  )
+
+  // a focus holder that unmounted no longer holds the tab stop
+  useLayoutEffect(() => {
+    if (focusedValue !== null && !order.includes(focusedValue)) setFocusedValue(null)
+  }, [order, focusedValue])
+
+  const tabStopValue = !enabled
+    ? null
+    : focusedValue !== null && order.includes(focusedValue)
+      ? focusedValue
+      : (pressed.find((v) => order.includes(v)) ?? order[0] ?? null)
+
+  // native listener: RSD's onKeyDown event is a reduced shape (as in Tree)
+  useEffect(() => {
+    const root = rootRef.current
+    if (!enabled || !root) return
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.altKey || e.ctrlKey || e.metaKey) return
+      const els = order
+        .map((v) => items.current.get(v))
+        .filter((el): el is HTMLElement => !!el && !(el as HTMLButtonElement).disabled)
+      const i = els.indexOf(e.target as HTMLElement)
+      if (i < 0) return
+      let target: HTMLElement | undefined
+      switch (e.key) {
+        case 'ArrowRight':
+          target = els[Math.min(i + 1, els.length - 1)]
+          break
+        case 'ArrowLeft':
+          target = els[Math.max(i - 1, 0)]
+          break
+        case 'Home':
+          target = els[0]
+          break
+        case 'End':
+          target = els[els.length - 1]
+          break
+        case 'ArrowDown':
+        case 'ArrowUp': {
+          const down = e.key === 'ArrowDown'
+          const cur = els[i].getBoundingClientRect()
+          const cx = cur.left + cur.width / 2
+          const rects = els.map((el) => el.getBoundingClientRect())
+          // rows, by distinct top, in the direction of travel
+          const tops = [...new Set(rects.map((r) => Math.round(r.top)))].sort((a, b) => a - b)
+          const rowIdx = tops.findIndex((t) => Math.abs(t - cur.top) <= ROW_TOLERANCE)
+          const nextTop = tops[rowIdx + (down ? 1 : -1)]
+          if (nextTop === undefined) break
+          let best = Infinity
+          rects.forEach((r, k) => {
+            if (Math.abs(r.top - nextTop) > ROW_TOLERANCE) return
+            const d = Math.abs(r.left + r.width / 2 - cx)
+            if (d < best) {
+              best = d
+              target = els[k]
+            }
+          })
+          break
+        }
+        default:
+          return
+      }
+      e.preventDefault()
+      target?.focus()
+    }
+    root.addEventListener('keydown', onKeyDown)
+    return () => root.removeEventListener('keydown', onKeyDown)
+  }, [enabled, order, rootRef])
+
+  return {
+    tabStopValue,
+    register,
+    onItemFocus: setFocusedValue,
+    items,
+  }
+}

package/src/components/Tooltip/styles.css.ts

@@ -3,6 +3,7 @@ import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {shadows} from '@duro-app/tokens/tokens/shadows.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 export const styles = css.create({
   root: {
@@ -22,7 +23,7 @@ export const styles = css.create({
     fontSize: typography.fontSizeXs,
     lineHeight: typography.lineHeight,
     borderRadius: radii.sm,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
     boxShadow: shadows.md,

package/src/components/Tree/styles.css.ts

@@ -1,8 +1,10 @@
 import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
-import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
+import {microSpacing, radii, spacing} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 export const styles = css.create({
   root: {
@@ -32,8 +34,8 @@ export const styles = css.create({
     display: 'flex',
     alignItems: 'center',
     gap: spacing.xs,
-    paddingTop: '5px',
-    paddingBottom: '5px',
+    paddingTop: microSpacing.px5,
+    paddingBottom: microSpacing.px5,
     paddingRight: spacing.sm,
     fontFamily: typography.fontFamily,
     fontSize: typography.fontSizeSm,
@@ -53,10 +55,10 @@ export const styles = css.create({
     paddingLeft: `calc(${spacing.sm} + ${Math.max(0, level - 1)} * ${spacing.lg})`,
   }),
   rowFocused: {
-    outlineWidth: 2,
+    outlineWidth: borders.focusRing,
     outlineStyle: 'solid',
     outlineColor: colors.accent,
-    outlineOffset: -2,
+    outlineOffset: `calc(-1 * ${borders.focusOffset})`,
   },
   rowSelected: {
     color: colors.accent,
@@ -67,7 +69,7 @@ export const styles = css.create({
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
-    width: spacing.md,
+    width: sizes.glyphMd,
     flexShrink: 0,
     color: colors.textMuted,
     transitionProperty: 'transform',

package/src/components/VirtualTable/VirtualTable.stories.tsx

@@ -3,10 +3,11 @@ import {expect, fn, waitFor} from 'storybook/test'
 import {createColumnHelper} from '@tanstack/react-table'
 import {css, html} from 'react-strict-dom'
 import {VirtualTable} from './VirtualTable'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const storyStyles = css.create({
   // Phone-width wrapper: below VirtualTable's 640px stackBelow default.
-  narrow: {width: 400},
+  narrow: {width: sizes.dialogSm},
 })
 
 interface Item {
@@ -49,7 +50,7 @@ export const SmallList: Story = {
 export const Virtualized: Story = {
   args: {
     data: makeData(500),
-    maxHeight: 300,
+    maxHeight: 'listMaxH',
     rangeLabel: ({from, to, total}) => `${from}-${to} of ${total}`,
     onVisiblePageChange: fn(),
   },
@@ -69,7 +70,7 @@ export const Virtualized: Story = {
 export const ScrollReportsPage: Story = {
   args: {
     data: makeData(500),
-    maxHeight: 300,
+    maxHeight: 'listMaxH',
     pageSize: 50,
     rangeLabel: ({page, pages}) => `page ${page}/${pages}`,
     onVisiblePageChange: fn(),

package/src/components/VirtualTable/VirtualTable.tsx

@@ -13,6 +13,8 @@ import {
 import {useVirtualizer} from '@tanstack/react-virtual'
 import {breakpointsPx, type Breakpoint} from '@duro-app/tokens/tokens/breakpoints.css'
 import {styles} from './styles.css'
+import {SIZES_PX} from '@duro-app/tokens/keys'
+import {resolveLength, type Length} from '../../shared/length'
 
 // Measure + commit before paint on the client; no-op-safe on the server.
 const useIsoLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
@@ -56,7 +58,7 @@ interface VirtualTableProps<TData> {
   /** Estimated row height for the virtualizer. Default 44. */
   estimateRowHeight?: number
   /** Max height of the scroll viewport once virtualized. Default '70vh'. */
-  maxHeight?: number | string
+  maxHeight?: Length
   /** Render every row (no windowing) at or below this count. Default 150. */
   virtualizeThreshold?: number
   /**
@@ -94,7 +96,7 @@ export function VirtualTable<TData>({
   onVisiblePageChange,
   rangeLabel,
   pageSize = 50,
-  estimateRowHeight = 44,
+  estimateRowHeight = SIZES_PX.touchTarget,
   maxHeight = '70vh',
   virtualizeThreshold = 150,
   stackBelow = 'sm',
@@ -288,7 +290,7 @@ export function VirtualTable<TData>({
         role="table"
         style={[
           stacked ? styles.stackScroll : styles.scroll,
-          virtualize && styles.scrollMax(maxHeight),
+          virtualize && styles.scrollMax(resolveLength(maxHeight)),
         ]}
       >
         {stacked ? null : (

package/src/components/VirtualTable/styles.css.ts

@@ -1,7 +1,8 @@
 import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
-import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
+import {microSpacing, radii, spacing} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 export const styles = css.create({
   wrap: {
@@ -11,7 +12,7 @@ export const styles = css.create({
   scroll: {
     position: 'relative',
     width: '100%',
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
     borderRadius: radii.md,
@@ -32,7 +33,7 @@ export const styles = css.create({
   headRow: {
     display: 'flex',
     flexDirection: 'row',
-    borderBottomWidth: 1,
+    borderBottomWidth: borders.hairline,
     borderBottomStyle: 'solid',
     borderBottomColor: colors.border,
   },
@@ -71,7 +72,7 @@ export const styles = css.create({
     flexDirection: 'row',
     alignItems: 'center',
     width: '100%',
-    borderBottomWidth: 1,
+    borderBottomWidth: borders.hairline,
     borderBottomStyle: 'solid',
     borderBottomColor: colors.border,
   },
@@ -124,7 +125,7 @@ export const styles = css.create({
     gap: spacing.xs,
     width: '100%',
     padding: spacing.sm,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
     borderRadius: radii.sm,
@@ -161,13 +162,13 @@ export const styles = css.create({
     position: 'absolute',
     right: spacing.sm,
     bottom: spacing.sm,
-    paddingTop: 3,
-    paddingBottom: 3,
+    paddingTop: microSpacing.px3,
+    paddingBottom: microSpacing.px3,
     paddingLeft: spacing.sm,
     paddingRight: spacing.sm,
     borderRadius: radii.full,
     backgroundColor: colors.bgCardHover,
-    borderWidth: 1,
+    borderWidth: borders.hairline,
     borderStyle: 'solid',
     borderColor: colors.border,
     color: colors.textMuted,

package/src/docs/Spacing.stories.tsx

@@ -7,6 +7,8 @@ import {Inline} from '../components/Inline/Inline'
 import {useContainerQuery} from '../hooks/useContainerQuery'
 import {TokenTable} from './helpers'
 import {typography, typeScale} from '@duro-app/tokens/tokens/typography.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const primitiveTokens: Record<string, string> = {
   xs: '4px',
@@ -33,7 +35,7 @@ export default meta
 
 const styles = css.create({
   wrapper: {
-    maxWidth: 640,
+    maxWidth: sizes.panelLg,
   },
   hint: {
     fontSize: typography.fontSizeXs,
@@ -41,10 +43,10 @@ const styles = css.create({
     fontStyle: 'italic',
   },
   baselineRow: {
-    height: 24,
+    height: sizes.iconLg,
     display: 'flex',
     alignItems: 'center',
-    borderBottomWidth: 1,
+    borderBottomWidth: borders.hairline,
     borderBottomStyle: 'dashed',
     borderBottomColor: colors.border,
   },
@@ -52,11 +54,10 @@ const styles = css.create({
     fontSize: typography.fontSizeXs,
     fontFamily: 'monospace',
     color: colors.textMuted,
-    width: 50,
+    width: sizes.iconXxl,
   },
   baselineBlock: {
-    flexGrow: 1,
-    height: 24,
+    height: sizes.iconLg,
     backgroundColor: colors.accent,
     opacity: 0.15,
     borderRadius: radii.xs,
@@ -64,13 +65,13 @@ const styles = css.create({
   resizableContainer: {
     resize: 'horizontal',
     overflow: 'auto',
-    borderWidth: 2,
+    borderWidth: borders.strong,
     borderStyle: 'dashed',
     borderColor: colors.border,
     padding: spacing.md,
-    minWidth: 200,
+    minWidth: sizes.listMaxHSm,
     maxWidth: '100%',
-    width: 600,
+    width: sizes.pageSm,
   },
   sizeLabel: {
     fontSize: typography.fontSizeHeading,
@@ -87,7 +88,7 @@ const styles = css.create({
     color: colors.successText,
   },
   mappingRow: {
-    borderBottomWidth: 1,
+    borderBottomWidth: borders.hairline,
     borderBottomStyle: 'solid',
     borderBottomColor: colors.border,
     fontFamily: 'monospace',

package/src/docs/Typography.stories.tsx

@@ -8,6 +8,8 @@ import {Text} from '../components/Text/Text'
 import {Heading} from '../components/Heading/Heading'
 import {TypeScaleTable} from './helpers'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const meta: Meta = {
   title: 'Foundations/Typography',
@@ -169,7 +171,7 @@ export const TextVariants: StoryObj = {
 
 const localStyles = css.create({
   wrapper: {
-    maxWidth: 720,
+    maxWidth: sizes.dialogLg,
   },
   hint: {
     fontSize: typography.fontSizeXs,
@@ -187,8 +189,8 @@ const localStyles = css.create({
     position: 'relative',
   },
   gridLine: {
-    height: 24,
-    borderBottomWidth: 1,
+    height: sizes.iconLg,
+    borderBottomWidth: borders.hairline,
     borderBottomStyle: 'dashed',
     borderBottomColor: colors.border,
   },
@@ -201,12 +203,12 @@ const localStyles = css.create({
   resizableContainer: {
     resize: 'horizontal',
     overflow: 'auto',
-    borderWidth: 2,
+    borderWidth: borders.strong,
     borderStyle: 'dashed',
     borderColor: colors.border,
     padding: spacing.md,
-    minWidth: 280,
+    minWidth: sizes.gridColMd,
     maxWidth: '100%',
-    width: 700,
+    width: sizes.dialogLg,
   },
 })

package/src/docs/helpers.tsx

@@ -1,12 +1,13 @@
 import {css, html} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
-import {typography, typeScale} from '@duro-app/tokens/tokens/typography.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {Table} from '../components/Table/Table'
 import {radii, spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 const styles = css.create({
   bar: {
-    height: 12,
+    height: sizes.glyphSm,
     borderRadius: radii.xs,
     backgroundColor: colors.accent,
   },

package/src/shared/length.ts

@@ -0,0 +1,51 @@
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {SIZE_KEYS, type SizeToken} from '@duro-app/tokens/keys'
+
+/**
+ * A length a measure prop accepts without a token: zero, a relative unit or a
+ * keyword. These are the exemptions of design-system.every-measure-is-a-token
+ * (ADR-0027); a px value is not one of them.
+ */
+export type RelativeLength =
+  | 0
+  | '0'
+  | 'auto'
+  | 'none'
+  | 'min-content'
+  | 'max-content'
+  | 'fit-content'
+  | `${number}%`
+  | `${number}vh`
+  | `${number}vw`
+  | `${number}dvh`
+  | `${number}svh`
+  | `${number}lvh`
+  | `${number}em`
+  | `${number}rem`
+  | `${number}ch`
+
+/** A measure prop: a `sizes` token key (`"gridColMd"`) or a relative length. */
+export type Length = SizeToken | RelativeLength
+
+/**
+ * A CSS grid track: a Length, a fraction, or a track function. The arguments
+ * of `minmax()` / `fit-content()` are not checked by the type — pass tokens
+ * through `resolveLength` or `sizes.*` when building one.
+ *
+ * holds-until: a structured track type (`{min: Length, max: GridTrack}`)
+ * replaces the template-literal functions; a type cannot see inside
+ * `minmax(${string})`, so a px there is the one measure lint and types miss.
+ */
+export type GridTrack = Length | `${number}fr` | `minmax(${string})` | `fit-content(${string})`
+
+const sizeKeys: ReadonlySet<string> = new Set(SIZE_KEYS)
+
+/** The CSS value for a Length: a size token key becomes its variable. */
+export function resolveLength(value: Length): string | number {
+  return typeof value === 'string' && sizeKeys.has(value) ? sizes[value as SizeToken] : value
+}
+
+/** The CSS value for a GridTrack: a size token key becomes its variable. */
+export function resolveTrack(track: GridTrack): string | number {
+  return typeof track === 'string' && sizeKeys.has(track) ? sizes[track as SizeToken] : track
+}

package/src/shared/length.typecheck.tsx

@@ -0,0 +1,47 @@
+// Compile-only fixtures for measure props (ADR-0027, plan 2c′). `pnpm typecheck`
+// fails if a raw px becomes assignable to a measure prop, or if a token key or
+// a relative length stops being. Never imported at runtime.
+
+import type {Grid} from '../components/Grid/Grid'
+import type {InputGroup} from '../components/InputGroup/InputGroup'
+import type {ScrollArea} from '../components/ScrollArea/ScrollArea'
+import type {Table} from '../components/Table/Table'
+import type {VirtualTable} from '../components/VirtualTable/VirtualTable'
+import type {GridTrack, Length} from './length'
+
+/** `true` when every member of T is assignable to U. */
+type Assignable<T, U> = [T] extends [U] ? true : false
+
+/** The props a function component takes. */
+type PropsOf<C> = C extends (props: infer P) => unknown ? P : never
+type Prop<C, K extends keyof PropsOf<C>> = NonNullable<PropsOf<C>[K]>
+
+// Accepted: token keys, zero, relative lengths, keywords.
+export const lengthTokens: Assignable<'gridColMd' | 'touchTarget', Length> = true
+export const lengthRelative: Assignable<0 | '0' | '100%' | '70vh' | '2rem' | 'auto', Length> = true
+export const trackForms: Assignable<
+  'iconButton' | '2fr' | 'max-content' | 'minmax(0, 2fr)',
+  GridTrack
+> = true
+
+// Refused: px as a string or a number.
+export const lengthPxString: Assignable<'280px', Length> = false
+export const lengthPxNumber: Assignable<44, Length> = false
+export const trackPx: Assignable<'40px', GridTrack> = false
+
+// The props themselves.
+export const gridMin: Assignable<'280px', Prop<typeof Grid, 'minColumnWidth'>> = false
+export const gridMinToken: Assignable<'gridColMd', Prop<typeof Grid, 'minColumnWidth'>> = true
+export const addonMin: Assignable<80, Prop<typeof InputGroup.Addon, 'minWidth'>> = false
+export const viewportMax: Assignable<300, Prop<typeof ScrollArea.Viewport, 'maxHeight'>> = false
+export const viewportMaxToken: Assignable<
+  'listMaxH',
+  Prop<typeof ScrollArea.Viewport, 'maxHeight'>
+> = true
+export const tableMin: Assignable<120, Prop<typeof Table.Root, 'minColumnWidth'>> = false
+export const headerWidth: Assignable<'40px', Prop<typeof Table.HeaderCell, 'width'>> = false
+export const headerWidthToken: Assignable<
+  'iconButton',
+  Prop<typeof Table.HeaderCell, 'width'>
+> = true
+export const virtualMax: Assignable<300, Prop<typeof VirtualTable, 'maxHeight'>> = false

package/src/styles/visually-hidden.css.ts

@@ -0,0 +1,16 @@
+import {css} from 'react-strict-dom'
+
+// The visually-hidden technique: a 1×1 box clipped by overflow, still in the
+// accessibility tree and still focusable where the element is. The 1px is the
+// technique, not a design measure, so this module is the one file the
+// every-measure-is-a-token rule exempts (ADR-0027; `exemptFiles` in
+// eslint.config.js). Components layer their own extras on top (`opacity: 0`
+// for a native input, `clip` for a label).
+export const visuallyHidden = css.create({
+  base: {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    overflow: 'hidden',
+  },
+})