diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json
index 545b6d767144..7c2bad104752 100644
--- a/code/lib/core-server/package.json
+++ b/code/lib/core-server/package.json
@@ -70,7 +70,6 @@
     "@storybook/types": "7.1.0-alpha.29",
     "@types/detect-port": "^1.3.0",
     "@types/node": "^16.0.0",
-    "@types/node-fetch": "^2.5.7",
     "@types/pretty-hrtime": "^1.0.0",
     "@types/semver": "^7.3.4",
     "better-opn": "^2.1.1",
@@ -84,7 +83,6 @@
     "globby": "^11.0.2",
     "ip": "^2.0.0",
     "lodash": "^4.17.21",
-    "node-fetch": "^2.6.7",
     "open": "^8.4.0",
     "pretty-hrtime": "^1.0.3",
     "prompts": "^2.4.0",
@@ -101,10 +99,12 @@
   "devDependencies": {
     "@types/compression": "^1.7.0",
     "@types/ip": "^1.1.0",
+    "@types/node-fetch": "^2.5.7",
     "@types/serve-favicon": "^2.5.2",
     "@types/ws": "^8",
     "jest-os-detection": "^1.3.1",
     "jest-specific-snapshot": "^7.0.0",
+    "node-fetch": "^3.3.1",
     "slash": "^5.0.0",
     "typescript": "~4.9.3"
   },
diff --git a/code/package.json b/code/package.json
index 74f7a3f6d4ea..52eb37b23a7e 100644
--- a/code/package.json
+++ b/code/package.json
@@ -242,7 +242,7 @@
     "lerna": "^6.4.0",
     "lint-staged": "^10.5.4",
     "lodash": "^4.17.21",
-    "node-gyp": "^8.4.0",
+    "node-gyp": "^9.3.1",
     "nx": "16.2.1",
     "nx-cloud": "16.0.5",
     "prettier": "2.8.0",
diff --git a/code/ui/components/package.json b/code/ui/components/package.json
index 26d4a3ba37d3..c7fa6cc617ca 100644
--- a/code/ui/components/package.json
+++ b/code/ui/components/package.json
@@ -63,7 +63,8 @@
     "@types/react-syntax-highlighter": "11.0.5",
     "@types/util-deprecate": "^1.0.0",
     "css": "^3.0.0",
-    "overlayscrollbars": "^1.13.1",
+    "overlayscrollbars": "^2.2.0",
+    "overlayscrollbars-react": "^0.5.0",
     "polished": "^4.2.2",
     "prettier": "^2.8.0",
     "react-popper-tooltip": "^4.4.2",
diff --git a/code/ui/components/src/ScrollArea/GlobalScrollAreaStyles.tsx b/code/ui/components/src/ScrollArea/GlobalScrollAreaStyles.tsx
index 593b06cecb21..a7650a8f922f 100644
--- a/code/ui/components/src/ScrollArea/GlobalScrollAreaStyles.tsx
+++ b/code/ui/components/src/ScrollArea/GlobalScrollAreaStyles.tsx
@@ -1,456 +1,496 @@
 import React from 'react';
-import { Global, keyframes } from '@storybook/theming';
+import { Global } from '@storybook/theming';
 import type { Theme, CSSObject } from '@storybook/theming';
 
