From 27195b24cd31341c0becedcc178ce2412e986a47 Mon Sep 17 00:00:00 2001
From: Cole Bemis <colebemis@github.com>
Date: Tue, 25 Oct 2022 09:40:17 -0700
Subject: [PATCH 01/28] Create RelativeTime component

Co-authored-by: Keith Cirkel <keithamus@users.noreply.github.com>
---
 package-lock.json                         |  22 +++++
 package.json                              |   2 +
 src/RelativeTime/RelativeTime.stories.tsx | 105 ++++++++++++++++++++++
 src/RelativeTime/RelativeTime.tsx         |   7 ++
 4 files changed, 136 insertions(+)
 create mode 100644 src/RelativeTime/RelativeTime.stories.tsx
 create mode 100644 src/RelativeTime/RelativeTime.tsx

diff --git a/package-lock.json b/package-lock.json
index 88ed22d0f5a..ec6e7ade53a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,8 @@
         "@github/combobox-nav": "^2.1.5",
         "@github/markdown-toolbar-element": "^2.1.0",
         "@github/paste-markdown": "^1.4.0",
+        "@github/time-elements": "3.2.0",
+        "@lit-labs/react": "1.0.9",
         "@primer/behaviors": "1.3.1",
         "@primer/octicons-react": "^17.7.0",
         "@primer/primitives": "7.10.0",
@@ -3023,6 +3025,11 @@
       "integrity": "sha512-ZOJ+U771Mw68qp2GPbcqPt2Xg0LEl0YwiIFHXwVLAFm2TgDnsgcCHhXO8PIxOWPqSFO4S7xIMD9CBobfaWGASA==",
       "dev": true
     },
+    "node_modules/@github/time-elements": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@github/time-elements/-/time-elements-3.2.0.tgz",
+      "integrity": "sha512-YWhC5AqHhme1RYFcQCA5hrTfz0MsVk1z55YXKU7dCk2S8PVwSCEeRBiygtT38975wpzqK55uAfF9NnSgfaX97A=="
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -5848,6 +5855,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "node_modules/@lit-labs/react": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.0.9.tgz",
+      "integrity": "sha512-yjkdcciypTIJ6vUXzZJHTAwt2fdATUAfZMkHRbLpbgEnr8OwpwVOQ04me1Y7p5Vwtmcd4GWY0/BQ6G8jUgCK1w=="
+    },
     "node_modules/@manypkg/find-root": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@manypkg/find-root/-/find-root-1.1.0.tgz",
@@ -44809,6 +44821,11 @@
       "integrity": "sha512-ZOJ+U771Mw68qp2GPbcqPt2Xg0LEl0YwiIFHXwVLAFm2TgDnsgcCHhXO8PIxOWPqSFO4S7xIMD9CBobfaWGASA==",
       "dev": true
     },
+    "@github/time-elements": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@github/time-elements/-/time-elements-3.2.0.tgz",
+      "integrity": "sha512-YWhC5AqHhme1RYFcQCA5hrTfz0MsVk1z55YXKU7dCk2S8PVwSCEeRBiygtT38975wpzqK55uAfF9NnSgfaX97A=="
+    },
     "@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -47000,6 +47017,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "@lit-labs/react": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.0.9.tgz",
+      "integrity": "sha512-yjkdcciypTIJ6vUXzZJHTAwt2fdATUAfZMkHRbLpbgEnr8OwpwVOQ04me1Y7p5Vwtmcd4GWY0/BQ6G8jUgCK1w=="
+    },
     "@manypkg/find-root": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@manypkg/find-root/-/find-root-1.1.0.tgz",
diff --git a/package.json b/package.json
index f6f66ebf610..fda4a389cdc 100644
--- a/package.json
+++ b/package.json
@@ -83,6 +83,8 @@
     "@github/markdown-toolbar-element": "^2.1.0",
     "@github/paste-markdown": "^1.4.0",
     "@primer/behaviors": "1.3.1",
+    "@github/time-elements": "3.2.0",
+    "@lit-labs/react": "1.0.9",
     "@primer/octicons-react": "^17.7.0",
     "@primer/primitives": "7.10.0",
     "@react-aria/ssr": "^3.1.0",
diff --git a/src/RelativeTime/RelativeTime.stories.tsx b/src/RelativeTime/RelativeTime.stories.tsx
new file mode 100644
index 00000000000..ad0c95ee962
--- /dev/null
+++ b/src/RelativeTime/RelativeTime.stories.tsx
@@ -0,0 +1,105 @@
+import {RelativeTime} from './RelativeTime'
+import React from 'react'
+import {Meta, Story} from '@storybook/react'
+
+const meta: Meta = {
+  title: 'Components/RelativeTime',
+  component: RelativeTime,
+  parameters: {
+    layout: 'fullscreen',
+    controls: {
+      exclude: /^(getFormatted.*|datetime|sx|as|theme|forwardedAs|.*Callback)$/g
+    }
+  },
+  args: {
+    date: new Date('2020-01-01T00:00:00Z'),
+    day: 'numeric',
+    month: 'short',
+    year: '',
+    timeZoneName: ''
+  },
+  argTypes: {
+    hour: {
+      type: {
+        name: 'enum',
+        value: ['', 'numeric', '2-digit']
+      },
+      control: {
+        type: 'select',
+        labels: {
+          '': '(None)'
+        }
+      }
+    },
+    minute: {
+      type: {
+        name: 'enum',
+        value: ['', 'numeric', '2-digit']
+      },
+      control: {
+        type: 'select',
+        labels: {
+          '': '(None)'
+        }
+      }
+    },
+    day: {
+      type: {
+        name: 'enum',
+        value: ['', 'numeric', '2-digit']
+      },
+      control: {
+        type: 'select',
+        labels: {
+          '': '(None)'
+        }
+      }
+    },
+    month: {
+      type: {
+        name: 'enum',
+        value: ['', 'numeric', '2-digit', 'long', 'short', 'narrow']
+      },
+      control: {
+        type: 'select',
+        labels: {
+          '': '(None)'
+        }
+      }
+    },
+    year: {
+      type: {
+        name: 'enum',
+        value: ['', 'numeric', '2-digit']
+      },
+      control: {
+        type: 'select',
+        labels: {
+          '': '(None)'
+        }
+      }
+    },
+    timeZoneName: {
+      type: {
+        name: 'enum',
+        value: ['', 'long', 'short', 'longOffset', 'shortOffset', 'longGeneric', 'shortGeneric']
+      },
+      control: {
+        type: 'select',
+        labels: {
+          '': '(None)'
+        }
+      }
+    },
+    date: {
+      control: 'date'
+    }
+  }
+}
+
+export const Default: Story = args => {
+  const {date, ...rest} = args
+  return <RelativeTime {...rest} date={new Date(date)} sx={{color: 'accent.fg'}} />
+}
+
+export default meta
diff --git a/src/RelativeTime/RelativeTime.tsx b/src/RelativeTime/RelativeTime.tsx
new file mode 100644
index 00000000000..fcecd015fa9
--- /dev/null
+++ b/src/RelativeTime/RelativeTime.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+import styled from 'styled-components'
+import {RelativeTimeElement} from '@github/time-elements'
+import {createComponent} from '@lit-labs/react'
+import sx from '../sx'
+
+export const RelativeTime = styled(createComponent(React, 'relative-time', RelativeTimeElement))(sx)

From da4a8862f88ec64041c12a20a37ae19e7e4dba00 Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Tue, 8 Nov 2022 12:07:09 +0000
Subject: [PATCH 02/28] add tests for RelativeTime

---
 jest.config.js                            |  2 +-
 src/RelativeTime/RelativeTime.stories.tsx |  6 ++++--
 src/RelativeTime/RelativeTime.tsx         |  6 +++++-
 src/__tests__/RelativeTime.test.tsx       | 25 +++++++++++++++++++++++
 src/index.ts                              |  2 ++
 5 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 src/__tests__/RelativeTime.test.tsx

diff --git a/jest.config.js b/jest.config.js
index 29e435deeb8..bbaee1208c2 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -7,7 +7,7 @@ module.exports = {
   setupFilesAfterEnv: ['<rootDir>/src/utils/test-matchers.tsx', '<rootDir>/src/utils/test-deprecations.tsx'],
   testMatch: ['<rootDir>/(src|codemods)/**/*.test.[jt]s?(x)', '!**/*.types.test.[jt]s?(x)'],
   transformIgnorePatterns: [
-    'node_modules/(?!@github/combobox-nav|@koddsson/textarea-caret|@github/markdown-toolbar-element)'
+    'node_modules/(?!@github/combobox-nav|@koddsson/textarea-caret|@github/[a-z-]+-element|@lit-labs/react)'
   ],
   watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname']
 }
diff --git a/src/RelativeTime/RelativeTime.stories.tsx b/src/RelativeTime/RelativeTime.stories.tsx
index ad0c95ee962..5527eef34be 100644
--- a/src/RelativeTime/RelativeTime.stories.tsx
+++ b/src/RelativeTime/RelativeTime.stories.tsx
@@ -1,4 +1,4 @@
-import {RelativeTime} from './RelativeTime'
+import RelativeTime from './RelativeTime'
 import React from 'react'
 import {Meta, Story} from '@storybook/react'
 
