diff --git a/js_modules/dagster-ui/packages/app-oss/package.json b/js_modules/dagster-ui/packages/app-oss/package.json
index f6d3fb76365a6..b9d8ff82d924a 100644
--- a/js_modules/dagster-ui/packages/app-oss/package.json
+++ b/js_modules/dagster-ui/packages/app-oss/package.json
@@ -12,6 +12,7 @@
     "@dagster-io/ui-components": "workspace:*",
     "@dagster-io/ui-core": "workspace:*",
     "@rive-app/react-canvas": "^3.0.34",
+    "@types/styled-components": "^5.1.26",
     "eslint-config-next": "^13.5.3",
     "graphql": "^16.8.1",
     "next": "^14.2.10",
@@ -22,8 +23,7 @@
     "react-router-dom": "^5.3.0",
     "react-router-dom-v5-compat": "^6.3.0",
     "recoil": "^0.7.7",
-    "styled-components": "^6",
-    "stylis": "^4",
+    "styled-components": "^5.3.3",
     "uuid": "^9.0.0",
     "validator": "^13.7.0",
     "web-vitals": "^2.1.3"
@@ -33,7 +33,7 @@
     "@types/jest": "^29.5.11",
     "@types/node": "^16.11.20",
     "@types/react": "^18.3.9",
-    "@types/react-dom": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/uuid": "^8.3.4",
     "@types/validator": "^13",
     "@types/webpack-bundle-analyzer": "^4",
