From 5b35274ea578739f0d482e52e4f765ed08f5cdc5 Mon Sep 17 00:00:00 2001
From: tate <tate@ens.domains>
Date: Fri, 26 Aug 2022 14:03:39 +1000
Subject: [PATCH 1/5] fix inconsistent avatar loads

---
 .../components/atoms/Avatar/Avatar.test.tsx   |  4 +-
 .../src/components/atoms/Avatar/Avatar.tsx    | 46 ++++++++++++++-----
 2 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/components/src/components/atoms/Avatar/Avatar.test.tsx b/components/src/components/atoms/Avatar/Avatar.test.tsx
index 257d0ab4..e68cb613 100644
--- a/components/src/components/atoms/Avatar/Avatar.test.tsx
+++ b/components/src/components/atoms/Avatar/Avatar.test.tsx
@@ -10,7 +10,7 @@ import { lightTheme } from '@/src/tokens'
 describe('<Avatar />', () => {
   afterEach(cleanup)
 
-  it('renders', () => {
+  it('renders', async () => {
     render(
       <ThemeProvider theme={lightTheme}>
         <Avatar
@@ -19,6 +19,6 @@ describe('<Avatar />', () => {
         />
       </ThemeProvider>,
     )
-    waitFor(() => expect(screen.getByRole(/img/i)).toBeInTheDocument())
+    await waitFor(() => expect(screen.getByRole(/img/i)).toBeInTheDocument())
   })
 })
diff --git a/components/src/components/atoms/Avatar/Avatar.tsx b/components/src/components/atoms/Avatar/Avatar.tsx
index b121d497..1a01b08c 100644
--- a/components/src/components/atoms/Avatar/Avatar.tsx
+++ b/components/src/components/atoms/Avatar/Avatar.tsx
@@ -61,9 +61,9 @@ const Container = styled.div<Container>(
   `,
 )
 
-const Placeholder = styled.div(
-  ({ theme }) => css`
-    background: ${theme.colors.gradients.blue};
+const Placeholder = styled.div<{ $url?: string }>(
+  ({ theme, $url }) => css`
+    background: ${$url || theme.colors.gradients.blue};
 
     display: flex;
     align-items: center;
@@ -96,33 +96,55 @@ export type Props = {
   src?: NativeImgAttributes['src']
   /** The shape of the avatar. */
   shape?: Shape
-  // as?: 'img' | React.ComponentType
-} & Omit<
-  NativeImgAttributes,
-  'decoding' | 'alt' | 'onError' | 'children' | 'onError'
->
+  /** A placeholder for the image to use when not loaded, in css format (e.g. url("https://example.com")) */
+  placeholder?: string
+} & Omit<NativeImgAttributes, 'alt' | 'onError' | 'children' | 'onError'>
 
 export const Avatar = ({
   label,
   noBorder = false,
   shape = 'circle',
   src,
+  placeholder,
+  decoding = 'async',
   ...props
 }: Props) => {
+  const ref = React.useRef<HTMLImageElement>(null)
   const [showImage, setShowImage] = React.useState(!!src)
 
-  React.useEffect(() => {
+  const showImg = React.useCallback(() => {
+    setShowImage(true)
+  }, [setShowImage])
+
+  const hideImg = React.useCallback(() => {
     setShowImage(false)
-  }, [src])
+  }, [setShowImage])
+
+  React.useEffect(() => {
+    const img = ref.current
+    if (img) {
+      img.addEventListener('load', showImg)
+      img.addEventListener('loadstart', hideImg)
+      img.addEventListener('error', hideImg)
+    }
+    return () => {
+      if (img) {
+        img.removeEventListener('load', showImg)
+        img.removeEventListener('loadstart', hideImg)
+        img.removeEventListener('error', hideImg)
+      }
+    }
+  }, [ref, hideImg, showImg])
 
   return (
     <Container $noBorder={!showImage || noBorder} $shape={shape}>
-      {!showImage && <Placeholder aria-label={label} />}
+      {!showImage && <Placeholder $url={placeholder} aria-label={label} />}
       <Img
         {...props}
         $shown={showImage}
         alt={label}
-        decoding="async"
+        decoding={decoding}
+        ref={ref}
         src={src}
         onError={() => setShowImage(false)}
         onLoad={() => setShowImage(true)}

From 71e703e5df52fdddccc614301276fcccb7feca6d Mon Sep 17 00:00:00 2001
From: tate <tate@ens.domains>
Date: Fri, 26 Aug 2022 15:44:31 +1000
Subject: [PATCH 2/5] fixed multiple backdrop handling

---
 .../molecules/Backdrop/Backdrop.test.tsx      | 63 +++++++++++++++++++
 .../molecules/Backdrop/Backdrop.tsx           | 42 ++++++++-----
 2 files changed, 89 insertions(+), 16 deletions(-)
 create mode 100644 components/src/components/molecules/Backdrop/Backdrop.test.tsx

diff --git a/components/src/components/molecules/Backdrop/Backdrop.test.tsx b/components/src/components/molecules/Backdrop/Backdrop.test.tsx
new file mode 100644
index 00000000..6ea26c46
--- /dev/null
+++ b/components/src/components/molecules/Backdrop/Backdrop.test.tsx
@@ -0,0 +1,63 @@
+import * as React from 'react'
+
+import { ThemeProvider } from 'styled-components'
+
+import { cleanup, render, screen, waitFor } from '@/test'
+
+import { Backdrop } from './Backdrop'
+import { lightTheme } from '@/src/tokens'
+
+window.scroll = jest.fn()
+
+const Element = ({
+  open = true,
+  className,
+  testId = 1,
+}: {
+  open?: boolean
+  className?: string
+  testId?: number
+}) => (
+  <ThemeProvider theme={lightTheme}>
+    <Backdrop className={className} open={open}>
+      {() => <div data-testid={`inner-data-${testId}`}>test</div>}
+    </Backdrop>
+  </ThemeProvider>
+)
+
+describe('<Backdrop />', () => {
+  afterEach(cleanup)
+
+  it('renders', async () => {
+    render(<Element />)
+    await waitFor(() =>
+      expect(screen.getByTestId('inner-data-1')).toBeInTheDocument(),
+    )
+  })
+  it('should allow multiple backdrops to open without losing the initial state', async () => {
+    const { rerender: rerenderOne } = render(<Element />)
+    await waitFor(() =>
+      expect(screen.getByTestId('inner-data-1')).toBeInTheDocument(),
+    )
+    expect(document.body.dataset.backdrops).toBe('1')
+    expect(document.body.style.position).toBe('fixed')
+    const { rerender: rerenderTwo } = render(<Element testId={2} />)
+    await waitFor(() =>
+      expect(screen.getByTestId('inner-data-2')).toBeInTheDocument(),
+    )
+    expect(document.body.dataset.backdrops).toBe('2')
+    expect(document.body.style.position).toBe('fixed')
+    rerenderTwo(<Element open={false} testId={2} />)
+    await waitFor(() =>
+      expect(screen.queryByTestId('inner-data-2')).not.toBeInTheDocument(),
+    )
+    expect(document.body.dataset.backdrops).toBe('1')
+    expect(document.body.style.position).toBe('fixed')
+    rerenderOne(<Element open={false} />)
+    await waitFor(() =>
+      expect(screen.queryByTestId('inner-data-1')).not.toBeInTheDocument(),
+    )
+    expect(document.body.dataset.backdrops).toBe('0')
+    expect(document.body.style.position).toBe('')
+  })
+})
diff --git a/components/src/components/molecules/Backdrop/Backdrop.tsx b/components/src/components/molecules/Backdrop/Backdrop.tsx
index a24e2031..4f2888df 100644
--- a/components/src/components/molecules/Backdrop/Backdrop.tsx
+++ b/components/src/components/molecules/Backdrop/Backdrop.tsx
@@ -42,24 +42,34 @@ export const Backdrop = ({
     e.target === boxRef.current && onDismiss && onDismiss()
 
   React.useEffect(() => {
-    toggle(open || false)
-
-    let top = 0
-    if (typeof window !== 'undefined' && open) {
-      top = window.scrollY
-      document.body.style.width = `${document.body.clientWidth}px`
-      document.body.style.position = 'fixed'
-      document.body.style.top = `-${top}px`
+    const { style, dataset } = document.body
+    const currBackdrops = () => parseInt(dataset.backdrops || '0')
+    const modifyBackdrops = (modifier: number) =>
+      (dataset.backdrops = String(currBackdrops() + modifier))
+    const setStyles = (w: string, p: string, t: string) => {
+      style.width = w
+      style.position = p
+      style.top = t
     }
 
-    return () => {
-      if (typeof window !== 'undefined' && open) {
-        document.body.style.width = ''
-        document.body.style.position = ''
-        document.body.style.top = ''
-        window.scroll({
-          top,
-        })
+    toggle(open || false)
+    if (typeof window !== 'undefined') {
+      if (open) {
+        if (currBackdrops() === 0) {
+          setStyles(
+            `${document.body.clientWidth}px`,
+            'fixed',
+            `-${window.scrollY}px`,
+          )
+        }
+        modifyBackdrops(1)
+        return () => {
+          if (currBackdrops() === 1) {
+            setStyles('', '', '')
+          }
+          modifyBackdrops(-1)
+          window.scroll({ top: parseFloat(style.top || '0') * -1 })
+        }
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

From 6eeb6177691b43289d693a88ff25eed91e6e41bb Mon Sep 17 00:00:00 2001
From: tate <tate@ens.domains>
Date: Fri, 26 Aug 2022 15:51:05 +1000
Subject: [PATCH 3/5] fixed playroom

---
 docs/package.json |   8 +-
 pnpm-lock.yaml    | 379 ++++++++++++++++++++++------------------------
 2 files changed, 181 insertions(+), 206 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 9d0079cc..04ffc25a 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -3,15 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "build": "playroom build & next build",
+    "build": "next build && playroom build",
     "export": "next export",
     "clean": "rimraf .next public/playroom",
     "dev": "NODE_OPTIONS='--inspect' next dev & playroom start",
     "lint": "next lint",
     "lint:types": "tsc --noEmit",
-    "start": "next start",
-    "playroom:start": "playroom start",
-    "playroom:build": "playroom build"
+    "start": "next start"
   },
   "dependencies": {
     "@ensdomains/thorin": "workspace:components",
@@ -23,7 +21,7 @@
     "next": "latest",
     "next-mdx-remote": "^3.0.6",
     "nookies": "^2.5.2",
-    "playroom": "0.27.7",
+    "playroom": "^0.28.0",
     "prism-react-renderer": "^1.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a82dcbb7..7ebc3289 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -213,7 +213,7 @@ importers:
       next: latest
       next-mdx-remote: ^3.0.6
       nookies: ^2.5.2
-      playroom: 0.27.7
+      playroom: ^0.28.0
       prism-react-renderer: ^1.2.1
       react: ^17.0.2
       react-docgen-typescript: ^2.1.1
@@ -236,7 +236,7 @@ importers:
       next: 12.2.5_sfoxds7t5ydpegc3knd667wn6m
       next-mdx-remote: 3.0.8_sfoxds7t5ydpegc3knd667wn6m
       nookies: 2.5.2
-      playroom: 0.27.7_sfoxds7t5ydpegc3knd667wn6m
+      playroom: 0.28.0_sfoxds7t5ydpegc3knd667wn6m
       prism-react-renderer: 1.3.5_react@17.0.2
       react: 17.0.2
       react-dom: 17.0.2_react@17.0.2
@@ -1768,6 +1768,13 @@ packages:
     dependencies:
       regenerator-runtime: 0.13.9
 
+  /@babel/runtime/7.18.9:
+    resolution: {integrity: sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.13.9
+    dev: false
+
   /@babel/standalone/7.18.10:
     resolution: {integrity: sha512-0KWHiRX9TUHiWE+dKYYEOIiRJcPwGU6u8Bq/p+ldekj7Kew9PCwl4S4FTSEPpTrn3Vc+r3iRSaN1l9AcGgLx4Q==}
     engines: {node: '>=6.9.0'}
@@ -1895,6 +1902,10 @@ packages:
     resolution: {integrity: sha512-8HqW8EVqjnCmWXVpqAOZf+EGESdkR27odcMMMGefgKXtar00SoYNSryGv//TELI4T3QFsECo78p+0lmalk/CFA==}
     dev: true
 
+  /@emotion/hash/0.8.0:
+    resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==}
+    dev: false
+
   /@emotion/is-prop-valid/0.8.8:
     resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==}
     dependencies:
@@ -3445,6 +3456,7 @@ packages:
 
   /@types/parse-json/4.0.0:
     resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
+    dev: true
 
   /@types/parse5/5.0.3:
     resolution: {integrity: sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw==}
@@ -3702,6 +3714,74 @@ packages:
       eslint-visitor-keys: 2.1.0
     dev: true
 
+  /@vanilla-extract/babel-plugin/1.1.7:
+    resolution: {integrity: sha512-nTCOb1N/u1FUxACxV/jvpLm4xchiCdEHTUZrxCWjYOrIxqkfgpJXE4T7q/1VyEje/M929DFBUaD+YkPzaqGMzA==}
+    dependencies:
+      '@babel/core': 7.18.10
+      '@babel/template': 7.18.10
+      '@vanilla-extract/integration': 5.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /@vanilla-extract/css-utils/0.1.2:
+    resolution: {integrity: sha512-qoxIu5E/UhJtoKsPL1JaU9nhTN0Xl5zYV0pScOgsvc3JN46TvTTt0L3GV8x3PQpZP7x3elw8BsC9czYbhJy9Gg==}
+    dev: false
+
+  /@vanilla-extract/css/1.7.3:
+    resolution: {integrity: sha512-ZwfNvk9LjVdsHON4bNAGXBu0dPo4e1RlgghnW1A4lcQruvFU7zdq+wEqodrX3O0D2qRkupOGgjAbTSddwqKoQA==}
+    dependencies:
+      '@emotion/hash': 0.8.0
+      '@vanilla-extract/private': 1.0.3
+      chalk: 4.1.2
+      css-what: 5.0.1
+      cssesc: 3.0.0
+      csstype: 3.0.9
+      deep-object-diff: 1.1.7
+      deepmerge: 4.2.2
+      escape-string-regexp: 4.0.0
+      media-query-parser: 2.0.2
+      outdent: 0.8.0
+    dev: false
+
+  /@vanilla-extract/integration/5.0.0:
+    resolution: {integrity: sha512-HwglsIxGYtV4IXFfyQ6GzZLFoaWaW+QkNx8UhXbgsCWUoPqpSbioukCOA+SuSuzsIcEZ3hkD0Y5ixITQNtnzjQ==}
+    dependencies:
+      '@vanilla-extract/css': 1.7.3
+      esbuild: 0.11.23
+      eval: 0.1.6
+      find-up: 5.0.0
+      javascript-stringify: 2.1.0
+      lodash: 4.17.21
+      outdent: 0.8.0
+    dev: false
+
+  /@vanilla-extract/private/1.0.3:
+    resolution: {integrity: sha512-17kVyLq3ePTKOkveHxXuIJZtGYs+cSoev7BlP+Lf4916qfDhk/HBjvlYDe8egrea7LNPHKwSZJK/bzZC+Q6AwQ==}
+    dev: false
+
+  /@vanilla-extract/sprinkles/1.4.1_@vanilla-extract+css@1.7.3:
+    resolution: {integrity: sha512-aW6CfMMToX4a+baLuVxwcT0FSACjX3xrNt8wdi/3LLRlLAfhyue8OK7kJxhcYNZfydBeWTP59aRy8p5FUTIeew==}
+    peerDependencies:
+      '@vanilla-extract/css': ^1.0.0
+    dependencies:
+      '@vanilla-extract/css': 1.7.3
+    dev: false
+
+  /@vanilla-extract/webpack-plugin/2.1.12_webpack@5.58.2:
+    resolution: {integrity: sha512-8mAbIDEh9r7a5cgb3wcILzuhEbGNddV4/qvwogOlxhoGrP4deUKJHEtPURDviWZ+x/FzFZtZ3glWU7WD8+WN8A==}
+    peerDependencies:
+      webpack: ^4.30.0 || ^5.20.2
+    dependencies:
+      '@vanilla-extract/integration': 5.0.0
+      chalk: 4.1.2
+      debug: 4.3.4
+      loader-utils: 2.0.2
+      webpack: 5.58.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /@webassemblyjs/ast/1.11.1:
     resolution: {integrity: sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==}
     dependencies:
@@ -4090,21 +4170,6 @@ packages:
     hasBin: true
     dev: true
 
-  /autoprefixer/10.4.8:
-    resolution: {integrity: sha512-75Jr6Q/XpTqEf6D2ltS5uMewJIx5irCU1oBYJrWjFenq/m12WRRrz6g15L1EIoYvPLXTbEry7rDOwrcYNj77xw==}
-    engines: {node: ^10 || ^12 || >=14}
-    hasBin: true
-    peerDependencies:
-      postcss: ^8.1.0
-    dependencies:
-      browserslist: 4.21.3
-      caniuse-lite: 1.0.30001373
-      fraction.js: 4.2.0
-      normalize-range: 0.1.2
-      picocolors: 1.0.0
-      postcss-value-parser: 4.2.0
-    dev: false
-
   /axe-core/4.3.3:
     resolution: {integrity: sha512-/lqqLAmuIPi79WYfRpy2i8z+x+vxU3zX2uAm0gs1q52qTuKwolOj1P8XbufpXcsydrpKx2yGn2wzAnxCMV86QA==}
     engines: {node: '>=4'}
@@ -4372,10 +4437,6 @@ packages:
     resolution: {integrity: sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==}
     dev: false
 
-  /big.js/3.2.0:
-    resolution: {integrity: sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==}
-    dev: false
-
   /big.js/5.2.2:
     resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==}
 
@@ -4511,6 +4572,7 @@ packages:
   /callsites/3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
+    dev: true
 
   /camel-case/4.1.2:
     resolution: {integrity: sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==}
@@ -4531,11 +4593,6 @@ packages:
       quick-lru: 4.0.1
     dev: true
 
-  /camelcase/3.0.0:
-    resolution: {integrity: sha512-4nhGqUkc4BqbBBB4Q6zLuD7lzzrHYrjKGeYaEji/3tFR5VdJu9v+LilhGIVe8wxEJPPOeWo7eg8dwY13TZ1BNg==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
   /camelcase/5.3.1:
     resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
     engines: {node: '>=6'}
@@ -4597,7 +4654,6 @@ packages:
     dependencies:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
-    dev: true
 
   /change-case/4.1.2:
     resolution: {integrity: sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==}
@@ -4886,7 +4942,7 @@ packages:
     resolution: {integrity: sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==}
     engines: {node: '>= 0.6'}
     dependencies:
-      mime-db: 1.49.0
+      mime-db: 1.52.0
     dev: false
 
   /compression/1.7.4:
@@ -4951,12 +5007,6 @@ packages:
     engines: {node: '>= 0.6'}
     dev: false
 
-  /copy-anything/2.0.6:
-    resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==}
-    dependencies:
-      is-what: 3.14.1
-    dev: false
-
   /copy-to-clipboard/3.3.2:
     resolution: {integrity: sha512-Vme1Z6RUDzrb6xAI7EZlVZ5uvOk2F//GaxKUxajDqm9LhOVM1inxNAD2vy+UZDYsd0uyA9s7b3/FVZPSxqrCfg==}
     dependencies:
@@ -4988,6 +5038,7 @@ packages:
       parse-json: 5.2.0
       path-type: 4.0.0
       yaml: 1.10.2
+    dev: true
 
   /create-require/1.1.1:
     resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
@@ -5392,10 +5443,13 @@ packages:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
     dev: true
 
+  /deep-object-diff/1.1.7:
+    resolution: {integrity: sha512-QkgBca0mL08P6HiOjoqvmm6xOAl2W6CT2+34Ljhg0OeFan8cwlcdq8jrLKsBBuUFAZLsN5b6y491KdKEoSo9lg==}
+    dev: false
+
   /deepmerge/4.2.2:
     resolution: {integrity: sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /default-gateway/6.0.3:
     resolution: {integrity: sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==}
@@ -5601,11 +5655,6 @@ packages:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
     dev: true
 
-  /emojis-list/2.1.0:
-    resolution: {integrity: sha512-knHEZMgs8BB+MInokmNTg/OyPlAddghe1YBgNwJBc5zsJi/uyIcXoSDsL/W9ymOsBoBGdPIHXYJ9+qKFwRwDng==}
-    engines: {node: '>= 0.10'}
-    dev: false
-
   /emojis-list/3.0.0:
     resolution: {integrity: sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==}
     engines: {node: '>= 4'}
@@ -5643,15 +5692,6 @@ packages:
     engines: {node: '>=0.12'}
     dev: true
 
-  /errno/0.1.8:
-    resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
-    hasBin: true
-    requiresBuild: true
-    dependencies:
-      prr: 1.0.1
-    dev: false
-    optional: true
-
   /error-ex/1.3.2:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
     dependencies:
@@ -5687,6 +5727,7 @@ packages:
       string.prototype.trimend: 1.0.4
       string.prototype.trimstart: 1.0.4
       unbox-primitive: 1.0.1
+    dev: true
 
   /es-module-lexer/0.9.1:
     resolution: {integrity: sha512-17Ed9misDnpyNBJh63g1OhW3qUFecDgGOivI85JeZY/LGhDum8e+cltukbkSK8pcJnXXEkya56sp4vSS1nzoUw==}
@@ -5698,6 +5739,7 @@ packages:
       is-callable: 1.2.4
       is-date-object: 1.0.5
       is-symbol: 1.0.4
+    dev: true
 
   /esbuild-android-64/0.14.53:
     resolution: {integrity: sha512-fIL93sOTnEU+NrTAVMIKiAw0YH22HWCAgg4N4Z6zov2t0kY9RAJ50zY9ZMCQ+RT6bnOfDt8gCTnt/RaSNA2yRA==}
@@ -5877,6 +5919,12 @@ packages:
     dev: true
     optional: true
 
+  /esbuild/0.11.23:
+    resolution: {integrity: sha512-iaiZZ9vUF5wJV8ob1tl+5aJTrwDczlvGP0JoMmnpC2B0ppiMCu8n8gmy5ZTGl5bcG081XBVn+U+jP+mPFm5T5Q==}
+    hasBin: true
+    requiresBuild: true
+    dev: false
+
   /esbuild/0.12.29:
     resolution: {integrity: sha512-w/XuoBCSwepyiZtIRsKsetiLDUVGPVw1E/R3VTFSecIy8UR7Cq3SOtwKHJMFoVqqVG36aGkzh4e8BvpO1Fdc7g==}
     hasBin: true
@@ -5932,7 +5980,6 @@ packages:
   /escape-string-regexp/4.0.0:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
-    dev: true
 
   /escape-string-regexp/5.0.0:
     resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
@@ -6364,6 +6411,13 @@ packages:
     engines: {node: '>= 0.6'}
     dev: false
 
+  /eval/0.1.6:
+    resolution: {integrity: sha512-o0XUw+5OGkXw4pJZzQoXUk+H87DHuC+7ZE//oSrRGtatTmr12oTnLfg6QOq9DyTt0c/p4TwzgmkKrBzWTSizyQ==}
+    engines: {node: '>= 0.8'}
+    dependencies:
+      require-like: 0.1.2
+    dev: false
+
   /eventemitter3/4.0.7:
     resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
     dev: false
@@ -6659,10 +6713,6 @@ packages:
     engines: {node: '>= 0.6'}
     dev: false
 
-  /fraction.js/4.2.0:
-    resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
-    dev: false
-
   /fresh/0.5.2:
     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
     engines: {node: '>= 0.6'}
@@ -6763,6 +6813,7 @@ packages:
     dependencies:
       call-bind: 1.0.2
       get-intrinsic: 1.1.1
+    dev: true
 
   /glob-parent/5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
@@ -6887,6 +6938,7 @@ packages:
 
   /has-bigints/1.0.1:
     resolution: {integrity: sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==}
+    dev: true
 
   /has-flag/3.0.0:
     resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
@@ -6905,6 +6957,7 @@ packages:
     engines: {node: '>= 0.4'}
     dependencies:
       has-symbols: 1.0.2
+    dev: true
 
   /has/1.0.3:
     resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
@@ -7174,14 +7227,6 @@ packages:
     dependencies:
       safer-buffer: 2.1.2
 
-  /iconv-lite/0.6.3:
-    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
-    engines: {node: '>=0.10.0'}
-    dependencies:
-      safer-buffer: 2.1.2
-    dev: false
-    optional: true
-
   /icss-utils/5.1.0_postcss@8.4.14:
     resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==}
     engines: {node: ^10 || ^12 || >= 14}
@@ -7204,14 +7249,6 @@ packages:
     engines: {node: '>= 4'}
     dev: true
 
-  /image-size/0.5.5:
-    resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==}
-    engines: {node: '>=0.10.0'}
-    hasBin: true
-    requiresBuild: true
-    dev: false
-    optional: true
-
   /immediate/3.0.6:
     resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
     dev: false
@@ -7222,6 +7259,7 @@ packages:
     dependencies:
       parent-module: 1.0.1
       resolve-from: 4.0.0
+    dev: true
 
   /import-lazy/4.0.0:
     resolution: {integrity: sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==}
@@ -7280,6 +7318,7 @@ packages:
       get-intrinsic: 1.1.1
       has: 1.0.3
       side-channel: 1.0.4
+    dev: true
 
   /intersection-observer/0.12.2:
     resolution: {integrity: sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg==}
@@ -7321,6 +7360,7 @@ packages:
     resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
     dependencies:
       has-bigints: 1.0.1
+    dev: true
 
   /is-binary-path/2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
@@ -7334,6 +7374,7 @@ packages:
     dependencies:
       call-bind: 1.0.2
       has-tostringtag: 1.0.0
+    dev: true
 
   /is-buffer/1.1.6:
     resolution: {integrity: sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==}
@@ -7346,6 +7387,7 @@ packages:
   /is-callable/1.2.4:
     resolution: {integrity: sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==}
     engines: {node: '>= 0.4'}
+    dev: true
 
   /is-core-module/2.9.0:
     resolution: {integrity: sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==}
@@ -7357,6 +7399,7 @@ packages:
     engines: {node: '>= 0.4'}
     dependencies:
       has-tostringtag: 1.0.0
+    dev: true
 
   /is-decimal/1.0.4:
     resolution: {integrity: sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==}
@@ -7403,12 +7446,14 @@ packages:
   /is-negative-zero/2.0.1:
     resolution: {integrity: sha512-2z6JzQvZRa9A2Y7xC6dQQm4FSTSTNWjKIYYTt4246eMTJmIo0Q+ZyOsU66X8lxK1AbB92dFeglPLrhwpeRKO6w==}
     engines: {node: '>= 0.4'}
+    dev: true
 
   /is-number-object/1.0.6:
     resolution: {integrity: sha512-bEVOqiRcvo3zO1+G2lVMy+gkkEm9Yh7cDMRusKKu5ZJKPUYSJwICTKZrNKHA2EbSP0Tu0+6B/emsYNHZyn6K8g==}
     engines: {node: '>= 0.4'}
     dependencies:
       has-tostringtag: 1.0.0
+    dev: true
 
   /is-number/7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
@@ -7454,6 +7499,7 @@ packages:
     dependencies:
       call-bind: 1.0.2
       has-tostringtag: 1.0.0
+    dev: true
 
   /is-regexp/1.0.0:
     resolution: {integrity: sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==}
@@ -7471,6 +7517,7 @@ packages:
 
   /is-shared-array-buffer/1.0.1:
     resolution: {integrity: sha512-IU0NmyknYZN0rChcKhRO1X8LYz5Isj/Fsqh8NJOSf+N/hCOTwy29F32Ik7a+QszE63IdvmwdTPDd6cZ5pg4cwA==}
+    dev: true
 
   /is-stream/1.1.0:
     resolution: {integrity: sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==}
@@ -7486,12 +7533,14 @@ packages:
     engines: {node: '>= 0.4'}
     dependencies:
       has-tostringtag: 1.0.0
+    dev: true
 
   /is-symbol/1.0.4:
     resolution: {integrity: sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==}
     engines: {node: '>= 0.4'}
     dependencies:
       has-symbols: 1.0.2
+    dev: true
 
   /is-typedarray/1.0.0:
     resolution: {integrity: sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==}
@@ -7501,10 +7550,7 @@ packages:
     resolution: {integrity: sha512-b2jKc2pQZjaeFYWEf7ScFj+Be1I+PXmlu572Q8coTXZ+LD/QQZ7ShPMst8h16riVgyXTQwUsFEl74mDvc/3MHQ==}
     dependencies:
       call-bind: 1.0.2
-
-  /is-what/3.14.1:
-    resolution: {integrity: sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==}
-    dev: false
+    dev: true
 
   /is-whitespace-character/1.0.4:
     resolution: {integrity: sha512-SDweEzfIZM0SJV0EUga669UTKlmL0Pq8Lno0QDQsPnvECB3IM2aP0gdx5TrU0A01MAPfViaZiI2V1QMZLaKK5w==}
@@ -7580,6 +7626,10 @@ packages:
       istanbul-lib-report: 3.0.0
     dev: true
 
+  /javascript-stringify/2.1.0:
+    resolution: {integrity: sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==}
+    dev: false
+
   /jest-changed-files/27.5.1:
     resolution: {integrity: sha512-buBLMiByfWGCoMsLLzGUUSpAmIAGnbR2KJoMN10ziLhOLvP4e0SlypHnAel8iqQXTrcbmfEY9sSqae5sgUsTvw==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
@@ -8247,11 +8297,6 @@ packages:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
     dev: true
 
-  /json5/0.5.1:
-    resolution: {integrity: sha512-4xrs1aW+6N5DalkqSVA8fxh458CXvR99WU8WLKmq4v8eWAL86Xo3BVqyd3SkA9wEVjCMqyvvRRkshAdOnBp5rw==}
-    hasBin: true
-    dev: false
-
   /json5/1.0.1:
     resolution: {integrity: sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==}
     hasBin: true
@@ -8293,11 +8338,6 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /klona/2.0.5:
-    resolution: {integrity: sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==}
-    engines: {node: '>= 8'}
-    dev: false
-
   /known-css-properties/0.25.0:
     resolution: {integrity: sha512-b0/9J1O9Jcyik1GC6KC42hJ41jKwdO/Mq8Mdo5sYN+IuRTXs2YFHZC3kZSx6ueusqa95x3wLYe/ytKjbAfGixA==}
     dev: true
@@ -8312,55 +8352,6 @@ packages:
       language-subtag-registry: 0.3.21
     dev: true
 
-  /less-loader/8.1.1_less@4.1.3+webpack@5.58.2:
-    resolution: {integrity: sha512-K93jJU7fi3n6rxVvzp8Cb88Uy9tcQKfHlkoezHwKILXhlNYiRQl4yowLIkQqmBXOH/5I8yoKiYeIf781HGkW9g==}
-    engines: {node: '>= 10.13.0'}
-    peerDependencies:
-      less: ^3.5.0 || ^4.0.0
-      webpack: ^5.0.0
-    dependencies:
-      klona: 2.0.5
-      less: 4.1.3
-      webpack: 5.58.2
-    dev: false
-
-  /less-vars-loader/1.1.0:
-    resolution: {integrity: sha512-1RscOY35Q3LFYw8furFxAi2zd5KvoadwpIw+fI2c2kx2XGiARb8QBdpp4FIZkBI/uLj9IUM2SQEka5uqj/ok4w==}
-    engines: {node: '>=5'}
-    dependencies:
-      camelcase: 3.0.0
-      less-vars-to-js: 1.3.0
-      loader-utils: 0.2.17
-      object.entries: 1.1.4
-    dev: false
-
-  /less-vars-to-js/1.3.0:
-    resolution: {integrity: sha512-xeiLLn/IMCGtdyCkYQnW8UuzoW2oYMCKg9boZRaGI58fLz5r90bNJDlqGzmVt/1Uqk75/DxIVtQSNCMkE5fRZQ==}
-    engines: {node: '>=8'}
-    dependencies:
-      strip-json-comments: 2.0.1
-    dev: false
-
-  /less/4.1.3:
-    resolution: {integrity: sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==}
-    engines: {node: '>=6'}
-    hasBin: true
-    dependencies:
-      copy-anything: 2.0.6
-      parse-node-version: 1.0.1
-      tslib: 2.4.0
-    optionalDependencies:
-      errno: 0.1.8
-      graceful-fs: 4.2.9
-      image-size: 0.5.5
-      make-dir: 2.1.0
-      mime: 1.6.0
-      needle: 3.1.0
-      source-map: 0.6.1
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
   /leven/3.1.0:
     resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==}
     engines: {node: '>=6'}
@@ -8446,15 +8437,6 @@ packages:
     resolution: {integrity: sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw==}
     engines: {node: '>=6.11.5'}
 
-  /loader-utils/0.2.17:
-    resolution: {integrity: sha512-tiv66G0SmiOx+pLWMtGEkfSEejxvb6N6uRrQjfWJIT79W9GMpgKeCAmm9aVBKtd4WEgntciI8CsGqjpDoCWJug==}
-    dependencies:
-      big.js: 3.2.0
-      emojis-list: 2.1.0
-      json5: 0.5.1
-      object-assign: 4.1.1
-    dev: false
-
   /loader-utils/2.0.0:
     resolution: {integrity: sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==}
     engines: {node: '>=8.9.0'}
@@ -8679,6 +8661,12 @@ packages:
   /mdurl/1.0.1:
     resolution: {integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==}
 
+  /media-query-parser/2.0.2:
+    resolution: {integrity: sha512-1N4qp+jE0pL5Xv4uEcwVUhIkwdUO3S/9gML90nqKA7v7FcOS5vUtatfzok9S9U1EJU8dHWlcv95WLnKmmxZI9w==}
+    dependencies:
+      '@babel/runtime': 7.18.9
+    dev: false
+
   /media-typer/0.3.0:
     resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
     engines: {node: '>= 0.6'}
@@ -8776,6 +8764,16 @@ packages:
     engines: {node: '>=4'}
     dev: true
 
+  /mini-css-extract-plugin/2.6.1_webpack@5.58.2:
+    resolution: {integrity: sha512-wd+SD57/K6DiV7jIR34P+s3uckTRuQvx0tKPcvjFlrEylk6P4mQ2KSWk1hblj1Kxaqok7LogKOieygXqBczNlg==}
+    engines: {node: '>= 12.13.0'}
+    peerDependencies:
+      webpack: ^5.0.0
+    dependencies:
+      schema-utils: 4.0.0
+      webpack: 5.58.2
+    dev: false
+
   /minimalistic-assert/1.0.1:
     resolution: {integrity: sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==}
     dev: false
@@ -8875,20 +8873,6 @@ packages:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
     dev: true
 
-  /needle/3.1.0:
-    resolution: {integrity: sha512-gCE9weDhjVGCRqS8dwDR/D3GTAeyXLXuqp7I8EzH6DllZGXSUyxuqqLh+YX9rMAWaaTFyVAg6rHGL25dqvczKw==}
-    engines: {node: '>= 4.4.x'}
-    hasBin: true
-    requiresBuild: true
-    dependencies:
-      debug: 3.2.7
-      iconv-lite: 0.6.3
-      sax: 1.2.4
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-    optional: true
-
   /negotiator/0.6.3:
     resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
     engines: {node: '>= 0.6'}
@@ -9013,11 +8997,6 @@ packages:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
 
-  /normalize-range/0.1.2:
-    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
   /normalize-url/6.1.0:
     resolution: {integrity: sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==}
     engines: {node: '>=10'}
@@ -9078,6 +9057,7 @@ packages:
       call-bind: 1.0.2
       define-properties: 1.1.3
       es-abstract: 1.19.1
+    dev: true
 
   /object.fromentries/2.0.4:
     resolution: {integrity: sha512-EsFBshs5RUUpQEY1D4q/m59kMfz4YJvxuNCJcv/jWwOJr34EaVnG11ZrZa0UHB3wnzV1wx8m58T4hQL8IuNXlQ==}
@@ -9173,6 +9153,10 @@ packages:
       word-wrap: 1.2.3
     dev: true
 
+  /outdent/0.8.0:
+    resolution: {integrity: sha512-KiOAIsdpUTcAXuykya5fnVVT+/5uS0Q1mrkRHcF89tpieSmY33O/tmc54CqwA+bfhbtEfZUNLHaPUiB9X3jt1A==}
+    dev: false
+
   /p-finally/1.0.0:
     resolution: {integrity: sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==}
     engines: {node: '>=4'}
@@ -9252,6 +9236,7 @@ packages:
     engines: {node: '>=6'}
     dependencies:
       callsites: 3.1.0
+    dev: true
 
   /parse-entities/2.0.0:
     resolution: {integrity: sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==}
@@ -9280,11 +9265,6 @@ packages:
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.1.6
 
-  /parse-node-version/1.0.1:
-    resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==}
-    engines: {node: '>= 0.10'}
-    dev: false
-
   /parse-prop-types/0.3.0_prop-types@15.7.2:
     resolution: {integrity: sha512-HAvQ2sGc2Y+OLWddBG+KKlxU/F931Vq0GPSqKVaRJb6bUVdkIYxk63mJ/ZwX1VTjZ0h34qrCXE3tmSVUHB1zxQ==}
     engines: {node: '>=6'}
@@ -9358,6 +9338,7 @@ packages:
   /path-type/4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
+    dev: true
 
   /pend/1.2.0:
     resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
@@ -9415,8 +9396,8 @@ packages:
       find-up: 2.1.0
     dev: true
 
-  /playroom/0.27.7_sfoxds7t5ydpegc3knd667wn6m:
-    resolution: {integrity: sha512-fLCAQFqAHR4M5MA1zkqZaGBxxHALEE7ARw4kDo/DbHP33NkBLca674+SHDzMBNcDnAhENU3TFidVh+lAcKjlbg==}
+  /playroom/0.28.0_sfoxds7t5ydpegc3knd667wn6m:
+    resolution: {integrity: sha512-LbwzPA8tm56OKlk/0W7XHj8SNjxz/NoOLR4Ur+fCQpjSqUKBRkaKALbRT19fFubCW57Oc0mwKa7QQOMddPhx5w==}
     hasBin: true
     peerDependencies:
       react: ^16.8 || ^17.0
@@ -9438,7 +9419,11 @@ packages:
       '@types/prettier': 2.6.4
       '@types/react': 17.0.33
       '@types/react-dom': 17.0.17
-      autoprefixer: 10.4.8
+      '@vanilla-extract/babel-plugin': 1.1.7
+      '@vanilla-extract/css': 1.7.3
+      '@vanilla-extract/css-utils': 0.1.2
+      '@vanilla-extract/sprinkles': 1.4.1_@vanilla-extract+css@1.7.3
+      '@vanilla-extract/webpack-plugin': 2.1.12_webpack@5.58.2
       babel-loader: 8.2.5_jpmyyfja22blbn5uq4gsnd5tva
       classnames: 2.3.1
       codemirror: 5.65.7
@@ -9454,16 +9439,14 @@ packages:
       history: 5.3.0
       html-webpack-plugin: 5.5.0_webpack@5.58.2
       intersection-observer: 0.12.2
-      less: 4.1.3
-      less-loader: 8.1.1_less@4.1.3+webpack@5.58.2
-      less-vars-loader: 1.1.0
       localforage: 1.10.0
       locate-path: 6.0.0
       lodash: 4.17.21
       lz-string: 1.4.4
+      mini-css-extract-plugin: 2.6.1_webpack@5.58.2
       parse-prop-types: 0.3.0_prop-types@15.7.2
+      polished: 4.2.2
       portfinder: 1.0.28
-      postcss-loader: 5.3.0_webpack@5.58.2
       prettier: 2.4.1
       prop-types: 15.7.2
       query-string: 6.14.1
@@ -9475,7 +9458,6 @@ packages:
       react-use: 17.4.0_sfoxds7t5ydpegc3knd667wn6m
       read-pkg-up: 7.0.1
       scope-eval: 1.0.0
-      style-loader: 3.3.0_webpack@5.58.2
       typescript: 4.7.4
       url-join: 4.0.1
       use-debounce: 3.4.3_react@17.0.2
@@ -9487,7 +9469,6 @@ packages:
       - bufferutil
       - debug
       - esbuild
-      - postcss
       - supports-color
       - uglify-js
       - utf-8-validate
@@ -9500,6 +9481,13 @@ packages:
       semver-compare: 1.0.0
     dev: true
 
+  /polished/4.2.2:
+    resolution: {integrity: sha512-Sz2Lkdxz6F2Pgnpi9U5Ng/WdWAUZxmHrNPoVlm3aAemxoy2Qy7LGjQg4uf8qKelDAUW94F4np3iH2YPf2qefcQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      '@babel/runtime': 7.18.9
+    dev: false
+
   /portfinder/1.0.28:
     resolution: {integrity: sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==}
     engines: {node: '>= 0.12.0'}
@@ -9580,19 +9568,6 @@ packages:
       postcss: 8.4.14
     dev: true
 
-  /postcss-loader/5.3.0_webpack@5.58.2:
-    resolution: {integrity: sha512-/+Z1RAmssdiSLgIZwnJHwBMnlABPgF7giYzTN2NOfr9D21IJZ4mQC1R2miwp80zno9M4zMD/umGI8cR+2EL5zw==}
-    engines: {node: '>= 10.13.0'}
-    peerDependencies:
-      postcss: ^7.0.0 || ^8.0.1
-      webpack: ^5.0.0
-    dependencies:
-      cosmiconfig: 7.0.1
-      klona: 2.0.5
-      semver: 7.3.5
-      webpack: 5.58.2
-    dev: false
-
   /postcss-media-query-parser/0.2.3:
     resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==}
     dev: true
@@ -10024,11 +9999,6 @@ packages:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
     dev: true
 
-  /prr/1.0.1:
-    resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
-    dev: false
-    optional: true
-
   /pseudomap/1.0.2:
     resolution: {integrity: sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==}
     dev: false
@@ -10500,6 +10470,10 @@ packages:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
 
+  /require-like/0.1.2:
+    resolution: {integrity: sha512-oyrU88skkMtDdauHDuKVrgR+zuItqr6/c//FXzvmxRGMexSDc6hNvJInGW3LL46n+8b50RykrvwSUIIQH2LQ5A==}
+    dev: false
+
   /requires-port/1.0.0:
     resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
     dev: false
@@ -10518,6 +10492,7 @@ packages:
   /resolve-from/4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
+    dev: true
 
   /resolve-from/5.0.0:
     resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
@@ -10583,7 +10558,7 @@ packages:
   /rtl-css-js/1.16.0:
     resolution: {integrity: sha512-Oc7PnzwIEU4M0K1J4h/7qUUaljXhQ0kCObRsZjxs2HjkpKsnoTMvSmvJ4sqgJZd0zBoEfAyTdnK/jMIYvrjySQ==}
     dependencies:
-      '@babel/runtime': 7.15.4
+      '@babel/runtime': 7.18.9
     dev: false
 
   /run-parallel/1.2.0:
@@ -10609,6 +10584,7 @@ packages:
 
   /sax/1.2.4:
     resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
+    dev: true
 
   /saxes/5.0.1:
     resolution: {integrity: sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==}
@@ -10742,7 +10718,7 @@ packages:
       debug: 2.6.9
       escape-html: 1.0.3
       http-errors: 1.6.3
-      mime-types: 2.1.32
+      mime-types: 2.1.35
       parseurl: 1.3.3
     transitivePeerDependencies:
       - supports-color
@@ -11090,12 +11066,14 @@ packages:
     dependencies:
       call-bind: 1.0.2
       define-properties: 1.1.3
+    dev: true
 
   /string.prototype.trimstart/1.0.4:
     resolution: {integrity: sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==}
     dependencies:
       call-bind: 1.0.2
       define-properties: 1.1.3
+    dev: true
 
   /string_decoder/1.1.1:
     resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
@@ -11169,11 +11147,6 @@ packages:
       min-indent: 1.0.1
     dev: true
 
-  /strip-json-comments/2.0.1:
-    resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
   /strip-json-comments/3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
@@ -11186,6 +11159,7 @@ packages:
       webpack: ^5.0.0
     dependencies:
       webpack: 5.58.2
+    dev: true
 
   /style-search/0.1.0:
     resolution: {integrity: sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==}
@@ -11845,6 +11819,7 @@ packages:
       has-bigints: 1.0.1
       has-symbols: 1.0.2
       which-boxed-primitive: 1.0.2
+    dev: true
 
   /unbzip2-stream/1.3.3:
     resolution: {integrity: sha512-fUlAF7U9Ah1Q6EieQ4x4zLNejrRvDWUYmxXUpN3uziFYCHapjWFaCAnreY9bGgxzaMCFAPPpYNng57CypwJVhg==}
@@ -12283,7 +12258,7 @@ packages:
     dependencies:
       colorette: 2.0.19
       memfs: 3.4.7
-      mime-types: 2.1.32
+      mime-types: 2.1.35
       range-parser: 1.2.1
       schema-utils: 4.0.0
       webpack: 5.58.2
@@ -12429,6 +12404,7 @@ packages:
       is-number-object: 1.0.6
       is-string: 1.0.7
       is-symbol: 1.0.4
+    dev: true
 
   /which/1.3.1:
     resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
@@ -12563,6 +12539,7 @@ packages:
   /yaml/1.10.2:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
+    dev: true
 
   /yargs-parser/20.2.9:
     resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}

From c5f4a91e45fb7c19244830094ded347b926e5b30 Mon Sep 17 00:00:00 2001
From: tate <tate@ens.domains>
Date: Fri, 26 Aug 2022 15:59:50 +1000
Subject: [PATCH 4/5] allow avatar props to be passed through profile component

---
 .../src/components/molecules/Profile/Profile.tsx       | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/src/components/molecules/Profile/Profile.tsx b/components/src/components/molecules/Profile/Profile.tsx
index 4b6006bb..cc741914 100644
--- a/components/src/components/molecules/Profile/Profile.tsx
+++ b/components/src/components/molecules/Profile/Profile.tsx
@@ -13,9 +13,8 @@ type Size = 'small' | 'medium' | 'large'
 type NativeDivProps = React.HTMLAttributes<HTMLDivElement>
 
 type BaseProps = {
-  /** The url of the avatar icon. */
-  avatar?: AvatarProps['src']
-  // avatarAs?: AvatarProps['as']
+  /** The url of the avatar icon, or the avatar props to passthrough */
+  avatar?: AvatarProps['src'] | Omit<AvatarProps, 'label'>
   /** An array of objects conforming to the DropdownItem interface. */
   dropdownItems?: DropdownItem[]
   /** The ethereum address of the profiled user. */
@@ -152,7 +151,10 @@ const ReducedLineText = styled(Typography)(
 const ProfileInner = ({ size, avatar, address, ensName }: Props) => (
   <>
     <AvatarContainer>
-      <Avatar label="profile-avatar" src={avatar} />
+      <Avatar
+        label="profile-avatar"
+        {...(typeof avatar === 'string' ? { src: avatar } : avatar || {})}
+      />
     </AvatarContainer>
     <ProfileInnerContainer $size={size}>
       <ReducedLineText

From 2fee8b4ed5853caa2f167a89053b2e3ca3938c4f Mon Sep 17 00:00:00 2001
From: tate <tate@ens.domains>
Date: Fri, 26 Aug 2022 16:26:18 +1000
Subject: [PATCH 5/5] behaviour tweak

---
 .../components/molecules/Backdrop/Backdrop.tsx   | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/components/src/components/molecules/Backdrop/Backdrop.tsx b/components/src/components/molecules/Backdrop/Backdrop.tsx
index 4f2888df..19deb64b 100644
--- a/components/src/components/molecules/Backdrop/Backdrop.tsx
+++ b/components/src/components/molecules/Backdrop/Backdrop.tsx
@@ -53,7 +53,7 @@ export const Backdrop = ({
     }
 
     toggle(open || false)
-    if (typeof window !== 'undefined') {
+    if (typeof window !== 'undefined' && !noBackground) {
       if (open) {
         if (currBackdrops() === 0) {
           setStyles(
@@ -64,23 +64,19 @@ export const Backdrop = ({
         }
         modifyBackdrops(1)
         return () => {
+          const top = parseFloat(style.top || '0') * -1
           if (currBackdrops() === 1) {
             setStyles('', '', '')
+            window.scroll({
+              top,
+            })
           }
           modifyBackdrops(-1)
-          window.scroll({ top: parseFloat(style.top || '0') * -1 })
         }
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open])
-
-  React.useEffect(() => {
-    return () => {
-      document.body.style.position = ''
-      document.body.style.top = ''
-    }
-  }, [])
+  }, [open, noBackground])
 
   return state !== 'unmounted' ? (
     <Portal className={className}>