@@ -8,7 +8,9 @@ const meta: Meta = {
   parameters: {
     layout: 'fullscreen',
     controls: {
-      exclude: /^(getFormatted.*|datetime|sx|as|theme|forwardedAs|.*Callback)$/g
+      // StoryBook infers from type info of the component which includes CE Lifecycle,
+      // SX props, and methods we want to otherwise ignore
+      exclude: /^(getFormatted.*|datetime|sx|as|theme|forwardedAs|.*Callback|update)$/g
     }
   },
   args: {
diff --git a/src/RelativeTime/RelativeTime.tsx b/src/RelativeTime/RelativeTime.tsx
index fcecd015fa9..9f18ff0c138 100644
--- a/src/RelativeTime/RelativeTime.tsx
+++ b/src/RelativeTime/RelativeTime.tsx
@@ -2,6 +2,10 @@ import React from 'react'
 import styled from 'styled-components'
 import {RelativeTimeElement} from '@github/time-elements'
 import {createComponent} from '@lit-labs/react'
+import {ComponentProps} from '../utils/types'
 import sx from '../sx'
 
-export const RelativeTime = styled(createComponent(React, 'relative-time', RelativeTimeElement))(sx)
+const RelativeTime = styled(createComponent(React, 'relative-time', RelativeTimeElement))(sx)
+
+export type RelativeTimeProps = ComponentProps<typeof RelativeTime>
+export default RelativeTime
diff --git a/src/__tests__/RelativeTime.test.tsx b/src/__tests__/RelativeTime.test.tsx
new file mode 100644
index 00000000000..ef47a592a19
--- /dev/null
+++ b/src/__tests__/RelativeTime.test.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import {RelativeTime} from '..'
+import {render as HTMLRender} from '@testing-library/react'
+import {axe, toHaveNoViolations} from 'jest-axe'
+import {render, behavesAsComponent, checkExports} from '../utils/testing'
+expect.extend(toHaveNoViolations)
+
+describe('RelativeTime', () => {
+  behavesAsComponent({Component: RelativeTime})
+
+  checkExports('RelativeTime', {
+    default: RelativeTime
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(<RelativeTime />)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it('renders a <relative-time>', () => {
+    expect(render(<RelativeTime />).type).toEqual('relative-time')
+  })
+  
+})
diff --git a/src/index.ts b/src/index.ts
index f2e1dd78478..928edb5bb02 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -130,6 +130,8 @@ export type {PortalProps} from './Portal'
 export {default as ProgressBar} from './ProgressBar'
 export type {ProgressBarProps} from './ProgressBar'
 export {default as RadioGroup} from './RadioGroup'
+export type {RelativeTimeProps} from './RelativeTime'
+export {default as RelativeTime} from './RelativeTime'
 export {SegmentedControl} from './SegmentedControl'
 export {default as Select} from './Select'
 export type {SelectProps} from './Select'

From e88decec1e36c5a0bf962930e905e5f351e275e3 Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Tue, 8 Nov 2022 12:15:01 +0000
Subject: [PATCH 03/28] add fallback to class prop for checkStylesDeep

class props will still render out correctly
---
 src/utils/test-matchers.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/test-matchers.tsx b/src/utils/test-matchers.tsx
index 66f2e6eb00e..0997bf8939d 100644
--- a/src/utils/test-matchers.tsx
+++ b/src/utils/test-matchers.tsx
@@ -39,7 +39,7 @@ expect.extend({
     const elem = React.cloneElement(element, {sx: sxPropValue})
 
     function checkStylesDeep(rendered: ReactTestRendererJSON): boolean {
-      const className = rendered.props.className
+      const className = rendered.props.className || rendered.props.class
       const styles = getComputedStyles(className)
       const mediaStyles = styles[mediaKey] as Record<string, string> | null
       if (mediaStyles && mediaStyles.color) {

From be9d108b3cee780d67c025ce96da918447028264 Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Tue, 8 Nov 2022 12:15:32 +0000
Subject: [PATCH 04/28] add snapshots

---
 src/__tests__/__snapshots__/RelativeTime.test.tsx.snap | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 src/__tests__/__snapshots__/RelativeTime.test.tsx.snap

diff --git a/src/__tests__/__snapshots__/RelativeTime.test.tsx.snap b/src/__tests__/__snapshots__/RelativeTime.test.tsx.snap
new file mode 100644
index 00000000000..7d295b98ff2
--- /dev/null
+++ b/src/__tests__/__snapshots__/RelativeTime.test.tsx.snap
@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RelativeTime renders consistently 1`] = `
+<relative-time
+  _$Gl={null}
+  class=""
+/>
+`;

From 5b95e75d39dd63ea0cf9dbb0d681a15e3cb278db Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Tue, 8 Nov 2022 12:15:46 +0000
Subject: [PATCH 05/28] add missing index file

---
 src/RelativeTime/index.ts | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 src/RelativeTime/index.ts

diff --git a/src/RelativeTime/index.ts b/src/RelativeTime/index.ts
new file mode 100644
index 00000000000..70437bbda11
--- /dev/null
+++ b/src/RelativeTime/index.ts
@@ -0,0 +1,2 @@
+export {default} from './RelativeTime'
+export type {RelativeTimeProps} from './RelativeTime'

From b34e5cb49cbfa5089e7d6f44bc5422dbb090110d Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Tue, 8 Nov 2022 13:57:49 +0000
Subject: [PATCH 06/28] add changeset

---
 .changeset/giant-mails-battle.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/giant-mails-battle.md

diff --git a/.changeset/giant-mails-battle.md b/.changeset/giant-mails-battle.md
new file mode 100644
index 00000000000..4a4be5ebf98
--- /dev/null
+++ b/.changeset/giant-mails-battle.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add RelativeTime component

From 76b8dde0625de0ba5d5e3c467dae1300f16f328c Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Tue, 22 Nov 2022 14:43:13 +0000
Subject: [PATCH 07/28] upgrade time-elements to latest

---
 package-lock.json | 14 +++++++-------
 package.json      |  4 ++--
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ec6e7ade53a..863e19b5bd9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "@github/combobox-nav": "^2.1.5",
         "@github/markdown-toolbar-element": "^2.1.0",
         "@github/paste-markdown": "^1.4.0",
-        "@github/time-elements": "3.2.0",
+        "@github/time-elements": "3.4.0",
         "@lit-labs/react": "1.0.9",
         "@primer/behaviors": "1.3.1",
         "@primer/octicons-react": "^17.7.0",
@@ -3026,9 +3026,9 @@
       "dev": true
     },
     "node_modules/@github/time-elements": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@github/time-elements/-/time-elements-3.2.0.tgz",
-      "integrity": "sha512-YWhC5AqHhme1RYFcQCA5hrTfz0MsVk1z55YXKU7dCk2S8PVwSCEeRBiygtT38975wpzqK55uAfF9NnSgfaX97A=="
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@github/time-elements/-/time-elements-3.4.0.tgz",
+      "integrity": "sha512-9xjZ6567A9nUCCmDqchVAk4/WkfTs9vQkNJRXQ2oTFiUIgdGx/gbQYuSbYTNVXbrj0sByzO+F2JhSt73KiDBBg=="
     },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
@@ -44822,9 +44822,9 @@
       "dev": true
     },
     "@github/time-elements": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@github/time-elements/-/time-elements-3.2.0.tgz",
-      "integrity": "sha512-YWhC5AqHhme1RYFcQCA5hrTfz0MsVk1z55YXKU7dCk2S8PVwSCEeRBiygtT38975wpzqK55uAfF9NnSgfaX97A=="
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@github/time-elements/-/time-elements-3.4.0.tgz",
+      "integrity": "sha512-9xjZ6567A9nUCCmDqchVAk4/WkfTs9vQkNJRXQ2oTFiUIgdGx/gbQYuSbYTNVXbrj0sByzO+F2JhSt73KiDBBg=="
     },
     "@hapi/hoek": {
       "version": "9.3.0",
diff --git a/package.json b/package.json
index fda4a389cdc..109c0755a48 100644
--- a/package.json
+++ b/package.json
@@ -82,9 +82,9 @@
     "@github/combobox-nav": "^2.1.5",
     "@github/markdown-toolbar-element": "^2.1.0",
     "@github/paste-markdown": "^1.4.0",
-    "@primer/behaviors": "1.3.1",
-    "@github/time-elements": "3.2.0",
+    "@github/time-elements": "3.4.0",
     "@lit-labs/react": "1.0.9",
+    "@primer/behaviors": "1.3.1",
     "@primer/octicons-react": "^17.7.0",
     "@primer/primitives": "7.10.0",
     "@react-aria/ssr": "^3.1.0",

From 9ba8d954e6f479329958abc6ea092787783e8b31 Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Tue, 22 Nov 2022 14:43:33 +0000
Subject: [PATCH 08/28] add more story examples for relativetime

---
 src/RelativeTime/RelativeTime.stories.tsx | 53 ++++++++++++++++++++++-
 1 file changed, 52 insertions(+), 1 deletion(-)

diff --git a/src/RelativeTime/RelativeTime.stories.tsx b/src/RelativeTime/RelativeTime.stories.tsx
index 5527eef34be..bd131c56e61 100644
--- a/src/RelativeTime/RelativeTime.stories.tsx
+++ b/src/RelativeTime/RelativeTime.stories.tsx
@@ -15,6 +15,10 @@ const meta: Meta = {
   },
   args: {
     date: new Date('2020-01-01T00:00:00Z'),
+    second: '',
+    minute: '',
+    hour: '',
+    weekday: '',
     day: 'numeric',
     month: 'short',
     year: '',
@@ -45,6 +49,30 @@ const meta: Meta = {
         }
       }
     },
+    second: {
+      type: {
+        name: 'enum',
+        value: ['', 'numeric', '2-digit']
+      },
+      control: {
+        type: 'select',
+        labels: {
+          '': '(None)'
+        }
+      }
+    },
+    weekday: {
+      type: {
+        name: 'enum',
+        value: ['', 'short', 'long', 'narrow']
+      },
+      control: {
+        type: 'select',
+        labels: {
+          '': '(None)'
+        }
+      }
+    },
     day: {
       type: {
         name: 'enum',
@@ -95,13 +123,36 @@ const meta: Meta = {
     },
     date: {
       control: 'date'
+    },
+    format: {
+      control: 'string'
     }
   }
 }
 
 export const Default: Story = args => {
   const {date, ...rest} = args
-  return <RelativeTime {...rest} date={new Date(date)} sx={{color: 'accent.fg'}} />
+  return <RelativeTime {...rest} date={new Date(date)} />
+}
+
+export const MicroFormat: Story = args => {
+  const {date, ...rest} = args
+  return <RelativeTime {...rest} date={new Date(date)} format="micro" />
+}
+MicroFormat.args = {tense: 'past'}
+MicroFormat.argTypes = {format: {control: false}}
+
+export const RecentTime: Story = args => {
+  const {...rest} = args
+  return <RelativeTime {...rest} date={new Date()} />
+}
+RecentTime.argTypes = {date: {control: false}}
+
+export const CountDownTimer: Story = args => {
+  const {...rest} = args
+  return <RelativeTime {...rest} />
 }
+CountDownTimer.args = {date: new Date("2038-01-19T03:14:08Z"), format: 'elapsed', day: '', month: ''}
+CountDownTimer.argTypes = {date: {control: false}, format: {control: false}}
 
 export default meta

From 4387ad718d96e8ed1cafe91857c84d2c06c06596 Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Tue, 22 Nov 2022 14:50:00 +0000
Subject: [PATCH 09/28] add time-elements and lit-labs/react to rollup ESM_ONLY

---
 rollup.config.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/rollup.config.js b/rollup.config.js
index e65259a88ae..4cc719c92f2 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -50,7 +50,13 @@ const input = new Set([
 ])
 
 const extensions = ['.js', '.jsx', '.ts', '.tsx']
-const ESM_ONLY = new Set(['@github/combobox-nav', '@github/markdown-toolbar-element', '@github/paste-markdown'])
+const ESM_ONLY = new Set([
+  '@github/combobox-nav',
+  '@github/markdown-toolbar-element',
+  '@github/paste-markdown',
+  '@github/time-elements',
+  '@lit-labs/react'
+])
 const dependencies = [
   ...Object.keys(packageJson.peerDependencies ?? {}),
   ...Object.keys(packageJson.dependencies ?? {}),

From f5b253f412166b9e2d768bedf9c6ba36a761a94b Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Tue, 22 Nov 2022 15:00:26 +0000
Subject: [PATCH 10/28] update snapshot tests

---
 src/__tests__/__snapshots__/exports.test.ts.snap | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/__tests__/__snapshots__/exports.test.ts.snap b/src/__tests__/__snapshots__/exports.test.ts.snap
index 1827185437f..fb0d8eb3a5c 100644
--- a/src/__tests__/__snapshots__/exports.test.ts.snap
+++ b/src/__tests__/__snapshots__/exports.test.ts.snap
@@ -49,6 +49,7 @@ exports[`@primer/react should not update exports without a semver change 1`] = `
   "ProgressBar",
   "Radio",
   "RadioGroup",
+  "RelativeTime",
   "SSRProvider",
   "SegmentedControl",
   "Select",

From 0adbc06cee503e99c1eed8044b89936fcdf000d5 Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Tue, 22 Nov 2022 15:00:39 +0000
Subject: [PATCH 11/28] add custom-elements polyfill for SSR

---
 src/index.ts                     | 2 ++
 src/polyfills/custom-elements.ts | 8 ++++++++
 2 files changed, 10 insertions(+)
 create mode 100644 src/polyfills/custom-elements.ts

diff --git a/src/index.ts b/src/index.ts
index 928edb5bb02..0c864a1b6df 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,3 +1,5 @@
+import './polyfills/custom-elements'
+
 export {default as theme} from './theme'
 export {get as themeGet} from './constants'
 export {default as BaseStyles} from './BaseStyles'
diff --git a/src/polyfills/custom-elements.ts b/src/polyfills/custom-elements.ts
new file mode 100644
index 00000000000..68d7cf52fa4
--- /dev/null
+++ b/src/polyfills/custom-elements.ts
@@ -0,0 +1,8 @@
+const root = typeof globalThis !== 'undefined' ? globalThis : window
+root.customElements ??= {
+  define() {},
+  get() {},
+  update() {},
+  whenDefined() { return new Promise(() => {}) }
+} as unknown as CustomElementRegistry
+root.HTMLElement ??= class HTMLElement {} as unknown as typeof HTMLElement

From b46a84094ac0a5ed9730f57fa301dbe7dfb1e611 Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Tue, 22 Nov 2022 15:48:52 +0000
Subject: [PATCH 12/28] prettier

---
 src/RelativeTime/RelativeTime.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/RelativeTime/RelativeTime.stories.tsx b/src/RelativeTime/RelativeTime.stories.tsx
index bd131c56e61..073564bfac6 100644
--- a/src/RelativeTime/RelativeTime.stories.tsx
+++ b/src/RelativeTime/RelativeTime.stories.tsx
@@ -152,7 +152,7 @@ export const CountDownTimer: Story = args => {
   const {...rest} = args
   return <RelativeTime {...rest} />
 }
-CountDownTimer.args = {date: new Date("2038-01-19T03:14:08Z"), format: 'elapsed', day: '', month: ''}
+CountDownTimer.args = {date: new Date('2038-01-19T03:14:08Z'), format: 'elapsed', day: '', month: ''}
 CountDownTimer.argTypes = {date: {control: false}, format: {control: false}}
 
 export default meta

From d3c368705bc81b0255c07b892541ce5c6e1663d6 Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Tue, 22 Nov 2022 16:19:58 +0000
Subject: [PATCH 13/28] prettier

---
 src/__tests__/RelativeTime.test.tsx | 1 -
 src/polyfills/custom-elements.ts    | 4 +++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/__tests__/RelativeTime.test.tsx b/src/__tests__/RelativeTime.test.tsx
index ef47a592a19..fc135e18e99 100644
--- a/src/__tests__/RelativeTime.test.tsx
+++ b/src/__tests__/RelativeTime.test.tsx
@@ -21,5 +21,4 @@ describe('RelativeTime', () => {
   it('renders a <relative-time>', () => {
     expect(render(<RelativeTime />).type).toEqual('relative-time')
   })
-  
 })
diff --git a/src/polyfills/custom-elements.ts b/src/polyfills/custom-elements.ts
index 68d7cf52fa4..122583d91f9 100644
--- a/src/polyfills/custom-elements.ts
+++ b/src/polyfills/custom-elements.ts
@@ -3,6 +3,8 @@ root.customElements ??= {
   define() {},
   get() {},
   update() {},
-  whenDefined() { return new Promise(() => {}) }
+  whenDefined() {
+    return new Promise(() => {})
+  }
 } as unknown as CustomElementRegistry
 root.HTMLElement ??= class HTMLElement {} as unknown as typeof HTMLElement

From 1f1ce07895a1fb13611136bdbb0f5362d726c8cd Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Tue, 22 Nov 2022 18:00:28 +0000
Subject: [PATCH 14/28] bump @github/time-elements to v3.4.1

---
 package-lock.json | 14 +++++++-------
 package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 863e19b5bd9..75be7fe90d5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "@github/combobox-nav": "^2.1.5",
         "@github/markdown-toolbar-element": "^2.1.0",
         "@github/paste-markdown": "^1.4.0",
-        "@github/time-elements": "3.4.0",
+        "@github/time-elements": "3.4.1",
         "@lit-labs/react": "1.0.9",
         "@primer/behaviors": "1.3.1",
         "@primer/octicons-react": "^17.7.0",
@@ -3026,9 +3026,9 @@
       "dev": true
     },
     "node_modules/@github/time-elements": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@github/time-elements/-/time-elements-3.4.0.tgz",
-      "integrity": "sha512-9xjZ6567A9nUCCmDqchVAk4/WkfTs9vQkNJRXQ2oTFiUIgdGx/gbQYuSbYTNVXbrj0sByzO+F2JhSt73KiDBBg=="
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@github/time-elements/-/time-elements-3.4.1.tgz",
+      "integrity": "sha512-rCXmeD+Rd3NqyN/Q1KY2tFdKpA+iB4kz9Yk4G8LcDnZsMQZQjNaKGvtU12UpomxCq7J2azNL0DrFnMBlVryuDA=="
     },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
@@ -44822,9 +44822,9 @@
       "dev": true
     },
     "@github/time-elements": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/@github/time-elements/-/time-elements-3.4.0.tgz",
-      "integrity": "sha512-9xjZ6567A9nUCCmDqchVAk4/WkfTs9vQkNJRXQ2oTFiUIgdGx/gbQYuSbYTNVXbrj0sByzO+F2JhSt73KiDBBg=="
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@github/time-elements/-/time-elements-3.4.1.tgz",
+      "integrity": "sha512-rCXmeD+Rd3NqyN/Q1KY2tFdKpA+iB4kz9Yk4G8LcDnZsMQZQjNaKGvtU12UpomxCq7J2azNL0DrFnMBlVryuDA=="
     },
     "@hapi/hoek": {
       "version": "9.3.0",
diff --git a/package.json b/package.json
index 109c0755a48..764719b580b 100644
--- a/package.json
+++ b/package.json
@@ -82,7 +82,7 @@
     "@github/combobox-nav": "^2.1.5",
     "@github/markdown-toolbar-element": "^2.1.0",
     "@github/paste-markdown": "^1.4.0",
-    "@github/time-elements": "3.4.0",
+    "@github/time-elements": "3.4.1",
     "@lit-labs/react": "1.0.9",
     "@primer/behaviors": "1.3.1",
     "@primer/octicons-react": "^17.7.0",

From f3caadeca1cbbcbc279ba34adb179db05b735c96 Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Tue, 22 Nov 2022 18:19:04 +0000
Subject: [PATCH 15/28] add event stub

---
 src/polyfills/custom-elements.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/polyfills/custom-elements.ts b/src/polyfills/custom-elements.ts
index 122583d91f9..4b58749c6f1 100644
--- a/src/polyfills/custom-elements.ts
+++ b/src/polyfills/custom-elements.ts
@@ -8,3 +8,4 @@ root.customElements ??= {
   }
 } as unknown as CustomElementRegistry
 root.HTMLElement ??= class HTMLElement {} as unknown as typeof HTMLElement
+root.Event ??= class Event {} as unknown as typeof Event

From 8a8d75fa773bc1c40c809f6dc2dc85a9dde1146d Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Wed, 23 Nov 2022 09:53:49 +0000
Subject: [PATCH 16/28] drop event stub

---
 src/polyfills/custom-elements.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/polyfills/custom-elements.ts b/src/polyfills/custom-elements.ts
index 4b58749c6f1..122583d91f9 100644
--- a/src/polyfills/custom-elements.ts
+++ b/src/polyfills/custom-elements.ts
@@ -8,4 +8,3 @@ root.customElements ??= {
   }
 } as unknown as CustomElementRegistry
 root.HTMLElement ??= class HTMLElement {} as unknown as typeof HTMLElement
-root.Event ??= class Event {} as unknown as typeof Event

From cd588d27c6177d31aad7c78865bbcfb9b6097dce Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Wed, 23 Nov 2022 10:00:00 +0000
Subject: [PATCH 17/28] move polyfill locally to component

---
 src/RelativeTime/RelativeTime.tsx | 1 +
 src/index.ts                      | 2 --
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/RelativeTime/RelativeTime.tsx b/src/RelativeTime/RelativeTime.tsx
index 9f18ff0c138..0548511ba72 100644
--- a/src/RelativeTime/RelativeTime.tsx
+++ b/src/RelativeTime/RelativeTime.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
+import '../polyfills/custom-elements'
 import {RelativeTimeElement} from '@github/time-elements'
 import {createComponent} from '@lit-labs/react'
 import {ComponentProps} from '../utils/types'
diff --git a/src/index.ts b/src/index.ts
index 0c864a1b6df..928edb5bb02 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,3 @@
-import './polyfills/custom-elements'
-
 export {default as theme} from './theme'
 export {get as themeGet} from './constants'
 export {default as BaseStyles} from './BaseStyles'

From ca0f386ceaa73d2938447fc0dd11d20b699f3987 Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Wed, 23 Nov 2022 16:19:34 +0000
Subject: [PATCH 18/28] upgrade time-elements to latest

---
 package-lock.json | 14 +++++++-------
 package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 75be7fe90d5..d5da7b5381b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "@github/combobox-nav": "^2.1.5",
         "@github/markdown-toolbar-element": "^2.1.0",
         "@github/paste-markdown": "^1.4.0",
-        "@github/time-elements": "3.4.1",
+        "@github/time-elements": "^3.5.0",
         "@lit-labs/react": "1.0.9",
         "@primer/behaviors": "1.3.1",
         "@primer/octicons-react": "^17.7.0",
@@ -3026,9 +3026,9 @@
       "dev": true
     },
     "node_modules/@github/time-elements": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/@github/time-elements/-/time-elements-3.4.1.tgz",
-      "integrity": "sha512-rCXmeD+Rd3NqyN/Q1KY2tFdKpA+iB4kz9Yk4G8LcDnZsMQZQjNaKGvtU12UpomxCq7J2azNL0DrFnMBlVryuDA=="
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@github/time-elements/-/time-elements-3.5.0.tgz",
+      "integrity": "sha512-V5ohzg44O+LYEdByGMStY6aTeW65IJ9w2hsSGOw3uUltYrjlhj2+PGctKteAtB4Q0cjPHSjQ9L0ISEiuJghtRQ=="
     },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
@@ -44822,9 +44822,9 @@
       "dev": true
     },
     "@github/time-elements": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/@github/time-elements/-/time-elements-3.4.1.tgz",