diff --git a/js_modules/dagster-ui/packages/ui-components/package.json b/js_modules/dagster-ui/packages/ui-components/package.json
index ca29def1f1bc4..8e881f124f212 100644
--- a/js_modules/dagster-ui/packages/ui-components/package.json
+++ b/js_modules/dagster-ui/packages/ui-components/package.json
@@ -30,8 +30,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
-    "styled-components": "^6",
-    "stylis": "^4"
+    "styled-components": "^5.3.3"
   },
   "dependencies": {
     "@react-hook/resize-observer": "^1.2.6",
@@ -78,8 +77,9 @@
     "@types/mdx-js__react": "^1",
     "@types/react": "^18.3.9",
     "@types/react-dates": "^21.8.0",
-    "@types/react-dom": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/react-is": "^18.3.0",
+    "@types/styled-components": "^5.1.26",
     "@types/testing-library__jest-dom": "^5.14.2",
     "babel-jest": "^27.4.6",
     "babel-loader": "^9.1.2",
diff --git a/js_modules/dagster-ui/packages/ui-components/rollup.config.js b/js_modules/dagster-ui/packages/ui-components/rollup.config.js
index c20bcb32acb23..6b7a486ea7b9d 100644
--- a/js_modules/dagster-ui/packages/ui-components/rollup.config.js
+++ b/js_modules/dagster-ui/packages/ui-components/rollup.config.js
@@ -32,6 +32,7 @@ const sharedExternals = [
   '@blueprintjs/core',
   '@blueprintjs/popover2',
   '@blueprintjs/select',
+  '@tanstack/react-virtual',
   'react',
   'react-dom',
   'react-is',
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/BaseTag.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/BaseTag.tsx
index 18d44e1f97340..fade0b5caf56c 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/BaseTag.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/BaseTag.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import {Colors} from './Color';
 import {IconWrapper} from './Icon';
 import {SpinnerWrapper} from './Spinner';
+
 interface Props {
   fillColor?: string;
   textColor?: string;
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/ButtonLink.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/ButtonLink.tsx
index 5e12d576d9781..193e1545566a3 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/ButtonLink.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/ButtonLink.tsx
@@ -13,13 +13,6 @@ type Colors =
 
 type Underline = 'never' | 'always' | 'hover';
 
-type Props = Omit<React.HTMLProps<HTMLButtonElement>, 'color'> & {
-  color?: Colors;
-  disabled?: boolean;
-  underline?: Underline;
-  children?: React.ReactNode;
-};
-
 const fontColor = (color: Colors) => {
   if (typeof color === 'string') {
     return css`
@@ -56,9 +49,14 @@ const textDecoration = (underline: Underline) => {
   }
 };
 
-export const ButtonLink = styled(
-  ({color: _color, underline: _underline, type: _type, ...rest}: Props) => <button {...rest} />,
-)<Props>`
+interface Props extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
+  color?: Colors;
+  underline?: Underline;
+}
+
+export const ButtonLink = styled(({color: _color, underline: _underline, ...rest}: Props) => (
+  <button {...rest} />
+))`
   background: transparent;
   border: 0;
   cursor: pointer;
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/CollapsibleSection.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/CollapsibleSection.tsx
index 4aa3002a5fd05..449db327a3989 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/CollapsibleSection.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/CollapsibleSection.tsx
@@ -28,9 +28,9 @@ export const CollapsibleSection = ({
           grow: 1,
           ...(headerWrapperProps?.flex || {}),
         }}
-        onClick={(e) => {
+        onClick={() => {
           setIsCollapsed(!isCollapsed);
-          headerWrapperProps?.onClick?.(e);
+          headerWrapperProps?.onClick?.();
         }}
       >
         {arrowSide === 'left' ? (
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/ConfigTypeSchema.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/ConfigTypeSchema.tsx
index 663a1e9edad17..5ee6366a4d48a 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/ConfigTypeSchema.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/ConfigTypeSchema.tsx
@@ -302,7 +302,10 @@ const HoveredDictEntryContextProvider = React.memo(({children}: {children: React
 });
 
 const DictEntry = React.forwardRef(
-  (props: React.ComponentProps<typeof DictEntryDiv>, ref: React.ForwardedRef<HTMLDivElement>) => {
+  (
+    props: React.ComponentProps<typeof DictEntryDiv>,
+    ref: React.ForwardedRef<HTMLButtonElement>,
+  ) => {
     const {hovered, onMouseEnter, onMouseLeave} =
       React.useContext(HoveredDictEntryContext).useDictEntryHover();
 
@@ -321,7 +324,7 @@ const DictEntry = React.forwardRef(
 );
 
 const DictEntryDiv2 = styled.div``;
-const DictEntryDiv = styled.div<{$hovered?: boolean}>`
+const DictEntryDiv = styled.div<{$hovered: boolean}>`
   border: 1px solid transparent;
 
   ${({$hovered}) =>
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/CursorControls.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/CursorControls.tsx
index 55af0c381ace2..06e85da63b8be 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/CursorControls.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/CursorControls.tsx
@@ -1,5 +1,4 @@
-import {CSSProperties} from 'react';
-import styled from 'styled-components';
+import styled, {CSSProperties} from 'styled-components';
 
 import {Button} from './Button';
 import {Icon} from './Icon';
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/DateRangePickerWrapper.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/DateRangePickerWrapper.tsx
index 3891ae6ec173c..b314f5604116d 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/DateRangePickerWrapper.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/DateRangePickerWrapper.tsx
@@ -67,7 +67,7 @@ const DatePickerContainer = styled.div`
     background-color: ${Colors.backgroundLight()};
     border-color: ${Colors.borderDefault()};
 
-    &:hover {
+    :hover {
       border-color: ${Colors.borderHover()};
     }
   }
@@ -95,7 +95,7 @@ const DatePickerContainer = styled.div`
     border-color: ${Colors.keylineDefault()};
     color: ${Colors.textLight()};
 
-    &:hover {
+    :hover {
       background-color: ${Colors.backgroundBlue()};
       border-color: ${Colors.keylineDefault()};
     }
@@ -104,8 +104,8 @@ const DatePickerContainer = styled.div`
   .CalendarDay__selected {
     background-color: ${Colors.backgroundBlueHover()};
 
-    &:active,
-    &:hover {
+    :active,
+    :hover {
       border-color: ${Colors.keylineDefault()};
     }
   }
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Group.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Group.tsx
index 2f482b739d053..a6fc16978bdc9 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/Group.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/Group.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import {ReactNode} from 'react';
 import styled, {css} from 'styled-components';
 
 import {Box} from './Box';
@@ -53,22 +52,17 @@ export const Group = (props: Props) => {
   );
 };
 
-type GroupChildProps = React.ComponentProps<typeof Box> & {
+type GroupChildProps = {
   empty: boolean;
-  children: ReactNode;
 };
 
-const GroupChild = styled(({empty: _empty, ...rest}: GroupChildProps) => (
-  <Box {...rest} />
-))<GroupChildProps>`
+const GroupChild = styled(({empty: _empty, ...rest}) => <Box {...rest} />)<GroupChildProps>`
   ${({empty}) => (empty ? 'display: none;' : '')}
   pointer-events: auto;
 `;
 
-type InnerProps = React.ComponentProps<typeof Box> & {
-  direction: Direction;
+type InnerProps = {
   spacing: Spacing;
-  children: ReactNode;
 };
 
 const marginAdjustment = (props: InnerProps) => {
@@ -83,7 +77,7 @@ const Outer = styled(Box)`
   pointer-events: none;
 `;
 
-const Inner = styled(({direction: _direction, spacing: _spacing, ...rest}: InnerProps) => (
+const Inner = styled(({direction: _direction, spacing: _spacing, ...rest}) => (
   <Box {...rest} />
 ))<InnerProps>`
   ${marginAdjustment}
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx
index e2326328b9cd2..1e9fb8ff66c27 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/Icon.tsx
@@ -828,14 +828,14 @@ export const Icon = React.memo((props: Props) => {
     />
   );
 });
-export interface IconWrapperProps {
+interface WrapperProps {
   $color: string | null;
   $size: number;
   $img: string;
   $rotation: string | null;
 }
 
-export const IconWrapper = styled.div<IconWrapperProps>`
+export const IconWrapper = styled.div<WrapperProps>`
   width: ${(p) => p.$size}px;
   height: ${(p) => p.$size}px;
   flex-shrink: 0;
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Menu.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Menu.tsx
index 80289c6b286ad..52f383d0e3c5b 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/Menu.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/Menu.tsx
@@ -105,7 +105,7 @@ export const MenuDivider = styled(BlueprintMenuDivider)`
   border-top: 1px solid ${Colors.keylineDefault()};
   margin: 2px 0;
 
-  &:focus {
+  :focus {
     outline: none;
   }
 
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Spinner.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Spinner.tsx
index 44e4a9aa1ed6b..195d4cdee5b16 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/Spinner.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/Spinner.tsx
@@ -1,6 +1,5 @@
 // eslint-disable-next-line no-restricted-imports
 import {Spinner as BlueprintSpinner} from '@blueprintjs/core';
-import {ReactNode} from 'react';
 import styled from 'styled-components';
 
 import {Colors} from './Color';
@@ -54,13 +53,7 @@ export const Spinner = ({
   );
 };
 
-interface WrapperProps {
-  $padding: number;
-  children: ReactNode;
-  title?: string;
-}
-
-export const SpinnerWrapper = styled.div<WrapperProps>`
+export const SpinnerWrapper = styled.div<{$padding: number}>`
   padding: ${({$padding}) => $padding}px;
 `;
 
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/StyledButton.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/StyledButton.tsx
index 04cd935e88e57..e705dc584507c 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/StyledButton.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/StyledButton.tsx
@@ -37,7 +37,7 @@ export const StyledButton = styled.button<StyledButtonProps>`
 
   box-shadow: ${({$strokeColor}) => `${$strokeColor} inset 0px 0px 0px 1px`};
 
-  &:hover:not(:disabled) {
+  :hover:not(:disabled) {
     background-color: ${({$fillColor, $fillColorHover}) =>
       $fillColorHover || $fillColor || 'transparent'};
     box-shadow: ${({$strokeColor, $strokeColorHover}) =>
@@ -48,28 +48,28 @@ export const StyledButton = styled.button<StyledButtonProps>`
     text-decoration: none;
   }
 
-  &:focus,
-  &:focus-visible,
-  &:focus:hover:not(:disabled) {
+  :focus,
+  :focus-visible,
+  :focus:hover:not(:disabled) {
     box-shadow: ${Colors.focusRing()} 0 0 0 2px;
     outline: none;
   }
 
-  &:focus:not(:focus-visible) {
+  :focus:not(:focus-visible) {
     box-shadow: ${({$strokeColor}) =>
       `${$strokeColor} inset 0px 0px 0px 1px, ${Colors.shadowDefault()} 0px 2px 12px 0px;`};
   }
 
-  &:active:not(:disabled) {
+  :active:not(:disabled) {
     filter: brightness(0.95);
   }
 
-  &:disabled {
+  :disabled {
     cursor: default;
     opacity: 0.5;
   }
 
-  &:disabled:hover {
+  :disabled:hover {
     box-shadow: ${({$strokeColor}) => `${$strokeColor} inset 0px 0px 0px 1px`};
   }
 
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/SubwayDot.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/SubwayDot.tsx
index 8d4d6dd37d7a7..3ac18714ded69 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/SubwayDot.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/SubwayDot.tsx
@@ -93,8 +93,8 @@ const Blob = styled.div<BlobProps>`
   user-select: none;
   width: ${({$blobSize}) => `${$blobSize}px`};
 
-  &:focus,
-  &:active {
+  :focus,
+  :active {
     outline: none;
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Tabs.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Tabs.tsx
index 2a7cbb86ffeb6..766dba6bd3a27 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/Tabs.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/Tabs.tsx
@@ -117,34 +117,32 @@ export const Tab = styled((props: TabProps) => {
   ${tabCSS}
 `;
 
-type TabsProps = Omit<React.HTMLProps<HTMLDivElement>, 'size' | 'onChange'> & {
-  children: Array<React.ReactElement<TabProps> | null>;
+interface TabsProps {
+  children: Array<React.ReactElement<TabProps>>;
   selectedTabId?: string;
   onChange?: (selectedTabId: string) => void;
   size?: 'small' | 'large';
-};
+}
 
-export const Tabs = styled(
-  ({selectedTabId, children, onChange, size = 'large', ...rest}: TabsProps) => {
-    return (
-      <div {...rest} role="tablist">
-        {React.Children.map(children, (child) =>
-          child
-            ? React.cloneElement(child, {
-                selected: child.props.selected || child.props.id === selectedTabId,
-                $size: size,
-                ...(onChange
-                  ? {
-                      onClick: () => child.props.id && onChange(child.props.id),
-                    }
-                  : {}),
-              })
-            : null,
-        )}
-      </div>
-    );
-  },
-)<TabsProps>`
+export const Tabs = styled(({selectedTabId, children, onChange, size = 'large', ...rest}) => {
+  return (
+    <div {...rest} role="tablist">
+      {React.Children.map(children, (child) =>
+        child
+          ? React.cloneElement(child, {
+              selected: child.props.selected || child.props.id === selectedTabId,
+              $size: size,
+              ...(onChange
+                ? {
+                    onClick: () => onChange(child.props.id),
+                  }
+                : {}),
+            })
+          : null,
+      )}
+    </div>
+  );
+})<TabsProps>`
   display: flex;
   gap: 16px;
   font-size: ${({size}) => (size === 'small' ? '12px' : '14px')};
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/TextInput.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/TextInput.tsx
index cd8390a474990..3d243b6bb0539 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/TextInput.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/TextInput.tsx
@@ -101,11 +101,11 @@ export const TextInputStyles = css`
   margin: 0;
   transition: box-shadow 150ms;
 
-  &::placeholder {
+  ::placeholder {
     color: ${Colors.textLighter()};
   }
 
-  &:disabled {
+  :disabled {
     box-shadow:
       ${Colors.borderDisabled()} inset 0px 0px 0px 1px,
       ${Colors.keylineDefault()} inset 2px 2px 1.5px;
@@ -113,11 +113,11 @@ export const TextInputStyles = css`
     color: ${Colors.textDisabled()};
   }
 
-  &:disabled::placeholder {
+  :disabled::placeholder {
     color: ${Colors.textDisabled()};
   }
 
-  &:focus {
+  :focus {
     box-shadow:
       ${Colors.borderDefault()} inset 0px 0px 0px 1px,
       ${Colors.keylineDefault()} inset 2px 2px 1.5px,
@@ -147,11 +147,11 @@ const StyledInput = styled.input<StyledInputProps>`
   box-shadow: ${({$strokeColor}) => $strokeColor || Colors.borderDefault()} inset 0px 0px 0px 1px;
   padding: ${({$hasIcon}) => ($hasIcon ? '6px 6px 6px 28px' : '6px 6px 6px 12px')};
 
-  &:hover {
+  :hover {
     box-shadow: ${({$strokeColor}) => $strokeColor || Colors.borderHover()} inset 0px 0px 0px 1px;
   }
 
-  &:focus {
+  :focus {
     box-shadow:
       ${({$strokeColor}) => $strokeColor || Colors.borderHover()} inset 0px 0px 0px 1px,
       ${Colors.focusRing()} 0 0 0 2px;
@@ -169,11 +169,11 @@ export const TextArea = styled.textarea<TextAreaProps>`
 
   box-shadow: ${({$strokeColor}) => $strokeColor || Colors.borderDefault()} inset 0px 0px 0px 1px;
 
-  &:hover {
+  :hover {
     box-shadow: ${({$strokeColor}) => $strokeColor || Colors.borderHover()} inset 0px 0px 0px 1px;
   }
 
-  &:focus {
+  :focus {
     box-shadow:
       ${({$strokeColor}) => $strokeColor || Colors.borderHover()} inset 0px 0px 0px 1px,
       ${Colors.focusRing()} 0px 0px 0px 2px;
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/Toaster.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/Toaster.tsx
index bb39bca4beb7f..df80ee2129752 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/Toaster.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/Toaster.tsx
@@ -6,9 +6,7 @@ import {Colors} from './Color';
 import {Icon, IconName, IconWrapper} from './Icon';
 import {createToaster} from './createToaster';
 
-// The component has no props. Props are typed as `any` in order to avoid `IconWrapper`
-// props being required at the callsite.
-export const GlobalToasterStyle = createGlobalStyle<any>`
+export const GlobalToasterStyle = createGlobalStyle`
   .dagster-toaster {
     .bp5-toast {
       padding: 8px 12px;
@@ -22,7 +20,7 @@ export const GlobalToasterStyle = createGlobalStyle<any>`
     .bp5-button-group {
       padding: 2px;
     }
-
+  
     .bp5-toast-message {
       display: flex;
       align-items: center;
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/UnstyledButton.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/UnstyledButton.tsx
index ffcddd8585168..449762fbbdfe4 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/UnstyledButton.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/UnstyledButton.tsx
@@ -26,7 +26,7 @@ export const UnstyledButton = styled.button<Props>`
           padding: ${$expandedClickPx}px;
           margin: -${$expandedClickPx}px;
         `
-      : ''}
+      : null}
 
   &:disabled {
     color: inherit;
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/VirtualizedTable.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/VirtualizedTable.tsx
index 4401f89a06621..0261036dab8ed 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/VirtualizedTable.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/VirtualizedTable.tsx
@@ -25,11 +25,11 @@ export const RowCell = ({children}: {children?: React.ReactNode}) => (
 );
 
 const CellBox = styled(Box)`
-  &:first-child {
+  :first-child {
     padding-left: 24px;
   }
 
-  &:last-child {
+  :last-child {
     padding-right: 24px;
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/Tabs.stories.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/Tabs.stories.tsx
index 978878284d95f..3e6c6c2cdd4cc 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/Tabs.stories.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/Tabs.stories.tsx
@@ -27,7 +27,7 @@ export const Default = () => {
         <Tab id="backfills" title="Backfills" disabled />
         <Tab id="config" title={<a href="/?path=/story/box">Box Component</a>} />
       </Tabs>
-      <Tabs size="small" selectedTabId={tab} onChange={setTab}>
+      <Tabs small selectedTabId={tab} onChange={setTab}>
         <Tab id="health" title="Health" />
         <Tab id="schedules" title="Schedules" count={2} disabled />
         <Tab
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/Toaster.stories.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/Toaster.stories.tsx
index 663802a2e2a3d..05e43a73fd756 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/Toaster.stories.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/Toaster.stories.tsx
@@ -29,64 +29,63 @@ export const Sizes = () => {
   };
 
   return (
-    <>
+    <Group direction="column" spacing={16}>
       <GlobalToasterStyle />
-      <Group direction="column" spacing={16}>
-        <Button
-          onClick={async () =>
-            await showSharedToaster({
-              intent: Intent.NONE,
-              message: 'Code location reloaded',
-              timeout: 300000,
-              icon: 'done',
-            })
-          }
-        >
-          Basic Toast with Icon
-        </Button>
-        <Button
-          onClick={async () =>
-            await showSharedToaster({
-              intent: Intent.SUCCESS,
-              timeout: 300000,
-              message: (
-                <div>
-                  Created backfill job:{' '}
-                  <strong>
-                    <code>12345</code>
-                  </strong>
-                </div>
-              ),
-            })
-          }
-        >
-          Success Toast with React Content
-        </Button>
-        <Button
-          onClick={async () =>
-            await showSharedToaster({
-              intent: Intent.DANGER,
-              timeout: 300000,
-              message: 'This is an error message',
-              icon: 'error',
-            })
-          }
-        >
-          Error Toast
-        </Button>
-        <Button
-          onClick={async () =>
-            await showSharedToaster({
-              intent: Intent.PRIMARY,
-              timeout: 5000,
-              message: 'This is a primary toaster',
-              icon: 'account_circle',
-            })
-          }
-        >
-          Primary Toast
-        </Button>
-      </Group>
-    </>
+
+      <Button
+        onClick={async () =>
+          await showSharedToaster({
+            intent: Intent.NONE,
+            message: 'Code location reloaded',
+            timeout: 300000,
+            icon: 'done',
+          })
+        }
+      >
+        Basic Toast with Icon
+      </Button>
+      <Button
+        onClick={async () =>
+          await showSharedToaster({
+            intent: Intent.SUCCESS,
+            timeout: 300000,
+            message: (
+              <div>
+                Created backfill job:{' '}
+                <strong>
+                  <code>12345</code>
+                </strong>
+              </div>
+            ),
+          })
+        }
+      >
+        Success Toast with React Content
+      </Button>
+      <Button
+        onClick={async () =>
+          await showSharedToaster({
+            intent: Intent.DANGER,
+            timeout: 300000,
+            message: 'This is an error message',
+            icon: 'error',
+          })
+        }
+      >
+        Error Toast
+      </Button>
+      <Button
+        onClick={async () =>
+          await showSharedToaster({
+            intent: Intent.PRIMARY,
+            timeout: 5000,
+            message: 'This is a primary toaster',
+            icon: 'account_circle',
+          })
+        }
+      >
+        Primary Toast
+      </Button>
+    </Group>
   );
 };
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/useSuggestionsForString.stories.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/useSuggestionsForString.stories.tsx
index 6084c1967594c..aa716cdf47404 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/useSuggestionsForString.stories.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/__stories__/useSuggestionsForString.stories.tsx
@@ -59,7 +59,7 @@ export const Example = () => {
         {suggestions.map((suggestion) => (
           <div key={suggestion}>
             <ButtonLink
-              onMouseDown={(e: React.MouseEvent<HTMLButtonElement>) => {
+              onMouseDown={(e: React.MouseEvent<any>) => {
                 e.preventDefault();
                 setValue(onSelectSuggestion(suggestion));
               }}
diff --git a/js_modules/dagster-ui/packages/ui-core/package.json b/js_modules/dagster-ui/packages/ui-core/package.json
index ff98bbec75a34..c0f2a72bbe0b8 100644
--- a/js_modules/dagster-ui/packages/ui-core/package.json
+++ b/js_modules/dagster-ui/packages/ui-core/package.json
@@ -32,11 +32,9 @@
     "react-router": "^5.2.1",
     "react-router-dom": "^5.3.0",
     "react-router-dom-v5-compat": "^6.3.0",
-    "styled-components": "^6",
-    "stylis": "^4"
+    "styled-components": "^5.3.3"
   },
   "dependencies": {
-    "@emotion/is-prop-valid": "^1.3.1",
     "@koale/useworker": "^4.0.2",
     "@tanstack/react-virtual": "^3.0.1",
     "@testing-library/react-hooks": "^7.0.2",
@@ -129,10 +127,11 @@
     "@types/mdx-js__react": "^1",
     "@types/qs": "^6.9.6",
     "@types/react": "^18.3.9",
-    "@types/react-dom": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "@types/react-router": "^5.1.17",
     "@types/react-router-dom": "^5.3.3",
     "@types/spark-md5": "^3",
+    "@types/styled-components": "^5.1.26",
     "@types/testing-library__jest-dom": "^5.14.2",
     "@types/ws": "^6.0.3",
     "@typescript-eslint/eslint-plugin": "^8.9.0",
@@ -165,8 +164,7 @@
     "react-router-dom-v5-compat": "^6.3.0",
     "resize-observer-polyfill": "^1.5.1",
     "storybook": "^8.2.7",
-    "styled-components": "^6",
-    "stylis": "^4",
+    "styled-components": "^5.3.3",
     "ts-node": "9.1.1",
     "ts-prune": "0.10.3",
     "typescript": "5.5.4",
diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/AppProvider.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/AppProvider.tsx
index 284588acd0c7b..f92823501710b 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/app/AppProvider.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/app/AppProvider.tsx
@@ -2,12 +2,10 @@ import {RetryLink} from '@apollo/client/link/retry';
 import {WebSocketLink} from '@apollo/client/link/ws';
 import {getMainDefinition, isMutationOperation} from '@apollo/client/utilities';
 import {CustomTooltipProvider} from '@dagster-io/ui-components';
-import isPropValid from '@emotion/is-prop-valid';
 import * as React from 'react';
 import {useContext} from 'react';
 import {BrowserRouter} from 'react-router-dom';
 import {CompatRouter} from 'react-router-dom-v5-compat';
-import {StyleSheetManager, WebTarget} from 'styled-components';
 import {SubscriptionClient} from 'subscriptions-transport-ws';
 import {v4 as uuidv4} from 'uuid';
 
@@ -188,33 +186,31 @@ export const AppProvider = (props: AppProviderProps) => {
         <ApolloProvider client={apolloClient}>
           <AssetLiveDataProvider>
             <PermissionsProvider>
-              <StyleSheetManager shouldForwardProp={shouldForwardProp}>
-                <BrowserRouter basename={basePath || ''}>
-                  <CompatRouter>
-                    <TimeProvider>
-                      <CodeLinkProtocolProvider>
-                        <WorkspaceProvider>
-                          <DeploymentStatusProvider include={statusPolling}>
-                            <CustomConfirmationProvider>
-                              <AnalyticsContext.Provider value={analytics}>
-                                <InstancePageContext.Provider value={instancePageValue}>
-                                  <LayoutProvider>
-                                    <DagsterPlusLaunchPromotion />
-                                    {props.children}
-                                  </LayoutProvider>
-                                </InstancePageContext.Provider>
-                              </AnalyticsContext.Provider>
-                            </CustomConfirmationProvider>
-                            <CustomTooltipProvider />
-                            <CustomAlertProvider />
-                            <AssetRunLogObserver />
-                          </DeploymentStatusProvider>
-                        </WorkspaceProvider>
-                      </CodeLinkProtocolProvider>
-                    </TimeProvider>
-                  </CompatRouter>
-                </BrowserRouter>
-              </StyleSheetManager>
+              <BrowserRouter basename={basePath || ''}>
+                <CompatRouter>
+                  <TimeProvider>
+                    <CodeLinkProtocolProvider>
+                      <WorkspaceProvider>
+                        <DeploymentStatusProvider include={statusPolling}>
+                          <CustomConfirmationProvider>
+                            <AnalyticsContext.Provider value={analytics}>
+                              <InstancePageContext.Provider value={instancePageValue}>
+                                <LayoutProvider>
+                                  <DagsterPlusLaunchPromotion />
+                                  {props.children}
+                                </LayoutProvider>
+                              </InstancePageContext.Provider>
+                            </AnalyticsContext.Provider>
+                          </CustomConfirmationProvider>
+                          <CustomTooltipProvider />
+                          <CustomAlertProvider />
+                          <AssetRunLogObserver />
+                        </DeploymentStatusProvider>
+                      </WorkspaceProvider>
+                    </CodeLinkProtocolProvider>
+                  </TimeProvider>
+                </CompatRouter>
+              </BrowserRouter>
             </PermissionsProvider>
           </AssetLiveDataProvider>
         </ApolloProvider>
@@ -223,20 +219,6 @@ export const AppProvider = (props: AppProviderProps) => {
   );
 };
 
-// This implements the default behavior from styled-components v5.
-// If we can ensure that all styled-components props are migrated to transient
-// props (myProp -> -$myProp), we can remove this function.
-// https://styled-components.com/docs/faqs#shouldforwardprop-is-no-longer-provided-by-default
-function shouldForwardProp(propName: string, target: WebTarget) {
-  if (typeof target === 'string') {
-    // For HTML elements, forward the prop if it is a valid HTML attribute
-    return isPropValid(propName);
-  }
-
-  // For other elements, forward all props
-  return true;
-}
-
 export const usePrefixedCacheKey = (key: string) => {
   const {localCacheIdPrefix} = useContext(AppContext);
   return `${localCacheIdPrefix}/${key}`;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/AppTopNav.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/AppTopNav.tsx
index 1ec1bdfbd54dd..c7bcbe54c1157 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/AppTopNav.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/app/AppTopNav/AppTopNav.tsx
@@ -177,18 +177,18 @@ export const TopNavLink = styled(NavLink)`
   padding: 24px 0;
   text-decoration: none;
 
-  &:hover {
+  :hover {
     color: ${Colors.navTextHover()};
     text-decoration: none;
   }
 
-  &:active,
+  :active,
   &.active {
     color: ${Colors.navTextSelected()};
     text-decoration: none;
   }
 
-  &:focus {
+  :focus {
     outline: none !important;
     color: ${Colors.navTextSelected()};
   }
@@ -234,15 +234,15 @@ const NavButton = styled.button`
     transition: background 100ms linear;
   }
 
-  &:hover ${IconWrapper} {
+  :hover ${IconWrapper} {
     background: ${Colors.navTextHover()};
   }
 
-  &:active ${IconWrapper} {
+  :active ${IconWrapper} {
     background: ${Colors.navTextHover()};
   }
 
-  &:focus {
+  :focus {
     background: ${Colors.navButton()};
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/GlobalStyleProvider.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/GlobalStyleProvider.tsx
index d67a9893c4ba8..5465daa552df3 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/app/GlobalStyleProvider.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/app/GlobalStyleProvider.tsx
@@ -68,16 +68,16 @@ const GlobalStyle = createGlobalStyle`
     font-variant-ligatures: none;
   }
 
-  &:focus-visible {
+  :focus-visible {
     outline: ${Colors.focusRing()} auto 1px;
   }
 
-  &:focus:not(:focus-visible) {
+  :focus:not(:focus-visible) {
     outline: none;
   }
 
-  &:not(a):focus,
-  &:not(a):focus-visible {
+  :not(a):focus,
+  :not(a):focus-visible {
     outline-offset: 1px;
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/app/TopNavButton.tsx b/js_modules/dagster-ui/packages/ui-core/src/app/TopNavButton.tsx
index e0f14c9393d77..4b11f5e7b876f 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/app/TopNavButton.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/app/TopNavButton.tsx
@@ -11,12 +11,12 @@ export const TopNavButton = styled(UnstyledButton)`
   align-items: center;
   justify-content: center;
 
-  &:hover,
-  &:focus {
+  :hover,
+  :focus {
     background-color: ${Colors.navButtonHover()};
   }
 
-  &:focus:not(:active) {
+  :focus:not(:active) {
     outline: ${Colors.focusRing()} auto 1px;
   }
 
@@ -25,7 +25,7 @@ export const TopNavButton = styled(UnstyledButton)`
     transition: background-color 100ms linear;
   }
 
-  &:focus ${IconWrapper}, &:hover ${IconWrapper} {
+  :focus ${IconWrapper}, :hover ${IconWrapper} {
     background-color: ${Colors.navTextHover()};
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AllIndividualEventsButton.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AllIndividualEventsButton.tsx
index 0825b50f14273..d9f420cdc8810 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/assets/AllIndividualEventsButton.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AllIndividualEventsButton.tsx
@@ -389,7 +389,7 @@ const DisclosureTriangleButton = styled.button<{$open: boolean}>`
     opacity: 0.25;
   }
 
-  &:focus {
+  :focus {
     outline: none;
 
     ${IconWrapper} {
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventList.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventList.tsx
index 96334fab099fb..bc3585f50b4c4 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventList.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetEventList.tsx
@@ -137,9 +137,9 @@ export const AssetListRow = styled(Row)<{$focused: boolean}>`
   cursor: pointer;
   user-select: none;
 
-  &:focus,
-  &:active,
-  &:hover {
+  :focus,
+  :active,
+  :hover {
     outline: none;
     background: ${Colors.backgroundLight()};
   }
@@ -147,7 +147,7 @@ export const AssetListRow = styled(Row)<{$focused: boolean}>`
     p.$focused &&
     `background: ${Colors.backgroundBlue()};
      color: ${Colors.textBlue()};
-     &:hover {
+     :hover {
        background: ${Colors.backgroundBlue()};
      }
     `}
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPageHeader.oss.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPageHeader.oss.tsx
index 9b5d41ce4f444..fad106e3612ab 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPageHeader.oss.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AssetPageHeader.oss.tsx
@@ -129,7 +129,7 @@ const CopyButton = styled.button`
   padding: 3px;
   margin-top: 2px;
 
-  &:focus {
+  :focus {
     outline: none;
   }
 
@@ -137,7 +137,7 @@ const CopyButton = styled.button`
     transition: background-color 100ms linear;
   }
 
-  &:hover ${IconWrapper} {
+  :hover ${IconWrapper} {
     background-color: ${Colors.accentGrayHover()};
   }
 `;
@@ -181,8 +181,8 @@ const BreadcrumbLink = styled(Link)`
   color: ${Colors.textLight()};
   white-space: nowrap;
 
-  &:hover,
-  &:active {
+  :hover,
+  :active {
     color: ${Colors.textLight()};
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/AutomaterializeRequestedPartitionsLink.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/AutomaterializeRequestedPartitionsLink.tsx
index 85ceaa0dad5f4..e0fb1d2fe7905 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/AutomaterializeRequestedPartitionsLink.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/AutomaterializeRequestedPartitionsLink.tsx
@@ -305,7 +305,7 @@ export const RUN_STATUS_AND_PARTITION_KEY = gql`
 `;
 
 const TagLink = styled(Link)`
-  &:focus {
+  :focus {
     outline: none;
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/CollapsibleSection.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/CollapsibleSection.tsx
index 068da3e3dfb4d..9f713fee970fd 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/CollapsibleSection.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/CollapsibleSection.tsx
@@ -72,7 +72,7 @@ const SectionHeader = styled.button`
   padding: 0;
   margin: 0;
 
-  &:focus {
+  :focus {
     outline: none;
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/PartitionSubsetList.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/PartitionSubsetList.tsx
index 09efcdb99187d..1f5527acc6b72 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/PartitionSubsetList.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/PartitionSubsetList.tsx
@@ -195,7 +195,7 @@ const PartitionStatusDot = styled.div<{$color: string; $hoverColor: string}>`
   border-radius: 50%;
   transition: background-color 100ms linear;
 
-  &:hover {
+  :hover {
     background-color: ${({$hoverColor}) => $hoverColor};
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/VirtualizedAssetPartitionListForDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/VirtualizedAssetPartitionListForDialog.tsx
index 3919e271fbc7e..8299b10bc0fb0 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/VirtualizedAssetPartitionListForDialog.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/assets/AutoMaterializePolicyPage/VirtualizedAssetPartitionListForDialog.tsx
@@ -138,7 +138,7 @@ const PartitionNameButton = styled.button`
   align-items: center;
   gap: 8px;
 
-  &:focus {
+  :focus {
     outline: none;
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetChecksTabs.tsx b/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetChecksTabs.tsx
index ef635e57f4ad8..bd5380d6d1933 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetChecksTabs.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/assets/asset-checks/AssetChecksTabs.tsx
@@ -9,7 +9,7 @@ interface Props {
 
 export const AssetChecksTabs = ({activeTab, onChange}: Props) => {
   return (
-    <Tabs selectedTabId={activeTab} onChange={(tabId) => onChange(tabId as AssetChecksTabType)}>
+    <Tabs selectedTabId={activeTab} onChange={onChange}>
       <Tab id="overview" title="Overview" />
       <Tab id="execution-history" title="Execution history" />
     </Tabs>
diff --git a/js_modules/dagster-ui/packages/ui-core/src/code-location/CodeLocationAssetsList.tsx b/js_modules/dagster-ui/packages/ui-core/src/code-location/CodeLocationAssetsList.tsx
index fe7e57d498207..2627ba4aa759e 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/code-location/CodeLocationAssetsList.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/code-location/CodeLocationAssetsList.tsx
@@ -219,12 +219,12 @@ const GroupNameRow = (props: GroupNameRowProps) => {
 const ClickableRow = styled(Row)<{$open: boolean}>`
   cursor: pointer;
 
-  &:focus,
-  &:active {
+  :focus,
+  :active {
     outline: none;
   }
 
-  ${IconWrapper}[aria-label='arrow_drop_down'] {
+  ${IconWrapper}[aria-label="arrow_drop_down"] {
     transition: transform 100ms linear;
     ${({$open}) => ($open ? null : `transform: rotate(-90deg);`)}
   }
diff --git a/js_modules/dagster-ui/packages/ui-core/src/code-location/CodeLocationSearchableList.tsx b/js_modules/dagster-ui/packages/ui-core/src/code-location/CodeLocationSearchableList.tsx
index d47f71a1a9dc0..7fdf41ef644ff 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/code-location/CodeLocationSearchableList.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/code-location/CodeLocationSearchableList.tsx
@@ -119,8 +119,8 @@ export const SearchableListRow = ({iconName, label, path}: SearchableListRowProp
 };
 
 const ListLink = styled(Link)`
-  &:active,
-  &:focus {
+  :active,
+  :focus {
     outline: none;
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/gantt/ZoomSlider.tsx b/js_modules/dagster-ui/packages/ui-core/src/gantt/ZoomSlider.tsx
index 241de647fa69a..9859314f9537f 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/gantt/ZoomSlider.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/gantt/ZoomSlider.tsx
@@ -52,8 +52,6 @@ export const ZoomSlider = React.memo((props: {value: number; onChange: (v: numbe
   );
 });
 
-const ZoomSliderContainer = styled.div<{
-  $fillColor: string;
-}>`
+const ZoomSliderContainer = styled.div`
   ${SliderStyles}
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/graph/SVGViewport.tsx b/js_modules/dagster-ui/packages/ui-core/src/graph/SVGViewport.tsx
index 5360530b260a5..429441a0ef715 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/graph/SVGViewport.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/graph/SVGViewport.tsx
@@ -260,16 +260,16 @@ const IconButton = styled.button`
   position: relative;
   border-radius: 8px;
   transition: background 200ms ease-in-out;
-
-  &:hover {
+}
+  :hover {
     background-color: ${Colors.backgroundLightHover()};
   }
 
-  &:focus {
+  :focus {
     outline: none;
   }
 
-  &:active {
+  :active {
     background-color: ${Colors.backgroundLight()};
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillRow.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillRow.tsx
index 36ca4fb201b28..ba9d038c696e4 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillRow.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillRow.tsx
@@ -311,7 +311,7 @@ const TagButton = styled.button`
   padding: 0;
   margin: 0;
 
-  &:focus {
+  :focus {
     outline: none;
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillStatusTagForPage.tsx b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillStatusTagForPage.tsx
index 020e138da2bb2..09e087bee92ed 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillStatusTagForPage.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/instance/backfill/BackfillStatusTagForPage.tsx
@@ -55,7 +55,7 @@ const TagButton = styled.button`
   padding: 0;
   margin: 0;
 
-  &:focus {
+  :focus {
     outline: none;
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/instigation/TickHistory.tsx b/js_modules/dagster-ui/packages/ui-core/src/instigation/TickHistory.tsx
index e3c5a1b806ea4..4b65d1891a343 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/instigation/TickHistory.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/instigation/TickHistory.tsx
@@ -606,11 +606,11 @@ const CopyButton = styled.button`
     transition: background-color 100ms;
   }
 
-  &:hover ${IconWrapper} {
+  :hover ${IconWrapper} {
     background-color: ${Colors.accentGrayHover()};
   }
 
-  &:focus ${IconWrapper} {
+  :focus ${IconWrapper} {
     background-color: ${Colors.linkDefault()};
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/launchpad/ConfigEditorConfigPicker.tsx b/js_modules/dagster-ui/packages/ui-core/src/launchpad/ConfigEditorConfigPicker.tsx
index 7cefd83813dff..40d453f9c8a05 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/launchpad/ConfigEditorConfigPicker.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/launchpad/ConfigEditorConfigPicker.tsx
@@ -445,11 +445,11 @@ export const SortButton = styled.button`
   border-radius: 4px;
   transition: background-color 100ms;
 
-  &:focus {
+  :focus {
     background-color: ${Colors.backgroundLighterHover()};
     outline: none;
   }
-  &:hover {
+  :hover {
     ${IconWrapper} {
       background-color: ${Colors.backgroundLight()};
     }
diff --git a/js_modules/dagster-ui/packages/ui-core/src/nav/LeftNavItem.tsx b/js_modules/dagster-ui/packages/ui-core/src/nav/LeftNavItem.tsx
index 2131314d42d31..df739a14ca3c0 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/nav/LeftNavItem.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/nav/LeftNavItem.tsx
@@ -221,9 +221,9 @@ const SensorScheduleDialogButton = styled.button`
   border: 0;
   cursor: pointer;
 
-  &:focus,
-  &:active,
-  &:hover {
+  :focus,
+  :active,
+  :hover {
     outline: none;
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/nav/RepoNavItem.tsx b/js_modules/dagster-ui/packages/ui-core/src/nav/RepoNavItem.tsx
index af6748936b896..9dbf021527916 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/nav/RepoNavItem.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/nav/RepoNavItem.tsx
@@ -198,7 +198,7 @@ const ReloadButton = styled.button`
   padding: 8px;
   margin: -8px;
 
-  &:focus:not(:focus-visible) {
+  :focus:not(:focus-visible) {
     outline: none;
   }
 
@@ -206,7 +206,7 @@ const ReloadButton = styled.button`
     transition: color 0.1s ease-in-out;
   }
 
-  &:hover ${IconWrapper} {
+  :hover ${IconWrapper} {
     color: ${Colors.accentBlue()};
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/nav/RepoSelector.tsx b/js_modules/dagster-ui/packages/ui-core/src/nav/RepoSelector.tsx
index e4f37d2017419..12ae651ef8e62 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/nav/RepoSelector.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/nav/RepoSelector.tsx
@@ -129,12 +129,12 @@ const RepoLabel = styled.label`
   user-select: none;
   white-space: nowrap;
 
-  &:focus,
-  &:active {
+  :focus,
+  :active {
     outline: none;
   }
 
-  &:hover {
+  :hover {
     filter: opacity(0.8);
   }
 `;
@@ -188,11 +188,11 @@ const ReloadButtonInner = styled.button`
   margin: -6px;
   outline: none;
 
-  &:disabled {
+  :disabled {
     cursor: default;
   }
 
-  &:disabled ${IconWrapper} {
+  :disabled ${IconWrapper} {
     background-color: ${Colors.textDisabled()};
     transition: background-color 100ms;
   }
@@ -202,11 +202,11 @@ const ReloadButtonInner = styled.button`
     transition: background-color 100ms;
   }
 
-  &:hover:not(:disabled) ${IconWrapper} {
+  :hover:not(:disabled) ${IconWrapper} {
     background-color: ${Colors.textLighter()};
   }
 
-  &:focus ${IconWrapper} {
+  :focus ${IconWrapper} {
     background-color: ${Colors.linkDefault()};
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/nav/RepositoryLink.tsx b/js_modules/dagster-ui/packages/ui-core/src/nav/RepositoryLink.tsx
index 94841be55c6bd..1e4f42a30f9f7 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/nav/RepositoryLink.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/nav/RepositoryLink.tsx
@@ -95,11 +95,11 @@ const StyledButton = styled.button`
   padding: 0;
   margin: 0;
 
-  &:disabled {
+  :disabled {
     cursor: default;
   }
 
-  &:focus:not(:focus-visible) {
+  :focus:not(:focus-visible) {
     outline: none;
   }
 
@@ -108,7 +108,7 @@ const StyledButton = styled.button`
     transition: color 100ms linear;
   }
 
-  &:hover ${IconWrapper} {
+  :hover ${IconWrapper} {
     color: ${Colors.accentBlue()};
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewSensors.tsx b/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewSensors.tsx
index 2e5ec5d1dd472..e62362c0b88a3 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewSensors.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewSensors.tsx
@@ -285,9 +285,6 @@ export const OverviewSensors = () => {
   };
 
   const showSearchSpinner = queryLoading && !data;
-  const sensorDaemonStatus = data?.instance.daemonHealth.allDaemonStatuses.find(
-    (status) => status.daemonType === 'SENSOR',
-  );
 
   return (
     <>
@@ -344,7 +341,7 @@ export const OverviewSensors = () => {
       ) : (
         <>
           <SensorInfo
-            sensorDaemonStatus={sensorDaemonStatus}
+            daemonHealth={data?.instance.daemonHealth}
             padding={{vertical: 16, horizontal: 24}}
             border="top"
           />
diff --git a/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewTabs.tsx b/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewTabs.tsx
index 4955214c43e60..6fe7e563a27de 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewTabs.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/overview/OverviewTabs.tsx
@@ -25,9 +25,9 @@ export const OverviewTabs = <TData extends Record<string, any>>(props: Props<TDa
     <Box flex={{direction: 'row', justifyContent: 'space-between', alignItems: 'flex-end'}}>
       <Tabs selectedTabId={tab}>
         <TabLink id="activity" title="Timeline" to="/overview/activity" />
-        {enableAssetHealthOverviewPreview ? (
+        {enableAssetHealthOverviewPreview && (
           <TabLink id="asset-health" title="Asset health" to="/overview/asset-health" />
-        ) : null}
+        )}
         {automaterializeSensorsFlagState === 'has-global-amp' ? (
           <TabLink
             id="amp"
diff --git a/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarComponents.tsx b/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarComponents.tsx
index a7f100ad6bfc5..bffde57d9d709 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarComponents.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/pipelines/SidebarComponents.tsx
@@ -53,7 +53,7 @@ export const SidebarTitle = styled.h3`
   overflow: hidden;
   text-overflow: ellipsis;
 
-  &:first-child:last-child {
+  :first-child:last-child {
     margin-bottom: 0;
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RawLogContent.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RawLogContent.tsx
index 2ad237f6b8b1b..38d7010a5231f 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/runs/RawLogContent.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RawLogContent.tsx
@@ -74,7 +74,7 @@ export const RawLogContent = React.memo((props: Props) => {
 
   return (
     <>
-      <FileContainer $isVisible={isVisible}>
+      <FileContainer isVisible={isVisible}>
         {showScrollToTop ? (
           <ScrollToast>
             <ScrollToTop
@@ -107,7 +107,7 @@ export const RawLogContent = React.memo((props: Props) => {
           </LoadingContainer>
         ) : null}
       </FileContainer>
-      {location ? <FileFooter $isVisible={isVisible}>{location}</FileFooter> : null}
+      {location ? <FileFooter isVisible={isVisible}>{location}</FileFooter> : null}
     </>
   );
 });
@@ -350,16 +350,16 @@ const ContentContainer = styled.div`
   background-color: ${Colors.backgroundLight()};
 `;
 
-const FileContainer = styled.div<{$isVisible: boolean}>`
+const FileContainer = styled.div`
   flex: 1;
   height: 100%;
   position: relative;
   display: flex;
   flex-direction: column;
-  ${({$isVisible}) => ($isVisible ? null : 'display: none;')}
+  ${({isVisible}: {isVisible: boolean}) => (isVisible ? null : 'display: none;')}
 `;
 
-const FileFooter = styled.div<{$isVisible: boolean}>`
+const FileFooter = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -369,7 +369,7 @@ const FileFooter = styled.div<{$isVisible: boolean}>`
   color: ${Colors.textLight()};
   padding: 2px 5px;
   font-size: 0.85em;
-  ${({$isVisible}) => ($isVisible ? null : 'display: none;')}
+  ${({isVisible}: {isVisible: boolean}) => (isVisible ? null : 'display: none;')}
 `;
 
 const FileContent = styled.div`
@@ -434,7 +434,7 @@ const ScrollToTop = styled.button`
   cursor: pointer;
   transition: background-color 100ms linear;
 
-  &:hover {
+  :hover {
     background-color: ${Colors.backgroundLighterHover()};
     border-color: ${Colors.borderHover()};
   }
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunStatusPez.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunStatusPez.tsx
index 6d607cf1d0850..c872313221cc8 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/runs/RunStatusPez.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RunStatusPez.tsx
@@ -126,7 +126,7 @@ const SummaryContainer = styled.div`
   white-space: nowrap;
   padding: 4px 8px 8px;
 
-  &:empty {
+  :empty {
     display: none;
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/RunTimeline.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/RunTimeline.tsx
index d5e19eeeaf4cc..558f4173e8edc 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/runs/RunTimeline.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/runs/RunTimeline.tsx
@@ -530,7 +530,7 @@ const DividerLabels = styled.div`
   width: 100%;
   overflow: hidden;
 
-  &:first-child {
+  :first-child {
     box-shadow:
       inset 1px 0 0 ${Colors.keylineDefault()},
       inset -1px 0 0 ${Colors.keylineDefault()};
@@ -542,7 +542,7 @@ const DateLabel = styled.div`
   padding: 8px 0;
   white-space: nowrap;
 
-  &:not(:first-child) {
+  :not(:first-child) {
     box-shadow: inset 1px 0 0 ${Colors.keylineDefault()};
   }
 `;
@@ -740,7 +740,7 @@ export const TimelineRowContainer = styled.div.attrs<RowProps>(({$height, $start
   overflow: hidden;
   transition: background-color 100ms linear;
 
-  &:hover {
+  :hover {
     background-color: ${Colors.backgroundDefaultHover()};
   }
 `;
@@ -784,7 +784,7 @@ export const RunChunk = styled.div<ChunkProps>`
     opacity 200ms linear,
     width 200ms ease-in-out;
 
-  &:hover {
+  :hover {
     opacity: 0.7;
   }
   .chunk-popover-target {
diff --git a/js_modules/dagster-ui/packages/ui-core/src/schedules/CronTag.tsx b/js_modules/dagster-ui/packages/ui-core/src/schedules/CronTag.tsx
index 27f3c982b1fe2..a9032489b0cf9 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/schedules/CronTag.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/schedules/CronTag.tsx
@@ -53,7 +53,7 @@ const Container = styled.div`
   .bp5-popover-target {
     max-width: 100%;
 
-    &:focus {
+    :focus {
       outline: none;
     }
   }
diff --git a/js_modules/dagster-ui/packages/ui-core/src/search/SearchDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/search/SearchDialog.tsx
index e9855337ff37c..5f50a72c81fed 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/search/SearchDialog.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/search/SearchDialog.tsx
@@ -260,7 +260,7 @@ export const SearchBox = styled.div<SearchBoxProps>`
   padding: 12px 20px 12px 12px;
   transition: all 100ms linear;
 
-  &:hover {
+  :hover {
     box-shadow: ${({$hasQueryString}) =>
         $hasQueryString ? Colors.keylineDefault() : Colors.borderHover()}
       0 0 0 1px inset;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorPageAutomaterialize.tsx b/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorPageAutomaterialize.tsx
index c5c86a569183d..747d5e3600db5 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorPageAutomaterialize.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/sensors/SensorPageAutomaterialize.tsx
@@ -167,7 +167,7 @@ export const SensorPageAutomaterialize = (props: Props) => {
 
   return (
     <>
-      <SensorInfo assetDaemonStatus={daemonStatus} padding={{vertical: 16, horizontal: 24}} />
+      <SensorInfo assetDaemonHealth={daemonStatus} padding={{vertical: 16, horizontal: 24}} />
       <Box padding={{vertical: 12, horizontal: 24}} border="bottom">
         <Subtitle2>Evaluation timeline</Subtitle2>
       </Box>
diff --git a/js_modules/dagster-ui/packages/ui-core/src/typeexplorer/TypeWithTooltip.tsx b/js_modules/dagster-ui/packages/ui-core/src/typeexplorer/TypeWithTooltip.tsx
index 4e0c094cd8d7f..5ab6582a83de1 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/typeexplorer/TypeWithTooltip.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/typeexplorer/TypeWithTooltip.tsx
@@ -36,7 +36,7 @@ export const DAGSTER_TYPE_WITH_TOOLTIP_FRAGMENT = gql`
 `;
 
 const TypeLink = styled(Link)`
-  &:hover {
+  :hover {
     text-decoration: none;
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/ui/BaseFilters/FilterDropdown.tsx b/js_modules/dagster-ui/packages/ui-core/src/ui/BaseFilters/FilterDropdown.tsx
index 8633111ac972f..48f72748e91c3 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/ui/BaseFilters/FilterDropdown.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/ui/BaseFilters/FilterDropdown.tsx
@@ -400,9 +400,9 @@ const TextInputWrapper = styled.div`
     padding: 12px 16px;
 
     &,
-    &:focus,
-    &:active,
-    &:hover {
+    :focus,
+    :active,
+    :hover {
       box-shadow: none;
       background-color: ${Colors.popoverBackground()};
     }
diff --git a/js_modules/dagster-ui/packages/ui-core/src/ui/ClearButton.tsx b/js_modules/dagster-ui/packages/ui-core/src/ui/ClearButton.tsx
index d0a0f7a6f3470..415ad954c9e21 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/ui/ClearButton.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/ui/ClearButton.tsx
@@ -13,15 +13,15 @@ export const ClearButton = styled.button`
     transition: background-color 100ms linear;
   }
 
-  &:hover ${IconWrapper}, &:focus ${IconWrapper} {
+  :hover ${IconWrapper}, :focus ${IconWrapper} {
     background-color: ${Colors.accentGrayHover()};
   }
 
-  &:active ${IconWrapper} {
+  :active ${IconWrapper} {
     background-color: ${Colors.textDefault()};
   }
 
-  &:focus {
+  :focus {
     outline: none;
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/ui/SectionedLeftNav.tsx b/js_modules/dagster-ui/packages/ui-core/src/ui/SectionedLeftNav.tsx
index b408c4d03380d..3952f2d14b291 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/ui/SectionedLeftNav.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/ui/SectionedLeftNav.tsx
@@ -507,22 +507,22 @@ const SectionHeader = styled.button<{
 
   box-shadow: inset 0px 1px 0 ${Colors.keylineDefault()}, inset 0px -1px 0 ${Colors.keylineDefault()};
 
-  &:disabled {
+  :disabled {
     cursor: default;
   }
 
-  &:hover,
-  &:active {
+  :hover,
+  :active {
     background-color: ${Colors.backgroundLightHover()};
   }
 
-  &:disabled:hover,
-  &:disabled:active {
+  :disabled:hover,
+  :disabled:active {
     background-color: ${Colors.backgroundDisabled()};
   }
 
-  &:focus,
-  &:active {
+  :focus,
+  :active {
     outline: none;
   }
 
@@ -531,7 +531,7 @@ const SectionHeader = styled.button<{
     ${({$open}) => ($open ? null : `transform: rotate(-90deg);`)}
   }
 
-  &:disabled ${IconWrapper} {
+  :disabled ${IconWrapper} {
     background-color: ${Colors.textDisabled()};
   }
 
@@ -540,11 +540,11 @@ const SectionHeader = styled.button<{
     margin-left: 6px;
   }
 
-  &:not(:disabled) ${StyledTag} {
+  :not(:disabled) ${StyledTag} {
     cursor: pointer;
   }
 
-  &:disabled ${StyledTag} {
+  :disabled ${StyledTag} {
     color: ${Colors.textDisabled()};
   }
 }`;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/ui/SideNavItem.tsx b/js_modules/dagster-ui/packages/ui-core/src/ui/SideNavItem.tsx
index 47619de7a1768..126da6c56a51f 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/ui/SideNavItem.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/ui/SideNavItem.tsx
@@ -76,14 +76,14 @@ const sharedSideNavItemStyle = css<{$active: boolean}>`
   user-select: none;
   width: 100%;
 
-  &:focus {
+  :focus {
     outline: none;
     background-color: ${({$active}) =>
       $active ? Colors.backgroundBlue() : Colors.backgroundLight()};
   }
 
-  &:hover,
-  &:active {
+  :hover,
+  :active {
     background-color: ${({$active}) =>
       $active ? Colors.backgroundBlue() : Colors.backgroundLightHover()};
     color: ${({$active}) => ($active ? Colors.textBlue() : Colors.textDefault())};
diff --git a/js_modules/dagster-ui/packages/ui-core/src/ui/TagActions.tsx b/js_modules/dagster-ui/packages/ui-core/src/ui/TagActions.tsx
index 493f3148bbbe1..c6411049ac7e5 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/ui/TagActions.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/ui/TagActions.tsx
@@ -71,11 +71,11 @@ const TagButtonSharedStyles = css`
   opacity: 0.85;
   transition: opacity 50ms linear;
 
-  &:not(:last-child) {
+  :not(:last-child) {
     box-shadow: -1px 0 0 inset ${Colors.borderHover()};
   }
 
-  &:focus {
+  :focus {
     outline: none;
   }
 `;
@@ -83,7 +83,7 @@ const TagButtonSharedStyles = css`
 const TagButton = styled.button`
   ${TagButtonSharedStyles}
 
-  &:hover {
+  :hover {
     opacity: 1;
   }
 `;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/ui/VirtualizedTable.tsx b/js_modules/dagster-ui/packages/ui-core/src/ui/VirtualizedTable.tsx
index c5c87886ac7e8..d29c096b1b7f2 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/ui/VirtualizedTable.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/ui/VirtualizedTable.tsx
@@ -42,7 +42,7 @@ export const HeaderCell = ({
   ...rest
 }: React.ComponentProps<typeof CellBox>) => {
   // no text select
-  const clickStyle = onClick ? {cursor: 'pointer', userSelect: 'none' as const} : {};
+  const clickStyle = onClick ? {cursor: 'pointer', userSelect: 'none'} : {};
 
   return (
     <CellBox
@@ -82,11 +82,11 @@ export const RowCell = ({
 
 export const CellBox = styled(Box)`
   overflow: hidden;
-  &:first-child {
+  :first-child {
     padding-left: 24px;
   }
 
-  &:last-child {
+  :last-child {
     padding-right: 24px;
     box-shadow: none;
   }
diff --git a/js_modules/dagster-ui/packages/ui-core/src/workspace/RepositoryCountTags.tsx b/js_modules/dagster-ui/packages/ui-core/src/workspace/RepositoryCountTags.tsx
index 2fba4e6f9439d..ea7860b34e624 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/workspace/RepositoryCountTags.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/workspace/RepositoryCountTags.tsx
@@ -60,8 +60,8 @@ export const RepositoryCountTags = ({
 };
 
 const CountLink = styled(Link)`
-  &:hover,
-  &:active {
+  :hover,
+  :active {
     outline: none;
     text-decoration: none;
   }
diff --git a/js_modules/dagster-ui/packages/ui-core/src/workspace/TableSectionHeader.tsx b/js_modules/dagster-ui/packages/ui-core/src/workspace/TableSectionHeader.tsx
index 65ef8923fdb8a..f6114589f58f5 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/workspace/TableSectionHeader.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/workspace/TableSectionHeader.tsx
@@ -45,16 +45,16 @@ const SectionHeaderButton = styled.button<{$open: boolean}>`
   height: ${SECTION_HEADER_HEIGHT}px;
   text-align: left;
 
-  &:focus,
-  &:active {
+  :focus,
+  :active {
     outline: none;
   }
 
-  &:hover {
+  :hover {
     background-color: ${Colors.backgroundLightHover()};
   }
 
-  ${IconWrapper}[aria-label='arrow_drop_down'] {
+  ${IconWrapper}[aria-label="arrow_drop_down"] {
     transition: transform 100ms linear;
     ${({$open}) => ($open ? null : `transform: rotate(-90deg);`)}
   }
diff --git a/js_modules/dagster-ui/yarn.lock b/js_modules/dagster-ui/yarn.lock
index 0db59a3eab6db..d9c6f31c057f1 100644
--- a/js_modules/dagster-ui/yarn.lock
+++ b/js_modules/dagster-ui/yarn.lock
@@ -353,6 +353,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/generator@npm:^7.25.6":
+  version: 7.25.6
+  resolution: "@babel/generator@npm:7.25.6"
+  dependencies:
+    "@babel/types": "npm:^7.25.6"
+    "@jridgewell/gen-mapping": "npm:^0.3.5"
+    "@jridgewell/trace-mapping": "npm:^0.3.25"
+    jsesc: "npm:^2.5.1"
+  checksum: 10/541e4fbb6ea7806f44232d70f25bf09dee9a57fe43d559e375536870ca5261ebb4647fec3af40dcbb3325ea2a49aff040e12a4e6f88609eaa88f10c4e27e31f8
+  languageName: node
+  linkType: hard
+
 "@babel/helper-annotate-as-pure@npm:^7.18.6, @babel/helper-annotate-as-pure@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-annotate-as-pure@npm:7.22.5"
@@ -628,6 +640,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/helper-module-imports@npm:7.24.7"
+  dependencies:
+    "@babel/traverse": "npm:^7.24.7"
+    "@babel/types": "npm:^7.24.7"
+  checksum: 10/df8bfb2bb18413aa151ecd63b7d5deb0eec102f924f9de6bc08022ced7ed8ca7fed914562d2f6fa5b59b74a5d6e255dc35612b2bc3b8abf361e13f61b3704770
+  languageName: node
+  linkType: hard
+
 "@babel/helper-module-imports@npm:^7.10.4, @babel/helper-module-imports@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-module-imports@npm:7.22.5"
@@ -646,16 +668,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.24.7":
-  version: 7.24.7
-  resolution: "@babel/helper-module-imports@npm:7.24.7"
-  dependencies:
-    "@babel/traverse": "npm:^7.24.7"
-    "@babel/types": "npm:^7.24.7"
-  checksum: 10/df8bfb2bb18413aa151ecd63b7d5deb0eec102f924f9de6bc08022ced7ed8ca7fed914562d2f6fa5b59b74a5d6e255dc35612b2bc3b8abf361e13f61b3704770
-  languageName: node
-  linkType: hard
-
 "@babel/helper-module-transforms@npm:^7.22.5, @babel/helper-module-transforms@npm:^7.22.9":
   version: 7.22.9
   resolution: "@babel/helper-module-transforms@npm:7.22.9"
@@ -862,6 +874,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-string-parser@npm:^7.24.8":
+  version: 7.24.8
+  resolution: "@babel/helper-string-parser@npm:7.24.8"
+  checksum: 10/6d1bf8f27dd725ce02bdc6dffca3c95fb9ab8a06adc2edbd9c1c9d68500274230d1a609025833ed81981eff560045b6b38f7b4c6fb1ab19fc90e5004e3932535
+  languageName: node
+  linkType: hard
+
 "@babel/helper-validator-identifier@npm:^7.22.20":
   version: 7.22.20
   resolution: "@babel/helper-validator-identifier@npm:7.22.20"
@@ -1087,6 +1106,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/parser@npm:^7.25.0, @babel/parser@npm:^7.25.6":
+  version: 7.25.6
+  resolution: "@babel/parser@npm:7.25.6"
+  dependencies:
+    "@babel/types": "npm:^7.25.6"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 10/830aab72116aa14eb8d61bfa8f9d69fc8f3a43d909ce993cb4350ae14d3af1a2f740a54410a22d821c48a253263643dfecbc094f9608e6a70ce9ff3c0bbfe91a
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.24.7":
   version: 7.24.7
   resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.24.7"
@@ -3271,6 +3301,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/template@npm:^7.25.0":
+  version: 7.25.0
+  resolution: "@babel/template@npm:7.25.0"
+  dependencies:
+    "@babel/code-frame": "npm:^7.24.7"
+    "@babel/parser": "npm:^7.25.0"
+    "@babel/types": "npm:^7.25.0"
+  checksum: 10/07ebecf6db8b28244b7397628e09c99e7a317b959b926d90455c7253c88df3677a5a32d1501d9749fe292a263ff51a4b6b5385bcabd5dadd3a48036f4d4949e0
+  languageName: node
+  linkType: hard
+
 "@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.14.0, @babel/traverse@npm:^7.16.8, @babel/traverse@npm:^7.22.10, @babel/traverse@npm:^7.22.6, @babel/traverse@npm:^7.22.8":
   version: 7.23.2
   resolution: "@babel/traverse@npm:7.23.2"
@@ -3325,6 +3366,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/traverse@npm:^7.4.5":
+  version: 7.25.6
+  resolution: "@babel/traverse@npm:7.25.6"
+  dependencies:
+    "@babel/code-frame": "npm:^7.24.7"
+    "@babel/generator": "npm:^7.25.6"
+    "@babel/parser": "npm:^7.25.6"
+    "@babel/template": "npm:^7.25.0"
+    "@babel/types": "npm:^7.25.6"
+    debug: "npm:^4.3.1"
+    globals: "npm:^11.1.0"
+  checksum: 10/de75a918299bc27a44ec973e3f2fa8c7902bbd67bd5d39a0be656f3c1127f33ebc79c12696fbc8170a0b0e1072a966d4a2126578d7ea2e241b0aeb5d16edc738
+  languageName: node
+  linkType: hard
+
 "@babel/types@npm:^7.0.0, @babel/types@npm:^7.1.6, @babel/types@npm:^7.16.8, @babel/types@npm:^7.18.13, @babel/types@npm:^7.20.7, @babel/types@npm:^7.22.5, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3":
   version: 7.22.5
   resolution: "@babel/types@npm:7.22.5"
@@ -3391,6 +3447,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/types@npm:^7.25.0, @babel/types@npm:^7.25.6":
+  version: 7.25.6
+  resolution: "@babel/types@npm:7.25.6"
+  dependencies:
+    "@babel/helper-string-parser": "npm:^7.24.8"
+    "@babel/helper-validator-identifier": "npm:^7.24.7"
+    to-fast-properties: "npm:^2.0.0"
+  checksum: 10/7b54665e1b51f525fe0f451efdd9fe7a4a6dfba3fd4956c3530bc77336b66ffe3d78c093796ed044119b5d213176af7cf326f317a2057c538d575c6cefcb3562
+  languageName: node
+  linkType: hard
+
 "@base2/pretty-print-object@npm:1.0.1":
   version: 1.0.1
   resolution: "@base2/pretty-print-object@npm:1.0.1"
@@ -3525,7 +3592,8 @@ __metadata:
     "@types/jest": "npm:^29.5.11"
     "@types/node": "npm:^16.11.20"
     "@types/react": "npm:^18.3.9"
-    "@types/react-dom": "npm:^18.3.1"
+    "@types/react-dom": "npm:^18.3.0"
+    "@types/styled-components": "npm:^5.1.26"
     "@types/uuid": "npm:^8.3.4"
     "@types/validator": "npm:^13"
     "@types/webpack-bundle-analyzer": "npm:^4"
@@ -3549,8 +3617,7 @@ __metadata:
     react-router-dom: "npm:^5.3.0"
     react-router-dom-v5-compat: "npm:^6.3.0"
     recoil: "npm:^0.7.7"
-    styled-components: "npm:^6"
-    stylis: "npm:^4"
+    styled-components: "npm:^5.3.3"
     typescript: "npm:5.5.4"
     uuid: "npm:^9.0.0"
     validator: "npm:^13.7.0"
@@ -3639,8 +3706,9 @@ __metadata:
     "@types/mdx-js__react": "npm:^1"
     "@types/react": "npm:^18.3.9"
     "@types/react-dates": "npm:^21.8.0"
-    "@types/react-dom": "npm:^18.3.1"
+    "@types/react-dom": "npm:^18.3.0"
     "@types/react-is": "npm:^18.3.0"
+    "@types/styled-components": "npm:^5.1.26"
     "@types/testing-library__jest-dom": "npm:^5.14.2"
     amator: "npm:^1.1.0"
     babel-jest: "npm:^27.4.6"
@@ -3674,8 +3742,7 @@ __metadata:
     react: ^18.3.1
     react-dom: ^18.3.1
     react-is: ^18.3.1
-    styled-components: ^6
-    stylis: ^4
+    styled-components: ^5.3.3
   languageName: unknown
   linkType: soft
 
@@ -3700,7 +3767,6 @@ __metadata:
     "@chromatic-com/storybook": "npm:^1.6.1"
     "@dagster-io/eslint-config": "workspace:*"
     "@dagster-io/ui-components": "workspace:*"
-    "@emotion/is-prop-valid": "npm:^1.3.1"
     "@graphql-codegen/add": "npm:^5.0.2"
     "@graphql-codegen/cli": "npm:^5.0.2"
     "@graphql-codegen/near-operation-file-preset": "npm:^3.0.0"
@@ -3735,10 +3801,11 @@ __metadata:
     "@types/mdx-js__react": "npm:^1"
     "@types/qs": "npm:^6.9.6"
     "@types/react": "npm:^18.3.9"
-    "@types/react-dom": "npm:^18.3.1"
+    "@types/react-dom": "npm:^18.3.0"
     "@types/react-router": "npm:^5.1.17"
     "@types/react-router-dom": "npm:^5.3.3"
     "@types/spark-md5": "npm:^3"
+    "@types/styled-components": "npm:^5.1.26"
     "@types/testing-library__jest-dom": "npm:^5.14.2"
     "@types/ws": "npm:^6.0.3"
     "@typescript-eslint/eslint-plugin": "npm:^8.9.0"
@@ -3807,8 +3874,7 @@ __metadata:
     spark-md5: "npm:^3.0.2"
     storybook: "npm:^8.2.7"
     strip-markdown: "npm:^6.0.0"
-    styled-components: "npm:^6"
-    stylis: "npm:^4"
+    styled-components: "npm:^5.3.3"
     subscriptions-transport-ws: "npm:^0.9.15"
     ts-node: "npm:9.1.1"
     ts-prune: "npm:0.10.3"
@@ -3827,8 +3893,7 @@ __metadata:
     react-router: ^5.2.1
     react-router-dom: ^5.3.0
     react-router-dom-v5-compat: ^6.3.0
-    styled-components: ^6
-    stylis: ^4
+    styled-components: ^5.3.3
   languageName: unknown
   linkType: soft
 
@@ -3848,16 +3913,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/is-prop-valid@npm:1.2.2":
-  version: 1.2.2
-  resolution: "@emotion/is-prop-valid@npm:1.2.2"
-  dependencies:
-    "@emotion/memoize": "npm:^0.8.1"
-  checksum: 10/0fa3960abfbe845d40cc230ab8c9408e1f33d3c03b321980359911c7212133cdcb0344d249e9dab23342b304567eece7a10ec44b986f7230e0640ba00049dceb
-  languageName: node
-  linkType: hard
-
-"@emotion/is-prop-valid@npm:^1.3.1":
+"@emotion/is-prop-valid@npm:^1.1.0":
   version: 1.3.1
   resolution: "@emotion/is-prop-valid@npm:1.3.1"
   dependencies:
@@ -3866,13 +3922,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/memoize@npm:^0.8.1":
-  version: 0.8.1
-  resolution: "@emotion/memoize@npm:0.8.1"
-  checksum: 10/a19cc01a29fcc97514948eaab4dc34d8272e934466ed87c07f157887406bc318000c69ae6f813a9001c6a225364df04249842a50e692ef7a9873335fbcc141b0
-  languageName: node
-  linkType: hard
-
 "@emotion/memoize@npm:^0.9.0":
   version: 0.9.0
   resolution: "@emotion/memoize@npm:0.9.0"
@@ -3880,10 +3929,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/unitless@npm:0.8.1":
-  version: 0.8.1
-  resolution: "@emotion/unitless@npm:0.8.1"
-  checksum: 10/918f73c46ac0b7161e3c341cc07d651ce87e31ab1695e74b12adb7da6bb98dfbff8c69cf68a4e40d9eb3d820ca055dc1267aeb3007927ce88f98b885bf729b63
+"@emotion/stylis@npm:^0.8.4":
+  version: 0.8.5
+  resolution: "@emotion/stylis@npm:0.8.5"
+  checksum: 10/ceaa673457f501a393cb52873b2bc34dbe35ef0fb8faa4b943d73ecbbb42bc3cea53b87cbf482038b7b9b1f95859be3d8b58d508422b4d15aec5b62314cc3c1e
+  languageName: node
+  linkType: hard
+
+"@emotion/unitless@npm:^0.7.4":
+  version: 0.7.5
+  resolution: "@emotion/unitless@npm:0.7.5"
+  checksum: 10/f976e5345b53fae9414a7b2e7a949aa6b52f8bdbcc84458b1ddc0729e77ba1d1dfdff9960e0da60183877873d3a631fa24d9695dd714ed94bcd3ba5196586a6b
   languageName: node
   linkType: hard
 
@@ -7218,6 +7274,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/hoist-non-react-statics@npm:*":
+  version: 3.3.5
+  resolution: "@types/hoist-non-react-statics@npm:3.3.5"
+  dependencies:
+    "@types/react": "npm:*"
+    hoist-non-react-statics: "npm:^3.3.0"
+  checksum: 10/b645b062a20cce6ab1245ada8274051d8e2e0b2ee5c6bd58215281d0ec6dae2f26631af4e2e7c8abe238cdcee73fcaededc429eef569e70908f82d0cc0ea31d7
+  languageName: node
+  linkType: hard
+
 "@types/html-minifier-terser@npm:^6.0.0":
   version: 6.1.0
   resolution: "@types/html-minifier-terser@npm:6.1.0"
@@ -7456,7 +7522,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:>=16.9.0":
+"@types/react-dom@npm:>=16.9.0, @types/react-dom@npm:^18.3.0":
   version: 18.3.0
   resolution: "@types/react-dom@npm:18.3.0"
   dependencies:
@@ -7465,15 +7531,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:^18.3.1":
-  version: 18.3.1
-  resolution: "@types/react-dom@npm:18.3.1"
-  dependencies:
-    "@types/react": "npm:*"
-  checksum: 10/33f9ba79b26641ddf00a8699c30066b7e3573ab254e97475bf08f82fab83a6d3ce8d4ebad86afeb49bb8df3374390a9ba93125cece33badc4b3e8f7eac3c84d8
-  languageName: node
-  linkType: hard
-
 "@types/react-is@npm:^18.3.0":
   version: 18.3.0
   resolution: "@types/react-is@npm:18.3.0"
@@ -7522,13 +7579,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:*, @types/react@npm:>=16.9.0, @types/react@npm:^16.8.0 || ^17.0.0 || ^18.0.0, @types/react@npm:^18.3.9":
-  version: 18.3.12
-  resolution: "@types/react@npm:18.3.12"
+"@types/react@npm:*, @types/react@npm:>=16.9.0, @types/react@npm:^18.3.9":
+  version: 18.3.9
+  resolution: "@types/react@npm:18.3.9"
+  dependencies:
+    "@types/prop-types": "npm:*"
+    csstype: "npm:^3.0.2"
+  checksum: 10/d1321e874e6523b0a944d4ce514c071cbe44501b04591e17c0b265c9a03fb3e4486337ae1bec74541b72a41f34beef157342205dd07b31d116f4d06fa39cf32f
+  languageName: node
+  linkType: hard
+
+"@types/react@npm:^16.8.0 || ^17.0.0 || ^18.0.0":
+  version: 18.3.3
+  resolution: "@types/react@npm:18.3.3"
   dependencies:
     "@types/prop-types": "npm:*"
     csstype: "npm:^3.0.2"
-  checksum: 10/c9bbdfeacd5347d2240e0d2cb5336bc57dbc1b9ff557b6c4024b49df83419e4955553518169d3736039f1b62608e15b35762a6c03d49bd86e33add4b43b19033
+  checksum: 10/68e203b7f1f91d6cf21f33fc7af9d6d228035a26c83f514981e54aa3da695d0ec6af10c277c6336de1dd76c4adbe9563f3a21f80c4462000f41e5f370b46e96c
   languageName: node
   linkType: hard
 
@@ -7590,10 +7657,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/stylis@npm:4.2.5":
-  version: 4.2.5
-  resolution: "@types/stylis@npm:4.2.5"
-  checksum: 10/f8dde326432a7047b6684b96442f0e2ade2cfe8c29bf56217fb8cbbe4763997051fa9dc0f8dba4aeed2fddb794b4bc91feba913b780666b3adc28198ac7c63d4
+"@types/styled-components@npm:^5.1.26":
+  version: 5.1.34
+  resolution: "@types/styled-components@npm:5.1.34"
+  dependencies:
+    "@types/hoist-non-react-statics": "npm:*"
+    "@types/react": "npm:*"
+    csstype: "npm:^3.0.2"
+  checksum: 10/3da291b46f03d378a0176c9d034deee7ee0684c5d62e1c5ce82f3be0972918eaa806f45c62e9a4f1c8d24c5ba6571c260caba2493fc7e82b528ac7d15903e2c1
   languageName: node
   linkType: hard
 
@@ -9356,6 +9427,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"babel-plugin-styled-components@npm:>= 1.12.0":
+  version: 2.1.4
+  resolution: "babel-plugin-styled-components@npm:2.1.4"
+  dependencies:
+    "@babel/helper-annotate-as-pure": "npm:^7.22.5"
+    "@babel/helper-module-imports": "npm:^7.22.5"
+    "@babel/plugin-syntax-jsx": "npm:^7.22.5"
+    lodash: "npm:^4.17.21"
+    picomatch: "npm:^2.3.1"
+  peerDependencies:
+    styled-components: ">= 2"
+  checksum: 10/34f10dd4d44cf1c8605097dd4796e2d1443266ebc686f10a9f56b5d1492b5c3de9c13d7e30b075756610adf592ed807cc8145189d00b4454f6af9879a19a5e0b
+  languageName: node
+  linkType: hard
+
 "babel-plugin-syntax-trailing-function-commas@npm:^7.0.0-beta.0":
   version: 7.0.0-beta.0
   resolution: "babel-plugin-syntax-trailing-function-commas@npm:7.0.0-beta.0"
@@ -9945,10 +10031,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001517, caniuse-lite@npm:^1.0.30001565, caniuse-lite@npm:^1.0.30001579, caniuse-lite@npm:^1.0.30001629, caniuse-lite@npm:^1.0.30001646":
-  version: 1.0.30001686
-  resolution: "caniuse-lite@npm:1.0.30001686"
-  checksum: 10/dc34d4daa992256b94def2894e478ba4d9786581dff3b180d642d74c7578f7d8958be985d9da5d08f09b81dd9811b653e4980616bae26b1896968cfdf8d535da
+"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001517, caniuse-lite@npm:^1.0.30001565":
+  version: 1.0.30001606
+  resolution: "caniuse-lite@npm:1.0.30001606"
+  checksum: 10/55ee377f9b5e09d290d2a60d339aa1fbab949d3086cfd0546d2896bc57f4df693cf69e9a0c828cb9622df039403927c66ec2d6a7ff4b7580f38846314bdb4800
+  languageName: node
+  linkType: hard
+
+"caniuse-lite@npm:^1.0.30001579":
+  version: 1.0.30001617
+  resolution: "caniuse-lite@npm:1.0.30001617"
+  checksum: 10/eac442b9ad12801086be19f6dc17056827fe398f1c05983357e2531c8183ee890ffc8fb973d54519ad7114a2fd47de8f33ec66d98565b995fef1c6ba02b5bc5b
+  languageName: node
+  linkType: hard
+
+"caniuse-lite@npm:^1.0.30001629":
+  version: 1.0.30001636
+  resolution: "caniuse-lite@npm:1.0.30001636"
+  checksum: 10/9e6c5ab4c20df31df36720dda77cf6a781549ac2ad844bc0a416b327a793da21486358a1f85fdd6c39e22d336f70aac3b0e232f5f228cdff0ceb6e3e1c5e98fd
+  languageName: node
+  linkType: hard
+
+"caniuse-lite@npm:^1.0.30001646":
+  version: 1.0.30001653
+  resolution: "caniuse-lite@npm:1.0.30001653"
+  checksum: 10/cd9b1c0fe03249e593789a11a9ef14f987b385e60441748945916b19e74e7bc5c82c40d4836496a647586651898741aed1598ae0792114a9f0d7d7fdb2b7deb0
   languageName: node
   linkType: hard
 
@@ -10908,7 +11015,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-to-react-native@npm:3.2.0":
+"css-to-react-native@npm:^3.0.0":
   version: 3.2.0
   resolution: "css-to-react-native@npm:3.2.0"
   dependencies:
@@ -11052,13 +11159,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:3.1.3":
-  version: 3.1.3
-  resolution: "csstype@npm:3.1.3"
-  checksum: 10/f593cce41ff5ade23f44e77521e3a1bcc2c64107041e1bf6c3c32adc5187d0d60983292fda326154d20b01079e24931aa5b08e4467cc488b60bb1e7f6d478ade
-  languageName: node
-  linkType: hard
-
 "csstype@npm:^3.0.2":
   version: 3.1.2
   resolution: "csstype@npm:3.1.2"
@@ -14446,7 +14546,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.2.1, hoist-non-react-statics@npm:^3.3.2":
+"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.2.1, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
   dependencies:
@@ -19279,7 +19379,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:8.4.38, postcss@npm:^8.2.14, postcss@npm:^8.4.33, postcss@npm:^8.4.38":
+"postcss@npm:^8.2.14, postcss@npm:^8.4.33, postcss@npm:^8.4.38":
   version: 8.4.38
   resolution: "postcss@npm:8.4.38"
   dependencies:
@@ -21178,7 +21278,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"shallowequal@npm:1.1.0":
+"shallowequal@npm:^1.1.0":
   version: 1.1.0
   resolution: "shallowequal@npm:1.1.0"
   checksum: 10/f4c1de0837f106d2dbbfd5d0720a5d059d1c66b42b580965c8f06bb1db684be8783538b684092648c981294bf817869f743a066538771dbecb293df78f765e00
@@ -21971,23 +22071,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"styled-components@npm:^6":
-  version: 6.1.13
-  resolution: "styled-components@npm:6.1.13"
+"styled-components@npm:^5.3.3":
+  version: 5.3.11
+  resolution: "styled-components@npm:5.3.11"
   dependencies:
-    "@emotion/is-prop-valid": "npm:1.2.2"
-    "@emotion/unitless": "npm:0.8.1"
-    "@types/stylis": "npm:4.2.5"
-    css-to-react-native: "npm:3.2.0"
-    csstype: "npm:3.1.3"
-    postcss: "npm:8.4.38"
-    shallowequal: "npm:1.1.0"
-    stylis: "npm:4.3.2"
-    tslib: "npm:2.6.2"
+    "@babel/helper-module-imports": "npm:^7.0.0"
+    "@babel/traverse": "npm:^7.4.5"
+    "@emotion/is-prop-valid": "npm:^1.1.0"
+    "@emotion/stylis": "npm:^0.8.4"
+    "@emotion/unitless": "npm:^0.7.4"
+    babel-plugin-styled-components: "npm:>= 1.12.0"
+    css-to-react-native: "npm:^3.0.0"
+    hoist-non-react-statics: "npm:^3.0.0"
+    shallowequal: "npm:^1.1.0"
+    supports-color: "npm:^5.5.0"
   peerDependencies:
     react: ">= 16.8.0"
     react-dom: ">= 16.8.0"
-  checksum: 10/8be7bcb156945e876f560b1bef4f2e5a6a214e53fa6e7f98cd7294c83f3cfb2d712c4561d175abcd6d331a65ef5b9b2004c916aa035ddec9633f0661d9c8205c
+    react-is: ">= 16.8.0"
+  checksum: 10/7e1baee0f7b4479fe1a4064e4ae87e40f1ba583030d04827cef73fa7b36d3a91ed552dc76164d319216039f906af42a5229648c023482280fa4b5f71f00eef2d
   languageName: node
   linkType: hard
 
@@ -22019,20 +22121,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stylis@npm:4.3.2":
-  version: 4.3.2
-  resolution: "stylis@npm:4.3.2"
-  checksum: 10/4d3e3cb5cbfc7abdf14e424c8631a15fd15cbf0357ffc641c319587e00c2d1036b1a71cb88b42411bc3ce10d7730ad3fb9789b034d11365e8a19d23f56486c77
-  languageName: node
-  linkType: hard
-
-"stylis@npm:^4":
-  version: 4.3.4
-  resolution: "stylis@npm:4.3.4"
-  checksum: 10/69b902a3c9fc3329c8ddb18d422f8130068356dd4d4a20ae245953679cc88ae08d49c55e32b0b57c8fe8a76f2ed7f32697240b8db4d368a25fc2db045ebaeba8
-  languageName: node
-  linkType: hard
-
 "subscriptions-transport-ws@npm:^0.9.15":
   version: 0.9.19
   resolution: "subscriptions-transport-ws@npm:0.9.19"
@@ -22048,7 +22136,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"supports-color@npm:^5.3.0":
+"supports-color@npm:^5.3.0, supports-color@npm:^5.5.0":
   version: 5.5.0
   resolution: "supports-color@npm:5.5.0"
   dependencies:
@@ -22638,13 +22726,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:2.6.2, tslib@npm:^2.6.2, tslib@npm:~2.6.0":
-  version: 2.6.2
-  resolution: "tslib@npm:2.6.2"
-  checksum: 10/bd26c22d36736513980091a1e356378e8b662ded04204453d353a7f34a4c21ed0afc59b5f90719d4ba756e581a162ecbf93118dc9c6be5acf70aa309188166ca
-  languageName: node
-  linkType: hard
-
 "tslib@npm:^1.13.0, tslib@npm:^1.8.1":
   version: 1.14.1
   resolution: "tslib@npm:1.14.1"
@@ -22659,6 +22740,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tslib@npm:^2.6.2, tslib@npm:~2.6.0":
+  version: 2.6.2
+  resolution: "tslib@npm:2.6.2"
+  checksum: 10/bd26c22d36736513980091a1e356378e8b662ded04204453d353a7f34a4c21ed0afc59b5f90719d4ba756e581a162ecbf93118dc9c6be5acf70aa309188166ca
+  languageName: node
+  linkType: hard
+
 "tslib@npm:~2.4.0":
   version: 2.4.1
   resolution: "tslib@npm:2.4.1"