-const hsResizeObserverDummyAnimation = keyframes`0%{z-index:0}to{z-index:-1}`;
-
-export const getScrollAreaStyles: (theme: Theme) => CSSObject = (theme: Theme) => ({
-  'html.os-html, html.os-html>.os-host': {
-    display: 'block',
-    overflow: 'hidden',
-    boxSizing: 'border-box',
-    height: '100%!important' as any as '100%',
-    width: '100%!important' as any as '100%',
-    minWidth: '100%!important' as any as '100%',
-    minHeight: '100%!important' as any as '100%',
-    margin: '0!important' as any as 0,
-    position: 'absolute!important' as any as 'absolute',
-  },
-  'html.os-html>.os-host>.os-padding': {
-    position: 'absolute',
-  },
-  'body.os-dragging, body.os-dragging *': {
-    cursor: 'default',
-  },
-  '.os-host, .os-host-textarea': {
-    position: 'relative',
-    overflow: 'visible!important' as any as 'visible',
-    flexDirection: 'column',
-    flexWrap: 'nowrap',
-    justifyContent: 'flex-start',
-    alignContent: 'flex-start',
-    alignItems: 'flex-start',
-  },
-  '.os-host-flexbox': {
-    overflow: 'hidden!important' as any as 'hidden',
-    display: 'flex',
-  },
-  '.os-host-flexbox>.os-size-auto-observer': {
-    height: 'inherit!important' as any as 'inherit',
-  },
-  '.os-host-flexbox>.os-content-glue': {
-    flexGrow: 1,
-    flexShrink: 0,
-  },
-  '.os-host-flexbox>.os-size-auto-observer, .os-host-flexbox>.os-content-glue': {
-    minHeight: 0,
-    minWidth: 0,
-    flexGrow: 0,
-    flexShrink: 1,
-    flexBasis: 'auto',
-  },
-  '#os-dummy-scrollbar-size': {
-    position: 'fixed',
-    opacity: 0,
-    visibility: 'hidden',
-    overflow: 'scroll',
-    height: 500,
-    width: 500,
-  },
-  '#os-dummy-scrollbar-size>div': {
-    width: '200%',
-    height: '200%',
-    margin: 10,
-  },
-  '#os-dummy-scrollbar-size, .os-viewport': {},
-  '.os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size, .os-viewport-native-scrollbars-invisible.os-viewport':
-    {
-      scrollbarWidth: 'none!important' as any as 'none',
-    },
-  '.os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar, .os-viewport-native-scrollbars-invisible#os-dummy-scrollbar-size::-webkit-scrollbar-corner, .os-viewport-native-scrollbars-invisible.os-viewport::-webkit-scrollbar-corner':
-    {
-      display: 'none!important' as any as 'none',
-      width: '0!important' as any as 0,
-      height: '0!important' as any as 0,
-      visibility: 'hidden!important' as any as 'hidden',
-      background: '0 0!important',
-    },
-  '.os-content-glue': {
-    boxSizing: 'inherit',
-    maxHeight: '100%',
-    maxWidth: '100%',
-    width: '100%',
-    pointerEvents: 'none',
-  },
-  '.os-padding': {
-    boxSizing: 'inherit',
-    direction: 'inherit',
-    position: 'absolute',
-    overflow: 'visible',
-    padding: 0,
-    margin: 0,
-    left: 0,
-    top: 0,
-    bottom: 0,
-    right: 0,
-    width: 'auto!important' as any as 'auto',
-    height: 'auto!important' as any as 'auto',
-    zIndex: 1,
-  },
-  '.os-host-overflow>.os-padding': {
-    overflow: 'hidden',
-  },
-  '.os-viewport': {
-    direction: 'inherit!important' as any as 'inherit',
-    boxSizing: 'inherit!important' as any as 'inherit',
-    resize: 'none!important' as any as 'none',
-    outline: '0!important' as any as 0,
-    position: 'absolute',
-    overflow: 'hidden',
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0,
-    padding: 0,
-    margin: 0,
-  },
-  '.os-content-arrange': {
-    position: 'absolute',
-    zIndex: -1,
-    minHeight: 1,
-    minWidth: 1,
-    pointerEvents: 'none',
-  },
-  '.os-content': {
-    direction: 'inherit',
-    boxSizing: 'border-box!important' as any as 'border-box',
-    position: 'relative',
-    display: 'block',
-    height: '100%',
-    width: '100%',
-    visibility: 'visible',
-  },
-  '.os-content:before, .os-content:after': {
-    content: "''",
-    display: 'table',
-    width: 0,
-    height: 0,
-    lineHeight: 0,
-    fontSize: 0,
-  },
-  '.os-content>.os-textarea': {
-    boxSizing: 'border-box!important' as any as 'border-box',
-    direction: 'inherit!important' as any as 'inherit',
-    background: '0 0!important',
-    outline: '0 transparent!important',
-    overflow: 'hidden!important' as any as 'hidden',
-    position: 'absolute!important' as any as 'absolute',
-    display: 'block!important' as any as 'block',
-    top: '0!important' as any as 0,
-    left: '0!important' as any as 0,
-    margin: '0!important' as any as 0,
-    borderRadius: '0!important' as any as 0,
-    float: 'none!important' as any as 'none',
-    filter: 'none!important' as any as 'none',
-    border: '0!important' as any as 0,
-    resize: 'none!important' as any as 'none',
-    transform: 'none!important' as any as 'none',
-    maxWidth: 'none!important' as any as 'none',
-    maxHeight: 'none!important' as any as 'none',
-    boxShadow: 'none!important' as any as 'none',
-    perspective: 'none!important' as any as 'none',
-    opacity: '1!important' as any as 1,
-    zIndex: '1!important' as any as 1,
-    clip: 'auto!important' as any as 'auto',
-    verticalAlign: 'baseline!important' as any as 'baseline',
-    padding: 0,
-  },
-  '.os-host-rtl>.os-padding>.os-viewport>.os-content>.os-textarea': {
-    right: '0!important' as any as 0,
-  },
-  '.os-content>.os-textarea-cover': {
-    zIndex: -1,
-    pointerEvents: 'none',
-  },
-  '.os-content>.os-textarea[wrap=off]': {
-    whiteSpace: 'pre!important' as any as 'pre',
-    margin: '0!important' as any as 0,
-  },
-  '.os-text-inherit': {
-    fontFamily: 'inherit',
-    fontSize: 'inherit',
-    fontWeight: 'inherit',
-    fontStyle: 'inherit',
-    fontVariant: 'inherit',
-    textTransform: 'inherit',
-    textDecoration: 'inherit',
-    textIndent: 'inherit',
-    textAlign: 'inherit',
-    textShadow: 'inherit',
-    textOverflow: 'inherit',
-    letterSpacing: 'inherit',
-    wordSpacing: 'inherit',
-    lineHeight: 'inherit',
-    unicodeBidi: 'inherit',
-    direction: 'inherit',
-    color: 'inherit',
-    cursor: 'text',
-  },
-  '.os-resize-observer, .os-resize-observer-host': {
-    boxSizing: 'inherit',
-    display: 'block',
-    opacity: 0,
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    height: '100%',
-    width: '100%',
-    overflow: 'hidden',
-    pointerEvents: 'none',
-    zIndex: -1,
-  },
-  '.os-resize-observer-host': {
-    padding: 'inherit',
-    border: 'inherit',
-    borderColor: 'transparent',
-    borderStyle: 'solid',
-    boxSizing: 'border-box',
-  },
-  '.os-resize-observer-host:after': {
-    content: "''",
-  },
-  '.os-resize-observer-host>.os-resize-observer, .os-resize-observer-host:after': {
-    height: '200%',
-    width: '200%',
-    padding: 'inherit',
-    border: 'inherit',
-    margin: 0,
-    display: 'block',
-    boxSizing: 'content-box',
-  },
-  '.os-resize-observer.observed, object.os-resize-observer': {
-    boxSizing: 'border-box!important' as any as 'border-box',
-  },
-  '.os-size-auto-observer': {
-    boxSizing: 'inherit!important' as any as 'inherit',
-    height: '100%',
-    width: 'inherit',
-    maxWidth: 1,
-    position: 'relative',
-    float: 'left',
-    maxHeight: 1,
-    overflow: 'hidden',
-    zIndex: -1,
-    padding: 0,
-    margin: 0,
-    pointerEvents: 'none',
-    flexGrow: 'inherit',
-    flexShrink: 0,
-    flexBasis: 0,
-  },
-  '.os-size-auto-observer>.os-resize-observer': {
-    width: '1000%',
-    height: '1000%',
-    minHeight: 1,
-    minWidth: 1,
-  },
-  '.os-resize-observer-item': {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    overflow: 'hidden',
-    zIndex: -1,
-    opacity: 0,
-    direction: 'ltr!important' as any as 'ltr',
-    flex: 'none!important' as any as 'none',
-  },
-  '.os-resize-observer-item-final': {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    transition: 'none!important' as any as 'none',
-    flex: 'none!important' as any as 'none',
-  },
-  '.os-resize-observer': {
-    animationDuration: '.001s',
-    animationName: `${hsResizeObserverDummyAnimation}`,
-  },
-  '.os-host-transition>.os-scrollbar, .os-host-transition>.os-scrollbar-corner': {
-    transition: 'opacity .3s,visibility .3s,top .3s,right .3s,bottom .3s,left .3s',
-  },
-  'html.os-html>.os-host>.os-scrollbar': {
-    position: 'absolute',
-    zIndex: 999999,
-  },
-  '.os-scrollbar, .os-scrollbar-corner': {
-    position: 'absolute',
-    opacity: 1,
-    zIndex: 1,
-  },
-  '.os-scrollbar-corner': {
-    bottom: 0,
-    right: 0,
-    height: 10,
-    width: 10,
-    backgroundColor: 'transparent',
-  },
-  '.os-scrollbar': {
-    pointerEvents: 'none',
-    padding: 2,
-    boxSizing: 'border-box',
-    background: 0,
-  },
-  '.os-scrollbar-track': {
-    pointerEvents: 'auto',
-    position: 'relative',
-    height: '100%',
-    width: '100%',
-    padding: '0!important' as any as 0,
-    border: '0!important' as any as 0,
-  },
-  '.os-scrollbar-handle': {
-    pointerEvents: 'auto',
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-  },
-  '.os-scrollbar-handle-off, .os-scrollbar-track-off': {
-    pointerEvents: 'none',
-  },
-  '.os-scrollbar.os-scrollbar-unusable, .os-scrollbar.os-scrollbar-unusable *': {
-    pointerEvents: 'none!important' as any as 'none',
-  },
-  '.os-scrollbar.os-scrollbar-unusable .os-scrollbar-handle': {
-    opacity: '0!important' as any as 0,
-  },
-  '.os-scrollbar-horizontal': {
-    bottom: 0,
-    left: 0,
-    right: 10,
-    height: 10,
-  },
-  '.os-scrollbar-vertical': {
-    top: 0,
-    right: 0,
-    bottom: 10,
-    width: 10,
-  },
-  '.os-host-rtl>.os-scrollbar-horizontal': {
-    right: 0,
-  },
-  '.os-host-rtl>.os-scrollbar-vertical': {
-    right: 'auto',
-    left: 0,
-  },
-  '.os-host-rtl>.os-scrollbar-corner': {
-    right: 'auto',
-    left: 0,
-  },
-  '.os-scrollbar-auto-hidden, .os-padding+.os-scrollbar-corner, .os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-corner, .os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal, .os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-corner, .os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical+.os-scrollbar-corner, .os-scrollbar-horizontal+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner, .os-scrollbar-horizontal.os-scrollbar-auto-hidden+.os-scrollbar-vertical.os-scrollbar-auto-hidden+.os-scrollbar-corner':
-    {
+export const getScrollAreaStyles: (theme: Theme) => CSSObject = (theme: Theme) =>
+  ({
+    '.os-size-observer,\n.os-size-observer-listener': {
+      direction: 'inherit',
+      pointerEvents: 'none',
+      overflow: 'hidden',
+      visibility: 'hidden',
+      boxSizing: 'border-box',
+    },
+    '.os-size-observer,\n.os-size-observer-listener,\n.os-size-observer-listener-item,\n.os-size-observer-listener-item-final':
+      {
+        writingMode: 'horizontal-tb',
+        position: 'absolute',
+        left: '0',
+        top: '0',
+      },
+    '.os-size-observer': {
+      zIndex: -1,
+      contain: 'strict',
+      display: 'flex',
+      flexDirection: 'row',
+      flexWrap: 'nowrap',
+      padding: 'inherit',
+      border: 'inherit',
+      boxSizing: 'inherit',
+      margin: '-133px',
+      top: '0',
+      right: '0',
+      bottom: '0',
+      left: '0',
+      transform: 'scale(0.1)',
+    },
+    '.os-size-observer::before': {
+      content: '""',
+      flex: 'none',
+      boxSizing: 'inherit',
+      padding: '10px',
+      width: '10px',
+      height: '10px',
+    },
+    '.os-size-observer-appear': {
+      animation: 'os-size-observer-appear-animation 1ms forwards',
+    },
+    '.os-size-observer-listener': {
+      boxSizing: 'border-box',
+      position: 'relative',
+      flex: 'auto',
+      padding: 'inherit',
+      border: 'inherit',
+      margin: '-133px',
+      transform: 'scale(10)',
+    },
+    '.os-size-observer-listener.ltr': { marginRight: '-266px', marginLeft: '0' },
+    '.os-size-observer-listener.rtl': { marginLeft: '-266px', marginRight: '0' },
+    '.os-size-observer-listener:empty::before': {
+      content: '""',
+      width: '100%',
+      height: '100%',
+    },
+    '.os-size-observer-listener:empty::before, .os-size-observer-listener > .os-size-observer-listener-item':
+      {
+        display: 'block',
+        position: 'relative',
+        padding: 'inherit',
+        border: 'inherit',
+        boxSizing: 'content-box',
+        flex: 'auto',
+      },
+    '.os-size-observer-listener-scroll': {
+      boxSizing: 'border-box',
+      display: 'flex',
+    },
+    '.os-size-observer-listener-item': {
+      right: '0',
+      bottom: '0',
+      overflow: 'hidden',
+      direction: 'ltr',
+      flex: 'none',
+    },
+    '.os-size-observer-listener-item-final': { transition: 'none' },
+    '@keyframes os-size-observer-appear-animation': {
+      from: { cursor: 'auto' },
+      to: { cursor: 'none' },
+    },
+    '.os-trinsic-observer': {
+      flex: 'none',
+      boxSizing: 'border-box',
+      position: 'relative',
+      maxWidth: '0px',
+      maxHeight: '1px',
+      padding: '0',
+      margin: '0',
+      border: 'none',
+      overflow: 'hidden',
+      zIndex: -1,
+      height: '0',
+      top: 'calc(100% + 1px)',
+      contain: 'strict',
+    },
+    '.os-trinsic-observer:not(:empty)': {
+      height: 'calc(100% + 1px)',
+      top: '-1px',
+    },
+    '.os-trinsic-observer:not(:empty) > .os-size-observer': {
+      width: '1000%',
+      height: '1000%',
+      minHeight: '1px',
+      minWidth: '1px',
+    },
+    '.os-environment': {
+      '--os-custom-prop': '-1',
+      position: 'fixed',
+      opacity: 0,
+      visibility: 'hidden',
+      overflow: 'scroll',
+      height: '200px',
+      width: '200px',
+      zIndex: 'var(--os-custom-prop)',
+    },
+    '.os-environment div': { width: '200%', height: '200%', margin: '10px 0' },
+    '.os-environment.os-environment-flexbox-glue': {
+      display: 'flex',
+      flexDirection: 'row',
+      flexWrap: 'nowrap',
+      height: 'auto',
+      width: 'auto',
+      minHeight: '200px',
+      minWidth: '200px',
+    },
+    '.os-environment.os-environment-flexbox-glue div': {
+      flex: 'auto',
+      width: 'auto',
+      height: 'auto',
+      maxHeight: '100%',
+      maxWidth: '100%',
+      margin: '0',
+    },
+    '.os-environment.os-environment-flexbox-glue-max': { maxHeight: '200px' },
+    '.os-environment.os-environment-flexbox-glue-max div': {
+      overflow: 'visible',
+    },
+    '.os-environment.os-environment-flexbox-glue-max div::before': {
+      content: '""',
+      display: 'block',
+      height: '999px',
+      width: '999px',
+    },
+    '.os-environment,\n[data-overlayscrollbars-viewport]': {
+      msOverflowStyle: 'scrollbar !important',
+    },
+    '[data-overlayscrollbars-initialize],\n[data-overlayscrollbars~=scrollbarHidden],\n[data-overlayscrollbars-viewport~=scrollbarHidden],\n.os-scrollbar-hidden.os-environment':
+      {
+        scrollbarWidth: 'none !important',
+      },
+    '[data-overlayscrollbars-initialize]::-webkit-scrollbar,\n[data-overlayscrollbars-initialize]::-webkit-scrollbar-corner,\n[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar,\n[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar-corner,\n[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,\n[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner,\n.os-scrollbar-hidden.os-environment::-webkit-scrollbar,\n.os-scrollbar-hidden.os-environment::-webkit-scrollbar-corner':
+      {
+        WebkitAppearance: 'none !important',
+        appearance: 'none !important',
+        display: 'none !important',
+        width: '0 !important',
+        height: '0 !important',
+      },
+    '[data-overlayscrollbars-initialize]': { overflow: 'auto' },
+    'html[data-overlayscrollbars],\nhtml.os-scrollbar-hidden,\nhtml.os-scrollbar-hidden > body': {
+      boxSizing: 'border-box',
+      margin: '0',
+      width: '100%',
+      height: '100%',
+    },
+    'html[data-overlayscrollbars] > body': { overflow: 'visible' },
+    '[data-overlayscrollbars~=host]': { position: 'relative' },
+    '[data-overlayscrollbars~=host],\n[data-overlayscrollbars-padding]': {
+      display: 'flex',
+      flexDirection: 'row !important',
+      flexWrap: 'nowrap !important',
+    },
+    '[data-overlayscrollbars-padding],\n[data-overlayscrollbars-viewport]': {
+      boxSizing: 'inherit',
+      position: 'relative',
+      flex: 'auto !important',
+      height: 'auto',
+      width: '100%',
+      padding: '0',
+      margin: '0',
+      border: 'none',
+      zIndex: 0,
+      overflow: 'hidden',
+    },
+    '[data-overlayscrollbars-viewport]': { '--os-vaw': '0', '--os-vah': '0' },
+    '[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]::before': {
+      content: '""',
+      position: 'absolute',
+      pointerEvents: 'none',
+      zIndex: -1,
+      minWidth: '1px',
+      minHeight: '1px',
+      width: 'var(--os-vaw)',
+      height: 'var(--os-vah)',
+    },
+    '[data-overlayscrollbars~=host],\n[data-overlayscrollbars~=viewport]': {
+      overflow: 'hidden',
+    },
+    '[data-overlayscrollbars~=overflowVisible],\n[data-overlayscrollbars-padding~=overflowVisible],\n[data-overlayscrollbars-viewport~=overflowVisible]':
+      {
+        overflow: 'visible',
+      },
+    '[data-overlayscrollbars-overflow-x=hidden]': {
+      overflowX: 'hidden',
+      overflowY: 'hidden',
+    },
+    '[data-overlayscrollbars-overflow-x=scroll]': { overflowX: 'scroll' },
+    '[data-overlayscrollbars-overflow-y=scroll]': { overflowY: 'scroll' },
+    '[data-overlayscrollbars~=scrollbarPressed],\n[data-overlayscrollbars~=scrollbarPressed] [data-overlayscrollbars-viewport]':
+      {
+        scrollBehavior: 'auto !important',
+      },
+    '[data-overlayscrollbars-content]': { boxSizing: 'inherit' },
+    '[data-overlayscrollbars-grid],\n[data-overlayscrollbars-grid] [data-overlayscrollbars-padding]':
+      {
+        display: 'grid',
+        gridTemplate: '1fr/1fr',
+      },
+    '[data-overlayscrollbars-grid] > [data-overlayscrollbars-padding],\n[data-overlayscrollbars-grid] > [data-overlayscrollbars-viewport],\n[data-overlayscrollbars-grid] > [data-overlayscrollbars-padding] > [data-overlayscrollbars-viewport]':
+      {
+        height: 'auto !important',
+        width: 'auto !important',
+      },
+    '.os-scrollbar': {
+      contain: ['size layout', 'size layout style'],
+      transition:
+        'opacity 0.15s, visibility 0.15s, top 0.15s, right 0.15s, bottom 0.15s, left 0.15s',
+      pointerEvents: 'none',
+      position: 'absolute',
       opacity: 0,
       visibility: 'hidden',
+      '--os-size': '0',
+      '--os-padding-perpendicular': '0',
+      '--os-padding-axis': '0',
+      '--os-track-border-radius': '0',
+      '--os-track-bg': 'none',
+      '--os-track-bg-hover': 'none',
+      '--os-track-bg-active': 'none',
+      '--os-track-border': 'none',
+      '--os-track-border-hover': 'none',
+      '--os-track-border-active': 'none',
+      '--os-handle-border-radius': '0',
+      '--os-handle-bg': 'none',
+      '--os-handle-bg-hover': 'none',
+      '--os-handle-bg-active': 'none',
+      '--os-handle-border': 'none',
+      '--os-handle-border-hover': 'none',
+      '--os-handle-border-active': 'none',
+      '--os-handle-min-size': '33px',
+      '--os-handle-max-size': 'none',
+      '--os-handle-perpendicular-size': '100%',
+      '--os-handle-perpendicular-size-hover': '100%',
+      '--os-handle-perpendicular-size-active': '100%',
+      '--os-handle-interactive-area-offset': '0',
+    },
+    'body > .os-scrollbar': { position: 'fixed', zIndex: 99999 },
+    '.os-scrollbar-transitionless': { transition: 'none' },
+    '.os-scrollbar-track': {
+      position: 'relative',
+      direction: 'ltr !important',
+      padding: '0 !important',
+      border: 'none !important',
+    },
+    '.os-scrollbar-handle': { position: 'absolute' },
+    '.os-scrollbar-track,\n.os-scrollbar-handle': {
       pointerEvents: 'none',
+      width: '100%',
+      height: '100%',
+    },
+    '.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,\n.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle':
+      {
+        pointerEvents: 'auto',
+        touchAction: 'none',
+      },
+    '.os-scrollbar-horizontal': {
+      bottom: '0',
+      left: '0',
+      padding: 'var(--os-padding-perpendicular) var(--os-padding-axis)',
+      right: 'var(--os-size)',
+      height: 'var(--os-size)',
+    },
+    '.os-scrollbar-vertical': {
+      top: '0',
+      right: '0',
+      padding: 'var(--os-padding-axis) var(--os-padding-perpendicular)',
+      bottom: 'var(--os-size)',
+      width: 'var(--os-size)',
+    },
+    '.os-scrollbar-rtl.os-scrollbar-horizontal': { right: '0' },
+    '.os-scrollbar-rtl.os-scrollbar-vertical': { right: 'auto', left: '0' },
+    '.os-scrollbar-visible,\n.os-scrollbar-interaction.os-scrollbar-visible': {
+      opacity: 1,
+      visibility: 'visible',
+    },
+    '.os-scrollbar-auto-hidden': { opacity: 0, visibility: 'hidden' },
+    '.os-scrollbar-unusable,\n.os-scrollbar-unusable *,\n.os-scrollbar-wheel,\n.os-scrollbar-wheel *':
+      {
+        pointerEvents: 'none !important',
+      },
+    '.os-scrollbar-unusable .os-scrollbar-handle': { opacity: '0 !important' },
+    '.os-scrollbar-horizontal .os-scrollbar-handle': {
+      bottom: '0',
+      minWidth: 'var(--os-handle-min-size)',
+      maxWidth: 'var(--os-handle-max-size)',
+      height: 'var(--os-handle-perpendicular-size)',
+      transition: 'opacity 0.15s, background-color 0.15s, border-color 0.15s, height 0.15s',
+    },
+    '.os-scrollbar-vertical .os-scrollbar-handle': {
+      right: '0',
+      minHeight: 'var(--os-handle-min-size)',
+      maxHeight: 'var(--os-handle-max-size)',
+      width: 'var(--os-handle-perpendicular-size)',
+      transition: 'opacity 0.15s, background-color 0.15s, border-color 0.15s, width 0.15s',
+    },
+    '.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle': {
+      right: 'auto',
+      left: '0',
     },
-  '.os-scrollbar-corner-resize-both': {
-    cursor: 'nwse-resize',
-  },
-  '.os-host-rtl>.os-scrollbar-corner-resize-both': {
-    cursor: 'nesw-resize',
-  },
-  '.os-scrollbar-corner-resize-horizontal': {
-    cursor: 'ew-resize',
-  },
-  '.os-scrollbar-corner-resize-vertical': {
-    cursor: 'ns-resize',
-  },
-  '.os-dragging .os-scrollbar-corner.os-scrollbar-corner-resize': {
-    cursor: 'default',
-  },
-  '.os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-vertical': {
-    top: 0,
-    bottom: 0,
-  },
-  '.os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal, .os-host-rtl.os-host-resize-disabled.os-host-scrollbar-vertical-hidden>.os-scrollbar-horizontal':
-    {
-      right: 0,
-      left: 0,
-    },
-  '.os-scrollbar:hover, .os-scrollbar-corner.os-scrollbar-corner-resize': {
-    opacity: '1!important' as any as 1,
-    visibility: 'visible!important' as any as 'visible',
-  },
-  '.os-scrollbar-corner.os-scrollbar-corner-resize': {
-    backgroundImage:
-      'linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0)  50%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.4) 100%)',
-    backgroundRepeat: 'no-repeat',
-    backgroundPosition: '100% 100%',
-    pointerEvents: 'auto!important' as any as 'auto',
-  },
-  '.os-host-rtl>.os-scrollbar-corner.os-scrollbar-corner-resize': {
-    transform: 'scale(-1,1)',
-  },
-  '.os-host-overflow': {
-    overflow: 'hidden!important' as any as 'hidden',
-  },
-  '.os-theme-dark.os-host-rtl>.os-scrollbar-horizontal': {
-    left: 10,
-    right: 0,
-  },
-  '.os-scrollbar.os-scrollbar-unusable': {
-    background: 0,
-  },
-  '.os-scrollbar>.os-scrollbar-track': {
-    background: 0,
-  },
-  '.os-scrollbar-horizontal>.os-scrollbar-track>.os-scrollbar-handle': {
-    minWidth: 30,
-  },
-  '.os-scrollbar-vertical>.os-scrollbar-track>.os-scrollbar-handle': {
-    minHeight: 30,
-  },
-  '.os-theme-dark.os-host-transition>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle': {
-    transition: 'background-color .3s',
-  },
-  '.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle, .os-scrollbar>.os-scrollbar-track': {
-    borderRadius: 10,
-  },
-  '.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle': {
-    background: theme.textMutedColor,
-    opacity: 0.5,
-  },
-  '.os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle': {
-    opacity: 0.6,
-  },
-  '.os-scrollbar-horizontal .os-scrollbar-handle:before, .os-scrollbar-vertical .os-scrollbar-handle:before':
-    {
-      content: "''",
+    '.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,\n.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl':
+      {
+        left: '0',
+        right: '0',
+      },
+    '.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,\n.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl':
+      {
+        top: '0',
+        bottom: '0',
+      },
+    '.os-scrollbar .os-scrollbar-track': {
+      border: 'var(--os-track-border)',
+      borderRadius: 'var(--os-track-border-radius)',
+      background: 'var(--os-track-bg)',
+      transition: 'opacity 0.15s, background-color 0.15s, border-color 0.15s',
+    },
+    '.os-scrollbar .os-scrollbar-track:hover': {
+      border: 'var(--os-track-border-hover)',
+      background: 'var(--os-track-bg-hover)',
+    },
+    '.os-scrollbar .os-scrollbar-track:active': {
+      border: 'var(--os-track-border-active)',
+      background: 'var(--os-track-bg-active)',
+    },
+    '.os-scrollbar .os-scrollbar-handle': {
+      border: 'var(--os-handle-border)',
+      borderRadius: 'var(--os-handle-border-radius)',
+      background: theme.textMutedColor,
+      opacity: 0.5,
+    },
+    '.os-scrollbar .os-scrollbar-handle:before': {
+      content: '""',
       position: 'absolute',
-      left: 0,
-      right: 0,
-      top: 0,
-      bottom: 0,
+      left: '0',
+      right: '0',
+      top: '0',
+      bottom: '0',
       display: 'block',
     },
-  '.os-theme-dark.os-host-scrollbar-horizontal-hidden>.os-scrollbar-horizontal .os-scrollbar-handle:before, .os-theme-dark.os-host-scrollbar-vertical-hidden>.os-scrollbar-vertical .os-scrollbar-handle:before':
-    {
-      display: 'none',
-    },
-  '.os-scrollbar-horizontal .os-scrollbar-handle:before': {
-    top: -6,
-    bottom: -2,
-  },
-  '.os-scrollbar-vertical .os-scrollbar-handle:before': {
-    left: -6,
-    right: -2,
-  },
-  '.os-host-rtl.os-scrollbar-vertical .os-scrollbar-handle:before': {
-    right: -6,
-    left: -2,
-  },
-});
+    '.os-scrollbar .os-scrollbar-handle:hover': {
+      border: 'var(--os-handle-border-hover)',
+      opacity: 0.6,
+    },
+    '.os-scrollbar .os-scrollbar-handle:active': {
+      border: 'var(--os-handle-border-active)',
+      background: 'var(--os-handle-bg-active)',
+    },
+    '.os-scrollbar-horizontal.os-scrollbar-rtl': {
+      left: 'var(--os-size)',
+      right: '0',
+    },
+    '.os-scrollbar-horizontal .os-scrollbar-handle:before': {
+      top: 'calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1)',
+      bottom: 'calc(var(--os-padding-perpendicular) * -1)',
+    },
+    '.os-scrollbar-horizontal:hover .os-scrollbar-handle': {
+      height: 'var(--os-handle-perpendicular-size-hover)',
+    },
+    '.os-scrollbar-horizontal:active .os-scrollbar-handle': {
+      height: 'var(--os-handle-perpendicular-size-active)',
+    },
+    '.os-scrollbar-vertical .os-scrollbar-handle:before': {
+      left: 'calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1)',
+      right: 'calc(var(--os-padding-perpendicular) * -1)',
+    },
+    '.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before': {
+      right:
+        'calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1)',
+      left: 'calc(var(--os-padding-perpendicular) * -1)',
+    },
+    '.os-scrollbar-vertical:hover .os-scrollbar-handle': {
+      width: 'var(--os-handle-perpendicular-size-hover)',
+    },
+    '.os-scrollbar-vertical:active .os-scrollbar-handle': {
+      width: 'var(--os-handle-perpendicular-size-active)',
+    },
+    '[data-overlayscrollbars~=updating] > .os-scrollbar,\n.os-theme-none.os-scrollbar': {
+      display: 'none !important',
+    },
+    '.os-theme-dark,\n.os-theme-light': {
+      boxSizing: 'border-box',
+      '--os-size': '10px',
+      '--os-padding-perpendicular': '2px',
+      '--os-padding-axis': '2px',
+      '--os-track-border-radius': '10px',
+      '--os-handle-interactive-area-offset': '4px',
+      '--os-handle-border-radius': '10px',
+    },
+    '.os-theme-dark': {
+      '--os-handle-bg': 'rgba(0, 0, 0, 0.44)',
+      '--os-handle-bg-hover': 'rgba(0, 0, 0, 0.55)',
+      '--os-handle-bg-active': 'rgba(0, 0, 0, 0.66)',
+    },
+    '.os-theme-light': {
+      '--os-handle-bg': 'rgba(255, 255, 255, 0.44)',
+      '--os-handle-bg-hover': 'rgba(255, 255, 255, 0.55)',
+      '--os-handle-bg-active': 'rgba(255, 255, 255, 0.66)',
+    },
+    '.os-no-css-vars.os-theme-dark.os-scrollbar .os-scrollbar-handle, .os-no-css-vars.os-theme-light.os-scrollbar .os-scrollbar-handle':
+      {
+        borderRadius: '10px',
+      },
+    '.os-no-css-vars.os-theme-dark.os-scrollbar .os-scrollbar-track, .os-no-css-vars.os-theme-light.os-scrollbar .os-scrollbar-track':
+      {
+        borderRadius: '10px',
+      },
+    '.os-no-css-vars.os-theme-dark.os-scrollbar-horizontal, .os-no-css-vars.os-theme-light.os-scrollbar-horizontal':
+      {
+        padding: '2px 2px',
+        right: '10px',
+        height: '10px',
+      },
+    '.os-no-css-vars.os-theme-dark.os-scrollbar-horizontal.os-scrollbar-rtl, .os-no-css-vars.os-theme-light.os-scrollbar-horizontal.os-scrollbar-rtl':
+      {
+        left: '10px',
+        right: '0',
+      },
+    '.os-no-css-vars.os-theme-dark.os-scrollbar-horizontal .os-scrollbar-handle, .os-no-css-vars.os-theme-light.os-scrollbar-horizontal .os-scrollbar-handle':
+      {
+        minWidth: '33px',
+        maxWidth: 'none',
+      },
+    '.os-no-css-vars.os-theme-dark.os-scrollbar-horizontal .os-scrollbar-handle:before, .os-no-css-vars.os-theme-light.os-scrollbar-horizontal .os-scrollbar-handle:before':
+      {
+        top: 'calc((\n                2px + 4px\n              ) * -1)',
+        bottom: 'calc(2px * -1)',
+      },
+    '.os-no-css-vars.os-theme-dark.os-scrollbar-vertical, .os-no-css-vars.os-theme-light.os-scrollbar-vertical':
+      {
+        padding: '2px 2px',
+        bottom: '10px',
+        width: '10px',
+      },
+    '.os-no-css-vars.os-theme-dark.os-scrollbar-vertical .os-scrollbar-handle, .os-no-css-vars.os-theme-light.os-scrollbar-vertical .os-scrollbar-handle':
+      {
+        minHeight: '33px',
+        maxHeight: 'none',
+      },
+    '.os-no-css-vars.os-theme-dark.os-scrollbar-vertical .os-scrollbar-handle:before, .os-no-css-vars.os-theme-light.os-scrollbar-vertical .os-scrollbar-handle:before':
+      {
+        left: 'calc((\n                2px + 4px\n              ) * -1)',
+        right: 'calc(2px * -1)',
+      },
+    '.os-no-css-vars.os-theme-dark.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before, .os-no-css-vars.os-theme-light.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before':
+      {
+        right: 'calc((\n              2px + 4px\n            ) * -1)',
+        left: 'calc(2px * -1)',
+      },
+    '.os-no-css-vars.os-theme-dark .os-scrollbar-handle': {
+      background: 'rgba(0, 0, 0, 0.44)',
+    },
+    '.os-no-css-vars.os-theme-dark:hover .os-scrollbar-handle': {
+      background: 'rgba(0, 0, 0, 0.55)',
+    },
+    '.os-no-css-vars.os-theme-dark:active .os-scrollbar-handle': {
+      background: 'rgba(0, 0, 0, 0.66)',
+    },
+    '.os-no-css-vars.os-theme-light .os-scrollbar-handle': {
+      background: 'rgba(255, 255, 255, 0.44)',
+    },
+    '.os-no-css-vars.os-theme-light:hover .os-scrollbar-handle': {
+      background: 'rgba(255, 255, 255, 0.55)',
+    },
+    '.os-no-css-vars.os-theme-light:active .os-scrollbar-handle': {
+      background: 'rgba(255, 255, 255, 0.66)',
+    },
+  } as any as CSSObject);
 
 const GlobalScrollAreaStyles = () => <Global styles={getScrollAreaStyles} />;
 
diff --git a/code/ui/components/src/ScrollArea/OverlayScrollbars.tsx b/code/ui/components/src/ScrollArea/OverlayScrollbars.tsx
index a2514a27a51a..2bd638ffc345 100644
--- a/code/ui/components/src/ScrollArea/OverlayScrollbars.tsx
+++ b/code/ui/components/src/ScrollArea/OverlayScrollbars.tsx
@@ -1,90 +1,30 @@
-import type { HTMLAttributes, FC } from 'react';
+import type { FC } from 'react';
 import React, { useRef, useEffect } from 'react';
-import OverlayScrollbars from 'overlayscrollbars';
+import type { UseOverlayScrollbarsParams } from 'overlayscrollbars-react';
 
-interface OverlayScrollbarsComponentProps extends HTMLAttributes<HTMLDivElement> {
-  children?: any;
-  options?: OverlayScrollbars.Options;
-  extensions?: OverlayScrollbars.Extensions;
-}
+import { useOverlayScrollbars } from 'overlayscrollbars-react';
 
-/**
- * Using overlayscrollbars-react component results use the esm modules
- * which doesn't go through babel leading to IE 11 uncompatibility
- * A PR is submitted that may fix this:
- * https://github.com/KingSora/OverlayScrollbars/pull/218
- * */
-
-export const OverlayScrollbarsComponent: FC<OverlayScrollbarsComponentProps> = ({
+export const OverlayScrollbarsComponent: FC<{
+  options: UseOverlayScrollbarsParams['options'];
+  className?: string;
+}> = ({
   options = {},
-  extensions,
+
   className,
   children,
-  ...rest
 }) => {
-  const osTargetRef = useRef<HTMLDivElement>();
-  const osInstance = useRef<OverlayScrollbars>();
-
-  useEffect(() => {
-    osInstance.current = OverlayScrollbars(osTargetRef.current, options, extensions);
-    mergeHostClassNames(osInstance.current, className);
-    return () => {
-      if (OverlayScrollbars.valid(osInstance.current)) {
-        osInstance.current.destroy();
-        osInstance.current = null;
-      }
-    };
-  }, []);
+  const ref = useRef<HTMLDivElement>();
+  const [initialize] = useOverlayScrollbars({ options });
 
   useEffect(() => {
-    if (OverlayScrollbars.valid(osInstance.current)) {
-      osInstance.current.options(options);
-    }
-  }, [options]);
-
-  useEffect(() => {
-    if (OverlayScrollbars.valid(osInstance.current)) {
-      mergeHostClassNames(osInstance.current, className);
-    }
-  }, [className]);
+    initialize(ref.current);
+  }, [initialize]);
 
   return (
-    <div className="os-host" {...rest} ref={osTargetRef}>
-      <div className="os-resize-observer-host" />
-      <div className="os-padding">
-        <div className="os-viewport">
-          <div className="os-content">{children}</div>
-        </div>
-      </div>
-      <div className="os-scrollbar os-scrollbar-horizontal ">
-        <div className="os-scrollbar-track">
-          <div className="os-scrollbar-handle" />
-        </div>
-      </div>
-      <div className="os-scrollbar os-scrollbar-vertical">
-        <div className="os-scrollbar-track">
-          <div className="os-scrollbar-handle" />
-        </div>
-      </div>
-      <div className="os-scrollbar-corner" />
+    <div className={className} ref={ref}>
+      {children}
     </div>
   );
 };
 
-function mergeHostClassNames(osInstance: OverlayScrollbars, className: string) {
-  if (OverlayScrollbars.valid(osInstance)) {
-    const { host } = osInstance.getElements();
-    const regex = new RegExp(
-      `(^os-host([-_].+|)$)|${osInstance.options().className.replace(/\s/g, '$|')}$`,
-      'g'
-    );
-    const osClassNames = host.className
-      .split(' ')
-      .filter((name) => name.match(regex))
-      .join(' ');
-
-    host.className = `${osClassNames} ${className || ''}`;
-  }
-}
-
 export default OverlayScrollbarsComponent;
diff --git a/code/ui/components/src/ScrollArea/ScrollArea.stories.tsx b/code/ui/components/src/ScrollArea/ScrollArea.stories.tsx
index 85d3e8aa7522..e4a7a09e7dc2 100644
--- a/code/ui/components/src/ScrollArea/ScrollArea.stories.tsx
+++ b/code/ui/components/src/ScrollArea/ScrollArea.stories.tsx
@@ -51,9 +51,11 @@ export const Vertical = () => (
 
 export const Horizontal = () => (
   <ScrollArea horizontal>
-    {list((i) => (
-      <Block key={i}>{i}</Block>
-    ))}
+    <div style={{ padding: 5 }}>
+      {list((i) => (
+        <Block key={i}>{i}</Block>
+      ))}
+    </div>
   </ScrollArea>
 );
 
diff --git a/code/ui/components/src/ScrollArea/ScrollArea.tsx b/code/ui/components/src/ScrollArea/ScrollArea.tsx
index 46d989742b10..02cce4bdd8f5 100644
--- a/code/ui/components/src/ScrollArea/ScrollArea.tsx
+++ b/code/ui/components/src/ScrollArea/ScrollArea.tsx
@@ -8,7 +8,10 @@ const OverlayScrollbars = lazy(() => import('./OverlayScrollbars'));
 const Scroller: FC<ScrollAreaProps> = ({ horizontal, vertical, ...props }) => (
   <Suspense fallback={<div {...props} />}>
     <GlobalScrollAreaStyles />
-    <OverlayScrollbars options={{ scrollbars: { autoHide: 'leave' } }} {...props} />
+    <OverlayScrollbars
+      options={{ scrollbars: { autoHide: 'leave', visibility: 'auto' } }}
+      {...props}
+    />
   </Suspense>
 );
 
diff --git a/code/yarn.lock b/code/yarn.lock
index b4a8d2e1cdfd..2513cf877d8b 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -2908,7 +2908,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@gar/promisify@npm:^1.0.1, @gar/promisify@npm:^1.1.3":
+"@gar/promisify@npm:^1.1.3":
   version: 1.1.3
   resolution: "@gar/promisify@npm:1.1.3"
   checksum: 0b3c9958d3cd17f4add3574975e3115ae05dc7f1298a60810414b16f6f558c137b5fb3cd3905df380bacfd955ec13f67c1e6710cbb5c246a7e8d65a8289b2bff
@@ -4158,16 +4158,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@npmcli/fs@npm:^1.0.0":
-  version: 1.1.1
-  resolution: "@npmcli/fs@npm:1.1.1"
-  dependencies:
-    "@gar/promisify": ^1.0.1
-    semver: ^7.3.5
-  checksum: 4143c317a7542af9054018b71601e3c3392e6704e884561229695f099a71336cbd580df9a9ffb965d0024bf0ed593189ab58900fd1714baef1c9ee59c738c3e2
-  languageName: node
-  linkType: hard
-
 "@npmcli/fs@npm:^2.1.0":
   version: 2.1.2
   resolution: "@npmcli/fs@npm:2.1.2"
@@ -4239,16 +4229,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@npmcli/move-file@npm:^1.0.1":
-  version: 1.1.2
-  resolution: "@npmcli/move-file@npm:1.1.2"
-  dependencies:
-    mkdirp: ^1.0.4
-    rimraf: ^3.0.2
-  checksum: 02e946f3dafcc6743132fe2e0e2b585a96ca7265653a38df5a3e53fcf26c7c7a57fc0f861d7c689a23fdb6d6836c7eea5050c8086abf3c994feb2208d1514ff0
-  languageName: node
-  linkType: hard
-
 "@npmcli/move-file@npm:^2.0.0":
   version: 2.0.1
   resolution: "@npmcli/move-file@npm:2.0.1"
@@ -6277,7 +6257,8 @@ __metadata:
     "@types/util-deprecate": ^1.0.0
     css: ^3.0.0
     memoizerific: ^1.11.3
-    overlayscrollbars: ^1.13.1
+    overlayscrollbars: ^2.2.0
+    overlayscrollbars-react: ^0.5.0
     polished: ^4.2.2
     prettier: ^2.8.0
     react-popper-tooltip: ^4.4.2
@@ -6388,7 +6369,7 @@ __metadata:
     jest-os-detection: ^1.3.1
     jest-specific-snapshot: ^7.0.0
     lodash: ^4.17.21
-    node-fetch: ^2.6.7
+    node-fetch: ^3.3.1
     open: ^8.4.0
     pretty-hrtime: ^1.0.3
     prompts: ^2.4.0
@@ -7414,7 +7395,7 @@ __metadata:
     lerna: ^6.4.0
     lint-staged: ^10.5.4
     lodash: ^4.17.21
-    node-gyp: ^8.4.0
+    node-gyp: ^9.3.1
     nx: 16.2.1
     nx-cloud: 16.0.5
     prettier: 2.8.0
@@ -8132,13 +8113,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tootallnate/once@npm:1":
-  version: 1.1.2
-  resolution: "@tootallnate/once@npm:1.1.2"
-  checksum: 8fe4d006e90422883a4fa9339dd05a83ff626806262e1710cee5758d493e8cbddf2db81c0e4690636dc840b02c9fda62877866ea774ebd07c1777ed5fafbdec6
-  languageName: node
-  linkType: hard
-
 "@tootallnate/once@npm:2":
   version: 2.0.0
   resolution: "@tootallnate/once@npm:2.0.0"
@@ -9981,7 +9955,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"abbrev@npm:1, abbrev@npm:^1.0.0":
+"abbrev@npm:^1.0.0":
   version: 1.1.1
   resolution: "abbrev@npm:1.1.1"
   checksum: 3f762677702acb24f65e813070e306c61fafe25d4b2583f9dfc935131f774863f3addd5741572ed576bd69cabe473c5af18e1e108b829cb7b6b4747884f726e6
@@ -10133,7 +10107,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"agentkeepalive@npm:^4.1.3, agentkeepalive@npm:^4.2.1":
+"agentkeepalive@npm:^4.2.1":
   version: 4.3.0
   resolution: "agentkeepalive@npm:4.3.0"
   dependencies:
@@ -11992,32 +11966,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cacache@npm:^15.2.0":
-  version: 15.3.0
-  resolution: "cacache@npm:15.3.0"
-  dependencies:
-    "@npmcli/fs": ^1.0.0
-    "@npmcli/move-file": ^1.0.1
-    chownr: ^2.0.0
-    fs-minipass: ^2.0.0
-    glob: ^7.1.4
-    infer-owner: ^1.0.4
-    lru-cache: ^6.0.0
-    minipass: ^3.1.1
-    minipass-collect: ^1.0.2
-    minipass-flush: ^1.0.5
-    minipass-pipeline: ^1.2.2
-    mkdirp: ^1.0.3
-    p-map: ^4.0.0
-    promise-inflight: ^1.0.1
-    rimraf: ^3.0.2
-    ssri: ^8.0.1
-    tar: ^6.0.2
-    unique-filename: ^1.1.1
-  checksum: 886fcc0acc4f6fd5cd142d373d8276267bc6d655d7c4ce60726fbbec10854de3395ee19bbf9e7e73308cdca9fdad0ad55060ff3bd16c6d4165c5b8d21515e1d8
-  languageName: node
-  linkType: hard
-
 "cacache@npm:^16.1.0":
   version: 16.1.3
   resolution: "cacache@npm:16.1.3"
@@ -13593,6 +13541,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"data-uri-to-buffer@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "data-uri-to-buffer@npm:4.0.1"
+  checksum: 20a6b93107597530d71d4cb285acee17f66bcdfc03fd81040921a81252f19db27588d87fc8fc69e1950c55cfb0bf8ae40d0e5e21d907230813eb5d5a7f9eb45b
+  languageName: node
+  linkType: hard
+
 "data-urls@npm:^3.0.1, data-urls@npm:^3.0.2":
   version: 3.0.2
   resolution: "data-urls@npm:3.0.2"
@@ -14632,7 +14587,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"encoding@npm:^0.1.12, encoding@npm:^0.1.13":
+"encoding@npm:^0.1.13":
   version: 0.1.13
   resolution: "encoding@npm:0.1.13"
   dependencies:
@@ -16158,6 +16113,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fetch-blob@npm:^3.1.2, fetch-blob@npm:^3.1.4":
+  version: 3.2.0
+  resolution: "fetch-blob@npm:3.2.0"
+  dependencies:
+    node-domexception: ^1.0.0
+    web-streams-polyfill: ^3.0.3
+  checksum: 60054bf47bfa10fb0ba6cb7742acec2f37c1f56344f79a70bb8b1c48d77675927c720ff3191fa546410a0442c998d27ab05e9144c32d530d8a52fbe68f843b69
+  languageName: node
+  linkType: hard
+
 "fetch-retry@npm:^5.0.2":
   version: 5.0.6
   resolution: "fetch-retry@npm:5.0.6"
@@ -16544,6 +16509,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"formdata-polyfill@npm:^4.0.10":
+  version: 4.0.10
+  resolution: "formdata-polyfill@npm:4.0.10"
+  dependencies:
+    fetch-blob: ^3.1.2
+  checksum: 5392ec484f9ce0d5e0d52fb5a78e7486637d516179b0eb84d81389d7eccf9ca2f663079da56f761355c0a65792810e3b345dc24db9a8bbbcf24ef3c8c88570c6
+  languageName: node
+  linkType: hard
+
 "formik@npm:^2.2.9":
   version: 2.4.0
   resolution: "formik@npm:2.4.0"
@@ -18052,17 +18026,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"http-proxy-agent@npm:^4.0.1":
-  version: 4.0.1
-  resolution: "http-proxy-agent@npm:4.0.1"
-  dependencies:
-    "@tootallnate/once": 1
-    agent-base: 6
-    debug: 4
-  checksum: 4fa4774d65b5331814b74ac05cefea56854fc0d5989c80b13432c1b0d42a14c9f4342ca3ad9f0359a52e78da12b1744c9f8a28e50042136ea9171675d972a5fd
-  languageName: node
-  linkType: hard
-
 "http-proxy-agent@npm:^5.0.0":
   version: 5.0.0
   resolution: "http-proxy-agent@npm:5.0.0"
@@ -21636,30 +21599,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"make-fetch-happen@npm:^9.1.0":
-  version: 9.1.0
-  resolution: "make-fetch-happen@npm:9.1.0"
-  dependencies:
-    agentkeepalive: ^4.1.3
-    cacache: ^15.2.0
-    http-cache-semantics: ^4.1.0
-    http-proxy-agent: ^4.0.1
-    https-proxy-agent: ^5.0.0
-    is-lambda: ^1.0.1
-    lru-cache: ^6.0.0
-    minipass: ^3.1.3
-    minipass-collect: ^1.0.2
-    minipass-fetch: ^1.3.2
-    minipass-flush: ^1.0.5
-    minipass-pipeline: ^1.2.4
-    negotiator: ^0.6.2
-    promise-retry: ^2.0.1
-    socks-proxy-agent: ^6.0.0
-    ssri: ^8.0.0
-  checksum: 2c737faf6a7f67077679da548b5bfeeef890595bf8c4323a1f76eae355d27ebb33dcf9cf1a673f944cf2f2a7cbf4e2b09f0a0a62931737728f210d902c6be966
-  languageName: node
-  linkType: hard
-
 "makeerror@npm:1.0.12":
   version: 1.0.12
   resolution: "makeerror@npm:1.0.12"
@@ -22791,21 +22730,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minipass-fetch@npm:^1.3.2":
-  version: 1.4.1
-  resolution: "minipass-fetch@npm:1.4.1"
-  dependencies:
-    encoding: ^0.1.12
-    minipass: ^3.1.0
-    minipass-sized: ^1.0.3
-    minizlib: ^2.0.0
-  dependenciesMeta:
-    encoding:
-      optional: true
-  checksum: a43da7401cd7c4f24b993887d41bd37d097356083b0bb836fd655916467463a1e6e9e553b2da4fcbe8745bf23d40c8b884eab20745562199663b3e9060cd8e7a
-  languageName: node
-  linkType: hard
-
 "minipass-fetch@npm:^2.0.3":
   version: 2.1.2
   resolution: "minipass-fetch@npm:2.1.2"
@@ -22855,7 +22779,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minipass-pipeline@npm:^1.2.2, minipass-pipeline@npm:^1.2.4":
+"minipass-pipeline@npm:^1.2.4":
   version: 1.2.4
   resolution: "minipass-pipeline@npm:1.2.4"
   dependencies:
@@ -22873,7 +22797,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minipass@npm:^3.0.0, minipass@npm:^3.1.0, minipass@npm:^3.1.1, minipass@npm:^3.1.3, minipass@npm:^3.1.6":
+"minipass@npm:^3.0.0, minipass@npm:^3.1.1, minipass@npm:^3.1.6":
   version: 3.3.6
   resolution: "minipass@npm:3.3.6"
   dependencies:
@@ -22903,7 +22827,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minizlib@npm:^2.0.0, minizlib@npm:^2.1.1, minizlib@npm:^2.1.2":
+"minizlib@npm:^2.1.1, minizlib@npm:^2.1.2":
   version: 2.1.2
   resolution: "minizlib@npm:2.1.2"
   dependencies:
@@ -23162,7 +23086,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"negotiator@npm:0.6.3, negotiator@npm:^0.6.2, negotiator@npm:^0.6.3":
+"negotiator@npm:0.6.3, negotiator@npm:^0.6.3":
   version: 0.6.3
   resolution: "negotiator@npm:0.6.3"
   checksum: 3ec9fd413e7bf071c937ae60d572bc67155262068ed522cf4b3be5edbe6ddf67d095ec03a3a14ebf8fc8e95f8e1d61be4869db0dbb0de696f6b837358bd43fc2
@@ -23294,6 +23218,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-domexception@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "node-domexception@npm:1.0.0"
+  checksum: 5e5d63cda29856402df9472335af4bb13875e1927ad3be861dc5ebde38917aecbf9ae337923777af52a48c426b70148815e890a5d72760f1b4d758cc671b1a2b
+  languageName: node
+  linkType: hard
+
 "node-fetch-native@npm:^1.0.2":
   version: 1.1.1
   resolution: "node-fetch-native@npm:1.1.1"
@@ -23329,6 +23260,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-fetch@npm:^3.3.1":
+  version: 3.3.1
+  resolution: "node-fetch@npm:3.3.1"
+  dependencies:
+    data-uri-to-buffer: ^4.0.0
+    fetch-blob: ^3.1.4
+    formdata-polyfill: ^4.0.10
+  checksum: 78671bffed741a2f3ccb15588a42fd7e9db2bdc9f99f9f584e0c749307f9603d961692f0877d853b28a4d1375ab2253b19978dd3bfc0c3189b42adc340bef927
+  languageName: node
+  linkType: hard
+
 "node-forge@npm:^1, node-forge@npm:^1.3.1":
   version: 1.3.1
   resolution: "node-forge@npm:1.3.1"
@@ -23347,27 +23289,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-gyp@npm:^8.4.0":
-  version: 8.4.1
-  resolution: "node-gyp@npm:8.4.1"
-  dependencies:
-    env-paths: ^2.2.0
-    glob: ^7.1.4
-    graceful-fs: ^4.2.6
-    make-fetch-happen: ^9.1.0
-    nopt: ^5.0.0
-    npmlog: ^6.0.0
-    rimraf: ^3.0.2
-    semver: ^7.3.5
-    tar: ^6.1.2
-    which: ^2.0.2
-  bin:
-    node-gyp: bin/node-gyp.js
-  checksum: 80ef333b3a882eb6a2695a8e08f31d618f4533eff192864e4a3a16b67ff0abc9d8c1d5fac0395550ec699326b9248c5e2b3be178492f7f4d1ccf97d2cf948021
-  languageName: node
-  linkType: hard
-
-"node-gyp@npm:^9.0.0, node-gyp@npm:latest":
+"node-gyp@npm:^9.0.0, node-gyp@npm:^9.3.1, node-gyp@npm:latest":
   version: 9.3.1
   resolution: "node-gyp@npm:9.3.1"
   dependencies:
@@ -23443,17 +23365,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nopt@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "nopt@npm:5.0.0"
-  dependencies:
-    abbrev: 1
-  bin:
-    nopt: bin/nopt.js
-  checksum: fc5c4f07155cb455bf5fc3dd149fac421c1a40fd83c6bfe83aa82b52f02c17c5e88301321318adaa27611c8a6811423d51d29deaceab5fa158b585a61a551061
-  languageName: node
-  linkType: hard
-
 "nopt@npm:^6.0.0":
   version: 6.0.0
   resolution: "nopt@npm:6.0.0"
@@ -24283,10 +24194,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"overlayscrollbars@npm:^1.13.1":
-  version: 1.13.3
-  resolution: "overlayscrollbars@npm:1.13.3"
-  checksum: 2eea68189aebf772282305ff83c90a6caa20b7e0f2b0dd792a017a6226c68a2db756665c59a8a40b1de53e83c3918c9a13dc35875b6e1d56ff08237cb6f57699
+"overlayscrollbars-react@npm:^0.5.0":
+  version: 0.5.0
+  resolution: "overlayscrollbars-react@npm:0.5.0"
+  peerDependencies:
+    overlayscrollbars: ^2.0.0
+    react: ">=16.8.0"
+  checksum: 2d70c41e8f171c0e701825b17a3184e403f8173a7124112834feec8f90d3633337acfffdeaf41583b2f948191b855d8a468ebd0990d8437a792ca4899801abd0
+  languageName: node
+  linkType: hard
+
+"overlayscrollbars@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "overlayscrollbars@npm:2.2.0"
+  checksum: 25a2b5cc6c5cd5276bb82b7338ceed307815c3d0ee8ea8053f4b19898189b955d00da4f03e1615b8e330fdf61275e02791818937901fff17cc5462d7bb9b8edc
   languageName: node
   linkType: hard
 
@@ -28314,17 +28235,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"socks-proxy-agent@npm:^6.0.0":
-  version: 6.2.1
-  resolution: "socks-proxy-agent@npm:6.2.1"
-  dependencies:
-    agent-base: ^6.0.2
-    debug: ^4.3.3
-    socks: ^2.6.2
-  checksum: d75c1cf1fdd7f8309a43a77f84409b793fc0f540742ef915154e70ac09a08b0490576fe85d4f8d68bbf80e604a62957a17ab5ef50d312fe1442b0ab6f8f6e6f6
-  languageName: node
-  linkType: hard
-
 "socks-proxy-agent@npm:^7.0.0":
   version: 7.0.0
   resolution: "socks-proxy-agent@npm:7.0.0"
@@ -28698,15 +28608,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ssri@npm:^8.0.0, ssri@npm:^8.0.1":
-  version: 8.0.1
-  resolution: "ssri@npm:8.0.1"
-  dependencies:
-    minipass: ^3.1.1
-  checksum: 5cfae216ae02dcd154d1bbed2d0a60038a4b3a2fcaac3c7e47401ff4e058e551ee74cfdba618871bf168cd583db7b8324f94af6747d4303b73cd4c3f6dc5c9c2
-  languageName: node
-  linkType: hard
-
 "stack-utils@npm:^2.0.2, stack-utils@npm:^2.0.3":
   version: 2.0.6
   resolution: "stack-utils@npm:2.0.6"
@@ -29407,7 +29308,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tar@npm:^6.0.2, tar@npm:^6.1.11, tar@npm:^6.1.13, tar@npm:^6.1.2":
+"tar@npm:^6.1.11, tar@npm:^6.1.13, tar@npm:^6.1.2":
   version: 6.1.15
   resolution: "tar@npm:6.1.15"
   dependencies:
@@ -30477,15 +30378,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unique-filename@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "unique-filename@npm:1.1.1"
-  dependencies:
-    unique-slug: ^2.0.0
-  checksum: d005bdfaae6894da8407c4de2b52f38b3c58ec86e79fc2ee19939da3085374413b073478ec54e721dc8e32b102cf9e50d0481b8331abdc62202e774b789ea874
-  languageName: node
-  linkType: hard
-
 "unique-filename@npm:^2.0.0":
   version: 2.0.1
   resolution: "unique-filename@npm:2.0.1"
@@ -30504,15 +30396,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unique-slug@npm:^2.0.0":
-  version: 2.0.2
-  resolution: "unique-slug@npm:2.0.2"
-  dependencies:
-    imurmurhash: ^0.1.4
-  checksum: 9eabc51680cf0b8b197811a48857e41f1364b25362300c1ff636c0eca5ec543a92a38786f59cf0697e62c6f814b11ecbe64e8093db71246468a1f03b80c83970
-  languageName: node
-  linkType: hard
-
 "unique-slug@npm:^3.0.0":
   version: 3.0.0
   resolution: "unique-slug@npm:3.0.0"
@@ -31626,6 +31509,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"web-streams-polyfill@npm:^3.0.3":
+  version: 3.2.1
+  resolution: "web-streams-polyfill@npm:3.2.1"
+  checksum: 70ed6b5708e14afa2ab699221ea197d7c68ec0c8274bbe0181aecc5ba636ca27cbd383d2049f0eb9d529e738f5c088825502b317f3df24d18a278e4cc9a10e8b
+  languageName: node
+  linkType: hard
+
 "webidl-conversions@npm:^3.0.0":
   version: 3.0.1
   resolution: "webidl-conversions@npm:3.0.1"