-      "integrity": "sha512-rCXmeD+Rd3NqyN/Q1KY2tFdKpA+iB4kz9Yk4G8LcDnZsMQZQjNaKGvtU12UpomxCq7J2azNL0DrFnMBlVryuDA=="
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@github/time-elements/-/time-elements-3.5.0.tgz",
+      "integrity": "sha512-V5ohzg44O+LYEdByGMStY6aTeW65IJ9w2hsSGOw3uUltYrjlhj2+PGctKteAtB4Q0cjPHSjQ9L0ISEiuJghtRQ=="
     },
     "@hapi/hoek": {
       "version": "9.3.0",
diff --git a/package.json b/package.json
index b4e092f1077..e07008d7b21 100644
--- a/package.json
+++ b/package.json
@@ -84,7 +84,7 @@
     "@github/combobox-nav": "^2.1.5",
     "@github/markdown-toolbar-element": "^2.1.0",
     "@github/paste-markdown": "^1.4.0",
-    "@github/time-elements": "3.4.1",
+    "@github/time-elements": "^3.5.0",
     "@lit-labs/react": "1.0.9",
     "@primer/behaviors": "1.3.1",
     "@primer/octicons-react": "^17.7.0",

From f601ce236f3728bca6606e425f720c5bb91d727b Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Wed, 23 Nov 2022 16:20:21 +0000
Subject: [PATCH 19/28] remove redundant custom-element polyfill

---
 src/RelativeTime/RelativeTime.tsx |  1 -
 src/polyfills/custom-elements.ts  | 10 ----------
 2 files changed, 11 deletions(-)
 delete mode 100644 src/polyfills/custom-elements.ts

diff --git a/src/RelativeTime/RelativeTime.tsx b/src/RelativeTime/RelativeTime.tsx
index 0548511ba72..9f18ff0c138 100644
--- a/src/RelativeTime/RelativeTime.tsx
+++ b/src/RelativeTime/RelativeTime.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import styled from 'styled-components'
-import '../polyfills/custom-elements'
 import {RelativeTimeElement} from '@github/time-elements'
 import {createComponent} from '@lit-labs/react'
 import {ComponentProps} from '../utils/types'
diff --git a/src/polyfills/custom-elements.ts b/src/polyfills/custom-elements.ts
deleted file mode 100644
index 122583d91f9..00000000000
--- a/src/polyfills/custom-elements.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-const root = typeof globalThis !== 'undefined' ? globalThis : window
-root.customElements ??= {
-  define() {},
-  get() {},
-  update() {},
-  whenDefined() {
-    return new Promise(() => {})
-  }
-} as unknown as CustomElementRegistry
-root.HTMLElement ??= class HTMLElement {} as unknown as typeof HTMLElement

From 2b1e59acc11714901f067e4645af65f70871299f Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Wed, 23 Nov 2022 16:26:19 +0000
Subject: [PATCH 20/28] Run ./script/setup

---
 docs/package-lock.json            | 173 ++++++------------------------
 examples/nextjs/package-lock.json | 112 ++++++++++---------
 2 files changed, 95 insertions(+), 190 deletions(-)

diff --git a/docs/package-lock.json b/docs/package-lock.json
index d94ac6b8a7b..43d6b9deaa8 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -4848,36 +4848,6 @@
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
       "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA=="
     },
-    "node_modules/babel-eslint": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
-      "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==",
-      "deprecated": "babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.",
-      "peer": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.0.0",
-        "@babel/parser": "^7.7.0",
-        "@babel/traverse": "^7.7.0",
-        "@babel/types": "^7.7.0",
-        "eslint-visitor-keys": "^1.0.0",
-        "resolve": "^1.12.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "peerDependencies": {
-        "eslint": ">= 4.12.1"
-      }
-    },
-    "node_modules/babel-eslint/node_modules/eslint-visitor-keys": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-      "peer": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/babel-jest": {
       "version": "24.9.0",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-24.9.0.tgz",
@@ -23962,19 +23932,6 @@
         "is-typedarray": "^1.0.0"
       }
     },
-    "node_modules/typescript": {
-      "version": "4.8.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz",
-      "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==",
-      "peer": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=4.2.0"
-      }
-    },
     "node_modules/unbox-primitive": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
@@ -27489,8 +27446,7 @@
         "ws": {
           "version": "7.4.5",
           "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.5.tgz",
-          "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==",
-          "requires": {}
+          "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g=="
         }
       }
     },
@@ -27909,8 +27865,7 @@
     "@mdx-js/react": {
       "version": "1.6.22",
       "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.22.tgz",
-      "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==",
-      "requires": {}
+      "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg=="
     },
     "@mdx-js/util": {
       "version": "1.6.22",
@@ -28124,8 +28079,7 @@
     "@primer/octicons-react": {
       "version": "17.7.0",
       "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-17.7.0.tgz",
-      "integrity": "sha512-rxJiArra+q7lorhzQH223btMcRR8di9TUei9DhQG18jmVEI+wQTY+MypI5FZqU8UyehBOtcnD4TWx+i4Zwpz5Q==",
-      "requires": {}
+      "integrity": "sha512-rxJiArra+q7lorhzQH223btMcRR8di9TUei9DhQG18jmVEI+wQTY+MypI5FZqU8UyehBOtcnD4TWx+i4Zwpz5Q=="
     },
     "@primer/primitives": {
       "version": "4.1.0",
@@ -28160,8 +28114,7 @@
         "@primer/octicons-react": {
           "version": "16.1.1",
           "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-16.1.1.tgz",
-          "integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw==",
-          "requires": {}
+          "integrity": "sha512-xCxQ5z23ol7yDuJs85Lc4ARzyoay+b3zOhAKkEMU7chk0xi2hT2OnRP23QUudNNDPTGozX268RGYLexUa6P4xw=="
         },
         "@primer/primitives": {
           "version": "7.6.0",
@@ -28173,8 +28126,7 @@
     "@radix-ui/react-polymorphic": {
       "version": "0.0.14",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-polymorphic/-/react-polymorphic-0.0.14.tgz",
-      "integrity": "sha512-9nsMZEDU3LeIUeHJrpkkhZVxu/9Fc7P2g2I3WR+uA9mTbNC3hGaabi0dV6wg0CfHb+m4nSs1pejbE/5no3MJTA==",
-      "requires": {}
+      "integrity": "sha512-9nsMZEDU3LeIUeHJrpkkhZVxu/9Fc7P2g2I3WR+uA9mTbNC3hGaabi0dV6wg0CfHb+m4nSs1pejbE/5no3MJTA=="
     },
     "@react-aria/ssr": {
       "version": "3.1.0",
@@ -29308,8 +29260,7 @@
     "acorn-jsx": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz",
-      "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==",
-      "requires": {}
+      "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng=="
     },
     "acorn-walk": {
       "version": "6.2.0",
@@ -29344,14 +29295,12 @@
     "ajv-errors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
-      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "requires": {}
+      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ=="
     },
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "requires": {}
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ=="
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -29707,28 +29656,6 @@
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
       "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA=="
     },
-    "babel-eslint": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
-      "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==",
-      "peer": true,
-      "requires": {
-        "@babel/code-frame": "^7.0.0",
-        "@babel/parser": "^7.7.0",
-        "@babel/traverse": "^7.7.0",
-        "@babel/types": "^7.7.0",
-        "eslint-visitor-keys": "^1.0.0",
-        "resolve": "^1.12.0"
-      },
-      "dependencies": {
-        "eslint-visitor-keys": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-          "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-          "peer": true
-        }
-      }
-    },
     "babel-jest": {
       "version": "24.9.0",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-24.9.0.tgz",
@@ -29900,8 +29827,7 @@
     "babel-plugin-remove-graphql-queries": {
       "version": "2.16.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.16.1.tgz",
-      "integrity": "sha512-PkHJuRodMp4p617a/ZVhV8elBhRoFpOTpdu2DaApXJFIsDJWhjZ8d4BGbbFCT/yKJrhRDTdqg1r5AhWEaEUKkw==",
-      "requires": {}
+      "integrity": "sha512-PkHJuRodMp4p617a/ZVhV8elBhRoFpOTpdu2DaApXJFIsDJWhjZ8d4BGbbFCT/yKJrhRDTdqg1r5AhWEaEUKkw=="
     },
     "babel-plugin-styled-components": {
       "version": "2.0.2",
@@ -31834,8 +31760,7 @@
     "cssnano-utils": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-2.0.1.tgz",
-      "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==",
-      "requires": {}
+      "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ=="
     },
     "csso": {
       "version": "4.2.0",
@@ -32466,8 +32391,7 @@
         "ws": {
           "version": "7.4.6",
           "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
-          "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==",
-          "requires": {}
+          "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A=="
         }
       }
     },
@@ -32491,8 +32415,7 @@
         "ws": {
           "version": "7.4.6",
           "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
-          "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==",
-          "requires": {}
+          "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A=="
         }
       }
     },
@@ -33214,8 +33137,7 @@
     "eslint-plugin-react-hooks": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz",
-      "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==",
-      "requires": {}
+      "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ=="
     },
     "eslint-scope": {
       "version": "5.1.1",
@@ -34515,8 +34437,7 @@
         "babel-plugin-remove-graphql-queries": {
           "version": "3.7.1",
           "resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-3.7.1.tgz",
-          "integrity": "sha512-9fANNkzCZJ0i65FXGnoeg/knDPC3riazCDyRrcH/2DVovxChAMSN2mqh/7eohJ8IrB/0e6cwLO4VirqanSk1Hw==",
-          "requires": {}
+          "integrity": "sha512-9fANNkzCZJ0i65FXGnoeg/knDPC3riazCDyRrcH/2DVovxChAMSN2mqh/7eohJ8IrB/0e6cwLO4VirqanSk1Hw=="
         },
         "braces": {
           "version": "3.0.2",
@@ -35889,8 +35810,7 @@
         "ws": {
           "version": "7.5.0",
           "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.0.tgz",
-          "integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw==",
-          "requires": {}
+          "integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw=="
         }
       }
     },
@@ -36350,14 +36270,12 @@
     "graphql-type-json": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/graphql-type-json/-/graphql-type-json-0.3.2.tgz",
-      "integrity": "sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg==",
-      "requires": {}
+      "integrity": "sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg=="
     },
     "graphql-ws": {
       "version": "4.9.0",
       "resolved": "https://registry.npmjs.org/graphql-ws/-/graphql-ws-4.9.0.tgz",
-      "integrity": "sha512-sHkK9+lUm20/BGawNEWNtVAeJzhZeBg21VmvmLoT5NdGVeZWv5PdIhkcayQIAgjSyyQ17WMKmbDijIPG2On+Ag==",
-      "requires": {}
+      "integrity": "sha512-sHkK9+lUm20/BGawNEWNtVAeJzhZeBg21VmvmLoT5NdGVeZWv5PdIhkcayQIAgjSyyQ17WMKmbDijIPG2On+Ag=="
     },
     "gray-matter": {
       "version": "4.0.3",
@@ -36886,8 +36804,7 @@
     "icss-utils": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
-      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "requires": {}
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA=="
     },
     "ieee754": {
       "version": "1.2.1",
@@ -37633,8 +37550,7 @@
     "isomorphic-ws": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-4.0.1.tgz",
-      "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==",
-      "requires": {}
+      "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w=="
     },
     "isstream": {
       "version": "0.1.2",
@@ -38059,8 +37975,7 @@
     "jest-pnp-resolver": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
-      "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==",
-      "requires": {}
+      "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w=="
     },
     "jest-regex-util": {
       "version": "24.9.0",
@@ -39129,8 +39044,7 @@
     "meros": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/meros/-/meros-1.1.4.tgz",
-      "integrity": "sha512-E9ZXfK9iQfG9s73ars9qvvvbSIkJZF5yOo9j4tcwM5tN8mUKfj/EKN5PzOr3ZH0y5wL7dLAHw3RVEfpQV9Q7VQ==",
-      "requires": {}
+      "integrity": "sha512-E9ZXfK9iQfG9s73ars9qvvvbSIkJZF5yOo9j4tcwM5tN8mUKfj/EKN5PzOr3ZH0y5wL7dLAHw3RVEfpQV9Q7VQ=="
     },
     "methods": {
       "version": "1.1.2",
@@ -40434,32 +40348,27 @@
     "postcss-discard-comments": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.1.tgz",
-      "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==",
-      "requires": {}
+      "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg=="
     },
     "postcss-discard-duplicates": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.1.tgz",
-      "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==",
-      "requires": {}
+      "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA=="
     },
     "postcss-discard-empty": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.1.tgz",
-      "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==",
-      "requires": {}
+      "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw=="
     },
     "postcss-discard-overridden": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.1.tgz",
-      "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==",
-      "requires": {}
+      "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q=="
     },
     "postcss-flexbugs-fixes": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz",
-      "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==",
-      "requires": {}
+      "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ=="
     },
     "postcss-loader": {
       "version": "5.3.0",
@@ -40585,8 +40494,7 @@
     "postcss-modules-extract-imports": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
-      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-      "requires": {}
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw=="
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -40624,8 +40532,7 @@
     "postcss-normalize-charset": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.1.tgz",
-      "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==",
-      "requires": {}
+      "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg=="
     },
     "postcss-normalize-display-values": {
       "version": "5.0.1",
@@ -40996,8 +40903,7 @@
     "prism-react-renderer": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.2.1.tgz",
-      "integrity": "sha512-w23ch4f75V1Tnz8DajsYKvY5lF7H1+WvzvLUcF0paFxkTHSp42RS0H5CttdN2Q8RR3DRGZ9v5xD/h3n8C8kGmg==",
-      "requires": {}
+      "integrity": "sha512-w23ch4f75V1Tnz8DajsYKvY5lF7H1+WvzvLUcF0paFxkTHSp42RS0H5CttdN2Q8RR3DRGZ9v5xD/h3n8C8kGmg=="
     },
     "prismjs": {
       "version": "1.28.0",
@@ -41382,8 +41288,7 @@
     "react-docgen-typescript": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-2.0.0.tgz",
-      "integrity": "sha512-lPf+KJKAo6a9klKyK4y8WwgaX+6t5/HkVjHOpJDMbmaXfXcV7zP0QgWtnEOc3ccEUXKvlHMGUMIS9f6Zgo1BSw==",
-      "requires": {}
+      "integrity": "sha512-lPf+KJKAo6a9klKyK4y8WwgaX+6t5/HkVjHOpJDMbmaXfXcV7zP0QgWtnEOc3ccEUXKvlHMGUMIS9f6Zgo1BSw=="
     },
     "react-dom": {
       "version": "17.0.1",
@@ -41556,14 +41461,12 @@
     "react-side-effect": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz",
-      "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==",
-      "requires": {}
+      "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ=="
     },
     "react-simple-code-editor": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.11.0.tgz",
-      "integrity": "sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw==",
-      "requires": {}
+      "integrity": "sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw=="
     },
     "react-style-singleton": {
       "version": "2.1.1",
@@ -43745,8 +43648,7 @@
     "stylis-rule-sheet": {
       "version": "0.0.10",
       "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz",
-      "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==",
-      "requires": {}
+      "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw=="
     },
     "subscriptions-transport-ws": {
       "version": "0.9.19",
@@ -44442,12 +44344,6 @@
         "is-typedarray": "^1.0.0"
       }
     },
-    "typescript": {
-      "version": "4.8.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.4.tgz",
-      "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==",
-      "peer": true
-    },
     "unbox-primitive": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
@@ -44981,8 +44877,7 @@
     "use-callback-ref": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.2.5.tgz",
-      "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==",
-      "requires": {}
+      "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg=="
     },
     "use-sidecar": {
       "version": "1.0.5",
diff --git a/examples/nextjs/package-lock.json b/examples/nextjs/package-lock.json
index 65d1824f1e3..4cf053f4726 100644
--- a/examples/nextjs/package-lock.json
+++ b/examples/nextjs/package-lock.json
@@ -17,15 +17,17 @@
     },
     "../..": {
       "name": "@primer/react",
-      "version": "35.10.0",
+      "version": "35.14.2",
       "license": "MIT",
       "dependencies": {
         "@github/combobox-nav": "^2.1.5",
         "@github/markdown-toolbar-element": "^2.1.0",
         "@github/paste-markdown": "^1.4.0",
-        "@primer/behaviors": "^1.1.1",
-        "@primer/octicons-react": "^17.3.0",
-        "@primer/primitives": "7.9.0",
+        "@github/time-elements": "^3.5.0",
+        "@lit-labs/react": "1.0.9",
+        "@primer/behaviors": "1.3.1",
+        "@primer/octicons-react": "^17.7.0",
+        "@primer/primitives": "7.10.0",
         "@react-aria/ssr": "^3.1.0",
         "@styled-system/css": "^5.1.5",
         "@styled-system/props": "^5.1.5",
@@ -44,50 +46,53 @@
         "styled-system": "^5.1.5"
       },
       "devDependencies": {
+        "@axe-core/playwright": "4.5.0",
         "@babel/cli": "7.17.6",
         "@babel/core": "7.14.8",
         "@babel/eslint-parser": "7.15.7",
         "@babel/plugin-proposal-nullish-coalescing-operator": "7.16.0",
         "@babel/plugin-proposal-optional-chaining": "7.16.7",
-        "@babel/plugin-transform-modules-commonjs": "7.14.5",
-        "@babel/preset-react": "7.14.5",
+        "@babel/plugin-transform-modules-commonjs": "7.19.6",
+        "@babel/preset-react": "7.18.6",
         "@babel/preset-typescript": "7.18.6",
-        "@changesets/changelog-github": "0.4.3",
-        "@changesets/cli": "2.17.0",
+        "@changesets/changelog-github": "0.4.7",
+        "@changesets/cli": "2.25.1",
         "@github/prettier-config": "0.0.4",
-        "@rollup/plugin-babel": "5.3.1",
-        "@rollup/plugin-commonjs": "22.0.2",
+        "@playwright/test": "1.27.1",
+        "@rollup/plugin-babel": "6.0.2",
+        "@rollup/plugin-commonjs": "23.0.0",
         "@rollup/plugin-node-resolve": "14.1.0",
-        "@rollup/plugin-typescript": "8.5.0",
+        "@rollup/plugin-replace": "5.0.0",
+        "@rollup/plugin-typescript": "9.0.2",
         "@size-limit/preset-big-lib": "7.0.3",
         "@storybook/addon-a11y": "6.5.12",
         "@storybook/addon-actions": "6.5.12",
         "@storybook/addon-essentials": "6.5.12",
-        "@storybook/addon-interactions": "6.5.12",
+        "@storybook/addon-interactions": "6.5.13",
         "@storybook/addon-links": "6.5.12",
         "@storybook/addon-storysource": "6.5.12",
         "@storybook/builder-webpack5": "6.5.12",
         "@storybook/jest": "0.0.10",
         "@storybook/manager-webpack5": "6.5.12",
         "@storybook/react": "6.5.12",
-        "@storybook/test-runner": "0.7.2",
+        "@storybook/test-runner": "0.9.0",
         "@storybook/testing-library": "0.0.13",
+        "@storybook/theming": "6.5.13",
         "@testing-library/dom": "8.13.0",
         "@testing-library/jest-dom": "5.16.4",
         "@testing-library/react": "12.1.5",
         "@testing-library/react-hooks": "7.0.2",
         "@testing-library/user-event": "^14.3.0",
-        "@types/chroma-js": "2.1.3",
-        "@types/enzyme": "3.10.9",
+        "@types/chroma-js": "2.1.4",
         "@types/jest": "27.0.2",
         "@types/jest-axe": "3.5.3",
-        "@types/lodash.isempty": "4.4.6",
-        "@types/lodash.isobject": "3.0.6",
+        "@types/lodash.groupby": "4.6.7",
+        "@types/lodash.isempty": "4.4.7",
+        "@types/lodash.isobject": "3.0.7",
         "@types/node": "16.11.11",
-        "@typescript-eslint/eslint-plugin": "4.31.2",
+        "@typescript-eslint/eslint-plugin": "4.33.0",
         "@typescript-eslint/parser": "4.33.0",
         "@whitespace/storybook-addon-html": "5.0.0",
-        "@wojtekmaj/enzyme-adapter-react-17": "0.6.7",
         "babel-core": "7.0.0-bridge.0",
         "babel-loader": "^8.2.2",
         "babel-plugin-add-react-displayname": "0.0.5",
@@ -98,12 +103,11 @@
         "babel-plugin-transform-commonjs": "1.1.6",
         "babel-plugin-transform-replace-expressions": "0.2.0",
         "babel-polyfill": "6.26.0",
-        "chroma-js": "2.1.2",
+        "chroma-js": "2.4.2",
         "chromatic": "6.1.0",
-        "concurrently": "6.4.0",
+        "concurrently": "7.5.0",
         "copyfiles": "2.4.1",
         "cross-env": "7.0.3",
-        "enzyme": "3.11.0",
         "eslint": "7.32.0",
         "eslint-plugin-github": "4.1.3",
         "eslint-plugin-jest": "24.3.6",
@@ -113,19 +117,21 @@
         "eslint-plugin-primer-react": "0.7.4",
         "eslint-plugin-react": "7.24.0",
         "eslint-plugin-react-hooks": "4.2.0",
+        "fast-glob": "3.2.12",
         "front-matter": "4.0.2",
         "husky": "7.0.4",
         "jest": "29.0.1",
         "jest-axe": "5.0.1",
-        "jest-environment-jsdom": "29.0.1",
+        "jest-environment-jsdom": "29.2.1",
         "jest-matchmedia-mock": "1.1.0",
         "jest-styled-components": "6.3.4",
         "jest-watch-typeahead": "2.1.1",
         "jscodeshift": "0.13.0",
         "lint-staged": "12.1.2",
+        "lodash.groupby": "4.6.0",
         "lodash.isempty": "4.4.0",
         "lodash.isobject": "3.0.2",
-        "prettier": "2.3.2",
+        "prettier": "2.7.1",
         "react": "17.0.2",
         "react-dnd": "14.0.4",
         "react-dnd-html5-backend": "14.0.2",
@@ -137,11 +143,10 @@
         "rollup-plugin-visualizer": "5.8.1",
         "semver": "7.3.5",
         "size-limit": "7.0.3",
-        "storybook-addon-performance": "0.16.1",
         "storybook-addon-turbo-build": "1.1.0",
         "styled-components": "4.4.1",
         "ts-toolbelt": "9.6.0",
-        "typescript": "4.5.4",
+        "typescript": "4.8.3",
         "webpack": "5.74.0"
       },
       "engines": {
@@ -1318,41 +1323,47 @@
     "@primer/react": {
       "version": "file:../..",
       "requires": {
+        "@axe-core/playwright": "4.5.0",
         "@babel/cli": "7.17.6",
         "@babel/core": "7.14.8",
         "@babel/eslint-parser": "7.15.7",
         "@babel/plugin-proposal-nullish-coalescing-operator": "7.16.0",
         "@babel/plugin-proposal-optional-chaining": "7.16.7",
-        "@babel/plugin-transform-modules-commonjs": "7.14.5",
-        "@babel/preset-react": "7.14.5",
+        "@babel/plugin-transform-modules-commonjs": "7.19.6",
+        "@babel/preset-react": "7.18.6",
         "@babel/preset-typescript": "7.18.6",
-        "@changesets/changelog-github": "0.4.3",
-        "@changesets/cli": "2.17.0",
+        "@changesets/changelog-github": "0.4.7",
+        "@changesets/cli": "2.25.1",
         "@github/combobox-nav": "^2.1.5",
         "@github/markdown-toolbar-element": "^2.1.0",
         "@github/paste-markdown": "^1.4.0",
         "@github/prettier-config": "0.0.4",
-        "@primer/behaviors": "^1.1.1",
-        "@primer/octicons-react": "^17.3.0",
-        "@primer/primitives": "7.9.0",
+        "@github/time-elements": "^3.5.0",
+        "@lit-labs/react": "1.0.9",
+        "@playwright/test": "1.27.1",
+        "@primer/behaviors": "1.3.1",
+        "@primer/octicons-react": "^17.7.0",
+        "@primer/primitives": "7.10.0",
         "@react-aria/ssr": "^3.1.0",
-        "@rollup/plugin-babel": "5.3.1",
-        "@rollup/plugin-commonjs": "22.0.2",
+        "@rollup/plugin-babel": "6.0.2",
+        "@rollup/plugin-commonjs": "23.0.0",
         "@rollup/plugin-node-resolve": "14.1.0",
-        "@rollup/plugin-typescript": "8.5.0",
+        "@rollup/plugin-replace": "5.0.0",
+        "@rollup/plugin-typescript": "9.0.2",
         "@size-limit/preset-big-lib": "7.0.3",
         "@storybook/addon-a11y": "6.5.12",
         "@storybook/addon-actions": "6.5.12",
         "@storybook/addon-essentials": "6.5.12",
-        "@storybook/addon-interactions": "6.5.12",
+        "@storybook/addon-interactions": "6.5.13",
         "@storybook/addon-links": "6.5.12",
         "@storybook/addon-storysource": "6.5.12",
         "@storybook/builder-webpack5": "6.5.12",
         "@storybook/jest": "0.0.10",
         "@storybook/manager-webpack5": "6.5.12",
         "@storybook/react": "6.5.12",
-        "@storybook/test-runner": "0.7.2",
+        "@storybook/test-runner": "0.9.0",
         "@storybook/testing-library": "0.0.13",
+        "@storybook/theming": "6.5.13",
         "@styled-system/css": "^5.1.5",
         "@styled-system/props": "^5.1.5",
         "@styled-system/theme-get": "^5.1.2",
@@ -1361,21 +1372,20 @@
         "@testing-library/react": "12.1.5",
         "@testing-library/react-hooks": "7.0.2",
         "@testing-library/user-event": "^14.3.0",
-        "@types/chroma-js": "2.1.3",
-        "@types/enzyme": "3.10.9",
+        "@types/chroma-js": "2.1.4",
         "@types/jest": "27.0.2",
         "@types/jest-axe": "3.5.3",
-        "@types/lodash.isempty": "4.4.6",
-        "@types/lodash.isobject": "3.0.6",
+        "@types/lodash.groupby": "4.6.7",
+        "@types/lodash.isempty": "4.4.7",
+        "@types/lodash.isobject": "3.0.7",
         "@types/node": "16.11.11",
         "@types/styled-components": "^5.1.11",
         "@types/styled-system": "^5.1.12",
         "@types/styled-system__css": "^5.0.16",
         "@types/styled-system__theme-get": "^5.0.1",
-        "@typescript-eslint/eslint-plugin": "4.31.2",
+        "@typescript-eslint/eslint-plugin": "4.33.0",
         "@typescript-eslint/parser": "4.33.0",
         "@whitespace/storybook-addon-html": "5.0.0",
-        "@wojtekmaj/enzyme-adapter-react-17": "0.6.7",
         "babel-core": "7.0.0-bridge.0",
         "babel-loader": "^8.2.2",
         "babel-plugin-add-react-displayname": "0.0.5",
@@ -1386,15 +1396,14 @@
         "babel-plugin-transform-commonjs": "1.1.6",
         "babel-plugin-transform-replace-expressions": "0.2.0",
         "babel-polyfill": "6.26.0",
-        "chroma-js": "2.1.2",
+        "chroma-js": "2.4.2",
         "chromatic": "6.1.0",
         "classnames": "^2.3.1",
         "color2k": "^1.2.4",
-        "concurrently": "6.4.0",
+        "concurrently": "7.5.0",
         "copyfiles": "2.4.1",
         "cross-env": "7.0.3",
         "deepmerge": "^4.2.2",
-        "enzyme": "3.11.0",
         "eslint": "7.32.0",
         "eslint-plugin-github": "4.1.3",
         "eslint-plugin-jest": "24.3.6",
@@ -1404,6 +1413,7 @@
         "eslint-plugin-primer-react": "0.7.4",
         "eslint-plugin-react": "7.24.0",
         "eslint-plugin-react-hooks": "4.2.0",
+        "fast-glob": "3.2.12",
         "focus-visible": "^5.2.0",
         "front-matter": "4.0.2",
         "fzy.js": "0.4.1",
@@ -1411,15 +1421,16 @@
         "husky": "7.0.4",
         "jest": "29.0.1",
         "jest-axe": "5.0.1",
-        "jest-environment-jsdom": "29.0.1",
+        "jest-environment-jsdom": "29.2.1",
         "jest-matchmedia-mock": "1.1.0",
         "jest-styled-components": "6.3.4",
         "jest-watch-typeahead": "2.1.1",
         "jscodeshift": "0.13.0",
         "lint-staged": "12.1.2",
+        "lodash.groupby": "4.6.0",
         "lodash.isempty": "4.4.0",
         "lodash.isobject": "3.0.2",
-        "prettier": "2.3.2",
+        "prettier": "2.7.1",
         "react": "17.0.2",
         "react-dnd": "14.0.4",
         "react-dnd-html5-backend": "14.0.2",
@@ -1432,12 +1443,11 @@
         "rollup-plugin-visualizer": "5.8.1",
         "semver": "7.3.5",
         "size-limit": "7.0.3",
-        "storybook-addon-performance": "0.16.1",
         "storybook-addon-turbo-build": "1.1.0",
         "styled-components": "4.4.1",
         "styled-system": "^5.1.5",
         "ts-toolbelt": "9.6.0",
-        "typescript": "4.5.4",
+        "typescript": "4.8.3",
         "webpack": "5.74.0"
       }
     },

From 1a1c69ec0a569f237643ae0383f711439c9fd121 Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Wed, 23 Nov 2022 19:11:26 +0000
Subject: [PATCH 21/28] add RelativeTime docs

---
 docs/content/RelativeTime.mdx | 135 ++++++++++++++++++++++++++++++++++
 1 file changed, 135 insertions(+)
 create mode 100644 docs/content/RelativeTime.mdx

diff --git a/docs/content/RelativeTime.mdx b/docs/content/RelativeTime.mdx
new file mode 100644
index 00000000000..e511e2f2ec4
--- /dev/null
+++ b/docs/content/RelativeTime.mdx
@@ -0,0 +1,135 @@
+---
+componentId: relative-time
+title: RelativeTime
+status: Alpha
+source: https://github.com/primer/react/blob/main/src/RelativeTime.tsx
+---
+
+```js
+import {RelativeTime} from '@primer/react'
+```
+
+Formats a timestamp as a localized string or as relative text that auto-updates in the user's browser.
+
+## Examples
+
+### Default
+
+```jsx live
+<>
+  <RelativeTime datetime="2014-04-01T16:30:00-08:00" />
+  <RelativeTime datetime="2014-04-01T16:30:00-08:00" format="micro"/>
+  <RelativeTime datetime="2014-04-01T16:30:00-08:00" format="elapsed"/>
+</>
+```
+
+## Props
+
+### Flash
+
+<PropsTable>
+  <PropsTableRow name="full" type="boolean" defaultValue="false" description="Creates a full width Flash component" />
+  <PropsTableRow
+    name="datetime"
+    type="string"
+    description="An ISO8601 time represeting the time"
+  />
+  <PropsTableRow
+    name="format"
+    type="'auto' | 'micro' | 'elapsed' | string"
+    defaultValue="'auto'"
+    description="The format with which to display the time"
+  />
+  <PropsTableRow
+    name="tense"
+    type="'auto' | 'past' | 'future'"
+    defaultValue="'auto'"
+    description="The tense to use when displaying a relative time"
+  />
+  <PropsTableRow
+    name="precision"
+    type="'year' | 'month' | 'day' | 'hour' | 'minute' | 'second'"
+    defaultValue="'second'"
+    description="The precision to use when displaying an elapsed time"
+  />
+  <PropsTableRow
+    name="threshold"
+    type="string"
+    defaultValue="'P30D'"
+    description="The threshold (ISO8601 duration) to display relative dates within"
+  />
+  <PropsTableRow
+    name="prefix"
+    type="string"
+    defaultValue="'on'"
+    description="The prefix to use when displaying a localised (non relative) date"
+  />
+  <PropsTableRow
+    name="second"
+    type="'numeric' | '2-digit'"
+    description="The format with which to render seconds"
+  />
+  <PropsTableRow
+    name="minute"
+    type="'numeric' | '2-digit'"
+    description="The format with which to render minutes"
+  />
+  <PropsTableRow
+    name="hour"
+    type="'numeric' | '2-digit'"
+    description="The format with which to render hours"
+  />
+  <PropsTableRow
+    name="weekday"
+    type="'short' | 'long' | 'narrow'"
+    description="The format with which to render weekdays"
+  />
+  <PropsTableRow
+    name="day"
+    type="'numeric' | '2-digit'"
+    description="The format with which to render days"
+  />
+  <PropsTableRow
+    name="month"
+    type="'numeric' | '2-digit' | 'short' | 'long' | 'narrow'"
+    description="The format with which to render months"
+  />
+  <PropsTableRow
+    name="year"
+    type="'numeric' | '2-digit'"
+    description="The format with which to render years"
+  />
+  <PropsTableRow
+    name="timeZoneName"
+    type="'long' | 'short' | 'shortOffset' | 'longOffset' | 'shortGeneric' | 'longGeneric'"
+    description="The format with which to render the time zone"
+  />
+  <PropsTableBasePropRows
+    elementType="relative-ttime"
+    refType="RelativeTimeElement"
+    passthroughPropsLink={
+      <Link href="https://github.com/github/relative-time-element/">@github/relative-time-element</Link>
+    }
+  />
+</PropsTable>
+
+## Status
+
+<ComponentChecklist
+  items={{
+    propsDocumented: true,
+    noUnnecessaryDeps: true,
+    adaptsToThemes: true,
+    adaptsToScreenSizes: true,
+    fullTestCoverage: true,
+    usedInProduction: false,
+    usageExamplesDocumented: true,
+    hasStorybookStories: true,
+    designReviewed: false,
+    a11yReviewed: false,
+    stableApi: true,
+    addressedApiFeedback: false,
+    hasDesignGuidelines: false,
+    hasFigmaComponent: false
+  }}
+/>

From c1b7f5c0e5cc23aaa4dbb4f33142df113855b237 Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Thu, 24 Nov 2022 10:01:42 +0000
Subject: [PATCH 22/28] add RelativeTime docs link in nav

---
 docs/src/@primer/gatsby-theme-doctocat/nav.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
index 3c5d0e90ad0..ff743eddac8 100644
--- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml
+++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
@@ -110,6 +110,8 @@
     #   url: /Portal
     - title: ProgressBar
       url: /ProgressBar
+    - title: RelativeTime
+      url: /RelativeTime
     - title: Radio
       url: /Radio
     - title: RadioGroup

From 16c30fd687b04fbc04737469676555a0a0ce9b71 Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Thu, 24 Nov 2022 10:06:40 +0000
Subject: [PATCH 23/28] fix up relativetime docs

---
 docs/content/RelativeTime.mdx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/docs/content/RelativeTime.mdx b/docs/content/RelativeTime.mdx
index e511e2f2ec4..4f21957538b 100644
--- a/docs/content/RelativeTime.mdx
+++ b/docs/content/RelativeTime.mdx
@@ -18,22 +18,28 @@ Formats a timestamp as a localized string or as relative text that auto-updates
 ```jsx live
 <>
   <RelativeTime datetime="2014-04-01T16:30:00-08:00" />
-  <RelativeTime datetime="2014-04-01T16:30:00-08:00" format="micro"/>
+  <br/>
+  <RelativeTime date={new Date('2014-04-01T16:30:00-08:00')} format="micro" tense="past"/>
+  <br/>
   <RelativeTime datetime="2014-04-01T16:30:00-08:00" format="elapsed"/>
 </>
 ```
 
 ## Props
 
-### Flash
+### RelativeTime
 
 <PropsTable>
-  <PropsTableRow name="full" type="boolean" defaultValue="false" description="Creates a full width Flash component" />
   <PropsTableRow
     name="datetime"
     type="string"
     description="An ISO8601 time represeting the time"
   />
+  <PropsTableRow
+    name="date"
+    type="string"
+    description="Instead of passing the `datetime`, it is possible to pass a full `Date` object into the `date` prop"
+  />
   <PropsTableRow
     name="format"
     type="'auto' | 'micro' | 'elapsed' | string"
@@ -105,7 +111,7 @@ Formats a timestamp as a localized string or as relative text that auto-updates
     description="The format with which to render the time zone"
   />
   <PropsTableBasePropRows
-    elementType="relative-ttime"
+    elementType="relative-time"
     refType="RelativeTimeElement"
     passthroughPropsLink={
       <Link href="https://github.com/github/relative-time-element/">@github/relative-time-element</Link>

From c70c3a5aba5ec2678df9d33f3f15027f9bde17f6 Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Tue, 29 Nov 2022 17:43:22 +0000
Subject: [PATCH 24/28] docs: make `datetime` a required prop

---
 docs/content/RelativeTime.mdx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/content/RelativeTime.mdx b/docs/content/RelativeTime.mdx
index 4f21957538b..7345ca178c5 100644
--- a/docs/content/RelativeTime.mdx
+++ b/docs/content/RelativeTime.mdx
@@ -33,6 +33,7 @@ Formats a timestamp as a localized string or as relative text that auto-updates
   <PropsTableRow
     name="datetime"
     type="string"
+    required
     description="An ISO8601 time represeting the time"
   />
   <PropsTableRow

From c42bf3ebcc55cdc91c36742ee3e668e6ed7dd7bd Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Tue, 29 Nov 2022 17:43:39 +0000
Subject: [PATCH 25/28] docs: drop `string` from format type

---
 docs/content/RelativeTime.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/content/RelativeTime.mdx b/docs/content/RelativeTime.mdx
index 7345ca178c5..b2927111cb3 100644
--- a/docs/content/RelativeTime.mdx
+++ b/docs/content/RelativeTime.mdx
@@ -43,7 +43,7 @@ Formats a timestamp as a localized string or as relative text that auto-updates
   />
   <PropsTableRow
     name="format"
-    type="'auto' | 'micro' | 'elapsed' | string"
+    type="'auto' | 'micro' | 'elapsed'"
     defaultValue="'auto'"
     description="The format with which to display the time"
   />

From 25b6dbf19f70d7d18644d419ac0c5877df7e3736 Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Tue, 29 Nov 2022 17:44:01 +0000
Subject: [PATCH 26/28] docs: make month defaultValue be numeric

---
 docs/content/RelativeTime.mdx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/content/RelativeTime.mdx b/docs/content/RelativeTime.mdx
index b2927111cb3..1af34cd40d0 100644
--- a/docs/content/RelativeTime.mdx
+++ b/docs/content/RelativeTime.mdx
@@ -99,6 +99,7 @@ Formats a timestamp as a localized string or as relative text that auto-updates
   <PropsTableRow
     name="month"
     type="'numeric' | '2-digit' | 'short' | 'long' | 'narrow'"
+    defaultValue="'numeric'"
     description="The format with which to render months"
   />
   <PropsTableRow

From 8775f861b34bffbfbfe6c8ecf13941f44cf419ac Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Tue, 29 Nov 2022 17:44:31 +0000
Subject: [PATCH 27/28] upgrade from time-elements@3 to relative-time-element@4

---
 package-lock.json                 | 18 +++++++++---------
 package.json                      |  2 +-
 rollup.config.js                  |  2 +-
 src/RelativeTime/RelativeTime.tsx |  2 +-
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 01697d4b3fb..cf113fd0bbe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "@github/combobox-nav": "^2.1.5",
         "@github/markdown-toolbar-element": "^2.1.0",
         "@github/paste-markdown": "^1.4.0",
-        "@github/time-elements": "^3.5.0",
+        "@github/relative-time-element": "4.0.0",
         "@lit-labs/react": "1.0.9",
         "@primer/behaviors": "1.3.1",
         "@primer/octicons-react": "^17.7.0",
@@ -3025,10 +3025,10 @@
       "integrity": "sha512-ZOJ+U771Mw68qp2GPbcqPt2Xg0LEl0YwiIFHXwVLAFm2TgDnsgcCHhXO8PIxOWPqSFO4S7xIMD9CBobfaWGASA==",
       "dev": true
     },
-    "node_modules/@github/time-elements": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/@github/time-elements/-/time-elements-3.5.0.tgz",
-      "integrity": "sha512-V5ohzg44O+LYEdByGMStY6aTeW65IJ9w2hsSGOw3uUltYrjlhj2+PGctKteAtB4Q0cjPHSjQ9L0ISEiuJghtRQ=="
+    "node_modules/@github/relative-time-element": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@github/relative-time-element/-/relative-time-element-4.0.0.tgz",
+      "integrity": "sha512-A//nGe6GFciGP0GxSZZKZbULwSZuENZ19cTaAkvRU3Ptqgdpo95VF6YS5TPi54NVM/zt8q6KtDTOMyjdFQHj0g=="
     },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
@@ -44821,10 +44821,10 @@
       "integrity": "sha512-ZOJ+U771Mw68qp2GPbcqPt2Xg0LEl0YwiIFHXwVLAFm2TgDnsgcCHhXO8PIxOWPqSFO4S7xIMD9CBobfaWGASA==",
       "dev": true
     },
-    "@github/time-elements": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/@github/time-elements/-/time-elements-3.5.0.tgz",
-      "integrity": "sha512-V5ohzg44O+LYEdByGMStY6aTeW65IJ9w2hsSGOw3uUltYrjlhj2+PGctKteAtB4Q0cjPHSjQ9L0ISEiuJghtRQ=="
+    "@github/relative-time-element": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@github/relative-time-element/-/relative-time-element-4.0.0.tgz",
+      "integrity": "sha512-A//nGe6GFciGP0GxSZZKZbULwSZuENZ19cTaAkvRU3Ptqgdpo95VF6YS5TPi54NVM/zt8q6KtDTOMyjdFQHj0g=="
     },
     "@hapi/hoek": {
       "version": "9.3.0",
diff --git a/package.json b/package.json
index fe317a20847..a9a068fb031 100644
--- a/package.json
+++ b/package.json
@@ -84,7 +84,7 @@
     "@github/combobox-nav": "^2.1.5",
     "@github/markdown-toolbar-element": "^2.1.0",
     "@github/paste-markdown": "^1.4.0",
-    "@github/time-elements": "^3.5.0",
+    "@github/relative-time-element": "4.0.0",
     "@lit-labs/react": "1.0.9",
     "@primer/behaviors": "1.3.1",
     "@primer/octicons-react": "^17.7.0",
diff --git a/rollup.config.js b/rollup.config.js
index 4cc719c92f2..1624ca4c6d0 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -54,7 +54,7 @@ const ESM_ONLY = new Set([
   '@github/combobox-nav',
   '@github/markdown-toolbar-element',
   '@github/paste-markdown',
-  '@github/time-elements',
+  '@github/relative-time-element',
   '@lit-labs/react'
 ])
 const dependencies = [
diff --git a/src/RelativeTime/RelativeTime.tsx b/src/RelativeTime/RelativeTime.tsx
index 9f18ff0c138..6b5acc14d61 100644
--- a/src/RelativeTime/RelativeTime.tsx
+++ b/src/RelativeTime/RelativeTime.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import {RelativeTimeElement} from '@github/time-elements'
+import {RelativeTimeElement} from '@github/relative-time-element'
 import {createComponent} from '@lit-labs/react'
 import {ComponentProps} from '../utils/types'
 import sx from '../sx'

From 02c67eaeac0a2fe71c9504c1ab2f689ca97ddfc9 Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Tue, 6 Dec 2022 18:20:54 +0000
Subject: [PATCH 28/28] prettier

---
 rollup.config.js                          |  2 +-
 src/RelativeTime/RelativeTime.stories.tsx | 78 +++++++++++------------
 src/__tests__/RelativeTime.test.tsx       |  2 +-
 3 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/rollup.config.js b/rollup.config.js
index 5c03ae5e4b4..286effb320f 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -55,7 +55,7 @@ const ESM_ONLY = new Set([
   '@github/markdown-toolbar-element',
   '@github/paste-markdown',
   '@github/relative-time-element',
-  '@lit-labs/react'
+  '@lit-labs/react',
 ])
 const dependencies = [
   ...Object.keys(packageJson.peerDependencies ?? {}),
diff --git a/src/RelativeTime/RelativeTime.stories.tsx b/src/RelativeTime/RelativeTime.stories.tsx
index 073564bfac6..ade5029b5e0 100644
--- a/src/RelativeTime/RelativeTime.stories.tsx
+++ b/src/RelativeTime/RelativeTime.stories.tsx
@@ -10,8 +10,8 @@ const meta: Meta = {
     controls: {
       // StoryBook infers from type info of the component which includes CE Lifecycle,
       // SX props, and methods we want to otherwise ignore
-      exclude: /^(getFormatted.*|datetime|sx|as|theme|forwardedAs|.*Callback|update)$/g
-    }
+      exclude: /^(getFormatted.*|datetime|sx|as|theme|forwardedAs|.*Callback|update)$/g,
+    },
   },
   args: {
     date: new Date('2020-01-01T00:00:00Z'),
@@ -22,112 +22,112 @@ const meta: Meta = {
     day: 'numeric',
     month: 'short',
     year: '',
-    timeZoneName: ''
+    timeZoneName: '',
   },
   argTypes: {
     hour: {
       type: {
         name: 'enum',
-        value: ['', 'numeric', '2-digit']
+        value: ['', 'numeric', '2-digit'],
       },
       control: {
         type: 'select',
         labels: {
-          '': '(None)'
-        }
-      }
+          '': '(None)',
+        },
+      },
     },
     minute: {
       type: {
         name: 'enum',
-        value: ['', 'numeric', '2-digit']
+        value: ['', 'numeric', '2-digit'],
       },
       control: {
         type: 'select',
         labels: {
-          '': '(None)'
-        }
-      }
+          '': '(None)',
+        },
+      },
     },
     second: {
       type: {
         name: 'enum',
-        value: ['', 'numeric', '2-digit']
+        value: ['', 'numeric', '2-digit'],
       },
       control: {
         type: 'select',
         labels: {
-          '': '(None)'
-        }
-      }
+          '': '(None)',
+        },
+      },
     },
     weekday: {
       type: {
         name: 'enum',
-        value: ['', 'short', 'long', 'narrow']
+        value: ['', 'short', 'long', 'narrow'],
       },
       control: {
         type: 'select',
         labels: {
-          '': '(None)'
-        }
-      }
+          '': '(None)',
+        },
+      },
     },
     day: {
       type: {
         name: 'enum',
-        value: ['', 'numeric', '2-digit']
+        value: ['', 'numeric', '2-digit'],
       },
       control: {
         type: 'select',
         labels: {
-          '': '(None)'
-        }
-      }
+          '': '(None)',
+        },
+      },
     },
     month: {
       type: {
         name: 'enum',
-        value: ['', 'numeric', '2-digit', 'long', 'short', 'narrow']
+        value: ['', 'numeric', '2-digit', 'long', 'short', 'narrow'],
       },
       control: {
         type: 'select',
         labels: {
-          '': '(None)'
-        }
-      }
+          '': '(None)',
+        },
+      },
     },
     year: {
       type: {
         name: 'enum',
-        value: ['', 'numeric', '2-digit']
+        value: ['', 'numeric', '2-digit'],
       },
       control: {
         type: 'select',
         labels: {
-          '': '(None)'
-        }
-      }
+          '': '(None)',
+        },
+      },
     },
     timeZoneName: {
       type: {
         name: 'enum',
-        value: ['', 'long', 'short', 'longOffset', 'shortOffset', 'longGeneric', 'shortGeneric']
+        value: ['', 'long', 'short', 'longOffset', 'shortOffset', 'longGeneric', 'shortGeneric'],
       },
       control: {
         type: 'select',
         labels: {
-          '': '(None)'
-        }
-      }
+          '': '(None)',
+        },
+      },
     },
     date: {
-      control: 'date'
+      control: 'date',
     },
     format: {
-      control: 'string'
-    }
-  }
+      control: 'string',
+    },
+  },
 }
 
 export const Default: Story = args => {
diff --git a/src/__tests__/RelativeTime.test.tsx b/src/__tests__/RelativeTime.test.tsx
index fc135e18e99..6c92229a2e5 100644
--- a/src/__tests__/RelativeTime.test.tsx
+++ b/src/__tests__/RelativeTime.test.tsx
@@ -9,7 +9,7 @@ describe('RelativeTime', () => {
   behavesAsComponent({Component: RelativeTime})
 
   checkExports('RelativeTime', {
-    default: RelativeTime
+    default: RelativeTime,
   })
 
   it('should have no axe violations', async () => {